页面架子上传

src/views/know/faultcategory.vue

@@ -1,19 +1,301 @@
 <template>
-   <div></div>
+  <div>
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-actions">
+          <button
+            class="btn"
+            @click="
+              () => {
+                dialogShow = true;
+                dialogTitle = '新增';
+              }
+            "
+          >
+            新增
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="df-table">
+      <el-table
+        :data="tableData"
+        class="custom-table"
+        height="80vh"
+      >
+        <el-table-column type="index" label="序号" align="center" width="50" />
+        <el-table-column prop="category" align="center" label="category" />
+        <el-table-column prop="code" align="center" label="code" />
+        <el-table-column prop="id" align="center" label="id" />
+        <el-table-column prop="name" align="center" label="name" />
+        <el-table-column prop="remark" align="center" label="remark" />
+        <el-table-column prop="time" align="center" label="time" />
+
+        <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)">删除</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"
+        @closed="
+          () => {
+            resetForm();
+          }
+        "
+      >
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          size="default"
+        >
+          <el-form-item
+            :label="`${ruleForm['category--name--']}：`"
+            prop="category"
+          >
+            <el-input
+              v-model="ruleForm.category"
+              :placeholder="`请输入${ruleForm['category--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"
+            />
+          </el-form-item>
+
+          <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['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 ComTable from "@/components/coms/table/table.vue";
-
+import { ElMessageBox } from "element-plus";
 export default {
- components: {
-    ComTable
+  data() {
+    return {
+      tableData: [],
+      dialogTitle: "",
+      dialogShow: false,
+      ruleForm: {
+        category: "",
+        "category--name--": "类型",
+        code: "",
+        "code--name--": "编码",
+        name: "",
+        "name--name--": "名称",
+        remark: "",
+        "remark--name--": "remark",
+      },
+      rules: {
+        category: [
+          {
+            required: true,
+            message: "不可为空",
+            trigger: "blur",
+          },
+        ],
+        code: [
+          {
+            required: true,
+            message: "不可为空",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "不可为空",
+            trigger: "blur",
+          },
+        ],
+        remark: [
+          {
+            required: true,
+            message: "不可为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
   },
-};
 
+  created() {
+    this.getFaultType();
+    this.renderRules();
+  },
+
+  methods: {
+    // 获取所有故障类型
+    getFaultType() {
+      const that = this;
+      this.API.requestData({
+        baseURL: "http://192.168.1.18:9002/",
+        subUrl: "know/fault/type/all",
+        success(res) {
+          that.tableData = res.data;
+        },
+      });
+    },
+
+    // 取消新增或编辑
+    cancel() {
+      const that = this;
+      ElMessageBox.alert("确定取消？所做的操作将不会被保存！", "", {
+        showCancelButton: true,
+        showConfirmButton: true,
+        confirmButtonText: "确定",
+        cancelButtonText: "我再想想",
+        callback(action) {
+          if (action === "confirm") {
+            that.dialogShow = false;
+          }
+        },
+      });
+    },
+
+    // 编辑某一条
+    editItem({ row }) {
+      for (let key in row) {
+        if (key !== "time") {
+          this.ruleForm[key] = row[key];
+        }
+      }
+      this.dialogShow = true;
+    },
+
+    // 删除某一条
+    delItem({ row }) {
+      const that = this;
+      ElMessageBox.alert(`确定删除${row.name}？此操作不可逆！`, "", {
+        showCancelButton: true,
+        showConfirmButton: true,
+        confirmButtonText: "确定",
+        cancelButtonText: "我再想想",
+        callback(action) {
+          if (action === "confirm") {
+            that.API.requestData({
+              baseURL: "http://192.168.1.18:9002/",
+              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");
+          that.API.requestData({
+            baseURL: "http://192.168.1.18:9002/",
+            subUrl: "know/fault/type/insert",
+            data,
+            success() {
+              that.BASE.showMsg({
+                type: "success",
+                msg: `${data.id ? "编辑" : "新增"}成功`,
+              });
+              that.dialogShow = false;
+            },
+          });
+        } 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.dialogShow = false;
+      this.ruleForm.id && delete this.ruleForm.id;
+      for (let key in this.ruleForm) {
+        if (key.indexOf("--name--") === -1) {
+          this.ruleForm[key] = "";
+        }
+      }
+      this.$refs.ruleFormRef.resetFields();
+    },
+  },
+};
 </script>
 
 
-<style lang="less" scoped>
+<style lang="less" scpoed>
 
+.el-form .el-form-item {
+  margin-bottom: 24px;
+}
 </style>