校验规则

project/pengliuyang/apps/AppCommunityResource/components/addResource.vue

@@ -8,29 +8,29 @@
       <template slot="content">
         <ai-card>
           <template #content>
-            <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
+            <el-form ref="form" class="ai-form" :model="form" :rules="rules" label-width="110px" label-position="right">
 
-              <el-form-item label="资源分类" style="width: 100%;" prop="categoryId" :rules="[{ required: true, message: '请选择资源分类', trigger: 'blur' }]">
+              <el-form-item label="资源分类" style="width: 100%;" prop="categoryId">
                 <ai-select v-model="form.categoryId" :selectList="categoryList"/>
               </el-form-item>
 
-              <el-form-item style="width: 100%" label="资源名称" prop="resourceName" :rules="[{ required: true, message: '请输入资源名称', trigger: 'blur' }]">
+              <el-form-item style="width: 100%" label="资源名称" prop="resourceName">
                 <el-input size="small" placeholder="请输入资源名称" show-word-limit v-model="form.resourceName" :maxlength="20"></el-input>
               </el-form-item>
 
-              <el-form-item style="width: 100%" label="地区" prop="type" :rules="[{ required: true, message: '选择地区', trigger: 'change' }]">
+              <el-form-item style="width: 100%" label="地区" prop="areaId">
                 <ai-area-get v-model="form.areaId" :instance="instance" @select="handleAreaSelect"/>
               </el-form-item>
 
-              <el-form-item style="width: 100%" label="地址" prop="type" :rules="[{ required: true, message: '请输入地址', trigger: 'change' }]">
+              <el-form-item style="width: 100%" label="地址" prop="address">
                 <el-input size="small" placeholder="请输入地址" v-model="form.address" show-word-limit maxlength="50"></el-input>
               </el-form-item>
 
-              <el-form-item style="width: 100%" label="地理位置" prop="type" :rules="[{ required: true, message: '请标绘地理位置', trigger: 'change' }]">
+              <el-form-item style="width: 100%" label="地理位置" prop="location">
                 <el-button @click="showMap = true">地图标绘</el-button>
               </el-form-item>
 
-              <el-form-item style="width: 100%" label="资源信息" prop="name">
+              <el-form-item style="width: 100%" label="资源信息">
                 <el-input size="small" type="textarea" :rows="5" placeholder="请输入资源信息" show-word-limit v-model="form.information" :maxlength="500"></el-input>
               </el-form-item>
             </el-form>
@@ -46,7 +46,6 @@
 
     <ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
       <div id="map"></div>
-
       <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
         <el-row type="flex" justify="space-between">
           <el-form-item label="经度">
@@ -76,6 +75,13 @@ export default {
     permissions: Function,
   },
   data() {
+    var locate =  (rule, value, callback) => {
+      if(!this.form.lat.length || !this.form.lng.length) {
+        return callback(new Error('请标绘地理位置'))
+      } else {
+        callback()
+      }
+    }
     return {
       form: {
         categoryName: '',
@@ -84,26 +90,43 @@ export default {
         areaId: '',
         areaName: '',
         address: '',
-        lng: '123.123',  // 经度
+        lng: '',  // 经度
-        lat: '123.123',  // 纬度
+        lat: '',  // 纬度
         information: '',
       },
       categoryList: [],
-      showMap: false,
       searchPlace: '',
       placeDetail: {
-        lat: '123.123',
+        lng: '',  // 经度
-        lng: '456.123',
+        lat: '',  // 纬度
-      }
+      },
+      map: null,
+      placeDetail: {
+        lng: '',
+        lat: '',
+      },
+      showMap: false,
+      searchPlace: '',
+      // locate
     }
   },
   created() {
     this.getCategoryList()
-    console.log(this.$router,'111')
+  },
+  computed: {
+    rules() {
+      return {
+        categoryId: [{ required: true, message: '请选择资源分类', trigger: 'blur' }],
+        resourceName: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
+        areaId: [{ required: true, message: '选择地区', trigger: 'change' }],
+        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
+        location: [{ required: true, validator: this.locate, trigger: 'change' }],
+      }
+    }
   },
   methods: {
     cancel() {
-      // currentPage: resourceManagement 
+      // currentPage: resourceManagement
       this.$router.push({hash: "#AppCommunityResource", query: {}})
     },
     getCategoryList() {
@@ -140,15 +163,12 @@ export default {
         }
       })
     },
-
     initMap({ lng, lat }) {
       AMapLoader.load({
         key: 'b553334ba34f7ac3cd09df9bc8b539dc',
         version: '2.0',
         plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
       }).then((AMap) => {
-        this.placeDetail.lng = this.form.lng
-        this.placeDetail.lat = this.form.lat
         this.map = new AMap.Map('map', {
           resizeEnable: true,
           zooms: [6, 20],
@@ -192,23 +212,37 @@ export default {
         this.map.setFitView()
       }
     },
+
+
     confirm() {
-      this.instance.post(`/app/appresourceinfo/addOrUpdate`, {
+      this.$refs.form.validate((valid) => {
-        ...this.form
+        if(valid) {
-      }).then(res => {
+          this.instance.post(`/app/appresourceinfo/addOrUpdate`, {
-        if (res.code == 0) {
+            ...this.form
-          this.$message.success('新增成功')
+          }).then(res => {
-          this.cancel()
+            if (res.code == 0) {
+              this.$message.success('新增成功')
+              this.cancel()
+            }
+          })
         }
       })
+      
     },
   },
 }
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .addResource {
 
+  ::v-deep .amap-logo {
+    display: none!important;
+  }
+  ::v-deep .amap-copyright {
+    display: none!important;
+  }
+
   ::v-deep .mapDialog {
     .el-dialog__body {
       padding: 0;