设备分类

src/views/device/category/index.vue

@@ -1,104 +1,180 @@
 <template>
-  <div class='app-container'>
+  <div class="app-container">
     <!-- 搜索 -->
-    <el-form inline size="mini">
-      <el-form-item label="大类名称：">
-        <el-input placeholder="请输入大类名称" />
-      </el-form-item>
-      <el-form-item label="设备分类：">
-        <el-select placeholder="请选择设备分类">
-          <el-option />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="当前状态：">
-        <el-select placeholder="请选择当前状态">
-          <el-option />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否热门：">
-        <el-select placeholder="请选择是否热门">
-          <el-option />
-        </el-select>
-      </el-form-item>
+    <el-form inline label-width="100px" size="mini" @submit.native.prevent>
       <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="getCreate">新增</el-button>
-        <el-button type="primary">批量上架</el-button>
-        <el-button type="primary">批量下架</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()"
+          v-hasPermi="['device:category:add']">新增</el-button>
       </el-form-item>
     </el-form>
-    <!-- 列表 -->
-    <el-table>
-      <el-table-column type="selection"></el-table-column>
-      <el-table-column label="大类Id" align="center"></el-table-column>
-      <el-table-column label="大类名称" align="center"></el-table-column>
-      <el-table-column label="设备图片" align="center"></el-table-column>
-      <el-table-column label="设备分类" align="center"></el-table-column>
-      <el-table-column label="设备类型" align="center"></el-table-column>
-      <el-table-column label="是否热门" align="center"></el-table-column>
-      <el-table-column label="关联设备" align="center"></el-table-column>
-      <el-table-column label="当前状态" align="center"></el-table-column>
-      <el-table-column label="更新时间" align="center"></el-table-column>
-      <el-table-column label="创建时间" align="center"></el-table-column>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="分类ID" prop="id" align="center" />
+      <el-table-column label="分类名称" prop="name" align="center" />
+      <el-table-column label="状态" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status === 1 ? '' : 'danger'">{{ selectDictLabel(statusOptions, scope.row.status)
+          }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text">查看</el-button>
-          <el-button type="text">上架</el-button>
-          <el-button type="text">下架</el-button>
-          <el-button type="text" @click="getEdit(scope.row)">编辑</el-button>
-          <el-button type="delete">删除</el-button>
+          <el-button type="text" @click="getChange(scope.row)" v-hasPermi="['device:category:edit']">
+            编辑
+          </el-button>
+          <el-button type="delete" @click="getDelete(scope.row.id)" v-hasPermi="['device:category:delete']">
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 新增弹窗 -->
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="getCancel">
+      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="分类名称：" prop="name">
+          <el-input v-model="form.name" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="启用状态：" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="2">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button size="mini" @click="getCancel">取消</el-button>
+        <el-button type="primary" size="mini" @click="getCreate">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import {
+  list,
+  create,
+  edit,
+  remove,
+} from "@/api/device/category";
 export default {
   data() {
     return {
-
-    }
+      // 遮罩层
+      loading: true,
+      // 表格数据
+      tableData: [],
+      // 弹窗
+      dialogVisible: false,
+      title: "",
+      // 提交表单
+      form: {
+        name: '',
+        status: 1
+      },
+      // 表单验证
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入分类名称",
+            trigger: "blur",
+          },
+        ],
+        status: [
+          {
+            required: true,
+            message: "请选择状态",
+            trigger: "change",
+          },
+        ],
+      },
+      // 设备状态
+      statusOptions: [{
+        value: 1,
+        label: '正常'
+      }, {
+        value: 2,
+        label: '停用'
+      }]
+    };
   },
   mounted() {
-
+    this.getList();
   },
   methods: {
-    // 列表
+    // 分类列表
     getList() {
-
+      this.loading = true;
+      list().then((res) => {
+        if (res.code === 0) {
+          this.tableData = res.data;
+          this.loading = false;
+        }
+      });
     },
 
-    // 搜索
-    getSearch() {
-
+    // 新增 / 编辑按钮
+    getChange(row) {
+      this.dialogVisible = true;
+      this.form = row ? row : {
+        name: '',
+        status: 1
+      };
+      this.title = row ? "编辑" : "新增";
     },
 
-    // 重置
-    getRefresh() {
-
+    // 取消
+    getCancel() {
+      this.$refs.form.clearValidate();
+      this.dialogVisible = false;
     },
 
-    // 新增
+    // 确定
     getCreate() {
-      this.getRouter()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.form.id) {
+            // 编辑
+            edit(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("修改成功！");
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          } else {
+            // 新增
+            create(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("创建成功！");
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
     },
 
-    // 编辑
-    getEdit(e) {
-      this.getRouter({
-        id: e.id
+    // 删除
+    getDelete(id) {
+      this.$confirm("确定要删除?", {
+        type: "warning",
       })
+        .then(() => {
+          remove(id).then((res) => {
+            if (res.code === 0) {
+              this.getList();
+              this.$message.success("删除成功！");
+            }
+          });
+        })
+        .catch(() => { });
     },
-
-    // 路由
-    getRouter(query) {
-      this.$router.push({
-        path: '/device/category/detail',
-        query: query
-      })
-    }
-  }
-}
+  },
+};
 </script>