hz_crm_web/src/views/custom_manage/compontents/permissionDetail.vue

<template>
  <div class="container-remindDlg">
    <el-dialog title="权限详情" v-dialogDrag :visible.sync="isPermissionDetailShow" :close-on-click-modal="false" :modal-append-to-body="false" @close="cancelHandle" center width="800px">
      <CpessionTableEquity v-if="tableData.length" fromType="detail" :authList="tableData" style="margin-bottom: 20px" />
      <div style="margin: 20px 0" v-if="Points">
        <span>研选服务点数</span>
        <span>{{ Points }}</span>
        <span class="editsty" @click="lookNumber">明细>></span>
      </div>
    </el-dialog>
    <el-dialog title="研选服务点数明细" :visible.sync="isShowResearchNumber" width="80%" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
      <el-table style="margin-bottom: 30px" :data="tableListResearch" border height="500">
        <el-table-column align="center" prop="Content" label="事项"></el-table-column>
        <el-table-column align="center" prop="CreateTime" label="时间"></el-table-column>
        <el-table-column align="center" prop="RealName" label="参会人" width="150"></el-table-column>
        <el-table-column align="center" prop="minNumber" label="小计" width="100">
          <template slot-scope="{ row }">
            <span :style="{ color: row.BillDetailed > 0 ? '#31c640' : '#ec808d' }"> {{ row.BillDetailed > 0 ? "+" + row.BillDetailed : row.BillDetailed }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Points" label="合计" width="100"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { customInterence, equityContacts, raiInterface } from "@/api/api.js";
import CpessionTableEquity from "./CpessionTableEquity.vue";
export default {
  name: "",
  components: { CpessionTableEquity },
  props: {
    isPermissionDetailShow: {
      default: false,
      type: Boolean,
    },
    researchDetailId: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      tableData: [],
      isShowResearchNumber: false, // 研选服务点数明细 弹框
      tableListResearch: [], // 严选数据
      Points: "",
    };
  },
  computed: {},
  watch: {
    isPermissionDetailShow: {
      handler(newVal) {
        newVal && this.getDetailList();
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 弹框关闭的事件
    cancelHandle() {
      this.$emit("update:researchDetailId", 0);
      this.$emit("update:isPermissionDetailShow", false);
      this.tableData = [];
    },
    /* 获取客户详情 */
    async getDetailList() {
      this.tableData = [];
      const res = await customInterence.customDetail({
        CompanyId: this.researchDetailId,
      });
      if (res.Ret !== 200) return;
      this.Points = res.Data.RaiItem.Points || "";
      let auth = [];
      res.Data.RaiItem.PermissionList.forEach((item) => {
        let obj = {
          checkAll: item.CheckList && item.CheckList.length === item.Items.length ? true : false,
          isIndeterminate: item.CheckList && item.CheckList.length > 0 && item.CheckList.length < item.Items.length,
          ...item,
        };
        auth.push(obj);
      });
      this.tableData = auth;
    },
    // 查看
    lookNumber() {
      this.isShowResearchNumber = true;
      this.getDataList();
    },
    // 明细弹框关闭
    handleClose() {
      this.isShowResearchNumber = false;
      this.tableListResearch = [];
    },
    // 获取表格数据
    async getDataList() {
      const res = await raiInterface.activityPointsBill({
        CompanyId: this.researchDetailId,
      });
      if (res.Ret === 200) {
        this.tableListResearch = res.Data.List || [];
      }
    },
  },
};
</script>
<style scoped lang="scss">
.container-remindDlg {
  display: block;
}
</style>