@kyfe/ks-query-table 0.0.21 → 0.0.22

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

@@ -0,0 +1,363 @@
+<template>
+  <div class="ks-area-search" :style="value ? 'height:100%' : ''">
+    <van-search v-model="currentValue" :show-action="value" @focus="onFocus" :placeholder="placeholder" @input="handleInput" @cancel="handleCancel" />
+    <div class="list" v-if="value && list.length">
+      <div class="item" v-for="item in list" :key="item.districtID" @click="clickEvent(item)">
+        <span class="name" v-html="item.nameStr"></span>
+        <i class="checkbox-item" :class="{ 'partial-checked': item.isIndeterminate, 'no-checked': !item.isChecked, 'all-checked': item.isChecked }"></i>
+      </div>
+    </div>
+    <div class="ks-hot-city" v-if="value && !list.length">
+      <div class="ks-hot-city-title">热门城市</div>
+      <div class="ks-hot-city-list">
+        <div class="city-list-container">
+          <span class="city-txt" v-for="item in hotCityList" @click="clickEvent(item)" :key="item.districtID">
+            {{ item.simpleName }}
+            <i class="checkbox-item" :class="{ 'partial-checked': item.isIndeterminate, 'no-checked': !item.isChecked, 'all-checked': item.isChecked }"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="nodata" v-if="false && value && !list.length">
+      <div class="nodata-container">
+        <div class="nodata-img">
+          <img src="./imgs/no-data.png" alt="" />
+        </div>
+        <div class="nodata-txt">
+          <span>没有找到相关结果</span>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script>
+const method = 'address.regioninfo.getAreaAddress'
+const levels = ['province', 'city', 'zone', 'street']
+export default {
+  props: {
+    value: {
+      type: Boolean
+    },
+    placeholder: {
+      type: String,
+      default: '请输入搜索内容'
+    }
+  },
+  data() {
+    return {
+      showKey: 'name',
+      list: [],
+      currentValue: '',
+      hotCityList: []
+    }
+  },
+  computed: {
+    hotList() {
+      return this.$parent.hotList
+    },
+    levels() {
+      const includeLevel = []
+      this.levelOptions.forEach((levelOpt, index) => {
+        if (!levelOpt.disabled) {
+          includeLevel.push(levels[index])
+        }
+      })
+      return includeLevel
+    },
+    level() {
+      return this.levelOptions.length
+    },
+    levelOptions() {
+      return this.$parent.levelOptions
+    },
+    checkedData() {
+      return this.$parent.checkedData
+    },
+    idMap() {
+      return this.$parent.idMap
+    }
+  },
+  watch: {
+    hotList: {
+      immediate: true,
+      handler(val) {
+        const hotCityList = []
+        if (val && val.length) {
+          val.forEach(item => {
+            hotCityList.push({
+              ...item,
+              isChecked: false,
+              isIndeterminate: false
+            })
+          })
+        }
+        this.hotCityList = hotCityList
+      }
+    },
+    value(val) {
+      val && this.hotCityList.length && this.updatedStatus(this.hotCityList)
+    }
+  },
+  methods: {
+    updatedData() {
+      this.updatedStatus(this.list)
+      this.updatedStatus(this.hotCityList)
+    },
+    updatedStatus(list) {
+      list &&
+        list.length &&
+        list.forEach(item => {
+          const mapItem = this.idMap.get(item.districtID)
+          if (mapItem) {
+            item.isChecked = mapItem.isChecked
+            item.isIndeterminate = mapItem.isIndeterminate
+          } else {
+            item.isChecked = false
+            item.isIndeterminate = false
+          }
+        })
+    },
+    onFocus() {
+      this.$emit('closeDropdown')
+      setTimeout(() => {
+        this.$emit('input', true)
+      }, 60)
+    },
+    handleInput(e) {
+      if (!e || e.length < 2) {
+        // window.vant.Toast('请至少输入2个字符')
+        this.list = []
+        return
+      }
+      const params = {
+        jsonrpc: '2.0',
+        keyWord: e,
+        params: {
+          keyWord: e
+        }
+      }
+      this.$http(method, 10205, params)
+        .then(res => {
+          if (res && res.districtList && res.districtList.length) {
+            this.list =
+              res &&
+              res.districtList
+                .filter(item => {
+                  // if (!this.levels.includes(item.districtLevel)) return false
+                  // const names = item.districAllName.split('--')
+                  // if (names && names.length > 1 && names[names.length - 1].indexOf('-') === -1) return true
+                  return this.levels.includes(item.districtLevel)
+                })
+                .map(item => {
+                  let arr = item.districAllId.split(',')
+                  const ids = []
+                  const names = item.districAllName.split('-').filter((addr, index) => {
+                    if (addr) {
+                      ids.push(arr[index])
+                      return true
+                    }
+                    return false
+                  })
+
+                  let parentID = ids.length === 1 ? '' : ids[ids.length - 2]
+                  const mapItem = this.idMap.get(item.districtID)
+                  const reg = new RegExp(e, 'gi')
+                  return {
+                    idStr: ids.join('/') + '/',
+                    parentID,
+                    isChecked: mapItem ? mapItem.isChecked : false,
+                    isIndeterminate: mapItem ? mapItem.isIndeterminate : false,
+                    nameStr: names && names.length && names.join(' / ').replace(reg, e => `<span style="color: #165DFF;">${e}</span>`),
+                    name: names && names.length && names.join(' / '),
+                    ...item,
+                    districAllName: names.join('-'),
+                    districAllId: ids.join(',')
+                  }
+                })
+          } else {
+            this.list = []
+          }
+        })
+        .catch(() => {
+          this.list = []
+        })
+    },
+    handleCancel() {
+      this.list = []
+      this.currentValue = ''
+      this.$emit('input', false)
+    },
+    clickEvent(item) {
+      this.$emit('searchSelect', item)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-area-search {
+  font-size: 14px;
+  .van-search {
+    padding: 10px 16px 0 16px !important;
+    .van-cell {
+      line-height: 20px !important;
+      /deep/ input::placeholder {
+        font-size: 14px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        color: #b0b3bf;
+      }
+    }
+    .van-search__action {
+      line-height: 32px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      padding: 0 0 0 16px !important;
+    }
+    /deep/ .van-search__content {
+      border-radius: 8px !important;
+    }
+    /deep/ .van-icon-search {
+      position: relative;
+      &::before {
+        content: ' ' !important;
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        top: 2px;
+        left: 0;
+        background-size: 16px 16px;
+        background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/search.png');
+      }
+    }
+  }
+
+  .list {
+    height: calc(100% - 110px);
+    overflow: scroll;
+    margin: 10px 0 0 0;
+    .item {
+      margin: 0 16px;
+      height: 44px;
+      line-height: 44px;
+      border-bottom: 1px solid #ebedf5;
+      position: relative;
+      .checkbox-item {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 14px;
+        height: 14px;
+        margin: 15px 12px 15px 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;
+      }
+      .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');
+      }
+      .name {
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        width: calc(100% - 18px);
+      }
+    }
+  }
+  .van-search__action {
+    color: #165DFF;
+  }
+  // .nodata {
+  //   height: calc(100% - 100px);
+  //   width: 100%;
+  //   position: relative;
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   .nodata-container {
+  //     width: 140px;
+  //     height: 170px;
+  //     // position: absolute;
+  //     // top: calc(50% - 30px);
+  //     // left: 50%;
+  //     // transform: translate(-50%, -50%);
+  //     .nodata-img {
+  //       img {
+  //         width: 140px;
+  //         height: 140px;
+  //       }
+  //     }
+  //     .nodata-txt {
+  //       font-size: 16px;
+  //       color: #a5a5a5;
+  //       line-height: 30px;
+  //       font-family: PingFangSC, PingFangSC-Regular;
+  //       font-weight: 400;
+  //     }
+  //   }
+  // }
+  .ks-hot-city {
+    height: calc(100% - 100px);
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    .ks-hot-city-title {
+      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;
+    }
+    .ks-hot-city-list {
+      flex: 1;
+      height: 0;
+      width: 100%;
+      .city-list-container {
+        position: relative;
+        width: calc(100% - 32px);
+        height: 100%;
+        padding: 0 16px;
+        .city-txt {
+          display: inline-block;
+          background: #f7f8fa;
+          border-radius: 4px;
+          padding: 6px 28px 6px 10px;
+          margin: 0 12px 12px 0;
+          font-size: 13px;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          line-height: 13px;
+          color: #3d3f4d;
+          position: relative;
+          .checkbox-item {
+            position: absolute;
+            right: 8px;
+            top: 6px;
+            width: 14px;
+            height: 14px;
+            margin: 0;
+            background-image: url('https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-area-select/notChecked.svg');
+            background-repeat: no-repeat;
+            background-size: 14px 14px;
+          }
+          .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');
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/kuasheng-ui/components/ks-area-select/areas-pop.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="ks-area-list-select">
+    <div class="ks-area-list-container">
+      <span class="txtItem" v-for="item in areaList" :key="item.districtID"> {{ item.name }} <ks-icon name="cross" @click.stop="remove(item)" /> </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    areaList: {
+      type: Array,
+      default: () => {}
+    }
+  },
+  methods: {
+    remove(item) {
+      // console.error(item, ' remove item')
+      this.$emit('remove', item)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-area-list-select {
+  padding: 0 16px 10px 16px;
+  font-size: 12px;
+  overflow: hidden;
+  position: relative;
+  .ks-area-list-container {
+    height: 100%;
+    position: relative;
+    width: 100%;
+    overflow-y: auto;
+    .txtItem {
+      display: inline-block;
+      background: #f1f0fe;
+      border-radius: 4px;
+      padding: 6px 28px 6px 12px;
+      margin: 0 12px 12px 0;
+      font-size: 12px;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      line-height: 12px;
+      color: #165DFF;
+      position: relative;
+      .van-icon {
+        position: absolute;
+        padding: 6px;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,183 @@
+/**
+ * 热门城市
+ */
+const HOT_CITY_LIST = [
+  {
+    districtID: 'XZ2-174',
+    districtName: '北京-北京市',
+    simpleName: '北京市'
+  },
+  {
+    districtID: 'XZ2-040',
+    districtName: '上海-上海市',
+    simpleName: '上海市'
+  },
+  {
+    districtID: 'XZ2-042',
+    simpleName: '广州市',
+    districtName: '广东省-广州市'
+  },
+  {
+    districtID: 'XZ2-229',
+    districtName: '广东省-深圳市',
+    simpleName: '深圳市'
+  },
+  {
+    districtID: 'XZ2-253',
+    districtName: '广东省-东莞市',
+    simpleName: '东莞市'
+  },
+  {
+    districtID: 'XZ2-316',
+    districtName: '广东省-佛山市',
+    simpleName: '佛山市'
+  },
+  {
+    districtID: 'XZ2-311',
+    districtName: '广东省-中山市',
+    simpleName: '中山市'
+  }
+]
+
+const areaList = [
+  { districtID: 'XZ0-01', districtName: '华南' },
+  { districtID: 'XZ0-02', districtName: '华东' },
+  { districtID: 'XZ0-03', districtName: '京津冀' },
+  { districtID: 'XZ0-04', districtName: '华北' }
+]
+
+const provinceList = [
+  { districtID: 'XZ1-06', districtName: '北京', adminCode: '110000' },
+  { districtID: 'XZ1-05', districtName: '天津', adminCode: '120000' },
+  { districtID: 'XZ1-16', districtName: '河北省', adminCode: '130000' },
+  { districtID: 'XZ1-02', districtName: '山西省', adminCode: '140000' },
+  { districtID: 'XZ1-29', districtName: '内蒙古自治区', adminCode: '150000' },
+  { districtID: 'XZ1-33', districtName: '辽宁省', adminCode: '210000' },
+  { districtID: 'XZ1-11', districtName: '吉林省', adminCode: '220000' },
+  { districtID: 'XZ1-25', districtName: '黑龙江省', adminCode: '230000' },
+  { districtID: 'XZ1-01', districtName: '上海', adminCode: '310000' },
+  { districtID: 'XZ1-14', districtName: '江苏省', adminCode: '320000' },
+  { districtID: 'XZ1-22', districtName: '浙江省', adminCode: '330000' },
+  { districtID: 'XZ1-12', districtName: '安徽省', adminCode: '340000' },
+  { districtID: 'XZ1-27', districtName: '福建省', adminCode: '350000' },
+  { districtID: 'XZ1-13', districtName: '江西省', adminCode: '360000' },
+  { districtID: 'XZ1-03', districtName: '山东省', adminCode: '370000' },
+  { districtID: 'XZ1-17', districtName: '河南省', adminCode: '410000' },
+  { districtID: 'XZ1-23', districtName: '湖北省', adminCode: '420000' },
+  { districtID: 'XZ1-24', districtName: '湖南省', adminCode: '430000' },
+  { districtID: 'XZ1-31', districtName: '广东省', adminCode: '440000' },
+  { districtID: 'XZ1-30', districtName: '广西壮族自治区', adminCode: '450000' },
+  { districtID: 'XZ1-21', districtName: '海南省', adminCode: '460000' },
+  { districtID: 'XZ1-19', districtName: '重庆', adminCode: '500000' },
+  { districtID: 'XZ1-08', districtName: '四川省', adminCode: '510000' },
+  { districtID: 'XZ1-32', districtName: '贵州省', adminCode: '520000' },
+  { districtID: 'XZ1-04', districtName: '云南省', adminCode: '530000' },
+  { districtID: 'XZ1-15', districtName: '西藏自治区', adminCode: '540000' },
+  { districtID: 'XZ1-34', districtName: '陕西省', adminCode: '610000' },
+  { districtID: 'XZ1-09', districtName: '甘肃省', adminCode: '620000' },
+  { districtID: 'XZ1-18', districtName: '青海省', adminCode: '630000' },
+  { districtID: 'XZ1-10', districtName: '宁夏回族自治区', adminCode: '640000' },
+  { districtID: 'XZ1-26', districtName: '新疆维吾尔自治区', adminCode: '650000' }
+]
+
+const getRegionTreeData = isArea => {
+  const rootNode = {
+    districtName: '全国',
+    districtID: 'all',
+    simpleName: '全国',
+    index: 0,
+    isChecked: false,
+    isIndeterminate: false,
+    _erpZoom: 0,
+    districtLevel: 'china',
+    childrenNode: []
+  }
+  if (isArea) {
+    areaList.forEach((item, index) => {
+      rootNode.childrenNode.push({
+        ...item,
+        simpleName: item.districtName,
+        index: index + 1,
+        isChecked: false,
+        isIndeterminate: false,
+        districtLevel: 'area',
+        childrenNode: [],
+        _erpZoom: 0
+      })
+    })
+  } else {
+    provinceList.forEach((item, index) => {
+      rootNode.childrenNode.push({
+        ...item,
+        index: index + 1,
+        simpleName: item.districtName,
+        isChecked: false,
+        isIndeterminate: false,
+        districtLevel: 'province',
+        childrenNode: [],
+        _erpZoom: 0
+      })
+    })
+  }
+  return rootNode
+}
+
+const cloneDeep = (target, map = new WeakMap()) => {
+  if (typeof target !== 'object') {
+    return target
+  }
+
+  if (map.has(target)) {
+    return map.get(target)
+  }
+
+  const type = Object.prototype.toString.call(target).slice(8, -1)
+
+  let cloneTarget
+
+  switch (type) {
+    case 'Object':
+    case 'Array':
+      cloneTarget = type === 'Array' ? [] : {}
+      map.set(target, cloneTarget)
+
+      Object.getOwnPropertyNames(target).forEach(key => {
+        cloneTarget[key] = cloneDeep(target[key], map)
+      })
+      break
+    case 'Map':
+      cloneTarget = new Map()
+      map.set(target, cloneTarget)
+
+      target.forEach((value, key) => {
+        cloneTarget.set(cloneDeep(key, map), cloneDeep(value, map))
+      })
+      break
+    case 'Set':
+      cloneTarget = new Set()
+      map.set(target, cloneTarget)
+
+      target.forEach(value => {
+        cloneTarget.add(cloneDeep(value, map))
+      })
+      break
+    case 'RegExp':
+    case 'Number':
+    case 'String':
+    case 'Boolean':
+    case 'Date':
+    case 'Error':
+      cloneTarget = new target.constructor(target)
+      break
+    case 'Symbol':
+      cloneTarget = Object(Object.prototype.valueOf.call(target))
+      break
+    case 'Null':
+      cloneTarget = null
+      break
+  }
+
+  return cloneTarget
+}
+
+export { cloneDeep, getRegionTreeData, HOT_CITY_LIST }