简柏林 / thingskit-front · Commits

Commit 8712ba0f351fb31b9aa174f404b7284c6f9cd53a

Authored by fengtao
1 parent 6a47e0ab

fix:修改数据管理样式问题，和启用禁用按钮相关细节问题

Inline Side-by-side
Showing 13 changed files with 370 additions and 253 deletions
@@ -13,6 +13,7 @@ export function useTitle() { @@ -13,6 +13,7 @@ export function useTitle() {
13 13
14 const pageTitle = usePageTitle(); 14 const pageTitle = usePageTitle();
15 const storage = createLocalStorage(); 15 const storage = createLocalStorage();
  16 +
16 watch( 17 watch(
17 () => currentRoute.value.path, 18 () => currentRoute.value.path,
18 () => { 19 () => {
@@ -23,7 +24,7 @@ export function useTitle() { @@ -23,7 +24,7 @@ export function useTitle() {
23 24
24 const tTitle = t(route?.meta?.title as string); 25 const tTitle = t(route?.meta?.title as string);
25 pageTitle.value = tTitle 26 pageTitle.value = tTitle
26 - ? ` ${tTitle} - ${storage.get('platInfo').name ?? title} ` 27 + ? ` ${tTitle} - ${storage.get('platInfo')?.name ?? title} `
27 : `${title}`; 28 : `${title}`;
28 }, 29 },
29 { immediate: true } 30 { immediate: true }
@@ -110,7 +110,7 @@ export function createPermissionGuard(router: Router) { @@ -110,7 +110,7 @@ export function createPermissionGuard(router: Router) {
110 110
111 const routes = await permissionStore.buildRoutesAction(); 111 const routes = await permissionStore.buildRoutesAction();
112 112
113 - routes.forEach((route) => { 113 + routes?.forEach((route) => {
114 router.addRoute(route as unknown as RouteRecordRaw); 114 router.addRoute(route as unknown as RouteRecordRaw);
115 }); 115 });
116 116
@@ -123,7 +123,7 @@ export const usePermissionStore = defineStore({ @@ -123,7 +123,7 @@ export const usePermissionStore = defineStore({
123 let homePath: string = userStore.getUserInfo.homePath || PageEnum.BASE_HOME; 123 let homePath: string = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
124 function patcher(routes: AppRouteRecordRaw[], parentPath = '') { 124 function patcher(routes: AppRouteRecordRaw[], parentPath = '') {
125 if (parentPath) parentPath = parentPath + '/'; 125 if (parentPath) parentPath = parentPath + '/';
126 - routes.forEach((route: AppRouteRecordRaw) => { 126 + routes?.forEach((route: AppRouteRecordRaw) => {
127 const { path, children, redirect } = route; 127 const { path, children, redirect } = route;
128 const currentPath = path.startsWith('/') ? path : parentPath + path; 128 const currentPath = path.startsWith('/') ? path : parentPath + path;
129 if (currentPath === homePath) { 129 if (currentPath === homePath) {
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 :title="getTitle" 7 :title="getTitle"
8 width="1000px" 8 width="1000px"
9 @ok="handleSubmit" 9 @ok="handleSubmit"
  10 + @cancel="handleCancel"
10 > 11 >
11 <div class="step-form-form"> 12 <div class="step-form-form">
12 <a-steps :current="current"> 13 <a-steps :current="current">
@@ -29,15 +30,7 @@ @@ -29,15 +30,7 @@
29 </div> 30 </div>
30 </template> 31 </template>
31 <script lang="ts"> 32 <script lang="ts">
32 - import {  
33 - defineComponent,  
34 - reactive,  
35 - ref,  
36 - computed,  
37 - unref,  
38 - getCurrentInstance,  
39 - onMounted,  
40 - } from 'vue'; 33 + import { defineComponent, reactive, ref, computed, unref, getCurrentInstance } from 'vue';
41 import { BasicModal, useModalInner } from '/@/components/Modal'; 34 import { BasicModal, useModalInner } from '/@/components/Modal';
42 import { Steps } from 'ant-design-vue'; 35 import { Steps } from 'ant-design-vue';
43 import TransferConfigMode from './cpns/transferConfigMode.vue'; 36 import TransferConfigMode from './cpns/transferConfigMode.vue';
@@ -79,63 +72,62 @@ @@ -79,63 +72,62 @@
79 const getTitle = computed(() => (!unref(isUpdate) ? '新增转换配置' : '编辑数据转换')); 72 const getTitle = computed(() => (!unref(isUpdate) ? '新增转换配置' : '编辑数据转换'));
80 const current = ref(0); 73 const current = ref(0);
81 const editPostId = ref(''); 74 const editPostId = ref('');
  75 + const editType = reactive({
  76 + type: '',
  77 + configuration: {},
  78 + name: '',
  79 + });
  80 + const editNextType = reactive({
  81 + type: '',
  82 + configuration: {},
  83 + name: '',
  84 + });
  85 + const editTypeFunc = (d) => {
  86 + editType.type = d.type;
  87 + editType.configuration = d.configuration;
  88 + editType.name = d.name;
  89 + };
82 90
83 const [registerDrawer, { closeModal }] = useModalInner(async (data) => { 91 const [registerDrawer, { closeModal }] = useModalInner(async (data) => {
84 isUpdate.value = !!data?.isUpdate; 92 isUpdate.value = !!data?.isUpdate;
85 current.value = 0; 93 current.value = 0;
86 - if (!unref(isUpdate)) {  
87 - try {  
88 - proxy.$refs.refTransferConfigMode.customResetStepOneFunc();  
89 - // if (data.record.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {  
90 - // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();  
91 - // } else if (data.record.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {  
92 - // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();  
93 - // } else if (data.record.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {  
94 - // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();  
95 - // } else if (data.record.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {  
96 - // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();  
97 - // }  
98 - } catch (e) {  
99 - return e;  
100 - }  
101 - } else { 94 + if (unref(isUpdate)) {
102 editPostId.value = data.record.id; 95 editPostId.value = data.record.id;
103 - const editType = {  
104 - type: '',  
105 - configuration: {},  
106 - name: '',  
107 - };  
108 - if (data.record.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {  
109 - editType.type = 'KafKA';  
110 - editType.configuration = data.record.configuration;  
111 - editType.name = data.record.name;  
112 - } else if (data.record.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {  
113 - editType.type = 'MQTT';  
114 - editType.configuration = data.record.configuration;  
115 - editType.name = data.record.name;  
116 - } else if (data.record.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {  
117 - editType.type = 'RabbitMq';  
118 - editType.configuration = data.record.configuration;  
119 - editType.name = data.record.name;  
120 - } else if (data.record.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {  
121 - editType.type = 'Api';  
122 - editType.configuration = data.record.configuration;  
123 - editType.name = data.record.name;  
124 - }  
125 - proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editType);  
126 - proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);  
127 - proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);  
128 - proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);  
129 - proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType); 96 + editNextType.type = data.record.type;
  97 + editNextType.configuration = data.record;
  98 + editNextType.name = data.record.name;
  99 + proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editNextType);
130 } 100 }
131 }); 101 });
  102 + const handleCancel = () => {
  103 + defineClearFunc();
  104 + };
  105 + const defineClearFunc = () => {
  106 + try {
  107 + proxy.$refs.refTransferConfigMode.customResetStepOneFunc();
  108 + proxy.$refs.refTransferConfigParams?.clearSonValueDataFunc();
  109 + } catch (e) {
  110 + return e;
  111 + }
  112 + };
132 const handleNext = (args) => { 113 const handleNext = (args) => {
133 current.value++; 114 current.value++;
134 getModeSelectVal.value = args; 115 getModeSelectVal.value = args;
135 - if (!unref(isUpdate)) {  
136 - proxy.$refs.refTransferConfigParams?.clearSonValueDataFunc();  
137 - console.log('add clear');  
138 - // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc(); 116 + if (unref(isUpdate)) {
  117 + try {
  118 + if (editNextType.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
  119 + editTypeFunc(editNextType.configuration);
  120 + } else if (editNextType.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
  121 + editTypeFunc(editNextType.configuration);
  122 + } else if (editNextType.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
  123 + editTypeFunc(editNextType.configuration);
  124 + } else if (editNextType.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
  125 + editTypeFunc(editNextType.configuration);
  126 + }
  127 + proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
  128 + } catch (e) {
  129 + return e;
  130 + }
139 } 131 }
140 }; 132 };
141 const handlePrev = () => { 133 const handlePrev = () => {
@@ -156,19 +148,25 @@ @@ -156,19 +148,25 @@
156 const addOrEditFunc = async () => { 148 const addOrEditFunc = async () => {
157 getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc(); 149 getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc();
158 getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc(); 150 getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc();
159 - if (getModeSonFormValue.value?.type == 'KafKA') { 151 + if (getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
160 getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode'; 152 getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
161 getNameObj.name = getSonFormValue.value?.configuration?.name; 153 getNameObj.name = getSonFormValue.value?.configuration?.name;
162 commonFunc(); 154 commonFunc();
163 - } else if (getModeSonFormValue.value?.type == 'MQTT') { 155 + } else if (
  156 + getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
  157 + ) {
164 getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode'; 158 getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode';
165 getNameObj.name = getSonFormValue.value?.configuration?.name; 159 getNameObj.name = getSonFormValue.value?.configuration?.name;
166 commonFunc(); 160 commonFunc();
167 - } else if (getModeSonFormValue.value?.type == 'RabbitMq') { 161 + } else if (
  162 + getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
  163 + ) {
168 getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'; 164 getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
169 getNameObj.name = getSonFormValue.value?.configuration?.name; 165 getNameObj.name = getSonFormValue.value?.configuration?.name;
170 commonFunc(); 166 commonFunc();
171 - } else if (getModeSonFormValue.value?.type == 'Api') { 167 + } else if (
  168 + getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'
  169 + ) {
172 getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'; 170 getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode';
173 getNameObj.name = getSonFormValue.value?.configuration?.name; 171 getNameObj.name = getSonFormValue.value?.configuration?.name;
174 commonFunc(); 172 commonFunc();
@@ -204,6 +202,7 @@ @@ -204,6 +202,7 @@
204 } 202 }
205 }; 203 };
206 return { 204 return {
  205 + handleCancel,
207 registerDrawer, 206 registerDrawer,
208 handleSubmit, 207 handleSubmit,
209 getTitle, 208 getTitle,
@@ -16,23 +16,23 @@ export const columns: BasicColumn[] = [ @@ -16,23 +16,23 @@ export const columns: BasicColumn[] = [
16 const status = record.type; 16 const status = record.type;
17 const enable = 17 const enable =
18 status === 'org.thingsboard.rule.engine.kafka.TbKafkaNode' 18 status === 'org.thingsboard.rule.engine.kafka.TbKafkaNode'
19 - ? 'KafKA' 19 + ? 'KafKa'
20 : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode' 20 : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
21 ? 'MQTT' 21 ? 'MQTT'
22 : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode' 22 : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
23 ? 'RabbitMq' 23 ? 'RabbitMq'
24 : 'Api'; 24 : 'Api';
25 const color = 25 const color =
26 - enable == 'KafKA'  
27 - ? 'grey' 26 + enable == 'KafKa'
  27 + ? '#0960cb'
28 : enable == 'MQTT' 28 : enable == 'MQTT'
29 - ? 'red' 29 + ? '#ed6f6f'
30 : enable == 'RabbitMq' 30 : enable == 'RabbitMq'
31 - ? 'yellow'  
32 - : 'green'; 31 + ? '#efbd47'
  32 + : '#55d187';
33 const text = 33 const text =
34 - enable == 'KafKA'  
35 - ? 'KafKA' 34 + enable == 'KafKa'
  35 + ? 'KafKa'
36 : enable == 'MQTT' 36 : enable == 'MQTT'
37 ? 'MQTT' 37 ? 'MQTT'
38 : enable == 'RabbitMq' 38 : enable == 'RabbitMq'
@@ -43,7 +43,7 @@ export const columns: BasicColumn[] = [ @@ -43,7 +43,7 @@ export const columns: BasicColumn[] = [
43 43
44 format: (_text: string, record: Recordable) => { 44 format: (_text: string, record: Recordable) => {
45 return record.type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode' 45 return record.type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode'
46 - ? 'KafKA' 46 + ? 'KafKa'
47 : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode' 47 : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
48 ? 'MQTT' 48 ? 'MQTT'
49 : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode' 49 : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
@@ -58,7 +58,7 @@ export const columns: BasicColumn[] = [ @@ -58,7 +58,7 @@ export const columns: BasicColumn[] = [
58 customRender: ({ record }) => { 58 customRender: ({ record }) => {
59 const status = record.status; 59 const status = record.status;
60 const enable = ~~status === 1; 60 const enable = ~~status === 1;
61 - const color = enable ? 'blue' : 'red'; 61 + const color = enable ? '#55d187' : '#efbd47';
62 const text = enable ? '启用' : '禁用'; 62 const text = enable ? '启用' : '禁用';
63 return h(Tag, { color: color }, () => text); 63 return h(Tag, { color: color }, () => text);
64 }, 64 },
@@ -97,6 +97,6 @@ export const searchFormSchema: FormSchema[] = [ @@ -97,6 +97,6 @@ export const searchFormSchema: FormSchema[] = [
97 { label: '未启用', value: '0' }, 97 { label: '未启用', value: '0' },
98 ], 98 ],
99 }, 99 },
100 - colProps: { span: 4 }, 100 + colProps: { span: 6 },
101 }, 101 },
102 ]; 102 ];
1 import { FormSchema } from '/@/components/Form'; 1 import { FormSchema } from '/@/components/Form';
  2 +import { findDictItemByCode } from '/@/api/system/dict';
2 3
3 export enum CredentialsEnum { 4 export enum CredentialsEnum {
4 IS_ANONYMOUS = 'anonymous', 5 IS_ANONYMOUS = 'anonymous',
@@ -17,18 +18,19 @@ export const modeForm: FormSchema[] = [ @@ -17,18 +18,19 @@ export const modeForm: FormSchema[] = [
17 { 18 {
18 field: 'type', 19 field: 'type',
19 label: '转换方式', 20 label: '转换方式',
20 - component: 'Select', 21 + component: 'ApiSelect',
21 required: true, 22 required: true,
  23 + colProps: {
  24 + span: 13,
  25 + },
22 componentProps: { 26 componentProps: {
23 - placeholder: '请选择转换方式',  
24 - options: [  
25 - { label: 'KafKA', value: 'KafKA' },  
26 - { label: 'RabbitMq', value: 'RabbitMq' },  
27 - { label: 'Api调用', value: 'Api' },  
28 - { label: 'MQTT', value: 'MQTT' },  
29 - ], 27 + api: findDictItemByCode,
  28 + params: {
  29 + dictCode: 'convert_data_to',
  30 + },
  31 + labelField: 'itemText',
  32 + valueField: 'itemValue',
30 }, 33 },
31 - colProps: { span: 13 },  
32 }, 34 },
33 ]; 35 ];
34 36
@@ -16,8 +16,8 @@ @@ -16,8 +16,8 @@
16 </template> 16 </template>
17 <div 17 <div
18 style=" 18 style="
19 - width: 5vw;  
20 - height: 3vh; 19 + width: 7vw;
  20 + height: 3.3vh;
21 display: flex; 21 display: flex;
22 flex-direction: row; 22 flex-direction: row;
23 justify-content: center; 23 justify-content: center;
@@ -27,27 +27,27 @@ @@ -27,27 +27,27 @@
27 > 27 >
28 <div 28 <div
29 style=" 29 style="
30 - width: 2.6vw;  
31 - height: 3vh; 30 + width: 2.9vw;
  31 + height: 3.3vh;
32 background-color: #0960bd; 32 background-color: #0960bd;
33 - border-radius: 10px; 33 + border-radius: 1px;
34 cursor: pointer; 34 cursor: pointer;
35 text-align: center; 35 text-align: center;
36 - line-height: 2.89vh; 36 + line-height: 3.1vh;
37 " 37 "
38 > 38 >
39 <span @click="addKeyAndValueFunc" style="color: white">添加</span> 39 <span @click="addKeyAndValueFunc" style="color: white">添加</span>
40 </div> 40 </div>
41 <div 41 <div
42 style=" 42 style="
43 - width: 2.6vw;  
44 - height: 3vh; 43 + width: 2.9vw;
  44 + height: 3.3vh;
45 margin-left: 1vw; 45 margin-left: 1vw;
46 background-color: #ed6f6f; 46 background-color: #ed6f6f;
47 - border-radius: 10px; 47 + border-radius: 1px;
48 cursor: pointer; 48 cursor: pointer;
49 text-align: center; 49 text-align: center;
50 - line-height: 2.89vh; 50 + line-height: 3.1vh;
51 " 51 "
52 > 52 >
53 <span @click="removeKeyAndValueFunc" style="color: white">删除</span> 53 <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
@@ -123,7 +123,7 @@ @@ -123,7 +123,7 @@
123 import { BasicForm, useForm } from '/@/components/Form'; 123 import { BasicForm, useForm } from '/@/components/Form';
124 import { modeApiForm, modeApiInseretKeyAndValueForm } from '../config'; 124 import { modeApiForm, modeApiInseretKeyAndValueForm } from '../config';
125 import { InboxOutlined } from '@ant-design/icons-vue'; 125 import { InboxOutlined } from '@ant-design/icons-vue';
126 - import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue'; 126 + import { Alert, Divider, Descriptions, Upload, UploadDragger } from 'ant-design-vue';
127 interface IKeyAndValue { 127 interface IKeyAndValue {
128 key: string; 128 key: string;
129 value: string; 129 value: string;
@@ -136,6 +136,7 @@ @@ -136,6 +136,7 @@
136 [Descriptions.name]: Descriptions, 136 [Descriptions.name]: Descriptions,
137 [Descriptions.Item.name]: Descriptions.Item, 137 [Descriptions.Item.name]: Descriptions.Item,
138 InboxOutlined, 138 InboxOutlined,
  139 + UploadDragger,
139 [Upload.UploadDragger]: Upload.UploadDragger, 140 [Upload.UploadDragger]: Upload.UploadDragger,
140 }, 141 },
141 emits: ['next', 'prev', 'register'], 142 emits: ['next', 'prev', 'register'],
@@ -160,7 +161,7 @@ @@ -160,7 +161,7 @@
160 const sonValues = reactive({ 161 const sonValues = reactive({
161 configuration: {}, 162 configuration: {},
162 }); 163 });
163 - const [register, { validate, setFieldsValue, resetFields }] = useForm({ 164 + const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
164 labelWidth: 80, 165 labelWidth: 80,
165 schemas: modeApiForm, 166 schemas: modeApiForm,
166 actionColOptions: { 167 actionColOptions: {
@@ -174,7 +175,10 @@ @@ -174,7 +175,10 @@
174 submitFunc: customSubmitFunc, 175 submitFunc: customSubmitFunc,
175 }); 176 });
176 177
177 - const [registerKeyAndValue, { validate: validateKeyAndValue }] = useForm({ 178 + const [
  179 + registerKeyAndValue,
  180 + { validate: validateKeyAndValue, resetFields: defineClearKeyAndValueFunc },
  181 + ] = useForm({
178 labelWidth: 80, 182 labelWidth: 80,
179 schemas: modeApiInseretKeyAndValueForm, 183 schemas: modeApiInseretKeyAndValueForm,
180 actionColOptions: { 184 actionColOptions: {
@@ -187,8 +191,9 @@ @@ -187,8 +191,9 @@
187 name: v1, 191 name: v1,
188 }); 192 });
189 }; 193 };
190 - const customClearStepTwoValueFunc = () => {  
191 - resetFields(); 194 + const customClearStepTwoValueFunc = async () => {
  195 + defineClearFunc();
  196 + defineClearKeyAndValueFunc();
192 }; 197 };
193 async function customResetFunc() { 198 async function customResetFunc() {
194 emit('prev'); 199 emit('prev');
@@ -260,17 +265,25 @@ @@ -260,17 +265,25 @@
260 </script> 265 </script>
261 <style lang="less" scoped> 266 <style lang="less" scoped>
262 .root { 267 .root {
263 - width: 45.55vw; 268 + width: 47.55vw;
264 border: 1px solid #bfbfbf; 269 border: 1px solid #bfbfbf;
265 display: flex; 270 display: flex;
266 margin-top: 1vh; 271 margin-top: 1vh;
  272 + margin-left: 1.5vw;
  273 + border-radius: 8px;
  274 +
267 .root-form { 275 .root-form {
268 - width: 44vw; 276 + width: 45vw;
269 margin: 1vh 1vw; 277 margin: 1vh 1vw;
270 position: relative; 278 position: relative;
271 :deep .ant-btn { 279 :deep .ant-btn {
272 position: absolute; 280 position: absolute;
273 right: 1vw; 281 right: 1vw;
  282 + background-color: #0960bd;
  283 + border-radius: 1px;
  284 + span {
  285 + color: white;
  286 + }
274 } 287 }
275 } 288 }
276 } 289 }
@@ -18,8 +18,8 @@ @@ -18,8 +18,8 @@
18 </div> 18 </div>
19 <div 19 <div
20 style=" 20 style="
21 - width: 5vw;  
22 - height: 3vh; 21 + width: 7vw;
  22 + height: 3.3vh;
23 display: flex; 23 display: flex;
24 flex-direction: row; 24 flex-direction: row;
25 justify-content: center; 25 justify-content: center;
@@ -29,27 +29,27 @@ @@ -29,27 +29,27 @@
29 > 29 >
30 <div 30 <div
31 style=" 31 style="
32 - width: 2.6vw;  
33 - height: 3vh; 32 + width: 2.9vw;
  33 + height: 3.3vh;
34 background-color: #0960bd; 34 background-color: #0960bd;
35 - border-radius: 10px; 35 + border-radius: 1px;
36 cursor: pointer; 36 cursor: pointer;
37 text-align: center; 37 text-align: center;
38 - line-height: 2.89vh; 38 + line-height: 3.1vh;
39 " 39 "
40 > 40 >
41 <span @click="addKeyAndValueFunc" style="color: white">添加</span> 41 <span @click="addKeyAndValueFunc" style="color: white">添加</span>
42 </div> 42 </div>
43 <div 43 <div
44 style=" 44 style="
45 - width: 2.6vw;  
46 - height: 3vh; 45 + width: 2.9vw;
  46 + height: 3.3vh;
47 margin-left: 1vw; 47 margin-left: 1vw;
48 background-color: #ed6f6f; 48 background-color: #ed6f6f;
49 - border-radius: 10px; 49 + border-radius: 1px;
50 cursor: pointer; 50 cursor: pointer;
51 text-align: center; 51 text-align: center;
52 - line-height: 2.89vh; 52 + line-height: 3.1vh;
53 " 53 "
54 > 54 >
55 <span @click="removeKeyAndValueFunc" style="color: white">删除</span> 55 <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
@@ -62,15 +62,15 @@ @@ -62,15 +62,15 @@
62 </BasicForm> 62 </BasicForm>
63 <div 63 <div
64 style=" 64 style="
65 - width: 2.6vw;  
66 - height: 3vh;  
67 - margin-left: 19vw; 65 + width: 3.3vw;
  66 + height: 3.3vh;
  67 + margin-left: 22vw;
68 margin-top: 2vh; 68 margin-top: 2vh;
69 background-color: #0960bd; 69 background-color: #0960bd;
70 - border-radius: 10px; 70 + border-radius: 1px;
71 cursor: pointer; 71 cursor: pointer;
72 text-align: center; 72 text-align: center;
73 - line-height: 2.89vh; 73 + line-height: 3.1vh;
74 " 74 "
75 > 75 >
76 <span @click="customResetFunc" style="color: white">上一步</span> 76 <span @click="customResetFunc" style="color: white">上一步</span>
@@ -80,7 +80,7 @@ @@ -80,7 +80,7 @@
80 </template> 80 </template>
81 <script lang="ts"> 81 <script lang="ts">
82 import { defineComponent, ref, reactive } from 'vue'; 82 import { defineComponent, ref, reactive } from 'vue';
83 - import { BasicForm, useForm, FormActionType } from '/@/components/Form'; 83 + import { BasicForm, useForm } from '/@/components/Form';
84 import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config'; 84 import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config';
85 import { Alert, Divider, Descriptions } from 'ant-design-vue'; 85 import { Alert, Divider, Descriptions } from 'ant-design-vue';
86 86
@@ -115,7 +115,7 @@ @@ -115,7 +115,7 @@
115 otherProperties: {}, 115 otherProperties: {},
116 }); 116 });
117 117
118 - const [register, { validate, setFieldsValue }] = useForm({ 118 + const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
119 labelWidth: 80, 119 labelWidth: 80,
120 schemas: modeKafkaForm, 120 schemas: modeKafkaForm,
121 actionColOptions: { 121 actionColOptions: {
@@ -127,7 +127,10 @@ @@ -127,7 +127,10 @@
127 resetFunc: customResetFunc, 127 resetFunc: customResetFunc,
128 }); 128 });
129 129
130 - const [registerKeyAndValue, { validate: validateKeyAndValue, resetFields }] = useForm({ 130 + const [
  131 + registerKeyAndValue,
  132 + { validate: validateKeyAndValue, resetFields: defineClearKeyAndValueFunc },
  133 + ] = useForm({
131 labelWidth: 80, 134 labelWidth: 80,
132 schemas: modeKafkaInseretKeyAndValueForm, 135 schemas: modeKafkaInseretKeyAndValueForm,
133 actionColOptions: { 136 actionColOptions: {
@@ -135,18 +138,17 @@ @@ -135,18 +138,17 @@
135 }, 138 },
136 }); 139 });
137 140
138 - const setStepTwoFieldsValueFunc = (v, v1) => { 141 + const setStepTwoFieldsValueFunc = async (v, v1) => {
139 setFieldsValue(v); 142 setFieldsValue(v);
140 vType.value = v1; 143 vType.value = v1;
141 setFieldsValue({ 144 setFieldsValue({
142 name: v1, 145 name: v1,
143 }); 146 });
144 }; 147 };
145 - const customClearStepTwoValueFunc = () => {  
146 - console.log('clear');  
147 - setTimeout(() => {  
148 - resetFields();  
149 - }, 100); 148 +
  149 + const customClearStepTwoValueFunc = async () => {
  150 + defineClearFunc();
  151 + defineClearKeyAndValueFunc();
150 }; 152 };
151 async function customResetFunc() { 153 async function customResetFunc() {
152 emit('prev'); 154 emit('prev');
@@ -212,20 +214,16 @@ @@ -212,20 +214,16 @@
212 </script> 214 </script>
213 <style lang="less" scoped> 215 <style lang="less" scoped>
214 .root { 216 .root {
215 - width: 45.55vw;  
216 - border: 1px solid #bfbfbf; 217 + width: 47.55vw;
  218 + border: 1px solid #d9d9d9;
217 display: flex; 219 display: flex;
218 margin-top: 1vh; 220 margin-top: 1vh;
  221 + margin-left: 1.5vw;
219 border-radius: 8px; 222 border-radius: 8px;
220 .root-form { 223 .root-form {
221 - width: 44vw; 224 + width: 45vw;
222 margin: 1vh 1vw; 225 margin: 1vh 1vw;
223 position: relative; 226 position: relative;
224 - // :deep .ant-btn {  
225 - // position: absolute;  
226 - // right: 1vw;  
227 - // top: 1vh;  
228 - // }  
229 } 227 }
230 } 228 }
231 </style> 229 </style>
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 import { BasicForm, useForm } from '/@/components/Form'; 68 import { BasicForm, useForm } from '/@/components/Form';
69 import { modeMqttForm } from '../config'; 69 import { modeMqttForm } from '../config';
70 import { InboxOutlined } from '@ant-design/icons-vue'; 70 import { InboxOutlined } from '@ant-design/icons-vue';
71 - import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue'; 71 + import { Alert, Divider, Descriptions, Upload, UploadDragger } from 'ant-design-vue';
72 72
73 export default defineComponent({ 73 export default defineComponent({
74 components: { 74 components: {
@@ -78,6 +78,7 @@ @@ -78,6 +78,7 @@
78 [Descriptions.name]: Descriptions, 78 [Descriptions.name]: Descriptions,
79 [Descriptions.Item.name]: Descriptions.Item, 79 [Descriptions.Item.name]: Descriptions.Item,
80 InboxOutlined, 80 InboxOutlined,
  81 + UploadDragger,
81 [Upload.UploadDragger]: Upload.UploadDragger, 82 [Upload.UploadDragger]: Upload.UploadDragger,
82 }, 83 },
83 emits: ['next', 'prev', 'register'], 84 emits: ['next', 'prev', 'register'],
@@ -91,7 +92,7 @@ @@ -91,7 +92,7 @@
91 const sonValues = reactive({ 92 const sonValues = reactive({
92 configuration: {}, 93 configuration: {},
93 }); 94 });
94 - const [register, { validate, setFieldsValue, resetFields }] = useForm({ 95 + const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
95 labelWidth: 80, 96 labelWidth: 80,
96 schemas: modeMqttForm, 97 schemas: modeMqttForm,
97 actionColOptions: { 98 actionColOptions: {
@@ -105,13 +106,14 @@ @@ -105,13 +106,14 @@
105 submitFunc: customSubmitFunc, 106 submitFunc: customSubmitFunc,
106 }); 107 });
107 const setStepTwoFieldsValueFunc = (v, v1) => { 108 const setStepTwoFieldsValueFunc = (v, v1) => {
  109 + console.log(v);
108 setFieldsValue(v); 110 setFieldsValue(v);
109 setFieldsValue({ 111 setFieldsValue({
110 name: v1, 112 name: v1,
111 }); 113 });
112 }; 114 };
113 - const customClearStepTwoValueFunc = () => {  
114 - resetFields(); 115 + const customClearStepTwoValueFunc = async () => {
  116 + defineClearFunc();
115 }; 117 };
116 async function customResetFunc() { 118 async function customResetFunc() {
117 emit('prev'); 119 emit('prev');
@@ -144,20 +146,25 @@ @@ -144,20 +146,25 @@
144 </script> 146 </script>
145 <style lang="less" scoped> 147 <style lang="less" scoped>
146 .root { 148 .root {
147 - width: 45.55vw;  
148 - height: 51vh; 149 + width: 47.55vw;
  150 + min-height: 50vh;
149 border: 1px solid #bfbfbf; 151 border: 1px solid #bfbfbf;
150 display: flex; 152 display: flex;
151 margin-top: 1vh; 153 margin-top: 1vh;
  154 + margin-left: 1.5vw;
  155 + border-radius: 8px;
152 .root-form { 156 .root-form {
153 - width: 44vw;  
154 - height: 45vh; 157 + width: 45vw;
155 margin: 1vh 1vw; 158 margin: 1vh 1vw;
156 position: relative; 159 position: relative;
157 :deep .ant-btn { 160 :deep .ant-btn {
158 position: absolute; 161 position: absolute;
159 right: 1vw; 162 right: 1vw;
160 - top: 6vh; 163 + background-color: #0960bd;
  164 + border-radius: 1px;
  165 + span {
  166 + color: white;
  167 + }
161 } 168 }
162 } 169 }
163 } 170 }
@@ -16,8 +16,8 @@ @@ -16,8 +16,8 @@
16 </template> 16 </template>
17 <div 17 <div
18 style=" 18 style="
19 - width: 5vw;  
20 - height: 3vh; 19 + width: 7vw;
  20 + height: 3.3vh;
21 display: flex; 21 display: flex;
22 flex-direction: row; 22 flex-direction: row;
23 justify-content: center; 23 justify-content: center;
@@ -27,27 +27,27 @@ @@ -27,27 +27,27 @@
27 > 27 >
28 <div 28 <div
29 style=" 29 style="
30 - width: 2.6vw;  
31 - height: 3vh; 30 + width: 2.9vw;
  31 + height: 3.3vh;
32 background-color: #0960bd; 32 background-color: #0960bd;
33 - border-radius: 10px; 33 + border-radius: 1px;
34 cursor: pointer; 34 cursor: pointer;
35 text-align: center; 35 text-align: center;
36 - line-height: 2.89vh; 36 + line-height: 3.1vh;
37 " 37 "
38 > 38 >
39 <span @click="addKeyAndValueFunc" style="color: white">添加</span> 39 <span @click="addKeyAndValueFunc" style="color: white">添加</span>
40 </div> 40 </div>
41 <div 41 <div
42 style=" 42 style="
43 - width: 2.6vw;  
44 - height: 3vh; 43 + width: 2.9vw;
  44 + height: 3.3vh;
45 margin-left: 1vw; 45 margin-left: 1vw;
46 background-color: #ed6f6f; 46 background-color: #ed6f6f;
47 - border-radius: 10px; 47 + border-radius: 1px;
48 cursor: pointer; 48 cursor: pointer;
49 text-align: center; 49 text-align: center;
50 - line-height: 2.89vh; 50 + line-height: 3.1vh;
51 " 51 "
52 > 52 >
53 <span @click="removeKeyAndValueFunc" style="color: white">删除</span> 53 <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
@@ -97,7 +97,7 @@ @@ -97,7 +97,7 @@
97 configuration: {}, 97 configuration: {},
98 }); 98 });
99 99
100 - const [register, { validate, setFieldsValue, resetFields }] = useForm({ 100 + const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
101 labelWidth: 80, 101 labelWidth: 80,
102 schemas: modeRabbitMqForm, 102 schemas: modeRabbitMqForm,
103 actionColOptions: { 103 actionColOptions: {
@@ -125,8 +125,8 @@ @@ -125,8 +125,8 @@
125 name: v1, 125 name: v1,
126 }); 126 });
127 }; 127 };
128 - const customClearStepTwoValueFunc = () => {  
129 - resetFields(); 128 + const customClearStepTwoValueFunc = async () => {
  129 + defineClearFunc();
130 }; 130 };
131 async function customResetFunc() { 131 async function customResetFunc() {
132 emit('prev'); 132 emit('prev');
@@ -194,10 +194,13 @@ @@ -194,10 +194,13 @@
194 </script> 194 </script>
195 <style lang="less" scoped> 195 <style lang="less" scoped>
196 .root { 196 .root {
197 - width: 45.55vw;  
198 - border: 1px solid #bfbfbf; 197 + width: 47.55vw;
  198 + border: 1px solid #d9d9d9;
199 display: flex; 199 display: flex;
200 margin-top: 1vh; 200 margin-top: 1vh;
  201 + margin-left: 1.5vw;
  202 + border-radius: 8px;
  203 +
201 .root-form { 204 .root-form {
202 width: 44vw; 205 width: 44vw;
203 margin: 1vh 1vw; 206 margin: 1vh 1vw;
@@ -205,6 +208,11 @@ @@ -205,6 +208,11 @@
205 :deep .ant-btn { 208 :deep .ant-btn {
206 position: absolute; 209 position: absolute;
207 right: 1vw; 210 right: 1vw;
  211 + background-color: #0960bd;
  212 + border-radius: 1px;
  213 + span {
  214 + color: white;
  215 + }
208 } 216 }
209 } 217 }
210 } 218 }
@@ -72,12 +72,17 @@ @@ -72,12 +72,17 @@
72 .root-form { 72 .root-form {
73 width: 40vw; 73 width: 40vw;
74 position: relative; 74 position: relative;
75 - left: 10vw; 75 + left: 14vw;
76 top: 8vh; 76 top: 8vh;
77 :deep .ant-btn { 77 :deep .ant-btn {
78 position: absolute; 78 position: absolute;
79 - right: 8.1vw; 79 + right: 8.6vw;
80 top: 6vh; 80 top: 6vh;
  81 + background-color: #0960bd;
  82 + border-radius: 1px;
  83 + span {
  84 + color: white;
  85 + }
81 } 86 }
82 } 87 }
83 } 88 }
1 <template> 1 <template>
2 <div class="step2"> 2 <div class="step2">
3 <div> 3 <div>
4 - <div v-show="isWhereComp == 'KafKA'"> 4 + <div v-show="isWhereComp == 'org.thingsboard.rule.engine.kafka.TbKafkaNode'">
5 <TransferConfigKafka ref="refTransferConfigKafka" @prev="getSonPrev" /> 5 <TransferConfigKafka ref="refTransferConfigKafka" @prev="getSonPrev" />
6 </div> 6 </div>
7 - <div v-show="isWhereComp == 'MQTT'"> 7 + <div v-show="isWhereComp == 'org.thingsboard.rule.engine.mqtt.TbMqttNode'">
8 <TransferConfigMqtt ref="refTransferConfigMqtt" @prev="getSonPrev" /> 8 <TransferConfigMqtt ref="refTransferConfigMqtt" @prev="getSonPrev" />
9 </div> 9 </div>
10 - <div v-show="isWhereComp == 'RabbitMq'"> 10 + <div v-show="isWhereComp == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'">
11 <TransferConfigRabbitMq ref="refTransferConfigRabbitMq" @prev="getSonPrev" /> 11 <TransferConfigRabbitMq ref="refTransferConfigRabbitMq" @prev="getSonPrev" />
12 </div> 12 </div>
13 - <div v-show="isWhereComp == 'Api'"> 13 + <div v-show="isWhereComp == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'">
14 <TransferConfigApi ref="refTransferConfigApi" @prev="getSonPrev" /> 14 <TransferConfigApi ref="refTransferConfigApi" @prev="getSonPrev" />
15 </div> 15 </div>
16 </div> 16 </div>
17 </div> 17 </div>
18 </template> 18 </template>
19 <script lang="ts"> 19 <script lang="ts">
20 - import { defineComponent, watch, ref, getCurrentInstance, reactive } from 'vue'; 20 + import { defineComponent, watch, ref, getCurrentInstance } from 'vue';
21 import TransferConfigKafka from '../cpns/cpns/transferConfigKafka.vue'; 21 import TransferConfigKafka from '../cpns/cpns/transferConfigKafka.vue';
22 import TransferConfigMqtt from '../cpns/cpns/transferConfigMqtt.vue'; 22 import TransferConfigMqtt from '../cpns/cpns/transferConfigMqtt.vue';
23 import TransferConfigRabbitMq from '../cpns/cpns/transferConfigRabbitMq.vue'; 23 import TransferConfigRabbitMq from '../cpns/cpns/transferConfigRabbitMq.vue';
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 TransferConfigApi, 36 TransferConfigApi,
37 }, 37 },
38 // eslint-disable-next-line vue/require-prop-types 38 // eslint-disable-next-line vue/require-prop-types
39 - props: ['getModeSelect'], 39 + props: ['getModeSelect', 'defineClearFuncProp'],
40 emits: ['prevSon'], 40 emits: ['prevSon'],
41 setup(props, { emit }) { 41 setup(props, { emit }) {
42 const { proxy } = getCurrentInstance(); 42 const { proxy } = getCurrentInstance();
@@ -47,11 +47,6 @@ @@ -47,11 +47,6 @@
47 const refTransferConfigApi = ref(null); 47 const refTransferConfigApi = ref(null);
48 const isWhereComp = ref(''); 48 const isWhereComp = ref('');
49 49
50 - const editSonData = reactive({  
51 - type: '',  
52 - configuration: {},  
53 - name: '',  
54 - });  
55 const getSonPrev = () => { 50 const getSonPrev = () => {
56 emit('prevSon'); 51 emit('prevSon');
57 }; 52 };
@@ -62,71 +57,49 @@ @@ -62,71 +57,49 @@
62 } 57 }
63 ); 58 );
64 const clearSonValueDataFunc = () => { 59 const clearSonValueDataFunc = () => {
65 - proxy.$refs.refTransferConfigKafka.customClearStepTwoValueFunc();  
66 -  
67 - // try {  
68 - // if (isWhereComp.value == 'KafKA') {  
69 - // onMounted(() => {  
70 - // proxy.$refs.refTransferConfigKafka.customClearStepTwoValueFunc();  
71 - // });  
72 - // } else if (isWhereComp.value == 'MQTT') {  
73 - // proxy.$refs.refTransferConfigMqtt.customClearStepTwoValueFunc();  
74 - // } else if (isWhereComp.value == 'RabbitMq') {  
75 - // proxy.$refs.refTransferConfigRabbitMq.customClearStepTwoValueFunc();  
76 - // } else if (isWhereComp.value == 'Api') {  
77 - // proxy.$refs.refTransferConfigApi.customClearStepTwoValueFunc();  
78 - // }  
79 - // } catch (e) {  
80 - // return e;  
81 - // } 60 + try {
  61 + proxy.$refs.refTransferConfigKafka?.customClearStepTwoValueFunc();
  62 + proxy.$refs.refTransferConfigMqtt?.customClearStepTwoValueFunc();
  63 + proxy.$refs.refTransferConfigRabbitMq?.customClearStepTwoValueFunc();
  64 + proxy.$refs.refTransferConfigApi?.customClearStepTwoValueFunc();
  65 + } catch (e) {
  66 + return e;
  67 + }
82 }; 68 };
83 const getSonValueDataFunc = () => { 69 const getSonValueDataFunc = () => {
84 - if (isWhereComp.value == 'KafKA') { 70 + if (isWhereComp.value == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
85 getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigKafka.getSonValueFunc(); 71 getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigKafka.getSonValueFunc();
86 - } else if (isWhereComp.value == 'MQTT') { 72 + } else if (isWhereComp.value == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
87 getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigMqtt.getSonValueFunc(); 73 getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigMqtt.getSonValueFunc();
88 - } else if (isWhereComp.value == 'RabbitMq') { 74 + } else if (isWhereComp.value == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
89 getTransferConfigKafkaValue.value = 75 getTransferConfigKafkaValue.value =
90 proxy.$refs.refTransferConfigRabbitMq.getSonValueFunc(); 76 proxy.$refs.refTransferConfigRabbitMq.getSonValueFunc();
91 - } else if (isWhereComp.value == 'Api') { 77 + } else if (isWhereComp.value == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
92 getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigApi.getSonValueFunc(); 78 getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigApi.getSonValueFunc();
93 } 79 }
94 return getTransferConfigKafkaValue.value; 80 return getTransferConfigKafkaValue.value;
95 }; 81 };
96 const editSonValueDataFunc = (v) => { 82 const editSonValueDataFunc = (v) => {
97 - editSonData.type = v.type;  
98 - editSonData.configuration = v.configuration;  
99 - editSonData.name = v.name;  
100 - if (editSonData.type == 'KafKA') {  
101 - isWhereComp.value = editSonData.type;  
102 - try {  
103 - setTimeout(() => {  
104 - proxy.$refs.refTransferConfigKafka.setStepTwoFieldsValueFunc(  
105 - editSonData.configuration,  
106 - editSonData.name  
107 - );  
108 - }, 10);  
109 - } catch (e) {  
110 - return e; 83 + console.log(v.type);
  84 + try {
  85 + if (v.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
  86 + isWhereComp.value = v.type;
  87 + proxy.$refs.refTransferConfigKafka.setStepTwoFieldsValueFunc(v.configuration, v.name);
  88 + } else if (v.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
  89 + isWhereComp.value = v.type;
  90 + proxy.$refs.refTransferConfigMqtt.setStepTwoFieldsValueFunc(v.configuration, v.name);
  91 + } else if (v.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
  92 + isWhereComp.value = v.type;
  93 + proxy.$refs.refTransferConfigRabbitMq.setStepTwoFieldsValueFunc(
  94 + v.configuration,
  95 + v.name
  96 + );
  97 + } else if (v.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
  98 + isWhereComp.value = v.type;
  99 + proxy.$refs.refTransferConfigApi.setStepTwoFieldsValueFunc(v.configuration, v.name);
111 } 100 }
112 - } else if (editSonData.type == 'MQTT') {  
113 - isWhereComp.value = editSonData.type;  
114 - proxy.$refs.refTransferConfigMqtt.setStepTwoFieldsValueFunc(  
115 - editSonData.configuration,  
116 - editSonData.name  
117 - );  
118 - } else if (editSonData.type == 'RabbitMq') {  
119 - isWhereComp.value = editSonData.type;  
120 - proxy.$refs.refTransferConfigRabbitMq.setStepTwoFieldsValueFunc(  
121 - editSonData.configuration,  
122 - editSonData.name  
123 - );  
124 - } else if (editSonData.type == 'Api') {  
125 - isWhereComp.value = editSonData.type;  
126 - proxy.$refs.refTransferConfigApi.setStepTwoFieldsValueFunc(  
127 - editSonData.configuration,  
128 - editSonData.name  
129 - ); 101 + } catch (e) {
  102 + return e;
130 } 103 }
131 }; 104 };
132 return { 105 return {
@@ -3,24 +3,35 @@ @@ -3,24 +3,35 @@
3 <BasicTable 3 <BasicTable
4 @selection-change="useSelectionChange" 4 @selection-change="useSelectionChange"
5 @register="registerTable" 5 @register="registerTable"
  6 + :loading="loading"
6 :rowSelection="{ type: 'checkbox' }" 7 :rowSelection="{ type: 'checkbox' }"
7 > 8 >
8 <template #toolbar> 9 <template #toolbar>
9 <a-button type="primary" @click="handleAdd"> 添加转换 </a-button> 10 <a-button type="primary" @click="handleAdd"> 添加转换 </a-button>
10 <a-button 11 <a-button
  12 + :disabled="disabledStatus1"
11 @click="handleDelete" 13 @click="handleDelete"
12 style="background-color: rgba(237, 111, 111, 1)" 14 style="background-color: rgba(237, 111, 111, 1)"
13 - type="default" 15 + type="primary"
14 > 16 >
15 <span style="color: white">批量删除</span> 17 <span style="color: white">批量删除</span>
16 </a-button> 18 </a-button>
17 <a-button 19 <a-button
  20 + :disabled="disabledStatus2"
18 @click="handleMutiuteDisable" 21 @click="handleMutiuteDisable"
19 style="background-color: rgba(128, 128, 128.2)" 22 style="background-color: rgba(128, 128, 128.2)"
20 - type="default" 23 + type="primary"
21 > 24 >
22 <span style="color: white">批量禁用</span> 25 <span style="color: white">批量禁用</span>
23 </a-button> 26 </a-button>
  27 + <a-button
  28 + :disabled="disabledStatus3"
  29 + @click="handleMutiuteEnable"
  30 + style="background-color: #55d187"
  31 + type="primary"
  32 + >
  33 + <span style="color: white">批量启用</span>
  34 + </a-button>
24 </template> 35 </template>
25 <template #action="{ record }"> 36 <template #action="{ record }">
26 <TableAction 37 <TableAction
@@ -28,7 +39,6 @@ @@ -28,7 +39,6 @@
28 { 39 {
29 label: '编辑', 40 label: '编辑',
30 icon: 'clarity:note-edit-line', 41 icon: 'clarity:note-edit-line',
31 - color: 'success',  
32 onClick: handleEdit.bind(null, record), 42 onClick: handleEdit.bind(null, record),
33 ifShow: (_action) => { 43 ifShow: (_action) => {
34 return record.status == 0; 44 return record.status == 0;
@@ -50,7 +60,7 @@ @@ -50,7 +60,7 @@
50 { 60 {
51 label: '启用', 61 label: '启用',
52 icon: 'ant-design:check-circle-outlined', 62 icon: 'ant-design:check-circle-outlined',
53 - color: 'warning', 63 + color: 'success',
54 popConfirm: { 64 popConfirm: {
55 title: '是否启用？', 65 title: '是否启用？',
56 confirm: handleEnableOrDisable.bind(null, record), 66 confirm: handleEnableOrDisable.bind(null, record),
@@ -61,7 +71,7 @@ @@ -61,7 +71,7 @@
61 }, 71 },
62 { 72 {
63 label: '禁用', 73 label: '禁用',
64 - icon: 'ant-design:check-circle-outlined', 74 + icon: 'ant-design:close-outlined',
65 color: 'warning', 75 color: 'warning',
66 popConfirm: { 76 popConfirm: {
67 title: '是否禁用？', 77 title: '是否禁用？',
@@ -101,11 +111,19 @@ @@ -101,11 +111,19 @@
101 convertIds: [], 111 convertIds: [],
102 status: 0, 112 status: 0,
103 }); 113 });
  114 + const disabledStatus1 = ref(true);
  115 + const disabledStatus2 = ref(true);
  116 + const disabledStatus3 = ref(true);
  117 + const loading = ref(true);
104 const { createMessage } = useMessage(); 118 const { createMessage } = useMessage();
105 let selectedRowKeys: any = ref([]); 119 let selectedRowKeys: any = ref([]);
106 let getSelectRowsArr: any = ref([]); 120 let getSelectRowsArr: any = ref([]);
  121 + let isJudgeSelectRowsArr: any = ref([]);
107 const [registerModal, { openModal }] = useModal(); 122 const [registerModal, { openModal }] = useModal();
108 - const [registerTable, { reload, getSelectRowKeys, getSelectRows }] = useTable({ 123 + const [
  124 + registerTable,
  125 + { reload, getSelectRowKeys, getSelectRows, setLoading, clearSelectedRowKeys },
  126 + ] = useTable({
109 title: '数据转换列表', 127 title: '数据转换列表',
110 clickToRowSelect: false, 128 clickToRowSelect: false,
111 columns, 129 columns,
@@ -148,27 +166,51 @@ @@ -148,27 +166,51 @@
148 }); 166 });
149 }, 10); 167 }, 10);
150 }; 168 };
  169 +
151 const handleEnableOrDisable = async (record: Recordable) => { 170 const handleEnableOrDisable = async (record: Recordable) => {
152 - enableObj.convertIds.length = 0;  
153 - enableObj.status = record.status;  
154 - enableObj.convertIds.push(record.id as never);  
155 - if (enableObj.status == 0) {  
156 - enableObj.status = 1; 171 + try {
  172 + setLoading(true);
  173 + enableObj.convertIds.length = 0;
  174 + enableObj.status = record.status;
  175 + enableObj.convertIds.push(record.id as never);
  176 + if (enableObj.status == 0) {
  177 + enableObj.status = 1;
  178 + }
  179 + const res = await isEnableOrDisableApi(enableObj as never);
  180 + if (res !== '') {
  181 + createMessage.success('转换配置启用成功');
  182 + setLoading(false);
  183 + reload();
  184 + } else {
  185 + createMessage.error('转换配置启用失败');
  186 + }
  187 + } catch (e) {
  188 + return e;
  189 + } finally {
  190 + setLoading(false);
157 } 191 }
158 - await isEnableOrDisableApi(enableObj as never);  
159 - createMessage.success('转换配置启用成功');  
160 - reload();  
161 }; 192 };
162 const handleDisable = async (record: Recordable) => { 193 const handleDisable = async (record: Recordable) => {
163 - enableObj.convertIds.length = 0;  
164 - enableObj.status = record.status;  
165 - enableObj.convertIds.push(record.id as never);  
166 - if (enableObj.status == 1) {  
167 - enableObj.status = 0; 194 + try {
  195 + setLoading(true);
  196 + enableObj.convertIds.length = 0;
  197 + enableObj.status = record.status;
  198 + enableObj.convertIds.push(record.id as never);
  199 + if (enableObj.status == 1) {
  200 + enableObj.status = 0;
  201 + }
  202 + const res = await isEnableOrDisableApi(enableObj as never);
  203 + if (res !== '') {
  204 + createMessage.success('转换配置禁用成功');
  205 + setLoading(false);
  206 + reload();
  207 + } else {
  208 + createMessage.error('转换配置禁用失败');
  209 + }
  210 + } catch (e) {
  211 + } finally {
  212 + setLoading(false);
168 } 213 }
169 - await isEnableOrDisableApi(enableObj as never);  
170 - createMessage.success('转换配置禁用成功');  
171 - reload();  
172 }; 214 };
173 const handleSingleDelete = async (record: Recordable) => { 215 const handleSingleDelete = async (record: Recordable) => {
174 try { 216 try {
@@ -182,27 +224,96 @@ @@ -182,27 +224,96 @@
182 }; 224 };
183 const useSelectionChange = () => { 225 const useSelectionChange = () => {
184 selectedRowKeys.value = getSelectRowKeys(); 226 selectedRowKeys.value = getSelectRowKeys();
  227 + isJudgeSelectRowsArr.value = getSelectRows();
  228 + const hasDisableStatus = isJudgeSelectRowsArr.value.map((m) => {
  229 + return m.status;
  230 + });
  231 + hasDisableStatus.every((e) => {
  232 + if (e == 1) {
  233 + disabledStatus3.value = true;
  234 + disabledStatus2.value = false;
  235 + } else if (e == 0) {
  236 + disabledStatus2.value = true;
  237 + disabledStatus3.value = false;
  238 + }
  239 + });
  240 + let i1 = hasDisableStatus.indexOf(0);
  241 + let i2 = hasDisableStatus.indexOf(1);
  242 + if (i1 !== -1 && i2 !== -1) {
  243 + disabledStatus2.value = true;
  244 + disabledStatus3.value = true;
  245 + }
  246 + if (isJudgeSelectRowsArr.value.length == 0) {
  247 + disabledStatus1.value = true;
  248 + } else {
  249 + disabledStatus1.value = false;
  250 + }
185 }; 251 };
186 252
187 const handleDelete = async () => { 253 const handleDelete = async () => {
188 await deleteConvertApi(selectedRowKeys.value); 254 await deleteConvertApi(selectedRowKeys.value);
189 createMessage.success('删除成功'); 255 createMessage.success('删除成功');
190 reload(); 256 reload();
  257 + clearSelectedRowKeys();
191 }; 258 };
192 const handleMutiuteDisable = async () => { 259 const handleMutiuteDisable = async () => {
193 - getSelectRowsArr.value = getSelectRows();  
194 - getSelectRowsArr.value.forEach((f) => {  
195 - if (f.id) {  
196 - enableObj.status = 0;  
197 - enableObj.convertIds.push(f.id as never); 260 + try {
  261 + setLoading(true);
  262 + getSelectRowsArr.value = getSelectRows();
  263 + getSelectRowsArr.value.forEach((f) => {
  264 + if (f.id) {
  265 + enableObj.status = 0;
  266 + enableObj.convertIds.push(f.id as never);
  267 + }
  268 + });
  269 + const res = await isEnableOrDisableApi(enableObj as never);
  270 + if (res !== '') {
  271 + createMessage.success('转换配置多项禁用成功');
  272 + setLoading(false);
  273 + reload();
  274 + } else {
  275 + createMessage.error('转换配置多项禁用失败');
198 } 276 }
199 - });  
200 - await isEnableOrDisableApi(enableObj as never);  
201 - createMessage.success('转换配置多项禁用成功');  
202 - reload(); 277 + } catch (e) {
  278 + return e;
  279 + } finally {
  280 + setLoading(false);
  281 + clearSelectedRowKeys();
  282 + }
  283 + };
  284 +
  285 + const handleMutiuteEnable = async () => {
  286 + try {
  287 + setLoading(true);
  288 + getSelectRowsArr.value = getSelectRows();
  289 + getSelectRowsArr.value.forEach((f) => {
  290 + if (f.id) {
  291 + enableObj.status = 1;
  292 + enableObj.convertIds.push(f.id as never);
  293 + }
  294 + });
  295 + const res = await isEnableOrDisableApi(enableObj as never);
  296 + if (res !== '') {
  297 + createMessage.success('转换配置多项启用成功');
  298 + setLoading(false);
  299 + reload();
  300 + } else {
  301 + createMessage.error('转换配置多项启用失败');
  302 + }
  303 + } catch (e) {
  304 + return e;
  305 + } finally {
  306 + setLoading(false);
  307 + clearSelectedRowKeys();
  308 + }
203 }; 309 };
204 310
205 return { 311 return {
  312 + disabledStatus1,
  313 + disabledStatus2,
  314 + disabledStatus3,
  315 + handleMutiuteEnable,
  316 + loading,
206 registerTable, 317 registerTable,
207 handleAdd, 318 handleAdd,
208 handleDelete, 319 handleDelete,