@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-area-select/README.md

@@ -0,0 +1,43 @@
+#### API接口
+行政区划区域模糊搜索: address.regioninfo.getAreaAddress 
+
+行政区划五级联想查询: address.addressBgTerritory.getMultiLevelThinkList 
+
+根据districtId查询各级info及各级兄弟节点(数据回填): address.regionInfo.getInfoByDistrictId 
+
+
+
+#### Attributes
+参数 | 说明 | 类型 | 可选值 | 默认值
+-----------|--------|--------|--------|--------
+areaData | 初始值 | Array | 示例: [{districtName: ‘广东省-深圳市', districtID: 'XZ2-229 ’,simpleName:‘深圳市'}] | []
+hotList | 热门地区列表 | Array | 示例: [{districtName: ‘广东省-深圳市', districtID: 'XZ2-229 ’,simpleName:‘深圳市'}] | -
+levelOptions | 为每一层级的配置,详情见levelOptions | Array[Object] | 示例:[{ name: '省/直辖市', disabled: true, allSelectDisabled: true }, { name: '城市', disabled: false, allSelectDisabled: true }] | [{ name: '省/直辖市' },{ name: '城市' },{ name: '区/县' },{ name: '镇/街道'}]
+maxlength | 最大选择地区数 | Number | - | -
+readOnly | 只读 | Boolean | true/false | false
+placeholder | 搜索占位提示文字 | String | - | 请输入搜索内容
+selectPlaceholder | 选择中标签占位提示文字 | String | - | 请选择区域
+isArea | 是否展示大区 | Boolean | Boolean | false
+
+
+#### Events
+事件名称 | 说明 | 回调参数
+-----------|--------|--------
+change | change事件的回调 | 选中的地址数组
+close | close事件的回调 | 点击确定时触发
+
+
+#### 方法
+方法名称 | 说明 | 参数 | 返回值
+-----------|--------|--------|--------
+onSubmit | 触发组件提交操作 | - | -
+onReset | 组件数据清空,初始化 | - | -
+closePop | 关闭所有popover弹框,回到区域选择首页,比如搜索、所有选中展开弹框等 | - | -
+
+
+#### levelOptions
+配置项名称 | 配置项说明 | 是否必须 | 默认值
+-----------|--------|--------|--------
+name | 层级名称 | 是 | 层级名称
+disabled | 屏蔽当前层级选择 | 否 | false
+allSelectDisabled | 屏蔽当前层级全选(全国/不限) | 否 | false

package/kuasheng-ui/components/ks-area-select/area-picker.vue

@@ -0,0 +1,554 @@
+<template>
+  <div class="ks-area-picker" ref="addressBox">
+    <div class="ks-area-picker-container">
+      <van-swipe ref="areaSwipeRef" class="area-picker-swipe" :loop="false" :width="swipeWidth" :show-indicators="false" @change="onSwipeChange">
+        <van-swipe-item class="area-swipe-item" v-for="(zoomItem, zoomIndex) in levelOptions" :key="zoomIndex">
+          <div :class="[`area-list area-list-${zoomIndex}`]">
+            <div :class="['area-list-title', { 'select-color': selectData[zoomIndex].length > 0 }]">{{ zoomItem.name }}</div>
+            <div class="area-list-content">
+              <div
+                :class="['list-item', `list-item-${v.index}`, { 'is-choose': v.isChoose, 'read-only': readOnly }]"
+                v-for="v in selectData[zoomIndex]"
+                v-show="v.index > 0 || !zoomItem.allSelectDisabled"
+                :key="v.districtID"
+              >
+                <div class="item-choose" @click="showChildren(v, v.index, zoomIndex, false, true)">
+                  <div class="address-name" :title="v.districtName">{{ v.simpleName || v.districtName }}</div>
+                  <i
+                    class="checkbox-item"
+                    v-show="!zoomItem.disabled"
+                    :class="{ 'partial-checked': v.isIndeterminate, 'no-checked': !v.isChecked, 'all-checked': v.isChecked }"
+                    @click.stop="checkboxClick(v, v.index, zoomIndex)"
+                  ></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+<script>
+import { getRegionTreeData, cloneDeep } from './common'
+import mixins from './mixins'
+export default {
+  name: 'area-picker',
+  props: {
+    // 下拉搜索前的事件fetch
+    beforeSearch: {
+      type: Function
+    },
+    level: {
+      type: Number
+    },
+    // 是否包括大区
+    isArea: {
+      type: Boolean,
+      default: false
+    },
+    // 添加区域前的事件fetch
+    beforeAdd: {
+      type: Function
+    }
+  },
+  mixins: [mixins],
+  computed: {
+    maxlength() {
+      return this.$parent.maxlength
+    },
+    readOnly() {
+      return this.$parent.readOnly
+    },
+    areaData() {
+      return this.$parent.areaData
+    },
+    checkedData() {
+      return this.$parent.checkedData
+    },
+    idMap() {
+      return this.$parent.idMap
+    },
+    levelOptions() {
+      return this.$parent.levelOptions
+    }
+  },
+  watch: {
+    areaData(val) {
+      if (this.setDataTimer) {
+        clearTimeout(this.setDataTimer)
+        this.setDataTimer = null
+      }
+      this.setDataTimer = setTimeout(() => {
+        this.clearAll()
+        if (val) {
+          this.showHistoryDataChecked(cloneDeep(this.areaData || []))
+        }
+      }, 100)
+    }
+  },
+  data() {
+    // const level = this.titles.length
+    return {
+      currentSwipeIndex: 0,
+      swipeWidth: this.level > 2 ? document.body.clientWidth / 3 : document.body.clientWidth / 2,
+      areaTree: getRegionTreeData(this.isArea),
+      checkedListData: [],
+      selectData: new Array(this.level).fill([]),
+      lastCheckedData: []
+    }
+  },
+  async mounted() {
+    await this.getAreaData()
+    if (this.areaData && this.areaData.length) {
+      this.showHistoryDataChecked(cloneDeep(this.areaData || []))
+    }
+  },
+  methods: {
+    onSwipeChange(index) {
+      this.currentSwipeIndex = index
+    },
+    switchSwipeIndex(zoomIndex) {
+      if (this.level > 3) {
+        const diffOffset = zoomIndex - this.currentSwipeIndex
+        if (diffOffset === 2 && zoomIndex > 1 && zoomIndex < this.level - 1) {
+          this.$refs.areaSwipeRef.next()
+        }
+        if (diffOffset === 0 && zoomIndex > 0) {
+          this.$refs.areaSwipeRef.prev()
+        }
+      }
+    },
+    async checkboxClick(item, vIndex, zoomIndex) {
+      this.switchSwipeIndex(zoomIndex)
+      if (this.readOnly) return
+      if (vIndex === 0 && zoomIndex === 0) {
+        const oldChecked = item.isChecked
+        this.clearAll()
+        item.isChecked = !oldChecked
+        item.isIndeterminate = false
+        return
+      }
+      if (!item.isChecked || item.isIndeterminate) {
+        item.isChecked = true
+        item.isIndeterminate = false
+        await this.changeCheckBox(true, item, vIndex, zoomIndex, true)
+        return
+      }
+      item.isChecked = false
+      item.isIndeterminate = false
+      await this.changeCheckBox(false, item, vIndex, zoomIndex)
+    },
+    getAreaData() {
+      const areaList = this.areaTree.childrenNode
+      const childrenData = [this.areaTree, ...areaList]
+      this.$parent.idMap = new Map()
+      this.idMap.set(this.areaTree.districtID, this.areaTree)
+      this.$set(this.selectData, [0], childrenData)
+      areaList.map(item => {
+        item._parent = this.areaTree
+        this.idMap.set(item.districtID, item)
+      })
+    },
+    isMaxLength() {
+      if (this.maxlength) {
+        if (this.checkedData.length >= this.maxlength) {
+          vant.Toast(`最多选择${this.maxlength}个地区`)
+          return true
+        }
+        return false
+      }
+      return false
+    },
+    // 回写数据到连级菜单中
+    async showHistoryDataChecked(val) {
+      const idArry = []
+      // 过滤已有数据查询
+      const rootDisabled = this.levelOptions[0].disabled
+      for (let i = val.length - 1; i >= 0; i--) {
+        const item = val[i]
+        const mapItem = this.idMap.get(item.districtID)
+        if (!mapItem) {
+          idArry.push(item.districtID)
+        } else {
+          if (mapItem && mapItem._erpZoom === 0 && !rootDisabled) {
+            if (!mapItem.isChecked) {
+              if (
+                !this.checkedData.some(v => {
+                  return v.districtID === mapItem.districtID
+                })
+              ) {
+                await this.checkboxClick(mapItem, mapItem.index, 0)
+              }
+            }
+            val.splice(i, 1)
+          }
+        }
+      }
+      await this.getAreaLinkData(idArry, this.idMap, this.areaTree)
+      val &&
+        val.map((item, itemIndex) => {
+          const checkedItem = this.idMap.get(item.districtID)
+          if (checkedItem) {
+            this.changeCheckBox(true, checkedItem, 1)
+            if (itemIndex === val.length - 1) {
+              this.openAddressLink(checkedItem, this.selectData)
+              for (let i = checkedItem._erpZoom + 1; i < this.level; i++) {
+                const childNode = this.selectData[i]
+                childNode &&
+                  childNode.length &&
+                  childNode.forEach(node => {
+                    node.isChoose = false
+                  })
+
+                if (checkedItem._erpZoom === i - 1 && checkedItem.childrenNode && checkedItem.childrenNode.length) {
+                  this.$set(this.selectData, [i], [...checkedItem.childrenNode])
+                } else {
+                  this.$set(this.selectData, [i], [])
+                }
+              }
+            }
+          } else {
+            // 不存在的情况需要获取上级链路数据
+            this.checkedData.push(item)
+          }
+        })
+      // setTimeout(() => {
+      //   const nodes = Array.from(this.$refs.addressBox.querySelectorAll('.is-choose'))
+      //   const length = nodes && nodes.length
+      //   if (length) {
+      //     nodes.reverse().forEach(node => node.scrollIntoView({ block: 'center', inline: 'center' }))
+      //     if (length > 3) {
+      //       this.$refs.areaSwipeRef.next()
+      //     } else {
+      //       if (this.currentSwipeIndex) {
+      //         this.$refs.areaSwipeRef.prev()
+      //       }
+      //     }
+      //   }
+      // }, 200)
+    },
+    // 递归打开最后一个城市
+    async showChildren(v, index, key, rootChecked, isClick) {
+      if (key === this.level - 1) {
+        this.checkboxClick(v, index, key)
+        return
+      }
+      isClick && this.switchSwipeIndex(key)
+      if (key >= this.level - 1) {
+        return
+      }
+      if (index === 0 && key === 0) {
+        for (let i = key + 1; i < this.level; i++) {
+          const childNode = this.selectData[i]
+          childNode &&
+            childNode.length &&
+            childNode.forEach(node => {
+              node.isChoose = false
+            })
+          this.$set(this.selectData, [i], [])
+        }
+        v.childrenNode.map(k => {
+          k.isChoose = false
+        })
+        return false
+      }
+      v._parent &&
+        v._parent.childrenNode.map(k => {
+          k.isChoose = false
+        })
+      let data
+      v.isChoose = true
+      if (v.childrenNode && v.childrenNode.length) {
+        data = v.childrenNode
+      } else {
+        data = await this.getAreaChildren(this.idMap, v, key + 1, rootChecked)
+      }
+      const childrenData = index === 0 ? [] : data
+      for (let i = key + 1; i < this.level; i++) {
+        const childNode = this.selectData[i]
+        childNode &&
+          childNode.length &&
+          childNode.forEach(node => {
+            node.isChoose = false
+          })
+        this.selectData[i] = []
+      }
+      this.$set(this.selectData, [key + 1], childrenData)
+    },
+    // tag删除操作
+    deleteName(item) {
+      // 选择联动地区移除
+      const indexKey = this.selectData[item._erpZoom].indexOf(item)
+      item.isChecked = false
+      this.changeCheckBox(false, item, indexKey, item._erpZoom)
+    },
+    // 删除所有操作
+    clearAll() {
+      this.checkedListData = []
+      this.$parent.checkedData = []
+      this.selectData = new Array(this.level).fill([])
+      const areaList = this.areaTree.childrenNode
+      const childrenData = [this.areaTree, ...areaList]
+      this.$set(this.selectData, [0], childrenData)
+      this.clearStatus(this.areaTree)
+      if (this.currentSwipeIndex) {
+        this.$refs.areaSwipeRef.prev()
+      }
+    },
+    // 连级特殊处理
+    specialSet(item, itemIndex, type) {
+      if (item.districtID !== 'all') {
+        this.areaTree.isChecked = false
+      }
+      if (itemIndex === 0) {
+        if (item._parent) {
+          item._parent.isChecked = true
+          item._parent.isIndeterminate = false
+        }
+      } else {
+        if (item.childrenNode) {
+          item.childrenNode[0] && (item.childrenNode[0].isChecked = type)
+        }
+      }
+    },
+    // 连级勾选handler
+    async changeCheckBox(type, item, itemIndex, key, rootChecked) {
+      try {
+        if (type) {
+          // 检测重复数据return和检测超出最大限制
+          if (item.districtID !== 'all') {
+            const isMax = this.isMaxLength()
+            if (isMax) {
+              item.isChecked = false
+              return false
+            }
+          }
+          await this.checkoutBeforeAdd(item, true)
+          const repeatItem = this.getRepeat(item, true)
+          if (repeatItem) {
+            item.isChecked = false
+            // vant.Toast(`已添加过${repeatItem.simpleName || repeatItem.districtName}`)
+            return
+          }
+        }
+        // step1 递归清除当前节点子集中的所有选中数据
+        this.clearChildren(item)
+        // step2 展示下级(同步获取接口数据)
+        type && !isNaN(key) && (await this.showChildren(item, itemIndex, Number(key), rootChecked))
+
+        // step3 同级展示操作
+        this.setPeer(item, itemIndex, type)
+        // step4 特殊情况处理
+        this.specialSet(item, itemIndex, type)
+        // step5 递归设置上层节点展示状态
+        this.setFather(item)
+
+        this.lastCheckedData = cloneDeep(this.checkedListData)
+        this.checkedListData = []
+
+        // step6 获取tree数据中被选中的数据
+        this.getChecked(this.areaTree)
+
+        // step7 push或者delete数据
+        this.getAddOrDeleteItems(type)
+      } catch (err) {
+        // console.error(err)
+      }
+    },
+    // 对比上次的数据判断新增或删除的数据
+    getAddOrDeleteItems() {
+      this.checkedListData.map(item => {
+        const sameItem = this.lastCheckedData.find(key => {
+          return key.districtID === item.districtID
+        })
+        if (!sameItem) {
+          this.checkedData.push(item)
+        }
+      })
+      this.lastCheckedData.map(item => {
+        const sameItem = this.checkedListData.find(key => {
+          return key.districtID === item.districtID
+        })
+        if (!sameItem) {
+          const index = this.checkedData.findIndex(v => {
+            return v.districtID === item.districtID
+          })
+          if (index >= 0) {
+            this.checkedData.splice(index, 1)
+          }
+        }
+      })
+    },
+    // 获取连级数据中被选中的值
+    getChecked(item) {
+      // 选中全国
+      if (item.districtID === 'all' && item.isChecked) {
+        this.clearAll()
+        item.isChecked = true
+        this.checkedListData.push(item)
+        return
+      }
+      item.childrenNode &&
+        item.childrenNode.map((v, vIndex) => {
+          if (v.isChecked || v.isChoose || v.isIndeterminate) {
+            if (v._erpZoom === 0) {
+              if (v.isChecked) {
+                const isAllChecked = v.childrenNode && v.childrenNode.length && v.childrenNode[0].isChecked
+                isAllChecked && this.checkedListData.push(v)
+              }
+              this.getChecked(v)
+            } else {
+              if (vIndex !== 0) {
+                if (v.isChecked) {
+                  if (v.childrenNode && v.childrenNode.length) {
+                    const isAllChecked = v.childrenNode[0].isChecked
+                    isAllChecked && this.checkedListData.push(v)
+                  } else {
+                    this.checkedListData.push(v)
+                  }
+                }
+                this.getChecked(v)
+              }
+            }
+          }
+        })
+    },
+    // 获取重复item
+    getRepeat(item) {
+      return this.checkedData.find(v => {
+        return v.districtID === item.districtID
+      })
+    },
+    // 取消联级菜单的全国勾选
+    cancelCheckedAll() {
+      if (this.areaTree.isChecked) {
+        // 全国被选中去掉勾选，去除勾选数据
+        this.areaTree.isChecked = false
+        this.$parent.checkedData = []
+      }
+    },
+    async checkoutBeforeAdd(item, cancelChecked) {
+      if (this.beforeAdd) {
+        const checkedData = cloneDeep(this.checkedData)
+        const result = this.beforeAdd(item, checkedData)
+        if (result) {
+          cancelChecked && (item.isChecked = false)
+          // throw new Error('checkoutBeforeAdd break')
+        }
+      }
+    },
+    saveArea() {
+      // 保存操作
+      const data = cloneDeep(this.checkedData)
+      this.$emit('change', data)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-area-picker {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  overflow: hidden;
+  border-top: 1px solid #f8f8f9;
+  .ks-area-picker-container {
+    font-size: 12px;
+    height: 100%;
+    width: 100%;
+    white-space: nowrap;
+    .area-picker-swipe {
+      height: 100%;
+      .van-swipe__track {
+        .area-swipe-item {
+          .area-list {
+            // flex: 1;
+            // width: 0;
+            width: 100%;
+            background: #fff;
+            // flex-direction: column;
+            display: inline-block;
+            vertical-align: top; //用来调整偏移位置
+            height: 100%;
+            position: relative;
+            .area-list-title {
+              padding-left: 16px;
+              border-bottom: 1px solid #ebedf0;
+              color: #858793;
+              font-size: 14px;
+              font-family: PingFangSC, PingFangSC-Regular;
+              line-height: 42px;
+            }
+            .select-color {
+              color: #323233;
+              border-color: #165DFF;
+              font-weight: bold;
+            }
+            .area-list-content {
+              height: calc(100% - 43px);
+              border: 1px solid #f8f8f9;
+              overflow-y: auto;
+              .list-item {
+                width: 100%;
+                cursor: pointer;
+                padding: 0 0 0 16px;
+                box-sizing: border-box;
+                &:hover {
+                  background: #f8f8f9;
+                }
+                .item-choose {
+                  display: flex;
+                  justify-content: space-between;
+                  .address-name {
+                    flex: 1;
+                    line-height: 48px;
+                    // display: inline-flex;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-size: 14px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                  }
+                  .checkbox-item {
+                    width: 14px;
+                    height: 14px;
+                    padding: 17px 12px 17px 10px;
+                    background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/notChecked.svg');
+                    background-repeat: no-repeat;
+                    background-size: 14px 14px;
+                    background-position: 11px 17px;
+                    box-sizing: content-box;
+                  }
+                  .partial-checked {
+                    background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/pe/notAllChecked.svg');
+                  }
+                  .all-checked {
+                    background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/pe/allChecked.svg');
+                  }
+                }
+              }
+              .is-choose {
+                background: #f8f8f9;
+                &:hover {
+                  background: #f8f8f9;
+                }
+              }
+              .read-only {
+                filter: grayscale(100%);
+                background: #ebebed;
+                .item-choose {
+                  .checkbox-item {
+                    filter: brightness(0.8);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>