Showing
6 changed files
with
23 additions
and
10 deletions
... | ... | @@ -99,7 +99,7 @@ |
99 | 99 | |
100 | 100 | <template> |
101 | 101 | <div class="flex flex-col w-full h-full min-w-3 min-h-3"> |
102 | - <div :id="getControlsWidgetId()" class="widget-charts min-w-1 min-h-1 flex-auto"></div> | |
102 | + <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div> | |
103 | 103 | <div> |
104 | 104 | <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{ |
105 | 105 | props.value.name | ... | ... |
... | ... | @@ -32,7 +32,9 @@ |
32 | 32 | </script> |
33 | 33 | |
34 | 34 | <template> |
35 | - <section class="w-full h-full flex flex-col justify-center items-center"> | |
35 | + <section | |
36 | + class="w-full h-full flex flex-col justify-center items-center justify-between widget-picture" | |
37 | + > | |
36 | 38 | <Image :width="getWidth" :src="props?.value?.value || ''" :fallback="fallback" /> |
37 | 39 | <div |
38 | 40 | class="w-full text-center text-gray-400 truncate" |
... | ... | @@ -51,4 +53,11 @@ |
51 | 53 | </section> |
52 | 54 | </template> |
53 | 55 | |
54 | -<style scoped></style> | |
56 | +<style scoped lang="less"> | |
57 | + .widget-picture:deep(.ant-image) { | |
58 | + flex: auto; | |
59 | + display: flex; | |
60 | + justify-content: center; | |
61 | + align-items: center; | |
62 | + } | |
63 | +</style> | ... | ... |
... | ... | @@ -65,8 +65,8 @@ |
65 | 65 | prefix="iconfont" |
66 | 66 | :style="{ |
67 | 67 | color: props.value.iconColor, |
68 | - width: fontSize({ radio: getRadio, basic: 40 }), | |
69 | - height: fontSize({ radio: getRadio, basic: 40 }), | |
68 | + width: fontSize({ radio: getRadio, basic: 50 }), | |
69 | + height: fontSize({ radio: getRadio, basic: 50 }), | |
70 | 70 | }" |
71 | 71 | /> |
72 | 72 | </div> | ... | ... |
... | ... | @@ -23,8 +23,8 @@ |
23 | 23 | <div class="widget-content" :style="{ height: slot.header ? 'calc(100% - 22px)' : '100%' }"> |
24 | 24 | <div |
25 | 25 | v-for="item in props.dataSource" |
26 | - :key="item.uuid" | |
27 | - :style="{ width: `${item.width}%`, height: `${item.height}%` }" | |
26 | + :key="item.id" | |
27 | + :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }" | |
28 | 28 | class="widget-item" |
29 | 29 | > |
30 | 30 | <div class="widget-box"> | ... | ... |
... | ... | @@ -30,7 +30,7 @@ |
30 | 30 | |
31 | 31 | const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo); |
32 | 32 | |
33 | - const [register, { closeModal }] = useModalInner( | |
33 | + const [register, { closeModal, changeOkLoading }] = useModalInner( | |
34 | 34 | (record: DataBoardLayoutInfo & { isEdit: boolean }) => { |
35 | 35 | componentRecord.value = record; |
36 | 36 | frontId.value = record.record.frontId; |
... | ... | @@ -43,7 +43,6 @@ |
43 | 43 | }>(); |
44 | 44 | |
45 | 45 | const handleSubmit = () => { |
46 | - console.log({ isEdit: unref(isEdit) }); | |
47 | 46 | const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!; |
48 | 47 | const value = getAllDataSourceFieldValue(); |
49 | 48 | unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value); |
... | ... | @@ -52,6 +51,7 @@ |
52 | 51 | |
53 | 52 | const handleAddComponent = async (value: Recordable) => { |
54 | 53 | try { |
54 | + changeOkLoading(true); | |
55 | 55 | await addDataComponent({ |
56 | 56 | boardId: unref(boardId), |
57 | 57 | record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value }, |
... | ... | @@ -61,11 +61,14 @@ |
61 | 61 | emit('submit'); |
62 | 62 | } catch (error) { |
63 | 63 | // createMessage.error('创建失败'); |
64 | + } finally { | |
65 | + changeOkLoading(false); | |
64 | 66 | } |
65 | 67 | }; |
66 | 68 | |
67 | 69 | const handleUpdateComponent = async (value: Recordable) => { |
68 | 70 | try { |
71 | + changeOkLoading(true); | |
69 | 72 | await updateDataComponent({ |
70 | 73 | boardId: unref(boardId), |
71 | 74 | record: { |
... | ... | @@ -80,6 +83,8 @@ |
80 | 83 | emit('submit'); |
81 | 84 | } catch (error) { |
82 | 85 | // createMessage.error('修改失败'); |
86 | + } finally { | |
87 | + changeOkLoading(false); | |
83 | 88 | } |
84 | 89 | }; |
85 | 90 | </script> | ... | ... |