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"> |