@kyfe/ks-query-table 0.0.21 → 0.0.22

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

@@ -0,0 +1,355 @@
+<template>
+  <!-- <div :style="{ width: '100%', height: '100%' }" style="z-index: 10001"> -->
+  <div class="ks-area-select-multi">
+    <area-search ref="areaSearch" v-model="searchListShow" @closeDropdown="closeDropdown" @searchSelect="searchSelect" :placeholder="placeholder" />
+    <div class="formItem-input" v-show="!searchListShow">
+      <div class="formItem-input-content">
+        <van-dropdown-menu active-color="#03050D" z-index="10002" :overlay="false" v-show="textOver">
+          <van-dropdown-item
+            class="areapop-dropdown"
+            ref="areaPopDropdownItem"
+            title-class="ks-area-txt-icon"
+            @opened="showAreaPop = true"
+            @close="showAreaPop = false"
+          >
+            <template #title>
+              <div class="nav-item">
+                <img v-if="showAreaPop" src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/arrow-up@2x.png" alt="收起" />
+                <img v-else src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/arrow-down@2x.png" alt="展开" />
+              </div>
+            </template>
+            <area-list-pop :areaList="selectDisplayData" @remove="remove" :style="{ height: selectedPopHeight + 'px' }" />
+          </van-dropdown-item>
+        </van-dropdown-menu>
+        <div class="formItem-input-content-tags" v-if="!showAreaPop" ref="areaNamesBox">
+          <div v-if="selectDisplayData && selectDisplayData.length" class="formItem-input-value" ref="areaNames">
+            <span class="txtItem" v-for="item in selectDisplayData" :key="item.districtID">{{ item.name }} <ks-icon name="cross" @click="remove(item)"/></span>
+          </div>
+          <div v-else class="formItem-input-placeholder">{{ selectPlaceholder }}</div>
+        </div>
+        <div v-else class="area-pop-tip">已选区域</div>
+      </div>
+    </div>
+    <div class="ks-area-picker-wrap" v-show="!searchListShow">
+      <areaPicker :level="levelOptions.length" :isArea="isArea" ref="areaPickerRef" />
+    </div>
+    <div class="bot-btn-wrap">
+      <van-button type="primary" plain round @click="onReset" class="btn-normal">重置</van-button>
+      <van-button type="primary" round @click="onSubmit">确定{{ selectDisplayData.length ? `(${selectDisplayData.length})` : '' }}</van-button>
+    </div>
+  </div>
+  <!-- </div> -->
+</template>
+<script>
+import { HOT_CITY_LIST } from './common'
+import areaSearch from './area-search.vue'
+import areaListPop from './areas-pop.vue'
+import areaPicker from './area-picker.vue'
+
+// const districtLevels = ['province', 'city', 'zone', 'street']
+const getRouteName = (node, key = 'simpleName', join = '') => {
+  const routeNames = [node[key]]
+  let currentNode = node._parent
+  while (currentNode && currentNode.districtID && currentNode.districtID !== 'all') {
+    routeNames.push(currentNode[key])
+    currentNode = currentNode._parent
+  }
+  return routeNames.reverse().join(join)
+}
+
+export default {
+  props: {
+    // 最多可选择
+    maxlength: {
+      type: Number
+    },
+    placeholder: {
+      type: String,
+      default: '请输入搜索内容'
+    },
+    selectPlaceholder: {
+      type: String,
+      default: '请选择区域'
+    },
+    // 是否包括大区
+    isArea: {
+      type: Boolean,
+      default: false
+    },
+    // 热门城市列表
+    hotList: {
+      type: Array,
+      default: () => {
+        return HOT_CITY_LIST
+      }
+    },
+    // 地址树数据
+    areaData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 只读状态
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    levelOptions: {
+      type: Array,
+      default: () => {
+        return [{ name: '省/直辖市', disabled: false }, { name: '城市' }, { name: '区/县' }, { name: '镇/街道' }]
+      }
+    }
+  },
+  name: 'ks-area-select-multi',
+  components: {
+    areaSearch,
+    areaListPop,
+    areaPicker
+  },
+  data() {
+    return {
+      idMap: null,
+      selectedPopHeight: 200,
+      checkedData: [],
+      searchListShow: false,
+      showAreaPop: false,
+      textOver: false
+    }
+  },
+  computed: {
+    selectDisplayData() {
+      const displayData =
+        this.checkedData.map(node => {
+          return { districtID: node.districtID, name: getRouteName(node) }
+        }) || []
+      return displayData
+    }
+  },
+  watch: {
+    selectDisplayData() {
+      setTimeout(() => {
+        if (this.$refs.areaNames) {
+          this.textOver = this.$refs.areaNames.clientWidth > this.$refs.areaNamesBox.clientWidth
+          if (this.textOver) {
+            this.selectedPopHeight = this.$refs.areaPickerRef.$el.clientHeight + 56
+          }
+        }
+      }, 0)
+    }
+  },
+  // updated() {
+  //   this.$refs.areaSearch.handleCancel()
+  // },
+  methods: {
+    closeDropdown() {
+      this.$refs.areaPopDropdownItem && this.$refs.areaPopDropdownItem.toggle(false)
+    },
+    closePop() {
+      // this.searchListShow = false
+      this.$refs.areaSearch && this.$refs.areaSearch.handleCancel()
+      this.closeDropdown()
+    },
+    remove(item) {
+      if (this.idMap) {
+        const mapItem = this.idMap.get(item.districtID)
+        // console.error(mapItem, 'mapItem')
+        this.$refs.areaPickerRef.checkboxClick(mapItem, mapItem.index, mapItem._erpZoom)
+      }
+    },
+    async searchSelect(item) {
+      if (!item.isChecked) {
+        await this.$refs.areaPickerRef.showHistoryDataChecked([
+          {
+            districtID: item.districtID,
+            districtName: item.districAllName,
+            simpleName: item.districtName
+          }
+        ])
+      } else {
+        if (this.idMap) {
+          const mapItem = this.idMap.get(item.districtID)
+          await this.$refs.areaPickerRef.checkboxClick(mapItem, mapItem.index, mapItem._erpZoom)
+        }
+      }
+      this.$nextTick(() => {
+        this.$refs.areaSearch.updatedData()
+      })
+    },
+    onSubmit() {
+      this.$emit(
+        'change',
+        this.checkedData.map(item => {
+          return {
+            districtLevel: item.districtLevel,
+            districtID: item.districtID,
+            allDistrictID: getRouteName(item, 'districtID', '/'),
+            districtName: item.simpleName,
+            allDistrictName: getRouteName(item, 'simpleName', '/')
+          }
+        })
+      )
+      this.$emit('close')
+    },
+    onReset() {
+      this.textOver = false
+      this.searchListShow = false
+      this.closeDropdown()
+      this.$refs.areaPickerRef.clearAll()
+      this.$refs.areaSearch.updatedData()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-area-select-multi {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  .titleWrap {
+    width: 100%;
+    height: 28px;
+    margin-top: 52px;
+    margin-left: 16px;
+    .word {
+      display: inline-block;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      .icon {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+      }
+    }
+  }
+  .formItem-input {
+    height: 24px;
+    margin: 10px 0;
+    color: #888ea6;
+    font-size: 12px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 400;
+    overflow: hidden;
+    padding: 0 0 0 16px;
+    line-height: 24px;
+    /deep/ .van-overlay {
+      height: 100vh !important;
+    }
+    .formItem-input-content {
+      position: relative;
+      -webkit-overflow-scrolling: unset;
+      /deep/ .van-dropdown-menu {
+        position: absolute;
+        z-index: 999;
+        height: 36px;
+        width: 58px;
+        top: -6px;
+        right: 0;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 12%, #ffffff 35%);
+        .van-dropdown-menu__title {
+          &::after {
+            display: none;
+          }
+          .van-ellipsis {
+            .nav-item {
+              position: relative;
+              width: 10px;
+              height: 18px;
+              img {
+                width: 10px;
+                height: 5px;
+                position: absolute;
+                top: 7px;
+                left: 0;
+              }
+            }
+          }
+        }
+        .arrow-down-icon-active {
+          display: none;
+        }
+        .van-dropdown-item--down {
+          border-radius: 0;
+        }
+        .van-dropdown-item__content {
+          border-radius: 0 0 12px 12px;
+          border-start-end-radius: 0;
+          border-start-start-radius: 0;
+          max-height: unset !important;
+          border-end-end-radius: 20px;
+          border-end-start-radius: 20px;
+        }
+      }
+      .area-pop-tip {
+        color: #03050d;
+        font-size: 12px;
+      }
+      .formItem-input-content-tags {
+        overflow-x: auto;
+        width: calc(100% - 40px);
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+    .formItem-input-value {
+      color: #165DFF;
+      font-size: 12px;
+      width: max-content;
+      .txtItem {
+        display: inline-block;
+        background: #f1f0fe;
+        color: #165DFF;
+        border-radius: 4px;
+        padding: 6px 28px 6px 12px;
+        margin-left: 8px;
+        font-size: 12px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 12px;
+        position: relative;
+        .van-icon {
+          position: absolute;
+          padding: 6px;
+          right: 0;
+          top: 0;
+        }
+        &:first-child {
+          margin-left: 0px;
+        }
+      }
+    }
+  }
+  .ks-area-picker-wrap {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 145px);
+  }
+  .bot-btn-wrap {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    background-color: #fff;
+    padding: 10px 16px;
+    .van-button {
+      width: 50%;
+      height: 36px;
+      line-height: 34px;
+      border-radius: 6px !important;
+    }
+    .van-button--primary {
+      margin-left: 6px;
+    }
+    .van-button--plain {
+      margin-right: 6px;
+      margin-left: 0;
+    }
+  }
+}
+</style>

package/kuasheng-ui/components/ks-area-select/mixins.js

@@ -0,0 +1,216 @@
+import { cloneDeep } from './common'
+
+const APPKEY = 10205
+const setChildrenData = (data, item, idMap, key, rootChecked = false) => {
+  const cloneData = cloneDeep(data)
+  const childrenData = cloneData.map((v, index) => {
+    const splitName = v.districtName.split('-')
+    v.simpleName = splitName[splitName.length - 1]
+    v.isChecked = false
+    v.index = index + 1
+    v.isIndeterminate = false
+    v._erpZoom = key
+    v._parent = item
+    v.childrenNode = []
+    idMap.set(v.districtID, v)
+    return v
+  })
+  const childrenList = [
+    {
+      simpleName: '不限',
+      index: 0,
+      isChecked: rootChecked,
+      isChoose: false,
+      isIndeterminate: false,
+      districtLevel: item.districtLevel,
+      _erpZoom: key,
+      _parent: item
+    },
+    ...childrenData
+  ]
+  item.childrenNode = childrenList
+  return childrenList
+}
+
+export default {
+  methods: {
+    /**
+     * 获取子节点数据
+     * @param: item key
+     * **/
+    async getAreaChildren(idMap, item, key, rootChecked) {
+      try {
+        let method = 'address.addressBgTerritory.getMultiLevelThinkList'
+        let param = {
+          method: method,
+          jsonrpc: '2.0',
+          params: {
+            districtID: item.districtID,
+            showParam: 0
+          }
+        }
+        const data = await this.$http(method, APPKEY, param)
+        if (data && data.districtList) {
+          return setChildrenData(data.districtList, item, idMap, key, rootChecked)
+        }
+      } catch (error) {
+        // console.log(error)
+      }
+    },
+    async getAreaLinkData(idArry, idMap, areaTree) {
+      try {
+        if (!idArry || !idArry.length) {
+          return
+        }
+        const data = await this.$http('address.regionInfo.getInfoByDistrictId', '50243', { districtIds: idArry })
+        if (data) {
+          // 大区对象
+          const treeData = data.childrenNode
+          const newMap = new Map()
+          const loopSetMap = function(mapData) {
+            newMap.set(mapData.districtID, mapData)
+            mapData.childrenNode &&
+              mapData.childrenNode.map(item => {
+                loopSetMap(item)
+              })
+          }
+          treeData.map(item => {
+            loopSetMap(item)
+          })
+          const loopAreaSet = function(areaItem) {
+            if (areaItem.districtID) {
+              if (!areaItem.childrenNode || !areaItem.childrenNode.length) {
+                // 排除不限
+                const childrenData = newMap.get(areaItem.districtID)
+                if (!childrenData || !childrenData.childrenNode) {
+                  return
+                }
+                setChildrenData(childrenData.childrenNode, areaItem, idMap, areaItem._erpZoom + 1)
+              }
+              areaItem.childrenNode.map(item => {
+                loopAreaSet(item)
+              })
+            }
+          }
+          areaTree.childrenNode.map(areaItem => {
+            loopAreaSet(areaItem)
+          })
+        }
+      } catch (error) {
+        // console.log(error)
+      }
+    },
+    /**
+     * 向上(父级)递归数据处理
+     * @param: item
+     * **/
+    setFather(item) {
+      if (item._parent && item._erpZoom !== 0) {
+        const bortherItem = item._parent.childrenNode.slice(1, item._parent.childrenNode.length)
+        const allChecked = bortherItem.every(item => {
+          return item.isChecked
+        })
+        const allNoChecked = item._parent.childrenNode.every(item => {
+          return item.isChecked === false
+        })
+        const someIndeterminate = item._parent.childrenNode.some(item => {
+          return item.isIndeterminate === true
+        })
+        const firstItem = item._parent.childrenNode[0].isChecked
+        item._parent._parent &&
+          item._parent._parent.childrenNode.map(item => {
+            item.isChoose = false
+          })
+        item._parent.isChoose = true
+        item._parent.isChecked = firstItem || allChecked
+        item._parent.isIndeterminate = firstItem ? false : someIndeterminate || !(allNoChecked || allChecked)
+        if (item._parent._parent && item._erpZoom !== 1) {
+          item._parent._parent.childrenNode[0].isChecked = false
+        }
+        this.setFather(item._parent)
+      }
+    },
+    /**
+     * 同级数据处理
+     * @param: item itemIndex type
+     * **/
+    setPeer(item, itemIndex, type) {
+      if (itemIndex === 0) {
+        item._parent &&
+          item._parent.childrenNode.map((v, vIndex) => {
+            if (v.isChoose || v.isChecked || v.isIndeterminate) {
+              this.clearChildren(v)
+            }
+            if (vIndex === 0) {
+              v.isChecked = type
+            } else {
+              v.isChecked = false
+              v.isIndeterminate = false
+            }
+            v.isChoose = false
+          })
+      } else {
+        if (item._erpZoom !== 0) {
+          type && item._parent && (item._parent.childrenNode[0].isChecked = false)
+        } else {
+          item._parent && (item._parent.isChecked = false)
+        }
+        item._parent &&
+          item._parent.childrenNode.map(v => {
+            v.isChoose = false
+          })
+        item.isChoose = type
+      }
+      item.isChecked = type
+      item.isIndeterminate = false
+    },
+    /**
+     * 向下递归数据处理
+     * @param: item
+     * **/
+    clearChildren(item) {
+      item.childrenNode &&
+        item.childrenNode.map(v => {
+          if (v.isChoose || v.isChecked || v.isIndeterminate) {
+            this.clearChildren(v)
+            v.isChoose = false
+            v.isChecked = false
+            v.isIndeterminate = false
+          }
+        })
+    },
+    /**
+     * 清除子节点的choose checked Indeterminate状态
+     * @param {*} data
+     */
+    clearStatus(data) {
+      const clearLoop = item => {
+        item.childrenNode &&
+          item.childrenNode.map(v => {
+            if (v.isChoose || v.isChecked || v.isIndeterminate) {
+              clearLoop(v)
+            }
+          })
+        item.isChoose = false
+        item.isChecked = false
+        item.isIndeterminate = false
+      }
+      clearLoop(data)
+    },
+    /**
+     * 打开当前节点的相关链路
+     * @param {*} item
+     * @param {*} selectData 链路二维数组
+     */
+    openAddressLink(item, selectData) {
+      const openFatherLink = currentItem => {
+        const _parent = currentItem._parent
+        if (currentItem && currentItem._erpZoom !== 0) {
+          _parent.childrenNode && (selectData[currentItem._erpZoom] = _parent.childrenNode)
+          openFatherLink(_parent)
+        }
+      }
+      openFatherLink(item)
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+#### 参数
+参数名 | 说明 | 默认值
+-----------|--------|--------
+level | 地址选择级数(1-5) | 4
+
+#### 事件
+事件名 | 说明
+-----------|--------
+select | 选择到最后一级时触发
+
+#### 用法
+- 使用组件的open方法打开显示（通过ref调用open方法），如果有初始值可以在调用open方法时传入，没有初始值不用传入参数
+
+```javascript
+<template>
+  <div>
+      <ks-button @click="openArea">四级地址选择</ks-button>
+      <area-select ref="area" @select="handleSelect" />
+  </div>
+</template>
+
+<script>
+import AreaSelect from '../components/area-select/index'
+export default {
+  components: {AreaSelect},
+  methods: {
+    openArea () {
+      let arr = [{"id":"XZ1-08","name":"四川省","level":"province"},{"id":"XZ2-043","name":"成都市","level":"city"},{"id":"XZ3-2611","name":"成华区","level":"zone"},{"id":"XZ4-035231","name":"保和街道","level":"street"}]
+      this.$refs.area.open(arr)
+      // this.$refs.area.open()  //无参数
+    },
+    handleSelect (e) {
+      console.log(e)
+    }
+  }
+}
+</script>
+
+```
+
+- 数据结构(open方法传入的参数和select事件返回的参数结构一样)
+
+```
+[
+  {"id":"XZ1-08","name":"四川省","level":"province"},
+  {"id":"XZ2-043","name":"成都市","level":"city"},
+  {"id":"XZ3-2611","name":"成华区","level":"zone"},
+  {"id":"XZ4-035231","name":"保和街道","level":"street"}
+]
+```

package/kuasheng-ui/components/ks-area-single-select/hot-city.js

@@ -0,0 +1,45 @@
+export const hotCity = () => {
+  return [
+    {
+      title: '北京',
+      id: 'XZ2-174',
+      value: [{id: 'XZ1-06', name: '北京', level: 'province'}, {id: 'XZ2-174', name: '北京市', level: 'city'}]
+    },
+    {
+      title: '上海',
+      id: 'XZ2-040',
+      value: [{id: 'XZ1-01', name: '上海', level: 'province'}, {id: 'XZ2-040', name: '上海市', level: 'city'}]
+    },
+    {
+      title: '广州',
+      id: 'XZ2-042',
+      value: [{id: 'XZ1-31', name: '广东省', level: 'province'}, {id: 'XZ2-042', name: '广州市', level: 'city'}]
+    },
+    {
+      title: '深圳',
+      id: 'XZ2-229',
+      value: [{id: 'XZ1-31', name: '广东省', level: 'province'}, {id: 'XZ2-229', name: '深圳市', level: 'city'}]
+    },
+    {
+      title: '杭州',
+      id: 'XZ2-213',
+      value: [{id: 'XZ1-22', name: '浙江省', level: 'province'}, {id: 'XZ2-213', name: '杭州市', level: 'city'}]
+    },
+    {
+      title: '武汉',
+      id: 'XZ2-342',
+      value: [{id: 'XZ1-23', name: '湖北省', level: 'province'}, {id: 'XZ2-342', name: '武汉市', level: 'city'}]
+    },
+    {
+      title: '成都',
+      id: 'XZ2-043',
+      value: [{id: 'XZ1-08', name: '四川省', level: 'province'}, {id: 'XZ2-043', name: '成都市', level: 'city'}]
+    }
+  ]
+}
+
+export const createTitles = (level = 4) => {
+  let arr = new Array(level)
+  arr[0] = '请选择'
+  return arr
+}