简柏林 / thingskit-front · Commits

Commit 569554ff0f41f45f4f5de309bc42f1674d4ad724

Authored by fengtao
1 parent b00385a8

fix：修改设备配置

Inline Side-by-side
Showing 1 changed file with 275 additions and 263 deletions
1 1 <template>
2 2 <div>
3   - <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle" @ok="handleSubmit"
4   - @cancel="handleCancel" :showOkBtn="isShowOkBtnFalse">
  3 + <BasicModal
  4 + v-bind="$attrs"
  5 + width="55rem"
  6 + @register="register"
  7 + :title="getTitle"
  8 + @ok="handleSubmit"
  9 + @cancel="handleCancel"
  10 + :showOkBtn="isShowOkBtnFalse"
  11 + >
5 12 <div class="step-form-form">
6 13 <a-steps :current="current">
7 14 <a-step title="设备配置" />
... ... @@ -24,276 +31,281 @@
24 31 </div>
25 32 </template>
26 33 <script lang="ts">
27   -import {
28   - defineComponent,
29   - nextTick,
30   - ref,
31   - computed,
32   - unref,
33   - getCurrentInstance,
34   - reactive,
35   -} from 'vue';
36   -import { BasicModal, useModalInner } from '/@/components/Modal';
37   -import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
38   -import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
39   -import { Steps } from 'ant-design-vue';
40   -import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
41   -import { useMessage } from '/@/hooks/web/useMessage';
42   -
43   -export default defineComponent({
44   - name: 'DeviceModal',
45   - components: {
46   - BasicModal,
47   - DeviceProfileStep1,
48   - DeviceProfileStep2,
49   - [Steps.name]: Steps,
50   - [Steps.Step.name]: Steps.Step,
51   - },
52   - props: {
53   - userData: { type: Object },
54   - },
55   - emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
56   - setup(_, { emit }) {
57   - const { proxy } = getCurrentInstance() as any;
58   - const DeviceProfileStep1Ref = ref(null);
59   - const DeviceProfileStep2Ref = ref(null);
60   - const { createMessage } = useMessage();
61   - let postDeviceConfogData: any = reactive({});
62   - let getStepOneData: any = reactive({});
63   - let getStepTwoData: any = reactive({});
64   - const editData: any = ref({});
65   - const postEditId = ref('');
66   - const createTime = ref('');
67   - const current = ref(0);
68   - const isUpdate = ref(0);
69   - const isShowOkBtnFalse = ref(true);
70   - const isNextStatus = ref(false);
71   - let transportTypeObj = reactive({
72   - transportType: '',
73   - });
74   - let profileDataObj: any = reactive({
75   - profileData: null,
76   - });
77   - let isEdit = ref(true);
78   - let noEditObj: any = reactive({});
79   - const getTitle = computed(() =>
80   - isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
81   - );
82   - const editTransportType = ref('');
83   - const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
84   - const [register, { closeModal }] = useModalInner(async (data) => {
85   - isUpdate.value = data.isUpdate;
86   - if (isUpdate.value == 1) {
87   - handleCancel();
88   - isShowOkBtnFalse.value = true;
89   - current.value = 0;
90   - isEdit.value = false;
91   - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
92   - } else if (isUpdate.value == 2) {
93   - isEdit.value = true;
94   - handleCancel();
95   - isShowOkBtnFalse.value = true;
96   - current.value = 0;
97   - postEditId.value = data.record.id;
98   - createTime.value = data.record.createTime;
99   - editTransportType.value = data.record.transportType;
100   - editData.value = await deviceConfigGetDetail(postEditId.value);
101   - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
102   - name: editData.value.name,
103   - defaultRuleChainId: editData.value.defaultRuleChainId,
104   - defaultQueueName: editData.value.defaultQueueName,
105   - description: editData.value.description,
106   - image: editData.value.image,
107   - });
108   - if (editData.value.default) {
109   - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true)
110   -
111   - } else {
112   - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
  34 + import {
  35 + defineComponent,
  36 + nextTick,
  37 + ref,
  38 + computed,
  39 + unref,
  40 + getCurrentInstance,
  41 + reactive,
  42 + } from 'vue';
  43 + import { BasicModal, useModalInner } from '/@/components/Modal';
  44 + import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
  45 + import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
  46 + import { Steps } from 'ant-design-vue';
  47 + import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  48 + import { useMessage } from '/@/hooks/web/useMessage';
113 49
  50 + export default defineComponent({
  51 + name: 'DeviceModal',
  52 + components: {
  53 + BasicModal,
  54 + DeviceProfileStep1,
  55 + DeviceProfileStep2,
  56 + [Steps.name]: Steps,
  57 + [Steps.Step.name]: Steps.Step,
  58 + },
  59 + props: {
  60 + userData: { type: Object },
  61 + },
  62 + emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
  63 + setup(_, { emit }) {
  64 + const { proxy } = getCurrentInstance() as any;
  65 + const DeviceProfileStep1Ref = ref(null);
  66 + const DeviceProfileStep2Ref = ref(null);
  67 + const { createMessage } = useMessage();
  68 + let postDeviceConfogData: any = reactive({});
  69 + let getStepOneData: any = reactive({});
  70 + let getStepTwoData: any = reactive({});
  71 + const editData: any = ref({});
  72 + const postEditId = ref('');
  73 + const postDefault = ref(false);
  74 + const createTime = ref('');
  75 + const current = ref(0);
  76 + const isUpdate = ref(0);
  77 + const isShowOkBtnFalse = ref(true);
  78 + const isNextStatus = ref(false);
  79 + let transportTypeObj = reactive({
  80 + transportType: '',
  81 + });
  82 + let profileDataObj: any = reactive({
  83 + profileData: null,
  84 + });
  85 + let isEdit = ref(true);
  86 + let noEditObj: any = reactive({});
  87 + const getTitle = computed(() =>
  88 + isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
  89 + );
  90 + const editTransportType = ref('');
  91 + const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
  92 + const [register, { closeModal }] = useModalInner(async (data) => {
  93 + isUpdate.value = data.isUpdate;
  94 + if (isUpdate.value == 1) {
  95 + handleCancel();
  96 + isShowOkBtnFalse.value = true;
  97 + current.value = 0;
  98 + isEdit.value = false;
  99 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false);
  100 + } else if (isUpdate.value == 2) {
  101 + isEdit.value = true;
  102 + handleCancel();
  103 + isShowOkBtnFalse.value = true;
  104 + current.value = 0;
  105 + postEditId.value = data.record.id;
  106 + postDefault.value = data.record.default;
  107 + createTime.value = data.record.createTime;
  108 + editTransportType.value = data.record.transportType;
  109 + editData.value = await deviceConfigGetDetail(postEditId.value);
  110 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  111 + name: editData.value.name,
  112 + defaultRuleChainId: editData.value.defaultRuleChainId,
  113 + defaultQueueName: editData.value.defaultQueueName,
  114 + description: editData.value.description,
  115 + image: editData.value.image,
  116 + });
  117 + if (editData.value.default) {
  118 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true);
  119 + } else {
  120 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false);
  121 + }
  122 + noEditObj = {
  123 + id: editData.value.id,
  124 + name: editData.value?.name,
  125 + createTime: createTime.value,
  126 + transportType: editTransportType.value,
  127 + type: editData.value?.type,
  128 + profileData: editData.value?.profileData,
  129 + defaultQueueName: editData.value.defaultQueueName,
  130 + image: editData.value.image,
  131 + defaultRuleChainId: editData.value.defaultRuleChainId,
  132 + description: editData.value.description,
  133 + tenantId: editData.value.tenantId,
  134 + default: editData.value.default,
  135 + };
  136 + } else if (isUpdate.value == 3) {
  137 + handleCancel();
  138 + isShowOkBtnFalse.value = false;
  139 + current.value = 0;
  140 + postEditId.value = data.record.id;
  141 + createTime.value = data.record.createTime;
  142 + editData.value = await deviceConfigGetDetail(postEditId.value);
  143 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  144 + name: editData.value.name,
  145 + defaultRuleChainId: editData.value.defaultRuleChainId,
  146 + defaultQueueName: editData.value.defaultQueueName,
  147 + description: editData.value.description,
  148 + image: editData.value.image,
  149 + });
  150 + }
  151 + });
  152 + function handleStepPrev() {
  153 + current.value--;
  154 + if (isUpdate.value == 2) {
  155 + isEdit.value = true;
  156 + noEditObj = {
  157 + id: editData.value.id,
  158 + name: editData.value?.name,
  159 + createTime: createTime.value,
  160 + transportType: editTransportType.value,
  161 + type: editData.value?.type,
  162 + profileData: editData.value?.profileData,
  163 + defaultQueueName: editData.value.defaultQueueName,
  164 + image: editData.value.image,
  165 + defaultRuleChainId: editData.value.defaultRuleChainId,
  166 + description: editData.value.description,
  167 + tenantId: editData.value.tenantId,
  168 + default: editData.value.default,
  169 + };
  170 + nextTick(async () => {
  171 + let getPic = null;
  172 + const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
  173 + getPic = getStep1Obj.icon;
  174 + Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
  175 + });
114 176 }
115   - noEditObj = {
116   - id: editData.value.id,
117   - name: editData.value?.name,
118   - createTime: createTime.value,
119   - transportType: editTransportType.value,
120   - type: editData.value?.type,
121   - profileData: editData.value?.profileData,
122   - defaultQueueName: editData.value.defaultQueueName,
123   - image: editData.value.image,
124   - defaultRuleChainId: editData.value.defaultRuleChainId,
125   - description: editData.value.description,
126   - tenantId: editData.value.tenantId,
127   - };
128   - } else if (isUpdate.value == 3) {
129   - handleCancel();
130   - isShowOkBtnFalse.value = false;
131   - current.value = 0;
132   - postEditId.value = data.record.id;
133   - createTime.value = data.record.createTime;
134   - editData.value = await deviceConfigGetDetail(postEditId.value);
135   - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
136   - name: editData.value.name,
137   - defaultRuleChainId: editData.value.defaultRuleChainId,
138   - defaultQueueName: editData.value.defaultQueueName,
139   - description: editData.value.description,
140   - image: editData.value.image,
141   - });
142 177 }
143   - });
144   - function handleStepPrev() {
145   - current.value--;
146   - if (isUpdate.value == 2) {
147   - isEdit.value = true;
148   - noEditObj = {
149   - id: editData.value.id,
150   - name: editData.value?.name,
151   - createTime: createTime.value,
152   - transportType: editTransportType.value,
153   - type: editData.value?.type,
154   - profileData: editData.value?.profileData,
155   - defaultQueueName: editData.value.defaultQueueName,
156   - image: editData.value.image,
157   - defaultRuleChainId: editData.value.defaultRuleChainId,
158   - description: editData.value.description,
159   - tenantId: editData.value.tenantId,
160   - };
161   - nextTick(async () => {
162   - let getPic = null;
  178 + //第一步
  179 + function handleStepNext1(v, v1) {
  180 + isNextStatus.value = true;
  181 + if (isNextStatus.value) {
  182 + getStepOneData = {
  183 + ...v,
  184 + ...{ image: v1 },
  185 + };
  186 + }
  187 + current.value++;
  188 + if (isUpdate.value == 2) {
  189 + isEdit.value = false;
  190 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  191 + } else if (isUpdate.value == 3) {
  192 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  193 + }
  194 + }
  195 + const handleSubmit = async () => {
  196 + let getPic = null;
  197 + getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
  198 + profileDataObj.profileData = getStepTwoData;
  199 + transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
  200 + delete profileDataObj?.profileData?.transportConfiguration?.transportType;
  201 + //没有点击下一步
  202 + if (!isNextStatus.value) {
163 203 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
164 204 getPic = getStep1Obj.icon;
  205 + getStepOneData = {
  206 + ...getStep1Obj.key,
  207 + ...{ image: getPic },
  208 + };
165 209 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
166   - });
167   - }
168   - }
169   - //第一步
170   - function handleStepNext1(v, v1) {
171   - isNextStatus.value = true;
172   - if (isNextStatus.value) {
173   - getStepOneData = {
174   - ...v,
175   - ...{ image: v1 },
176   - };
177   - }
178   - current.value++;
179   - if (isUpdate.value == 2) {
180   - isEdit.value = false;
181   - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
182   - } else if (isUpdate.value == 3) {
183   - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
184   - }
185   - }
186   - const handleSubmit = async () => {
187   - let getPic = null;
188   - getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
189   - profileDataObj.profileData = getStepTwoData;
190   - transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
191   - delete profileDataObj?.profileData?.transportConfiguration?.transportType;
192   - //没有点击下一步
193   - if (!isNextStatus.value) {
194   - const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
195   - getPic = getStep1Obj.icon;
196   - getStepOneData = {
197   - ...getStep1Obj.key,
198   - ...{ image: getPic },
199   - };
200   - Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
201   - }
202   - const id = isUpdate.value == 1 ? '' : postEditId.value;
203   - const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
  210 + }
  211 + const id = isUpdate.value == 1 ? '' : postEditId.value;
  212 + const postDefaultVal =
  213 + isUpdate.value == 1 ? { default: false } : { default: postDefault.value };
  214 + const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
204 215
205   - if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
206   - profileDataObj.profileData = null;
207   - }
208   - postDeviceConfogData = {
209   - ...getStepOneData,
210   - ...profileDataObj,
211   - ...transportTypeObj,
212   - id,
213   - ...createTimePost,
214   - };
215   - if (isUpdate.value == 1) {
216   - delete postDeviceConfogData.id;
217   - }
218   - let isMappingsKey = ref(false);
219   - let isMappingValue = ref(false);
220   - let isQueryings = ref(false);
221   - let isOIDRepet = ref(false);
222   - postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
223   - (f: any) => {
224   - if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
225   - if (f.queryingFrequencyMs == null) {
226   - isQueryings.value = true;
227   - return createMessage.error('请填写查询频率');
  216 + if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
  217 + profileDataObj.profileData = null;
  218 + }
  219 + postDeviceConfogData = {
  220 + ...getStepOneData,
  221 + ...profileDataObj,
  222 + ...transportTypeObj,
  223 + id,
  224 + ...postDefaultVal,
  225 + ...createTimePost,
  226 + };
  227 + if (isUpdate.value == 1) {
  228 + delete postDeviceConfogData.id;
  229 + }
  230 + let isMappingsKey = ref(false);
  231 + let isMappingValue = ref(false);
  232 + let isQueryings = ref(false);
  233 + let isOIDRepet = ref(false);
  234 + postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
  235 + (f: any) => {
  236 + if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
  237 + if (f.queryingFrequencyMs == null) {
  238 + isQueryings.value = true;
  239 + return createMessage.error('请填写查询频率');
  240 + } else {
  241 + isQueryings.value = false;
  242 + }
  243 + }
  244 + if (f.mappings.length == 0) {
  245 + isMappingsKey.value = true;
  246 + isMappingValue.value = true;
228 247 } else {
229   - isQueryings.value = false;
  248 + f.mappings.forEach((f1) => {
  249 + const findNoneKey = Object.keys(f1).includes('');
  250 + if (findNoneKey) {
  251 + isMappingsKey.value = true;
  252 + }
  253 + });
  254 + f.mappings.forEach((f2) => {
  255 + const findNoneVal = Object.values(f2).includes('');
  256 + if (findNoneVal) {
  257 + isMappingValue.value = true;
  258 + }
  259 + });
  260 + //新增OID不能重复=====同一层级的OID不能重复
  261 + f.mappings.forEach((item, _) => {
  262 + if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
  263 + isOIDRepet.value = true;
  264 + }
  265 + });
230 266 }
231 267 }
232   - if (f.mappings.length == 0) {
233   - isMappingsKey.value = true;
234   - isMappingValue.value = true;
235   - } else {
236   - f.mappings.forEach((f1) => {
237   - const findNoneKey = Object.keys(f1).includes('');
238   - if (findNoneKey) {
239   - isMappingsKey.value = true;
240   - }
241   - });
242   - f.mappings.forEach((f2) => {
243   - const findNoneVal = Object.values(f2).includes('');
244   - if (findNoneVal) {
245   - isMappingValue.value = true;
246   - }
247   - });
248   - //新增OID不能重复=====同一层级的OID不能重复
249   - f.mappings.forEach((item, _) => {
250   - if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
251   - isOIDRepet.value = true;
252   - }
253   - });
254   - }
255   - }
256   - );
257   - if (isQueryings.value) return createMessage.error('请填写查询频率');
258   - if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
259   - if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
260   - if (isOIDRepet.value) return createMessage.error('OID不能重复');
261   - deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
262   - .then((res) => {
263   - if (!res) return;
264   - createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
265   - closeModal();
266   - emit('success');
267   - isNextStatus.value = false;
268   - })
269   - .catch((e) => {
270   - // createMessage.error(e);
  268 + );
  269 + if (isQueryings.value) return createMessage.error('请填写查询频率');
  270 + if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
  271 + if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
  272 + if (isOIDRepet.value) return createMessage.error('OID不能重复');
  273 + deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
  274 + .then((res) => {
  275 + if (!res) return;
  276 + createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
  277 + closeModal();
  278 + emit('success');
  279 + isNextStatus.value = false;
  280 + })
  281 + .catch((e) => {
  282 + // createMessage.error(e);
  283 + });
  284 + };
  285 + const handleCancel = () => {
  286 + nextTick(() => {
  287 + proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
  288 + proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
271 289 });
272   - };
273   - const handleCancel = () => {
274   - nextTick(() => {
275   - proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
276   - proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
277   - });
278   - };
279   - function handleRedo() {
280   - current.value = 0;
281   - }
282   - return {
283   - isShowOkBtnFalse,
284   - DeviceProfileStep2Ref,
285   - DeviceProfileStep1Ref,
286   - editData,
287   - handleSubmit,
288   - handleCancel,
289   - register,
290   - getTitle,
291   - getViewTitle,
292   - current,
293   - handleStepPrev,
294   - handleStepNext1,
295   - handleRedo,
296   - };
297   - },
298   -});
  290 + };
  291 + function handleRedo() {
  292 + current.value = 0;
  293 + }
  294 + return {
  295 + isShowOkBtnFalse,
  296 + DeviceProfileStep2Ref,
  297 + DeviceProfileStep1Ref,
  298 + editData,
  299 + handleSubmit,
  300 + handleCancel,
  301 + register,
  302 + getTitle,
  303 + getViewTitle,
  304 + current,
  305 + handleStepPrev,
  306 + handleStepNext1,
  307 + handleRedo,
  308 + };
  309 + },
  310 + });
299 311 </script>
... ...