Commit 154ef642981d48749e6bea7ce82a7f2dc53f17f4
1 parent
bd38efea
fix: visual board list and detail update or create add loading effect
Showing
2 changed files
with
12 additions
and
0 deletions
@@ -12,6 +12,7 @@ | @@ -12,6 +12,7 @@ | ||
12 | 12 | ||
13 | const isEdit = ref(false); | 13 | const isEdit = ref(false); |
14 | const recordId = ref<Nullable<string>>(null); | 14 | const recordId = ref<Nullable<string>>(null); |
15 | + const loading = ref(false); | ||
15 | 16 | ||
16 | const [registerModal, { changeLoading, closeModal }] = useModalInner( | 17 | const [registerModal, { changeLoading, closeModal }] = useModalInner( |
17 | (record: DataBoardRecord & { isEdit: boolean }) => { | 18 | (record: DataBoardRecord & { isEdit: boolean }) => { |
@@ -33,6 +34,7 @@ | @@ -33,6 +34,7 @@ | ||
33 | await method.validate(); | 34 | await method.validate(); |
34 | try { | 35 | try { |
35 | const value = method.getFieldsValue() as AddDataBoardParams; | 36 | const value = method.getFieldsValue() as AddDataBoardParams; |
37 | + loading.value = true; | ||
36 | changeLoading(true); | 38 | changeLoading(true); |
37 | await addDataBoard(value); | 39 | await addDataBoard(value); |
38 | createMessage.success('创建成功'); | 40 | createMessage.success('创建成功'); |
@@ -42,12 +44,14 @@ | @@ -42,12 +44,14 @@ | ||
42 | createMessage.error('创建失败'); | 44 | createMessage.error('创建失败'); |
43 | } finally { | 45 | } finally { |
44 | changeLoading(false); | 46 | changeLoading(false); |
47 | + loading.value = false; | ||
45 | } | 48 | } |
46 | }; | 49 | }; |
47 | 50 | ||
48 | const handleEditPanel = async () => { | 51 | const handleEditPanel = async () => { |
49 | await method.validate(); | 52 | await method.validate(); |
50 | try { | 53 | try { |
54 | + loading.value = true; | ||
51 | const value = method.getFieldsValue() as UpdateDataBoardParams; | 55 | const value = method.getFieldsValue() as UpdateDataBoardParams; |
52 | value.id = unref(recordId) as string; | 56 | value.id = unref(recordId) as string; |
53 | changeLoading(true); | 57 | changeLoading(true); |
@@ -59,6 +63,7 @@ | @@ -59,6 +63,7 @@ | ||
59 | createMessage.error('编辑失败'); | 63 | createMessage.error('编辑失败'); |
60 | } finally { | 64 | } finally { |
61 | changeLoading(false); | 65 | changeLoading(false); |
66 | + loading.value = false; | ||
62 | } | 67 | } |
63 | }; | 68 | }; |
64 | 69 | ||
@@ -75,6 +80,7 @@ | @@ -75,6 +80,7 @@ | ||
75 | :title="isEdit ? '编辑看板' : '创建看板'" | 80 | :title="isEdit ? '编辑看板' : '创建看板'" |
76 | @register="registerModal" | 81 | @register="registerModal" |
77 | @ok="handleGetValue" | 82 | @ok="handleGetValue" |
83 | + :okButtonProps="{ loading }" | ||
78 | > | 84 | > |
79 | <BasicForm @register="registerForm" /> | 85 | <BasicForm @register="registerForm" /> |
80 | </BasicModal> | 86 | </BasicModal> |
@@ -25,6 +25,7 @@ | @@ -25,6 +25,7 @@ | ||
25 | const emit = defineEmits(['update', 'create', 'register']); | 25 | const emit = defineEmits(['update', 'create', 'register']); |
26 | const ROUTE = useRoute(); | 26 | const ROUTE = useRoute(); |
27 | 27 | ||
28 | + const loading = ref(false); | ||
28 | const { createMessage } = useMessage(); | 29 | const { createMessage } = useMessage(); |
29 | 30 | ||
30 | const boardId = computed(() => { | 31 | const boardId = computed(() => { |
@@ -81,6 +82,7 @@ | @@ -81,6 +82,7 @@ | ||
81 | } | 82 | } |
82 | const layout = calcLayoutInfo(unref(props.layout)); | 83 | const layout = calcLayoutInfo(unref(props.layout)); |
83 | changeOkLoading(true); | 84 | changeOkLoading(true); |
85 | + loading.value = true; | ||
84 | await addDataComponent({ | 86 | await addDataComponent({ |
85 | boardId: unref(boardId), | 87 | boardId: unref(boardId), |
86 | record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value, layout }, | 88 | record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value, layout }, |
@@ -93,12 +95,14 @@ | @@ -93,12 +95,14 @@ | ||
93 | // createMessage.error('创建失败'); | 95 | // createMessage.error('创建失败'); |
94 | } finally { | 96 | } finally { |
95 | changeOkLoading(false); | 97 | changeOkLoading(false); |
98 | + loading.value = false; | ||
96 | } | 99 | } |
97 | }; | 100 | }; |
98 | 101 | ||
99 | const handleUpdateComponent = async (value: Recordable) => { | 102 | const handleUpdateComponent = async (value: Recordable) => { |
100 | try { | 103 | try { |
101 | changeOkLoading(true); | 104 | changeOkLoading(true); |
105 | + loading.value = true; | ||
102 | const res = await updateDataComponent({ | 106 | const res = await updateDataComponent({ |
103 | boardId: unref(boardId), | 107 | boardId: unref(boardId), |
104 | record: { | 108 | record: { |
@@ -116,6 +120,7 @@ | @@ -116,6 +120,7 @@ | ||
116 | // createMessage.error('修改失败'); | 120 | // createMessage.error('修改失败'); |
117 | } finally { | 121 | } finally { |
118 | changeOkLoading(false); | 122 | changeOkLoading(false); |
123 | + loading.value = false; | ||
119 | } | 124 | } |
120 | }; | 125 | }; |
121 | 126 | ||
@@ -133,6 +138,7 @@ | @@ -133,6 +138,7 @@ | ||
133 | :destroy-on-close="true" | 138 | :destroy-on-close="true" |
134 | @ok="handleSubmit" | 139 | @ok="handleSubmit" |
135 | @cancel="resetForm" | 140 | @cancel="resetForm" |
141 | + :ok-button-props="{ loading }" | ||
136 | > | 142 | > |
137 | <section> | 143 | <section> |
138 | <Tabs type="card"> | 144 | <Tabs type="card"> |