refactor:预警列表添加滚动条，提交按钮添加loading效果

src/views/announcement-management/index.vue

@@ -118,14 +118,14 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
+        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn" v-loading="loading">确 定</el-button>
         <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
       </div>
     </el-dialog>
     <el-dialog :title="releaseTitle" :visible.sync="releaseDialogVisible" width="30%">
       <span> 确定改变本条公告状态为“{{ type == 1 ? '发布' : '草稿' }}”吗？</span>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="toConfirm" size="small" class="primaryBtn">确 定</el-button>
+        <el-button type="primary" @click="toConfirm" size="small" class="primaryBtn" v-loading="fbLoading">确 定</el-button>
         <el-button @click="releaseDialogVisible = false" size="small">取 消</el-button>
       </span>
     </el-dialog>
@@ -198,6 +198,8 @@ export default {
         createrName: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
         images: [{ required: true, validator: valiIcon, trigger: 'change' }]
       },
+      loading:false,
+      fbLoading:false,
       announcementId: ''
     }
   },
@@ -254,7 +256,6 @@ export default {
       this.form = JSON.parse(JSON.stringify(row))
       this.objClass.upLoadHide = true
       this.objClass.upLoadShow = false
-      console.info(row)
       if(row.images!=null){
         const fileName = row.images.substring(row.images.lastIndexOf('/') + 1);
         this.fileList = [{name:fileName,url:row.images}]
@@ -330,8 +331,10 @@ export default {
       this.addDialogVisible = true
     },
     toConfirm() {
+      this.fbLoading = true
       if (this.type == 1) {
         toPublish(this.announcementId).then((res) => {
+          this.fbLoading = false
           if (res.data) {
             this.$message({
               message: '发布成功',
@@ -347,6 +350,7 @@ export default {
         })
       } else {
         toTakeDown(this.announcementId).then((res) => {
+          this.fbLoading = false
           if (res.data) {
             this.$message({
               message: '下架成功',
@@ -366,8 +370,10 @@ export default {
     confirmSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
+          this.loading = true
           if (this.titleType == 'add') {
             toAddAnnouncement(this.form).then((res) => {
+              this.loading = false
               if (res.data) {
                 this.$message({
                   message: '新增成功',
@@ -384,6 +390,7 @@ export default {
             })
           } else {
             toUpdateAnnouncement(this.form).then((res) => {
+              this.loading = false
               if (res.data) {
                 this.$message({
                   message: '新增成功',
@@ -411,6 +418,7 @@ export default {
         announcementStatus: 2,
         announcementContent: ''
       }
+      this.$refs.form.resetFields();
     },
     handleRemove(file, fileList) {
       this.objClass.upLoadHide = false

src/views/hydrological-station/hyInfo.vue

@@ -72,7 +72,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
+        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn" v-loading="loading">确 定</el-button>
         <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
       </div>
     </el-dialog>
@@ -102,6 +102,7 @@ export default {
       callback()
     }
     return {
+      loading:false,
       searchForm: {
         stationName: '',
         stationCode: '',
@@ -201,8 +202,10 @@ export default {
     confirmSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
+          this.loading = true
           if (this.titleType == 'add') {
             toAddhydrological(this.form).then((res) => {
+              this.loading = false
               if (res.data) {
                 this.$message({
                   message: '新增成功',
@@ -219,6 +222,7 @@ export default {
             })
           } else {
             toUpdatehydrological(this.form).then((res) => {
+              this.loading = false
               if (res.data) {
                 this.$message({
                   message: '修改成功',
@@ -247,6 +251,7 @@ export default {
         stationDetails: '',
         stationLocation: ''
       }
+      this.$refs.form.resetFields();
     }
   }
 }

src/views/hydrological-station/jcInfo.vue

@@ -60,17 +60,17 @@
       <el-button size="small" @click="toBack">返回</el-button>
     </div>
     <el-dialog :title="title" :visible.sync="addDialogVisible">
-      <el-form ref="form" :model="form" label-width="130px" class="addJcForm">
-        <el-form-item label="实时高程："> <el-input v-model="form.realTimeElevation" type="number" :min="380" :max="420"></el-input> <span>m</span> </el-form-item>
-        <el-form-item label="昨日最高高程："> <el-input v-model="form.maxElevationYesterday" type="number" :min="380" :max="420"> </el-input><span>m</span> </el-form-item>
+      <el-form ref="form" :rules="rules" :model="form" label-width="140px" class="addJcForm">
+        <el-form-item label="实时高程：" prop="realTimeElevation"> <el-input v-model="form.realTimeElevation" type="number" :min="380" :max="420"></el-input> <span>m</span> </el-form-item>
+        <el-form-item label="昨日最高高程：" prop="maxElevationYesterday"> <el-input v-model="form.maxElevationYesterday" type="number" :min="380" :max="420"> </el-input><span>m</span> </el-form-item>
         <el-form-item label="1小时雨量："> <el-input v-model="form.precipitationOneH" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item>
         <el-form-item label="当天雨量："> <el-input v-model="form.precipitationToday" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item>
-        <el-form-item label="实时流量："> <el-input v-model="form.realTimeDischarge" type="number" :min="0"> </el-input> <span>m³/s</span> </el-form-item>
+        <el-form-item label="实时流量：" prop="realTimeDischarge"> <el-input v-model="form.realTimeDischarge" type="number" :min="0"> </el-input> <span>m³/s</span> </el-form-item>
         <el-form-item label="实时流速："> <el-input v-model="form.realTimeVelocity" type="number" :min="0"> </el-input><span>m/s</span> </el-form-item>
         <el-form-item label="创建人："> <el-input v-model="form.createrName"> </el-input></el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
+        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn" v-loading="loading">确 定</el-button>
         <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
       </div>
     </el-dialog>
@@ -85,6 +85,23 @@ export default {
     id:Number
   },
   data() {
+    const validateNumber = (rule, value, callback) => {
+          // 确保是数字
+          if (isNaN(value)) {
+            return callback(new Error('请输入有效的数字'));
+          }
+          
+          // 转换为数字类型
+          const numValue = Number(value);
+          
+          if (numValue < 380) {
+            return callback(new Error('数值不能小于380'));
+          } else if (numValue > 420) {
+            return callback(new Error('数值不能大于420'));
+          } else {
+            callback();
+          }
+        };
     return {
       searchForm: {
         stationId:this.id,
@@ -94,6 +111,7 @@ export default {
         startTime: '',
         endTime:''
       },
+      loading:false,
       rangeDate:[],
       imageUrl: '',
       form: {
@@ -106,6 +124,17 @@ export default {
         realTimeVelocity:'',
         createrName:''
       },
+      rules: {
+            realTimeElevation: [
+              { required: true, message: '请输入实时高程', trigger: 'blur' },
+              { validator: validateNumber, trigger: ['blur', 'change'] }
+            ],
+            maxElevationYesterday: [
+              { required: true, message: '请输入昨日最高高程', trigger: 'blur' },
+              { validator: validateNumber, trigger: ['blur', 'change'] }
+            ],
+            realTimeDischarge:[{ required: true, message: '请输入实时流量', trigger: 'blur' }]
+          },
       tableData: [],
       currentPage: 1,
       pageSize: 10,
@@ -203,8 +232,10 @@ export default {
      confirmSubmit() {
        this.$refs.form.validate((valid) => {
         if (valid) {
+          this.loading = true
       if (this.titleType == 'add') {
         toAddMonitoring(this.form).then((res) => {
+           this.loading = false
           if (res.data) {
             this.$message({
               message: '新增成功',
@@ -221,6 +252,7 @@ export default {
         })
       } else {
         toUpdateMonitoring(this.form).then((res) => {
+           this.loading = false
           if (res.data) {
             this.$message({
               message: '修改成功',
@@ -265,6 +297,7 @@ export default {
         realTimeVelocity:'',
         createrName:''
       }
+      this.$refs.form.resetFields();
     }
   }
 }

src/views/smart-early-warning/left.vue

@@ -175,6 +175,11 @@ export default {
       border-top: 0;
       border-bottom: 0;
       margin-top: px-to-rem(11);
+      height: 94%;
+      overflow: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
       :deep(.el-collapse-item__header) {
         background: #2c5789;
         font-weight: 500;