middleground_code_v2/src/views/systemSettings/jurisdictionManage/userJurisdiction/dataPermissions.vue

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      :show-header="false"
    >
      <el-table-column prop="billName" label="单据" width="120">
      </el-table-column>
      <el-table-column prop="dataList" label="字段">
        <template slot-scope="scope">
          <i
            class="el-icon-star-on"
            style="
              height: 30px;
              line-height: 30px;
              font-size: 25px;
              margin-right: 7px;
            "
            v-show="
              scope.row.dataList.length != 0 &&
              scope.row.dataList.length == scope.row.buttonList.length
            "
            @click="cancellation(scope.row)"
          ></i>
          <i
            class="el-icon-star-on"
            style="
              height: 30px;
              line-height: 30px;
              font-size: 25px;
              margin-right: 7px;
              color: #808080;
            "
            v-show="
              scope.row.dataList.length != 0 &&
              scope.row.dataList.length != scope.row.buttonList.length
            "
            @click="selectAllButton(scope.row)"
          ></i>
          <el-checkbox-group v-model="scope.row.buttonList" size="small">
            <el-checkbox
              v-for="item in scope.row.dataList"
              :label="item.id"
              :key="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { GetAllBilldata, GetAllBillDataPepedom } from "@/api/apis/jurisdiction";
export default {
  data() {
    return {
      tableData: [],
      selectedList: [],
    };
  },

  created() {
    this.init();
  },

  components: {},

  computed: {},

  mounted() {},

  beforeUpdate() {
    this.handleTabClick();
  },

  methods: {
    selectAllButton(item) {
      let data = [];
      item.dataList.forEach((el) => {
        data.push(el.id);
      });
      item.buttonList = data;
    },
    cancellation(item) {
      item.buttonList = [];
    },
    handleTabClick() {
      this.$nextTick(() => {
        this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
      });
    },
    async init() {
      let data = [];
      const res = await GetAllBilldata({});
      if (res.code == 1) {
        data = res.data[0];
        data.forEach((el) => {
          el.dataList = [];
          el.buttonList = [];
        });
      }
      const item = await GetAllBillDataPepedom({});
      if (item.code == 1) {
        data.forEach((el) => {
          item.data[0].forEach((e) => {
            if (el.billKindID == e.billKindID) {
              el.dataList.push(e);
            }
          });
          this.selectedList.forEach((add) => {
            if (el.billKindID == add.dp_billKindID) {
              el.buttonList = add.dp_popeList.split(",");
            }
          });
        });
      }
      this.tableData = data;
    },
  },
};
</script>
<style scoped lang="scss"></style>