pref:移动表单配置文件

@@ -46,7 +46,7 @@
       centered
     >
       <div>
-        <Form :label-col="labelCol" :colon="false">
+        <Form :label-col="labelCol" :colon="false" :rules="rules" :model="positionState">
           <Row :gutter="20" class="mt-4">
             <Col :span="20">
               <FormItem label="搜索位置">
@@ -64,13 +64,21 @@
           </Row>
           <Row :gutter="20" class="">
             <Col :span="10">
-              <FormItem label="经度">
-                <Input v-model:value="positionState.longitude" disabled />
+              <FormItem label="经度" name="longitude">
+                <Input
+                  @blur="redirectPosition"
+                  @change="redirectPosition"
+                  v-model:value="positionState.longitude"
+                />
               </FormItem>
             </Col>
             <Col :span="10">
-              <FormItem label="纬度">
-                <Input v-model:value="positionState.latitude" disabled />
+              <FormItem label="纬度" name="latitude">
+                <Input
+                  @blur="redirectPosition"
+                  @change="redirectPosition"
+                  v-model:value="positionState.latitude"
+                />
               </FormItem>
             </Col>
           </Row>
@@ -90,9 +98,11 @@
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
-  import { generateSNCode } from '/@/api/device/deviceManager.ts';
+  import { generateSNCode } from '/@/api/device/deviceManager';
   import icon from '/@/assets/images/wz.png';
   import { useDebounceFn } from '@vueuse/core';
+  import { validatorLongitude, validatorLatitude } from '/@/utils/rules';
+
   export default defineComponent({
     components: {
       BasicForm,
@@ -115,6 +125,16 @@
     },
     emits: ['next'],
     setup(props, { emit }) {
+      const redirectPosition = () => {
+        if (positionState.longitude && positionState.latitude) {
+          var pt = new BMap.Point(positionState.longitude, positionState.latitude);
+          getAddrByPoint(pt);
+        }
+      };
+      const rules: any = {
+        longitude: [{ required: true, validator: validatorLongitude, trigger: 'blur' }],
+        latitude: [{ required: true, validator: validatorLatitude, trigger: 'blur' }],
+      };
       const devicePic = ref('');
       const loading = ref(false);
 
@@ -202,9 +222,9 @@
         geco.getLocation(point, function (res) {
           positionState.marker.setPosition(point); //重新设置标注的地理坐标
           positionState.map.panTo(point); //将地图的中心点更改为给定的点
-          positionState.address = res.address; //记录该点的详细地址信息
-          positionState.longitude = point.lng; //记录当前坐标点
-          positionState.latitude = point.lat;
+          positionState.address = res?.address; //记录该点的详细地址信息
+          positionState.longitude = point?.lng; //记录当前坐标点
+          positionState.latitude = point?.lat;
         });
       }
 
@@ -378,6 +398,8 @@
         debounceSearch,
         generateSN,
         loading,
+        rules,
+        redirectPosition,
       };
     },
   });
@@ -387,6 +409,7 @@
     width: 450px;
     margin: 0 auto;
   }
+
   :deep(.ant-radio-group) {
     width: 15vw;
   }

@@ -4,6 +4,95 @@ import { findDictItemByCode } from '/@/api/system/dict';
 import { MessageEnum } from '/@/enums/messageEnum';
 import { numberRule } from '/@/utils/rules';
 
+import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
+
+export const step1Schemas: FormSchema[] = [
+  {
+    field: 'image',
+    label: '上传图片',
+    component: 'Input',
+    slot: 'imageSelect',
+  },
+  {
+    field: 'name',
+    label: '配置名称',
+    required: true,
+    component: 'Input',
+    componentProps() {
+      return {
+        disabled: false,
+        ength: 255,
+        placeholder: '请输入配置名称',
+      };
+    },
+  },
+  {
+    field: 'defaultRuleChainId',
+    label: '规则链',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const data = await deviceConfigGetRuleChain();
+        const returnData = data.map((m) => {
+          return {
+            getValueField: m.name,
+            getKeyField: m.id.id,
+          };
+        });
+        return returnData;
+      },
+      labelField: 'getValueField',
+      valueField: 'getKeyField',
+      immediate: true,
+    },
+  },
+  {
+    field: 'defaultQueueName',
+    label: '处理队列',
+    component: 'ApiSelect',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'queen_execute_sequence',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      resultField: 'items',
+    },
+  },
+
+  {
+    label: '描述',
+    field: 'description',
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+];
+
+export const step2Schemas: FormSchema[] = [
+  {
+    field: 'transportType',
+    component: 'Select',
+    label: '接入协议',
+    defaultValue: 'DEFAULT',
+    componentProps() {
+      return {
+        options: [
+          { label: '默认', value: 'DEFAULT' },
+          { label: 'MQTT', value: 'MQTT' },
+          { label: 'CoAP', value: 'COAP' },
+          { label: 'LWM2M', value: 'LWM2M' },
+          { label: 'SNMP', value: 'SNMP' },
+        ],
+      };
+    },
+    colProps: { span: 10 },
+  },
+];
+
 export const columns: BasicColumn[] = [
   {
     title: '配置图片', //图标

@@ -34,7 +34,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step1Schemas } from './data';
+  import { step1Schemas } from '../device.profile.data';
   import { uploadApi } from '/@/api/personal/index';
   import { Upload } from 'ant-design-vue';
   import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';

 <template>
-  <div class="step2-style">
+  <div
+    class="step2-style"
+    :style="[isMqttType == 'DEFAULT' ? { minHeight: 0 + 'px' } : { minHeight: 800 + 'px' }]"
+  >
     <div
-      style="margin-top: 0.1vh; height: 15vh"
       :style="[
         isMqttType == 'MQTT'
           ? { minHeight: 45 + 'vh' }
@@ -40,7 +42,7 @@
 <script lang="ts" setup>
   import { reactive, ref, onUnmounted, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step2Schemas } from './data';
+  import { step2Schemas } from '../device.profile.data';
   import { Button } from '/@/components/Button';
   import MqttCpns from './cpns/mqtt/Mqtt.vue';
   import CoapCpns from './cpns/coap/Coap.vue';
@@ -52,7 +54,7 @@
   const coapRef = ref<InstanceType<typeof CoapCpns>>();
   const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
   const snmpRef = ref<InstanceType<typeof SnmpCpns>>();
-  const isMqttType = ref('');
+  const isMqttType = ref('DEFAULT');
   let step2Data = reactive({
     transportConfiguration: {},
   });
@@ -75,7 +77,7 @@
   };
 
   const resetFormData = () => {
-    isMqttType.value = '';
+    isMqttType.value = 'DEFAULT';
     resetFields();
     nextTick(() => {
       mqttRef.value?.resetFormData();
@@ -107,7 +109,7 @@
     });
   });
   onUnmounted(() => {
-    isMqttType.value = '';
+    isMqttType.value = 'DEFAULT';
   });
   const getFormData = async () => {
     const val = await validate();

-import { FormSchema } from '/@/components/Form';
-import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
-import { findDictItemByCode } from '/@/api/system/dict';
-
-export const step1Schemas: FormSchema[] = [
-  {
-    field: 'image',
-    label: '上传图片',
-    component: 'Input',
-    slot: 'imageSelect',
-  },
-  {
-    field: 'name',
-    label: '配置名称',
-    required: true,
-    component: 'Input',
-    componentProps() {
-      return {
-        disabled: false,
-        ength: 255,
-        placeholder: '请输入配置名称',
-      };
-    },
-  },
-  {
-    field: 'defaultRuleChainId',
-    label: '规则链',
-    component: 'ApiSelect',
-    componentProps: {
-      api: async () => {
-        const data = await deviceConfigGetRuleChain();
-        const returnData = data.map((m) => {
-          return {
-            getValueField: m.name,
-            getKeyField: m.id.id,
-          };
-        });
-        return returnData;
-      },
-      labelField: 'getValueField',
-      valueField: 'getKeyField',
-      immediate: true,
-    },
-  },
-  {
-    field: 'defaultQueueName',
-    label: '处理队列',
-    component: 'ApiSelect',
-    componentProps: {
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'queen_execute_sequence',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-      resultField: 'items',
-    },
-  },
-
-  {
-    label: '描述',
-    field: 'description',
-    component: 'InputTextArea',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入描述',
-    },
-  },
-];
-
-export const step2Schemas: FormSchema[] = [
-  {
-    field: 'transportType',
-    component: 'Select',
-    label: '接入协议',
-    defaultValue: 'DEFAULT',
-    componentProps() {
-      return {
-        options: [
-          { label: '默认', value: 'DEFAULT' },
-          { label: 'MQTT', value: 'MQTT' },
-          { label: 'CoAP', value: 'COAP' },
-          { label: 'LWM2M', value: 'LWM2M' },
-          { label: 'SNMP', value: 'SNMP' },
-        ],
-      };
-    },
-    colProps: { span: 10 },
-  },
-];