MTP2.0_WEB/src/views/information/custom/index.vue

<template>
  <!-- 客户资料 -->
  <mtp-table-scroll>
    <template #header>
      <Filter @search="search">
        <mtp-table-button class="btn-list-sticky" :buttons="addButton" @click="openComponent" />
      </Filter>
    </template>
    <template #default="{ scroll }">
      <a-table :columns="getColumns(columns)" class="srcollYTable" :scroll="scroll" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
        <!-- 额外的展开行 -->
        <template #expandedRowRender="{ record }">
          <mtp-table-button class="btn-list-sticky" :buttons="handleBtnList(buttons,record)" :record="record" @click="openComponent" />
        </template>
        <template #status="{ text }">
          <a>{{ getStatusName(text) }}</a>
        </template>
        <template #customername="{record}">
          {{record.username}}
        </template>
        <template #birthday="{text}">
          {{text && text !== '--' ? formatTime(text, 'd') : '--'}}
        </template>
        <template #userinfotype="{ text }">
          <a>{{ getUserInfoTypeName(text) }}</a>
        </template>
        <!-- 客户简称 -->
        <template #nickname="{ record }">
          {{ record.userinfotype === 1 ? record.customername : record.nickname }}
        </template>
        <template #attachment1="{ text, record }">
          <a>{{ text }}</a><a>{{ record.attachment2 }}</a>
        </template>
        <template #cardtype="{ text }">
          <a>{{ getCardTypeEnumItemName(text) }}</a>
        </template>
      </a-table>
    </template>
  </mtp-table-scroll>
  <!-- 右键 -->
  <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="buttons"> </contextMenu>
  <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"> </component>
</template>

<script lang="ts">
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import { BtnListType } from '@/common/components/btnList/interface';
import { isPingAnOem, isQianHaiJin } from '@/common/config/projectName';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { getCardTypeEnumItemName, getStatusName, getUserInfoTypeName } from '@/common/constants/enumsName';
import { ComposeTableParam, contextMenu, defineAsyncComponent, defineComponent, handleComposeTable, MtpTableButton, queryTableList, useRouteName } from '@/common/export/commonTable';
import { formatTime } from '@/common/methods';
import { ColumnType } from '@/common/methods/table';
import { getTableButton } from '@/common/setup/table/button';
import { getUserId } from '@/services/bus/user';
import { queryCustomerInfo } from '@/services/go/ermcp/qhj';
import { QhjCustomer } from '@/services/go/ermcp/qhj/interface';
import Filter from './compoments/filterTable/index.vue';
import { pingan_custom_column, qian_hai_jin_custom_column } from './setup';

export default defineComponent({
  name: EnumRouterName.plan_audit,
  components: {
    MtpTableScroll,
    contextMenu,
    MtpTableButton,
    Filter,
    detail: defineAsyncComponent(() => import('./compoments/detail/index.vue')), // 详情
    add: defineAsyncComponent(() => import('./compoments/add/index.vue')), // 新增
    check: defineAsyncComponent(() => import('./compoments/check/index.vue')), // 审核
    delete: defineAsyncComponent(() => import('./compoments/delete/index.vue')), // 删除
    modify: defineAsyncComponent(() => import('./compoments/modify/index.vue')), // 修改
    recover: defineAsyncComponent(() => import('./compoments/recover/index.vue')), // 恢复
    disable: defineAsyncComponent(() => import('./compoments/disable/index.vue')), // 停用
    cancel: defineAsyncComponent(() => import('./compoments/cancel/index.vue')), // 撤销
  },
  setup() {
    const { isRouterName } = useRouteName();
    // 新增权限按钮
    const addButton = getTableButton(['add']);
    // 表格权限按钮
    const buttons = getTableButton(['add'], true);
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<QhjCustomer>();

    // 获取列表数据
    const queryTableAction = () => {
      const userid = getUserId();
      if (isRouterName('custom_unsubmit')) {
        // 未提交
        queryTable(queryCustomerInfo, { userid, querytype: 1, includesub: 1 });
      } else if (isRouterName('custom_checkpending')) {
        // 待审核
        queryTable(queryCustomerInfo, { userid, querytype: 2, includesub: 1 });
      } else if (isRouterName('custom_normal')) {
        // 正常
        queryTable(queryCustomerInfo, { userid, querytype: 3, includesub: 1 });
      } else if (isRouterName('custom_disabled')) {
        // 停用
        queryTable(queryCustomerInfo, { userid, querytype: 4, includesub: 1 });
      }
    };

    // 处理根据状态显示对应按钮
    const handleBtnList = (btnList: BtnListType[], item: QhjCustomer) => {
      switch (item.status) {
        case 2: // 待审核
          return btnList.filter((e) => e.code !== 'modify');
        case 5: // 拒绝审核
          return btnList.filter((e) => e.code !== 'check');
        default:
          return btnList;
      }
    };

    // 表头
    const getColumns = (columns: ColumnType[]) => {
      if (isPingAnOem()) {
        // 平安
        return pingan_custom_column();
      } else if (isQianHaiJin()) {
        // 千海金
        return qian_hai_jin_custom_column();
      } else {
        return columns;
      }
    };

    // 搜索
    function search() { }

    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
      menuType: EnumRouterName.plan_audit,
      tableName: 'table_pcweb_userinfo',
      tableFilterKey: ['userinfotype', 'nickname', 'customername', 'mobile'],
      isDetail: true,
    };

    return {
      ...handleComposeTable<QhjCustomer>(param),
      loading,
      tableList,
      getStatusName,
      buttons,
      addButton,
      getUserInfoTypeName,
      getCardTypeEnumItemName,
      getColumns,
      handleBtnList,
      formatTime,
      search,
    };
  },
});
</script>