简柏林 / thingskit-front · Commits

Commit 139b9a72b6682d3afdfb83b86cbd074bfa087d05

Authored by sqy
1 parent 1169197e

'fix:场景联动添加loading和修改数据流转的样式'

Inline Side-by-side
Showing 10 changed files with 197 additions and 457 deletions
... ... @@ -8,12 +8,12 @@ VITE_PUBLIC_PATH = /
8 8 # Please note that no line breaks
9 9
10 10 # 本地
11   -VITE_PROXY = [["/api","http://192.168.10.113:8080/api"]]
  11 +# VITE_PROXY = [["/api","http://192.168.10.113:8080/api"]]
12 12
13 13 # 线上演示环境
14 14 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
15 15 # 线上测试环境
16   -# VITE_PROXY = [["/api","http://47.99.141.212:8080/api"]]
  16 +VITE_PROXY = [["/api","http://47.99.141.212:8080/api"]]
17 17
18 18 # 实时数据的ws地址
19 19 VITE_WEB_SOCKET = ws://47.99.141.212:8080/api/ws/plugins/telemetry?token=
... ...
... ... @@ -67,7 +67,8 @@
67 67 // 所有参数
68 68 let stepState = ref();
69 69 // 编辑回显
70   - const [register, { closeModal }] = useModalInner((data) => {
  70 + const [register, { closeModal, setModalProps }] = useModalInner((data) => {
  71 + setModalProps({ confirmLoading: false, loading: true });
71 72 isUpdate.value = data?.isUpdate;
72 73 if (unref(isUpdate)) {
73 74 const { record } = data;
... ... @@ -84,6 +85,7 @@
84 85 unref(DeviceStep1Ref)?.parentResetPositionState();
85 86 deviceInfo.value = {};
86 87 }
  88 + setModalProps({ loading: false });
87 89 });
88 90
89 91 // 上一步
... ... @@ -133,6 +135,9 @@
133 135 // !!!此处需要删除地图的属性，否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded
134 136 Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map');
135 137 Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker');
  138 + setModalProps({
  139 + confirmLoading: true,
  140 + });
136 141 if (unref(isUpdate)) {
137 142 const editData = {
138 143 ...unref(stepState),
... ...
... ... @@ -209,7 +209,6 @@
209 209 async function handleEdit(record: Recordable) {
210 210 if (record.deviceType === 'SENSOR') {
211 211 const res = await getGATEWAY(record.tbDeviceId);
212   - console.log(res);
213 212 Reflect.set(record, 'gatewayId', res.id);
214 213 }
215 214 openModal(true, {
... ... @@ -217,11 +216,9 @@
217 216 record,
218 217 });
219 218 }
220   -
221 219 function handleSuccess() {
222 220 reload();
223 221 }
224   - // 140049ee-6b8c-4ce1-93d4-00faeddf9719
225 222 function handleSelect(organization) {
226 223 searchInfo.organizationId = organization;
227 224 handleSuccess();
... ...
... ... @@ -2,6 +2,7 @@ import { FormSchema } from '/@/components/Form';
2 2 import { findDictItemByCode } from '/@/api/system/dict';
3 3 import { ref } from 'vue';
4 4 import { useMessage } from '/@/hooks/web/useMessage';
  5 +import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
5 6 const { createMessage } = useMessage();
6 7
7 8 const typeValue = ref('');
... ... @@ -26,7 +27,7 @@ export const modeForm: FormSchema[] = [
26 27 component: 'ApiSelect',
27 28 required: true,
28 29 colProps: {
29   - span: 13,
  30 + span: 24,
30 31 },
31 32 componentProps({}) {
32 33 return {
... ... @@ -45,7 +46,7 @@ export const modeForm: FormSchema[] = [
45 46 {
46 47 field: 'remark',
47 48 label: '描述',
48   - colProps: { span: 13 },
  49 + colProps: { span: 24 },
49 50 component: 'Input',
50 51 componentProps: {
51 52 maxLength: 255,
... ...
1 1 <template>
2   - <div class="root">
3   - <div class="root-form">
4   - <BasicForm :showSubmitButton="false" @register="register">
5   - <template #addKeyAndValue="{ field }">
6   - <span style="display: none">{{ field }}</span>
  2 + <div class="transfer-config-mode">
  3 + <BasicForm :showSubmitButton="false" @register="register">
  4 + <template #addKeyAndValue="{ field }">
  5 + <span style="display: none">{{ field }}</span>
  6 + <div>
7 7 <div>
  8 + <template v-for="(item, index) in keyAndValueArr" :key="index">
  9 + <span style="display: none">{{ item + index }}</span>
  10 + <BasicForm
  11 + :showResetButton="false"
  12 + :showSubmitButton="false"
  13 + @register="registerKeyAndValue"
  14 + />
  15 + </template>
8 16 <div>
9   - <template v-for="(item, index) in keyAndValueArr" :key="index">
10   - <span style="display: none">{{ item + index }}</span>
11   - <BasicForm
12   - :showResetButton="false"
13   - :showSubmitButton="false"
14   - @register="registerKeyAndValue"
15   - />
16   - </template>
17   - <div
18   - style="
19   - width: 7vw;
20   - height: 3.3vh;
21   - display: flex;
22   - flex-direction: row;
23   - justify-content: center;
24   - align-items: center;
25   - margin-left: 1.8vw;
26   - "
27   - >
28   - <div
29   - style="
30   - width: 2.9vw;
31   - height: 3.3vh;
32   - background-color: #0960bd;
33   - border-radius: 2px;
34   - cursor: pointer;
35   - text-align: center;
36   - line-height: 3.1vh;
37   - "
38   - >
39   - <span @click="addKeyAndValueFunc" style="color: white">添加</span>
40   - </div>
41   - <div
42   - style="
43   - width: 2.9vw;
44   - height: 3.3vh;
45   - margin-left: 1vw;
46   - background-color: #ed6f6f;
47   - border-radius: 2px;
48   - cursor: pointer;
49   - text-align: center;
50   - line-height: 3.1vh;
51   - "
52   - >
53   - <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
54   - </div>
55   - </div>
56   - <div> </div>
  17 + <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>
  18 + <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>
57 19 </div>
58 20 </div>
59   - </template>
60   - <template #uploadAdd1="{ field }">
61   - <span style="display: none">{{ field }}</span>
62   - <a-upload-dragger
63   - v-model:fileList="fileList"
64   - name="file"
65   - :multiple="true"
66   - action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
67   - @change="handleChange"
68   - >
69   - <p class="ant-upload-drag-icon">
70   - <InboxOutlined />
71   - </p>
72   - <p class="ant-upload-text">Click or drag file to this area to upload</p>
73   - <p class="ant-upload-hint">
74   - Support for a single or bulk upload. Strictly prohibit from uploading company data or
75   - other band files
76   - </p>
77   - </a-upload-dragger>
78   - </template>
79   - <template #uploadAdd2="{ field }">
80   - <span style="display: none">{{ field }}</span>
81   - <a-upload-dragger
82   - v-model:fileList="fileList"
83   - name="file"
84   - :multiple="true"
85   - action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
86   - @change="handleChange"
87   - >
88   - <p class="ant-upload-drag-icon">
89   - <InboxOutlined />
90   - </p>
91   - <p class="ant-upload-text">Click or drag file to this area to upload</p>
92   - <p class="ant-upload-hint">
93   - Support for a single or bulk upload. Strictly prohibit from uploading company data or
94   - other band files
95   - </p>
96   - </a-upload-dragger>
97   - </template>
98   - <template #uploadAdd3="{ field }">
99   - <span style="display: none">{{ field }}</span>
100   - <a-upload-dragger
101   - v-model:fileList="fileList"
102   - name="file"
103   - :multiple="true"
104   - action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
105   - @change="handleChange"
106   - >
107   - <p class="ant-upload-drag-icon">
108   - <InboxOutlined />
109   - </p>
110   - <p class="ant-upload-text">Click or drag file to this area to upload</p>
111   - <p class="ant-upload-hint">
112   - Support for a single or bulk upload. Strictly prohibit from uploading company data or
113   - other band files
114   - </p>
115   - </a-upload-dragger>
116   - </template>
117   - </BasicForm>
118   - </div>
  21 + </div>
  22 + </template>
  23 + <template #uploadAdd1="{ field }">
  24 + <span style="display: none">{{ field }}</span>
  25 + <a-upload-dragger
  26 + v-model:fileList="fileList"
  27 + name="file"
  28 + :multiple="true"
  29 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  30 + @change="handleChange"
  31 + >
  32 + <p class="ant-upload-drag-icon">
  33 + <InboxOutlined />
  34 + </p>
  35 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  36 + <p class="ant-upload-hint">
  37 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  38 + other band files
  39 + </p>
  40 + </a-upload-dragger>
  41 + </template>
  42 + <template #uploadAdd2="{ field }">
  43 + <span style="display: none">{{ field }}</span>
  44 + <a-upload-dragger
  45 + v-model:fileList="fileList"
  46 + name="file"
  47 + :multiple="true"
  48 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  49 + @change="handleChange"
  50 + >
  51 + <p class="ant-upload-drag-icon">
  52 + <InboxOutlined />
  53 + </p>
  54 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  55 + <p class="ant-upload-hint">
  56 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  57 + other band files
  58 + </p>
  59 + </a-upload-dragger>
  60 + </template>
  61 + <template #uploadAdd3="{ field }">
  62 + <span style="display: none">{{ field }}</span>
  63 + <a-upload-dragger
  64 + v-model:fileList="fileList"
  65 + name="file"
  66 + :multiple="true"
  67 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  68 + @change="handleChange"
  69 + >
  70 + <p class="ant-upload-drag-icon">
  71 + <InboxOutlined />
  72 + </p>
  73 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  74 + <p class="ant-upload-hint">
  75 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  76 + other band files
  77 + </p>
  78 + </a-upload-dragger>
  79 + </template>
  80 + </BasicForm>
119 81 </div>
120 82 </template>
121 83 <script lang="ts">
... ... @@ -123,7 +85,7 @@
123 85 import { BasicForm, useForm } from '/@/components/Form';
124 86 import { modeApiForm, modeApiInseretKeyAndValueForm } from '../config';
125 87 import { InboxOutlined } from '@ant-design/icons-vue';
126   - import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue';
  88 + import { Upload } from 'ant-design-vue';
127 89 interface IKeyAndValue {
128 90 key: string;
129 91 value: string;
... ... @@ -131,10 +93,6 @@
131 93 export default defineComponent({
132 94 components: {
133 95 BasicForm,
134   - [Alert.name]: Alert,
135   - [Divider.name]: Divider,
136   - [Descriptions.name]: Descriptions,
137   - [Descriptions.Item.name]: Descriptions.Item,
138 96 InboxOutlined,
139 97 [Upload.Dragger.name]: Upload.Dragger,
140 98 },
... ... @@ -168,6 +126,7 @@
168 126 },
169 127 resetButtonOptions: {
170 128 text: '上一步',
  129 + type: 'primary',
171 130 },
172 131
173 132 resetFunc: customResetFunc,
... ... @@ -208,12 +167,6 @@
208 167 const tempGetKeyAndVal = async () => {
209 168 temp.value = await validateKeyAndValue();
210 169 };
211   - // const defaultAddKeyAndValueFunc = () => {
212   - // if (keyAndValueArr.value.length == 0) {
213   - // keyAndValueArr.value.push(keyAndValueObj as never);
214   - // }
215   - // };
216   - // defaultAddKeyAndValueFunc();
217 170
218 171 const getDefaultValue = async () => {
219 172 await tempGetKeyAndVal();
... ... @@ -262,31 +215,3 @@
262 215 },
263 216 });
264 217 </script>
265   -<style lang="less" scoped>
266   - .root {
267   - width: 47.55vw;
268   - border: 1px solid #bfbfbf;
269   - display: flex;
270   - margin-top: 1vh;
271   - margin-left: 1.5vw;
272   - border-radius: 8px;
273   -
274   - .root-form {
275   - width: 45vw;
276   - margin: 1vh 1vw;
277   - position: relative;
278   - :deep .ant-input-number {
279   - width: 18.35vw !important;
280   - }
281   - :deep .ant-btn {
282   - position: absolute;
283   - right: 1vw;
284   - background-color: #0960bd;
285   - border-radius: 2px;
286   - span {
287   - color: white;
288   - }
289   - }
290   - }
291   - }
292   -</style>
... ...
1 1 <template>
2   - <div class="root">
3   - <div class="root-form">
4   - <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
5   - <template #addValue="{ field }">
6   - <span style="display: none">{{ field }}</span>
  2 + <div class="transfer-config-mode">
  3 + <BasicForm :showSubmitButton="false" @register="register">
  4 + <template #addValue="{ field }">
  5 + <span style="display: none">{{ field }}</span>
  6 + <div>
7 7 <div>
  8 + <div v-if="keyAndValueArr.length > 0">
  9 + <template v-for="(item, index) in keyAndValueArr" :key="index">
  10 + <span style="display: none">{{ item + index }}</span>
  11 + <BasicForm
  12 + :showResetButton="false"
  13 + :showSubmitButton="false"
  14 + @register="registerKeyAndValue"
  15 + />
  16 + </template>
  17 + </div>
8 18 <div>
9   - <div v-if="keyAndValueArr.length > 0">
10   - <template v-for="(item, index) in keyAndValueArr" :key="index">
11   - <span style="display: none">{{ item + index }}</span>
12   - <BasicForm
13   - :showResetButton="false"
14   - :showSubmitButton="false"
15   - @register="registerKeyAndValue"
16   - />
17   - </template>
18   - </div>
19   - <div
20   - style="
21   - width: 7vw;
22   - height: 3.3vh;
23   - display: flex;
24   - flex-direction: row;
25   - justify-content: center;
26   - align-items: center;
27   - margin-left: 1.8vw;
28   - "
29   - >
30   - <div
31   - style="
32   - width: 2.9vw;
33   - height: 3.3vh;
34   - background-color: #0960bd;
35   - border-radius: 2px;
36   - cursor: pointer;
37   - text-align: center;
38   - line-height: 3.1vh;
39   - "
40   - >
41   - <span @click="addKeyAndValueFunc" style="color: white">添加</span>
42   - </div>
43   - <div
44   - style="
45   - width: 2.9vw;
46   - height: 3.3vh;
47   - margin-left: 1vw;
48   - background-color: #ed6f6f;
49   - border-radius: 2px;
50   - cursor: pointer;
51   - text-align: center;
52   - line-height: 3.1vh;
53   - "
54   - >
55   - <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
56   - </div>
57   - </div>
58   - <div> </div>
  19 + <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>
  20 + <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>
59 21 </div>
60 22 </div>
61   - </template>
62   - </BasicForm>
63   - <div
64   - style="
65   - width: 3.3vw;
66   - height: 3.3vh;
67   - margin-left: 22vw;
68   - margin-top: 2vh;
69   - background-color: #0960bd;
70   - border-radius: 2px;
71   - cursor: pointer;
72   - text-align: center;
73   - line-height: 3.1vh;
74   - "
75   - >
76   - <span @click="customResetFunc" style="color: white">上一步</span>
77   - </div>
78   - </div>
  23 + </div>
  24 + </template>
  25 + </BasicForm>
79 26 </div>
80 27 </template>
81 28 <script lang="ts">
... ... @@ -125,6 +72,7 @@
125 72 },
126 73 resetButtonOptions: {
127 74 text: '上一步',
  75 + type: 'primary',
128 76 },
129 77 resetFunc: customResetFunc,
130 78 });
... ... @@ -220,21 +168,3 @@
220 168 },
221 169 });
222 170 </script>
223   -<style lang="less" scoped>
224   - .root {
225   - width: 47.55vw;
226   - border: 1px solid #d9d9d9;
227   - // display: flex;
228   - margin-top: 1vh;
229   - margin-left: 1.5vw;
230   - border-radius: 8px;
231   - .root-form {
232   - width: 45vw;
233   - margin: 1vh 1vw;
234   - position: relative;
235   - :deep .ant-input-number {
236   - width: 18.35vw !important;
237   - }
238   - }
239   - }
240   -</style>
... ...
1 1 <template>
2   - <div class="root">
3   - <div class="root-form">
4   - <BasicForm :showSubmitButton="false" @register="register">
5   - <template #uploadAdd1="{ field }">
6   - <span style="display: none">{{ field }}</span>
7   - <a-upload-dragger
8   - v-model:fileList="fileList"
9   - name="file"
10   - :multiple="true"
11   - action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
12   - @change="handleChange"
13   - >
14   - <p class="ant-upload-drag-icon">
15   - <InboxOutlined />
16   - </p>
17   - <p class="ant-upload-text">Click or drag file to this area to upload</p>
18   - <p class="ant-upload-hint">
19   - Support for a single or bulk upload. Strictly prohibit from uploading company data or
20   - other band files
21   - </p>
22   - </a-upload-dragger>
23   - </template>
24   - <template #uploadAdd2="{ field }">
25   - <span style="display: none">{{ field }}</span>
26   - <a-upload-dragger
27   - v-model:fileList="fileList"
28   - name="file"
29   - :multiple="true"
30   - action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
31   - @change="handleChange"
32   - >
33   - <p class="ant-upload-drag-icon">
34   - <InboxOutlined />
35   - </p>
36   - <p class="ant-upload-text">Click or drag file to this area to upload</p>
37   - <p class="ant-upload-hint">
38   - Support for a single or bulk upload. Strictly prohibit from uploading company data or
39   - other band files
40   - </p>
41   - </a-upload-dragger>
42   - </template>
43   - <template #uploadAdd3="{ field }">
44   - <span style="display: none">{{ field }}</span>
45   - <a-upload-dragger
46   - v-model:fileList="fileList"
47   - name="file"
48   - :multiple="true"
49   - action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
50   - @change="handleChange"
51   - >
52   - <p class="ant-upload-drag-icon">
53   - <InboxOutlined />
54   - </p>
55   - <p class="ant-upload-text">Click or drag file to this area to upload</p>
56   - <p class="ant-upload-hint">
57   - Support for a single or bulk upload. Strictly prohibit from uploading company data or
58   - other band files
59   - </p>
60   - </a-upload-dragger>
61   - </template>
62   - </BasicForm>
63   - </div>
  2 + <div class="transfer-config-mode">
  3 + <BasicForm :showSubmitButton="false" @register="register">
  4 + <template #uploadAdd1="{ field }">
  5 + <span style="display: none">{{ field }}</span>
  6 + <a-upload-dragger
  7 + v-model:fileList="fileList"
  8 + name="file"
  9 + :multiple="true"
  10 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  11 + @change="handleChange"
  12 + >
  13 + <p class="ant-upload-drag-icon">
  14 + <InboxOutlined />
  15 + </p>
  16 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  17 + <p class="ant-upload-hint">
  18 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  19 + other band files
  20 + </p>
  21 + </a-upload-dragger>
  22 + </template>
  23 + <template #uploadAdd2="{ field }">
  24 + <span style="display: none">{{ field }}</span>
  25 + <a-upload-dragger
  26 + v-model:fileList="fileList"
  27 + name="file"
  28 + :multiple="true"
  29 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  30 + @change="handleChange"
  31 + >
  32 + <p class="ant-upload-drag-icon">
  33 + <InboxOutlined />
  34 + </p>
  35 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  36 + <p class="ant-upload-hint">
  37 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  38 + other band files
  39 + </p>
  40 + </a-upload-dragger>
  41 + </template>
  42 + <template #uploadAdd3="{ field }">
  43 + <span style="display: none">{{ field }}</span>
  44 + <a-upload-dragger
  45 + v-model:fileList="fileList"
  46 + name="file"
  47 + :multiple="true"
  48 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  49 + @change="handleChange"
  50 + >
  51 + <p class="ant-upload-drag-icon">
  52 + <InboxOutlined />
  53 + </p>
  54 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  55 + <p class="ant-upload-hint">
  56 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  57 + other band files
  58 + </p>
  59 + </a-upload-dragger>
  60 + </template>
  61 + </BasicForm>
64 62 </div>
65 63 </template>
66 64 <script lang="ts">
... ... @@ -99,6 +97,7 @@
99 97 },
100 98 resetButtonOptions: {
101 99 text: '上一步',
  100 + type: 'primary',
102 101 },
103 102
104 103 resetFunc: customResetFunc,
... ... @@ -148,31 +147,3 @@
148 147 },
149 148 });
150 149 </script>
151   -<style lang="less" scoped>
152   - .root {
153   - width: 47.55vw;
154   - min-height: 50vh;
155   - border: 1px solid #bfbfbf;
156   - display: flex;
157   - margin-top: 1vh;
158   - margin-left: 1.5vw;
159   - border-radius: 8px;
160   - .root-form {
161   - width: 45vw;
162   - margin: 1vh 1vw;
163   - position: relative;
164   - :deep .ant-input-number {
165   - width: 18.35vw !important;
166   - }
167   - :deep .ant-btn {
168   - position: absolute;
169   - right: 1vw;
170   - background-color: #0960bd;
171   - border-radius: 2px;
172   - span {
173   - color: white;
174   - }
175   - }
176   - }
177   - }
178   -</style>
... ...
1 1 <template>
2   - <div class="root">
3   - <div class="root-form">
4   - <BasicForm :showSubmitButton="false" @register="register">
5   - <template #addKeyAndValue="{ field }">
6   - <span style="display: none">{{ field }}</span>
  2 + <div class="transfer-config-mode">
  3 + <BasicForm :showSubmitButton="false" @register="register">
  4 + <template #addKeyAndValue="{ field }">
  5 + <span style="display: none">{{ field }}</span>
  6 + <div>
7 7 <div>
  8 + <template v-for="(item, index) in keyAndValueArr" :key="index">
  9 + <span style="display: none">{{ item + index }}</span>
  10 + <BasicForm
  11 + :showResetButton="false"
  12 + :showSubmitButton="false"
  13 + @register="registerKeyAndValue"
  14 + />
  15 + </template>
8 16 <div>
9   - <template v-for="(item, index) in keyAndValueArr" :key="index">
10   - <span style="display: none">{{ item + index }}</span>
11   - <BasicForm
12   - :showResetButton="false"
13   - :showSubmitButton="false"
14   - @register="registerKeyAndValue"
15   - />
16   - </template>
17   - <div
18   - style="
19   - width: 7vw;
20   - height: 3.3vh;
21   - display: flex;
22   - flex-direction: row;
23   - justify-content: center;
24   - align-items: center;
25   - margin-left: 1.8vw;
26   - "
27   - >
28   - <div
29   - style="
30   - width: 2.9vw;
31   - height: 3.3vh;
32   - background-color: #0960bd;
33   - border-radius: 1px;
34   - cursor: pointer;
35   - text-align: center;
36   - line-height: 3.1vh;
37   - "
38   - >
39   - <span @click="addKeyAndValueFunc" style="color: white">添加</span>
40   - </div>
41   - <div
42   - style="
43   - width: 2.9vw;
44   - height: 3.3vh;
45   - margin-left: 1vw;
46   - background-color: #ed6f6f;
47   - border-radius: 1px;
48   - cursor: pointer;
49   - text-align: center;
50   - line-height: 3.1vh;
51   - "
52   - >
53   - <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
54   - </div>
55   - </div>
56   - <div> </div>
  17 + <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>
  18 + <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>
57 19 </div>
58 20 </div>
59   - </template>
60   - </BasicForm>
61   - </div>
  21 + </div>
  22 + </template>
  23 + </BasicForm>
62 24 </div>
63 25 </template>
64 26 <script lang="ts">
65 27 import { defineComponent, ref, reactive } from 'vue';
66 28 import { BasicForm, useForm } from '/@/components/Form';
67 29 import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config';
68   - import { Alert, Divider, Descriptions } from 'ant-design-vue';
69 30
70 31 interface IKeyAndValue {
71 32 key: string;
... ... @@ -74,10 +35,6 @@
74 35 export default defineComponent({
75 36 components: {
76 37 BasicForm,
77   - [Alert.name]: Alert,
78   - [Divider.name]: Divider,
79   - [Descriptions.name]: Descriptions,
80   - [Descriptions.Item.name]: Descriptions.Item,
81 38 },
82 39 emits: ['next', 'prev', 'register'],
83 40 setup(_, { emit }) {
... ... @@ -105,6 +62,7 @@
105 62 },
106 63 resetButtonOptions: {
107 64 text: '上一步',
  65 + type: 'primary',
108 66 },
109 67
110 68 resetFunc: customResetFunc,
... ... @@ -186,31 +144,3 @@
186 144 },
187 145 });
188 146 </script>
189   -<style lang="less" scoped>
190   - .root {
191   - width: 47.55vw;
192   - border: 1px solid #d9d9d9;
193   - display: flex;
194   - margin-top: 1vh;
195   - margin-left: 1.5vw;
196   - border-radius: 8px;
197   -
198   - .root-form {
199   - width: 44vw;
200   - margin: 1vh 1vw;
201   - position: relative;
202   - :deep .ant-input-number {
203   - width: 17.85vw !important;
204   - }
205   - :deep .ant-btn {
206   - position: absolute;
207   - right: 1vw;
208   - background-color: #0960bd;
209   - border-radius: 2px;
210   - span {
211   - color: white;
212   - }
213   - }
214   - }
215   - }
216   -</style>
... ...
1 1 <template>
2   - <div class="root">
3   - <div class="root-form">
4   - <div>
5   - <BasicForm @register="register" />
6   - </div>
7   - </div>
  2 + <div class="transfer-config-mode">
  3 + <BasicForm @register="register" />
8 4 </div>
9 5 </template>
10 6 <script lang="ts">
... ... @@ -65,25 +61,9 @@
65 61 },
66 62 });
67 63 </script>
68   -<style lang="less" scoped>
69   - .root {
70   - width: 100vw;
71   - height: 30vh;
72   - .root-form {
73   - width: 40vw;
74   - position: relative;
75   - left: 14vw;
76   - top: 8vh;
77   - :deep .ant-btn {
78   - position: absolute;
79   - right: 8.6vw;
80   - top: 6vh;
81   - background-color: #0960bd;
82   - border-radius: 2px;
83   - span {
84   - color: white;
85   - }
86   - }
87   - }
  64 +<style lang="less">
  65 + .transfer-config-mode {
  66 + margin: 0 auto;
  67 + width: 600px;
88 68 }
89 69 </style>
... ...
... ... @@ -123,7 +123,7 @@
123 123 showActionButtonGroup: false,
124 124 });
125 125 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
126   - setDrawerProps({ confirmLoading: false });
  126 + setDrawerProps({ confirmLoading: false, loading: true });
127 127 isUpdate.value = data.isUpdate;
128 128
129 129 if (!unref(isUpdate)) {
... ... @@ -204,6 +204,7 @@
204 204 if (unref(isUpdate) === 3) isView.value = false;
205 205 setDrawerProps({
206 206 showFooter: isView.value,
  207 + loading: false,
207 208 });
208 209 });
209 210
... ...