修改设备添加、删除，修复动态组件日期格式

src/views/edgeServer/edgeServerConfigure/device.vue

@@ -1,81 +1,85 @@
 <template>
-    <el-container>
-        <el-aside width="15%">
-            <div class="menu-box">
-                <el-card class="box-card">
-                    <div slot="header" class="menu-header">
-                        <div class="header-title">设备</div>
-                        <el-dropdown size="small" style="vertical-align: middle;" @command="handleCommand">
-                            <el-button type="primary" round >
-                                <i class="el-icon-s-tools" style="font-size:14px;"></i><i
-                                    class="el-icon-arrow-down el-icon--right" style="font-size:14px;"></i>
-                            </el-button>
-                            <el-dropdown-menu slot="dropdown">
-                                <el-dropdown-item command="add">新加设备</el-dropdown-item>
-                                <el-dropdown-item command="del">删除设备</el-dropdown-item>
-                                <el-dropdown-item>设备重启</el-dropdown-item>
-                                <el-dropdown-item>导入配置</el-dropdown-item>
-                                <el-dropdown-item>导出配置</el-dropdown-item>
-                            </el-dropdown-menu>
-                        </el-dropdown>
-                    </div>
+  <el-container>
+    <el-aside width="15%">
+      <div class="menu-box">
+        <el-card class="box-card">
+          <div slot="header" class="menu-header">
+            <div class="header-title">设备</div>
+            <el-dropdown size="small" style="vertical-align: middle;" @command="handleCommand">
+              <el-button type="primary" round>
+                <i class="el-icon-s-tools" style="font-size:14px;"></i><i class="el-icon-arrow-down el-icon--right"
+                  style="font-size:14px;"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="add">新加设备</el-dropdown-item>
+                <el-dropdown-item command="del">删除设备</el-dropdown-item>
+                <el-dropdown-item>设备重启</el-dropdown-item>
+                <el-dropdown-item>导入配置</el-dropdown-item>
+                <el-dropdown-item>导出配置</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
 
-                    <el-menu :style="{ 'borderRight': 'none' }" :defaultActive="deviceActiveStatus"
-                        @select="getDeviceConfigure">
-                        <el-menu-item class="serve-item" shadow="always" v-for="(item, i) in deviceData" :key="i"
-                            :index="i + ''">
-                            <div style="position:relative;">
-                                <div style="display:inline-block;">{{ item.name }}</div>
-                                <div
-                                    :class="{ 'device-status': true, 'device-status-online': item.status === 1, 'device-status-offline': item.status === 0 }">
-                                </div>
-                            </div>
-                        </el-menu-item>
-                    </el-menu>
-
-                </el-card>
-            </div>
-        </el-aside>
-        <el-main :style="{ padding: '10px' }">
-            <el-card class="box-card">
-                <div slot="header" style=" position: relative;">
-                    <div class="header-title">设备配置</div>
-                    <el-button class="header-button" type="primary" @click="setDeviceConfigure">应用</el-button>
+          <el-menu :style="{ 'borderRight': 'none' }" :defaultActive="deviceActiveStatus" @select="getDeviceConfigure">
+            <el-menu-item class="serve-item" shadow="always" v-for="(item, i) in deviceData" :key="i" :index="i + ''">
+              <div style="position:relative;">
+                <div style="display:inline-block;">{{ item.name }}</div>
+                <div
+                  :class="{ 'device-status': true, 'device-status-online': item.status === 1, 'device-status-offline': item.status === 0 }">
                 </div>
-                <device-configure ref="deviceConfigure" :defaultDeviceName="defaultDeviceName" :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"
-                @form-data-change="handleFormDataChange">
-                <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
-                </d2-crud>
-            </el-card>
-        </el-main>
+              </div>
+            </el-menu-item>
+          </el-menu>
 
-    </el-container>
+        </el-card>
+      </div>
+    </el-aside>
+    <el-main :style="{ padding: '10px' }">
+      <el-card class="box-card">
+        <div slot="header" style=" position: relative;">
+          <div class="header-title">设备配置</div>
+          <el-button class="header-button" type="primary" @click="setDeviceConfigure">应用</el-button>
+        </div>
+        <device-configure ref="deviceConfigure" :defaultDeviceName="defaultDeviceName"
+          :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"
+        @form-data-change="handleFormDataChange">
+          <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+        </d2-crud>
+      </el-card>
+    </el-main>
+
+  </el-container>
 </template>
 
 <script>
 
-import { each, assign } from 'lodash'
+import { each, assign, unset, filter, isArray, map } from 'lodash'
+
 export default {
   props: {
-    server_id: {
-      default: 0
+    server: {
+      default: {
+        id: 0,
+        url: '',
+        port: ''
+      }
     }
   },
   components: {
@@ -93,7 +97,6 @@ export default {
           title: '名称',
           key: '@Name',
           component: {
-
             size: 'small'
           }
         },
@@ -235,7 +238,7 @@ export default {
         '@Length': [{ required: true, message: '请输入长度', trigger: 'blur' }],
         '@Value': [{ required: true, message: '请输入当前值', trigger: 'blur' }]
       },
-      serverId: 0,
+      serverData: {},
       devicePointData: [],
       nodeCodeData: [],
       workingSubclasses: [],
@@ -248,9 +251,9 @@ export default {
     }
   },
   watch: {
-    server_id: {
+    server: {
       handler (val) {
-        this.serverId = val
+        this.serverData = val
         this.getDevice()
       },
       immediate: true
@@ -273,9 +276,10 @@ export default {
       this.devicePointData[rowIndex] = row
       this.setDeviceConfigure()
     },
-    bandingNodeTemplate () {
+    bandingNodeTemplate ({ index }) {
       this.$refs.d2Crud.showDialog({
         mode: 'edit',
+        rowIndex: index,
         template: {
           workingSubclass: {
             title: '工序编码',
@@ -348,7 +352,7 @@ export default {
     },
     async getDevice () {
       try {
-        this.deviceData = await this.$api.GET_DEVICE(this.serverId)
+        this.deviceData = await this.$api.GET_DEVICE(this.serverData.id)
         if (this.deviceData.length > 0) {
           this.getDeviceConfigure(this.deviceActiveStatus)
         }
@@ -361,10 +365,11 @@ export default {
       this.devicePointData = [] // 当切换设备时把保存configure、point的数据清空
       this.defaultDeviceName = ''
       const deviceData = await this.$api.GET_DEVICE_CONFIGURE(this.deviceData[e].id)
+
       if (deviceData[0].conf) {
         const conf = JSON.parse(deviceData[0].conf)
-        if (conf['@Name'] !== undefined) {
-          this.defaultDeviceName = conf['@Name']
+        if (conf.DeviceTypeName !== undefined) {
+          this.defaultDeviceName = conf.DeviceTypeName
           this.defaultFormData = conf
         }
         // 获取point信息
@@ -388,7 +393,7 @@ export default {
         inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
         inputErrorMessage: '请输入设备名称'
       }).then(({ value }) => {
-        this.$api.ADD_DEVICE({ action: 'add_device', name: value, server_id: this.serverId })
+        this.$api.ADD_DEVICE({ action: 'add_device', name: value, server_id: this.serverData.id })
         that.getDevice()
         this.$message({
           message: '新加设备成功',
@@ -397,7 +402,20 @@ 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 deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode
+      if (deviceNode !== undefined && isArray(deviceNode)) {
+        deviceNode = filter(deviceNode, item => {
+          return item['@Name'] === this.deviceData[this.deviceActiveStatus].name ? null : item
+        })
+        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode
+      } else {
+        unset(deviceConfigure, 'Content.Settings.GroupNode[0].DeviceNode')
+      }
       try {
+        await this.$api.SET_HSLSERVER_CONFIGURE(url, 'admin', '123456', { data: deviceConfigure.Content })
         await this.$api.DEL_DEVICE({ action: 'remove_device', id: this.deviceData[this.deviceActiveStatus].id })
         this.$message({
           message: '删除设备成功',
@@ -410,7 +428,7 @@ export default {
     },
     async addDevicePoint (row, done) {
       this.formOptions.saveLoading = true
-      if (!this.$refs.defaultDeviceTypeNameValue) {
+      if (!this.$refs.deviceConfigure.defaultDeviceTypeNameValue) {
         this.$message({
           message: '请先应用设备配置',
           type: 'error'
@@ -430,7 +448,7 @@ export default {
       done()
     },
     async getDevicePoint () {
-      const data = { action: 'add_node', server_id: this.serverId, device_id: this.deviceData[this.deviceActiveStatus].id }
+      const data = { action: 'add_node', server_id: this.serverData.id, device_id: this.deviceData[this.deviceActiveStatus].id }
       try {
         this.devicePointData = await this.$api.GET_DEVICE_POINT(data)
       } catch (e) {
@@ -444,19 +462,48 @@ export default {
     },
     async setDeviceConfigure () {
       try {
-        const deviceConfigure = await this.$api.GET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456')
+        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')
         if (this.devicePointData.length > 0) {
-          this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = this.devicePointData
+          const devicePointData = this.devicePointData
+          each(devicePointData, (item) => {
+            unset(item, 'id')
+            unset(item, 'showBindButton')
+            unset(item, 'showCopyButton')
+            unset(item, 'showRemoveButton')
+            unset(item, 'showSendButton')
+            item['@Binding'] = item['@Binding'] || ''
+          })
+          this.$refs.deviceConfigure.deviceConfigureModelValue.RequestNode = devicePointData
         }
-        console.log(this.$refs.deviceConfigure.deviceConfigureModelValue)
-        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = [this.$refs.deviceConfigure.deviceConfigureModelValue]
-        await this.$api.SET_HSLSERVER_CONFIGURE('http://8.sctmes.com:20522', 'admin', '123456', { data: deviceConfigure.Content })
+        this.$refs.deviceConfigure.deviceConfigureModelValue['@Name'] = this.deviceData[this.deviceActiveStatus].name
+
+        let deviceNode = deviceConfigure.Content.Settings.GroupNode[0].DeviceNode || []
+        let isExist = false
+        if (deviceNode !== undefined) {
+          deviceNode = isArray(deviceNode) ? deviceNode : [deviceNode]
+          deviceNode = map(deviceNode, (item) => {
+            if (item['@Name'] === this.deviceData[this.deviceActiveStatus].name) {
+              isExist = true
+              item = this.$refs.deviceConfigure.deviceConfigureModelValue
+            }
+            return item
+          })
+        }
+
+        if (!isExist) {
+          deviceNode.push(this.$refs.deviceConfigure.deviceConfigureModelValue)
+        }
+
+        deviceConfigure.Content.Settings.GroupNode[0].DeviceNode = deviceNode
+        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),
           id: this.deviceData[this.deviceActiveStatus].id
         }
-
         this.$api.SET_DEVICE_CONFIGURE(data)
         this.$message({
           message: '操作成功',
@@ -467,7 +514,7 @@ export default {
       }
     },
     getDeviceStatus () {
-      this.$api.GET_DEVICE_STATUS(this.serverId).then(res => {
+      this.$api.GET_DEVICE_STATUS(this.serverData.id).then(res => {
         each(this.deviceData, (item) => {
           if (item.id in res.device_status) {
             item.status = res.device_status[item.id]
@@ -480,75 +527,75 @@ export default {
   mounted () {
     this.getDevice()
     this.getworkingSubclasses()
-    setInterval(this.getDeviceStatus, 2000)
+    // setInterval(this.getDeviceStatus, 2000)
   }
 }
 </script>
 
 <style scoped>
 .menu-box {
-    box-sizing: border-box;
-    padding: 10px;
-    vertical-align: middle;
+  box-sizing: border-box;
+  padding: 10px;
+  vertical-align: middle;
 }
 
 .el-dropdown {
-    vertical-align: top;
+  vertical-align: top;
 }
 
 .el-dropdown+.el-dropdown {
-    margin-left: 15px;
+  margin-left: 15px;
 }
 
 .el-icon-arrow-down {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 .menu-header {
-    position: relative;
+  position: relative;
 
 }
 
 .header-title {
-    width: 60%;
-    display: inline-block;
-    font-weight: bold;
-    font-size: 20px;
-    color: black;
-    vertical-align: middle;
+  width: 60%;
+  display: inline-block;
+  font-weight: bold;
+  font-size: 20px;
+  color: black;
+  vertical-align: middle;
 }
 
 .header-button {
-    float: right;
-    vertical-align: middle;
+  float: right;
+  vertical-align: middle;
 }
 
 .serve-item {
-    border: none;
-    margin-bottom: 10px;
-    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-    overflow: hidden;
-    outline: 0;
-    border-radius: 4px;
+  border: none;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  overflow: hidden;
+  outline: 0;
+  border-radius: 4px;
 
 }
 
 .device-status {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
 
-    right: 0;
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
+  right: 0;
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
 }
 
 .device-status-online {
-    background-color: #67c23a;
+  background-color: #67c23a;
 }
 
 .device-status-offline {
-    background-color: #ccc;
+  background-color: #ccc;
 }
 </style>