列表信息封装与优化

src/views/information/custom/list/normal-use/index.vue

@@ -1,76 +1,115 @@
 <template>
-  <!-- 客户信息: 正常 -->
-  <div class="custom-normal"
-       :loading="loading">
-    <filterCustomTable @search="search">
-      <BtnList :btnList="commonBtn" />
-    </filterCustomTable>
-    <contextMenu :contextMenuList="forDataBtn">
-      <a-table :columns="columns"
-               class="topTable"
-               :pagination="false"
-               :expandedRowKeys="expandedRowKeys"
-               :customRow="Rowclick"
-               rowKey="key"
-               :data-source="customList">
-        <!-- 额外的展开行 -->
-        <template #expandedRowRender="{  }">
-          <BtnList :btnList="forDataBtn" />
-        </template>
-        <template #userinfotype="{ text }">
-          <a>{{ text === '2' ? '企业' : '个人' }}</a>
-        </template>
-      </a-table>
-    </contextMenu>
-    <!-- 新增 -->
-    <AddCustom />
-    <!-- 详情 -->
-    <CustomDetail />
-    <!-- 修改 -->
-    <ModifyCustom :selectedRow="selectedRow" />
-    <!-- 停用 -->
-    <DisableCustom />
-  </div>
+    <!-- 客户信息: 正常 -->
+    <div class="custom-normal" :loading="loading">
+        <filterCustomTable @search="search">
+            <BtnList :btnList="commonBtn" />
+        </filterCustomTable>
+        <contextMenu :contextMenuList="forDataBtn">
+            <a-table :columns="columns" class="topTable" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="customList">
+                <!-- 额外的展开行 -->
+                <template #expandedRowRender="{  }">
+                    <BtnList :btnList="forDataBtn" />
+                </template>
+                <template #userinfotype="{ text }">
+                    <a>{{ text === '2' ? '企业' : '个人' }}</a>
+                </template>
+            </a-table>
+        </contextMenu>
+        <!-- 新增 -->
+        <AddCustom />
+        <!-- 详情 -->
+        <CustomDetail />
+        <!-- 修改 -->
+        <ModifyCustom :selectedRow="selectedRow" />
+        <!-- 停用 -->
+        <DisableCustom />
+    </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { initData } from '@/common/methods/index';
-import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
-import contextMenu from '@/common/components/contextMenu/index.vue';
-import { getCustomList } from '../setup';
-import CustomDetail from '@/views/information/custom/compoments/detail/index.vue';
-import ModifyCustom from '@/views/information/custom/compoments/modify/index.vue';
-import DisableCustom from '@/views/information/custom/compoments/disable/index.vue';
-import AddCustom from '@/views/information/custom/compoments/add/index.vue';
-import { getBtnList } from '@/common/setup/contextMenu/index';
-import { handleTableEvent } from '@/common/setup/event/index';
-import BtnList from '@/common/components/buttonList/index.vue';
-
-export default defineComponent({
-    name: 'custom-normal',
-    components: {
-        filterCustomTable,
-        contextMenu,
-        CustomDetail,
-        ModifyCustom,
-        DisableCustom,
-        AddCustom,
-        BtnList,
-    },
-    setup() {
-        const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
-
-        initData(() => {
-            actionQuery(3);
-            getColumns();
-        });
-        return { customList, columns, search, loading, ...getBtnList('custom_info_normal', true), ...handleTableEvent() };
-    },
-});
+    import { defineComponent } from 'vue';
+    import { initData } from '@/common/methods/index';
+    import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
+    import contextMenu from '@/common/components/contextMenu/index.vue';
+    import CustomDetail from '@/views/information/custom/compoments/detail/index.vue';
+    import ModifyCustom from '@/views/information/custom/compoments/modify/index.vue';
+    import DisableCustom from '@/views/information/custom/compoments/disable/index.vue';
+    import AddCustom from '@/views/information/custom/compoments/add/index.vue';
+    import { getBtnList } from '@/common/setup/contextMenu/index';
+    import { handleTableEvent } from '@/common/setup/event/index';
+    import BtnList from '@/common/components/buttonList/index.vue';
+    import { getCustomModule } from '../setup';
+    import DeleteCustom from '@/views/information/custom/compoments/delete/index.vue';
+    import RecoverCustom from '@/views/information/custom/compoments/recover/index.vue';
+    import { Column } from '@/services/go/commonService/interface';
+    import { ColumnType } from '@/common/methods/table';
+    import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
+    import { message } from 'ant-design-vue';
+    import { QueryCustomInfo } from '@/services/go/ermcp/customInfo';
+    export default defineComponent({
+        name: 'custom-normal',
+        components: {
+            filterCustomTable,
+            contextMenu,
+            CustomDetail,
+            ModifyCustom,
+            DisableCustom,
+            AddCustom,
+            BtnList,
+        },
+        setup() {
+            const { columns, customList, filteredInfo, loading, getColumns, getColumnsList, columnsListToUpdate } = getCustomModule<QueryCustomInfoType>();
+            initData(() => {
+                // 获取列表数据
+                getColumnsList(() => {
+                    loading.value = true;
+                    customList.value.length = 0;
+                    QueryCustomInfo(3)
+                        .then((res) => {
+                            customList.value = res.map((e, i) => {
+                                return { ...e, key: String(i) };
+                            });
+                            loading.value = false;
+                            console.log('查询列表', customList);
+                        })
+                        .catch((err) => {
+                            message.error(err);
+                            loading.value = false;
+                        });
+                });
+                // 注册表头信息
+                getColumns('table_pcweb_userinfo', (e: Column, item: ColumnType, filtered: any) => {
+                    // 以下添加过滤数据对应的方法
+                    if (e.columntitle === '客户类型') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.userinfotype.includes(String(value));
+                        item.filteredValue = filtered.userinfotype || null;
+                    }
+                    if (e.columntitle === '客户简称') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.nickname.includes(value);
+                        item.filteredValue = filtered.nickname || null;
+                    }
+                    if (e.columntitle === '客户名称') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.contactname.includes(value);
+                        item.filteredValue = filtered.contactname || null;
+                    }
+                    if (e.columntitle === '手机号码') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.mobile.includes(value);
+                        item.filteredValue = filtered.mobile || null;
+                    }
+                });
+            });
+            // 查询
+            function search(value: any) {
+                filteredInfo.value = value;
+                // 更新表信息
+                columnsListToUpdate();
+            }
+            return { customList, columns, search, loading, ...getBtnList('custom_info_normal', true), ...handleTableEvent() };
+        },
+    });
 </script>
 
 <style lang="less">
-.custom-normal {
-}
-</style>
+    .custom-normal {
+    }
+</style>

src/views/information/custom/list/setup.ts

@@ -1,22 +1,22 @@
 import { ColumnType, getTableHead } from '@/common/methods/table';
-import { QueryCustomInfo } from '@/services/go/ermcp/customInfo';
-import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
-import { QueryCustomInfoEnum } from '@/services/go/ermcp/customInfo/type';
-import { message } from 'ant-design-vue';
+import { TableKey } from '@/common/methods/table/interface';
 import { ref } from 'vue';
 
-// 客户资料列表
-export function getCustomList() {
-    // 表格数据
-    const customList = ref<QueryCustomInfoType[]>([]);
+// 表格数据模型
+export function getCustomModule<T>() {
     // 表头数据
     const columns = ref<ColumnType[]>([]);
-    // 过滤项
+    // 表格数据
+    const customList = ref<T[]>([]);
+    // 过滤信息
     const filteredInfo = ref();
+    // 加载状态
     const loading = ref<boolean>(false);
-    // 获取表头
-    function getColumns() {
-        const list = getTableHead('table_pcweb_userinfo');
+    // 表头数据更新
+    let columnsListToUpdate: Function = (): void => {};
+    // 注册表头
+    function getColumns(tableName: keyof TableKey, cb: Function) {
+        const list = getTableHead(tableName);
         const filtered = filteredInfo.value || {};
         columns.value.length = 0;
         list.forEach((e, i) => {
@@ -28,47 +28,15 @@ export function getCustomList() {
                 align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right',
                 slots: { customRender: columnfield },
             };
-            // 以下添加过滤数据对应的方法
-            if (e.columntitle === '客户类型') {
-                item.onFilter = (value: string, record: QueryCustomInfoType) => record.userinfotype.includes(String(value));
-                item.filteredValue = filtered.userinfotype || null;
-            }
-            if (e.columntitle === '客户简称') {
-                item.onFilter = (value: string, record: QueryCustomInfoType) => record.nickname.includes(value);
-                item.filteredValue = filtered.nickname || null;
-            }
-            if (e.columntitle === '客户名称') {
-                item.onFilter = (value: string, record: QueryCustomInfoType) => record.contactname.includes(value);
-                item.filteredValue = filtered.contactname || null;
-            }
-            if (e.columntitle === '手机号码') {
-                item.onFilter = (value: string, record: QueryCustomInfoType) => record.mobile.includes(value);
-                item.filteredValue = filtered.mobile || null;
-            }
+            cb(e, item, filtered);
             columns.value.push(item);
         });
     }
-    // 查询列表
-    function actionQuery(type: QueryCustomInfoEnum) {
-        loading.value = true;
-        QueryCustomInfo(type)
-            .then((res) => {
-                customList.value = res.map((e, i) => {
-                    return { ...e, key: String(i) };
-                });
-                loading.value = false;
-                console.log('查询列表', customList);
-            })
-            .catch((err) => {
-                message.error(err);
-                loading.value = false;
-            });
-    }
-    // 查询
-    function search(value: any) {
-        filteredInfo.value = value;
-        getColumns();
+    // 获取表格列表数据
+    function getColumnsList(cb: Function) {
+        columnsListToUpdate = () => cb();
+        columnsListToUpdate();
     }
 
-    return { customList, actionQuery, columns, filteredInfo, getColumns, search, loading, };
+    return { columns, customList, filteredInfo, loading, getColumns, getColumnsList, columnsListToUpdate };
 }

src/views/information/custom/list/stop-use/index.vue

@@ -1,76 +1,113 @@
 <template>
-  <!-- 客户信息: 停用 -->
-  <div class="custom-normal"
-       :loading="loading">
-    <filterCustomTable @search="search">
-      <BtnList :btnList="commonBtn" />
-    </filterCustomTable>
-    <contextMenu :contextMenuList="forDataBtn">
-      <a-table :columns="columns"
-               class="topTable"
-               :expandedRowKeys="expandedRowKeys"
-               :customRow="Rowclick"
-               :pagination="false"
-               rowKey="key"
-               :data-source="customList">
-        <!-- 额外的展开行 -->
-        <template #expandedRowRender="{  }">
-          <BtnList :btnList="forDataBtn" />
-        </template>
-        <template #userinfotype="{ text }">
-          <a>{{ text === '2' ? '企业' : '个人' }}</a>
-        </template>
-      </a-table>
-    </contextMenu>
-    <!-- 新增 -->
-    <AddCustom />
-    <!-- 详情 -->
-    <CustomDetail />
-    <!-- 删除 -->
-    <DeleteCustom />
-    <!-- 恢复客户资料 -->
-    <RecoverCustom />
-  </div>
+    <!-- 客户信息: 停用 -->
+    <div class="custom-normal" :loading="loading">
+        <filterCustomTable @search="search">
+            <BtnList :btnList="commonBtn" />
+        </filterCustomTable>
+        <contextMenu :contextMenuList="forDataBtn">
+            <a-table :columns="columns" class="topTable" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :pagination="false" rowKey="key" :data-source="customList">
+                <!-- 额外的展开行 -->
+                <template #expandedRowRender="{  }">
+                    <BtnList :btnList="forDataBtn" />
+                </template>
+                <template #userinfotype="{ text }">
+                    <a>{{ text === '2' ? '企业' : '个人' }}</a>
+                </template>
+            </a-table>
+        </contextMenu>
+        <!-- 新增 -->
+        <AddCustom />
+        <!-- 详情 -->
+        <CustomDetail />
+        <!-- 删除 -->
+        <DeleteCustom />
+        <!-- 恢复客户资料 -->
+        <RecoverCustom />
+    </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { initData } from '@/common/methods/index';
-import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
-import contextMenu from '@/common/components/contextMenu/index.vue';
-import { getCustomList } from '../setup';
-import CustomDetail from '@/views/information/custom/compoments/detail/index.vue';
-import DeleteCustom from '@/views/information/custom/compoments/delete/index.vue';
-import RecoverCustom from '@/views/information/custom/compoments/recover/index.vue';
-import AddCustom from '@/views/information/custom/compoments/add/index.vue';
-import { getBtnList } from '@/common/setup/contextMenu/index';
-import { handleTableEvent } from '@/common/setup/event/index';
-import BtnList from '@/common/components/buttonList/index.vue';
-
-export default defineComponent({
-    name: 'custom-normal',
-    components: {
-        filterCustomTable,
-        contextMenu,
-        CustomDetail,
-        DeleteCustom,
-        RecoverCustom,
-        AddCustom,
-        BtnList,
-    },
-    setup() {
-        const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
-
-        initData(() => {
-            actionQuery(4);
-            getColumns();
-        });
-        return { customList, columns, search, loading, ...getBtnList('custom_info_disabled', true), ...handleTableEvent() };
-    },
-});
+    import { defineComponent, Ref } from 'vue';
+    import { initData } from '@/common/methods/index';
+    import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
+    import contextMenu from '@/common/components/contextMenu/index.vue';
+    import { getCustomModule } from '../setup';
+    import CustomDetail from '@/views/information/custom/compoments/detail/index.vue';
+    import DeleteCustom from '@/views/information/custom/compoments/delete/index.vue';
+    import RecoverCustom from '@/views/information/custom/compoments/recover/index.vue';
+    import AddCustom from '@/views/information/custom/compoments/add/index.vue';
+    import { getBtnList } from '@/common/setup/contextMenu/index';
+    import { handleTableEvent } from '@/common/setup/event/index';
+    import BtnList from '@/common/components/buttonList/index.vue';
+    import { Column } from '@/services/go/commonService/interface';
+    import { ColumnType } from '@/common/methods/table';
+    import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
+    import { message } from 'ant-design-vue';
+    import { QueryCustomInfo } from '@/services/go/ermcp/customInfo';
+    export default defineComponent({
+        name: 'custom-normal',
+        components: {
+            filterCustomTable,
+            contextMenu,
+            CustomDetail,
+            DeleteCustom,
+            RecoverCustom,
+            AddCustom,
+            BtnList,
+        },
+        setup() {
+            const { columns, customList, filteredInfo, loading, getColumns, getColumnsList, columnsListToUpdate } = getCustomModule<QueryCustomInfoType>();
+            initData(() => {
+                // 获取列表数据
+                getColumnsList(() => {
+                    loading.value = true;
+                    customList.value.length = 0;
+                    QueryCustomInfo(4)
+                        .then((res) => {
+                            customList.value = res.map((e, i) => {
+                                return { ...e, key: String(i) };
+                            });
+                            loading.value = false;
+                            console.log('查询列表', customList);
+                        })
+                        .catch((err) => {
+                            message.error(err);
+                            loading.value = false;
+                        });
+                });
+                // 注册表头信息
+                getColumns('table_pcweb_userinfo', (e: Column, item: ColumnType, filtered: any) => {
+                    // 以下添加过滤数据对应的方法
+                    if (e.columntitle === '客户类型') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.userinfotype.includes(String(value));
+                        item.filteredValue = filtered.userinfotype || null;
+                    }
+                    if (e.columntitle === '客户简称') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.nickname.includes(value);
+                        item.filteredValue = filtered.nickname || null;
+                    }
+                    if (e.columntitle === '客户名称') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.contactname.includes(value);
+                        item.filteredValue = filtered.contactname || null;
+                    }
+                    if (e.columntitle === '手机号码') {
+                        item.onFilter = (value: string, record: QueryCustomInfoType) => record.mobile.includes(value);
+                        item.filteredValue = filtered.mobile || null;
+                    }
+                });
+            });
+            // 查询
+            function search(value: any) {
+                filteredInfo.value = value;
+                // 更新表信息
+                columnsListToUpdate();
+            }
+            return { customList, columns, search, loading, ...getBtnList('custom_info_disabled', true), ...handleTableEvent() };
+        },
+    });
 </script>
 
 <style lang="less">
-.custom-normal {
-}
-</style>;
+    .custom-normal {
+    }</style
+>;