<template> <div class="interactive-wrapper height100"> <el-card class="height100 tree-box"> <div class="tree-title">组织机构</div> <div class="tree-body"> <el-input suffix-icon="el-icon-search" placeholder="请输入组织结构名称" v-model="filterText" ></el-input> <div class="tree-content"> <el-tree class="org-tree" :data="treeData" :props="defaultProps" accordion :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree" > <div class="custom-tree-node" slot-scope="{ node, data }" :class="'tree-node-level' + data.level" > <i class="icon-org" v-if="data.level === 1"></i> <span>{{ node.label }}</span> </div> </el-tree> </div> </div> </el-card> <el-card class="height100 detail-box" ref="rightBox"> <div class="content-title"> <div class="title">"{{selectOrgName}}" 展板互动信息汇总</div> <div class="page-tip"> <span class="page-tip-title">页面说明:</span> <span class="page-tips">可查看某个组织机构的互动信息</span> </div> </div> <div class="scrollBox" v-show="tableData.length"> <div class="content-item" v-for="(item, index) in tableData" :key="index" > <h5 class="title">{{ item.boardName }}</h5> <p>{{ item.content||'暂无内容' }}</p> <div class="img-box" v-if="item.images.length"> <a target="_blank" v-for="(j, idx) in item.images" :key="idx" :href="j.url"> <img :src="j.cover" alt="" /> </a> <!-- <img v-for="(j, idx) in item.images" :src="j" :key="idx" alt="" /> --> </div> <div class="img-box" v-if="!item.images.length">暂无数据</div> <div class="author"> <div>{{ item.username }}</div> <div>{{ item.createTime }}</div> </div> </div> </div> <party-pagination v-show="tableData.length" :page="page" @changePage="handleCurrentChange"/> </el-card> </div> </template> <script> import { partyPagination} from "@/components/index"; export default { components: { partyPagination }, data() { return { filterText: "", page: { _index: 1, _size: 10, total: 0, }, treeData: [], defaultProps: { children: "children", label: "name", }, selectOrgId: "", selectOrgName: "", tableData: [], }; }, watch: { filterText(val) { this.$refs.tree.filter(val); }, }, mounted() { // 获取全部组织机构数据 this.getOrgData(); // this.onSearch() }, methods: { // 查询 onSearch() { this.page._index = 1; this.getTableData(); }, // 获得数据接口 getTableData() { let vm = this; vm.tableData = []; let param = { _index: this.page._index, _size: this.page._size, orgId: this.selectOrgId, }; vm.$https( { url: "interaction/getList", method: "post", authType: this.backToken, }, vm.$qs.stringify(param) ) .then((res) => { if (res.data.resultCode === "200") { let data = res.data.data; vm.page.total = data.total; vm.tableData = data.records; if(!vm.tableData.length){ this.$message('暂无数据') return false } vm.tableData.forEach((item) => { item.images = item.images ? item.images.split(",") : []; item.images.forEach((result, index) => { item.images[index] = { url:result } if (/\.(MP4|mp4)/.test(result)) { item.images[index].cover = require("@/assets/video-icon.png"); } else if (/\.(MP3|mp3)/.test(result)) { item.images[index].cover = require("@/assets/audio-icon.png"); } else if(/\.(jpg|png|jpeg|bmp|gif)/.test(result)) { item.images[index].cover = result; } else{ item.images[index].cover = require("@/assets/default-img.jpeg");; } }); }); vm.tableData = [...vm.tableData]; } else { this.$message.error(res.data.message); } }) .catch(function (err) { console.log(err); }); }, // 获取组织机构数据 getOrgData() { this.$https({ method: "get", url: "organ/getTree", authType: this.backToken, }).then( (res) => { if (res.data.resultCode === "200") { this.treeData = res.data.data; } else { this.$message.error(res.data.message); } }, (error) => { console.log(error); } ); }, // 过滤树结构数据 filterNode(value, data) { if (!value) return true; return data.name.indexOf(value) !== -1; }, // 点击节点事件 handleNodeClick(data) { this.selectOrgId = data.id; this.selectOrgName = data.name; this.onSearch(); }, // 分页 handleCurrentChange(val) { this.page._index = val; this.getTableData(); }, }, }; </script> <style lang="less"> .interactive-wrapper { display: flex; .tree-box { width: 420px; .tree-body { padding: 20px; height: calc(100% - 56px); .tree-content { overflow-y: auto; height: calc(100% - 50px); } .el-input { margin-bottom: 10px; .el-input__inner { background: #f8f8f8; border-radius: 22px; } .el-input__icon { font-size: 18px; color: #ac9374; } } } } .detail-box { width: calc(100% - 440px); margin-left: 20px; } .scrollBox { height: calc(100% - 160px); overflow-y: auto; } .page-tip { display: flex; font-size: 14px; color: #333333; line-height: 30px; .page-tip-title { font-weight: bold; padding-right: 10px; } } .el-card__body { padding: 0; height: 100%; } .tree-title { font-size: 16px; color: #fff; text-align: center; height: 56px; line-height: 56px; background: #9b1e23; border-radius: 8px 8px 0 0; } .content-title { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid #eee; .title { font-size: 20px; color: #333; } .page-tips { width: 220px; } } .content-item { font-size: 16px; margin: 20px; padding: 40px; background: #f8f8f8; .title { padding-bottom: 20px; } p { padding-bottom: 20px; border-bottom: 1px solid #bbb; } .img-box { padding: 20px; border-bottom: 1px solid #bbb; img { width: 90px; height: 90px; margin-right: 20px; } } .author { display: flex; justify-content: space-between; padding-top: 16px; font-size: 14px; } } } </style>