feat: 地址级联组件 + 经销标准合同 -新增使用该组件，并且保存处理地区id数据

史婷婷
1 parent 91ec5a27
Showing 4 changed files with 247 additions and 9 deletions
api/base.js
components/city-selector/index.vue
components/single-select/index.vue
pages/contract_retail/add.vue
--- a/api/base.js
View file @a848036
+++ b/api/base.js
View file @a848036
@@ -27,4 +27,14 @@ export function uploadFileApi(data) {
     data,
     contentType: ContentTypeEnum.BLOB
   })
+}
+
+/**
+ * 回去城市接口 省市区 一次性返回
+ */
+export function selectorCityApi() {
+  return request({
+    url: `/selector/city`,
+    method: 'get'
+  })
 }
--- a/components/city-selector/index.vue 0 → 100644
View file @a848036
+++ b/components/city-selector/index.vue 0 → 100644
View file @a848036
+<template>
+  <view>
+    <uni-popup ref="popup" type="bottom" :mask-click="false" :safe-area="true">
+      <view class="sheet">
+        <view class="sheet-header">
+          <text class="cancel" @click="onCancel">取消</text>
+          <text class="title">{{ title }}</text>
+          <text class="ok" @click="onConfirm">确认</text>
+        </view>
+        <view class="sheet-body">
+          <view class="columns">
+            <scroll-view class="col" scroll-y>
+              <view v-for="(p,i) in provinces" :key="valueOf(p,i)" :class="['option', { selected: isSelectedProvince(p) }]" @click="selectProvince(p)">
+                <text class="label">{{ labelOf(p) }}</text>
+              </view>
+            </scroll-view>
+            <scroll-view class="col" scroll-y>
+              <view v-for="(c,i) in cities" :key="valueOf(c,i)" :class="['option', { selected: isSelectedCity(c) }]" @click="selectCity(c)">
+                <text class="label">{{ labelOf(c) }}</text>
+              </view>
+            </scroll-view>
+            <scroll-view class="col" scroll-y>
+              <view v-for="(d,i) in districts" :key="valueOf(d,i)" :class="['option', { selected: isSelectedDistrict(d) }]" @click="selectDistrict(d)">
+                <text class="label">{{ labelOf(d) }}</text>
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+  </view>
+  
+</template>
+
+<script>
+import { selectorCityApi } from '@/api/base.js'
+export default {
+  name: 'CitySelector',
+  props: {
+    value: { type: Array, default: () => [] },
+    title: { type: String, default: '目的地' }
+  },
+  data() {
+    return {
+      tree: [],
+      provinces: [],
+      cities: [],
+      districts: [],
+      selectedProvince: null,
+      selectedCity: null,
+      selectedDistrict: null,
+      innerLabel: ''
+    }
+  },
+  watch: {
+    value(v) {
+      const arr = Array.isArray(v) ? v : []
+      if (!arr.length) { this.innerLabel = ''; this.selectedProvince = null; this.selectedCity = null; this.selectedDistrict = null }
+      if (arr.length && this.tree && this.tree.length > 0) this.restoreSelectionFromArray(arr)
+    }
+  },
+  methods: {
+    async open() {
+      if (!(this.tree && this.tree.length > 0)) {
+        try {
+          const res = await selectorCityApi()
+          const data = (res && res.data) ? res.data : []
+          this.tree = this.normalizeFlat(Array.isArray(data) ? data : [])
+          this.provinces = this.tree
+          if (Array.isArray(this.value) && this.value.length) this.restoreSelectionFromArray(this.value)
+        } catch (e) {
+          this.tree = []; this.provinces = []; this.cities = []; this.districts = []
+        }
+      }
+      this.$refs.popup && this.$refs.popup.open()
+    },
+    async getLabel() {
+      if (!(this.tree && this.tree.length > 0)) {
+        try {
+          const res = await selectorCityApi()
+          const data = (res && res.data) ? res.data : []
+          this.tree = this.normalizeFlat(Array.isArray(data) ? data : [])
+          this.provinces = this.tree
+        } catch (e) { this.tree = []; this.provinces = []; }
+      }
+      if (Array.isArray(this.value) && this.value.length) this.restoreSelectionFromArray(this.value)
+      return this.innerLabel
+    },
+    onCancel() {
+      this.$refs.popup && this.$refs.popup.close()
+    },
+    onConfirm() {
+      if (!(this.selectedProvince && this.selectedCity && this.selectedDistrict)) {
+        uni.showToast({ title: '请先选择省、市、区', icon: 'none' })
+        return
+      }
+      const a = [
+        String(this.selectedProvince.id),
+        String(this.selectedCity.id),
+        String(this.selectedDistrict.id)
+      ]
+      const parts = [this.selectedProvince, this.selectedCity, this.selectedDistrict].filter(Boolean).map(n => n.name)
+      this.innerLabel = parts.join(' / ')
+      this.$emit('input', a)
+      this.$emit('update:value', a)
+      this.$emit('change', { value: a, label: this.innerLabel })
+      this.$refs.popup && this.$refs.popup.close()
+    },
+    selectProvince(p) {
+      this.selectedProvince = p
+      this.cities = Array.isArray(p.children) ? p.children : []
+      this.selectedCity = null
+      this.districts = []
+      this.selectedDistrict = null
+    },
+    selectCity(c) {
+      this.selectedCity = c
+      this.districts = Array.isArray(c.children) ? c.children : []
+      this.selectedDistrict = null
+    },
+    selectDistrict(d) {
+      this.selectedDistrict = d
+    },
+    isSelectedProvince(p) { return this.selectedProvince && this.selectedProvince.id === p.id },
+    isSelectedCity(c) { return this.selectedCity && this.selectedCity.id === c.id },
+    isSelectedDistrict(d) { return this.selectedDistrict && this.selectedDistrict.id === d.id },
+    valueOf(n,i) { const v = n && (n.id != null ? n.id : (n.value != null ? n.value : (n.code != null ? n.code : i))); return String(v) },
+    labelOf(n) { const t = n && (n.name != null ? n.name : (n.label != null ? n.label : (n.text != null ? n.text : ''))); return String(t) },
+    normalizeFlat(list) {
+      const items = (list || []).map(it => {
+        const id = it.id != null ? it.id : (it.fid != null ? it.fid : (it.value != null ? it.value : (it.code != null ? it.code : '')))
+        const name = it.name != null ? it.name : (it.label != null ? it.label : (it.text != null ? it.text : ''))
+        const parentId = it.parentId != null ? it.parentId : (it.pid != null ? it.pid : (it.parent != null ? it.parent : (it.pId != null ? it.pId : '')))
+        return { id: String(id), name: String(name), parentId: parentId != null ? String(parentId) : '' }
+      })
+      const provinces = items.filter(x => !x.parentId)
+      const citiesMap = {}
+      for (const c of items.filter(x => x.parentId)) {
+        const k = c.parentId
+        if (!citiesMap[k]) citiesMap[k] = []
+        citiesMap[k].push({ id: c.id, name: c.name })
+      }
+      const districtsMap = {}
+      for (const d of items.filter(x => x.parentId)) {
+        districtsMap[d.parentId] = districtsMap[d.parentId] || []
+      }
+      const provincesWithChildren = provinces.map(p => {
+        const cs = citiesMap[p.id] || []
+        const csWithChildren = cs.map(c => ({ id: c.id, name: c.name, children: items.filter(x => x.parentId === c.id).map(y => ({ id: y.id, name: y.name })) }))
+        return { id: p.id, name: p.name, children: csWithChildren }
+      })
+      return provincesWithChildren
+    },
+    restoreSelectionFromArray(arr) {
+      const [pid, cid, did] = arr.map(v => String(v || ''))
+      const prov = (this.tree || []).find(n => String(n.id) === pid) || null
+      this.selectedProvince = prov
+      this.cities = prov && Array.isArray(prov.children) ? prov.children : []
+      const city = (this.cities || []).find(n => String(n.id) === cid) || null
+      this.selectedCity = city
+      this.districts = city && Array.isArray(city.children) ? city.children : []
+      const dist = (this.districts || []).find(n => String(n.id) === did) || null
+      this.selectedDistrict = dist
+      const parts = [this.selectedProvince, this.selectedCity, this.selectedDistrict].filter(Boolean).map(n => n.name)
+      this.innerLabel = parts.join(' ')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sheet {
+  width: 100%;
+  max-height: 60vh;
+  background: #fff;
+  border-radius: 20rpx 20rpx 0 0;
+  display: flex;
+  flex-direction: column;
+}
+.sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx 32rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.title { font-size: 36rpx; font-weight: 600; }
+.cancel { color: rgba(0,0,0,0.6); font-size: 28rpx; }
+.ok { color: $theme-primary; font-size: 28rpx; }
+.sheet-body { flex: 0 0 auto; padding: 0; height: 50vh; overflow: hidden; }
+.columns { display: flex; height: 50vh; }
+.col { flex: 1; height: 50vh; border-right: 1rpx solid #f0f0f0; }
+.col:last-child { border-right: none; }
+.option { line-height: 40rpx; padding: 20rpx; text-align: center; font-size: 32rpx; }
+.option .label { color: rgba(0,0,0,0.6); font-size: 32rpx; }
+.option.selected { background: #f3f3f3; }
+.option.selected .label { color: rgba(0,0,0,0.9); }
+</style>
--- a/components/single-select/index.vue
View file @a848036
+++ b/components/single-select/index.vue
View file @a848036
@@ -123,9 +123,8 @@ export default {
   padding: 32rpx;
 }
 .option {
-  height: 80rpx;
-  line-height: 80rpx;
-  padding: 0 20rpx;
+  padding: 20rpx;
+  line-height: 40rpx;
   background: #fff;
   text-align: center;
   border-radius: 12rpx;
--- a/pages/contract_retail/add.vue
View file @a848036
+++ b/pages/contract_retail/add.vue
View file @a848036
@@ -60,9 +60,12 @@
                         <uni-easyinput v-model="form.transportMode" placeholder="请输入运输方式" :inputBorder="false" />
                     </template>
                 </uni-list-item>
-                <uni-list-item title="目的地">
-                    <template v-slot:footer>
-                        <uni-easyinput v-model="form.destinationId" placeholder="请输入目的地" :inputBorder="false" />
+                
+                <uni-list-item class="select-item" :class="(Array.isArray(form.destinationId) && form.destinationId.length) ? 'is-filled' : 'is-empty'" clickable
+                    @click="openCitySelector" :rightText="form.destinationLabel || '请选择'" showArrow>
+                    <template v-slot:body>
+                        <view class="item-title"><text>目的地</text></view>
+                        <CitySelector ref="citySelectorRef" v-model="form.destinationId" @change="onCityChange" />
                     </template>
                 </uni-list-item>
                 <uni-list-item class="select-item" :class="form.includesPackagingFeeName ? 'is-filled' : 'is-empty'" clickable
@@ -200,13 +203,14 @@
 import SingleSelectSheet from '@/components/single-select/index.vue'
 import RelateSelectSheet from '@/components/relate-select/index.vue'
 import ProductRel from './productRel.vue'
+import CitySelector from '@/components/city-selector/index.vue'
 import { getRetailCodeApi, createContractApi } from '@/api/contract'
 import { getDicByCodes } from '@/utils/dic'
 import { formatCurrencyToChinese } from '@/utils/common'
 export default {
     name: 'AddContractRetail',
-    components: { SingleSelectSheet, RelateSelectSheet, ProductRel },
+    components: { SingleSelectSheet, RelateSelectSheet, ProductRel, CitySelector },
     data() {
         return {
             form: {
@@ -226,7 +230,9 @@ export default {
                 includesPackagingFeeName: '',
                 includesTransportFee: false,
                 includesTransportFeeName: '',
-                unit: '元、公斤、元/公斤'
+                unit: '元、公斤、元/公斤',
+                destinationId: [],
+                destinationLabel: ''
             },
             supplierList: [],
             specialTermsList: [],
@@ -246,6 +252,11 @@ export default {
         this.loadExtraOptions()
         this.initCode()
         this.form.orderDate = this.formatDate(new Date())
+        this.$nextTick(() => {
+            if (Array.isArray(this.form.destinationId) && this.form.destinationId.length) {
+                this.initDestinationLabel()
+            }
+        })
     },
     methods: {
         onProductsChange(products) {
@@ -300,6 +311,20 @@ export default {
             const val = m[field]
             return val ? String(val) : map[field]
         },
+        openCitySelector() {
+            this.$refs.citySelectorRef && this.$refs.citySelectorRef.open()
+        },
+        async initDestinationLabel() {
+            const comp = this.$refs.citySelectorRef
+            if (comp && typeof comp.getLabel === 'function') {
+                const label = await comp.getLabel()
+                this.form.destinationLabel = label || ''
+            }
+        },
+        onCityChange(payload) {
+            const label = payload && payload.label != null ? payload.label : ''
+            this.form.destinationLabel = label
+        },
         openSheet(field) {
             const setSheet = (title, options) => {
                 const current = this.form[field]
@@ -360,14 +385,20 @@ export default {
                 return out
             }
             const lines = (this.productLineList || []).map(it => clean(it))
+            const { destinationLabel, destinationId, ...formForSubmit } = this.form;
+            // 区id
+            const destination = destinationId && destinationId.length > 0 ? destinationId[destinationId.length - 1] : '';
             const payload = clean({
-                ...this.form,
+                ...formForSubmit,
+                destination,
                 type: 'DISTRIB_STD',
                 sumQuantity: this.sumQuantity,
                 sumAmountExcl: this.sumAmountExcl,
                 sumTotal: this.sumTotal,
                 contractDistributorLineList: lines
             })
+            console.log('onSubmit__payload', payload)
+            
             try {
                 await createContractApi(payload)
                 uni.showToast({ title: '新增成功', icon: 'none' })