简柏林 / thingskit-front · Commits

Commit c4ed03fc32baa2e1f26684222ea7d489039013ca

Authored by fengtao
1 parent a7323b61

pref:移动表单配置文件

Inline Side-by-side
Showing 5 changed files with 130 additions and 106 deletions
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 centered 46 centered
47 > 47 >
48 <div> 48 <div>
49 - <Form :label-col="labelCol" :colon="false"> 49 + <Form :label-col="labelCol" :colon="false" :rules="rules" :model="positionState">
50 <Row :gutter="20" class="mt-4"> 50 <Row :gutter="20" class="mt-4">
51 <Col :span="20"> 51 <Col :span="20">
52 <FormItem label="搜索位置"> 52 <FormItem label="搜索位置">
@@ -64,13 +64,21 @@ @@ -64,13 +64,21 @@
64 </Row> 64 </Row>
65 <Row :gutter="20" class=""> 65 <Row :gutter="20" class="">
66 <Col :span="10"> 66 <Col :span="10">
67 - <FormItem label="经度">  
68 - <Input v-model:value="positionState.longitude" disabled /> 67 + <FormItem label="经度" name="longitude">
  68 + <Input
  69 + @blur="redirectPosition"
  70 + @change="redirectPosition"
  71 + v-model:value="positionState.longitude"
  72 + />
69 </FormItem> 73 </FormItem>
70 </Col> 74 </Col>
71 <Col :span="10"> 75 <Col :span="10">
72 - <FormItem label="纬度">  
73 - <Input v-model:value="positionState.latitude" disabled /> 76 + <FormItem label="纬度" name="latitude">
  77 + <Input
  78 + @blur="redirectPosition"
  79 + @change="redirectPosition"
  80 + v-model:value="positionState.latitude"
  81 + />
74 </FormItem> 82 </FormItem>
75 </Col> 83 </Col>
76 </Row> 84 </Row>
@@ -90,9 +98,11 @@ @@ -90,9 +98,11 @@
90 import { upload } from '/@/api/oss/ossFileUploader'; 98 import { upload } from '/@/api/oss/ossFileUploader';
91 import { FileItem } from '/@/components/Upload/src/typing'; 99 import { FileItem } from '/@/components/Upload/src/typing';
92 import { BAI_DU_MAP_URL } from '/@/utils/fnUtils'; 100 import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
93 - import { generateSNCode } from '/@/api/device/deviceManager.ts'; 101 + import { generateSNCode } from '/@/api/device/deviceManager';
94 import icon from '/@/assets/images/wz.png'; 102 import icon from '/@/assets/images/wz.png';
95 import { useDebounceFn } from '@vueuse/core'; 103 import { useDebounceFn } from '@vueuse/core';
  104 + import { validatorLongitude, validatorLatitude } from '/@/utils/rules';
  105 +
96 export default defineComponent({ 106 export default defineComponent({
97 components: { 107 components: {
98 BasicForm, 108 BasicForm,
@@ -115,6 +125,16 @@ @@ -115,6 +125,16 @@
115 }, 125 },
116 emits: ['next'], 126 emits: ['next'],
117 setup(props, { emit }) { 127 setup(props, { emit }) {
  128 + const redirectPosition = () => {
  129 + if (positionState.longitude && positionState.latitude) {
  130 + var pt = new BMap.Point(positionState.longitude, positionState.latitude);
  131 + getAddrByPoint(pt);
  132 + }
  133 + };
  134 + const rules: any = {
  135 + longitude: [{ required: true, validator: validatorLongitude, trigger: 'blur' }],
  136 + latitude: [{ required: true, validator: validatorLatitude, trigger: 'blur' }],
  137 + };
118 const devicePic = ref(''); 138 const devicePic = ref('');
119 const loading = ref(false); 139 const loading = ref(false);
120 140
@@ -202,9 +222,9 @@ @@ -202,9 +222,9 @@
202 geco.getLocation(point, function (res) { 222 geco.getLocation(point, function (res) {
203 positionState.marker.setPosition(point); //重新设置标注的地理坐标 223 positionState.marker.setPosition(point); //重新设置标注的地理坐标
204 positionState.map.panTo(point); //将地图的中心点更改为给定的点 224 positionState.map.panTo(point); //将地图的中心点更改为给定的点
205 - positionState.address = res.address; //记录该点的详细地址信息  
206 - positionState.longitude = point.lng; //记录当前坐标点  
207 - positionState.latitude = point.lat; 225 + positionState.address = res?.address; //记录该点的详细地址信息
  226 + positionState.longitude = point?.lng; //记录当前坐标点
  227 + positionState.latitude = point?.lat;
208 }); 228 });
209 } 229 }
210 230
@@ -378,6 +398,8 @@ @@ -378,6 +398,8 @@
378 debounceSearch, 398 debounceSearch,
379 generateSN, 399 generateSN,
380 loading, 400 loading,
  401 + rules,
  402 + redirectPosition,
381 }; 403 };
382 }, 404 },
383 }); 405 });
@@ -387,6 +409,7 @@ @@ -387,6 +409,7 @@
387 width: 450px; 409 width: 450px;
388 margin: 0 auto; 410 margin: 0 auto;
389 } 411 }
  412 +
390 :deep(.ant-radio-group) { 413 :deep(.ant-radio-group) {
391 width: 15vw; 414 width: 15vw;
392 } 415 }
@@ -4,6 +4,95 @@ import { findDictItemByCode } from '/@/api/system/dict'; @@ -4,6 +4,95 @@ import { findDictItemByCode } from '/@/api/system/dict';
4 import { MessageEnum } from '/@/enums/messageEnum'; 4 import { MessageEnum } from '/@/enums/messageEnum';
5 import { numberRule } from '/@/utils/rules'; 5 import { numberRule } from '/@/utils/rules';
6 6
  7 +import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
  8 +
  9 +export const step1Schemas: FormSchema[] = [
  10 + {
  11 + field: 'image',
  12 + label: '上传图片',
  13 + component: 'Input',
  14 + slot: 'imageSelect',
  15 + },
  16 + {
  17 + field: 'name',
  18 + label: '配置名称',
  19 + required: true,
  20 + component: 'Input',
  21 + componentProps() {
  22 + return {
  23 + disabled: false,
  24 + ength: 255,
  25 + placeholder: '请输入配置名称',
  26 + };
  27 + },
  28 + },
  29 + {
  30 + field: 'defaultRuleChainId',
  31 + label: '规则链',
  32 + component: 'ApiSelect',
  33 + componentProps: {
  34 + api: async () => {
  35 + const data = await deviceConfigGetRuleChain();
  36 + const returnData = data.map((m) => {
  37 + return {
  38 + getValueField: m.name,
  39 + getKeyField: m.id.id,
  40 + };
  41 + });
  42 + return returnData;
  43 + },
  44 + labelField: 'getValueField',
  45 + valueField: 'getKeyField',
  46 + immediate: true,
  47 + },
  48 + },
  49 + {
  50 + field: 'defaultQueueName',
  51 + label: '处理队列',
  52 + component: 'ApiSelect',
  53 + componentProps: {
  54 + api: findDictItemByCode,
  55 + params: {
  56 + dictCode: 'queen_execute_sequence',
  57 + },
  58 + labelField: 'itemText',
  59 + valueField: 'itemValue',
  60 + resultField: 'items',
  61 + },
  62 + },
  63 +
  64 + {
  65 + label: '描述',
  66 + field: 'description',
  67 + component: 'InputTextArea',
  68 + componentProps: {
  69 + maxLength: 255,
  70 + placeholder: '请输入描述',
  71 + },
  72 + },
  73 +];
  74 +
  75 +export const step2Schemas: FormSchema[] = [
  76 + {
  77 + field: 'transportType',
  78 + component: 'Select',
  79 + label: '接入协议',
  80 + defaultValue: 'DEFAULT',
  81 + componentProps() {
  82 + return {
  83 + options: [
  84 + { label: '默认', value: 'DEFAULT' },
  85 + { label: 'MQTT', value: 'MQTT' },
  86 + { label: 'CoAP', value: 'COAP' },
  87 + { label: 'LWM2M', value: 'LWM2M' },
  88 + { label: 'SNMP', value: 'SNMP' },
  89 + ],
  90 + };
  91 + },
  92 + colProps: { span: 10 },
  93 + },
  94 +];
  95 +
7 export const columns: BasicColumn[] = [ 96 export const columns: BasicColumn[] = [
8 { 97 {
9 title: '配置图片', //图标 98 title: '配置图片', //图标
@@ -34,7 +34,7 @@ @@ -34,7 +34,7 @@
34 <script lang="ts" setup> 34 <script lang="ts" setup>
35 import { ref } from 'vue'; 35 import { ref } from 'vue';
36 import { BasicForm, useForm } from '/@/components/Form'; 36 import { BasicForm, useForm } from '/@/components/Form';
37 - import { step1Schemas } from './data'; 37 + import { step1Schemas } from '../device.profile.data';
38 import { uploadApi } from '/@/api/personal/index'; 38 import { uploadApi } from '/@/api/personal/index';
39 import { Upload } from 'ant-design-vue'; 39 import { Upload } from 'ant-design-vue';
40 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'; 40 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
1 <template> 1 <template>
2 - <div class="step2-style"> 2 + <div
  3 + class="step2-style"
  4 + :style="[isMqttType == 'DEFAULT' ? { minHeight: 0 + 'px' } : { minHeight: 800 + 'px' }]"
  5 + >
3 <div 6 <div
4 - style="margin-top: 0.1vh; height: 15vh"  
5 :style="[ 7 :style="[
6 isMqttType == 'MQTT' 8 isMqttType == 'MQTT'
7 ? { minHeight: 45 + 'vh' } 9 ? { minHeight: 45 + 'vh' }
@@ -40,7 +42,7 @@ @@ -40,7 +42,7 @@
40 <script lang="ts" setup> 42 <script lang="ts" setup>
41 import { reactive, ref, onUnmounted, nextTick } from 'vue'; 43 import { reactive, ref, onUnmounted, nextTick } from 'vue';
42 import { BasicForm, useForm } from '/@/components/Form'; 44 import { BasicForm, useForm } from '/@/components/Form';
43 - import { step2Schemas } from './data'; 45 + import { step2Schemas } from '../device.profile.data';
44 import { Button } from '/@/components/Button'; 46 import { Button } from '/@/components/Button';
45 import MqttCpns from './cpns/mqtt/Mqtt.vue'; 47 import MqttCpns from './cpns/mqtt/Mqtt.vue';
46 import CoapCpns from './cpns/coap/Coap.vue'; 48 import CoapCpns from './cpns/coap/Coap.vue';
@@ -52,7 +54,7 @@ @@ -52,7 +54,7 @@
52 const coapRef = ref<InstanceType<typeof CoapCpns>>(); 54 const coapRef = ref<InstanceType<typeof CoapCpns>>();
53 const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>(); 55 const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
54 const snmpRef = ref<InstanceType<typeof SnmpCpns>>(); 56 const snmpRef = ref<InstanceType<typeof SnmpCpns>>();
55 - const isMqttType = ref(''); 57 + const isMqttType = ref('DEFAULT');
56 let step2Data = reactive({ 58 let step2Data = reactive({
57 transportConfiguration: {}, 59 transportConfiguration: {},
58 }); 60 });
@@ -75,7 +77,7 @@ @@ -75,7 +77,7 @@
75 }; 77 };
76 78
77 const resetFormData = () => { 79 const resetFormData = () => {
78 - isMqttType.value = ''; 80 + isMqttType.value = 'DEFAULT';
79 resetFields(); 81 resetFields();
80 nextTick(() => { 82 nextTick(() => {
81 mqttRef.value?.resetFormData(); 83 mqttRef.value?.resetFormData();
@@ -107,7 +109,7 @@ @@ -107,7 +109,7 @@
107 }); 109 });
108 }); 110 });
109 onUnmounted(() => { 111 onUnmounted(() => {
110 - isMqttType.value = ''; 112 + isMqttType.value = 'DEFAULT';
111 }); 113 });
112 const getFormData = async () => { 114 const getFormData = async () => {
113 const val = await validate(); 115 const val = await validate();
1 -import { FormSchema } from '/@/components/Form';  
2 -import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';  
3 -import { findDictItemByCode } from '/@/api/system/dict';  
4 -  
5 -export const step1Schemas: FormSchema[] = [  
6 - {  
7 - field: 'image',  
8 - label: '上传图片',  
9 - component: 'Input',  
10 - slot: 'imageSelect',  
11 - },  
12 - {  
13 - field: 'name',  
14 - label: '配置名称',  
15 - required: true,  
16 - component: 'Input',  
17 - componentProps() {  
18 - return {  
19 - disabled: false,  
20 - ength: 255,  
21 - placeholder: '请输入配置名称',  
22 - };  
23 - },  
24 - },  
25 - {  
26 - field: 'defaultRuleChainId',  
27 - label: '规则链',  
28 - component: 'ApiSelect',  
29 - componentProps: {  
30 - api: async () => {  
31 - const data = await deviceConfigGetRuleChain();  
32 - const returnData = data.map((m) => {  
33 - return {  
34 - getValueField: m.name,  
35 - getKeyField: m.id.id,  
36 - };  
37 - });  
38 - return returnData;  
39 - },  
40 - labelField: 'getValueField',  
41 - valueField: 'getKeyField',  
42 - immediate: true,  
43 - },  
44 - },  
45 - {  
46 - field: 'defaultQueueName',  
47 - label: '处理队列',  
48 - component: 'ApiSelect',  
49 - componentProps: {  
50 - api: findDictItemByCode,  
51 - params: {  
52 - dictCode: 'queen_execute_sequence',  
53 - },  
54 - labelField: 'itemText',  
55 - valueField: 'itemValue',  
56 - resultField: 'items',  
57 - },  
58 - },  
59 -  
60 - {  
61 - label: '描述',  
62 - field: 'description',  
63 - component: 'InputTextArea',  
64 - componentProps: {  
65 - maxLength: 255,  
66 - placeholder: '请输入描述',  
67 - },  
68 - },  
69 -];  
70 -  
71 -export const step2Schemas: FormSchema[] = [  
72 - {  
73 - field: 'transportType',  
74 - component: 'Select',  
75 - label: '接入协议',  
76 - defaultValue: 'DEFAULT',  
77 - componentProps() {  
78 - return {  
79 - options: [  
80 - { label: '默认', value: 'DEFAULT' },  
81 - { label: 'MQTT', value: 'MQTT' },  
82 - { label: 'CoAP', value: 'COAP' },  
83 - { label: 'LWM2M', value: 'LWM2M' },  
84 - { label: 'SNMP', value: 'SNMP' },  
85 - ],  
86 - };  
87 - },  
88 - colProps: { span: 10 },  
89 - },  
90 -];