修改客户资料 弹窗页面

src/components/contextMenu/index.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- 右键 -->
   <div class="context-menu-container"
+        @click="updateContextMenu(false)"
        @contextmenu.prevent="onContextMenu">
     <slot></slot>
     <contextMenu :contextMenu="menuContext"

src/setup/controlModal/interface.ts

@@ -4,4 +4,9 @@ export interface ModalName {
     logout: string; // 退出登录
     drawer: string; // 下单通用界面
     addCustomInfo: string; // 新增客户资料
+    modifyCustomInfo: string; // 修改客户资料
+    disableCustomInfo: string; // 停用客户资料
+    deleteCustomInfo: string; // 删除客户资料
+    recoverCustomInfo: string; // 恢复客户资料
+    customDetail: string; // 客户资料详情
 }

src/setup/router/index.ts

@@ -1,6 +1,6 @@
 import { OperationTabMenu } from '@/goServiceAPI/commonService/interface';
 import APP from '@/services';
-import { ref, unref } from 'vue';
+import { provide, ref, unref } from 'vue';
 import { Router, useRouter } from 'vue-router';
 
 // 处理 动态路由
@@ -38,5 +38,6 @@ export function handleRouterMenu() {
 
         router.push({ name: item.code });
     }
+    provide('thirdMenuList', list)
     return { list, selectMenu, getMenuList };
 }

src/views/information/custom/compoments/customDetail/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 客户资料详情-->
+  <a-modal class="custom-detail"
+           title="客户资料详情"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { closeModal } from '@/setup/controlModal/index';
+
+export default defineComponent({
+    name: 'custom-detail',
+    components: {},
+    setup() {
+        const { visible, cancel } = closeModal('customDetail');
+        const loading = ref<boolean>(false);
+        function submit() {
+            loading.value = true;
+            setTimeout(() => {
+                loading.value = false;
+                cancel();
+            }, 2000);
+        }
+        return {
+            visible,
+            cancel,
+            submit,
+            loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.custom-detail {
+}
+</style>;

src/views/information/custom/compoments/deleteCustom/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 恢复客户资料-->
+  <a-modal class="recover-custom"
+           title="恢复客户资料"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { closeModal } from '@/setup/controlModal/index';
+
+export default defineComponent({
+    name: 'recover-custom',
+    components: {},
+    setup() {
+        const { visible, cancel } = closeModal('deleteCustomInfo');
+        const loading = ref<boolean>(false);
+        function submit() {
+            loading.value = true;
+            setTimeout(() => {
+                loading.value = false;
+                cancel();
+            }, 2000);
+        }
+        return {
+            visible,
+            cancel,
+            submit,
+            loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.recover-custom {
+}
+</style>;

src/views/information/custom/compoments/disableCustom/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 停用客户资料-->
+  <a-modal class="custom-disable"
+           title="停用客户资料"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { closeModal } from '@/setup/controlModal/index';
+
+export default defineComponent({
+    name: 'custom-disable',
+    components: {},
+    setup() {
+        const { visible, cancel } = closeModal('disableCustomInfo');
+        const loading = ref<boolean>(false);
+        function submit() {
+            loading.value = true;
+            setTimeout(() => {
+                loading.value = false;
+                cancel();
+            }, 2000);
+        }
+        return {
+            visible,
+            cancel,
+            submit,
+            loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.custom-disable {
+}
+</style>;

src/views/information/custom/compoments/filterTable/index.vue

@@ -6,8 +6,7 @@
               style="width: 120px"
               v-model:value="userinfotype"
               placeholder="全部客户类型"
-              @change="handleChange"
-            >
+              @change="handleChange">
       <a-select-option value="1">个人</a-select-option>
       <a-select-option value="2">企业</a-select-option>
     </a-select>
@@ -20,9 +19,12 @@
     <a-input v-model:value="phone"
              class="tableConditionInput"
              placeholder="模糊搜索手机号码" />
-    <a-button class="selectBtn"  @click="search">查询</a-button>
-    <a-button class="selectBtn"  @click="reset">重置</a-button>
-    <a-button class="operBtn" @click="add">新增</a-button>
+    <a-button class="selectBtn"
+              @click="search">查询</a-button>
+    <a-button class="selectBtn"
+              @click="reset">重置</a-button>
+    <slot></slot>
+
     <!-- 新增弹窗 -->
     <AddCustom />
   </div>
@@ -31,7 +33,6 @@
 <script lang="ts">
 import { defineComponent, ref, SetupContext } from 'vue';
 import AddCustom from '../addCustom/index.vue';
-import { openModal } from '@/setup/controlModal/index';
 
 // 搜索
 function handleSearch(context: SetupContext) {
@@ -70,14 +71,8 @@ export default defineComponent({
         AddCustom,
     },
     setup(props, context) {
-        const { openAction } = openModal('addCustomInfo');
-        function add() {
-            openAction();
-            context.emit('add');
-        }
         return {
             ...handleSearch(context),
-            add,
         };
     },
 });
@@ -94,7 +89,7 @@ export default defineComponent({
     margin-right: 10px;
     // background: #252D34;
     // .rounded-corners(3px);
-    .ant-select-selector{
+    .ant-select-selector {
         height: 30px;
         padding: 0 8px;
         background: @m-grey9;
@@ -110,10 +105,10 @@ export default defineComponent({
         color: @m-grey1;
     }
     .ant-select-selection-item {
-         color: @m-white1;
+        color: @m-white1;
     }
 }
-.conditionSelect+.conditionSelect {
+.conditionSelect + .conditionSelect {
     margin-left: 10px;
 }
 .selectBtn.ant-btn {
@@ -127,17 +122,19 @@ export default defineComponent({
     color: @m-white0;
     font-size: 14px;
     .rounded-corners(3px);
-    &:hover,&:focus {
+    &:hover,
+    &:focus {
         background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
-        color: rgba(@m-white0, .8);
+        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 {
+    &:hover,
+    &:focus {
         background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
-        color: rgba(@m-white0, .8);
+        color: rgba(@m-white0, 0.8);
         border: 0;
     }
 }

src/views/information/custom/compoments/modifyCustom/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 修改客户资料-->
+  <a-modal class="modify-custom"
+           title="修改客户资料"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { closeModal } from '@/setup/controlModal/index';
+
+export default defineComponent({
+    name: 'modify-custom',
+    components: {},
+    setup() {
+        const { visible, cancel } = closeModal('modifyCustomInfo');
+        const loading = ref<boolean>(false);
+        function submit() {
+            loading.value = true;
+            setTimeout(() => {
+                loading.value = false;
+                cancel();
+            }, 2000);
+        }
+        return {
+            visible,
+            cancel,
+            submit,
+            loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.modify-custom {
+}
+</style>;

src/views/information/custom/compoments/recover/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 修改客户资料-->
+  <a-modal class="modify-custom"
+           title="修改客户资料"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">完成</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { closeModal } from '@/setup/controlModal/index';
+
+export default defineComponent({
+    name: 'modify-custom',
+    components: {},
+    setup() {
+        const { visible, cancel } = closeModal('recoverCustomInfo');
+        const loading = ref<boolean>(false);
+        function submit() {
+            loading.value = true;
+            setTimeout(() => {
+                loading.value = false;
+                cancel();
+            }, 2000);
+        }
+        return {
+            visible,
+            cancel,
+            submit,
+            loading,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.modify-custom {
+}
+</style>;

src/views/information/custom/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import firstMenu from '@/components/firstMenu/index.vue';
 import { initData } from '@/setup/methods/index';
 import { handleRouterMenu } from '@/setup/router/index';

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

@@ -2,8 +2,11 @@
   <!-- 客户信息: 正常 -->
   <div class="custom-normal"
        :loading="loading">
-    <filterCustomTable @add="add"
-                       @search="search" />
+    <filterCustomTable @search="search">
+      <a-button class="operBtn"
+                v-if="hasPermission('custom_info_btn_add')"
+                @click="openAction">新增</a-button>
+    </filterCustomTable>
     <contextMenu :contextMenuList="contextMenuList"
                  :tableList="customList">
       <a-table :columns="columns"
@@ -16,49 +19,79 @@
         </template>
       </a-table>
     </contextMenu>
+    <!-- 详情 -->
+    <CustomDetail />
+    <!-- 修改 -->
+    <ModifyCustom />
+    <!-- 停用 -->
+    <DisableCustom />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, Ref, ref, watchEffect } from 'vue';
 
 import { initData } from '@/setup/methods/index';
-import { QueryCustomInfoType } from '@/goServiceAPI/ermcp/customInfo/interface';
 import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
 import { MenuItem } from '@/components/contextMenu/interface';
 import contextMenu from '@/components/contextMenu/index.vue';
 import { getCustomList } from '../setup';
+import { openModal } from '@/setup/controlModal/index';
+import CustomDetail from '@/views/information/custom/compoments/customDetail/index.vue';
+import ModifyCustom from '@/views/information/custom/compoments/modifyCustom/index.vue';
+import DisableCustom from '@/views/information/custom/compoments/disableCustom/index.vue';
 
-// 处理新增资料
-
-function add() {
-    console.log('add');
+// 处理详情
+function handleDetail(contextMenuList: Ref<MenuItem[]>) {
+    const { openAction } = openModal('customDetail');
+    contextMenuList.value.push({ lable: '详情', callback: openAction });
+}
+// 处理修改
+function handleModify(contextMenuList: Ref<MenuItem[]>) {
+    const { openAction } = openModal('modifyCustomInfo');
+    function modifyAction() {
+        contextMenuList.value.push({ lable: '修改', callback: openAction });
+    }
+    return { modifyAction };
 }
 
+// 处理停用
+function handleDisable(contextMenuList: Ref<MenuItem[]>) {
+    const { openAction } = openModal('disableCustomInfo');
+    function disableAction() {
+        contextMenuList.value.push({ lable: '停用', callback: openAction });
+    }
+    return { disableAction };
+}
 export default defineComponent({
     name: 'custom-normal',
     components: {
         filterCustomTable,
         contextMenu,
+        CustomDetail,
+        ModifyCustom,
+        DisableCustom,
     },
     setup() {
-        const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
+        const { customList, actionQuery, columns, getColumns, search, loading, handlePermission } = getCustomList();
+        const { hasPermission } = handlePermission('custom_info_normal');
+        const contextMenuList = ref<MenuItem[]>([]);
 
-        const contextMenuList = ref<MenuItem[]>([
-            {
-                lable: '修改',
-                callback: (data: QueryCustomInfoType) => {
-                    console.log('data', data);
-                    console.log('lll');
-                },
-            },
-        ]);
+        const { openAction } = openModal('addCustomInfo');
+
+        handleDetail(contextMenuList);
+        const { modifyAction } = handleModify(contextMenuList);
+        const { disableAction } = handleDisable(contextMenuList);
+
+        watchEffect(() => {
+            hasPermission('custom_info_btn_modify') && modifyAction();
+            hasPermission('custom_info_btn_disable') && disableAction();
+        });
         initData(() => {
             actionQuery(3);
             getColumns();
-            // 加载数据在这里
         });
-        return { customList, columns, search, loading, add, contextMenuList };
+        return { customList, columns, search, loading, contextMenuList, hasPermission, openAction };
     },
 });
 </script>

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

@@ -1,16 +1,13 @@
+import { OperationTabMenu } from '@/goServiceAPI/commonService/interface';
 import { QueryCustomInfo } from '@/goServiceAPI/ermcp/customInfo';
 import { QueryCustomInfoType } from '@/goServiceAPI/ermcp/customInfo/interface';
 import { QueryCustomInfoEnum } from '@/goServiceAPI/ermcp/customInfo/type';
 import { ColumnType, getTableHead } from '@/services/bus/table';
 import { message } from 'ant-design-vue';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { inject, Ref, ref } from 'vue';
+
 // 查询客户资料列表
 export function getCustomList() {
-    const router = useRouter();
-    const pathArr = router.currentRoute.value.fullPath.split('/');
-    console.log('pathArr', pathArr);
-
     // 表格数据
     const customList = ref<QueryCustomInfoType[]>([]);
     // 表头数据
@@ -18,6 +15,7 @@ export function getCustomList() {
     // 过滤项
     const filteredInfo = ref();
     const loading = ref<boolean>(false);
+    const permissionData = inject('thirdMenuList') as Ref<OperationTabMenu[]>
     // 获取表头
     function getColumns() {
         const list = getTableHead('table_pcweb_userinfo');
@@ -51,7 +49,6 @@ export function getCustomList() {
             }
             columns.value.push(item);
         });
-        console.log('columns', columns);
     }
     // 查询列表
     function actionQuery(type: QueryCustomInfoEnum) {
@@ -73,7 +70,26 @@ export function getCustomList() {
     function search(value: any) {
         filteredInfo.value = value;
         getColumns();
-        console.log('search', value);
     }
-    return { customList, actionQuery, columns, filteredInfo, getColumns, search, loading };
+
+    // 处理按钮是否有权限
+    type customType = 'custom_info_normal' | 'custom_info_disabled' // 正常 | 停用
+    function handlePermission(menuType: customType) {
+        // 添加 | 修改 | 停用 | "恢复" | "删除"
+        type codeType = 'custom_info_btn_add' | 'custom_info_btn_modify' | 'custom_info_btn_disable' | "custom_info_btn_recover" | "custom_info_btn_delete";
+
+        // 判断按钮是否有权限
+        function hasPermission(type: codeType): boolean {
+            let result = false;
+            if (permissionData) {
+                const btnList = permissionData.value.find((e) => e.code === menuType);
+                if (btnList && btnList.children) {
+                    result = btnList.children.find((e) => e.code === type && e.type === 2) ? true : false;
+                }
+            }
+            return result;
+        }
+        return { hasPermission };
+    }
+    return { customList, actionQuery, columns, filteredInfo, getColumns, search, loading, handlePermission };
 }

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

@@ -2,8 +2,11 @@
   <!-- 客户信息: 正常 -->
   <div class="custom-normal"
        :loading="loading">
-    <filterCustomTable @add="add"
-                       @search="search" />
+    <filterCustomTable @search="search">
+      <a-button class="operBtn"
+                v-if="hasPermission('custom_info_btn_add')"
+                @click="openAction">新增</a-button>
+    </filterCustomTable>
     <contextMenu :contextMenuList="contextMenuList"
                  :tableList="customList">
       <a-table :columns="columns"
@@ -16,23 +19,49 @@
         </template>
       </a-table>
     </contextMenu>
+    <!-- 详情 -->
+    <CustomDetail />
+    <!-- 删除 -->
+    <DeleteCustom />
+    <!-- 恢复客户资料 -->
+    <RecoverCustom />
+
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, Ref, ref, watchEffect } from 'vue';
 
 import { initData } from '@/setup/methods/index';
-import { QueryCustomInfoType } from '@/goServiceAPI/ermcp/customInfo/interface';
 import filterCustomTable from '@/views/information/custom/compoments/filterTable/index.vue';
 import { MenuItem } from '@/components/contextMenu/interface';
 import contextMenu from '@/components/contextMenu/index.vue';
 import { getCustomList } from '../setup';
+import { openModal } from '@/setup/controlModal/index';
+import CustomDetail from '@/views/information/custom/compoments/customDetail/index.vue';
+import DeleteCustom from '@/views/information/custom/compoments/deleteCustom/index.vue';
+import RecoverCustom from '@/views/information/custom/compoments/recover/index.vue';
 
-// 处理新增资料
-
-function add() {
-    console.log('add');
+// 处理详情
+function handleDetail(contextMenuList: Ref<MenuItem[]>) {
+    const { openAction } = openModal('customDetail');
+    contextMenuList.value.push({ lable: '详情', callback: openAction });
+}
+// 处理删除
+function handleDelete(contextMenuList: Ref<MenuItem[]>) {
+    const { openAction } = openModal('deleteCustomInfo');
+    function deleteAction() {
+        contextMenuList.value.push({ lable: '删除', callback: openAction });
+    }
+    return { deleteAction };
+}
+// 处理恢复
+function handleRecover(contextMenuList: Ref<MenuItem[]>) {
+    const { openAction } = openModal('recoverCustomInfo');
+    function recoverAction() {
+        contextMenuList.value.push({ lable: '删除', callback: openAction });
+    }
+    return { recoverAction };
 }
 
 export default defineComponent({
@@ -40,25 +69,30 @@ export default defineComponent({
     components: {
         filterCustomTable,
         contextMenu,
+        CustomDetail,
+        DeleteCustom,
+        RecoverCustom,
     },
     setup() {
-        const { customList, actionQuery, columns, getColumns, search, loading } = getCustomList();
+        const { customList, actionQuery, columns, getColumns, search, loading, handlePermission } = getCustomList();
+        const { hasPermission } = handlePermission('custom_info_normal');
+        const contextMenuList = ref<MenuItem[]>([]);
 
-        const contextMenuList = ref<MenuItem[]>([
-            {
-                lable: '修改',
-                callback: (data: QueryCustomInfoType) => {
-                    console.log('data', data);
-                    console.log('lll');
-                },
-            },
-        ]);
+        const { openAction } = openModal('addCustomInfo');
+
+        handleDetail(contextMenuList);
+        const { deleteAction } = handleDelete(contextMenuList);
+        const { recoverAction } = handleRecover(contextMenuList);
+
+        watchEffect(() => {
+            hasPermission('custom_info_btn_recover') && recoverAction();
+            hasPermission('custom_info_btn_delete') && deleteAction();
+        });
         initData(() => {
             actionQuery(4);
             getColumns();
-            // 加载数据在这里
         });
-        return { customList, columns, search, loading, add, contextMenuList };
+        return { customList, columns, search, loading, contextMenuList, hasPermission, openAction };
     },
 });
 </script>