TenantDrawer.vue
4.29 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
133
<template>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
showFooter
:title="getTitle"
width="500px"
@ok="handleSubmit"
>
<BasicForm @register="tenantForm" />
</BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { tenantFormSchema } from '/@/views/tenant/list/tenantBaseColumns';
import { getTenantRoles, updateOrCreateTenant } from '/@/api/tenant/tenantApi';
import { useMessage } from '/@/hooks/web/useMessage';
import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
import { buildUUID } from '/@/utils/uuid';
export default defineComponent({
name: 'TenantDrawer',
components: {
BasicDrawer,
BasicForm,
},
emits: ['success', 'register'],
setup(_, { emit }) {
const loading = ref(false);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const [tenantForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
labelWidth: 100,
schemas: tenantFormSchema,
showActionButtonGroup: false,
baseColProps: { lg: 24, md: 24 },
});
const { t } = useI18n(); // 加载国际化
//默认传递页面数据
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
await resetFields();
setDrawerProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
//初始化，菜单名称为可用
await updateSchema({ field: 'title', componentProps: { disabled: false } });
//如果是编辑操作，设置页面数据
if (unref(isUpdate)) {
if (data.record.icon) {
setFieldsValue({
icon: [{ uid: buildUUID(), name: 'name', url: data.record.icon } as FileItem],
});
}
getTenantRoles(data.record.tenantId).then((result) => {
const { icon: _, ...params } = data.record;
//为表单赋值
setFieldsValue({
...params,
roleIds: result,
});
//编辑模式，菜单名称为不可用
updateSchema({ field: 'title', componentProps: { disabled: true } });
});
}
});
//得到页面标题
const getTitle = computed(() =>
!unref(isUpdate)
? t('routes.common.system.pageSystemTitleCreateTenant')
: t('routes.common.system.pageSystemTitleEditTenant')
);
//提交按钮
async function handleSubmit() {
setDrawerProps({ confirmLoading: true });
try {
const values = await validate();
if (Reflect.has(values, 'icon')) {
const file = (values.icon || []).at(0) || {};
values.icon = file.url || null;
}
const req = {
id: values.id,
icon: values.icon,
name: values.name,
enabled: values.enabled,
description: values.description,
roleIds: values.roleIds,
tenantId: values.tenantId,
tenantExpireTime:
typeof values.tenantExpireTime != 'undefined' && values.tenantExpireTime != null
? values.tenantExpireTime.format('YYYY-MM-DD HH:mm:ss')
: null,
tenantProfileId: {
id: values.tenantProfileId,
entityType: 'TENANT_PROFILE',
},
};
await updateOrCreateTenant(req);
emit('success');
createMessage.success(`${unref(isUpdate) ? '编辑' : '新增'}成功`);
closeDrawer(); //关闭侧框
} catch (e) {
if ((e as { code: string }).code === 'ECONNABORTED') {
emit('success');
closeDrawer(); //关闭侧框
}
} finally {
setDrawerProps({ confirmLoading: false });
}
}
return {
registerDrawer,
tenantForm,
getTitle,
handleSubmit,
loading,
};
},
});
</script>
<style>
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
</style>