AccountModal.vue
4.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<template>
<BasicModal
width="650px"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<div style="height: 50vh">
<BasicForm @register="registerForm">
<template #organizationId="{ model, field }">
<BasicTree
v-if="organizationTreeData.length"
v-model:value="model[field]"
:treeData="organizationTreeData"
:checked-keys="checkGroup"
default-expand-all
ref="basicTreeRef"
checkable
toolbar
/>
</template>
</BasicForm>
</div>
</BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { accountFormSchema } from './account.data';
import { findCurrentUserRelation, SaveOrUpdateUserInfo } from '/@/api/system/system';
import { BasicTree, TreeItem } from '/@/components/Tree';
import { findCurrentUserGroups } from '/@/api/system/group';
import { RoleOrOrganizationParam } from '/@/api/system/model/systemModel';
import { useMessage } from '/@/hooks/web/useMessage';
import { copyTransTreeFun } from '/@/utils/fnUtils';
export default defineComponent({
name: 'AccountModal',
components: { BasicModal, BasicForm, BasicTree },
emits: ['success', 'register'],
setup(_, { emit }) {
const isUpdate = ref(true);
const rowId = ref('');
const organizationTreeData = ref<TreeItem[]>([]);
const basicTreeRef = ref();
const checkGroup = ref<string[]>([]);
const olderPhoneNumber = ref();
const [
registerForm,
{ setFieldsValue, updateSchema, resetFields, validate, getFieldsValue },
] = useForm({
labelWidth: 100,
schemas: accountFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 18,
},
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
const groupListModel = await findCurrentUserGroups();
if (!unref(organizationTreeData).length) {
copyTransTreeFun(groupListModel);
organizationTreeData.value = groupListModel;
}
if (unref(isUpdate)) {
rowId.value = data.record.id;
const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
olderPhoneNumber.value = data.record.phoneNumber;
findCurrentUserRelation(roleParams).then((result) => {
Reflect.set(data.record, 'roleIds', result);
Reflect.set(data.record, 'password', '******');
setFieldsValue(data.record);
});
const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
checkGroup.value = await findCurrentUserRelation(organizationParams);
}
await updateSchema([
{
field: 'username',
dynamicDisabled: unref(isUpdate),
},
]);
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));
async function handleSubmit() {
try {
const { createMessage } = useMessage();
const values = await validate([
'id',
'username',
'realName',
'password',
'roleIds',
'email',
'accountExpireTime',
'enabled',
'remark',
'organizationIds',
olderPhoneNumber.value == getFieldsValue().phoneNumber ? '' : 'phoneNumber',
]);
values.accountExpireTime =
typeof values.accountExpireTime != 'undefined' && values.accountExpireTime != null
? values.accountExpireTime.format('YYYY-MM-DD HH:mm:ss')
: null;
setModalProps({ confirmLoading: true });
await SaveOrUpdateUserInfo(values, unref(isUpdate));
closeModal();
emit('success');
createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
} finally {
setModalProps({ confirmLoading: false });
}
}
return {
registerModal,
registerForm,
handleSubmit,
getTitle,
organizationTreeData,
checkGroup,
basicTreeRef,
};
},
});
</script>