设备大类

src/views/device/category/index.vue

@@ -1,179 +1,104 @@
 <template>
-  <div class="app-container">
+  <div class='app-container'>
     <!-- 搜索 -->
-    <el-form inline label-width="100px" size="mini" @submit.native.prevent>
+    <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-item>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()"
-          v-hasPermi="['device:category:add']">新增</el-button>
+        <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-form-item>
     </el-form>
-
-    <!-- 表格 -->
-    <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>
+      <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-column label="操作" align="center">
         <template slot-scope="scope">
-          <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>
+          <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>
         </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 {
-  categoryList,
-  categoryAdd,
-  categoryEdit,
-  categoryDelete,
-} 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;
-      categoryList().then((res) => {
-        if (res.code === 0) {
-          this.tableData = res.data;
-          this.loading = false;
-        }
-      });
+
     },
 
-    // 新增 / 编辑按钮
-    getChange(row) {
-      this.dialogVisible = true;
-      this.form = row ? row : {
-        name: '',
-        status: 1
-      };
-      this.title = row ? "编辑" : "新增";
+    // 搜索
+    getSearch() {
+
     },
 
-    // 取消
-    getCancel() {
-      this.$refs.form.clearValidate();
-      this.dialogVisible = false;
+    // 重置
+    getRefresh() {
+
     },
 
-    // 确定
+    // 新增
     getCreate() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (this.form.id) {
-            // 编辑
-            categoryEdit(this.form).then((res) => {
-              if (res.code === 0) {
-                this.$message.success("修改成功！");
-                this.dialogVisible = false;
-                this.getList();
-              }
-            });
-          } else {
-            // 新增
-            categoryAdd(this.form).then((res) => {
-              if (res.code === 0) {
-                this.$message.success("创建成功！");
-                this.dialogVisible = false;
-                this.getList();
-              }
-            });
-          }
-        } else {
-          return false;
-        }
-      });
+      this.getRouter()
     },
 
-    // 删除
-    getDelete(id) {
-      this.$confirm("确定要删除?", {
-        type: "warning",
+    // 编辑
+    getEdit(e) {
+      this.getRouter({
+        id: e.id
       })
-        .then(() => {
-          categoryDelete(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>