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

2022-08-18 14:21:08 +08:00
parent aca5946dc2
commit bf18a739ae
3 changed files with 557 additions and 236 deletions
--- a/src/views/edgeServer/edgeServerConfigure/device.vue
+++ b/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"
-        :columns="columns"
-        :data="devicePointData"
-        :rowHandle="rowHandle"
-        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"
+        <d2-crud ref="d2Crud" :columns="columns" :data="devicePointData" :rowHandle="rowHandle" 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',
-            size: 'small'
+            name: 'el-select',
+            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' }],
-        '@RequestType': [{ required: true, type: 'string', message: '请选择类型', trigger: 'blur' }],
+        '@Address': [{ 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' }],
-        '@Value': [{ required: true, message: '请输入当前值', trigger: 'blur' }]
+        '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }]
      },
      serverData: {},
      devicePointData: [],
@@ -402,9 +448,7 @@ export default {
      })
    },
    async delDevice() {
-      const url = 'http://8.sctmes.com:20522'
-      // 'http://'+ this.serverData.url +':'+ this.serverData.port
-      const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456')
+      let deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://' + this.serverData.url + ':' + this.serverData.port, '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
-        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE(url, 'admin', '123456')
+        // 验证表单
+        this.$refs.deviceConfigure.$refs.form.validate((valid) => {
+          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),
--- a/src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue
+++ b/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
-          v-model='deviceConfigureModelValue[item.key]'
-          type="datetime"
-          :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 v-model='deviceConfigureModelValue[item.key]' type="datetime"
+              :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]
    },
--- a/src/views/edgeServer/edgeServerConfigure/deviceSetting/index.json
+++ b/src/views/edgeServer/edgeServerConfigure/deviceSetting/index.json