index.vue

<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">“北京市政府”展板互动信息汇总</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.name }}</h5>
          <p>{{ item.content }}</p>
          <div class="img-box" v-if="item.images.length">
            <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>
      <div class="partyt-pagination" style="margin: 0 20px"  v-show="tableData.length">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="prev, pager, next, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filterText: "",
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectAreaId: "",
      tableData: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    // 获取全部组织机构数据
    this.getOrgData();
    // this.onSearch()
  },
  methods: {
    // 查询
    onSearch() {
      this.page.currentPage = 1;
      this.getTableData();
    },
    // 获得数据接口
    getTableData() {
      let vm = this;
      vm.tableData = [];
      let param = {
        _index: this.page.currentPage,
        _size: this.page.pageSize,
        orgId: this.selectAreaId,
      };
      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) => {
                if (/\.(MP4|mp4)/.test(result)) {
                  item.images[index] = require("@/assets/video-icon.png");
                } else if (/\.(MP3|mp3)/.test(result)) {
                  item.images[index] = require("@/assets/audio-icon.png");
                }
              });
            });

            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.selectAreaId = data.id;
      this.onSearch();
    },
    // 分页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    },
  },
};
</script>
<style lang="less">
@import "~@/style/pagination.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>