简柏林 / 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,12 +8,12 @@ VITE_PUBLIC_PATH = /
8 # Please note that no line breaks 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 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]] 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 # 实时数据的ws地址 18 # 实时数据的ws地址
19 VITE_WEB_SOCKET = ws://47.99.141.212:8080/api/ws/plugins/telemetry?token= 19 VITE_WEB_SOCKET = ws://47.99.141.212:8080/api/ws/plugins/telemetry?token=
@@ -67,7 +67,8 @@ @@ -67,7 +67,8 @@
67 // 所有参数 67 // 所有参数
68 let stepState = ref(); 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 isUpdate.value = data?.isUpdate; 72 isUpdate.value = data?.isUpdate;
72 if (unref(isUpdate)) { 73 if (unref(isUpdate)) {
73 const { record } = data; 74 const { record } = data;
@@ -84,6 +85,7 @@ @@ -84,6 +85,7 @@
84 unref(DeviceStep1Ref)?.parentResetPositionState(); 85 unref(DeviceStep1Ref)?.parentResetPositionState();
85 deviceInfo.value = {}; 86 deviceInfo.value = {};
86 } 87 }
  88 + setModalProps({ loading: false });
87 }); 89 });
88 90
89 // 上一步 91 // 上一步
@@ -133,6 +135,9 @@ @@ -133,6 +135,9 @@
133 // !!!此处需要删除地图的属性，否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded 135 // !!!此处需要删除地图的属性，否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded
134 Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map'); 136 Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map');
135 Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker'); 137 Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker');
  138 + setModalProps({
  139 + confirmLoading: true,
  140 + });
136 if (unref(isUpdate)) { 141 if (unref(isUpdate)) {
137 const editData = { 142 const editData = {
138 ...unref(stepState), 143 ...unref(stepState),
@@ -209,7 +209,6 @@ @@ -209,7 +209,6 @@
209 async function handleEdit(record: Recordable) { 209 async function handleEdit(record: Recordable) {
210 if (record.deviceType === 'SENSOR') { 210 if (record.deviceType === 'SENSOR') {
211 const res = await getGATEWAY(record.tbDeviceId); 211 const res = await getGATEWAY(record.tbDeviceId);
212 - console.log(res);  
213 Reflect.set(record, 'gatewayId', res.id); 212 Reflect.set(record, 'gatewayId', res.id);
214 } 213 }
215 openModal(true, { 214 openModal(true, {
@@ -217,11 +216,9 @@ @@ -217,11 +216,9 @@
217 record, 216 record,
218 }); 217 });
219 } 218 }
220 -  
221 function handleSuccess() { 219 function handleSuccess() {
222 reload(); 220 reload();
223 } 221 }
224 - // 140049ee-6b8c-4ce1-93d4-00faeddf9719  
225 function handleSelect(organization) { 222 function handleSelect(organization) {
226 searchInfo.organizationId = organization; 223 searchInfo.organizationId = organization;
227 handleSuccess(); 224 handleSuccess();
@@ -2,6 +2,7 @@ import { FormSchema } from '/@/components/Form'; @@ -2,6 +2,7 @@ import { FormSchema } from '/@/components/Form';
2 import { findDictItemByCode } from '/@/api/system/dict'; 2 import { findDictItemByCode } from '/@/api/system/dict';
3 import { ref } from 'vue'; 3 import { ref } from 'vue';
4 import { useMessage } from '/@/hooks/web/useMessage'; 4 import { useMessage } from '/@/hooks/web/useMessage';
  5 +import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
5 const { createMessage } = useMessage(); 6 const { createMessage } = useMessage();
6 7
7 const typeValue = ref(''); 8 const typeValue = ref('');
@@ -26,7 +27,7 @@ export const modeForm: FormSchema[] = [ @@ -26,7 +27,7 @@ export const modeForm: FormSchema[] = [
26 component: 'ApiSelect', 27 component: 'ApiSelect',
27 required: true, 28 required: true,
28 colProps: { 29 colProps: {
29 - span: 13, 30 + span: 24,
30 }, 31 },
31 componentProps({}) { 32 componentProps({}) {
32 return { 33 return {
@@ -45,7 +46,7 @@ export const modeForm: FormSchema[] = [ @@ -45,7 +46,7 @@ export const modeForm: FormSchema[] = [
45 { 46 {
46 field: 'remark', 47 field: 'remark',
47 label: '描述', 48 label: '描述',
48 - colProps: { span: 13 }, 49 + colProps: { span: 24 },
49 component: 'Input', 50 component: 'Input',
50 componentProps: { 51 componentProps: {
51 maxLength: 255, 52 maxLength: 255,
1 <template> 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 <div> 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 <div> 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 </div> 19 </div>
58 </div> 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 </div> 81 </div>
120 </template> 82 </template>
121 <script lang="ts"> 83 <script lang="ts">
@@ -123,7 +85,7 @@ @@ -123,7 +85,7 @@
123 import { BasicForm, useForm } from '/@/components/Form'; 85 import { BasicForm, useForm } from '/@/components/Form';
124 import { modeApiForm, modeApiInseretKeyAndValueForm } from '../config'; 86 import { modeApiForm, modeApiInseretKeyAndValueForm } from '../config';
125 import { InboxOutlined } from '@ant-design/icons-vue'; 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 interface IKeyAndValue { 89 interface IKeyAndValue {
128 key: string; 90 key: string;
129 value: string; 91 value: string;
@@ -131,10 +93,6 @@ @@ -131,10 +93,6 @@
131 export default defineComponent({ 93 export default defineComponent({
132 components: { 94 components: {
133 BasicForm, 95 BasicForm,
134 - [Alert.name]: Alert,  
135 - [Divider.name]: Divider,  
136 - [Descriptions.name]: Descriptions,  
137 - [Descriptions.Item.name]: Descriptions.Item,  
138 InboxOutlined, 96 InboxOutlined,
139 [Upload.Dragger.name]: Upload.Dragger, 97 [Upload.Dragger.name]: Upload.Dragger,
140 }, 98 },
@@ -168,6 +126,7 @@ @@ -168,6 +126,7 @@
168 }, 126 },
169 resetButtonOptions: { 127 resetButtonOptions: {
170 text: '上一步', 128 text: '上一步',
  129 + type: 'primary',
171 }, 130 },
172 131
173 resetFunc: customResetFunc, 132 resetFunc: customResetFunc,
@@ -208,12 +167,6 @@ @@ -208,12 +167,6 @@
208 const tempGetKeyAndVal = async () => { 167 const tempGetKeyAndVal = async () => {
209 temp.value = await validateKeyAndValue(); 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 const getDefaultValue = async () => { 171 const getDefaultValue = async () => {
219 await tempGetKeyAndVal(); 172 await tempGetKeyAndVal();
@@ -262,31 +215,3 @@ @@ -262,31 +215,3 @@
262 }, 215 },
263 }); 216 });
264 </script> 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 <template> 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 <div> 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 <div> 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 </div> 21 </div>
60 </div> 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 </div> 26 </div>
80 </template> 27 </template>
81 <script lang="ts"> 28 <script lang="ts">
@@ -125,6 +72,7 @@ @@ -125,6 +72,7 @@
125 }, 72 },
126 resetButtonOptions: { 73 resetButtonOptions: {
127 text: '上一步', 74 text: '上一步',
  75 + type: 'primary',
128 }, 76 },
129 resetFunc: customResetFunc, 77 resetFunc: customResetFunc,
130 }); 78 });
@@ -220,21 +168,3 @@ @@ -220,21 +168,3 @@
220 }, 168 },
221 }); 169 });
222 </script> 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 <template> 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 </div> 62 </div>
65 </template> 63 </template>
66 <script lang="ts"> 64 <script lang="ts">
@@ -99,6 +97,7 @@ @@ -99,6 +97,7 @@
99 }, 97 },
100 resetButtonOptions: { 98 resetButtonOptions: {
101 text: '上一步', 99 text: '上一步',
  100 + type: 'primary',
102 }, 101 },
103 102
104 resetFunc: customResetFunc, 103 resetFunc: customResetFunc,
@@ -148,31 +147,3 @@ @@ -148,31 +147,3 @@
148 }, 147 },
149 }); 148 });
150 </script> 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 <template> 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 <div> 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 <div> 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 </div> 19 </div>
58 </div> 20 </div>
59 - </template>  
60 - </BasicForm>  
61 - </div> 21 + </div>
  22 + </template>
  23 + </BasicForm>
62 </div> 24 </div>
63 </template> 25 </template>
64 <script lang="ts"> 26 <script lang="ts">
65 import { defineComponent, ref, reactive } from 'vue'; 27 import { defineComponent, ref, reactive } from 'vue';
66 import { BasicForm, useForm } from '/@/components/Form'; 28 import { BasicForm, useForm } from '/@/components/Form';
67 import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config'; 29 import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config';
68 - import { Alert, Divider, Descriptions } from 'ant-design-vue';  
69 30
70 interface IKeyAndValue { 31 interface IKeyAndValue {
71 key: string; 32 key: string;
@@ -74,10 +35,6 @@ @@ -74,10 +35,6 @@
74 export default defineComponent({ 35 export default defineComponent({
75 components: { 36 components: {
76 BasicForm, 37 BasicForm,
77 - [Alert.name]: Alert,  
78 - [Divider.name]: Divider,  
79 - [Descriptions.name]: Descriptions,  
80 - [Descriptions.Item.name]: Descriptions.Item,  
81 }, 38 },
82 emits: ['next', 'prev', 'register'], 39 emits: ['next', 'prev', 'register'],
83 setup(_, { emit }) { 40 setup(_, { emit }) {
@@ -105,6 +62,7 @@ @@ -105,6 +62,7 @@
105 }, 62 },
106 resetButtonOptions: { 63 resetButtonOptions: {
107 text: '上一步', 64 text: '上一步',
  65 + type: 'primary',
108 }, 66 },
109 67
110 resetFunc: customResetFunc, 68 resetFunc: customResetFunc,
@@ -186,31 +144,3 @@ @@ -186,31 +144,3 @@
186 }, 144 },
187 }); 145 });
188 </script> 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 <template> 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 </div> 4 </div>
9 </template> 5 </template>
10 <script lang="ts"> 6 <script lang="ts">
@@ -65,25 +61,9 @@ @@ -65,25 +61,9 @@
65 }, 61 },
66 }); 62 });
67 </script> 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 </style> 69 </style>
@@ -123,7 +123,7 @@ @@ -123,7 +123,7 @@
123 showActionButtonGroup: false, 123 showActionButtonGroup: false,
124 }); 124 });
125 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { 125 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
126 - setDrawerProps({ confirmLoading: false }); 126 + setDrawerProps({ confirmLoading: false, loading: true });
127 isUpdate.value = data.isUpdate; 127 isUpdate.value = data.isUpdate;
128 128
129 if (!unref(isUpdate)) { 129 if (!unref(isUpdate)) {
@@ -204,6 +204,7 @@ @@ -204,6 +204,7 @@
204 if (unref(isUpdate) === 3) isView.value = false; 204 if (unref(isUpdate) === 3) isView.value = false;
205 setDrawerProps({ 205 setDrawerProps({
206 showFooter: isView.value, 206 showFooter: isView.value,
  207 + loading: false,
207 }); 208 });
208 }); 209 });
209 210