地区选择器

src/apps/AppCountryAlbum/AppCountryAlbum.vue

@@ -3,7 +3,7 @@
     <div class="list">
       <AiTopFixed>
         <div class="area-content">
-          <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
+          <AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName">
             <img src="./img/local-icon.png" alt="">
             <span class="label" v-if="areaName">{{ areaName }}</span>
             <span v-else>请选择</span>
@@ -19,7 +19,6 @@
         </div>
         <AiEmpty v-if="!list.length"/>
       </div>
-
     </div>
   </div>
 </template>

src/apps/AppPovertyAlleviation/Monitor/List.vue

@@ -7,11 +7,11 @@
         <div class="label" v-if="addressArea">{{ addressArea }}</div>
         <i v-else>请选择</i>
       </AiArea> -->
-      <AiAreaPicker ref="area" class="aiArea" :name.sync="addressArea" :areaId="areaId" mode="custom"
+      <ai-area-picker ref="area" class="aiArea" :value="addressAreaId" :name.sync="addressArea" :areaId="areaId" mode="custom"
                     @select="onChange">
         <span class="label" v-if="addressArea">{{ addressArea }}</span>
         <i v-else>请选择</i>
-      </AiAreaPicker>
+      </ai-area-picker>
     </div>
     <div class="list-wrapper">
       <div class="tab">
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import AiAreaPicker from '@/components/AiAreaPicker'
 
 export default {
   name: 'list',
@@ -62,6 +63,10 @@ export default {
     }
   },
 
+  components: {
+    AiAreaPicker
+  },
+
   created() {
     uni.showLoading()
     this.areaId = this.$store.state.user.areaId
@@ -86,7 +91,7 @@ export default {
     },
 
     onChange(e) {
-      this.addressAreaId = e.id
+      this.addressAreaId = e
 
       this.$nextTick(() => {
         this.reload()

src/apps/AppPovertyAlleviation/Monitor/Statistics.vue

@@ -3,7 +3,7 @@
     <div class="area">
       <i>可选范围</i>
       <span class="separat">/</span>
-      <AiAreaPicker ref="area" class="aiArea" :areaId="areaId" :name.sync="addressArea" mode="custom"
+      <AiAreaPicker ref="area" class="aiArea" :value="addressAreaId" :areaId="areaId" :name.sync="addressArea" mode="custom"
                     @select="onChange">
         <span class="label" v-if="addressArea">{{ addressArea }}</span>
         <i v-else>请选择</i>
@@ -100,7 +100,7 @@ export default {
     },
 
     onChange(e) {
-      this.addressAreaId = e.id
+      this.addressAreaId = e
 
       this.$nextTick(() => {
         this.reload()

src/apps/AppPovertyAlleviation/MonitorAdd.vue

@@ -33,15 +33,12 @@
             <span>地址</span>
           </div>
           <div class="right">
-            <!-- <AiArea class="aiArea" v-model="form.addressAreaId" mode="custom" fullname :areaRange="$areaId" :name.sync="form.addressArea">
+            <AiAreaPicker ref="address" class="aiArea" :fullName.sync="form.addressArea" :value="form.addressAreaId" :areaId="$areaId" mode="custom" all @select="onAreaChange">
-              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
+                <div class="aiArea">
-              <i v-else>请选择</i>
+                  <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
-              <u-icon name="arrow-right" color="#ddd"/>
+                  <i v-else>请选择</i>
-            </AiArea> -->
+                  <u-icon name="arrow-right" color="#ddd"/>
-            <AiAreaPicker ref="address" class="aiArea" :areaId="$areaId" mode="custom" all @select="onAreaChange">
+                </div>
-              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
             </AiAreaPicker>
           </div>
         </div>
@@ -81,11 +78,13 @@
             <span>安置地区</span>
           </div>
           <div class="right">
-            <AiAreaPicker ref="area" class="aiArea" :areaId.sync="form.placeAreaId" mode="custom" all
+            <AiAreaPicker ref="area" class="aiArea" :value="form.placeAreaId" :fullName.sync="form.placeArea" mode="custom" all
                           @select="onChange">
-              <span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
+              <div class="aiArea">
-              <i v-else>请选择</i>
+                <span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
-              <u-icon name="arrow-right" color="#ddd"/>
+                <i v-else>请选择</i>
+                <u-icon name="arrow-right" color="#ddd"/>
+              </div>
             </AiAreaPicker>
           </div>
         </div>
@@ -174,25 +173,11 @@ export default {
     },
 
     onAreaChange(e) {
-      this.form.addressAreaId = e.id
+      this.form.addressAreaId = e
-      const areaList = this.$refs.address.fullArea
-      let fullAreaName = ''
-      areaList.forEach(item => {
-        fullAreaName = fullAreaName + item.name
-      })
-
-      this.form.addressArea = fullAreaName.replace('全国', '')
     },
 
     onChange(e) {
-      this.form.placeAreaId = e.id
+      this.form.placeAreaId = e
-      const areaList = this.$refs.area.fullArea
-      let fullAreaName = ''
-      areaList.forEach(item => {
-        fullAreaName = fullAreaName + item.name
-      })
-
-      this.form.placeArea = fullAreaName.replace('全国', '')
     },
 
     getInfo(id) {
@@ -218,6 +203,11 @@ export default {
     align-items: center;
 
     .label {
+      max-width: 480px;
+      height: 112px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
       color: #303133 !important;
       font-size: 30px;
     }

src/apps/AppResidentActivitie/Add.vue

@@ -20,7 +20,8 @@
         <div class="line"></div>
 
         <u-form-item label="发布地区" prop="areaId" required :border-bottom="false" right-icon="arrow-right" class="addresss">
-          <AiAreaPicker v-model="forms.areaId" :areaId="areaId" @select="areaSelect" style="color: #333"></AiAreaPicker>
+          <AiAreaPicker v-model="forms.areaId" :areaId="user.areaId" @select="areaSelect" style="color: #333">
+          </AiAreaPicker>
         </u-form-item>
 
         <div class="line"></div>
@@ -73,7 +74,6 @@ export default {
         content: '',
         url: [],
         areaId: '',
-
         beginTime: '',
         endTime: '',
         address: '',
@@ -234,7 +234,7 @@ export default {
     },
 
     areaSelect(e) {
-      this.forms.areaId = e.id
+      this.forms.areaId = e
     },
   },
 }
@@ -245,6 +245,29 @@ export default {
   height: 100%;
   padding-bottom: 112px;
 
+  .aiArea {
+    display: flex;
+    align-items: center;
+
+    .label {
+      max-width: 480px;
+      height: 112px;
+      line-height: 112px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+      color: #303133 !important;
+      font-size: 30px;
+    }
+
+    i {
+      margin-left: 4px;
+      font-style: normal;
+      color: #999999;
+      font-size: 30px;
+    }
+  }
+
   .header-description {
     padding-bottom: 112px;
     ::v-deep .u-form {

src/components/AiAreaPicker.vue

@@ -5,7 +5,7 @@
         <slot v-if="$slots.default"/>
         <div v-else class="areaSelector">
           <image :src="locationIcon" class="location"/>
-          <div v-text="selected.name || name"/>
+          <div v-text="selected.name || currentArea.name"/>
         </div>
       </div>
       <div class="areaSelector">
@@ -26,14 +26,15 @@
           <b>选择地区</b>
           <em>选择区域</em>
           <div class="selectedArea" v-if="hasSelected"/>
-          <div/>
           <span v-text="'行政区域'"/>
         </div>
         <!--end-->
       </div>
-      <div class="pendingItem flexRow" flex v-for="op in pending" :key="op.id" @tap="getChild(op)">
+      <div class="fill pendingList">
-        <div class="fill" :class="{ self: index == op.id }" v-html="op.name"/>
+        <div class="pendingItem flexRow" flex v-for="op in pending" :key="op.id" @tap="getChild(op)">
-        <u-icon v-if="index == op.id" name="checkbox-mark" color="#4181FF"/>
+          <div class="fill" :class="{ self: index == op.id }" v-html="op.name"/>
+          <u-icon v-if="index == op.id" name="checkbox-mark" color="#4181FF"/>
+        </div>
       </div>
       <div class="bottomBtns">
         <div @click="closePopup">取消</div>
@@ -51,14 +52,10 @@ import {mapState} from 'vuex'
 export default {
   name: 'AiAreaPicker',
   components: {AiCell, AiSearchPopup},
-  model: {
-    prop: "value",
-    event: "select"
-  },
   props: {
-    value: {default: ""},
     areaId: {default: ''},
     name: {default: ''},
+    value: String,
     all: Boolean,
     icon: {default: "location.svg"}
   },
@@ -76,7 +73,7 @@ export default {
       })
       return level
     },
-    currentSelector() {
+    currentArea() {
       return this.fullArea?.slice(-1)?.[0] || {}
     },
     locationIcon() {
@@ -99,48 +96,52 @@ export default {
     }
   },
   watch: {
-    value(v) {
+    areaId(v) {
-      v && this.handleInit()
+      v && (this.getFullArea())
     }
   },
+  mounted () {
+    this.handleInit()
+  },
   methods: {
+    show() {
+      this.handleInit()
+      this.$refs.areaSelector.showPopup()
+    },
     getFullArea() {
-      let areaId = this.index || (this.all ? '' : this.$areaId)
+      let areaId = this.areaId || (this.all ? '' : this.$areaId)
-      return areaId && this.$http.post('/admin/area/getAllParentAreaId', null, {
+      return this.$http.post('/admin/area/getAllParentAreaId', null, {
         withoutToken: true,
         params: {areaId},
       }).then((res) => {
         if (res?.data) {
-          res.data.forEach(e => {
+          res.data.forEach((e) => {
-            e.levelLabel = this.levelLabels[e.type]
+            e && (e.levelLabel = this.levelLabels[e.type])
           })
-          if (!/0{3}$/g.test(areaId)) {//如果是村需要特殊处理
-            this.selected = res.data.shift()
-          } else {
-            this.selected = res.data?.[0]
-          }
-          this.$emit('update:name', this.selected.name)
           if (res.data.length > 1) {
-            this.fullArea = res.data.filter(e => !!e.levelLabel).reverse().slice(this.dataRange)
+            this.fullArea = res.data.reverse().slice(this.dataRange)
           } else {
             this.fullArea = res.data
           }
           return this.fullArea
         }
-      }) || Promise.reject()
+      })
     },
     getChildAreas(id) {
       id && this.$http.post('/admin/area/queryAreaByParentId', null, {
         withoutToken: true,
         params: {id},
       }).then((res) => {
-        if (res?.data) {
+        if (res.data.length) {
           this.list = res.data
-          let self = this.fullArea.find((e) => e.id == id)
+          let self = this.fullArea.find((e) => e.id ==  this.areaId)
-          self && this.list.unshift(self)
+          if (self.id) {
+            this.list.unshift(self)
+          }
         }
       })
     },
+
     getProvinces() {
       this.$http.post('/admin/area/queryProvinceList', null, {withoutToken: true}).then((res) => {
         if (res?.data) {
@@ -150,6 +151,15 @@ export default {
     },
     handleSelect() {
       this.$emit('select', this.index)
+      let fullName = ''
+      this.fullArea.forEach(v => {
+        fullName = fullName + v.name
+      })
+
+      if (this.selected.type == 5) {
+        fullName = fullName + this.selected.name
+      }
+      this.$emit('update:fullName', fullName)
       this.$emit('update:name', this.selected.name)
       this.closePopup()
     },
@@ -175,17 +185,20 @@ export default {
     },
     handleInit() {
       this.index = this.value || this.areaId
+
+      if (this.all && !this.areaId && !this.currentArea.id) {
+        this.getProvinces()
+
+        return false
+      }
+      console.log(this.index)
       this.getFullArea().then(() => {
-        if (this.all && !this.currentSelector.id) this.getProvinces()
+        this.getChildAreas(this.currentArea.id || this.areaId)
-        else this.getChildAreas(this.currentSelector.id)
       })
     },
     closePopup() {
       this.$refs.areaSelector?.handleSelect()
     }
-  },
-  created() {
-    !!this.value && this.handleInit()
   }
 }
 </script>
@@ -271,10 +284,6 @@ export default {
   }
 
   ::v-deep.u-drawer-content {
-    position: fixed;
-    border-radius: 32px 32px 0 0;
-    overflow: hidden;
-    padding: 0 32px 90px;
 
     .areaSelector {
       box-sizing: border-box;
@@ -282,13 +291,17 @@ export default {
     }
   }
 
-  ::v-deep.pendingItem {
+  ::v-deep .pendingList {
-    color: #333;
+    padding: 0 32px 120px;
-    height: 104px;
-    text-align: start;
 
-    .self {
+    .pendingItem {
-      font-weight: bold;
+      color: #333;
+      height: 104px;
+      text-align: start;
+
+      .self {
+        font-weight: bold;
+      }
     }
   }
 

src/components/AiSelect.vue

@@ -8,19 +8,24 @@
       <i v-else>{{ placeholder }}</i>
       <u-icon name="arrow-right" color="#ddd"/>
     </div>
-    <u-select v-model="show" :list="options" @confirm="handleConfirm"/>
+    <u-select v-model="show" :list="options" :mode="mode" @confirm="handleConfirm"/>
   </section>
 </template>
 
 <script>
 export default {
   name: "AiSelect",
+  model: {
+    event: "input",
+    prop: "value"
+  },
   props: {
     value: String,
     placeholder: {default: "请选择"},
     list: {default: () => []},
+    mode: {default: "single-column"},
     dict: {default: ""},
-    disabled: Boolean,
+    disabled: Boolean
   },
   computed: {
     selectedLabel() {
@@ -28,7 +33,7 @@ export default {
       return this.selected?.map(e => e.label)?.join(",") || label
     },
     options() {
-      return this.dict ? this.$dict.getDict(this.dict).map(e => ({
+      return this.dictKey ? this.$dict.getDict(this.dict).map(e => ({
         value: e.dictValue,
         label: e.dictName
       })) : this.list
@@ -37,13 +42,21 @@ export default {
   data() {
     return {
       show: false,
+      dictKey: '',
       selected: []
     }
   },
+
+  mounted () {
+    this.$dict.load(this.dict).then(() => {
+      this.dictKey = this.dict
+    })
+  },
   methods: {
     handleConfirm(v) {
       this.selected = v
       this.$emit("data", this.selected)
+      this.$emit("input", v[0].value)
       this.$forceUpdate()
     },
     handleShowOptions() {
@@ -70,12 +83,15 @@ export default {
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
+      font-size: 30px;
+      color: #333;
       white-space: nowrap;
     }
   }
 
   i {
     font-style: normal;
+    font-size: 30px;
     color: $uni-text-color-grey;
   }
 }