PanelDetailModal.vue
2.75 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
<script lang="ts" setup>
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form';
import { formSchema } from '../config/panelDetail';
import { addDataBoard, updateDataBoard } from '/@/api/dataBoard';
import { AddDataBoardParams } from '/@/api/dataBoard/model';
import { useMessage } from '/@/hooks/web/useMessage';
import type { DataBoardRecord, UpdateDataBoardParams } from '/@/api/dataBoard/model';
import { ref, unref } from 'vue';
const emit = defineEmits(['change', 'register']);
const isEdit = ref(false);
const recordId = ref<Nullable<string>>(null);
const loading = ref(false);
const [registerModal, { changeLoading, closeModal }] = useModalInner(
(record: DataBoardRecord & { isEdit: boolean }) => {
method.setFieldsValue(record);
recordId.value = record.id;
isEdit.value = record.isEdit;
}
);
const [registerForm, method] = useForm({
showActionButtonGroup: false,
schemas: formSchema,
labelWidth: 80,
});
const { createMessage } = useMessage();
const handleSubmitValue = (value: Recordable) => {
if (!Reflect.get(value, 'accessCredentials')) {
Reflect.deleteProperty(value, 'accessCredentials');
}
return value as any;
};
const handleCreatePanel = async () => {
await method.validate();
try {
let value = method.getFieldsValue() as AddDataBoardParams;
value = handleSubmitValue(value);
loading.value = true;
changeLoading(true);
await addDataBoard(value);
createMessage.success('创建成功');
closeModal();
emit('change');
} catch (error) {
createMessage.error('创建失败');
} finally {
changeLoading(false);
loading.value = false;
}
};
const handleEditPanel = async () => {
await method.validate();
try {
loading.value = true;
let value = method.getFieldsValue() as UpdateDataBoardParams;
value = handleSubmitValue(value);
value.id = unref(recordId) as string;
changeLoading(true);
await updateDataBoard(value);
createMessage.success('编辑成功');
closeModal();
emit('change');
} catch (error) {
createMessage.error('编辑失败');
} finally {
changeLoading(false);
loading.value = false;
}
};
const handleGetValue = () => {
unref(isEdit) ? handleEditPanel() : handleCreatePanel();
isEdit.value = false;
};
</script>
<template>
<BasicModal
v-bind="$attrs"
:destroyOnClose="true"
:title="isEdit ? '编辑看板' : '创建看板'"
@register="registerModal"
@ok="handleGetValue"
:okButtonProps="{ loading }"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<style scoped></style>