@kyfe/ks-query-table 0.0.9 → 0.0.10

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

@@ -1,43 +0,0 @@
-#### 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

@@ -1,554 +0,0 @@
-<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>