设备管理 设备列表 添加按钮权限

src/views/device/list/index.vue

@@ -12,9 +12,17 @@
         <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="getChange()"
-          v-hasPermi="['device:list:add']">新增</el-button>
-        <el-button type="primary" icon="el-icon-top" @click="getChange('', '上架')">批量上架</el-button>
-        <el-button type="primary" icon="el-icon-bottom" @click="getChange('', '下架')">批量下架</el-button>
+          v-hasPermi="['device:list:add']">
+          新增
+        </el-button>
+        <el-button type="primary" icon="el-icon-top" @click="getShelves(1)" :disabled="isDisabled()"
+          v-hasPermi="['device:list:up']">
+          批量上架
+        </el-button>
+        <el-button type="primary" icon="el-icon-bottom" @click="getShelves(2)" :disabled="isDisabled()"
+          v-hasPermi="['device:list:down']">
+          批量下架
+        </el-button>
       </el-form-item>
     </el-form>
     <!-- 表格 -->
@@ -35,10 +43,18 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button type="text" @click="getChange(scope.row.id, '查看')">查看</el-button>
+          <el-button v-if="scope.row.status === 2" type="text" @click="getShelves(1, scope.row.id)" v-hasPermi="['device:list:up']">
+            上架
+          </el-button>
+          <el-button v-else type="text" @click="getShelves(2, scope.row.id)" v-hasPermi="['device:list:down']">
+            下架
+          </el-button>
           <el-button type="text" @click="getChange(scope.row.id)" v-hasPermi="['device:list:edit']">
             编辑
           </el-button>
-          <el-button type="delete" @click="getDelete(scope.row.id)">删除</el-button>
+          <el-button v-if="scope.row.status === 2" type="delete" @click="getDelete(scope.row.id)" v-hasPermi="['device:list:delete']">
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -66,7 +82,8 @@ export default {
       },
       // 批量上下架
       changeForm: {
-        ids: ''
+        ids: '',
+        type: null
       }
     }
   },
@@ -101,35 +118,48 @@ export default {
       this.getList()
     },
 
+    // 禁用上下架功能
+    isDisabled() {
+      return this.changeForm.ids === '' ? true : false
+    },
+
+    // 上下架
+    getShelves(key, e) {
+      if (e) {
+        this.changeForm.ids = e
+      }
+      let title = key === 1 ? '上架' : '下架'
+      this.changeForm.type = key
+      batchChange(this.changeForm).then(res => {
+        if (res.code === 0) {
+          this.$message.success(`${title}成功！`)
+          this.getList()
+        }
+      })
+    },
+
     // 新增 / 编辑 / 查看
     getChange(id, key) {
-      if (key === '上架' || key === '下架') {
-        this.changeForm.type = key === '上架' ? 1 : 2
-        batchChange(this.changeForm).then(res => {
-          if (res.code === 0) {
-            this.$message.success(`${key}成功！`)
-            this.getList()
-          }
-        })
-      } else {
-        this.$router.push({
-          path: `/device/list/detail`,
-          query: {
-            id: id,
-            key: key
-          }
-        })
-      }
+      this.$router.push({
+        path: `/device/list/detail`,
+        query: {
+          id: id,
+          key: key
+        }
+      })
     },
 
     // 多选
     handleSelectionChange(e) {
-      let arr = []
-      e.filter(i => {
-        arr.push(i.id)
-        // 拼接空字符串并未删掉 待处理
-        this.changeForm.ids = arr.join(',')
-      })
+      if (e.length > 0) {
+        let arr = []
+        e.filter(i => {
+          arr.push(i.id)
+          this.changeForm.ids = arr.join(',')
+        })
+      } else {
+        this.changeForm.ids = ''
+      }
     },
 
     // 删除