表单校验功能

src/views/basic_data/dealer/dealer_deposit.vue

@@ -46,12 +46,8 @@
     <div class="btn-group clearfix">
       <div class="fl">
         <el-button type="primary" size="small" @click="addFn">新增</el-button>
-        <el-button type="primary" size="small">编辑</el-button>
-        <el-button type="primary" size="small">删除</el-button>
       </div>
       <div class="fr">
-        <el-button type="primary" size="small">导入</el-button>
-        <el-button type="primary" size="small">导出</el-button>
         <el-button type="primary" size="small">打印</el-button>
       </div>
     </div>
@@ -70,12 +66,6 @@
         >
           <el-table-column
             align="center"
-            type="index"
-            min-width="160"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            align="center"
             label="经销商编码"
             prop="customerNumber"
             min-width="160"
@@ -105,28 +95,28 @@
           <el-table-column
             align="center"
             label="创建人"
-            prop="createMan"
+            prop="createBy"
             min-width="160"
             show-overflow-tooltip
           />
           <el-table-column
             align="center"
             label="创建时间"
-            prop="createDate"
+            prop="createTime"
             min-width="160"
             show-overflow-tooltip
           />
           <el-table-column
             align="center"
             label="更新人"
-            prop="updateMan"
+            prop="updateBy"
             min-width="160"
             show-overflow-tooltip
           />
           <el-table-column
             align="center"
             label="更新时间"
-            prop="updateDate"
+            prop="updateTime"
             min-width="160"
             show-overflow-tooltip
           />
@@ -181,14 +171,15 @@
       <el-form
         ref="dialogForm"
         :model="dialogForm"
-        label-width="100px"
+        :rules="rules"
+        label-width="110px"
         label-position="right"
       >
-        <el-form-item label="经销商名称">
+        <el-form-item label="经销商名称" prop="customerId">
           <el-select
             class="inputStyle"
             v-model="dialogForm.customerId"
-            placeholder="名称"
+            placeholder="请选择"
           >
             <el-option
               v-for="item in dealerList"
@@ -200,13 +191,18 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="押金比例">
-          <el-input v-model="dialogForm.rate" class="inputStyle"></el-input>
+        <el-form-item label="押金比例" prop="rate">
+          <el-input v-model.number="dialogForm.rate" class="inputStyle">
+            <i class="el-input__icon" slot="suffix">% </i>
+          </el-input>
         </el-form-item>
-        <el-form-item label="押金定额金额">
-          <el-input v-model="dialogForm.amount" class="inputStyle"></el-input>
+        <el-form-item label="押金定额金额" prop="amount">
+          <el-input
+            v-model.number="dialogForm.amount"
+            class="inputStyle"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="开始时间">
+        <el-form-item label="开始时间" prop="startTime">
           <el-date-picker
             class="inputStyle"
             v-model="dialogForm.startTime"
@@ -217,7 +213,7 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="结束时间">
+        <el-form-item label="结束时间" prop="endTime">
           <el-date-picker
             class="inputStyle"
             v-model="dialogForm.endTime"
@@ -228,7 +224,7 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="备注">
+        <el-form-item label="备注" prop="remark">
           <el-input
             type="textarea"
             v-model="dialogForm.remark"
@@ -254,9 +250,30 @@ import {
   editDealerDeposit,
   infoDealerDeposit,
 } from "@/api/basic_data/dealer";
+import { number } from "echarts";
 
 export default {
   data() {
+    // var amount = (rule, value, callback) => {
+    //   console.log(rule, value);
+    //   console.log(this.dialogForm);
+    //   if (this.dialogForm.rate !== 0) {
+    //     this.$message.warning("已选押金比例,如需选择定额押金,请把押金比例归零");
+    //     // callback(new Error("已选押金比例,如需选择定额押金,请把押金比例归零"));
+    //   } else {
+    //     callback();
+    //   }
+    // };
+    // var rate = (rule, value, callback) => {
+    //   console.log(rule, value);
+    //   console.log(this.dialogForm);
+    //   if (this.dialogForm.amount !== 0) {
+    //     this.$message.warning("已选定额押金,如需选择押金比例,请把定额押金归零");
+    //     // callback(new Error("已选定额押金,如需选择押金比例,请把定额押金归零"));
+    //   } else {
+    //     callback();
+    //   }
+    // };
     return {
       title: "",
       currentPage: 1, // 当前页码
@@ -267,16 +284,64 @@ export default {
         customerName: "",
       },
       dialogForm: {
-        amount: 0,
+        amount: "",
         customerId: "",
         customerName: "",
         customerNumber: "",
         endTime: "",
 
-        rate: 0,
+        rate: "",
         remark: "",
         startTime: "",
       },
+      rules: {
+        rate: [
+          {
+            pattern: /^(?:[1-9]?\d|100)$/,
+            message: "请输入0-100的数字",
+            trigger: "blur",
+            type: "number",
+            required: true,
+          },
+          // {
+          //   validator: rate,
+          //   trigger: "blur",
+          // },
+        ],
+        amount: [
+          {
+            trigger: "blur",
+            message: "请输入定额押金",
+            type: "number",
+            required: true,
+          },
+          // {
+          //   validator: amount,
+          //   trigger: "blur",
+          // },
+        ],
+        customerId: [
+          {
+            message: "请选择经销商名称",
+            trigger: "blur",
+            required: true,
+          },
+        ],
+        startTime: [
+          {
+            message: "请选择开始时间",
+            trigger: "blur",
+            required: true,
+          },
+        ],
+        endTime: [
+          {
+            message: "请选择结束时间",
+            trigger: "blur",
+            required: true,
+          },
+        ],
+      },
       showDialog: false,
       dataList: [],
       dealerList: [],
@@ -288,18 +353,8 @@ export default {
   },
   methods: {
     //取消
-    cancelFn() {
-      this.dialogForm = {
-        amount: 0,
-        customerId: "",
-        customerName: "",
-        customerNumber: "",
-        endTime: "",
-
-        rate: 0,
-        remark: "",
-        startTime: "",
-      };
+    async cancelFn() {
+      await this.$refs.dialogForm.resetFields();
       this.showDialog = false;
     },
     //编辑
@@ -308,6 +363,7 @@ export default {
       this.title = "编辑经销商工程机配置";
       const res = await infoDealerDeposit({ id });
       this.dialogForm = res.data;
+      this.dialogForm.rate = parseInt(res.data.rate * 100);
       this.showDialog = true;
     },
     //删除
@@ -355,6 +411,15 @@ export default {
       this.listTotal = res.data.total;
     },
     async addDataListFn() {
+      await this.$refs.dialogForm.validate();
+
+      // if (this.dialogForm.rate !== 0) {
+      //   this.dialogForm.amount = 0;
+      // }
+      // if (this.dialogForm.amount !== 0) {
+      //   this.dialogForm.rate = 0;
+      // }
+
       let res = this.dealerList.filter(
         (v) => v.id === this.dialogForm.customerId
       )[0];
@@ -363,12 +428,15 @@ export default {
       this.dialogForm.customerNumber = res.number;
 
       if (this.dialogForm.id) {
-        await editDealerDeposit({ ...this.dialogForm });
+        await editDealerDeposit({
+          ...this.dialogForm,
+          rate: this.dialogForm.rate / 100,
+        });
         this.$message.success("编辑成功");
       } else {
         await getDealerDepositAdd({
           ...this.dialogForm,
-          rate: Number(this.dialogForm.rate),
+          rate: Number(this.dialogForm.rate / 100),
           amount: Number(this.dialogForm.amount),
         });
         this.$message.success("添加成功");

src/views/basic_data/dealer/dealer_list.vue

@@ -43,11 +43,6 @@
             stripe
           >
             <el-table-column
-              type="selection"
-              align="center"
-              min-width="160"
-            ></el-table-column>
-            <el-table-column
               align="center"
               label="客户编码"
               prop="number"
@@ -60,24 +55,28 @@
               label="客户名称"
               prop="name"
               min-width="160"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               align="center"
               label="简称"
               prop="shortName"
               min-width="160"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               align="center"
               label="单据状态"
               prop="danJuZhuangTai"
               min-width="160"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               prop="forbidStatus"
               align="center"
               label="禁用状态"
               min-width="160"
+              show-overflow-tooltip
             >
               <template slot-scope="scope">
                 <el-tag type="success" v-if="scope.row.forbidStatus === 'A'"
@@ -91,26 +90,30 @@
             <el-table-column
               align="center"
               label="使用组织"
-              prop="useOrgId"
+              prop="useOrgName"
               min-width="160"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               align="center"
               label="审核人"
               prop="shenHeRen"
               min-width="160"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               align="center"
               label="审核日期"
               prop="shenHeDate"
               min-width="160"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               align="center"
               label="客户分组"
               prop="keHu"
               min-width="160"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               align="center"

src/views/basic_data/dealer/dealer_stock.vue

@@ -50,7 +50,7 @@
     <div class="btn-group clearfix">
       <div class="fl">
         <el-button type="primary" size="small" @click="addFn">新增</el-button>
-        <el-button type="primary" size="small">编辑</el-button>
+
         <el-popconfirm @onConfirm="deleFn" title="这是一段内容确定删除吗？">
           <el-button
             type="primary"
@@ -62,8 +62,6 @@
         </el-popconfirm>
       </div>
       <div class="fr">
-        <el-button type="primary" size="small">导入</el-button>
-        <el-button type="primary" size="small">导出</el-button>
         <el-button type="primary" size="small">打印</el-button>
       </div>
     </div>
@@ -144,7 +142,6 @@
             show-overflow-tooltip
           >
             <template slot-scope="scope">
-              <el-button type="text" class="textColor">编辑</el-button>
               <el-popconfirm
                 @onConfirm="deleFn(scope.row.id)"
                 title="这是一段内容确定删除吗？"
@@ -182,11 +179,12 @@
     >
       <el-form
         ref="addForm"
+        :rules="rules"
         :model="addForm"
         label-width="100px"
         label-position="right"
       >
-        <el-form-item label="经销商名称">
+        <el-form-item label="经销商名称" prop="customerId">
           <el-select
             class="selectStyle"
             v-model="addForm.customerId"
@@ -201,7 +199,7 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="存货分类">
+        <el-form-item label="存货分类" prop="mainId">
           <el-select
             class="selectStyle"
             v-model="addForm.mainId"
@@ -218,7 +216,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogForm = false">取 消</el-button>
+        <el-button @click="cancelFn">取 消</el-button>
         <el-button type="primary" @click="addDataListFn">确 定</el-button>
       </div>
     </el-dialog>
@@ -233,7 +231,7 @@ import {
   getDictionaries,
 } from "@/api/basic_data/dealer";
 import { getDealerList } from "@/api/basic_data/dealer";
-import { findElem } from "@/utils/util";
+
 export default {
   data() {
     return {
@@ -245,6 +243,15 @@ export default {
         mainId: "",
         mainName: "",
       },
+      rules: {
+        mainId: [
+          { required: true, message: "请选择存货分类", trigger: "change" },
+        ],
+        customerId: [
+          { required: true, message: "请选择经销商", trigger: "change" },
+        ],
+      },
+
       currentPage: 1, // 当前页码
       pageSize: 10, // 每页数量
       listTotal: 0, // 列表总数
@@ -295,8 +302,8 @@ export default {
       this.dialogForm = true;
     },
     async addDataListFn() {
-      console.log(this.dealerList);
-      console.log(this.addForm.customerId);
+      await this.$refs.addForm.validate();
+
       // let id = this.dealerList.filter((i) => {
       //   return i.id === this.addForm.customerId;
       // })[0];
@@ -318,9 +325,15 @@ export default {
 
       await getDealerStockAdd({ ...this.addForm });
       this.$message.success("添加成功");
+      await this.$refs.addForm.resetFields();
       await this.getList({ pageNum: 1, pageSize: 10 });
       this.dialogForm = false;
     },
+    //取消
+    async cancelFn() {
+      await this.$refs.addForm.resetFields();
+      this.dialogForm = false;
+    },
     //获取经销商数据
     async getDealerDataList(data) {
       const res = await getDealerList(data);

src/views/basic_data/supplier/supplier_list.vue

@@ -45,11 +45,6 @@
             stripe
           >
             <el-table-column
-              type="selection"
-              align="center"
-              min-width="100"
-            ></el-table-column>
-            <el-table-column
               align="center"
               label="编码"
               prop="number"
@@ -60,7 +55,7 @@
             <el-table-column
               align="center"
               label="使用组织"
-              prop="useOrgId"
+              prop="useOrgName"
               min-width="100"
             ></el-table-column>
             <el-table-column

src/views/basic_data/taker/taker_car.vue

@@ -44,7 +44,7 @@
         <el-button type="primary" size="small" @click="addDataList"
           >新增</el-button
         >
-        <el-button type="primary" size="small">编辑</el-button>
+
         <el-popconfirm @onConfirm="delFn" title="这是一段内容确定删除吗？">
           <el-button
             size="small"
@@ -56,7 +56,6 @@
         </el-popconfirm>
       </div>
       <div class="fr">
-        <el-button type="primary" size="small">导入</el-button>
         <el-button type="primary" size="small" @click="exportFn"
           >导出</el-button
         >
@@ -98,28 +97,28 @@
           <el-table-column
             align="center"
             label="创建者"
-            prop="createUser"
+            prop="createBy"
             min-width="160"
             show-overflow-tooltip
           ></el-table-column>
           <el-table-column
             align="center"
             label="创建时间"
-            prop="createDate"
+            prop="createTime"
             min-width="160"
             show-overflow-tooltip
           ></el-table-column>
           <el-table-column
             align="center"
             label="更新者"
-            prop="updateUser"
+            prop="updateBy"
             min-width="160"
             show-overflow-tooltip
           ></el-table-column>
           <el-table-column
             align="center"
             label="更新时间"
-            prop="updateDate"
+            prop="updateTime"
             min-width="160"
             show-overflow-tooltip
           ></el-table-column>
@@ -171,9 +170,18 @@
       :show-close="false"
       :close-on-click-modal="false"
     >
-      <el-form ref="form" :model="addForm" label-width="120px">
-        <el-form-item label="经销商名称">
-          <el-select v-model="addForm.customerId" placeholder="名称">
+      <el-form
+        ref="addForm"
+        :rules="rules"
+        :model="addForm"
+        label-width="120px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="经销商名称" prop="customerId">
+          <el-select
+            v-model="addForm.customerId"
+            placeholder="请选择经销商名称"
+          >
             <el-option
               v-for="item in dealerList"
               :key="item.id"
@@ -185,23 +193,26 @@
         </el-form-item>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="车牌号">
+            <el-form-item label="车牌号" prop="carBrand">
               <el-input v-model="addForm.carBrand"></el-input> </el-form-item
           ></el-col>
           <el-col :span="12">
-            <el-form-item label="联系电话">
+            <el-form-item label="联系电话" prop="mobile">
               <el-input v-model="addForm.mobile"></el-input> </el-form-item
           ></el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="车型">
+            <el-form-item label="车型" prop="carType">
               <el-input v-model="addForm.carType"></el-input> </el-form-item
           ></el-col>
           <el-col :span="12">
-            <el-form-item label="体积">
-              <el-input v-model="addForm.volume"></el-input> </el-form-item
-          ></el-col>
+            <el-form-item label="体积" prop="volume">
+              <el-input v-model="addForm.volume">
+                <i class="el-input__icon" slot="suffix">m³ </i>
+              </el-input>
+            </el-form-item></el-col
+          >
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -236,6 +247,30 @@ export default {
         volume: "",
         carBrand: "",
       },
+      rules: {
+        customerId: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        mobile: [
+          {
+            required: true,
+            message: "请输入联系电话",
+            trigger: "blur",
+          },
+          {
+            required: true,
+            pattern:
+              /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
+            message: "联系电话格式不正确",
+            trigger: "blur",
+          },
+        ],
+        // carType: [{ required: true, message: "车型不能为空", trigger: "blur" }],
+        // volume: [{ required: true, message: "体积不能为空", trigger: "blur" }],
+        carBrand: [
+          { required: true, message: "车牌号不能为空", trigger: "blur" },
+        ],
+      },
       dialogForm: false,
       dataList: [],
       searchForm: {
@@ -247,8 +282,7 @@ export default {
     };
   },
   async created() {
-    await this.getDataList({ pageNum: 1, pageSize: 10 });
-    await this.getDealerDataList({ pageNum: 1, pageSize: 10 });
+    this.getDataList({ pageNum: 1, pageSize: 10 });
   },
   methods: {
     // 筛选部分数据或者单个
@@ -269,14 +303,8 @@ export default {
       downloadFiles("/take-car-record/export", screenData);
     },
     //取消
-    cancelFn() {
-      this.addForm = {
-        customerId: "",
-        mobile: "",
-        carType: "",
-        volume: "",
-        carBrand: "",
-      };
+    async cancelFn() {
+      await this.$refs.addForm.resetFields();
       this.dialogForm = false;
     },
     //编辑
@@ -315,8 +343,11 @@ export default {
     //新增
     addDataList() {
       this.dialogForm = true;
+      this.getDealerDataList({ pageNum: 1, pageSize: 10 });
     },
     async addDataListFn() {
+      await this.$refs.addForm.validate();
+
       const res = this.dealerList.filter(
         (v) => v.id === this.addForm.customerId
       )[0];
@@ -338,6 +369,7 @@ export default {
       //   volume: "",
       //   carBrand: "",
       // };
+      await this.$refs.addForm.resetFields();
       this.getDataList({ pageNum: this.currentPage, pageSize: this.pageSize });
       this.dialogForm = false;
     },

src/views/basic_data/taker/taker_list.vue

@@ -52,7 +52,6 @@
         <el-button type="primary" size="small" @click="addFn">新增</el-button>
       </div>
       <div class="fr">
-        <el-button type="primary" size="small">导入</el-button>
         <el-button type="primary" size="small" @click="exportFn"
           >导出</el-button
         >
@@ -72,11 +71,6 @@
           stripe
         >
           <el-table-column
-            type="selection"
-            align="center"
-            min-width="100"
-          ></el-table-column>
-          <el-table-column
             align="center"
             label="经销商名称"
             prop="customerName"
@@ -128,14 +122,14 @@
           <el-table-column
             align="center"
             label="创建人"
-            prop="createUser"
+            prop="createBy"
             min-width="160"
             show-overflow-tooltip
           ></el-table-column>
           <el-table-column
             align="center"
             label="创建时间"
-            prop="createDate"
+            prop="createTime"
             min-width="160"
             show-overflow-tooltip
           ></el-table-column>
@@ -195,7 +189,12 @@
       :show-close="false"
       :close-on-click-modal="false"
     >
-      <el-form ref="addForm" :model="addForm" label-width="120px">
+      <el-form
+        ref="addForm"
+        :rules="rules"
+        :model="addForm"
+        label-width="120px"
+      >
         <el-form-item label="经销商名称" prop="customerId">
           <el-select v-model="addForm.customerId" placeholder="名称">
             <el-option
@@ -255,13 +254,13 @@
           >
         </el-row>
         <!-- <el-form-item label="上传提货人附件">
-          <el-upload class="upload-demo">
+          <el-upload action="#" class="upload-demo" :on-success="handlefile">
             <el-button size="small" type="info">点击上传</el-button>
           </el-upload>
         </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogForm = false">取 消</el-button>
+        <el-button @click="cancelFn">取 消</el-button>
         <el-button type="primary" @click="addDataFn">确 定</el-button>
       </div>
     </el-dialog>
@@ -289,11 +288,61 @@ export default {
         takerName: "",
         identity: "",
         phone: "",
-        sparePhone: "",
+
         sparePhone: "",
         expireTime: "",
         code: "",
       },
+      rules: {
+        customerId: [
+          { required: true, message: "请选择经销商", trigger: "change" },
+        ],
+        takerName: [
+          { required: true, message: "请输入提货人姓名", trigger: "blur" },
+        ],
+        identity: [
+          {
+            required: true,
+
+            message: "请输入身份证号码",
+            trigger: "blur",
+          },
+          {
+            pattern:
+              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+            message: "身份证号格式不正确",
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message: "请输入联系电话",
+            trigger: "blur",
+          },
+          {
+            required: true,
+            pattern:
+              /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
+            message: "联系电话格式不正确",
+            trigger: "blur",
+          },
+        ],
+        sparePhone: [
+          {
+            required: true,
+            pattern:
+              /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
+            message: "请输入备用电话",
+            trigger: "blur",
+          },
+        ],
+        expireTime: [
+          { required: true, message: "有效期不能为空", trigger: "blur" },
+        ],
+        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
+      },
+
       dialogForm: false,
       dataList: [],
       searchForm: {
@@ -312,6 +361,15 @@ export default {
     changFn(v) {
       console.log(v);
     },
+    //取消
+    cancelFn() {
+      this.$refs.addForm.resetFields();
+      this.dialogForm = false;
+    },
+    //上传
+    handlefile(response, file, fileList) {
+      console.log(response, file, fileList);
+    },
     //导出
     exportFn() {
       let screenData = {
@@ -367,7 +425,8 @@ export default {
     },
     //新增
     async addDataFn() {
-      console.log(this.addForm);
+      await this.$refs.addForm.validate();
+
       const res = this.dealerList.filter(
         (v) => v.id === this.addForm.customerId
       )[0];