@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-field-money/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="ks-field-money">
+    <ks-field
+      ref="ksField"
+      v-bind="$attrs"
+      v-model="filterMoney"
+      :input-align="inputAlign"
+      :type="inputType"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :oninput="checkDecimalCode"
+      @focus="focus"
+      @input="input"
+      @clear="clear"
+      @click="click"
+      @click-left-icon="clickLeftIcon"
+      @click-right-icon="clickRightIcon"
+      @blur="blur">
+      <template slot="label">
+        <slot name="label"></slot>
+      </template>
+      <template slot="input">
+        <slot name="input"></slot>
+      </template>
+      <template slot="left-icon">
+        <slot name="left-icon"></slot>
+      </template>
+      <template slot="right-icon">
+        <slot name="right-icon">
+          <span class="ks-field-money-right-icon">元</span>
+        </slot>
+      </template>
+      <template slot="button">
+        <slot name="button"></slot>
+      </template>
+    </ks-field>
+    <ks-tag
+        v-if="isFocus && unit"
+        plain
+        class="ks-field-money-unit">{{ unit }}</ks-tag>
+  </div>
+</template>
+<script>
+import { numberSplitFloat, formatMoneySeparators } from './utils'
+const units = [
+    { value: 1e12, unit: '万亿' },
+    { value: 1e11, unit: '千亿' },
+    { value: 1e10, unit: '百亿' },
+    { value: 1e9, unit: '十亿' },
+    { value: 1e8, unit: '亿' },
+    { value: 1e7, unit: '千万' },
+    { value: 1e6, unit: '百万' },
+    { value: 1e5, unit: '十万' },
+    { value: 1e4, unit: '万' },
+    { value: 1e3, unit: '千' },
+    { value: 1e2, unit: '百' },
+]
+
+export default {
+  name: 'ksFieldMoney',
+  props: {
+    value: {
+      type: [String, Number]
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: '请输入金额'
+    },
+    isThousandPercent: {
+      type: Boolean,
+      default: false
+    },
+    customTranslateMoney: {
+      type: Function,
+    },
+    inputAlign: {
+      type: String,
+      default: 'right'
+    },
+    decimal: {
+      type: Number,
+      default: 2
+    },
+    autocomplete: {
+      type: String,
+      default: 'off',
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    }
+  },
+  data() {
+    return {
+      filterMoney: null,
+      isFocus: false,
+      inputType: 'text',
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.translateMoney()
+      }
+    },
+  },
+  computed: {
+    unit() {
+      for (const unit of units) {
+        if (this.value >= unit.value) {
+          return unit.value >= 1e2 ? unit.unit : unit.unit[1]
+        }
+      }
+      return ''
+    },
+    checkDecimalCode() {
+      const { decimal } = this.$props
+      return `
+        const decimal = Number(${decimal})
+        if(value.indexOf('.')>0){
+          if(decimal === 0){
+            value=value.slice(0, value.indexOf('.'))
+          }else{
+            value=value.slice(0, value.indexOf('.')+ decimal + 1)
+          }
+        }
+      `
+    }
+  },
+  methods: {
+    translateMoney() {
+      if (!this.isFocus) {
+        if (this.customTranslateMoney && typeof this.customTranslateMoney === 'function') {
+          this.filterMoney = this.customTranslateMoney(this.value)
+        } else {
+          this.filterMoney = this.isThousandPercent ? formatMoneySeparators(this.value, this.decimal) : numberSplitFloat(this.value,  this.decimal)
+        }
+      }
+    },
+    focus() {
+      this.inputType = 'number'
+      this.isFocus = true
+      this.filterMoney = this.value
+      this.$emit('focus')
+    },
+    input(val) {
+      this.updateMoneyValue(val)
+    },
+    blur() {
+      this.isFocus = false
+      this.checkValue()
+      this.translateMoney()
+      this.$emit('blur')
+    },
+    updateMoneyValue(val = 0) {
+      const _val = typeof val === 'string' && val.startsWith('0') && val.length > 1 ? Number(val) : val
+      this.$emit('input', _val)
+    },
+    checkValue(value = this.filterMoney) {
+      const { min, max } = this.$props
+      if (min === -Infinity && max === Infinity) return
+      value = Number(value)
+      let _value = false
+      if (value > max) _value = max
+      if (value < min) _value = min
+      if (_value !== false) {
+        this.updateMoneyValue(_value)
+      }
+    },
+    clear() {
+      this.updateMoneyValue('')
+      this.$emit('clear')
+    },
+    click() {
+      this.$emit('click')
+    },
+    clickLeftIcon() {
+      this.$emit('click-left-icon')
+    },
+    clickRightIcon() {
+      this.$emit('click-right-icon')
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-field-money {
+  position: relative;
+  .ks-field-money-right-icon {
+    color: #03050d;
+  }
+  .ks-field-money-unit {
+    border-color:#7B98E9;
+    background: #edecfa;
+    color: #7B98E9;
+    z-index: 1000;
+    position: absolute;
+    right: 14px;
+    bottom: -8px;
+  }
+}
+</style>

package/kuasheng-ui/components/ks-field-money/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@kyfe/ks-field-money",
+  "version": "0.0.5",
+  "description": "ks-field-money",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/kuasheng-ui/components/ks-field-money/utils.js

@@ -0,0 +1,65 @@
+export const numberSplitFloat = (val, decimal = 2) => {
+  // 防止空字符返回为0
+  if (val === '') return val
+  let toNumberVal = Number(val)
+  if (isNaN(toNumberVal)) {
+    return val
+  }
+  let flag = ''
+  if (toNumberVal < 0) {
+    flag = '-'
+    toNumberVal = Math.abs(toNumberVal)
+  }
+  const numStrArr = String(toNumberVal).split('.')
+  const numStr = numStrArr[0]
+  const _decimal = decimal !== undefined ? decimal : (numStrArr[1] && numStrArr[1].length) || ''
+  const decimalNum = numStrArr[1] && decimal >= 1 ? `.${numStrArr[1].substring(0, _decimal)}` : ''
+  if (toNumberVal >= 10000) {
+    const len = numStr.length
+    const numArr = []
+    // 每4位截取一次，截取小于10000部分的数据
+    let itemLast = Number(numStr.substring(len - 4, len))
+    // 只有个位数前面要加0 等于0则去掉，不加入数组拼接
+    if (itemLast < 10 && itemLast > 0) {
+      numArr.unshift('0' + itemLast)
+    } else if (itemLast >= 10) {
+      numArr.unshift(itemLast)
+    }
+    let itemCenter = 0
+    let itemFirst = 0
+    if (len <= 8) {
+      // 长度小于等于8， 没有亿位，这个时候万位可以从index = 0 开始截取
+      itemCenter = Number(numStr.substring(0, len - 4))
+    } else {
+      // 长度大于8才有亿， 万位不能再从index = 0开始截取
+      itemCenter = Number(numStr.substring(len - 8, len - 4))
+      itemFirst = Number(numStr.substring(0, len - 8))
+    }
+    // 万位和亿位如果大于0才加入数组拼接
+    if (itemCenter > 0) numArr.unshift(itemCenter + '万')
+    if (itemFirst > 0) numArr.unshift(itemFirst + '亿')
+    return flag + numArr.join('') + decimalNum
+  }
+  return flag + Math.floor(toNumberVal) + decimalNum
+}
+
+export function formatMoneySeparators(number, decimal = 2) {
+  if (number === '') return number
+  number = Number(number)
+  if (typeof number !== 'number') {
+    throw new Error('Input must be a number')
+  }
+  const parts = truncateDecimals(number, decimal).toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return parts.join('.')
+}
+
+function hasDecimal(number) {
+  return isFinite(number) && number % 1 !== 0
+}
+
+function truncateDecimals(number, decimal) {
+  if (!hasDecimal(number)) return number
+  const factor = Math.pow(10, decimal)
+  return Math.floor(number * factor) / factor
+}

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

@@ -0,0 +1,131 @@
+<template>
+  <div class="ks-history-input">
+    <div class="ks-history-input-content">
+      <ks-input-search ref="ksHistoryInputSearch" :value="value" :clearable="false" :placeholder="placeholder" @focus="focus" @blur="blur" @change="change" @search="search" :left-icon="leftIcon">
+        <template v-if="clearable" #right-icon>
+          <div
+            v-show="showClearVal.length > 0"
+            style="color: #c8c9cc;padding: 0 8px;"
+            @click.stop="clear">
+            <van-icon name="clear" />
+          </div>
+        </template>
+      </ks-input-search>
+    </div>
+    <div v-if="showCancel" class="ks-history-input-cancel" @click="cancel">取消</div>
+  </div>
+</template>
+<script>
+import ksInputSearch from '../ks-input-search/index.vue'
+export default {
+  name: 'ks-employee-input',
+  components: {
+    ksInputSearch
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    leftIcon: {
+      type: String,
+      default: ''
+    },
+    // 是否展示取消按钮
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      searchVal: '',
+      showClearVal: ''
+    }
+  },
+  watch: {
+    value(val) {
+      console.log('watch', val)
+    }
+  },
+  methods:{
+    clear () {
+      this.searchVal = ''
+      this.showClearVal = ''
+      this.$refs.ksHistoryInputSearch && this.$refs.ksHistoryInputSearch.setValue('')
+      this.$emit('clear', this.searchVal)
+    },
+    focus () {
+      this.$emit('focus')
+    },
+    blur () {
+      this.$emit('blur')
+    },
+    cancel () {
+      this.$emit('cancel', false)
+    },
+    change (val) {
+      this.showClearVal = val
+      this.$emit('change', val)
+    },
+    setValue(data) {
+      this.$refs.ksHistoryInputSearch.setValue(data)
+      this.showClearVal = data
+    },
+    search (val) {
+      console.log('search')
+      this.$emit('search', val)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-history-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background-color: #ffffff;
+  margin-bottom: 1px;
+  .ks-history-input-content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    width: calc(100% - 40px);
+    /deep/ .van-search {
+      flex-grow: 1;
+      min-width: 100px;
+      padding: 0 !important;
+      background-color: #ffffff;
+      .van-search__content {
+        background-color: #ffffff;
+      }
+      .van-field__left-icon {
+        display: none;
+      }
+    }
+  }
+  .ks-history-input-cancel {
+    color: #165DFF;
+    flex-shrink: 0;
+    text-align: right;
+    width: 40px;
+    font-size: 16px;
+  }
+}
+</style>
+
+
+

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

@@ -0,0 +1,188 @@
+<template>
+  <van-popup
+    v-model="value"
+    v-bind="bindAttr"
+    v-on="$listeners"
+    :style="{...popupStyle}"
+    :class="['ks-employee-popup', customClass]"
+  >
+    <div class="ks-history-list">
+      <div class="history-text">
+        <span>搜索历史</span>
+        <img v-if="historyList.length" @click="clearAll" src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-employee/delete.png" />
+      </div>
+      <div v-if="historyList.length" class="history-box">
+        <div class="history-list-content" v-for="(item, index) in historyList" :key="index">
+          <div class="history-list-item">
+            <span class="history-list-item-text" @click="selectItem(item)">{{ item }}</span>
+            <img class="history-list-item-delete"  src="./img/delete.png" @click="deleteHistory(index)"/>
+          </div>
+        </div>
+      </div>
+      <div class="history-no-data" v-else>
+        <ks-no-data type="HistoryEmpty" text="无搜索历史" />
+      </div>
+    </div>
+  </van-popup>
+</template>
+<script>
+const Dialog = window.vant && window.vant.Dialog
+import { deleteAllHistory, pushHistory, getHistoryData, setData } from './utils'
+export default {
+  name: 'ks-history-list',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    popAttr: {
+      type: Object,
+      default: () => ({})
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    popupStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    storageKey: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    bindAttr () {
+      return {
+        position: 'bottom',
+        getContainer: 'body',
+        closeable: false,
+        overlay: false,
+        ...this.popAttr
+      }
+    }
+  },
+  data() {
+    return {
+      historyList: []
+    }
+  },
+  watch: {
+    value(val) {
+      if (val) {
+        this.getList()
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    addHistory(data) {
+      pushHistory(this.storageKey, data)
+      this.getList()
+    },
+    closePop() {
+      this.$emit('input', this.value)
+    },
+    clearAll() {
+      try {
+        Dialog.confirm({
+            title:"清空搜索历史",
+            message: "确认清空全部搜索历史？"
+        }).then(async () => {
+          deleteAllHistory(this.storageKey)
+          this.$emit('deleteAll')
+          this.getList()
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    deleteHistory(index) {
+      this.historyList.splice(index, 1)
+      console.log('this.historyList', this.historyList)
+      setData(this.storageKey, this.historyList)
+      this.$emit('deleteItem')
+    },
+    selectItem(data) {
+      this.$emit('select', data)
+    },
+    getList() {
+      this.historyList = getHistoryData(this.storageKey)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-history-list {
+  background: #fff;
+  padding: 0 16px;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  .history-text {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #5f5f5f;
+    font-weight: 500;
+    font-size: 14px;
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .history-box {
+    flex: 1;
+    overflow-y: scroll;
+  }
+  .history-list-content {
+    display: flex;
+    flex-direction: row;
+    margin-top: 12px;
+    color: #1B2240;
+    &:first-child {
+      margin-top: 8px;
+    }
+    .history-list-item {
+      font-size: 14px;
+      padding: 7px 12px;
+      display: flex;
+      align-items: center;
+      background: #F7F8FA;
+      border-radius: 16px;
+      &-text {
+        position: relative;
+        &::before {
+          position: absolute;
+          content: '';
+          right: -10px;
+          top: 4px;
+          bottom: 0;
+          width: 1px;
+          height: 12px;
+          background: #D7D7DB;
+        }
+      }
+      &-delete {
+        margin-left: 18px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+  .history-no-data {
+    flex: 1;
+    margin-top: 20px;
+    /deep/ .no-data-wrapper {
+      img {
+        width: 120px;
+        height: 120px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,9 @@
+ import ksHistorySearch from './index.vue'
+
+ export default {
+  install: (Vue) => {
+    Vue.component('ksHistorySearch', ksHistorySearch)
+  },
+  ...ksHistorySearch
+ }
+