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

<template>
  <!-- 客户资料 -->
  <div class="plan_uncommitted"
       :loading="loading">
    <Filter @search="updateColumn">
      <mtp-table-button class="btn-list-sticky"
                        :buttons="addButton"
                        @click="openComponent" />
    </Filter>
    <a-table :columns="getColumns(columns)"
             class="srcollYTable"
             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
             :pagination="false"
             :loading="loading"
             :expandedRowKeys="expandedRowKeys"
             :customRow="Rowclick"
             rowKey="key"
             :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 #nickname="{record}">
        {{record.username}}
      </template>
      <template #userinfotype="{ text }">
        <a>{{ getUserInfoTypeName(text) }}</a>
      </template>
      <template #attachment1="{ text, record }">
        <a>{{ text }}</a><a>{{ record.attachment2 }}</a>
      </template>
      <template #cardtype="{ text }">
        <a>{{ getCardTypeEnumItemName(text) }}</a>
      </template>
    </a-table>
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu"
                 @cancel="closeContext"
                 :list="buttons"> </contextMenu>
    <component :is="componentId"
               v-if="componentId"
               :selectedRow="selectedRow"
               @cancel="closeComponent"> </component>
  </div>
</template>

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

export default defineComponent({
    name: EnumRouterName.plan_audit,
    components: {
        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/add/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_checkpending')) {
                // 待审核
                queryTable(queryCustomerInfo, { userid, querytype: 2 });
            } else if (isRouterName('custom_normal')) {
                // 正常
                queryTable(queryCustomerInfo, { userid, querytype: 3 });
            } else if (isRouterName('custom_disabled')) {
                // 停用
                queryTable(queryCustomerInfo, { userid, querytype: 4 });
            }
        };

        // 处理根据状态显示对应按钮
        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;
            }
        };
        // 表格通用逻辑
        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,
        };
    },
});
</script>