赛事范围拆分（未完成）

src/setting.js

@@ -10,7 +10,7 @@ let host = `${location.origin}/`
 if (isDev) {
   jumpPath = 'http://192.168.31.125:8087/' // 本地调试-需要启动本地判分点系统
   host = 'http://121.37.12.51/'
-  host = 'http://192.168.31.151:9000/'// 榕
+  // host = 'http://192.168.31.151:9000/'// 榕
   // host = 'http://192.168.31.137:9000/'// 赓
 } else if (isPro) {
   jumpPath = 'https://www.huorantech.cn/judgmentPoint/'

src/views/match/add/index.vue

@@ -143,16 +143,21 @@
         </div>
 
         <el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false">
-          <el-cascader
-            ref="range"
-            v-model="range"
-            :props="props"
-            :show-all-levels="false"
-            clearable
-            filterable
-            :before-filter="beforeFilter"
-            :options="rangeList"
-            @input.native="rangeSearch"></el-cascader>
+          <el-select v-model="rangeForm.provinceId" multiple filterable clearable placeholder="请选择省份" @change="getCity" @clear="clearProvince">
+            <el-option v-for="(item,index) in provinces" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option>
+          </el-select>
+          
+          <el-select v-model="rangeForm.cityId" multiple filterable clearable placeholder="请选择城市" :disabled="rangeForm.provinceId ? false : true" @change="getSchool">
+            <el-option v-for="(item,index) in cities" :key="index" :label="item.cityName" :value="item.cityId"></el-option>
+          </el-select>
+          
+          <el-select v-if="rangeForm.cityId.length" v-model="rangeForm.schoolId" multiple filterable clearable placeholder="请选择学校">
+            <el-option v-for="(item,index) in schools" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
+          </el-select>
+          <el-select v-else v-model="rangeForm.schoolId" multiple filterable clearable placeholder="请选择学校">
+            <el-option v-for="(item,index) in allSchool" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
+          </el-select>
+          
           <span slot="footer" class="dialog-footer">
             <el-button size="small" @click="rangeVisible = false">取 消</el-button>
             <el-button size="small" type="primary" @click="rangeSubmit">确 定</el-button>
@@ -208,73 +213,19 @@ export default {
             range: [],
             rangeInit: [],
             rangeName: '',
-            // 选择区域懒加载
-            props: {
-              multiple: true,
-              checkStrictly: true,
-              lazy: true,
-              lazyLoad (node, resolve) {
-                // 如果是在模糊搜索中，则不再用懒加载请求数据
-                const input = document.querySelector('.el-cascader__search-input')
-                console.log("🚀 ~ file: index.vue ~ line 219 ~ lazyLoad ~ input", input, node)
-                if (input && input.value) return resolve([])
-                const { level, value } = node
-                // console.log("🚀 ~ file: index.vue ~ line 221 ~ lazyLoad ~ level", node)
-                // 省份
-                if (!level) {
-                  that.$get(that.api.queryProvince).then(({ list }) => {
-                    const data = []
-                    list.map(e => {
-                      data.push({
-                        value: e.provinceId,
-                        label: e.provinceName,
-                        children: []
-                      })
-                    })
-                    resolve(data)
-                  }).catch(res => {})
-                } else if (level === 1) {
-                  // 城市
-                  that.$get(that.api.queryCity, {
-                    provinceId: value
-                  }).then(({ list }) => {
-                    const data = []
-                    list.map(e => {
-                      data.push({
-                        provinceId: value,
-                        value: e.cityId,
-                        label: e.cityName
-                      })
-                    })
-                    resolve(data)
-                  }).catch(res => {})
-                } else if (level === 2) {
-                  // 学校
-                  that.$get(that.api.getSchoolsByProvince, {
-                    provinceId: node.data.provinceId,
-                    cityId: value,
-                    schoolName: ''
-                  }).then(({ list }) => {
-                    const data = []
-                    list.map(e => {
-                      data.push({
-                        value: e.schoolId,
-                        label: e.schoolName,
-                        leaf: true
-                      })
-                    })
-                    resolve(data)
-                  }).catch(res => {})
-                } else {
-                  resolve([])
-                }
-              }
-            },
             submiting: false,
             updateTime: 0,
             rangeTimer: null,
+            provinces: [],
+            cities: [],
             schools: [],
-            rangeList: []
+            rangeForm: {
+              provinceId: [],
+              cityId: [],
+              schoolId: []
+            },
+            allSchool: [],
+            curProvinceId: ''
         };
     },
     components: {
@@ -311,7 +262,8 @@ export default {
     },
     mounted() {
       this.getData()
-      this.getSchool()
+      this.getProvince()
+      this.getAllSchool()
     },
     methods: {
       getData() {
@@ -365,37 +317,48 @@ export default {
       showRange() {
         this.rangeVisible = true
       },
-      // 获取学校列表
-      getSchool() {
-        this.$get(this.api.querySchoolData).then(({ list }) => {
-          const result = []
-          list.map(e => {
-            result.push({
-              value: e.schoolId,
-              label: e.schoolName,
-              leaf: true
-            })
-          })
-          this.schools = result
+      // 获取省份列表
+      getProvince() {
+        this.$get(this.api.queryProvince).then(({ list }) => {
+          this.provinces = list
         }).catch(res => {})
       },
-      // 范围模糊查询前置钩子
-      beforeFilter() {
-        return false
+      // 清除省份
+      clearProvince(){
+        this.rangeForm.cityId = ''
+      },
+      // 获取城市列表
+      getCity(val) {
+        const { rangeForm } = this
+        rangeForm.cityId = ''
+        this.curProvinceId = val[val.length - 1] // 因为是多选，所以会有多个id，只取最后一个
+        this.$get(this.api.queryCity, {
+          provinceId: this.curProvinceId
+        }).then(({ list }) => {
+          this.cities = list
+        }).catch(res => {})
       },
-      // 范围筛选
-      rangeSearch(el) {
-        clearTimeout(this.rangeTimer)
-        this.rangeTimer = setTimeout(() => {
-          const val = el.target.value
-          let result = this.schools.filter(e => e.label.includes(val)) // 用学校列表做比对
-          this.rangeList = val ? result : []
-        }, 500)
+      // 获取指定省市的学校列表
+      getSchool(val) {
+        this.$get(this.api.getSchoolsByProvince, {
+          provinceId: this.curProvinceId,
+          cityId: val[val.length - 1]
+        }).then(({ list }) => {
+          this.schools = list
+        }).catch(res => {})
+      },
+      // 获取全部学校列表
+      getAllSchool() {
+        this.$get(this.api.querySchoolData).then(({ list }) => {
+          this.allSchool = list
+        }).catch(res => {})
       },
       // 范围确定
       rangeSubmit() {
         // 处理提交需要的id
         const data = []
+        console.log("🚀 ~ file: index.vue ~ line 360 ~ rangeSubmit ~ data", this.rangeForm)
+        return
         this.range.map(e => {
           data.push({
             provinceId: e[0] || '',
@@ -679,7 +642,12 @@ $upload-lg-height: 150px;
         margin-left: 32px;
     }
 }
-
+.range-dia {
+  .el-select {
+    width: 150px;
+    margin-right: 10px;
+  }
+}
 .add-btn {
     display: flex;
     justify-content: center;