1
|
1
|
<template>
|
2
|
2
|
<div>
|
3
|
|
- <PageWrapper :title="`用户资料`" contentBackground @back="goBack">
|
4
|
|
- <Description size="middle" @register="register" />
|
5
|
|
- </PageWrapper>
|
|
3
|
+ <BasicModal
|
|
4
|
+ width="650px"
|
|
5
|
+ v-bind="$attrs"
|
|
6
|
+ @register="registerModal"
|
|
7
|
+ :title="getTitle"
|
|
8
|
+ @ok="handleSubmit"
|
|
9
|
+ >
|
|
10
|
+ <PageWrapper :title="`用户资料`" contentBackground @back="goBack">
|
|
11
|
+ <Description size="middle" @register="register" />
|
|
12
|
+ </PageWrapper>
|
|
13
|
+ </BasicModal>
|
6
|
14
|
</div>
|
7
|
15
|
</template>
|
8
|
16
|
|
9
|
17
|
<script>
|
10
|
|
- import { defineComponent } from 'vue';
|
11
|
|
- import { useRoute } from 'vue-router';
|
|
18
|
+ import { defineComponent, ref } from 'vue';
|
|
19
|
+ // import { useRoute } from 'vue-router';
|
12
|
20
|
import { PageWrapper } from '/@/components/Page';
|
13
|
21
|
import { useGo } from '/@/hooks/web/usePage';
|
14
|
22
|
import { Description } from '../../../components/Description';
|
...
|
...
|
@@ -16,14 +24,18 @@ |
16
|
24
|
import { getAccountInfo } from '../../../api/system/system';
|
17
|
25
|
import { accountSchema } from './account.detail.data';
|
18
|
26
|
import { useDescription } from '../../../components/Description';
|
|
27
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
28
|
+
|
19
|
29
|
const accountData = {};
|
20
|
30
|
export default defineComponent({
|
21
|
31
|
name: 'AccountDetail',
|
22
|
|
- components: { PageWrapper, Description },
|
|
32
|
+ components: { PageWrapper, Description, BasicModal },
|
23
|
33
|
setup() {
|
24
|
|
- const route = useRoute();
|
|
34
|
+ // const route = useRoute();
|
25
|
35
|
const go = useGo();
|
26
|
36
|
const { setTitle } = useTabs();
|
|
37
|
+ const getId = ref('');
|
|
38
|
+ const getTitle = ref('');
|
27
|
39
|
const [register, methods] = useDescription({
|
28
|
40
|
title: '账号基础信息',
|
29
|
41
|
data: accountData,
|
...
|
...
|
@@ -31,30 +43,35 @@ |
31
|
43
|
schema: accountSchema,
|
32
|
44
|
column: 3,
|
33
|
45
|
});
|
34
|
|
- getAccountInfo(route.params?.id).then((result) => {
|
35
|
|
- Reflect.set(accountData, 'realName', result.realName);
|
36
|
|
- Reflect.set(accountData, 'phoneNumber', result.phoneNumber);
|
37
|
|
- Reflect.set(accountData, 'email', result.email);
|
38
|
|
- Reflect.set(accountData, 'username', result.username);
|
39
|
|
- Reflect.set(
|
40
|
|
- accountData,
|
41
|
|
- 'enabled',
|
42
|
|
- result.enabled ? '正常' : !result.enabled ? '禁用' : '已过期'
|
43
|
|
- );
|
44
|
|
- Reflect.set(accountData, 'accountExpireTime', result.accountExpireTime);
|
45
|
|
- Reflect.set(accountData, 'createTime', result.createTime);
|
46
|
|
- Reflect.set(accountData, 'updateTime', result.updateTime);
|
47
|
|
- Reflect.set(accountData, 'deptId', result.deptId);
|
48
|
|
- // 设置Tab的标题(不会影响页面标题)
|
49
|
|
- setTitle('详情:用户' + result.realName);
|
50
|
|
- methods.setDescProps(accountData);
|
|
46
|
+
|
|
47
|
+ const [registerModal] = useModalInner(async (data) => {
|
|
48
|
+ getId.value = await data.record.id;
|
|
49
|
+ getAccountInfo(getId.value).then((result) => {
|
|
50
|
+ Reflect.set(accountData, 'realName', result.realName);
|
|
51
|
+ Reflect.set(accountData, 'phoneNumber', result.phoneNumber);
|
|
52
|
+ Reflect.set(accountData, 'email', result.email);
|
|
53
|
+ Reflect.set(accountData, 'username', result.username);
|
|
54
|
+ Reflect.set(
|
|
55
|
+ accountData,
|
|
56
|
+ 'enabled',
|
|
57
|
+ result.enabled ? '正常' : !result.enabled ? '禁用' : '已过期'
|
|
58
|
+ );
|
|
59
|
+ Reflect.set(accountData, 'accountExpireTime', result.accountExpireTime);
|
|
60
|
+ Reflect.set(accountData, 'createTime', result.createTime);
|
|
61
|
+ Reflect.set(accountData, 'updateTime', result.updateTime);
|
|
62
|
+ Reflect.set(accountData, 'deptId', result.deptId);
|
|
63
|
+ // 设置Tab的标题(不会影响页面标题)
|
|
64
|
+ setTitle('详情:用户' + result.realName);
|
|
65
|
+ getTitle.value = '详情:用户' + result.realName;
|
|
66
|
+ methods.setDescProps(accountData);
|
|
67
|
+ });
|
51
|
68
|
});
|
52
|
69
|
// 页面左侧点击返回链接时的操作
|
53
|
70
|
function goBack() {
|
54
|
71
|
// 本例的效果时点击返回始终跳转到账号列表页,实际应用时可返回上一页
|
55
|
72
|
go('/system/account');
|
56
|
73
|
}
|
57
|
|
- return { goBack, accountSchema, accountData, register };
|
|
74
|
+ return { goBack, accountSchema, accountData, register, registerModal, getTitle };
|
58
|
75
|
},
|
59
|
76
|
});
|
60
|
77
|
</script>
|
...
|
...
|
|