设备配置增加规则验证、组件是否显示&修改设备节点添加、修改

src/views/edgeServer/edgeServerConfigure/device.vue

@@ -44,21 +44,10 @@
           :defaultFormData="defaultFormData" />
       </el-card>
       <el-card class="box-card" style="margin-top:5px;">
-        <d2-crud ref="d2Crud"
+        <d2-crud ref="d2Crud" :columns="columns" :data="devicePointData" :rowHandle="rowHandle" add-title="新增"
-        :columns="columns"
+          edit-title="绑定" :add-template="addTemplate" :add-rules="addRules" :form-options="formOptions"
-        :data="devicePointData"
+          @row-add="addDevicePoint" @row-edit="devicePointBandingNode" @row-remove="delDevicePoint"
-        :rowHandle="rowHandle"
+          @dialog-cancel="handleDialogCancel" @banding="bandingNodeTemplate" @cell-data-change="handleCellDataChange"
-        add-title="新增"
-        edit-title="绑定"
-        :add-template="addTemplate"
-        :add-rules="addRules"
-        :form-options="formOptions"
-        @row-add="addDevicePoint"
-        @row-edit="devicePointBandingNode"
-        @row-remove="delDevicePoint"
-        @dialog-cancel="handleDialogCancel"
-        @banding="bandingNodeTemplate"
-        @cell-data-change="handleCellDataChange"
           @form-data-change="handleFormDataChange">
           <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
         </d2-crud>
@@ -115,10 +104,33 @@ export default {
         },
         {
           title: '类型',
-          key: '@RequestType',
+          key: '@DataTypeCode',
           component: {
-            name: 'el-input',
+            name: 'el-select',
-            size: 'small'
+            size: 'small',
+            options: [
+              {
+                value: 'string',
+                label: 'string (字符串)'
+              },
+              {
+                value: 'int',
+                label: 'int (整数)'
+              },
+              {
+                value: 'float',
+                label: 'float (浮点数)'
+              },
+              {
+                value: 'short',
+                label: 'short'
+              },
+
+              {
+                value: 'bool',
+                label: 'bool (逻辑值)'
+              }
+            ]
           }
         },
         {
@@ -210,12 +222,45 @@ export default {
         '@Name': {
           title: '名称'
         },
-
         '@Address': {
           title: '地址'
         },
+        '@DisplayName': {
+          title: '显示名称'
+        },
         '@RequestType': {
-          title: '类型'
+          title: '请求类型'
+        },
+        '@DataTypeCode': {
+          title: '数据类型',
+          component: {
+            name: 'el-select',
+
+            options: [
+              {
+                value: 'string',
+                label: 'string (字符串)'
+              },
+              {
+                value: 'int',
+                label: 'int (整数)'
+              },
+              {
+                value: 'float',
+                label: 'float (浮点数)'
+              },
+              {
+                value: 'short',
+                label: 'short'
+              },
+
+              {
+                value: 'bool',
+                label: 'bool (逻辑值)'
+              }
+            ],
+            span: 12
+          }
         },
         '@RequestInterval': {
           title: '采集周期(ms)'
@@ -232,11 +277,12 @@ export default {
       },
       addRules: {
         '@Name': [{ required: true, type: 'string', message: '请输入名称', trigger: 'blur' }],
-        '@Address': [{ required: true, message: '请输入地址', trigger: 'blur' }],
+        '@Address': [{ required: true, type: 'string', message: '请输入地址', trigger: 'blur' }],
-        '@RequestType': [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }],
+        '@DisplayName': [{ required: true, type: 'string', message: '请输入显示名称', trigger: 'blur' }],
+        '@RequestType': [{ required: true, type: 'string', message: '请输入请求类型', trigger: 'blur' }],
+        '@DataTypeCode': [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }],
         '@RequestInterval': [{ required: true, message: '请输入采集周期(ms)', trigger: 'blur' }],
-        '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }],
+        '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }]
-        '@Value': [{ required: true, message: '请输入当前值', trigger: 'blur' }]
       },
       serverData: {},
       devicePointData: [],
@@ -402,9 +448,7 @@ export default {
       })
     },
     async delDevice() {
-      const url = 'http://8.sctmes.com:20522'
+      let deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456')
-      // 'http://'+ this.serverData.url +':'+ this.serverData.port
-      const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456')
       let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode
       if (deviceNode !== undefined && isArray(deviceNode)) {
         deviceNode = filter(deviceNode, item => {
@@ -414,8 +458,9 @@ export default {
       } else {
         unset(deviceConfigure, 'Content.Settings.GroupNode[0].DeviceNode')
       }
+
       try {
-        await this.$api.SET_HSLSERVER_CONFIGURE(url, 'admin', '123456', { data: deviceConfigure.Content })
+        await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456', { data: deviceConfigure.Content })
         await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id })
         this.$message({
           message: '删除设备成功',
@@ -443,7 +488,9 @@ export default {
       this.formOptions.saveLoading = false
     },
     async delDevicePoint({ index, row }, done) {
-      this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData.splice(index, 1)
+      this.devicePointData.splice(index, 1)
+      this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
+
       await this.setDeviceConfigure()
       done()
     },
@@ -462,9 +509,13 @@ export default {
     },
     async setDeviceConfigure() {
       try {
-        const url = 'http://8.sctmes.com:20522'
+        // 验证表单
-        // 'http://'+ this.serverData.url +':'+ this.serverData.port
+        this.$refs.deviceConfigure.$refs.form.validate((valid) => {
-        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456')
+          if (!valid) {
+            return false
+          }
+        })
+        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456')
         if (this.devicePointData.length > 0) {
           const devicePointData = this.devicePointData
           each(devicePointData, (item) => {
@@ -478,7 +529,6 @@ export default {
           this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = devicePointData
         }
         this.$refs.deviceConfigure.deviceConfigureModelValue['@Name'] = this.deviceData[this.deviceActiveStatus].name
-
         let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode || []
         let isExist = false
         if (deviceNode !== undefined) {
@@ -495,10 +545,9 @@ export default {
         if (!isExist) {
           deviceNode.push(this.$refs.deviceConfigure.deviceConfigureModelValue)
         }
-
         deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode
+        await this.$api.SET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, 'admin', '123456', { data: deviceConfigure.Content })
         this.$refs.deviceConfigure.deviceConfigureModelValue.DeviceTypeName = this.$refs.deviceConfigure.defaultDeviceTypeNameValue
-        await this.$api.SET_HSLSERVER_CONFIGURE(url, 'admin', '123456', { data: deviceConfigure.Content })
         const data = {
           action: 'update_device',
           conf: JSON.stringify(this.$refs.deviceConfigure.deviceConfigureModelValue),

src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-form :inline="true" size="mini" label-position="right" class="demo-form-inline">
+    <el-form :inline="true" size="mini" :model="deviceConfigureModelValue" ref="form" :rules="rules"
+      label-position="right" class="demo-form-inline">
       <el-form-item label="设备">
         <el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择">
           <el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
@@ -8,7 +9,8 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item v-for="(item, i) in deviceConfigureFormItem" :key="i" :label="item.labelName">
+      <template v-for="(item, i) in deviceConfigureFormItem">
+        <el-form-item :key="i" :label="item.labelName" :prop="item.key" v-if="!item.isShow">
           <template v-if="item.type === 'text'">
             <el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled"
               :placeholder="item.placeholder"></el-input>
@@ -23,18 +25,14 @@
           </template>
 
           <template v-if="item.type === 'time'">
-          <el-date-picker
+            <el-date-picker v-model='deviceConfigureModelValue[item.key]' type="datetime"
-          v-model='deviceConfigureModelValue[item.key]'
+              :placeholder="item.placeholder" value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss'
-          type="datetime"
+              :disabled="item.disabled" style="width:180px">
-          :placeholder="item.placeholder"
-          value-format='yyyy-MM-dd HH:mm:ss'
-          format='yyyy-MM-dd HH:mm:ss'
-          :disabled="item.disabled"
-          style="width:180px">
             </el-date-picker>
           </template>
 
         </el-form-item>
+      </template>
     </el-form>
   </div>
 </template>
@@ -79,6 +77,7 @@ export default {
       deviceConfigureFormItem: [],
       defaultDeviceTypeNameValue: '',
       deviceConfigureModelValue: {},
+      rules: {},
       deviceSelectedVlaue: '',
       deviceTypeData: [
       ]
@@ -88,13 +87,18 @@ export default {
     deviceChange (e) {
       // 获取所有字符串的key 用于v-model渲染
       const deviceConfigureModelValue = {}
+      const rules = {}
       each(deviceConfigureFormItemData[e], (item) => {
         if (item.type === 'time') {
           deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date()
         } else {
           deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : ''
         }
+        if (item.rules !== undefined) {
+          rules[item.key] = item.rules
+        }
       })
+      this.rules = rules
       this.deviceConfigureModelValue = deviceConfigureModelValue
       this.deviceConfigureFormItem = deviceConfigureFormItemData[e]
     },