设备型号更新

src/xt_pages/mode/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+
+      <el-button
+        size="small"
+        icon="el-icon-circle-plus-outline"
+        type="primary"
+        @click="addMode"
+        >新增</el-button
+      >
+    </div>
+    <div class="app-container">
+      <el-row>
+        <el-col :span="24">
+          <el-table
+            :data="tableData"
+            :row-style="{ color: '#303133' }"
+            :header-cell-style="{
+              backgroundColor: 'rgb(245, 247, 250)',
+              color: '#606266'
+            }"
+            border
+          >
+            <el-table-column label="型号名称" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.device_mode }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="编辑"
+                  placement="top"
+                >
+                  <el-button
+                    type="primary"
+                    icon="el-icon-edit-outline"
+                    size="small"
+                    @click="EditMode(scope.row.id)"
+                  ></el-button>
+                </el-tooltip>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="删除"
+                  placement="top"
+                >
+                  <el-button
+                    type="danger"
+                    icon="el-icon-delete"
+                    size="small"
+                    @click="DeleteMode(scope.row.id, scope.$index)"
+                  ></el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+
+      <el-dialog
+        title="添加设备型号"
+        :visible.sync="dialogVisible"
+        width="30%"
+        center
+      >
+        <el-form :model="form" ref="form" :rules="ModeRules">
+          <el-form-item label="设备型号:" required prop="device_mode">
+            <el-input style="width:200px" v-model="form.device_mode"></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="SaveMode('form')">保存</el-button>
+        </span>
+      </el-dialog>
+
+      <el-dialog
+        title="编辑设备型号"
+        :visible.sync="editDialogVisible"
+        width="30%"
+        center
+      >
+        <el-form :model="form" ref="form" :rules="ModeRules">
+          <el-form-item label="设备型号:">
+            <el-input style="width:200px" v-model="form.device_mode"></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="editDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="UpdateMode('form')">保存</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// eslint-disable-next-line no-unused-vars
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
+import {
+  SaveMode,
+  getAllMode,
+  EditMode,
+  UpdateMode,
+  DeleteMode
+} from "@/api/manage";
+export default {
+  name: "index.vue",
+  data() {
+    return {
+      crumbs: [
+        { path: false, name: "设备管理" },
+        { path: "/device/mode", name: "型号管理" }
+      ],
+      dialogVisible: false,
+      editDialogVisible: false,
+      tableData: [],
+      form: {
+        id: "",
+        device_mode: ""
+      },
+      ModeRules: {
+        device_mode: [{ required: true, message: "请填写设备型号" }]
+      }
+    };
+  },
+  methods: {
+    addMode() {
+      this.dialogVisible = true;
+    },
+    SaveMode(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          // eslint-disable-next-line no-undef
+          SaveMode(this.form).then(response => {
+            // eslint-disable-next-line no-empty
+            if (response.data.state === 1) {
+              var mode = response.data.data.mode;
+              this.form.device_mode = "";
+              this.dialogVisible = false;
+              this.getAllMode();
+            }
+          });
+        }
+      });
+    },
+    getAllMode() {
+      getAllMode().then(response => {
+        if (response.data.state === 1) {
+          var mode = response.data.data.mode;
+          this.tableData = mode;
+          console.log(mode);
+        }
+      });
+    },
+    EditMode(id) {
+      this.editDialogVisible = true;
+      EditMode(id).then(response => {
+        if (response.data.state === 1) {
+          var mode = response.data.data.mode;
+          this.form.id = mode.id;
+          this.form.device_mode = mode.device_mode;
+        }
+      });
+    },
+    UpdateMode(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          UpdateMode(this.form.id, this.form).then(response => {
+            if (response.data.state === 1) {
+              var mode = response.data.data.mode;
+              this.editDialogVisible = false;
+              this.getAllMode();
+            }
+          });
+        }
+      });
+    },
+    DeleteMode(id, index) {
+      this.$confirm(
+        "确认要删除所选信息吗? <br>删除后,信息将无法恢复",
+        "删除提示",
+        {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      ).then(() => {
+        DeleteMode(id, index).then(response => {
+          if (response.data.state === 1) {
+            var msg = response.data.data.msg;
+            this.tableData.splice(index, 1);
+          }
+        });
+      });
+    }
+  },
+
+  created() {
+    this.getAllMode();
+  }
+};
+</script>
+
+<style scoped></style>