修改能源设施

ems-ui/src/api/basecfg/emsfacs.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request from '@/utils/request';
 
 // 查询能源设施/系统列表
 export function listFacs(query) {
@@ -6,7 +6,7 @@ export function listFacs(query) {
     url: '/ems/basecfg/emsfacs/list',
     method: 'get',
     params: query
-  })
+  });
 }
 
 // 查询能源设施/系统列表
@@ -14,7 +14,7 @@ export function listAllFacs(areaCode) {
   return request({
     url: '/ems/basecfg/emsfacs/listall?refArea=' + areaCode,
     method: 'get'
-  })
+  });
 }
 
 // 查询能源设施/系统详细
@@ -22,7 +22,7 @@ export function getFacs(id) {
   return request({
     url: '/ems/basecfg/emsfacs/' + id,
     method: 'get'
-  })
+  });
 }
 
 // 新增能源设施/系统
@@ -31,7 +31,7 @@ export function addFacs(data) {
     url: '/ems/basecfg/emsfacs',
     method: 'post',
     data: data
-  })
+  });
 }
 
 // 修改能源设施/系统
@@ -40,7 +40,7 @@ export function updateFacs(data) {
     url: '/ems/basecfg/emsfacs',
     method: 'put',
     data: data
-  })
+  });
 }
 
 // 删除能源设施/系统
@@ -48,5 +48,39 @@ export function delFacs(id) {
   return request({
     url: '/ems/basecfg/emsfacs/' + id,
     method: 'delete'
-  })
+  });
+}
+// 查询子表数据
+export function getSubtable(type, params) {
+  return request({
+    url: `/ems/basecfg/emsfacs/${type}/list`,
+    method: 'get',
+    params
+  });
+}
+
+// 新增子表数据
+export function addSubtable(type, data) {
+  return request({
+    url: `/ems/basecfg/emsfacs/${type}`,
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改子表数据
+export function updateSubtable(type, data) {
+  return request({
+    url: `/ems/basecfg/emsfacs/${type}`,
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除子表数据
+export function delSubtable(type, id) {
+  return request({
+    url: `/ems/basecfg/emsfacs/${type}/` + id,
+    method: 'delete'
+  });
 }

ems-ui/src/assets/styles/element-ui.scss

@@ -20,7 +20,9 @@
     margin-right: 0px;
   }
 }
-
+.deleteBtn{
+  color: red!important;
+}
 .small-padding {
   .cell {
     padding-left: 5px;

ems-ui/src/views/basecfg/emsfacs/index.vue

@@ -63,10 +63,12 @@
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['basecfg:emsfacs:edit']">
+              <el-button size="mini" type="text" @click="handleDetail(scope.row)" v-hasPermi="['basecfg:emsfacs:edit']">
+                详情</el-button>
+              <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['basecfg:emsfacs:edit']">
                 修改</el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                v-hasPermi="['basecfg:emsfacs:remove']">删除</el-button>
+              <el-button size="mini" type="text" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['basecfg:emsfacs:remove']">
+                删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -75,7 +77,7 @@
           @pagination="getList" />
 
         <!-- 添加或修改能源设施/系统对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+        <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="归属区域" prop="refArea">
               <treeselect v-model="form.refArea" :options="areaOptions" :show-count="true" placeholder="请选择归属园区" />
@@ -87,54 +89,20 @@
               <el-input v-model="form.facsName" placeholder="请输入设施名称" />
             </el-form-item>
             <el-form-item label="设施分类" prop="facsType">
-              <el-select v-model="form.facsType" @change="handleFacsTypeChange">
+              <el-select v-model="form.facsType" @change="handleFacsTypeChange" style="width:100%">
                 <el-option v-for="item in facsTypeOptions" :label="item.name" :value="item.code" :key="item.code" />
               </el-select>
             </el-form-item>
             <el-form-item label="设施子类" prop="facsSubtype">
-              <el-select v-model="form.facsSubtype">
+              <el-select v-model="form.facsSubtype" style="width:100%">
                 <el-option v-for="item in facsSubTypeOptions" :label="item.name" :value="item.code" :key="item.code" />
               </el-select>
             </el-form-item>
             <el-form-item label="启用状态" prop="enable">
-              <el-select v-model="form.enable">
+              <el-select v-model="form.enable" style="width:100%">
                 <el-option v-for="item in enableOptions" :label="item.name" :value="item.code" :key="item.code" />
               </el-select>
             </el-form-item>
-            <el-form-item label="设施属性" prop="subtypeList">
-              <el-table class="sub-table" v-loading="loading" :data="form.facsAttrs" max-height="200px">
-                <el-table-column label="属性名称" align="center" prop="attrName">
-                  <template slot-scope="scope">
-                    <el-input size="mini" v-model="scope.row.attrName" placeholder="属性名称" />
-                  </template>
-                </el-table-column>
-                <el-table-column label="属性描述" align="center" prop="attrDesc" >
-                   <template slot-scope="scope">
-                    <el-input size="mini" v-model="scope.row.attrDesc" placeholder="属性描述" />
-                  </template>
-                </el-table-column>
-                <el-table-column label="属性值" align="center" prop="attrValue" >
-                   <template slot-scope="scope">
-                    <el-input size="mini" v-model="scope.row.attrValue" placeholder="属性值" />
-                  </template>
-                </el-table-column>
-                <el-table-column label="属性单位" align="center" prop="attrUnit" >
-                   <template slot-scope="scope">
-                    <el-input size="mini" v-model="scope.row.attrUnit" placeholder="属性单位" />
-                  </template>
-                </el-table-column>
-                <el-table-column align="center">
-                  <template slot="header">
-                    <div class="operateBtns" @click="addSub">
-                      <span>操作</span><i class="el-icon-circle-plus-outline"></i>
-                    </div>
-                  </template>
-                  <template slot-scope="scope">
-                    <i class="el-icon-delete" @click="deleteSub(scope.$index)"></i>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -143,11 +111,137 @@
         </el-dialog>
       </el-col>
     </el-row>
+    <el-drawer :title="curRow.facsName" size="80%" :visible.sync="showDrawer" direction="rtl">
+      <div class="drawer-content">
+        <el-tabs v-model="subKey">
+          <el-tab-pane label="属性定义" name="attr">
+            <el-button type="primary" class="mb8" icon="el-icon-plus" size="mini" @click="addSub">新增
+            </el-button>
+            <el-table class="sub-table" :data="attrData">
+              <el-table-column label="序号" align="center" type="index" />
+              <el-table-column label="属性名称" align="center" prop="attrName" />
+              <el-table-column label="属性描述" align="center" prop="attrDesc" />
+              <el-table-column label="属性值" align="center" prop="attrValue" />
+              <el-table-column label="属性单位" align="center" prop="attrUnit" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" @click="editSub(scope.row)">修改</el-button>
+                  <el-button size="mini" type="text" class="deleteBtn" @click="deleteSub(scope.row)">
+                    删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="能力定义" name="ability">
+            <el-button type="primary" class="mb8" icon="el-icon-plus" size="mini" @click="addSub">新增
+            </el-button>
+            <el-table class="sub-table" :data="abilityData">
+              <el-table-column label="序号" align="center" type="index" />
+              <el-table-column label="能力名称" align="center" prop="abilityName" />
+              <el-table-column label="下发参数" align="center" prop="abilityParam" />
+              <el-table-column label="描述" align="center" prop="abilityDesc" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" @click="editSub(scope.row)">
+                    修改</el-button>
+                  <el-button size="mini" type="text" class="deleteBtn" @click="deleteSub(scope.row)">
+                    删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="事件定义" name="event">
+            <el-button type="primary" class="mb8" icon="el-icon-plus" size="mini" @click="addSub">新增
+            </el-button>
+            <el-table class="sub-table" :data="eventData">
+              <el-table-column label="序号" align="center" type="index" />
+              <el-table-column label="事件名称" align="center" prop="eventName" />
+              <el-table-column label="事件类型" align="center" prop="eventType">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.eventType === 1 ? '消息上报' : '异常告警' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="事件代码" align="center" prop="eventCode" />
+              <el-table-column label="外部事件代码" align="center" prop="extEventCode" />
+              <el-table-column label="描述" align="center" prop="eventDesc" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" @click="editSub(scope.row)">修改</el-button>
+                  <el-button size="mini" type="text" class="deleteBtn" @click="deleteSub(scope.row)">
+                    删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-drawer>
+    <el-dialog :title="subTitle" :visible.sync="subDialogShow" width="450px" append-to-body>
+      <el-form v-if="subKey=='attr'" ref="subForm" :model="attrForm" label-width="100px">
+        <el-form-item label="属性名称" prop="attrName" required :rules="[{ required: true, message: '属性名称不能为空'}]">
+          <el-input v-model="attrForm.attrName" placeholder="请输入属性名称" />
+        </el-form-item>
+        <el-form-item label="属性值" prop="attrValue">
+          <el-input v-model="attrForm.attrValue" placeholder="请输入属性值" />
+        </el-form-item>
+        <el-form-item label="属性单位" prop="attrUnit">
+          <el-input v-model="attrForm.attrUnit" placeholder="请输入属性单位" />
+        </el-form-item>
+        <el-form-item label="描述" prop="attrDesc">
+          <el-input v-model="attrForm.attrDesc" placeholder="请输入描述" />
+        </el-form-item>
+      </el-form>
+      <el-form v-else-if="subKey=='ability'" ref="subForm" :model="abilityForm" label-width="100px">
+        <el-form-item label="能力名称" prop="abilityName" required :rules="[{ required: true, message: '能力名称不能为空'}]">
+          <el-input v-model="abilityForm.abilityName" placeholder="请输入能力名称" />
+        </el-form-item>
+        <el-form-item label="能力下发参数" prop="abilityParam">
+          <el-input v-model="abilityForm.abilityParam" placeholder="请输入能力下发参数" />
+        </el-form-item>
+        <el-form-item label="描述" prop="abilityDesc">
+          <el-input v-model="abilityForm.abilityDesc" placeholder="请输入描述" />
+        </el-form-item>
+      </el-form>
+      <el-form v-else-if="subKey=='event'" ref="subForm" :model="eventForm" label-width="100px">
+        <el-form-item label="事件名称" prop="eventName" required :rules="[{ required: true, message: '事件名称不能为空'}]">
+          <el-input v-model="eventForm.eventName" placeholder="请输入事件名称" />
+        </el-form-item>
+        <el-form-item label="事件类型" prop="eventType" required :rules="[{ required: true, message: '事件类型不能为空'}]">
+          <el-select v-model="eventForm.eventType" style="width:100%" placeholder="请选择事件类型">
+            <el-option label="消息上报" :value="1" />
+            <el-option label="异常告警" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件代码" prop="eventCode">
+          <el-input v-model="eventForm.eventCode" placeholder="请输入事件代码" />
+        </el-form-item>
+        <el-form-item label="外部事件代码" prop="extEventCode">
+          <el-input v-model="eventForm.extEventCode" placeholder="请输入外部事件代码" />
+        </el-form-item>
+        <el-form-item label="描述" prop="eventDesc">
+          <el-input v-model="eventForm.eventDesc" placeholder="请输入描述" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="subFormSubmit">确 定</el-button>
+        <el-button @click="subFormCancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listFacs, getFacs, delFacs, addFacs, updateFacs } from '@/api/basecfg/emsfacs'
+import {
+  listFacs,
+  getFacs,
+  delFacs,
+  addFacs,
+  updateFacs,
+  getSubtable,
+  addSubtable,
+  updateSubtable,
+  delSubtable
+} from '@/api/basecfg/emsfacs'
 import { listAllFacsType } from '@/api/basecfg/facstype'
 import { areaTreeSelect } from '@/api/basecfg/area'
 import Treeselect from '@riophae/vue-treeselect'
@@ -158,6 +252,7 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      showDrawer: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -200,8 +295,7 @@ export default {
         facsType: null,
         facsSubtype: null,
         enable: null,
-        refArea: null,
-        facsAttrs: null
+        refArea: null
       },
       // 表单参数
       form: {
@@ -213,8 +307,7 @@ export default {
         enable: null,
         refArea: null,
         createTime: null,
-        updateTime: null,
-        facsAttrs: []
+        updateTime: null
       },
       // 表单校验
       rules: {
@@ -222,6 +315,36 @@ export default {
         facsName: [{ required: true, message: '设施名称不能为空', trigger: 'blur' }],
         facsType: [{ required: true, message: '设施分类不能为空', trigger: 'change' }],
         refArea: [{ required: true, message: '归属区域代码不能为空', trigger: 'blur' }]
+      },
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+      attrForm: {
+        attrName: '',
+        attrValue: '',
+        attrUnit: '',
+        attrDesc: ''
+      },
+      abilityForm: {
+        abilityName: '',
+        abilityDesc: '',
+        abilityParam: ''
+      },
+      eventForm: {
+        eventName: '',
+        eventCode: '',
+        eventType: '',
+        extEventCode: '',
+        eventDesc: ''
+      },
+      subDialogShow: false,
+      subTitle: '',
+      subKey: 'attr',
+      subMap: {
+        attr: '属性',
+        ability: '能力',
+        event: '事件'
       }
     }
   },
@@ -231,18 +354,6 @@ export default {
     this.getAllFacsType()
   },
   methods: {
-    addSub() {
-      this.form.facsAttrs.push({
-        facsCode: this.form.facsCode,
-        attrName: '',
-        attrDesc: '',
-        attrValue: '',
-        attrUnit: ''
-      })
-    },
-    deleteSub(index) {
-      this.form.facsAttrs.splice(index, 1)
-    },
     /** 查询能源设施/系统列表 */
     getList() {
       this.loading = true
@@ -283,7 +394,7 @@ export default {
     handleAdd() {
       this.reset()
       this.open = true
-      this.title = '添加能源设施/系统'
+      this.title = '添加能源设施'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -292,7 +403,7 @@ export default {
       getFacs(id).then(response => {
         this.form = response.data
         this.open = true
-        this.title = '修改能源设施/系统'
+        this.title = '修改能源设施'
         this.handleFacsTypeChange(response.data.facsType)
       })
     },
@@ -316,11 +427,25 @@ export default {
         }
       })
     },
+    // 设配详情
+    handleDetail(row) {
+      this.showDrawer = true
+      this.curRow = row
+      this.subKey = this.$options.data().subKey
+      getFacs(row.id).then(({ code, data }) => {
+        if (code === 200) {
+          const { facsAttrs = [], facsAbilities = [], facsEvents = [] } = data
+          this.attrData = facsAttrs
+          this.abilityData = facsAbilities
+          this.eventData = facsEvents
+        }
+      })
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
       this.$modal
-        .confirm('是否确认删除能源设施/系统编号为"' + ids + '"的数据项？')
+        .confirm('是否确认删除能源设施编号为"' + ids + '"的数据项？')
         .then(function() {
           return delFacs(ids)
         })
@@ -370,6 +495,67 @@ export default {
         }
       })
       this.facsSubTypeOptions = obj[code] || []
+    },
+    getSubtableList() {
+      getSubtable(this.subKey, { facsCode: this.curRow.facsCode }).then(({ code, rows }) => {
+        if (code === 200) {
+          this[`${this.subKey}Data`] = rows
+        }
+      })
+    },
+    addSub() {
+      this.subDialogShow = true
+      this.subTitle = `新增${this.subMap[this.subKey]}`
+    },
+    editSub(row) {
+      this.subDialogShow = true
+      this.subTitle = `修改${this.subMap[this.subKey]}`
+      this[`${this.subKey}Form`] = row
+    },
+    deleteSub(row) {
+      this.$modal.confirm('是否确认删除').then(() => {
+        delSubtable(this.subKey, row.id).then(({ code }) => {
+          if (code === 200) {
+            this.getSubtableList()
+            this.$modal.msgSuccess('删除成功')
+          } else {
+            this.$modal.msgError('删除失败')
+          }
+        })
+      })
+    },
+    subFormSubmit() {
+      this.$refs['subForm'].validate(valid => {
+        if (valid) {
+          const params = Object.assign({}, this[`${this.subKey}Form`], { facsCode: this.curRow.facsCode })
+          if (this.subTitle.includes('新增')) {
+            addSubtable(this.subKey, params).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess('新增成功')
+                this.subDialogShow = false
+                this.getSubtableList()
+              } else {
+                this.$modal.msgError('新增失败')
+              }
+            })
+          } else {
+            updateSubtable(this.subKey, params).then(({ code }) => {
+              if (code === 200) {
+                this.$modal.msgSuccess('修改成功')
+                this.subDialogShow = false
+                this.getSubtableList()
+              } else {
+                this.$modal.msgError('修改失败')
+              }
+            })
+          }
+        }
+      })
+    },
+    subFormCancel() {
+      this[`${this.subKey}Form`] = this.$options.data()[`${this.subKey}Form`]
+      this.resetForm('subForm')
+      this.subDialogShow = false
     }
   }
 }
@@ -387,4 +573,7 @@ export default {
     }
   }
 }
+.drawer-content {
+  padding: 0 20px;
+}
 </style>