设备列表 删除连接方式

src/views/device/list/detail.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="form" :rules="rules" ref="form" label-width="110px" size="small">
+    <el-form :model="form" :rules="rules" ref="form" label-width="100px" size="small" :disabled="disabled">
       <el-form-item label="设备型号：" prop="clientType">
         <el-input v-model="form.clientType" placeholder="请输入设备型号" />
       </el-form-item>
       <el-form-item label="设备名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入设备名称" />
       </el-form-item>
-      <el-form-item label="初始版本号：" prop="firstVersion">
+      <el-form-item label="版本号：" prop="firstVersion">
         <el-input v-model="form.firstVersion" placeholder="请输入初始版本号" />
       </el-form-item>
       <el-form-item label="升级方式：" prop="upgradeType">
@@ -21,7 +21,7 @@
       <el-form-item label="引导页：" prop="guideUrl">
         <el-input v-model="form.guideUrl" placeholder="请输入引导页网址" />
       </el-form-item>
-      <el-form-item label="设备制造商：" prop="manufacturer">
+      <el-form-item label="制造商：" prop="manufacturer">
         <el-input v-model="form.manufacturer" placeholder="请输入设备制造商" />
       </el-form-item>
       <el-form-item label="使用分类：" prop="deviceType">
@@ -39,7 +39,13 @@
       </el-form-item>
       <!-- 子表单 -->
       <div label-width="100px" style="position: relative">
-        <el-button class="sub-add" v-if="form.typeList.length < 4" type="primary" icon="el-icon-plus" @click="getAdd">新建</el-button>
+        <el-button
+          class="sub-add"
+          v-if="disabled === false && form.typeList.length < 4"
+          type="primary"
+          icon="el-icon-plus"
+          @click="getAdd"
+        >新增</el-button>
         <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
           <el-form-item
             label="设备类型："
@@ -69,15 +75,6 @@
               <el-option v-for="item in functionOptions" :key="item.id" :label="item.name" :value="item.type" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            label="连接方式："
-            :prop="`typeList.${index}.connectType`"
-            :rules="{required: true, message:'请选择连接方式', trigger: 'change'}"
-          >
-            <el-select v-model="item.connectType" placeholder="请选择连接方式">
-              <el-option v-for="item in connectTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
           <el-row>
             <el-col :span="12">
               <el-form-item
@@ -116,11 +113,11 @@
           />
         </div>
       </div>
-      <el-form-item>
-        <el-button size="mini" @click="getCancel">取消</el-button>
-        <el-button size="mini" type="primary" @click="getSubmit">提交</el-button>
-      </el-form-item>
     </el-form>
+    <div class="form-btn">
+      <el-button size="mini" @click="getCancel">取消</el-button>
+      <el-button v-if="disabled === false" size="mini" type="primary" @click="getSubmit">提交</el-button>
+    </div>
   </div>
 </template>
 
@@ -138,6 +135,8 @@ export default {
   },
   data() {
     return {
+      // 能否编辑
+      disabled: false,
       // 设备类型列表
       typeOptions: [
         {
@@ -168,25 +167,6 @@ export default {
           label: "指定",
         },
       ],
-      // 连接方式列表
-      connectTypeOptions: [
-        {
-          value: 0,
-          label: "bt",
-        },
-        {
-          value: 1,
-          label: "ble",
-        },
-        {
-          value: 2,
-          label: "upnp",
-        },
-        {
-          value: 3,
-          label: "mqtt",
-        },
-      ],
       // 分类列表
       categoryOptions: [],
       functionOptions: [],
@@ -196,7 +176,6 @@ export default {
           {
             type: "",
             functionList: [],
-            connectType: "",
             icon1: "",
             icon2: "",
           },
@@ -294,6 +273,8 @@ export default {
     });
   },
   mounted() {
+    this.disabled = this.$route.query.key === "查看" ? true : false;
+    console.log(this.$route.query.id);
     this.getList();
   },
   methods: {
@@ -328,12 +309,11 @@ export default {
       this.typeOptions[e - 1].disabled = true;
     },
 
-    // 新建
+    // 新增子表单
     getAdd() {
       this.form.typeList.push({
         type: "",
         functionList: [],
-        connectType: "",
         icon1: "",
         icon2: "",
       });
@@ -348,7 +328,6 @@ export default {
     // 取消
     getCancel() {
       this.$tab.closeOpenPage("/device/list");
-      this.$refs.form.resetFields();
     },
 
     // 提交

src/views/device/list/index.vue

@@ -8,12 +8,12 @@
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()">新增</el-button>
       </el-form-item>
     </el-form>
     <!-- 表格 -->
     <el-table :data="tableData" v-loading="loading">
-      <el-table-column label="ID" prop="id" align="center" />
+      <el-table-column label="设备ID" prop="id" align="center" />
       <el-table-column label="设备型号" prop="clientType" align="center" />
       <el-table-column label="设备名称" prop="name" align="center" />
       <el-table-column label="设备图片" prop="img" align="center" width="100">
@@ -26,7 +26,8 @@
       <el-table-column label="创建时间" prop="createTimeText" align="center" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
+          <el-button type="text" @click="getChange(scope.row.id, '查看')">查看</el-button>
+          <el-button type="text" @click="getChange(scope.row.id)">编辑</el-button>
           <el-button type="delete" @click="getDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
@@ -74,21 +75,27 @@ export default {
     // 搜索
     getSearch() {
       this.form.pageNum = 1
+      this.form.pageSize = 10
       this.getList()
     },
 
     // 重置
     getRefresh() {
-      this.form.name = ''
+      this.form = {
+        name: '',
+        pageNum: 1,
+        pageSize: 10
+      }
       this.getList()
     },
 
-    // 新增 / 查看
-    getDetail(id) {
+    // 新增 / 编辑 / 查看
+    getChange(id, key) {
       this.$router.push({
         path: `/device/list/detail`,
         query: {
-          id: id
+          id: id,
+          key: key
         }
       })
     },