@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-date-picker/month-select.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="van-calendar__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"
+          v-for="m of months"
+          :class="{'van-calendar__day--disabled': (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax)}"
+          :key="m"
+          @click="handleSelect(y, m, (currentMin && +new Date(`${y}/${m}/1`) < currentMin) || (currentMax && +new Date(`${y}/${m}/1`) > currentMax))"
+        >
+          <div :class="{'van-calendar__selected-day': +currentMonth === +new Date(`${y}/${m}/1`)}">{{ m }}月</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getRangeYears, foramtToMonth, formatToString } from './utils'
+
+export default {
+  name: "month-select",
+  props: {
+    defaultValue: {
+      type: [Date, String, Number],
+      default: new Date()
+    },
+    yearRange: {
+      type: Array,
+      default: () => [new Date().getFullYear() - 5, new Date().getFullYear()],
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    min: [String, Number, Date],
+    max: [String, Number, Date]
+  },
+  data() {
+    return {
+      years: getRangeYears(this.yearRange),
+      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      currentMonth: null,
+      currentMin: null,
+      currentMax: null
+    }
+  },
+  methods: {
+    init () {
+      this.currentMonth = foramtToMonth(this.defaultValue)
+      this.currentMin = this.min ? +foramtToMonth(this.min) : null
+      this.currentMax = this.max ? +foramtToMonth(this.max) : null
+      let monthStr = formatToString(this.currentMonth, 'month')
+      let arr = monthStr.split('/')
+      this.handleSelect(arr[0], arr[1], false)
+      this.scrollInto()
+    },
+    scrollInto() {
+      setTimeout(() => {
+        if (this.currentMonth) {
+          let top = this.$el.querySelector('.van-calendar__selected-day')
+          this.$refs.body.scrollTop = top ? top.getBoundingClientRect().top - 100 : 0
+        }
+      }, 240)
+    },
+    handleSelect(y, m, disabled) {
+      if (!disabled) {
+        this.currentMonth = foramtToMonth(`${y}/${m}`)
+        this.$emit("select", {date: this.currentMonth, str: formatToString(this.currentMonth, 'month')})
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-month__day {
+  width: 16.666%;
+  height: 50px;
+  // .van-calendar__day--start::after, .van-calendar__day--end::after {
+  //   width:  !important;
+  // }
+}
+</style>

package/kuasheng-ui/components/ks-date-picker/quarter-select.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="van-calendar__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-quarter__day"
+          v-for="(value, key) of cnQuarters"
+          :key="key"
+          @click="handleSelect(y, key)"
+        >
+          <div :class="{'ks-quarter__selected-day': String(y) === String(currentYear) && String(key) === String(currentQuarter)}">
+            {{value}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRangeYears } from './utils'
+
+export default {
+  name: 'quarter-select',
+  props: {
+    defaultValue: {
+      type: String,
+      default: (function () {
+        let _quarters = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4]
+        let _date = new Date()
+        let y = _date.getFullYear()
+        let m = _date.getMonth()
+        return `${y}-${_quarters[m]}`
+      }())
+    },
+    yearRange: {
+      type: Array,
+      default: () => ([new Date().getFullYear() - 2, new Date().getFullYear()])
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      years: getRangeYears(this.yearRange),
+      cnQuarters: {
+        '1': '一季度',
+        '2': '二季度',
+        '3': '三季度',
+        '4': '四季度'
+      },
+      currentYear: null,
+      currentQuarter: null
+    }
+  },
+  methods: {
+    init () {
+      let arr = this.defaultValue.split('-')
+      this.handleSelect(arr[0], arr[1])
+      this.scrollInto()
+    },
+    scrollInto () {
+      setTimeout(() => {
+        let top = this.$el.querySelector('.ks-quarte__selected-day')
+        this.$refs.body.scrollTop = top ? top.getBoundingClientRect().top - 100 : 0
+      }, 240)
+    },
+    handleSelect (y, q) {
+      this.currentYear = y
+      this.currentQuarter = q
+      this.$emit('select', {year: y, quarter: q, cn: this.cnQuarters[q]})
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-quarter__day {
+  width: 25%;
+  height: 74px;
+}
+.ks-quarter__selected-day {
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+  background-color: #165DFF;
+  color: #fff;
+  padding: 0 16px;
+  border-radius: 999px;
+}
+</style>

package/kuasheng-ui/components/ks-date-picker/style.less

@@ -0,0 +1,121 @@
+@title-color: #165DFF;
+@day-text-color: #333;
+@selected-bgcolor: #165DFF;
+@selected-text-color: #fff;
+
+// mixin
+.header-title-text (@height: 40px) {
+  text-align: center;
+  height: @height;
+  line-height: @height;
+  font-size: 14px;
+  color: @title-color;
+  &-split {
+    color: @day-text-color;
+  }
+  &-end-not {
+    color: #ddd;
+  }
+}
+.footer-btn () {
+  height: 58px;
+  padding: 16px 16px 0 16px;
+  // box-shadow: 0 0 4px 0 rgba(115,162,255,0.22);
+  z-index: 1;
+  .van-button {
+    border-radius: 8px;
+  }
+}
+
+// 公共样式
+.ks-date-picker {
+  &__body {
+    flex: 1;
+    overflow: hidden;
+    height: 100%;
+    position: relative;
+  }
+}
+
+// 覆盖vant样式
+.ks-date-picker {
+  .van-calendar__header {
+    box-shadow: none;
+  }
+  .van-calendar__body {
+    height: 100%;
+    flex: 1;
+    overflow: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+  .van-calendar__month-title {
+    height: 40px;
+    line-height: 40px;
+    color: @day-text-color;
+  }
+  .van-calendar__day {
+    color: @day-text-color;
+  }
+  .van-calendar__selected-day, .van-calendar__day--start, .van-calendar__day--end {
+    color: @selected-text-color;
+    background-color: @selected-bgcolor;
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    line-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .van-calendar__day--start-end {
+    color: @selected-text-color;
+    background-color: @selected-bgcolor;
+    width: 54px;
+    height: 44px;
+    line-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+  .van-calendar__day--middle:after {
+    top: 3px;
+    bottom: 3px;
+  }
+  .van-calendar__day--start, .van-calendar__day--end {
+    position: relative;
+  }
+  .van-calendar__day--start::after {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 85%;
+    content: " ";
+    background-color: rgba(22,93,255,.1);
+  }
+  .van-calendar__day--end::after {
+    position: absolute;
+    right: 50%;
+    top: 0;
+    bottom: 0;
+    width: 85%;
+    content: " ";
+    background-color: rgba(22,93,255,.1);
+  }
+  .van-calendar__bottom-info {
+    font-size: 10px;
+    line-height: 10px;
+    font-weight: 300;
+    bottom: 3px;
+    position: absolute;
+    right: 0;
+    left: 0;
+  }
+  .van-calendar__confirm {
+    height: 44px;
+    line-height: 44px;
+    margin-top: 0;
+  }
+}

package/kuasheng-ui/components/ks-date-picker/utils.js

@@ -0,0 +1,109 @@
+// 时间对象格式为文本格式
+export const formatToString = (date, type) => {
+  if (!date) {
+    return null
+  }
+  let _date = new Date(date)
+  let y = _date.getFullYear()
+  let m = _date.getMonth() + 1
+  m = m < 10 ? '0' + m : m
+  let d = _date.getDate()
+  d = d < 10 ? '0' + d : d
+  return type === 'month' ? `${y}/${m}` : `${y}/${m}/${d}`
+}
+
+export const formatToDate = (date) => {
+  if (!date) {
+    return null
+  }
+  if (typeof date === 'string') {
+    date = date.replace(/-/g, "/")
+    return new Date(date)
+  } else {
+    return new Date(date)
+  }
+}
+
+export const foramtToMonth = (date) => {
+  if (!date) {
+    return null
+  }
+  let _date = null
+  if (typeof date === 'string') {
+    let arr = date.replace(/-/g, "/").split('/')
+    _date = new Date(`${arr[0]}/${arr[1]}/01`)
+  } else {
+    let d = new Date(date)
+    _date = new Date(`${d.getFullYear()}/${d.getMonth() + 1}/01`)
+  }
+  return _date
+}
+
+/**
+ * 生成年的区间
+ * @param {*} arr 
+ */
+export const getRangeYears = (arr) => {
+  let num = arr[1]
+  let years = []
+  while (num >= arr[0]) {
+    years.unshift(num)
+    num = num - 1
+  }
+  return years
+}
+
+
+/**
+ * 生成所有年的星期
+ * @param {*} arr 
+ * @param {*} firstDayOfWeek 
+ */
+export const getYearsAndWeeks = (arr, firstDayOfWeek) => {
+  let years = getRangeYears(arr)
+  const getAYearWeeks = (year) => {
+    let weeks = []
+    let _date = new Date(year, 11, 31)
+    let _day = _date.getDay() - firstDayOfWeek + 1
+    let _start = new Date(year, 11, 31 - _day)
+    let _end = new Date(year + 1, 0, 6 - _day)
+    const f = (date) => {
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+      let d = date.getDate()
+      return [
+        `${y}/${m}/${d}`,
+        `${String(m).length > 1 ? m : '0' + m}/${String(d).length > 1 ? d : '0' + d}`
+      ]
+    }
+    while (_end.getFullYear() >= year) {
+      let _startArr = f(_start)
+      let _endArr = f(_end)
+      weeks.unshift({
+        startDay: new Date(_startArr[0]),
+        startDayStr: _startArr[1],
+        endDay: new Date(_endArr[0]),
+        endDayStr: _endArr[1]
+      })
+      _start.setDate(_start.getDate() - 7)
+      _end.setDate(_end.getDate() - 7)
+    }
+    return weeks
+  }
+  return years.map(year => {
+    return {
+      year,
+      weeks: getAYearWeeks(year)
+    }
+  })
+}
+
+export const typeToSelectotMap = {
+  'date': 'DateSelect',
+  'daterange': 'DateRangeSelect',
+  'month': 'MonthSelect',
+  'monthrange': 'MonthRangeSelect',
+  'week': 'WeekSelect',
+  'quarter': 'QuarterSelect',
+  'dateweekmonth': 'DateWeekMonth'
+}

package/kuasheng-ui/components/ks-date-picker/week-select.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="van-calendar__body" ref="body">
+    <div class="van-calendar__month" v-for="y of years" :key="y.year">
+      <div class="van-calendar__month-title">{{ y.year }}年</div>
+      <div class="van-calendar__days">
+        <div
+          class="van-calendar__day ks-week__day"
+          v-for="(w, i) of y.weeks"
+          :key="i"
+          :class="{'ks-week__selected-day': y.year === currentYear && (i + 1) === currentWeek}"
+          @click="handleSelect(y.year, i + 1, w)"
+        >
+          <div>{{String(i + 1).length > 1 ? i + 1 : '0' + (i + 1)}}周({{w.startDayStr}}~{{w.endDayStr}})</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getYearsAndWeeks } from './utils'
+
+export default {
+  name: 'week-select',
+  props: {
+    defaultValue: {
+      type: [Date, String, Number],
+      default: new Date()
+    },
+    yearRange: {
+      type: Array,
+      default: () => ([new Date().getFullYear() - 2, new Date().getFullYear()])
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 1,
+    }
+  },
+  data () {
+    return {
+      years: getYearsAndWeeks(this.yearRange, this.firstDayOfWeek),
+      currentYear: null,
+      currentWeek: null,
+      currentStart: null,
+      currentEnd: null,
+    }
+  },
+  methods: {
+    init () {
+      let _date = new Date(this.defaultValue)
+      let y = _date.getFullYear()
+      let _year = this.years.find(item => item.year === y)
+      let _index = _year.weeks.findIndex(item => +item.startDay <= +_date && +item.endDay >= +_date)
+      let _week = _year.weeks[_index]
+      this.handleSelect(y, _index + 1, _week)
+      this.scrollInto()
+    },
+    scrollInto () {
+      setTimeout(() => {
+        let top = this.$el.querySelector('.ks-week__selected-day')
+        this.$refs.body.scrollTop = top ? top.getBoundingClientRect().top - 100 : 0
+      }, 240)
+    },
+    handleSelect (y, w, week) {
+      this.currentYear = y
+      this.currentWeek = w
+      this.currentStart = week.startDay
+      this.currentEnd = week.endDay
+      this.$emit('select', {year: y, week, num: w})
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-week__day {
+  width: 50%;
+  height: 44px;
+}
+.ks-week__selected-day {
+  color: #165DFF !important;
+  position: relative;
+  &::after {
+    font: normal normal normal 14px/1 'vant-icon';
+    font-size: 12px;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    content: '\F0C8';
+    display: inline-block;
+    position: absolute;
+    right: 4px;
+    top: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <van-field v-if="isField"
+               v-model="value"
+               v-bind="$attrs"
+               @blur="handleBlur"
+               @input="handleInput"
+               @clear="handleClear"
+               @focus="handleFocus"
+               @click-left-icon="clickLeftIcon"
+               @click-right-icon="clickRightIcon">
+      <div v-if="maskFiled.mask"
+           slot="input"
+           class="ks-mobile-decrypt"
+           @click="decryptBtn">
+        {{ value }}
+      </div>
+      <div v-else-if="maskFiled.maskSec"
+           slot="input">
+        {{ maskSecDefault }}
+      </div>
+
+    </van-field>
+    <span v-else
+          :class="maskFiled.mask ? 'ks-mobile-decrypt' : ''"
+          @click="decryptBtn">{{maskFiled.maskSec ? maskSecDefault : value}}</span>
+  </div>
+</template>
+<script>
+  export default {
+    /**
+     * formModel 表单数据@必填
+     * fieldName 对应的后端字段名@必填
+     * fieldNameStr 和label名称一致
+     * maskSecDefault 敏感字段默认显示的内容
+     * isField 是否是在表单中使用 默认为否
+     * idKey 解密时的dataId 作为列表数据的唯一标识
+     * meunCode: {
+     *  moduleCode 解密时菜单ID@必填
+     *  moduleName 当前模块名@必填
+     * }
+     */
+    props: {
+      value: [String, Number],
+      formModel: Object,
+      // 绑定属性、字段
+      fieldName: String,
+      // 字段中文名
+      fieldNameStr: String,
+      maskSecDefault: {
+        type: String,
+        default: '✽✽✽'
+      },
+      isField: {
+        type: Boolean,
+        default: false
+      },
+      idKey: {
+        type: String,
+        default: 'id'
+      },
+      confirmText: {
+        type: String,
+        default: '如非必要请勿查看，此操作会联动风控系统监控！'
+      },
+      meunCode: {
+        type: Object,
+        default: () => {
+          return {
+            moduleCode: '',
+            moduleName: ''
+          }
+        }
+      }
+    },
+    computed: {
+      maskFiled () {
+        let mask = null
+        let maskSec = null
+        if (this.formModel) {
+          let tempModel = this.formModel
+          if (tempModel[this.fieldName + 'Mask'] && this.value.includes('***')) {
+            mask = tempModel[this.fieldName + 'Mask']
+          }
+          if (!tempModel[this.fieldName] && tempModel.hasOwnProperty(this.fieldName + 'MaskSec')) {
+            maskSec = 'maskSec'
+          }
+          tempModel = tempModel[this.fieldName]
+        }
+        return { mask, maskSec }
+      }
+    },
+    methods: {
+      isEmpty (val) {
+        return val === '' || val === null || val === undefined
+      },
+      // 创建随机ID 保证解密唯一值
+      createUuid () {
+        return Math.random().toString(36).substr(3)
+      },
+      decryptBtn () {
+        if (!this.maskFiled.mask) {
+          return
+        }
+        vant.Dialog.confirm({
+          title: '温馨提示',
+          message: this.confirmText
+        }).then(() => {
+          this.decrypt()
+        }).catch(() => {
+        })
+      },
+      async decrypt () {
+        try {
+          let params = {
+            dataId: this.formModel[this.idKey] || this.createUuid(),
+            moduleCode: this.meunCode.moduleCode,
+            fieldName: this.fieldName,
+            fieldContent: this.formModel[this.fieldName + 'Mask'],
+            fieldNameStr: this.fieldNameStr,
+            buttonName: this.meunCode.moduleName
+          }
+          let res = await this.$http('syslog.sensitiveFieldViewLog.save', '10135', params)
+          this.value = res
+          this.$emit('input', res)
+          if (this.idKey !== '') {
+            this.$emit('decryptData', res, this.fieldName, this.formModel[this.idKey])
+          }
+        } catch (err) {
+          console.log(err)
+        }
+
+      },
+      handleBlur () {
+        this.$emit('blur')
+      },
+      handleInput (val) {
+        this.$emit('input', val)
+      },
+      handleFocus (val) {
+        this.$emit('focus', val)
+      },
+      handleClear () {
+        this.$emit('clear')
+      },
+      clickLeftIcon () {
+        this.$emit('click-left-icon')
+      },
+      clickRightIcon () {
+        this.$emit('click-right-icon')
+      }
+    }
+  }
+</script>
+<style scoped>
+  .ks-mobile-decrypt {
+    color: #165DFF;
+  }
+</style>