简柏林 / thingskit-front · Commits

Commit 93a5d035e11aadf79a908aaf29ff7f8b3eb3a71e

Authored by xp.Huang
2 parents 1599edc5 8712ba0f

Merge branch 'ft-dev' into 'main' 

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

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