修改设备分类

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

@@ -1,41 +1,21 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"/>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" />
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">设施大类</el-col>
     </el-row>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['basecfg:facstype:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['basecfg:facstype:add']">新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['basecfg:facstype:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['basecfg:facstype:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['basecfg:facstype:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['basecfg:facstype:remove']">删除</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -48,31 +28,15 @@
       <el-table-column label="数据版本" align="center" prop="version" />
       <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:facstype:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['basecfg:facstype:remove']"
-          >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['basecfg:facstype:edit']">修改
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['basecfg:facstype:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改能源设施/系统分类对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
@@ -90,9 +54,27 @@
           <el-input v-model="form.version" placeholder="请输入数据版本" />
         </el-form-item>
         <el-form-item label="系统子类" prop="subtypeList">
-          <el-table v-loading="loading" :data="form.subtypeList">
-            <el-table-column label="子系统代码" align="center" prop="code" />
-            <el-table-column label="子系统名称" align="center" prop="name" />
+          <el-table class="sub-table" v-loading="loading" :data="form.subtypeList">
+            <el-table-column label="子系统代码" align="center" prop="code">
+              <template slot-scope="scope">
+                <el-input size="mini" v-model="scope.row.code" placeholder="请输入代码" />
+              </template>
+            </el-table-column>
+            <el-table-column label="子系统名称" align="center" prop="name">
+              <template slot-scope="scope">
+                <el-input size="mini" v-model="scope.row.name" 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>
@@ -105,10 +87,10 @@
 </template>
 
 <script>
-import { listType, getType, delType, addType, updateType } from "@/api/basecfg/facstype";
+import { listType, getType, delType, addType, updateType } from '@/api/basecfg/facstype'
 
 export default {
-  name: "Type",
+  name: 'Type',
   data() {
     return {
       // 遮罩层
@@ -128,7 +110,7 @@ export default {
       // 子类表格数据
       subTypeList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -142,115 +124,139 @@ export default {
         subtypeList: null
       },
       // 表单参数
-      form: {},
+      form: {
+        subtypeList: []
+      },
       // 表单校验
       rules: {
-        code: [
-          { required: true, message: "设施系统代码不能为空", trigger: "blur" }
-        ],
-        name: [
-          { required: true, message: "设施系统名称不能为空", trigger: "blur" }
-        ],
+        code: [{ required: true, message: '设施系统代码不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '设施系统名称不能为空', trigger: 'blur' }]
       }
-    };
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
+    addSub() {
+      this.form.subtypeList.push({
+        name: '',
+        code: ''
+      })
+    },
+    deleteSub(index){
+      this.form.subtypeList.splice(index, 1)
+    },
     /** 查询能源设施/系统分类列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listType(this.queryParams).then(response => {
-        this.typeList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.typeList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
-      this.form = {
-        id: null,
-        code: null,
-        name: null,
-        desc: null,
-        version: null
-      };
-      this.resetForm("form");
+      this.form = this.$options.data().form;
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加能源设施/系统分类";
+      this.reset()
+      this.open = true
+      this.title = '添加能源设施/系统分类'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getType(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改能源设施/系统分类";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设施/系统分类'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
+          this.form.subtypeList = this.form.subtypeList.filter(item=>item.name!==''&&item.value!=='')
           if (this.form.id != null) {
             updateType(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addType(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除能源设施/系统分类编号为"' + ids + '"的数据项？').then(function() {
-        return delType(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      const ids = row.id || this.ids
+      this.$modal
+        .confirm('是否确认删除能源设施/系统分类编号为"' + ids + '"的数据项？')
+        .then(function() {
+          return delType(ids)
+        })
+        .then(() => {
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {})
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('ems/basecfg/facstype/export', {
-        ...this.queryParams
-      }, `type_${new Date().getTime()}.xlsx`)
+      this.download(
+        'ems/basecfg/facstype/export',
+        {
+          ...this.queryParams
+        },
+        `type_${new Date().getTime()}.xlsx`
+      )
     }
   }
-};
+}
 </script>
+<style lang="scss" scoped>
+.operateBtns {
+  cursor: pointer;
+  i {
+    color: #1990ff;
+    margin-left: 5px;
+  }
+}
+.sub-table{
+  .el-icon-delete{
+    cursor: pointer;
+  }
+}
+</style>