huangbin vor 4 Jahren
Ursprung
Commit
84fd012863

+ 82 - 0
src/assets/styles/mixin.less

@@ -543,4 +543,86 @@
 }
 .grey {
     color: @m-grey2;
+}
+.selectBtn.ant-btn {
+    margin-left: 10px;
+    width: 80px;
+    height: 30px;
+    line-height: 31px;
+    text-align: center;
+    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
+    border: 0;
+    color: @m-white0;
+    font-size: 14px;
+    .rounded-corners(3px);
+    &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
+        color: rgba(@m-white0, 0.8);
+        border: 0;
+    }
+}
+.btnPrimary.ant-btn,.operBtn.ant-btn {
+    margin-left: 10px;
+    width: 80px;
+    height: 30px;
+    line-height: 31px;
+    text-align: center;
+    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
+    border: 0;
+    color: @m-white0;
+    font-size: 14px;
+    .rounded-corners(3px);
+    &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
+        color: rgba(@m-white0, 0.8);
+        border: 0;
+    }
+}
+.ant-table-expanded-row {
+    .btn-list {
+        padding-right: 10px;
+        text-align: right;
+    }
+    .btnPrimary.ant-btn {
+        width: 80px;
+        height: 26px;
+        line-height: 27px;
+        border: 0;
+        background: linear-gradient(0deg, @m-blue2, @m-blue0);
+        box-shadow: -1px 0px 0px 0px @m-black10;
+        .rounded-corners(3px);
+        &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-blue2-hover 0%, @m-blue0-hover 99%);
+        color: rgba(@m-white0, 0.8);
+        border: 0;
+    }
+    }
+    .btnDanger.ant-btn:extend(.ant-table-expanded-row .btnPrimary.ant-btn) {
+        background: linear-gradient(0deg, @m-red0, @m-red1);
+        color: @m-white0;
+        font-size: 14px;
+        &:hover,
+        &:focus {
+            background: linear-gradient(0deg, @m-red0-hover 0%, @m-red1-hover 99%);
+            color: rgba(@m-white0, 0.8);
+            border: 0;
+        }
+    }
+    .btnDeafault.ant-btn:extend(.ant-table-expanded-row .btnPrimary.ant-btn) {
+        background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+        color: @m-white0;
+        font-size: 14px;
+        &:hover,
+        &:focus {
+            background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 99%);
+            color: rgba(@m-white0, 0.8);
+            border: 0;
+        }
+    }
+    .ant-btn+.ant-btn {
+        margin-left: 10px;
+    }
 }

+ 1 - 0
src/assets/styles/variables.less

@@ -42,6 +42,7 @@
 @m-black7: #15293A;
 @m-black8: #212629;
 @m-black9: #161A1C;
+@m-black10: #121618;
 @m-blue0: #3a87f7;
 @m-blue0-hover: rgba(@m-blue0, .8);
 @m-blue1: #4885eb;

+ 42 - 0
src/common/setup/customModule/index.ts

@@ -0,0 +1,42 @@
+import { ColumnType, getTableHead } from '@/common/methods/table';
+import { TableKey } from '@/common/methods/table/interface';
+import { ref } from 'vue';
+
+// 表格数据模型
+export function getCustomModule<T>() {
+    // 表头数据
+    const columns = ref<ColumnType[]>([]);
+    // 表格数据
+    const customList = ref<T[]>([]);
+    // 过滤信息
+    const filteredInfo = ref();
+    // 加载状态
+    const loading = ref<boolean>(false);
+    // 表头数据更新
+    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) => {
+            const { columnfield, columntitle, aligntype } = e;
+            const item: ColumnType = {
+                key: String(i),
+                dataIndex: columnfield, // 表格数据对应的key
+                title: columntitle,
+                align: aligntype === 1 ? 'center' : aligntype === 2 ? 'left' : 'right',
+                slots: { customRender: columnfield },
+            };
+            cb(e, item, filtered);
+            columns.value.push(item);
+        });
+    }
+    // 获取表格列表数据
+    function getColumnsList(cb: Function) {
+        columnsListToUpdate = () => cb();
+        columnsListToUpdate();
+    }
+
+    return { columns, customList, filteredInfo, loading, getColumns, getColumnsList, columnsListToUpdate };
+}

+ 0 - 27
src/views/information/custom/compoments/filterTable/index.vue

@@ -106,31 +106,4 @@ export default defineComponent({
     }
     
 }
-.selectBtn.ant-btn {
-    margin-left: 10px;
-    width: 80px;
-    height: 30px;
-    line-height: 31px;
-    text-align: center;
-    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
-    border: 0;
-    color: @m-white0;
-    font-size: 14px;
-    .rounded-corners(3px);
-    &:hover,
-    &:focus {
-        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
-        color: rgba(@m-white0, 0.8);
-        border: 0;
-    }
-}
-.operBtn.ant-btn:extend(.selectBtn.ant-btn) {
-    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
-    &:hover,
-    &:focus {
-        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
-        color: rgba(@m-white0, 0.8);
-        border: 0;
-    }
-}
 </style>;

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

@@ -38,7 +38,6 @@ 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';
@@ -46,7 +45,14 @@ 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 '@/common/setup/customModule';
+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: {
@@ -59,12 +65,52 @@ export default defineComponent({
         BtnList,
     },
     setup() {
-        const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
-
+        const { columns, customList, filteredInfo, loading, getColumns, getColumnsList, columnsListToUpdate } = getCustomModule<QueryCustomInfoType>();
         initData(() => {
-            actionQuery(3);
-            getColumns();
+            // 获取列表数据
+            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() };
     },
 });
@@ -73,4 +119,4 @@ export default defineComponent({
 <style lang="less">
 .custom-normal {
 }
-</style>
+</style>

+ 0 - 74
src/views/information/custom/list/setup.ts

@@ -1,74 +0,0 @@
-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 { ref } from 'vue';
-
-// 客户资料列表
-export function getCustomList() {
-    // 表格数据
-    const customList = ref<QueryCustomInfoType[]>([]);
-    // 表头数据
-    const columns = ref<ColumnType[]>([]);
-    // 过滤项
-    const filteredInfo = ref();
-    const loading = ref<boolean>(false);
-    // 获取表头
-    function getColumns() {
-        const list = getTableHead('table_pcweb_userinfo');
-        const filtered = filteredInfo.value || {};
-        columns.value.length = 0;
-        list.forEach((e, i) => {
-            const { columnfield, columntitle, aligntype } = e;
-            const item: ColumnType = {
-                key: String(i),
-                dataIndex: columnfield, // 表格数据对应的key
-                title: columntitle,
-                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;
-            }
-            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();
-    }
-
-    return { customList, actionQuery, columns, filteredInfo, getColumns, search, loading, };
-}

+ 106 - 69
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 '@/common/setup/customModule';
+    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
+>;