vue-web-frame/src/views/know/station.vue

<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">故障名称：</div>
          <div class="search-input">
            <el-input
              v-model="search"
              size="small"
              placeholder="输入报警分类"
              @input="filterFault"
            />
          </div>
        </div>
      </div>
      <div class="query-actions" style="margin-left: 50px">
        <button class="btn green" @click="insertItem()">新增</button>
      </div>
    </div>
    <div class="df-table">
      <el-table :data="tableData" class="custom-table" height="85vh">
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column prop="name" align="center" label="报警类别" />
        <el-table-column prop="code" align="center" label="故障编码" />
        <el-table-column prop="time" align="center" label="创建时间" />

        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="editItem(scope)">编辑</el-button>
            <el-button type="text" @click="delItem(scope)" disabled>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="dialogTitle"
        v-model="dialogShow"
        width="50%"
        top="15vh"
        custom-class="modal"
        :close-on-click-modal="true"
      >
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          size="default"
        >
          <el-form-item :label="`${ruleForm['name--name--']}：`" prop="name">
            <el-input
              v-model="ruleForm.name"
              :placeholder="`请输入${ruleForm['name--name--']}`"
              type="input"
            />
          </el-form-item>
          <el-form-item :label="`${ruleForm['code--name--']}：`" prop="code">
            <el-input
              v-model="ruleForm.code"
              :placeholder="`请输入${ruleForm['code--name--']}`"
              type="input"
              :disabled="codedisabled"
            />
          </el-form-item>
          <el-form-item
            :label="`${ruleForm['remark--name--']}：`"
            prop="remark"
          >
            <el-input
              v-model="ruleForm.remark"
              :placeholder="`请输入${ruleForm['remark--name--']}`"
              type="input"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" size="medium" @click="cancel"
              >取消</el-button
            >
            <el-button
              type="success"
              size="medium"
              @click="submit('ruleFormRef')"
              >提交</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ElMessageBox } from "element-plus";
export default {
  data() {
    return {
      sourceTableData: [],
      tableData: [],
      dialogTitle: "",
      dialogShow: false,
      codedisabled: false,
      ruleForm: {
        name: "",
        "name--name--": "报警类别",
        code: "",
        "code--name--": "编码",
        remark: "",
        "remark--name--": "备注",
      },
      rules: {
        name: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    this.getStationType();
    this.renderRules();
  },

  methods: {
    // 获取所有故障类型
    getStationType() {
      const that = this;
      this.API.requestData({
        subUrl: "station/all",
        success(res) {
          that.tableData = res.data;
        },
      });
    },

    // 取消新增或编辑
    cancel() {
      this.dialogShow = false;
    },

    //新增
    insertItem() {
      this.resetForm();
      this.dialogShow = true;
      this.dialogTitle = "新增";
      this.codedisabled = false;
    },

    // 编辑某一条
    editItem({ row }) {
      for (let key in row) {
        if (key !== "time") {
          this.ruleForm[key] = row[key];
        }
      }
      this.dialogShow = true;
      this.dialogTitle = "编辑";
      this.codedisabled = true;
    },

    // 删除某一条
    delItem({ row }) {
      const that = this;
      ElMessageBox.alert(`确定删除${row.name}？此操作不可逆！`, "", {
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "我再想想",
        callback(action) {
          if (action === "confirm") {
            that.API.requestData({
              subUrl: "know/fault/type/delete",
              data: {
                id: row.id,
              },
              success() {
                that.BASE.showMsg({
                  type: "success",
                  msg: `删除成功`,
                });
                that.dialogShow = false;
              },
            });
          }
        },
      });
    },

    // 提交编辑或者新增数据
    submit(formName = "") {
      const that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {};
          for (let key in that.ruleForm) {
            if (key.indexOf("--name--") === -1) {
              data[key] = that.ruleForm[key];
            }
          }
          data.time = new Date().formatDate("yyyy-MM-dd hh:mm:ss");
          data.category = 'GZ';
          that.API.request({
            method: 'POST',
            subUrl: "know/fault/type/insert",
            data,
            success() {
              that.BASE.showMsg({
                type: "success",
                msg: `${data.id ? "编辑" : "新增"}成功`,
              });
              that.dialogShow = false;
              that.getStationType();
            },
          });
        } else {
          return false;
        }
      });
    },

    // 渲染 rules 中文描述
    renderRules() {
      for (let key in this.rules) {
        this.rules[key].forEach((ele) => {
          ele.message = `${this.ruleForm[key + "--name--"]}` + ele.message;
        });
      }
    },

    // 重置表单并且重置表单效验
    resetForm() {
      this.dialogTitle = "";
      this.ruleForm.id && delete this.ruleForm.id;
      for (let key in this.ruleForm) {
        if (key.indexOf("--name--") === -1) {
          this.ruleForm[key] = "";
        }
      }
    },
  },
};
</script>


<style lang="less" scpoed>
.el-form {
  margin-left: 50px;
}
.el-form .el-form-item {
  margin-top: 40px;
  width: 80%;
  display: flex;
  justify-items: center;
}
</style>