|
|
@@ -0,0 +1,180 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <el-form inline label-width="100px" size="mini" @submit.native.prevent>
|
|
|
+ <el-form-item>
|
|
|
+ <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 :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" @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/class";
|
|
|
+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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 新增 / 编辑按钮
|
|
|
+ getChange(row) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.form = row ? row : {
|
|
|
+ name: '',
|
|
|
+ status: 1
|
|
|
+ };
|
|
|
+ this.title = row ? "编辑" : "新增";
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消
|
|
|
+ getCancel() {
|
|
|
+ this.$refs.form.clearValidate();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确定
|
|
|
+ getCreate() {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ getDelete(id) {
|
|
|
+ this.$confirm("确定要删除?", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ remove(id).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.getList();
|
|
|
+ this.$message.success("删除成功！");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
