OpenAuth.net入門【6】——添加數據校驗功能

接前5篇

OpenAuth.net入門【1】——代碼生成過程記錄 - 星星c# - 博客園 (cnblogs.com)

OpenAuth.net入門【2】——代碼生成後補全編輯功能 - 星星c# - 博客園 (cnblogs.com)

OpenAuth.net入門【3】——代碼生成後補全查詢功能 - 星星c# - 博客園 (cnblogs.com)

OpenAuth.net入門【4】——自定義數據列表和編輯界面 - 星星c# - 博客園 (cnblogs.com)

OpenAuth.net入門【5】——解決添加完數據，在未刷新列表時執行刪除，數據未被真正刪除的問題 - 星星c# - 博客園 (cnblogs.com)

　　

本篇介紹如何添加數據的校驗功能

1、在編輯表單上配置正確對應的校驗屬性

　  在表單上加上正確的“prop”屬性，如下圖：

　　

 

2、添加校驗規則

　　找到data下的rules屬性，並添加相應的規則，如下圖：

　　

 　　代碼如下：

  data() {
    return {
      headerList: [], // 主列表列定義
      multipleSelection: [], // 列表checkbox選中的值
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        // 查詢條件
        page: 1,
        limit: 20,
        key: undefined,
      },
      temp: {},
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "編輯",
        create: "添加",
      },
      rules: {
        name: [{ required: true, message: "名稱不能爲空", trigger: "blur" }],
        brand: [{ required: true, message: "品牌不能爲空", trigger: "blur" }],
        model: [{ required: true, message: "型號不能爲空", trigger: "blur" }],
        internetType: [{ required: true, message: "聯網方式不能爲空", trigger: "blur" }],
      },
    };
  },

 

3、保存按鈕事件上加判斷

　　如下圖：

　　

 

 　　代碼如下：

    updateData() {
      // 更新提交
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          farmInternetDeviceTypeMsts.update(tempData).then(() => {
            for (const v of this.list) {
              if (v.id === this.temp.id) {
                const index = this.list.indexOf(v);
                this.list.splice(index, 1, this.temp);
                break;
              }
            }
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },

　　如下圖：

　　

 　　代碼如下：

    createData() {
      // 保存提交
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          farmInternetDeviceTypeMsts.add(this.temp).then((response) => {
            this.temp.id = response.result;
            this.list.unshift(this.temp);
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "創建成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },

 

4、效果圖