From ae043cb947761f3d8b7c27dbee6f8b892fb4866d Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 11 Jul 2022 14:31:51 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=9B=E4=BA=8B=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/match/add/index.vue | 150 +++++++++++++++++-----------------
 1 file changed, 76 insertions(+), 74 deletions(-)

diff --git a/src/views/match/add/index.vue b/src/views/match/add/index.vue
index 51d3232..17113d4 100644
--- a/src/views/match/add/index.vue
+++ b/src/views/match/add/index.vue
@@ -135,29 +135,21 @@
                 </el-form-item>
                 <el-form-item>
                     <el-button v-if="!form.id" @click="save(0)">保存</el-button>
-                    <el-button type="primary" @click="save(1)" v-auth="'/match:管理:大赛详情:发布'">发布</el-button>
-                    <el-button type="danger" @click="preview" v-auth="'/match:管理:大赛详情:预览'">预览</el-button>
+                    <el-button type="primary" @click="save(1)">发布</el-button>
+                    <el-button type="danger" @click="preview">预览</el-button>
                 </el-form-item>
             </el-form>
           </div>
         </div>
 
         <el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false">
-          <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>
-          
+          <el-cascader
+            ref="range"
+            v-model="range"
+            :props="props"
+            :show-all-levels="false"
+            clearable
+            filterable></el-cascader>
           <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>
@@ -213,19 +205,66 @@ export default {
             range: [],
             rangeInit: [],
             rangeName: '',
+            // 选择区域懒加载
+            props: {
+              multiple: true,
+              checkStrictly: true,
+              lazy: true,
+              lazyLoad (node, resolve) {
+                const { level, value } = node
+                // 省份
+                console.log('lazy', node, that.range)
+                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: [],
-            rangeForm: {
-              provinceId: [],
-              cityId: [],
-              schoolId: []
-            },
-            allSchool: [],
-            curProvinceId: ''
         };
     },
     components: {
@@ -262,8 +301,6 @@ export default {
     },
     mounted() {
       this.getData()
-      this.getProvince()
-      this.getAllSchool()
     },
     methods: {
       getData() {
@@ -299,6 +336,7 @@ export default {
               range.push(item)
             })
             this.range = range
+            console.log("🚀 ~ file: matchDetail.vue ~ line 327 ~ this.$post ~ this.range", this.range)
           }
           
           // 选择范围name
@@ -316,49 +354,18 @@ export default {
       // 选择范围
       showRange() {
         this.rangeVisible = true
+        console.log("🚀 ~ file: index.vue ~ line 384 ~ showRange ~ rangeVisible", this.range)
+        // this.range = this.rangeInit
       },
-      // 获取省份列表
-      getProvince() {
-        this.$get(this.api.queryProvince).then(({ list }) => {
-          this.provinces = list
-        }).catch(res => {})
-      },
-      // 清除省份
-      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 => {})
-      },
-      // 获取指定省市的学校列表
-      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 => {})
+      // 范围模糊查询
+      rangeFilter(node, keyword) {
+      console.log("🚀 ~ file: index.vue ~ line 363 ~ rangeFilter ~ node, keyword", node, keyword)
+        
       },
       // 范围确定
       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] || '',
@@ -402,7 +409,7 @@ export default {
         const data = {
           contestId: id || '',
           fileName: this.fileName,
-          filePath: file.fileUrl
+          filePath: file.fileUrl || file.fileId
         }
         this.form.contestAnnexList.push(data)
         // 编辑的时候需要调新增附件接口
@@ -642,12 +649,7 @@ $upload-lg-height: 150px;
         margin-left: 32px;
     }
 }
-.range-dia {
-  .el-select {
-    width: 150px;
-    margin-right: 10px;
-  }
-}
+
 .add-btn {
     display: flex;
     justify-content: center;