Vue_New/src/xt_pages/mode/index.vue

<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) {
            // eslint-disable-next-line no-unused-vars
            var msg = response.data.data.msg;
            this.tableData.splice(index, 1);
          } else {
            this.$message.error("该型号已绑定设备,不能删除");
          }
        });
      });
    }
  },

  created() {
    this.getAllMode();
  }
};
</script>

<style scoped></style>