@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-history-search/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="ks-history-search">
+    <ks-history-input
+      ref="historyInput"
+      v-model="value"
+      :placeholder="placeholder"
+      :showCancel="showCancel"
+      @focus="inputFocus"
+      @blur="blur"
+      @cancel="cancel"
+      @search="search"
+      @clear="clear"
+      @change="change" />
+    <ks-history-list
+      ref="historyList"
+      v-model="showList"
+      :popAttr="popAttr"
+      :customClass="customClass"
+      :popupStyle="popupStyle"
+      :storageKey="storageKey"
+      @select="select" />
+  </div>
+</template>
+<script>
+import ksHistoryInput from './history-input'
+import ksHistoryList from './history-list'
+export default {
+  name: 'ks-history-search',
+  components: {
+    ksHistoryInput,
+    ksHistoryList
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    popAttr: {
+      type: Object,
+      default: () => ({})
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    // 菜单id
+    menuId: {
+      type: String,
+      default: ''
+    },
+    // 历史存储类型
+    code: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入内容'
+    },
+    leftIcon: {
+      type: String,
+      default: ''
+    },
+    // 是否展示取消按钮
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      showList: false,
+      popupStyle: {}
+    }
+  },
+  computed: {
+    storageKey() {
+      return this.menuId + this.code
+    }
+  },
+  methods: {
+    inputFocus() {
+      // 输入框聚焦事件
+      this.getPopStyle()
+      this.showHistory(true)
+      this.$emit('focus')
+    },
+    clear(data) {
+      console.log('clear', data)
+      this.$emit('clear', data)
+    },
+    cancel() {
+      this.showHistory(false)
+      this.$emit('cancel')
+    },
+    showHistory(data) {
+      this.showList = data
+    },
+    search(data) {
+      this.$refs.historyList.addHistory(data)
+      this.$emit('search', data)
+    },
+    select(data) {
+      this.value = data
+      this.$refs.historyInput.setValue(data)
+      this.$emit('input', data)
+      this.$emit('select', data)
+    },
+    blur() {
+      this.$emit('blur')
+    },
+    change(data) {
+      this.$emit('change', data)
+    },
+    getPopStyle () {
+      const { bottom } = this.$refs.historyInput.$el.getBoundingClientRect()
+      this.popupStyle = {
+        width: '100%',
+        top: bottom + 'px',
+        borderRadius: '12px 12px 0px 0px',
+      }
+    },
+  }
+}
+</script>

package/kuasheng-ui/components/ks-history-search/package-lock.json

@@ -0,0 +1,5 @@
+{
+  "name": "@kyfe/ks-history-search",
+  "version": "0.0.1",
+  "lockfileVersion": 1
+}

package/kuasheng-ui/components/ks-history-search/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@kyfe/ks-history-search",
+  "version": "0.0.1",
+  "description": "ks-history-search",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/kuasheng-ui/components/ks-history-search/utils.js

@@ -0,0 +1,35 @@
+const getData = (key) => {
+  const storageData = localStorage.getItem(key)
+  let data = []
+  if (storageData) {
+    data = storageData.split(',')
+  }
+  return data
+}
+
+export const setData = (key, data) => {
+  const newData = data.join()
+  localStorage.setItem(key, newData)
+}
+
+export const getHistoryData = (key) => {
+  const data = getData(key)
+  return data
+}
+
+export const pushHistory = (key, item) => {
+  let oldData = getData(key)
+  const isRepeatIndex = oldData.findIndex(oldItem => {
+    return oldItem === item
+  })
+  if (isRepeatIndex > -1) {
+    oldData.splice(isRepeatIndex, 1)
+  }
+  const data = [item, ...oldData]
+  setData(key, data)
+}
+
+export const deleteAllHistory = (key) => {
+  const data = []
+  setData(key, data)
+}

package/kuasheng-ui/components/ks-input-search/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <van-search v-model.trim="inputValue"
+    ref="search"
+    class="ks-input-search"
+    v-bind="$attrs"
+    @blur="blur"
+    @cancel="cancel"
+    @clear="clear"
+    @focus="focus"
+    @input="input"
+    @search="(e) => search(e, true)">
+      <slot v-for="(name) in Object.keys(this.$slots)" :name="name" :slot="name"></slot>
+  </van-search>
+</template>
+<script>
+// 防抖
+const debounce = (fn, wait) => {
+  let timeout = null
+  return function () {
+    const t = this
+    const args = arguments
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => fn.apply(t, args), wait)
+  }
+}
+export default {
+  name: 'ks-input-search',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      inputValue: this.value
+    }
+  },
+  mounted() {
+    this.inputDebounce = debounce(this.search, 300)
+    this.inputKeyDownDebounce = debounce(this.keyDownHandler, 200)
+    this.inputDom = this.$el.querySelector('input[type="search"]')
+    this.inputDom.addEventListener('compositionupdate', this.inputDebounce)
+    this.inputDom.addEventListener('keydown', this.inputKeyDownDebounce)
+  },
+  beforeDestroy () {
+    this.inputDom.removeEventListener('compositionupdate', this.inputDebounce)
+    this.inputDom.removeEventListener('keydown', this.inputKeyDownDebounce)
+  },
+  methods: {
+    setFocus() {
+      try {
+        const input = this.$refs.search.getElementsByClassName('van-field__control')[0]
+        if (input) {
+          input.focus()
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    input () {
+      this.inputDebounce()
+    },
+    blur() {
+      this.$emit('blur')
+    },
+    clear() {
+      this.$emit('clear')
+    },
+    keyDownHandler(e) {
+      if (e.key === 'Backspace') {
+        this.$emit('deleteKeyEvent', e)
+      }
+    },
+    cancel() {
+      this.$emit('cancel')
+    },
+    focus () {
+      this.$emit('focus')
+    },
+    setValue (val) {
+      this.inputValue = val
+    },
+    async search (e, isSearch) {
+      const val = e && e.data || ''
+      const text = this.inputValue + val
+      this.$emit('change', text)
+      if (isSearch) {
+      this.$emit('search', text)
+      }
+    },
+  }
+}
+</script>
+<style lang="less">
+  .ks-input-search input {
+    caret-color: #165DFF;
+  }
+  .ks-input-search input::placeholder {
+    color: #888EA6;
+  }
+</style>
+
+

package/kuasheng-ui/components/ks-list/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <van-list v-model="loading" v-bind="$attrs" v-on="$listeners" :finishedText="finishedText" id="ksListWrapper">
+    <template #loading>
+      <div class="van-list__loading">
+        <img class="ks-list-loading-img" src="https://erphostjs.kye-erp.com/kuasheng-h5/pe/empty-image/NoContent.png" />
+      </div>
+    </template>
+    <!-- <template v-for="(item, key) in $slots">
+      <slot :name="key"></slot>
+    </template> -->
+    <template v-for="(item, key) in $slots" v-slot:[key]>
+      <slot :name="key"></slot>
+    </template>
+  </van-list>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean
+    },
+    resizeTextByHeight: {
+      type: Boolean,
+       default: false
+    }
+  },
+  data() {
+    return {
+      finishedText: this.$attrs['finished-text']
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  watch: {
+    '$attrs.finished': {
+      handler(val) {
+        this.resizeTextByHeight && val && this.resizeFinishedTextByClientHeight()
+      }
+    }
+  },
+  computed: {
+    loading: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        console.log('set', val)
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    // 监听容器是否超过body高度，不超过则视为内容不足一屏，则不显示finishedText
+    resizeFinishedTextByClientHeight () {
+      this.$nextTick(() => {
+        const listDom = document.querySelector('#ksListWrapper')
+        const rootDom = document.body
+        if (listDom && rootDom) {
+          if (listDom.scrollHeight <= rootDom.clientHeight) {
+            this.finishedText = ''
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ks-list-loading-img {
+  width: 30px;
+  height: 30px;
+}
+</style>

package/kuasheng-ui/components/ks-loading/index.js

@@ -0,0 +1,16 @@
+export default {
+  functional: true,
+  render(h, ctx) {
+    return h(
+      'van-loading',
+      {
+        ...ctx.data,
+        class: {
+          'dark': ctx.props && ctx.props.theme === 'dark',
+          'light': ctx.props && ctx.props.theme === 'light',
+        }
+      },
+      ctx.children
+    )
+  }
+}

package/kuasheng-ui/components/ks-month/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <van-popup
+    :value="value"
+    position="bottom"
+    get-container="body"
+    close-icon-position="top-left"
+    close-icon="arrow-left"
+    class="ks-month-popup"
+    duration="0.2"
+    :closeable="true"
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <single v-bind="$attrs" v-on="$listeners" v-if="type === 'single'" ref="single"></single>
+    <range v-bind="$attrs" v-on="$listeners" v-if="type === 'range'" ref="range"></range>
+  </van-popup>
+</template>
+
+<script>
+import single from './single.vue'
+import range from './range.vue'
+export default {
+  components: {single,range},
+  name: 'ks-month',
+  props: {
+    value: {
+      type: Boolean,
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'range'
+    }
+  },
+  methods: {
+   handleClosePopup (e) {
+      this.$emit('input', e)
+      this.$refs[this.type].scrollClear()
+    },
+    handleOpenPopup () {
+      this.$nextTick(() => {
+        this.$refs[this.type].scrollInto()
+      })
+    }
+  }
+}
+</script>

package/kuasheng-ui/components/ks-month/package.json

@@ -0,0 +1,3 @@
+{
+  "browser": "ks-month.umd.js"
+}

package/kuasheng-ui/components/ks-month/range.vue

@@ -0,0 +1,172 @@
+<template>
+  <div :class="['ks-month', { 'ks-month-horizontal': horizontal }]">
+    <div class="van-calendar__body ks-month-body" ref="body">
+      <div class="van-calendar__month" v-for="y of years" :key="y">
+        <div class="van-calendar__month-title">{{ y }}年</div>
+        <div class="van-calendar__days">
+          <div
+            class="van-calendar__day ks-month__day"
+            :class="{
+              'van-calendar__day--start': start === +new Date(`${y}/${m}/01`) && end !== +new Date(`${y}/${m}/01`),
+              'van-calendar__day--end': end === +new Date(`${y}/${m}/01`) && start !== +new Date(`${y}/${m}/01`),
+              'van-calendar__day--middle': start < +new Date(`${y}/${m}/01`) && end > +new Date(`${y}/${m}/01`),
+              'van-calendar__day--start-end': start === +new Date(`${y}/${m}/01`) && end === +new Date(`${y}/${m}/01`),
+              'van-calendar__day--disabled': (min && +new Date(`${y}/${m}/01`) < min) || (max && +new Date(`${y}/${m}/01`) > max)
+            }"
+            v-for="m of months"
+            :key="m"
+            @click="handleSelectDay(y, m, (min && +new Date(`${y}/${m}/01`) < min) || (max && +new Date(`${y}/${m}/01`) > max))"
+          >
+            {{ m }}月
+            <div v-if="start === +new Date(`${y}/${m}/01`) || end === +new Date(`${y}/${m}/01`)" class="van-calendar__bottom-info">
+              {{
+                start === +new Date(`${y}/${m}/01`) && end === +new Date(`${y}/${m}/01`)
+                  ? '开始/结束'
+                  : start === +new Date(`${y}/${m}/01`) && end !== +new Date(`${y}/${m}/01`)
+                  ? '开始'
+                  : '结束'
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ks-month-header">
+      <span class="ks-month-header__title">月份选择</span>
+      <span class="ks-month-header__daterange">{{ monthRangeStr }}</span>
+    </div>
+    <div v-if="showConfirm" class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom">
+      <van-button type="primary" :disabled="!(start && end)" round block class="van-calendar__confirm" @click="handleSelect">确定</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format, getYears, formatMonth } from './utils'
+
+export default {
+  name: 'ks-month-range',
+  props: {
+    defaultMonth: {
+      type: Array,
+      default: () => []
+    },
+    yearRange: {
+      type: Array,
+      default: () => [new Date().getFullYear() - 5, new Date().getFullYear()]
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    },
+    minMonth: String,
+    maxMonth: String
+  },
+  data() {
+    return {
+      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      start: this.initStart(),
+      end: this.initEnd(),
+      years: getYears(this.yearRange)
+    }
+  },
+  watch: {
+    defaultMonth: function() {
+      this.start = this.initStart()
+      this.end = this.initEnd()
+    }
+  },
+  computed: {
+    monthRangeStr() {
+      if (this.start && this.end) {
+        return `${format(this.start)} 至 ${format(this.end)}`
+      } else if (this.start && !this.end) {
+        return format(this.start)
+      }
+      return ''
+    },
+    min() {
+      return this.minMonth ? formatMonth(this.minMonth) : null
+    },
+    max() {
+      return this.maxMonth ? formatMonth(this.maxMonth) : null
+    }
+  },
+  methods: {
+    initStart() {
+      return this.defaultMonth.length ? formatMonth(this.defaultMonth[0]) : null
+    },
+    initEnd() {
+      return this.defaultMonth.length ? formatMonth(this.defaultMonth[1]) : null
+    },
+    scrollInto() {
+      setTimeout(() => {
+        if (this.start) {
+          let top = this.$el.querySelector('.van-calendar__day--start')
+          this.$refs.body.scrollTop = top && top.getBoundingClientRect().top - 120
+        }
+      }, 240)
+    },
+    scrollClear() {
+      this.$refs.body.scrollTop = 0
+    },
+    handleSelectDay(y, m, disabled) {
+      if (!disabled) {
+        let _m = formatMonth(`${y}/${m}`)
+        if (this.start && !this.end && this.start <= _m) {
+          this.end = _m
+          this.$emit('select', [new Date(this.start), new Date(this.end)])
+        } else {
+          this.end = null
+          this.start = _m
+          this.$emit('select', [new Date(this.start), null])
+        }
+      }
+    },
+    handleSelect() {
+      this.$emit('confirm', [new Date(this.start), new Date(this.end)], this.monthRangeStr)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import url('./style.less');
+.ks-month {
+  .van-calendar__day {
+    font-size: 14px;
+  }
+}
+.ks-month-horizontal {
+  .van-calendar__day {
+    height: 46px;
+  }
+  .ks-month-header {
+    line-height: 44px;
+  }
+  .van-calendar__bottom-info {
+    bottom: 4px;
+  }
+  .van-calendar__day {
+    margin-bottom: 2px;
+  }
+  .van-calendar__day--start,
+  .van-calendar__day--end {
+    background-color: transparent;
+    background-size: 46px 46px;
+    background-repeat: no-repeat;
+    background-image: radial-gradient(closest-side, #165DFF 100%, transparent 100%);
+    background-position: 50%;
+  }
+}
+.ios .ks-month-horizontal {
+  .van-calendar__day--start,
+  .van-calendar__day--end {
+    background-image: -webkit-gradient(radial, 50% 50%, 22, 23 23, 23, from(#165DFF), to(transparent));
+  }
+}
+</style>