vue-insagent-pc/src/views/PeopleManage/InstitutionalExtraction.vue

<template>
  <div>
    <templateTable :formList="formList" :searchData.sync="queryFrom" :tableConfig="tableConfig" :data="pageResult"
      @getList="findPage" @handleSearchList="handleSearchList" :pagination="pageData">
    </templateTable>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="70%">
      <el-row>
        <el-col :span="5">
          <templateTable :tableConfig="personneltableConfig" :data="pageResultpersonnel" @getList="findPagepersonnel"
            @rowClick="rowClick">
          </templateTable>
        </el-col>
        <el-col :span="18" :offset="1">
          <templateTable :tableConfig="depttableConfig" :data="pageResultdept" @getList="findPagedept"
            :pagination="pageDatadept">
          </templateTable>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import templateTable from "../../components/TemplateTable/index.vue";
export default {
  components: {
    templateTable,
  },
  data() {
    return {
      dialogVisible: false,
      formList: [
        {
          label: "工号",
          prop: "userId",
          type: "input",
        },
        {
          label: "名称",
          prop: "userName",
          type: "input",
        },
      ],
      tableConfig: {
        columns: [
          // 数据列
          { prop: "userId", label: "工号", type: "text" },
          {
            prop: "userName",
            label: "名称",
            type: "text",
          },
          { prop: "deptId", label: "机构编码", type: "text" },
          { prop: "deptName", label: "机构名称", type: "text" },
          { prop: "sumpremium", label: "总保费", type: "text" },
          { prop: "extractFee", label: "抽成总金额", type: "text" },
          { prop: "historyFee", label: "已提现金额", type: "text" },
          { prop: "cashFee", label: "可提现金额", type: "text" },
        ],
        optBtns: [
          {
            type: "primary",
            label: "详情",
            click: (row, index) => {
              return this.detail(row);
            },
          },
        ],
        loading: true,
        isPaginationShow: true,
        isShowIndex: true,
      },
      personneltableConfig: {
        columns: [
          // 数据列
          { prop: "name", label: "姓名", type: "text" },
        ],
        tableHeight:480,
        loading: true,
        isPaginationShow: false,
        isShowIndex: true,
      },
      depttableConfig: {
        columns: [
          // 数据列
          { prop: "userId", label: "员工编号", type: "text" },
          { prop: "userName", label: "员工姓名", type: "text" },
          { prop: "companyId", label: "子订单编号", type: "text" },
          { prop: "orderstatus", label: "订单状态", type: "statMap",options:[
            {
              label:'报价中',
              value:'0'
            },
            {
              label:'待核保',
              value:'1'
            },
            {
              label:'已核保待缴费',
              value:'2'
            },
            {
              label:'已承保',
              value:'3'
            },
            {
              label:'核保退回',
              value:'4'
            },
          ]},
          { prop: "licenseno", label: "车牌号", type: "text" },
          { prop: "jqpremium", label: "交强险", type: "text" },
          { prop: "sypremium", label: "商业险", type: "text" },
          { prop: "jypremium", label: "驾意险", type: "text" },
          { prop: "sumpremium", label: "总保费", type: "text" },

          { prop: "createtime", label: "创建时间 ", type: "text" },
        ],
        tableHeight:450,
        loading: true,
        isPaginationShow: true,
        isShowIndex: true,
      },
      pageResultpersonnel: [],
      pageResultdept: [],
      pageData: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      pageDatadept: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      queryFrom: {},
      pageResult: [],
      rowDept: '',
      userId: '',
    };
  },
  created() {
    this.findPage();
  },
  methods: {
    detail(row) {
      this.dialogVisible = true
      this.rowDept = row.deptId
      this.findPagepersonnel({ deptId: row.deptId })
      this.findPagedept()
    },
    rowClick(val) {
      this.userId =''
      this.userId = val.id
      this.pageDatadept=   {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      this.findPagedept()
    },
    findPagepersonnel(data) {
      this.personneltableConfig.loading = true;
      this.$api.insCompany
        .queryAgencyUser({
          ...data,
        })
        .then((res) => {
          this.personneltableConfig.loading = false;
          this.pageResultpersonnel = res.data;
        });
    },
    findPagedept(data) {
      this.depttableConfig.loading = true;
      this.$api.insCompany
        .queryAgencyUserInsAreaPage({
          userId: this.userId,
          deptId: this.rowDept,
          ...data,
          ...this.pageDatadept
        })
        .then((res) => {
          this.depttableConfig.loading = false;
          this.pageResultdept = res.data.records;
          this.pageDatadept.pageNum = res.data.current;
          this.pageDatadept.pageSize = res.data.size;
          this.pageDatadept.totalSize = res.data.total;
        });
    },
    // 查询Start
    queryStaffInfo() {
      this.findPage();
    },

    // 右侧列表的方法Start
    findPage(data) {
      this.tableConfig.loading = true;
      this.$api.insCompany
        .queryExtractFeeAll({
          ...this.pageData,
          ...data,
        })
        .then((res) => {
          this.tableConfig.loading = false;
          this.pageResult = res.data.content;
          this.pageData.pageNum = res.data.pageNum;
          this.pageData.pageSize = res.data.pageSize;
          this.pageData.totalSize = res.data.totalSize;
        });
    },

    handleSearchList(data) {
      this.findPage(data);
    },

    // 下一步

  },
};
</script>

<style scoped></style>