地区选择器

2022-01-13 16:47:34 +08:00
parent c1378fca9e
commit 1847db5fdc
7 changed files with 131 additions and 85 deletions
--- a/src/apps/AppCountryAlbum/AppCountryAlbum.vue
+++ b/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>
--- a/src/apps/AppPovertyAlleviation/Monitor/List.vue
+++ b/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()
--- a/src/apps/AppPovertyAlleviation/Monitor/Statistics.vue
+++ b/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()
--- a/src/apps/AppPovertyAlleviation/MonitorAdd.vue
+++ b/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">
-              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
-            </AiArea> -->
-            <AiAreaPicker ref="address" class="aiArea" :areaId="$areaId" mode="custom" all @select="onAreaChange">
-              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
+            <AiAreaPicker ref="address" class="aiArea" :fullName.sync="form.addressArea" :value="form.addressAreaId" :areaId="$areaId" mode="custom" all @select="onAreaChange">
+                <div class="aiArea">
+                  <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
+                  <i v-else>请选择</i>
+                  <u-icon name="arrow-right" color="#ddd"/>
+                </div>
            </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>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
+              <div class="aiArea">
+                <span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
+                <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
-      const areaList = this.$refs.address.fullArea
-      let fullAreaName = ''
-      areaList.forEach(item => {
-        fullAreaName = fullAreaName + item.name
-      })
-
-      this.form.addressArea = fullAreaName.replace('全国', '')
+      this.form.addressAreaId = e
    },

    onChange(e) {
-      this.form.placeAreaId = e.id
-      const areaList = this.$refs.area.fullArea
-      let fullAreaName = ''
-      areaList.forEach(item => {
-        fullAreaName = fullAreaName + item.name
-      })
-
-      this.form.placeArea = fullAreaName.replace('全国', '')
+      this.form.placeAreaId = e
    },

    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;
    }
--- a/src/apps/AppResidentActivitie/Add.vue
+++ b/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 {
--- a/src/components/AiAreaPicker.vue
+++ b/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" :class="{ self: index == op.id }" v-html="op.name"/>
-        <u-icon v-if="index == op.id" name="checkbox-mark" color="#4181FF"/>
+      <div class="fill pendingList">
+        <div class="pendingItem flexRow" flex v-for="op in pending" :key="op.id" @tap="getChild(op)">
+          <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) {
-      v && this.handleInit()
+    areaId(v) {
+      v && (this.getFullArea())
    }
  },
+  mounted () {
+    this.handleInit()
+  },
  methods: {
+    show() {
+      this.handleInit()
+      this.$refs.areaSelector.showPopup()
+    },
    getFullArea() {
-      let areaId = this.index || (this.all ? '' : this.$areaId)
-      return areaId && this.$http.post('/admin/area/getAllParentAreaId', null, {
+      let areaId = this.areaId || (this.all ? '' : this.$areaId)
+      return this.$http.post('/admin/area/getAllParentAreaId', null, {
        withoutToken: true,
        params: {areaId},
      }).then((res) => {
        if (res?.data) {
-          res.data.forEach(e => {
-            e.levelLabel = this.levelLabels[e.type]
+          res.data.forEach((e) => {
+            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)
-          self && this.list.unshift(self)
+          let self = this.fullArea.find((e) => e.id ==  this.areaId)
+          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()
-        else this.getChildAreas(this.currentSelector.id)
+        this.getChildAreas(this.currentArea.id || this.areaId)
      })
    },
    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 {
-    color: #333;
-    height: 104px;
-    text-align: start;
+  ::v-deep .pendingList {
+    padding: 0 32px 120px;

-    .self {
-      font-weight: bold;
+    .pendingItem {
+      color: #333;
+      height: 104px;
+      text-align: start;
+
+      .self {
+        font-weight: bold;
+      }
    }
  }

--- a/src/components/AiSelect.vue
+++ b/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;
  }
 }