From b80b3bfb2c004401eff5ac000bff6579bfac5255 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Sat, 4 Mar 2023 13:52:41 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E3=80=81=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/menu.ts                            |   2 +-
 .../account/NotificationRecord/index.vue      |   1 +
 .../NotificationSubscription/index.vue        |   1 +
 .../system/User/components/EditUserDialog.vue | 279 ++++++++----------
 src/views/system/User/index.vue               | 156 ++--------
 5 files changed, 144 insertions(+), 295 deletions(-)

diff --git a/src/router/menu.ts b/src/router/menu.ts
index 3e2b8935..a0f22e16 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -8,7 +8,7 @@ export const AccountMenu = {
     meta: {
         title: '个人中心',
         icon: '',
-        hideInMenu: true
+        hideInMenu: false
     },
     children: [
         {
diff --git a/src/views/account/NotificationRecord/index.vue b/src/views/account/NotificationRecord/index.vue
index ca3765fb..84790dbc 100644
--- a/src/views/account/NotificationRecord/index.vue
+++ b/src/views/account/NotificationRecord/index.vue
@@ -158,6 +158,7 @@ const columns = [
         key: 'action',
         ellipsis: true,
         scopedSlots: true,
+        width:'200px'
     },
 ];
 const query = {
diff --git a/src/views/account/NotificationSubscription/index.vue b/src/views/account/NotificationSubscription/index.vue
index f7790682..f0a82188 100644
--- a/src/views/account/NotificationSubscription/index.vue
+++ b/src/views/account/NotificationSubscription/index.vue
@@ -147,6 +147,7 @@ const columns = [
         key: 'action',
         ellipsis: true,
         scopedSlots: true,
+        width: '200px'
     },
 ];
 const query = {
diff --git a/src/views/system/User/components/EditUserDialog.vue b/src/views/system/User/components/EditUserDialog.vue
index 23c0b36f..eee7aaf4 100644
--- a/src/views/system/User/components/EditUserDialog.vue
+++ b/src/views/system/User/components/EditUserDialog.vue
@@ -1,18 +1,19 @@
 <template>
-    <a-modal
-        v-model:visible="dialog.visible"
-        :title="dialog.title"
+    <j-modal
+        visible
+        :title="dialogTitle"
         width="675px"
-        @ok="dialog.handleOk"
+        @ok="confirm"
+        @cancel="emits('update:visible', false)"
         class="edit-dialog-container"
-        :confirmLoading="dialog.loading"
+        :confirmLoading="loading"
         cancelText="取消"
         okText="确定"
     >
-        <a-form ref="formRef" :model="form.data" layout="vertical">
-            <a-row :gutter="24" v-if="form.IsShow('add', 'edit')">
-                <a-col :span="12">
-                    <a-form-item
+        <j-form ref="formRef" :model="form.data" layout="vertical">
+            <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
+                <j-col :span="12">
+                    <j-form-item
                         name="name"
                         label="姓名"
                         :rules="[
@@ -23,14 +24,14 @@
                             },
                         ]"
                     >
-                        <a-input
+                        <j-input
                             v-model:value="form.data.name"
                             placeholder="请输入姓名"
                         />
-                    </a-form-item>
-                </a-col>
-                <a-col :span="12">
-                    <a-form-item
+                    </j-form-item>
+                </j-col>
+                <j-col :span="12">
+                    <j-form-item
                         name="username"
                         label="用户名"
                         :rules="[
@@ -41,17 +42,17 @@
                             },
                         ]"
                     >
-                        <a-input
+                        <j-input
                             v-model:value="form.data.username"
                             placeholder="请输入用户名"
-                            :disabled="dialog.type === 'edit'"
+                            :disabled="props.type === 'edit'"
                         />
-                    </a-form-item>
-                </a-col>
-            </a-row>
-            <a-row v-if="form.IsShow('add', 'reset')">
-                <a-col :span="24">
-                    <a-form-item
+                    </j-form-item>
+                </j-col>
+            </j-row>
+            <j-row v-if="form.IsShow('add', 'reset')">
+                <j-col :span="24">
+                    <j-form-item
                         name="password"
                         label="密码"
                         :rules="[
@@ -62,21 +63,16 @@
                             },
                         ]"
                     >
-                        <a-input-password
+                        <j-input-password
                             v-model:value="form.data.password"
                             placeholder="请输入密码"
                         />
-                        <!-- <Progress
-                            :percent="20"
-                            :steps="5"
-                            :strokeColor="{ from: '#ff5500', to: '#ff9300' }"
-                        /> -->
-                    </a-form-item>
-                </a-col>
-            </a-row>
-            <a-row v-if="form.IsShow('add', 'reset')">
-                <a-col :span="24">
-                    <a-form-item
+                    </j-form-item>
+                </j-col>
+            </j-row>
+            <j-row v-if="form.IsShow('add', 'reset')">
+                <j-col :span="24">
+                    <j-form-item
                         name="confirmPassword"
                         label="确认密码"
                         :rules="[
@@ -87,31 +83,26 @@
                             },
                         ]"
                     >
-                        <a-input-password
+                        <j-input-password
                             v-model:value="form.data.confirmPassword"
                             placeholder="请再次输入密码"
                             :maxlength="64"
                         />
-                        <!-- <Progress
-                            :percent="60"
-                            :steps="5"
-                            :strokeColor="{ from: '#ff5500', to: '#ff9300' }"
-                        /> -->
-                    </a-form-item>
-                </a-col>
-            </a-row>
+                    </j-form-item>
+                </j-col>
+            </j-row>
             <!-- 还差页面权限 -->
-            <a-row :gutter="24" v-if="form.IsShow('add', 'edit')">
-                <a-col :span="12">
-                    <a-form-item name="roleIdList" label="角色" class="flex">
-                        <a-select
+            <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
+                <j-col :span="12">
+                    <j-form-item name="roleIdList" label="角色" class="flex">
+                        <j-select
                             v-model:value="form.data.roleIdList"
                             mode="multiple"
                             style="width: 100%"
                             placeholder="请选择角色"
                             :options="form.roleOptions"
-                        ></a-select>
-                        
+                        ></j-select>
+
                         <PermissionButton
                             :uhasPermission="`${rolePermission}:update`"
                             @click="form.clickAddItem('roleIdList', 'Role')"
@@ -119,11 +110,11 @@
                         >
                             <AIcon type="PlusOutlined" />
                         </PermissionButton>
-                    </a-form-item>
-                </a-col>
-                <a-col :span="12">
-                    <a-form-item name="orgIdList" label="组织" class="flex">
-                        <a-tree-select
+                    </j-form-item>
+                </j-col>
+                <j-col :span="12">
+                    <j-form-item name="orgIdList" label="组织" class="flex">
+                        <j-tree-select
                             v-model:value="form.data.orgIdList"
                             show-search
                             style="width: 100%"
@@ -135,7 +126,7 @@
                             <template #title="{ name }">
                                 {{ name }}
                             </template>
-                        </a-tree-select>
+                        </j-tree-select>
                         <PermissionButton
                             :uhasPermission="`${deptPermission}:update`"
                             @click="form.clickAddItem('roleIdList', 'Role')"
@@ -143,12 +134,12 @@
                         >
                             <AIcon type="PlusOutlined" />
                         </PermissionButton>
-                    </a-form-item>
-                </a-col>
-            </a-row>
-            <a-row :gutter="24" v-if="form.IsShow('add', 'edit')">
-                <a-col :span="12">
-                    <a-form-item
+                    </j-form-item>
+                </j-col>
+            </j-row>
+            <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
+                <j-col :span="12">
+                    <j-form-item
                         name="telephone"
                         label="手机号"
                         :rules="[
@@ -158,15 +149,15 @@
                             },
                         ]"
                     >
-                        <a-input
+                        <j-input
                             v-model:value="form.data.telephone"
                             placeholder="请输入手机号"
                             :maxlength="64"
                         />
-                    </a-form-item>
-                </a-col>
-                <a-col :span="12">
-                    <a-form-item
+                    </j-form-item>
+                </j-col>
+                <j-col :span="12">
+                    <j-form-item
                         name="email"
                         label="邮箱"
                         :rules="[
@@ -177,22 +168,21 @@
                             },
                         ]"
                     >
-                        <a-input
+                        <j-input
                             v-model:value="form.data.email"
                             placeholder="请输入邮箱"
                             :maxlength="64"
                         />
-                    </a-form-item>
-                </a-col>
-            </a-row>
-        </a-form>
-    </a-modal>
+                    </j-form-item>
+                </j-col>
+            </j-row>
+        </j-form>
+    </j-modal>
 </template>
 
 <script setup lang="ts">
 import PermissionButton from '@/components/PermissionButton/index.vue';
 import { FormInstance, message } from 'ant-design-vue';
-// import Progress from './Progress.vue';
 import {
     validateField_api,
     getRoleList_api,
@@ -209,46 +199,35 @@ import { AxiosResponse } from 'axios';
 const deptPermission = 'system/Department';
 const rolePermission = 'system/Role';
 
-const emits = defineEmits(['confirm']);
+const emits = defineEmits(['confirm', 'update:visible']);
+const props = defineProps<{
+    type: modalType;
+    data: any;
+    visible: boolean;
+}>();
 // 弹窗相关
-const dialog = reactive({
-    title: '',
-    visible: false,
-    type: '' as modalType,
-    loading: false,
-
-    handleOk: () => {
-        formRef.value?.validate().then(() => {
-            form.submit(() => {
-                dialog.changeVisible('', {} as any);
+const loading = ref(false);
+const dialogTitle = computed(() => {
+    if (props.type === 'add') return '新增';
+    else if (props.type === 'edit') return '编辑';
+    else if (props.type === 'reset') return '重置密码';
+    else return '';
+});
+const confirm = () => {
+    loading.value = true;
+    formRef.value
+        ?.validate()
+        .then(() => form.submit())
+        .then((resp: any) => {
+            if (resp.status === 200) {
+                message.success('操作成功');
                 emits('confirm');
-            });
-        });
-    },
-    /**
-     * 设置表单类型
-     * @param type 弹窗类型
-     * @param defaultForm 表单回显对象
-     */
-    changeVisible: (type: modalType, defaultForm: formType) => {
-        dialog.setTitle(type);
-        console.log(defaultForm);
-        
-        form.getUserInfo(defaultForm.id || '', type);
-        dialog.type = type;
-        dialog.visible = type !== '';
-    },
-    setTitle: (type: modalType) => {
-        if (type === 'add') dialog.title = '新增';
-        else if (type === 'edit') dialog.title = '编辑';
-        else if (type === 'reset') dialog.title = '重置密码';
-        else dialog.title = '';
-    },
-});
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
+                emits('update:visible', false);
+            }
+        })
+        .finally(() => (loading.value = false));
+};
+
 const formRef = ref<FormInstance>();
 const form = reactive({
     data: {} as formType,
@@ -257,7 +236,7 @@ const form = reactive({
         checkUserName: (_rule: Rule, value: string): Promise<any> =>
             new Promise((resolve, reject) => {
                 console.log(_rule);
-                if (dialog.type === 'edit') return resolve('');
+                if (props.type === 'edit') return resolve('');
 
                 if (!value) return reject('请输入用户名');
                 else if (value.length > 64) return reject('最多可输入64个字符');
@@ -284,7 +263,6 @@ const form = reactive({
                 ? Promise.resolve()
                 : Promise.reject('两次密码输入不一致');
         },
-        //
     },
 
     roleOptions: [] as optionType[],
@@ -293,11 +271,15 @@ const form = reactive({
     init: () => {
         form.getDepartmentList();
         form.getRoleList();
+        form.getUserInfo();
     },
-    getUserInfo: (id: string, type: modalType) => {
-        if (type === 'add') form.data = {} as formType;
-        else if (type === 'reset') form.data = { id } as formType;
-        else if (type === 'edit') {
+    getUserInfo: () => {
+        const id = props.data.id || '';
+        console.log(111);
+
+        if (props.type === 'add') form.data = {} as formType;
+        else if (props.type === 'reset') form.data = { id } as formType;
+        else if (props.type === 'edit') {
             getUser_api(id).then((resp: any) => {
                 form.data = {
                     ...(resp.result as formType),
@@ -314,46 +296,33 @@ const form = reactive({
             });
         }
     },
-    submit: (cb?: Function) => {
+    submit: (): Promise<any> => {
         let api: axiosFunType;
         let params = {};
-        switch (dialog.type) {
-            case 'add': {
-                api = addUser_api;
-                params = {
-                    user: form.data,
-                    orgIdList: form.data.orgIdList,
-                    roleIdList: form.data.roleIdList,
-                };
-                break;
-            }
-            case 'edit': {
-                api = updateUser_api;
-                params = {
-                    id: form.data.id,
-                    user: form.data,
-                    orgIdList: form.data.orgIdList,
-                    roleIdList: form.data.roleIdList,
-                };
-                break;
-            }
-            case 'reset': {
-                api = updatePassword_api;
-                params = {
-                    id: form.data.id,
-                    password: form.data.password,
-                };
-                break;
-            }
-            default:
-                return;
-        }
-        console.log(params);
 
-        api(params).then(() => {
-            message.success('操作成功');
-            cb && cb();
-        });
+        if (props.type === 'add') {
+            api = addUser_api;
+            params = {
+                user: form.data,
+                orgIdList: form.data.orgIdList,
+                roleIdList: form.data.roleIdList,
+            };
+        } else if (props.type === 'edit') {
+            api = updateUser_api;
+            params = {
+                id: form.data.id,
+                user: form.data,
+                orgIdList: form.data.orgIdList,
+                roleIdList: form.data.roleIdList,
+            };
+        } else if (props.type === 'reset') {
+            api = updatePassword_api;
+            params = {
+                id: form.data.id,
+                password: form.data.password,
+            };
+        } else return Promise.reject();
+        return api(params);
     },
     getRoleList: () => {
         getRoleList_api().then((resp: any) => {
@@ -368,7 +337,7 @@ const form = reactive({
             form.departmentOptions = resp.result;
         });
     },
-    IsShow: (...typeList: modalType[]) => typeList.includes(dialog.type),
+    IsShow: (...typeList: modalType[]) => typeList.includes(props.type),
     clickAddItem: (prop: 'roleIdList' | 'orgIdList', target: string) => {
         const tab: any = window.open(`${origin}/#/system/${target}?save=true`);
         tab.onSaveSuccess = (value: string) => {
diff --git a/src/views/system/User/index.vue b/src/views/system/User/index.vue
index cada0829..64a6c72d 100644
--- a/src/views/system/User/index.vue
+++ b/src/views/system/User/index.vue
@@ -43,7 +43,7 @@
                             :tooltip="{
                                 title: '编辑',
                             }"
-                            @click="table.openDialog('edit',slotProps)"
+                            @click="table.openDialog('edit', slotProps)"
                         >
                             <AIcon type="EditOutlined" />
                         </PermissionButton>
@@ -93,7 +93,13 @@
                 </template>
             </j-pro-table>
 
-            <EditUserDialog ref="editDialogRef" @confirm="table.refresh" />
+            <EditUserDialog
+                v-if="dialog.visible"
+                :type="dialog.type"
+                v-model:visible="dialog.visible"
+                :data="dialog.selectItem"
+                @confirm="table.refresh"
+            />
         </div>
     </page-container>
 </template>
@@ -203,153 +209,19 @@ const columns = [
     },
 ];
 const query = {
-    columns: [
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            ellipsis: true,
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '用户类型',
-            dataIndex: 'type',
-            key: 'type',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'select',
-                options: () =>
-                    new Promise((resolve) => {
-                        getUserType_api().then((resp: any) => {
-                            resolve(
-                                resp.result.map((item: dictType) => ({
-                                    label: item.name,
-                                    value: item.id,
-                                })),
-                            );
-                        });
-                    }),
-            },
-        },
-        {
-            title: '状态',
-            dataIndex: 'status',
-            key: 'status',
-            ellipsis: true,
-            search: {
-                rename: 'status',
-                type: 'select',
-                options: [
-                    {
-                        label: '启用',
-                        value: 1,
-                    },
-                    {
-                        label: '禁用',
-                        value: 0,
-                    },
-                ],
-            },
-        },
-        {
-            title: '手机号',
-            dataIndex: 'telephone',
-            key: 'telephone',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '邮箱',
-            dataIndex: 'email',
-            key: 'email',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-    ],
     params: ref({}),
-
     search: (params: object) => {
         query.params.value = params;
     },
 };
 
-const editDialogRef = ref(); // 弹窗实例
 const tableRef = ref<Record<string, any>>({}); // 表格实例
 const table = {
-    columns: [
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-        },
-        {
-            title: '用户名',
-            dataIndex: 'username',
-            key: 'username',
-            ellipsis: true,
-        },
-        {
-            title: '用户类型',
-            dataIndex: 'type',
-            key: 'type',
-            scopedSlots: true,
-        },
-        {
-            title: '状态',
-            dataIndex: 'status',
-            key: 'status',
-            scopedSlots: true,
-        },
-        {
-            title: '手机号',
-            dataIndex: 'telephone',
-            key: 'telephone',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '邮箱',
-            dataIndex: 'email',
-            key: 'email',
-            ellipsis: true,
-            fixed: 'left',
-            search: {
-                type: 'string',
-            },
-        },
-        {
-            title: '操作',
-            dataIndex: 'action',
-            key: 'action',
-            scopedSlots: true,
-        },
-    ],
-
     // 打开编辑弹窗
     openDialog: (type: modalType, row?: any) => {
-        editDialogRef.value.openDialog(type, row || {});
+        dialog.selectItem = { ...(row || {}) };
+        dialog.type = type;
+        dialog.visible = true;
     },
     changeStatus: (row: any) => {
         const params = {
@@ -374,6 +246,12 @@ const table = {
     },
 };
 
+const dialog = reactive({
+    selectItem: {},
+    visible: false,
+    type: '' as modalType,
+});
+
 type dictType = {
     id: string;
     name: string;