优化

src/views/statistic/river/river.vue

@@ -3,8 +3,8 @@
     <el-container>
       <el-header height="60px">
         <template>
-          <el-form :inline="true" :model="queryParams" class="demo-form-inline">
-            <el-form-item label="时间维度">
+          <el-form :inline="true" :model="queryParams" :rules="rules" ref="queryParams" class="demo-form-inline">
+            <el-form-item label="时间维度" prop="dataType">
               <el-select v-model="queryParams.dataType" placeholder="时间维度" class="w100">
                 <el-option
                   v-for="item in dataTypes"
@@ -14,7 +14,7 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="开始时间">
+            <el-form-item label="开始时间" prop="startTime">
               <el-date-picker
                 v-model="queryParams.startTime"
                 type="datetime"
@@ -24,7 +24,7 @@
               >
               </el-date-picker>
             </el-form-item>
-            <el-form-item label="结束时间">
+            <el-form-item label="结束时间" prop="endTime">
               <el-date-picker
                 v-model="queryParams.endTime"
                 value-format="yyyy-MM-dd HH:mm:ss"
@@ -34,7 +34,7 @@
               >
               </el-date-picker>
             </el-form-item>
-            <el-form-item label="选择站点">
+            <el-form-item label="选择站点" prop="stnmId">
               <el-select v-model="queryParams.stnmId" placeholder="请选择站点" clearable>
                 <el-option
                   v-for="dict in stationList"
@@ -45,7 +45,7 @@
               </el-select>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="submitForm">查询</el-button>
+              <el-button type="primary" @click="submitForm('queryParams')">查询</el-button>
             </el-form-item>
           </el-form>
         </template>
@@ -85,6 +85,17 @@ export default {
   },
   data() {
     return {
+      rules: {
+        startTime: [
+          {  required: true, message: '请选择开始时间', trigger: 'change' }
+        ],
+        endTime: [
+          {  required: true, message: '请选择结束时间', trigger: 'change' }
+        ],
+        stnmId: [
+          { required: true, message: '请选择站点', trigger: 'change' }
+        ]
+      },
       // 遮罩层
       loading: true,
 
@@ -154,15 +165,20 @@ export default {
         startTime: this.queryParams.startTime,
         dataType: this.queryParams.dataType
       }
-      if(this.queryParams.dataType == -1){
-        this.tableTime = params.startTime.substring(0,19) +" 至 "+ params.endTime.substring(0,19);
-      }else if(this.queryParams.dataType==0){
-        this.tableTime = params.startTime.substring(0,16) +" 至 "+ params.endTime.substring(0,16);
-      }else{
-        this.tableTime = params.startTime.substring(0,10) +" 至 "+ params.endTime.substring(0,10);
-      }
-      this.drawChart(params);
-      this.drawTable(params);
+
+      this.$refs['queryParams'].validate((valid) => {
+        if (valid) {
+          if(this.queryParams.dataType == -1){
+            this.tableTime = params.startTime.substring(0,19) +" 至 "+ params.endTime.substring(0,19);
+          }else if(this.queryParams.dataType==0){
+            this.tableTime = params.startTime.substring(0,16) +" 至 "+ params.endTime.substring(0,16);
+          }else{
+            this.tableTime = params.startTime.substring(0,10) +" 至 "+ params.endTime.substring(0,10);
+          }
+          this.drawChart(params);
+          this.drawTable(params);
+        }
+      });
     },
     async drawChart(params) {
       console.log(params);