update 设备实例

src/views/equipment-management/equipment-instance/index.vue

 <template>
-  <div>
-    <el-card class="no-bottom">
-      <el-form
-        ref="searchForm"
-        :model="searchForm"
-        label-width="80px"
-        inline
-      >
-        <el-form-item
-          label="input:"
-          prop="input"
+  <el-card class="container">
+    <el-row :gutter="20" class="content">
+      <el-col :xs="8" :sm="8" :md="6" :lg="4">
+        <div class="custom-menu">
+          <el-menu
+            ref="customMenu"
+            :default-active="defaultActive"
+            @select="onSelect"
+          >
+            <el-menu-item
+              v-for="(type, index) in typeList"
+              :key="'type' + index"
+              :index="type.id.toString()"
+            >{{ type.name }}</el-menu-item>
+          </el-menu>
+        </div>
+      </el-col>
+      <el-col :xs="16" :sm="16" :md="18" :lg="20">
+        <div class="top-container" style="display: flex;justify-content: space-between">
+          <el-form
+            :model="searchForm"
+            inline
+            label-width="80px"
+            @submit.native.prevent
+          >
+            <el-form-item label="">
+              <el-input v-model="searchForm.instanceName" clearable placeholder="设备名称">
+                <el-button slot="append" icon="el-icon-search"></el-button>
+              </el-input>
+            </el-form-item>
+          </el-form>
+          <div class="buttons-group">
+            <el-button type="primary" @click="showAddItem">新增实例</el-button>
+          </div>
+        </div>
+        <el-table
+          :data="dataTable"
+          border
         >
-          <el-input v-model="searchForm.input" />
-        </el-form-item>
-        <el-form-item
-          label="status:"
-          prop="status"
-        >
-          <el-select v-model="searchForm.status" placeholder="请选择">
-            <el-option label="全部" :value="null" />
-            <el-option label="正常" :value="0" />
-            <el-option label="锁定" :value="1" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
-          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <el-card class="margin-top-20">
-      <div class="buttons-group margin-bottom-20">
-        <el-button type="primary" icon="el-icon-plus" @click="addRow">增加系统</el-button>
-      </div>
-
-      <el-table
-        :data="tableData"
-        border
-      >
-        <el-table-column
-          type="index"
-          label="序号"
-          width="50px"
-          align="center"
-        />
-        <el-table-column
-          prop="a"
-          label="a"
-        />
-        <el-table-column
-          prop="b"
-          label="b"
+          <el-table-column
+            prop="name"
+            label="设备名称"
+          />
+          <el-table-column
+            prop="description"
+            label="设备描述"
+          />
+          <el-table-column
+            prop="businessId"
+            label="设备业务ID"
+          />
+          <el-table-column
+            prop="deviceModel"
+            label="设备型号"
+          />
+          <el-table-column
+            prop="createTime"
+            label="创建时间"
+            :formatter="$moment"
+          />
+          <el-table-column
+            prop="updateTime"
+            label="修改时间"
+            :formatter="$moment"
+          />
+          <el-table-column
+            label="操作"
+            min-width="80"
+          >
+            <template slot-scope="scope">
+              <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
+              <el-popconfirm
+                title="这是一段内容确定删除吗？"
+              >
+                <el-button
+                  slot="reference"
+                  class="padding-left"
+                  type="text"
+                  @click="deleteItem(scope.row.id)"
+                >删除</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          class="margin-top-20 text-align-right"
+          :current-page="pageForm.pageNum"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageForm.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pageForm.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
         />
-        <el-table-column
-          prop="c"
-          label="c"
-        />
-        <el-table-column
-          prop="d"
-          label="d"
-        />
-        <el-table-column
-          label="操作"
-          width="140px"
-          align="center"
-        >
-          <template slot-scope="props">
-            <el-button v-permission="'SysMgr_update'" type="text" @click="editItem(props.row)">编辑</el-button>
-            <el-popconfirm
-              title="确定要删除此条记录吗？"
-              @onConfirm="deleteItem(props.row.id)"
-            >
-              <el-button slot="reference" type="text">删除</el-button>
-            </el-popconfirm>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination
-        class="margin-top-20 text-align-right"
-        :current-page="pageForm.pageNum"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="pageForm.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="pageForm.total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </el-card>
-
+      </el-col>
+    </el-row>
     <el-dialog
-      :title="add ? '增加系统' : '编辑系统'"
+      :title="add ? '新增实例' : '编辑实例'"
       :visible.sync="dialogVisible"
       width="700px"
     >
       <el-form
-        :model="addForm"
+        v-if="dialogVisible"
+        ref="instanceForm"
+        :model="instanceForm"
         label-width="90px"
+        :rules="rules"
       >
         <el-form-item
-          label="input:"
+          label="设备名称:"
+          prop="name"
+        >
+          <el-input v-model="instanceForm.name" />
+        </el-form-item>
+        <el-form-item
+          label="设备描述:"
+          prop="description"
+        >
+          <el-input
+            v-model="instanceForm.description"
+            type="textarea"
+            :row="2"
+          />
+        </el-form-item>
+        <el-form-item
+          label="设备业务ID:"
         >
-          <el-input v-model="addForm.input" />
+          <el-input v-model="instanceForm.businessId" />
         </el-form-item>
         <el-form-item
-          label="status:"
+          label="设备型号:"
         >
-          <el-input v-model="addForm.status" />
+          <el-input v-model="instanceForm.deviceModel" />
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="saveSystem">确 定</el-button>
+        <el-button type="primary" @click="addItem">确 定</el-button>
       </span>
     </el-dialog>
-  </div>
+  </el-card>
 </template>
 
 <script>
-import { getTableData } from '@/api/equipment-management/equipment-instance'
 export default {
   name: 'EquipmentInstance',
   props: {},
   data() {
     return {
-      searchForm: {
-        input: null,
-        status: null
-      },
-      add: true,
-      dialogVisible: false,
-      tableData: [],
-      addForm: {
-        input: null,
-        status: null
+      fakeData: {
+        '1': [
+          {
+            id: 1,
+            deviceTypeId: '1',
+            name: '鼓风机',
+            description: '1968-06-9',
+            businessId: 1,
+            deviceModel: 1,
+            createTime: 1596697194035,
+            updateTime: 1596697194035
+          }
+        ],
+        '2': [
+          {
+            id: 1,
+            deviceTypeId: '2',
+            name: '机床',
+            description: '1968-06-9',
+            businessId: 1,
+            deviceModel: 1,
+            createTime: 1596697194035,
+            updateTime: 1596697194035
+          }
+        ],
+        '3': [],
+        '4': []
       },
+      dataTable: [],
+      dataHeader: [],
+      defaultActive: null,
+      typeList: [
+        {
+          id: 1,
+          name: '类型一'
+        },
+        {
+          id: 2,
+          name: '类型二'
+        },
+        {
+          id: 3,
+          name: '类型三'
+        },
+        {
+          id: 4,
+          name: '类型四'
+        }
+      ],
+      searchForm: {},
       pageForm: {
         pageSize: 10,
         pageNum: 1,
         total: 0
+      },
+      dialogVisible: false,
+      instanceForm: {
+        deviceTypeId: null,
+        name: null,
+        description: null,
+        businessId: null,
+        deviceModel: null
+      },
+      add: true,
+      rules: {
+        name: [
+          { required: true, message: '请输入设备名称', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入设备描述', trigger: 'blur' }
+        ]
       }
     }
   },
   created() {},
-  mounted() {},
+  mounted() {
+    if (this.typeList.length > 0) {
+      const type = this.typeList[0]
+      const indexPath = type.id.toString()
+      this.defaultActive = indexPath
+      this.getInstanceList(indexPath)
+    }
+  },
   methods: {
-    getTableData(pageNum) {
-      const params = {
-        ...this.searchForm,
-        pageNum,
-        pageSize: this.pageForm.pageSize
+    showAddItem() {
+      this.instanceForm = {
+        deviceTypeId: null,
+        name: null,
+        description: null,
+        businessId: null,
+        deviceModel: null
       }
-      getTableData(params)
-        .then(res => {
-          const { records, totalSize } = res.data
-          this.tableData = records
-          this.pageForm.total = totalSize
-        })
-        .catch(err => console.error(err))
-    },
-    resetForm() {
-      this.$refs.searchForm.resetFields()
-    },
-    addRow() {
-      this.add = true
       this.dialogVisible = true
+      this.add = true
     },
-    editItem() {
-      this.add = false
-      this.dialogVisible = true
+    onSelect(index, indexPath) {
+      const activeType = this.typeList[parseInt(index) - 1]
+      this.instanceForm.deviceTypeId = activeType.id
+      this.getInstanceList(indexPath[0])
+    },
+    getInstanceList(indexPath) {
+      const data = [...this.fakeData[indexPath]]
+      this.dataHeader = []
+      for (const key in data[0]) {
+        if (Object.prototype.hasOwnProperty.call(data[0], key)) {
+          this.dataHeader.push({
+            label: key,
+            prop: key
+          })
+        }
+      }
+      this.dataTable = data
     },
-    deleteItem(id) {},
-    saveSystem() {},
     handleSizeChange(val) {
       this.pageForm.pageSize = val
-      this.getTableData(1)
     },
     handleCurrentChange(val) {
       this.pageForm.pageNum = val
-      this.getTableData(val)
+    },
+    editItem(row) {
+      const { id, deviceTypeId, name, description, businessId, deviceModel } = row
+      this.instanceForm = {
+        id,
+        deviceTypeId,
+        name,
+        description,
+        businessId,
+        deviceModel
+      }
+      this.dialogVisible = true
+      this.add = false
+    },
+    deleteItem(id) {},
+    addItem() {
+      this.$refs.instanceForm.validate()
+        .then(_ => {})
+        .catch(_ => {})
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.container{
+  min-height: calc(100vh - 95px);
+  .content{
+    display: flex;
+    min-height: calc(100vh - 135px);
+    .padding-left{
+      padding-left: 10px;
+    }
+    .custom-menu{
+      width: 100%;
+      background-color: #efeff1;
+      height: 100%;
+      .el-menu{
+        background-color: initial;
+        border-right: none;
+        border-top: solid 1px #e6e6e6;
+        border-left: solid 1px #e6e6e6;
+        .el-menu-item.el-menu-item{
+          min-width: initial;
+          background-color: #efeff1;
+        }
+        .el-menu-item.is-active{
+          background-color: #fff;
+          color: #303133;
+        }
+      }
+    }
+    .top{
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
 </style>