Merge branch 'f-dev' into 'main'

fix：修改数据流转 clientId限制8位

See merge request huang/yun-teng-iot-front!259

@@ -85,6 +85,7 @@
           proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
           proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
           proxy.$refs.lwm2mRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
+          // proxy.$refs.snmpRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
         }, 100);
       };
 
@@ -128,10 +129,12 @@
         const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc();
         const getCoapVal = await proxy.$refs.coapRef?.getDataFunc();
         const getLwm2mVal = await proxy.$refs.lwm2mRef?.getDataFunc();
+        // const getSnmpVal = await proxy.$refs.snmpRef?.getSnmpForm();
         step2Data.transportConfiguration = {
           ...getMqttVal,
           ...getCoapVal,
           ...getLwm2mVal,
+          // ...getSnmpVal,
           ...val,
         };
         return step2Data;

-<template>
-  <div style="display: flex; flex-direction: row; width: 30vw">
-    <div style="width: 9vw">
-      <BasicForm
-        :showResetButton="false"
-        :showSubmitButton="false"
-        @register="registerRightSelect"
-      />
-    </div>
-    <div style="width: 20vw">
-      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerRightInput"
-    /></div>
-    <div style="width: 1vw; margin-left: -0.8vw">
-      <span @click="handleDelScopeAndKeyAndVal" style="color: red; cursor: pointer">X</span>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { snmpRightSelectSchemas, snmpRightInputSchemas } from '../index';
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-    },
-
-    emits: ['next', 'prev', 'register', 'clear'],
-    setup(_, { emit }) {
-      const [registerRightSelect] = useForm({
-        labelWidth: 80,
-        schemas: snmpRightSelectSchemas,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-      const [registerRightInput] = useForm({
-        labelWidth: 80,
-        schemas: snmpRightInputSchemas,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-      const handleDelScopeAndKeyAndVal = () => {
-        emit('clear');
-      };
-      return {
-        registerRightSelect,
-        registerRightInput,
-        handleDelScopeAndKeyAndVal,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped></style>

+<template>
+  <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
+    <Select
+      v-model:value="param.dataType"
+      style="width: 140px"
+      :options="selectOptions"
+      @focus="focus"
+      @change="handleChange"
+    />
+    <a-input
+      placeholder="请输入Data key"
+      v-model:value="param.key"
+      style="width: 38%; margin-bottom: 5px"
+      @change="emitChange"
+    />
+    <a-input
+      placeholder="请输入OID"
+      v-model:value="param.oid"
+      style="width: 38%; margin: 0 0 5px 60px"
+      @change="emitChange"
+    />
+    <MinusCircleOutlined
+      v-if="dynamicInput.params.length > min"
+      class="dynamic-delete-button"
+      @click="remove(param)"
+      style="width: 50px"
+    />
+  </div>
+  <div>
+    <a-button type="dashed" style="width: 38%" @click="add">
+      <PlusCircleOutlined />
+      Add mapping
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
+  import { defineComponent, reactive, UnwrapRef, watchEffect, ref } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { SelectTypes } from 'ant-design-vue/es/select';
+  import { Select } from 'ant-design-vue';
+
+  interface Params {
+    dataType: string;
+    key: string;
+    oid: string;
+  }
+
+  export default defineComponent({
+    name: 'JAddInput',
+    components: {
+      MinusCircleOutlined,
+      PlusCircleOutlined,
+      Select,
+    },
+    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
+    inheritAttrs: false,
+    props: {
+      value: propTypes.array.def([]),
+      //自定义删除按钮多少才会显示
+      min: propTypes.integer.def(0),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const selectOptions = ref<SelectTypes['options']>([
+        {
+          label: '字符串',
+          value: 'STRING',
+        },
+        {
+          label: '数字',
+          value: 'LONG',
+        },
+        {
+          label: '布尔值',
+          value: 'BOOLEAN',
+        },
+        {
+          label: '双精度小数',
+          value: 'DOUBLE',
+        },
+        {
+          label: 'JSON',
+          value: 'JSON',
+        },
+      ]);
+      const focus = () => {
+        console.log('focus');
+      };
+
+      const handleChange = (value: string) => {
+        console.log(`selected ${value}`);
+      };
+
+      //input动态数据
+      const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
+      //删除Input
+      const remove = (item: Params) => {
+        let index = dynamicInput.params.indexOf(item);
+        if (index !== -1) {
+          dynamicInput.params.splice(index, 1);
+        }
+        emitChange();
+      };
+
+      //新增Input
+      const add = () => {
+        dynamicInput.params.push({
+          dataType: '',
+          key: '',
+          oid: '',
+        });
+        emitChange();
+      };
+
+      //监听传入数据value
+      watchEffect(() => {
+        initVal();
+      });
+
+      /**
+       * 初始化数值
+       */
+      function initVal() {
+        dynamicInput.params = [];
+        if (props.value) {
+          let jsonObj = props.value;
+          jsonObj.forEach((item: Params) => {
+            dynamicInput.params.push({
+              dataType: item.dataType,
+              key: item.key,
+              oid: item.oid,
+            });
+          });
+        }
+      }
+      /**
+       * 数值改变
+       */
+      function emitChange() {
+        let obj: any = [];
+        if (dynamicInput.params.length > 0) {
+          dynamicInput.params.forEach((item: Params) => {
+            obj.push({
+              dataType: item.dataType,
+              key: item.key,
+              oid: item.oid,
+            });
+          });
+        }
+        emit('change', obj);
+        emit('update:value', obj);
+      }
+
+      return {
+        dynamicInput,
+        emitChange,
+        remove,
+        add,
+        selectOptions,
+        focus,
+        handleChange,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

+<template>
+  <div class="snmp-form">
+    <div class="form-item1">
+      <div style="margin-left: 1vw">
+        <h3 style="color: gray">Scope</h3>
+        <Select
+          v-model:value="selectValue"
+          style="width: 140px"
+          :options="selectOptions"
+          @focus="focus"
+          @change="handleChange"
+        />
+      </div>
+    </div>
+    <div class="form-item2">
+      <div style="margin-left: 1vw">
+        <h3 style="color: gray">Querying frequency,ms*</h3>
+        <InputNumber v-model:value="inputNmberValue" :min="1" :max="50000" />
+        <MappingsForm :value="mappings" @change="handleMappingsChange" />
+      </div>
+    </div>
+    <div class="form-item3">
+      <div style="text-align: center; line-height: 20vh">
+        <Button size="small" type="default" @click="handleRemove(item)">
+          <template #icon>
+            <MinusCircleOutlined />
+          </template>
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { SelectTypes } from 'ant-design-vue/es/select';
+  import { Select, Button, InputNumber } from 'ant-design-vue';
+  import { MinusCircleOutlined } from '@ant-design/icons-vue';
+  import MappingsForm from './MappingsForm.vue';
+  //   interface Params {
+  //     dataType: string;
+  //     key: string;
+  //     oid: string;
+  //   }
+  defineProps({
+    item: {
+      type: Object,
+      default: () => {},
+    },
+    mappings: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  const emit = defineEmits(['removeItem']);
+  const selectValue = ref('CLIENT_ATTRIBUTES_QUERYING');
+  const inputNmberValue = ref(5000);
+  // const isHasItem = [
+  //   'TELEMETRY_QUERYING',
+  //   'CLIENT_ATTRIBUTES_QUERYING',
+  //   'SHARED_ATTRIBUTES_SETTING',
+  //   'TO_DEVICE_RPC_REQUEST',
+  // ];
+  const selectOptions = ref<SelectTypes['options']>([
+    {
+      label: 'Telemetry',
+      value: 'TELEMETRY_QUERYING',
+    },
+    {
+      label: 'Client attributes',
+      value: 'CLIENT_ATTRIBUTES_QUERYING',
+    },
+    {
+      label: 'Shared attributes',
+      value: 'SHARED_ATTRIBUTES_SETTING',
+    },
+    {
+      label: 'RPC request',
+      value: 'TO_DEVICE_RPC_REQUEST',
+    },
+  ]);
+  const focus = () => {
+    console.log('focus');
+  };
+
+  const handleChange = (value: string) => {
+    selectValue.value = value;
+  };
+  const mapping: any = ref([]);
+  const handleMappingsChange = (e) => {
+    mapping.value = e;
+  };
+
+  const handleRemove = (item) => {
+    emit('removeItem', item);
+  };
+  //设置回显表单值
+  const setFieldsValueFunc = (item, inputValue) => {
+    selectValue.value = item;
+    inputNmberValue.value = inputValue;
+  };
+  //获取表单的值
+  const getSnmpFormFunc = () => {
+    let obj: any = {};
+    obj = {
+      ...{ spec: selectValue.value },
+      ...{ mappings: mapping.value },
+      ...{ queryingFrequencyMs: inputNmberValue.value },
+    };
+    return obj;
+  };
+  defineExpose({
+    getSnmpFormFunc,
+    setFieldsValueFunc,
+  });
+</script>
+<style lang="less" scoped>
+  .snmp-form {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 40vw;
+    height: 20vh;
+    border: 1px solid gray;
+    margin-top: 2vh;
+
+    .form-item1 {
+      width: 9vw;
+      height: 20vh;
+      border: 1px solid gray;
+    }
+
+    .form-item2 {
+      width: 28vw;
+      height: 20vh;
+      border: 1px solid gray;
+    }
+
+    .form-item3 {
+      width: 2vw;
+      height: 20vh;
+      border: 1px solid gray;
+    }
+  }
+</style>

@@ -12,68 +12,24 @@
       <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
         <template #add>
           <div>
-            <template v-for="(item, index) in scopeData" :key="item.id1">
+            <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="index">
               <span style="display: none">{{ item }}</span>
-              <div
-                style="
-                  display: flex;
-                  width: 45vw;
-                  flex-direction: row;
-                  border: 0.5px solid gray;
-                  border-radius: 5px;
-                  margin-left: -1.5vw;
-                "
-              >
-                <div
-                  style="
-                    width: 14vw;
-                    border: 0.5px solid gray;
-                    border-radius: 5px;
-                    margin-left: -2vw;
-                  "
-                >
-                  <BasicForm
-                    :showResetButton="false"
-                    :showSubmitButton="false"
-                    @register="registerLeft"
-                  />
-                </div>
-                <div style="width: 29.3vw; border: 0.5px solid gray; border-radius: 5px">
-                  <BasicForm
-                    :showResetButton="false"
-                    :showSubmitButton="false"
-                    @register="registerRight"
-                  />
-                  <div>
-                    <template v-for="(item1, index1) in item.mappings" :key="item1.id2">
-                      <span style="display: none">{{ index1 }}</span>
-                      <span style="display: none">{{ item1 }}</span>
-                      <KeyAndValVue @clear="clearFun(index, index1)" />
-                    </template>
-                    <div
-                      style="
-                        margin-top: -3.8vh;
-                        margin-left: 2.3vw;
-                        position: relative;
-                        top: -1.5vh;
-                      "
-                    >
-                      <a-button size="small" type="default" @click="handleAddMapping(index)">
-                        Add mapping
-                      </a-button>
-                    </div>
-                  </div>
-                </div>
-                <div style="width: 1vw; margin-top: 8.5vh; margin-left: 0.5vw">
-                  <span @click="handleDelScope(index)" style="color: red; cursor: pointer">X</span>
-                </div>
-              </div>
-              <div style="height: 2vh"></div>
+              <span style="display: none">{{ index }}</span>
+              <!-- snmp表单项 -->
+              <SnmpForm
+                :item="item"
+                :ref="dynamicBindRef.SnmpFormItemRef"
+                :mappings="item.mappings"
+                @removeItem="handleRemoveItem"
+              />
             </template>
-            <div style="margin-left: -1vw">
-              <a-button size="small" type="default" @click="handleAddScope">
+            <div style="margin-left: 0vw; margin-top: 2vh">
+              <Button size="small" type="default" @click="handleAdd">
+                <template #icon>
+                  <PlusCircleOutlined />
+                </template>
                 Add communication config
-              </a-button>
+              </Button>
             </div>
           </div>
         </template>
@@ -81,95 +37,104 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+  import { UnwrapRef, reactive, ref, unref, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { snmpSchemas, snmpLeftSchemas, snmpRightSchemas } from './index';
-  import { Alert, Divider, Descriptions } from 'ant-design-vue';
-  import KeyAndValVue from './cpns/KeyAndVal.vue';
+  import { snmpSchemas } from './config';
+  import { PlusCircleOutlined } from '@ant-design/icons-vue';
+  import { Button } from 'ant-design-vue';
+  import SnmpForm from './cpns/SnmpForm.vue';
 
-  export default defineComponent({
-    components: {
-      BasicForm,
-      [Alert.name]: Alert,
-      [Divider.name]: Divider,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
-      KeyAndValVue,
+  interface mappingsI {
+    dataType: string;
+    key: string;
+    oid: string;
+  }
+  interface Params {
+    spec: string;
+    queryingFrequencyMs: number;
+    mappings: mappingsI[];
+  }
+  const dynamicBindRef = {
+    SnmpFormItemRef: ref([]),
+  };
+  const dynamicSNMP: UnwrapRef<{ communicationConfigs: Params[] }> = reactive({
+    communicationConfigs: [
+      {
+        spec: '',
+        mappings: [
+          {
+            dataType: 'STRING',
+            key: '',
+            oid: '',
+          },
+        ],
+        queryingFrequencyMs: 0,
+      },
+    ],
+  });
+  const [register, { validate, setFieldsValue }] = useForm({
+    labelWidth: 150,
+    schemas: snmpSchemas,
+    actionColOptions: {
+      span: 14,
     },
-
-    emits: ['next', 'prev', 'register'],
-    setup() {
-      const scopeData: any = ref([
+  });
+  const handleAdd = () => {
+    dynamicSNMP.communicationConfigs.push({
+      spec: '',
+      mappings: [
         {
-          id1: 1,
-          mappings: [
-            {
-              id2: 2,
-            },
-          ],
-        },
-      ]);
-
-      const [register] = useForm({
-        labelWidth: 150,
-        schemas: snmpSchemas,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-      const [registerLeft] = useForm({
-        labelWidth: 100,
-        schemas: snmpLeftSchemas,
-        actionColOptions: {
-          span: 14,
+          dataType: '',
+          key: '',
+          oid: '',
         },
+      ],
+      queryingFrequencyMs: 0,
+    });
+  };
+  const handleRemoveItem = (item) => {
+    let index = dynamicSNMP.communicationConfigs.indexOf(item);
+    if (index !== -1) {
+      dynamicSNMP.communicationConfigs.splice(index, 1);
+    }
+  };
+  //回显表单值
+  const setStepFieldsValueFunc = (v) => {
+    setFieldsValue({
+      timeoutMs: v.timeoutMs,
+      retries: v.retries,
+    });
+    dynamicSNMP.communicationConfigs = v.communicationConfigs;
+    dynamicSNMP.communicationConfigs.forEach((snmp: any, index: number) => {
+      nextTick(() => {
+        unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc(
+          snmp?.spec,
+          snmp?.queryingFrequencyMs
+        );
       });
-      const [registerRight] = useForm({
-        labelWidth: 150,
-        schemas: snmpRightSchemas,
-        actionColOptions: {
-          span: 14,
-        },
-      });
-
-      const handleAddMapping = (i) => {
-        scopeData.value[i].mappings.push({
-          id2: Date.now() + 3,
-        });
-      };
-      const clearFun = (i1, i2) => {
-        scopeData.value[i1].mappings.splice(i2, 1);
-      };
+    });
+  };
 
-      const handleDelScope = (i) => {
-        scopeData.value.splice(i, 1);
-      };
-
-      const handleAddScope = () => {
-        if (scopeData.value.length < 4) {
-          scopeData.value.push({
-            id1: Date.now() + 1,
-            mappings: [
-              {
-                id2: Date.now() + 2,
-              },
-            ],
-          });
-        }
-      };
-
-      return {
-        register,
-        registerLeft,
-        registerRight,
-        handleAddMapping,
-        scopeData,
-        handleDelScope,
-        handleAddScope,
-        clearFun,
-      };
-    },
+  //获取最终的值
+  const getSnmpForm = async () => {
+    let value = await validate();
+    if (!value) return;
+    let tempObj: any = {};
+    let tempArray: any = [];
+    unref(dynamicBindRef.SnmpFormItemRef)?.map((item: any) => {
+      tempArray.push(item.getSnmpFormFunc());
+    });
+    tempObj = {
+      ...value,
+      ...{ communicationConfigs: tempArray },
+      ...{ type: 'SNMP' },
+    };
+    return tempObj;
+  };
+  defineExpose({
+    getSnmpForm,
+    setStepFieldsValueFunc,
   });
 </script>
 <style lang="less" scoped></style>

@@ -342,7 +342,7 @@ export const modeMqttForm: FormSchema[] = [
             });
           }
         },
-        maxLength: 255,
+        maxLength: 8,
         placeholder: '请输入Client ID',
       };
     },

@@ -104,6 +104,7 @@
   import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue';
   import { uploadApi } from '/@/api/personal/index';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { buildUUID } from '/@/utils/uuid';
 
   export default defineComponent({
     components: {
@@ -343,6 +344,8 @@
           credentialsV.credentials.certFileName = certFileName.value;
           credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
         }
+        //clientId 从uuid里切片8位
+        sonValues.configuration.clientId = buildUUID().slice(0, 8);
         Object.assign(sonValues.configuration, credentialsV);
         return sonValues;
       };