wanda-bm-guide/src/views/other/zhsxOther.vue

<!-- 综合事项记录 -->
<template>
  <div class="zhsx-box">
    <div class="zhsx-top">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item,index) in everySystem"
            :key="index"
            :label="`${item.label}`"
            :name="`${item.type}`"
          >
            <!-- 综合记录事项 -->
            <div v-if="item.type==1">
              <zhsx-other-table1 ref="tableZhsx1"></zhsx-other-table1>
            </div>
            <!-- 第三方检测事项 -->
            <div v-if="item.type==2">
              <zhsx-other-table2 ref="tableZhsx2"></zhsx-other-table2>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="zhsx-img" @click="zhsxLog">
        <img src="../../assets/imgs/zy1.png" alt />
      </div>
    </div>
    <zhsx-dialog ref="Dialog" :tableData="tableData"></zhsx-dialog>
  </div>
</template>
<script>
import moment from "moment";
import { Select } from "meri-design";
// import Select from '@/components/Select/Select.vue'
import ZhsxDialog from "./zhsxDialog";
import zhsxOtherTable1 from "./zhsxOtherTable1";
import zhsxOtherTable2 from "./zhsxOtherTable2";
import { queryZhsxjl } from "@/api/other.js";
export default {
  data() {
    return {
      activeName: "1",
      tableData: []
    };
  },
  props: ["everySystem"],
  components: { ZhsxDialog, Select, zhsxOtherTable1, zhsxOtherTable2 },
  methods: {
    zhsxLog() {
      let params = {
        getParams: {}
      };
      queryZhsxjl(params).then(res => {
        let arr = [];
        let newdata = this.compIndex(res.data);
        //console.log('综合事项弹框', res)
        this.tableData = newdata || [];
        // 将tableData中的第三项都设置为相同的数据
        this.tableData.map(item => {
          arr.push(item.jlsx);
        });
        arr = [...new Set(arr)];
        this.tableData.map(item => {
          item.jlsx = arr.join("\n\r");
        });
      });
      this.$refs.Dialog.open();
    },
    compIndex(ary) {
      var res = [];
      ary.sort();
      var num = 1;
      for (var i = 0; i < ary.length; ) {
        var count = 0;
        for (var j = i; j < ary.length; j++) {
          if (ary[i]["jcsx"] == ary[j]["jcsx"]) {
            count++;
          }
        }
        res.push([ary[i]["jcsx"], num]);
        num = num + 1;
        i += count;
      }
      for (var i = 0; i < ary.length; i++) {
        for (var j = 0; j < res.length; j++) {
          if (ary[i]["jcsx"] == res[j][0]) {
            ary[i]["num"] = res[j][1];
          }
        }
      }
      return ary
    },
    handleClick(tab) {
      if (tab.index == "0") {
        this.$refs.tableZhsx1[0].getZhjl();
      } else if (tab.index == "1") {
        this.$refs.tableZhsx2[0].dsfjc();
      }
    }
  },
  mounted() {
    this.$refs.tableZhsx1[0].getZhjl();
  }
};
</script>
<style lang="less" scoped>
.zhsx-box {
  height: 100%;
  padding: 66px 50px 38px 50px;
  .zhsx-top {
    position: relative;
    .zhsx-img {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 260px;
      top: 3px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tab-top {
      display: flex;
      align-items: center;
    }
  }

  .zhsx-bottom {
    margin-top: 12px;
    background: #ffffff;
    position: relative;
    padding-bottom: 73px;
    .footer {
      height: 32px;
      display: flex;
      justify-content: flex-end;
      margin-top: 28px;
    }
  }
}
</style>
<style lang="less">
.zhsx-box {
  .el-dialog__header {
    padding: 16px 50px;
  }
  .el-dialog__title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
  .el-dialog__body {
    padding: 0 24px;
    height: 90%;
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 16px;
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--top .el-tabs__item.is-top:last-child {
    padding-right: 16px;
  }
  .el-tabs__nav-wrap::after {
    height: 0;
  }
  .el-tabs__item {
    padding: 5px 16px;
    height: 30px;
    line-height: 22px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(31, 36, 41, 1);
    border: 1px solid rgba(195, 199, 203, 1);
    background: #fff;
  }
  /deep/.el-tabs__item:nth-child(2) {
    border-radius: 4px 0 0 4px;
  }
  /deep/.el-tabs__item:last-child {
    border-radius: 0 4px 4px 0;
  }
  .el-tabs,
  .el-tabs__content {
    height: 94%;
  }
  .el-tabs__active-bar {
    background-color: transparent !important;
  }
  .is-active {
    color: #025baa;
    border-color: #025baa;
    border-radius: 4px;
  }
  .el-tabs__header {
    margin: 0 0 12px;
  }
  .el-table td,
  .el-table th {
    padding: 8px 0;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 20px;
  }
  @media screen and (max-width: 1366px) {
    /deep/ .el-table td {
      padding: 3px 0;
    }
  }
}
</style>