0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 个人中心、用户管理代码优化

This commit is contained in:
easy 2023-03-04 13:52:41 +08:00
parent 8f3e8b3c9a
commit b80b3bfb2c
5 changed files with 144 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/menu.ts
View File

@ -8,7 +8,7 @@ export const AccountMenu = {
meta: { meta: {
title: '个人中心', title: '个人中心',
icon: '', icon: '',
hideInMenu: true hideInMenu: false
}, },
children: [ children: [
{ {

1
src/views/account/NotificationRecord/index.vue
View File

@ -158,6 +158,7 @@ const columns = [
key: 'action', key: 'action',
ellipsis: true, ellipsis: true,
scopedSlots: true, scopedSlots: true,
width:'200px'
}, },
]; ];
const query = { const query = {

1
src/views/account/NotificationSubscription/index.vue
View File

@ -147,6 +147,7 @@ const columns = [
key: 'action', key: 'action',
ellipsis: true, ellipsis: true,
scopedSlots: true, scopedSlots: true,
width: '200px'
}, },
]; ];
const query = { const query = {

279
src/views/system/User/components/EditUserDialog.vue
View File

@ -1,18 +1,19 @@
<template> <template>
<a-modal <j-modal
v-model:visible="dialog.visible" visible
:title="dialog.title" :title="dialogTitle"
width="675px" width="675px"
@ok="dialog.handleOk" @ok="confirm"
@cancel="emits('update:visible', false)"
class="edit-dialog-container" class="edit-dialog-container"
:confirmLoading="dialog.loading" :confirmLoading="loading"
cancelText="取消" cancelText="取消"
okText="确定" okText="确定"
> >
<a-form ref="formRef" :model="form.data" layout="vertical"> <j-form ref="formRef" :model="form.data" layout="vertical">
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')"> <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="name" name="name"
label="姓名" label="姓名"
:rules="[ :rules="[
@ -23,14 +24,14 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.name" v-model:value="form.data.name"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="username" name="username"
label="用户名" label="用户名"
:rules="[ :rules="[
@ -41,17 +42,17 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.username" v-model:value="form.data.username"
placeholder="请输入用户名" placeholder="请输入用户名"
:disabled="dialog.type === 'edit'" :disabled="props.type === 'edit'"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row v-if="form.IsShow('add', 'reset')"> <j-row v-if="form.IsShow('add', 'reset')">
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
name="password" name="password"
label="密码" label="密码"
:rules="[ :rules="[
@ -62,21 +63,16 @@
}, },
]" ]"
> >
<a-input-password <j-input-password
v-model:value="form.data.password" v-model:value="form.data.password"
placeholder="请输入密码" placeholder="请输入密码"
/> />
<!-- <Progress </j-form-item>
:percent="20" </j-col>
:steps="5" </j-row>
:strokeColor="{ from: '#ff5500', to: '#ff9300' }" <j-row v-if="form.IsShow('add', 'reset')">
/> --> <j-col :span="24">
</a-form-item> <j-form-item
</a-col>
</a-row>
<a-row v-if="form.IsShow('add', 'reset')">
<a-col :span="24">
<a-form-item
name="confirmPassword" name="confirmPassword"
label="确认密码" label="确认密码"
:rules="[ :rules="[
@ -87,31 +83,26 @@
}, },
]" ]"
> >
<a-input-password <j-input-password
v-model:value="form.data.confirmPassword" v-model:value="form.data.confirmPassword"
placeholder="请再次输入密码" placeholder="请再次输入密码"
:maxlength="64" :maxlength="64"
/> />
<!-- <Progress </j-form-item>
:percent="60" </j-col>
:steps="5" </j-row>
:strokeColor="{ from: '#ff5500', to: '#ff9300' }"
/> -->
</a-form-item>
</a-col>
</a-row>
<!-- 还差页面权限 --> <!-- 还差页面权限 -->
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')"> <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
<a-col :span="12"> <j-col :span="12">
<a-form-item name="roleIdList" label="角色" class="flex"> <j-form-item name="roleIdList" label="角色" class="flex">
<a-select <j-select
v-model:value="form.data.roleIdList" v-model:value="form.data.roleIdList"
mode="multiple" mode="multiple"
style="width: 100%" style="width: 100%"
placeholder="请选择角色" placeholder="请选择角色"
:options="form.roleOptions" :options="form.roleOptions"
></a-select> ></j-select>
<PermissionButton <PermissionButton
:uhasPermission="`${rolePermission}:update`" :uhasPermission="`${rolePermission}:update`"
@click="form.clickAddItem('roleIdList', 'Role')" @click="form.clickAddItem('roleIdList', 'Role')"
@ -119,11 +110,11 @@
> >
<AIcon type="PlusOutlined" /> <AIcon type="PlusOutlined" />
</PermissionButton> </PermissionButton>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item name="orgIdList" label="组织" class="flex"> <j-form-item name="orgIdList" label="组织" class="flex">
<a-tree-select <j-tree-select
v-model:value="form.data.orgIdList" v-model:value="form.data.orgIdList"
show-search show-search
style="width: 100%" style="width: 100%"
@ -135,7 +126,7 @@
<template #title="{ name }"> <template #title="{ name }">
{{ name }} {{ name }}
</template> </template>
</a-tree-select> </j-tree-select>
<PermissionButton <PermissionButton
:uhasPermission="`${deptPermission}:update`" :uhasPermission="`${deptPermission}:update`"
@click="form.clickAddItem('roleIdList', 'Role')" @click="form.clickAddItem('roleIdList', 'Role')"
@ -143,12 +134,12 @@
> >
<AIcon type="PlusOutlined" /> <AIcon type="PlusOutlined" />
</PermissionButton> </PermissionButton>
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')"> <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="telephone" name="telephone"
label="手机号" label="手机号"
:rules="[ :rules="[
@ -158,15 +149,15 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.telephone" v-model:value="form.data.telephone"
placeholder="请输入手机号" placeholder="请输入手机号"
:maxlength="64" :maxlength="64"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="email" name="email"
label="邮箱" label="邮箱"
:rules="[ :rules="[
@ -177,22 +168,21 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.email" v-model:value="form.data.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
:maxlength="64" :maxlength="64"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import PermissionButton from '@/components/PermissionButton/index.vue'; import PermissionButton from '@/components/PermissionButton/index.vue';
import { FormInstance, message } from 'ant-design-vue'; import { FormInstance, message } from 'ant-design-vue';
// import Progress from './Progress.vue';
import { import {
validateField_api, validateField_api,
getRoleList_api, getRoleList_api,
@ -209,46 +199,35 @@ import { AxiosResponse } from 'axios';
const deptPermission = 'system/Department'; const deptPermission = 'system/Department';
const rolePermission = 'system/Role'; 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({ const loading = ref(false);
title: '', const dialogTitle = computed(() => {
visible: false, if (props.type === 'add') return '新增';
type: '' as modalType, else if (props.type === 'edit') return '编辑';
loading: false, else if (props.type === 'reset') return '重置密码';
else return '';
handleOk: () => { });
formRef.value?.validate().then(() => { const confirm = () => {
form.submit(() => { loading.value = true;
dialog.changeVisible('', {} as any); formRef.value
?.validate()
.then(() => form.submit())
.then((resp: any) => {
if (resp.status === 200) {
message.success('操作成功');
emits('confirm'); emits('confirm');
}); emits('update:visible', false);
}); }
}, })
/** .finally(() => (loading.value = false));
* 设置表单类型 };
* @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,
});
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const form = reactive({ const form = reactive({
data: {} as formType, data: {} as formType,
@ -257,7 +236,7 @@ const form = reactive({
checkUserName: (_rule: Rule, value: string): Promise<any> => checkUserName: (_rule: Rule, value: string): Promise<any> =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
console.log(_rule); console.log(_rule);
if (dialog.type === 'edit') return resolve(''); if (props.type === 'edit') return resolve('');
if (!value) return reject('请输入用户名'); if (!value) return reject('请输入用户名');
else if (value.length > 64) return reject('最多可输入64个字符'); else if (value.length > 64) return reject('最多可输入64个字符');
@ -284,7 +263,6 @@ const form = reactive({
? Promise.resolve() ? Promise.resolve()
: Promise.reject('两次密码输入不一致'); : Promise.reject('两次密码输入不一致');
}, },
//
}, },
roleOptions: [] as optionType[], roleOptions: [] as optionType[],
@ -293,11 +271,15 @@ const form = reactive({
init: () => { init: () => {
form.getDepartmentList(); form.getDepartmentList();
form.getRoleList(); form.getRoleList();
form.getUserInfo();
}, },
getUserInfo: (id: string, type: modalType) => { getUserInfo: () => {
if (type === 'add') form.data = {} as formType; const id = props.data.id || '';
else if (type === 'reset') form.data = { id } as formType; console.log(111);
else if (type === 'edit') {
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) => { getUser_api(id).then((resp: any) => {
form.data = { form.data = {
...(resp.result as formType), ...(resp.result as formType),
@ -314,46 +296,33 @@ const form = reactive({
}); });
} }
}, },
submit: (cb?: Function) => { submit: (): Promise<any> => {
let api: axiosFunType; let api: axiosFunType;
let params = {}; 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(() => { if (props.type === 'add') {
message.success('操作成功'); api = addUser_api;
cb && cb(); 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: () => {
getRoleList_api().then((resp: any) => { getRoleList_api().then((resp: any) => {
@ -368,7 +337,7 @@ const form = reactive({
form.departmentOptions = resp.result; form.departmentOptions = resp.result;
}); });
}, },
IsShow: (...typeList: modalType[]) => typeList.includes(dialog.type), IsShow: (...typeList: modalType[]) => typeList.includes(props.type),
clickAddItem: (prop: 'roleIdList' | 'orgIdList', target: string) => { clickAddItem: (prop: 'roleIdList' | 'orgIdList', target: string) => {
const tab: any = window.open(`${origin}/#/system/${target}?save=true`); const tab: any = window.open(`${origin}/#/system/${target}?save=true`);
tab.onSaveSuccess = (value: string) => { tab.onSaveSuccess = (value: string) => {

156
src/views/system/User/index.vue
View File

@ -43,7 +43,7 @@
:tooltip="{ :tooltip="{
title: '编辑', title: '编辑',
}" }"
@click="table.openDialog('edit',slotProps)" @click="table.openDialog('edit', slotProps)"
> >
<AIcon type="EditOutlined" /> <AIcon type="EditOutlined" />
</PermissionButton> </PermissionButton>
@ -93,7 +93,13 @@
</template> </template>
</j-pro-table> </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> </div>
</page-container> </page-container>
</template> </template>
@ -203,153 +209,19 @@ const columns = [
}, },
]; ];
const query = { 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({}), params: ref({}),
search: (params: object) => { search: (params: object) => {
query.params.value = params; query.params.value = params;
}, },
}; };
const editDialogRef = ref(); // 弹窗实例
const tableRef = ref<Record<string, any>>({}); // 表格实例 const tableRef = ref<Record<string, any>>({}); // 表格实例
const table = { 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) => { openDialog: (type: modalType, row?: any) => {
editDialogRef.value.openDialog(type, row || {}); dialog.selectItem = { ...(row || {}) };
dialog.type = type;
dialog.visible = true;
}, },
changeStatus: (row: any) => { changeStatus: (row: any) => {
const params = { const params = {
@ -374,6 +246,12 @@ const table = {
}, },
}; };
const dialog = reactive({
selectItem: {},
visible: false,
type: '' as modalType,
});
type dictType = { type dictType = {
id: string; id: string;
name: string; name: string;