@kyfe/ks-query-table 0.0.21 → 0.0.22

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

@@ -0,0 +1,136 @@
+<template>
+  <div :class="['ks-month', {'ks-month-single-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"
+            v-for="m of months"
+            :class="{'van-calendar__day--disabled': (min && +new Date(`${y}/${m}/01`) < min) || (max && +new Date(`${y}/${m}/01`) > max)}"
+            :key="m"
+            @click="handleSelectDay(y, m, (min && +new Date(`${y}/${m}/01`) < min) || (max && +new Date(`${y}/${m}/01`) > max))"
+          >
+            <div :class="{'van-calendar__selected-day': currentMonth === +new Date(`${y}/${m}/01`)}">{{ m }}月</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="!currentMonth"
+        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-single",
+  props: {
+    defaultMonth: {
+      type: [String, Date, Number, Object],
+      default: () => new Date()
+    },
+    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],
+      years: getYears(this.yearRange),
+      currentMonth: formatMonth(this.defaultMonth)
+    };
+  },
+  watch: {
+    defaultMonth: function () {
+      this.currentMonth = formatMonth(this.defaultMonth)
+    }
+  },
+  computed: {
+    monthRangeStr () {
+      if (this.currentMonth) {
+        return `${format(this.currentMonth)}`
+      }
+      return ''
+    },
+    min () {
+      return this.minMonth ? formatMonth(this.minMonth) : null
+    },
+    max () {
+      return this.maxMonth ? formatMonth(this.maxMonth) : null
+    }
+  },
+  methods: {
+    handleSelectDay(y, m, disabled) {
+      if (!disabled) {
+        this.currentMonth = formatMonth(`${y}/${m}`)
+        this.$emit('select', new Date(this.currentMonth))
+      }
+    },
+    handleSelect() {
+      this.$emit("confirm", new Date(this.currentMonth))
+    },
+    scrollInto() {
+      setTimeout(() => {
+        if (this.currentMonth) {
+          let top = this.$el.querySelector('.van-calendar__selected-day')
+          this.$refs.body.scrollTop = top && top.getBoundingClientRect().top - 120
+        }
+      }, 240);
+    },
+    scrollClear () {
+      this.$refs.body.scrollTop = 0
+    }
+  },
+};
+</script>
+<style lang="less">
+@import url("./style.less");
+.ks-month .select-month {
+  color: #fff;
+  background-color: #165DFF;
+  border-radius: 50%;
+  transform: scale(0.9);
+}
+.ks-month-single-horizontal {
+  .van-calendar__day {
+    height: 40px !important;
+  }
+  .ks-month-header {
+    line-height: 44px;
+  }
+  .van-calendar__bottom-info {
+    bottom: 1px;
+  }
+  .van-calendar__selected-day {
+    width: 40px !important;
+    height: 40px !important;
+  }
+}
+</style>

package/kuasheng-ui/components/ks-month/style.less

@@ -0,0 +1,125 @@
+.ks-month .van-calendar__day--start::after {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 50%;
+  content: " ";
+  background-color: rgba(0,108,219,.1);
+}
+.ks-month .van-calendar__confirm {
+  border-radius: 8px; 
+}
+
+.ks-month .van-calendar__day--end::after {
+  position: absolute;
+  right: 50%;
+  top: 0;
+  bottom: 0;
+  width: 50%;
+  content: " ";
+  background-color:#7b50e61a;
+}
+
+.ks-month .van-calendar__day {
+margin-bottom: 6px;
+}
+
+.ios .ks-month-header {
+padding-top: 20px;
+}
+
+.ipx .ks-month-header {
+padding-top: 44px;
+}
+
+.afc .ks-month-header {
+  padding-top: var(--status-bar-height, 0px);
+}
+
+.ks-month-popup {
+height: 100%;
+.van-popup__close-icon--top-left {
+  top: 12px;
+}
+}
+
+.ios .ks-month-popup .van-popup__close-icon--top-left {
+  top: 32px;
+}
+
+.ipx .ks-month-popup .van-popup__close-icon--top-left {
+  top: 56px;
+}
+
+.afc .ks-month-popup .van-popup__close-icon--top-left {
+  top: calc(12px + var(--status-bar-height, 0px));
+}
+
+.ios .ks-month-body {
+ padding-top: 64px;
+}
+
+.ipx .ks-month-body {
+ padding-top: 84px;
+}
+
+.afc .ks-month-body {
+  padding-top: calc(44px + var(--status-bar-height, 0px));
+}
+
+.ks-month {
+position: relative;
+display: flex;
+flex-direction: column;
+height: 100%;
+&-header {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  text-align: left;
+  height: 44px;
+  font-weight: 500;
+  line-height: 44px;
+  box-shadow: 0 2px 10px rgba(125,126,128,.16);
+  background-color: #fff;
+  font-size: 14px;
+  box-sizing: content-box;
+  &__title {
+    padding-left: 44px;
+    font-size: 16px;
+  }
+  &__daterange {
+    margin-left: 20px;
+    color: #165DFF;
+    font-size: 14px;
+  }
+}
+&-body {
+  padding-top: 44px;
+}
+&__day {
+  height: calc( 100vw / 6);
+  width: 16.666%;
+}
+.van-calendar__selected-day {
+  color: #fff;
+  background-color: #165DFF;
+  border-radius: 50%;
+}
+.van-calendar {
+  &__confirm {
+    background-color: #165DFF;
+    border: 1px solid #165DFF;
+  }
+  &__day {
+    &--start, &--end {
+      border-radius: 50%;
+    }
+  }
+  &__bottom-info {
+    line-height: 10px;
+  }
+  
+}
+}

package/kuasheng-ui/components/ks-month/utils.js

@@ -0,0 +1,35 @@
+// 时间对象格式为中文文本
+export const format = (date) => {
+  if (!date) {
+    return ''
+  }
+  let _date = new Date(date)
+  let y = _date.getFullYear()
+  let m = _date.getMonth() + 1
+  m = m < 10 ? '0' + m : m
+  return `${y}年${m}月`
+}
+
+// 获取年数组
+export const getYears = (arr) => {
+  let num = arr[1]
+  let years = []
+  while (num >= arr[0]) {
+    years.unshift(num)
+    num = num - 1
+  }
+  return years
+}
+
+// 格式统一格式为时间戳
+export const formatMonth = (month) => {
+  let _month = null
+  if (typeof month === 'string') {
+    let m = month.replace(/-/g, "/").split('/')
+    _month = new Date(`${m[0]}/${m[1]}/01`)
+  } else {
+    let d = new Date(month)
+    _month = new Date(`${d.getFullYear()}/${d.getMonth() + 1}/01`)
+  }
+   return +_month
+}

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

@@ -0,0 +1,264 @@
+<!--
+ * @Author: HR-OA-KTS 曾育 zengyu@ky-tech.com.cn
+ * @Date: 2023-02-04 10:24:00
+ * @LastEditors: HR-OA-KTS 曾育 zengyu@ky-tech.com.cn
+ * @LastEditTime: 2023-02-04 20:36:55
+ * @FilePath: /kuasheng-ui/components/ks-nav-bar/index.vue
+ * @Description: 轻应用头部导航组件是基于van-nav-bar二次封装的，布局使用的定位且样式还需单独调整，使用起来不方便。为提升效率、减轻各产品线开发工作量，故对头部导航组件进行重构，此版本组件基本做了向下兼容，沿用了van-nav-bar的api，并增加了扩展
+-->
+
+<template>
+  <div
+    class="ks-nav"
+    :class="{'border-bottom': border}"
+    :style="{background, zIndex}"
+  >
+    <!-- 主要内容 -->
+    <div
+      class="ks-nav-bar-content"
+      :style="{'color': textColor}"
+    >
+      <div class="ks-nav-bar-content-left">
+        <div
+          v-if="leftArrow"
+          class="arrow-left"
+          :class="leftArrow ? '' : (hideArrowSpace ? 'hide-space' : 'visible-space')"
+        >
+          <van-icon
+            name="arrow-left"
+            @click="clickLeft"
+          />
+          {{ leftText }}
+        </div>
+
+        <!-- 左侧slot -->
+        <slot name="left"></slot>
+      </div>
+
+      <!-- 标题 -->
+      <div class="ks-nav-bar-content-center">
+        <div class="title-wrap">
+          <div class="title" @click="clickTitle">
+            {{ title }}
+          </div>
+
+          <!-- 用户访问统计 -->
+          <KsUserAccess
+            v-bind="$attrs"
+          ></KsUserAccess>
+        </div>
+      </div>
+
+      <div class="ks-nav-bar-content-right">
+        <div class="arrow-right">
+          {{ rightText }}
+        </div>
+
+        <!-- 右侧slot -->
+        <slot name="right"></slot>
+      </div>
+    </div>
+
+    <!-- 胶囊留白位置 -->
+    <div class="ks-nav-bar-capsule"
+         v-show="capsule"></div>
+  </div>
+</template>
+
+<script>
+  // 用户访问统计
+  import KsUserAccess from '../ks-user-access.vue'
+
+  export default {
+    components: {
+      KsUserAccess
+    },
+    props: {
+      // 背景(可传颜色 或 style对象))
+      background: {
+        type: [String, Object],
+        default: ''
+      },
+      // 颜色
+      textColor: {
+        type: String,
+        default: '#323233'
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 左侧文案
+      leftText: {
+        type: String,
+        default: ''
+      },
+      // 右侧文案
+      rightText: {
+        type: String,
+        default: ''
+      },
+      // 是否显示左侧箭头
+      leftArrow: {
+        type: Boolean,
+        default: false
+      },
+      // 不显示左侧箭头时，是否需要【留白占位】
+      hideArrowSpace: {
+        type: Boolean,
+        default: false
+      },
+      // 是否需要右侧的胶囊留白位置
+      capsule: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示下边框
+      border: {
+        type: Boolean,
+        default: true
+      },
+      // 是否固定在顶部
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // 导航栏 z-index
+      zIndex: {
+        type: [String, Number],
+        default: 1
+      },
+      // 是否开启顶部安全区适配
+      safeAreaInsetTop: {
+        type: Boolean,
+        default: false
+      },
+      // 是否开启两侧按钮的点击反馈
+      clickable: {
+        type: Boolean,
+        default: true
+      }
+    },
+    methods: {
+      // 点击左侧按钮时触发
+      clickLeft () {
+        if (this.clickable) {
+          this.$emit('click-left')
+        }
+      },
+      // 点击右侧按钮时触发
+      clickRight () {
+        if (this.clickable) {
+          this.$emit('click-right')
+        }
+      },
+      // 点击标题触发
+      clickTitle () {
+        this.$emit('click-title')
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .visible-space {
+    visibility: hidden;
+  }
+  .hide-space {
+    display: none;
+  }
+  .ks-nav {
+    display: flex;
+    width: 100%;
+    padding-left: 16px;
+    align-items: center;
+    box-sizing: border-box;
+    &.border-bottom {
+      position: relative;
+      &::after {
+        position: absolute;
+        content: ' ';
+        top: -50%;
+        right: -50%;
+        bottom: -50%;
+        left: -50%;
+        box-sizing: border-box;
+        pointer-events: none;
+        border: 0 solid #d9d9d9;
+        transform: scale(0.5);
+        border-bottom-width: 1px;
+      }
+    }
+
+    .ks-nav-bar-content {
+      flex-grow: 1;
+      width: 100%;
+      height: 44px;
+      display: flex;
+
+      .ks-nav-bar-content-left {
+        display: flex;
+        align-items: center;
+
+        .arrow-left {
+          display: flex;
+        }
+
+        .van-icon-arrow-left {
+          font-size: 22px;
+        }
+      }
+
+      .ks-nav-bar-content-center {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+
+        .title-wrap {
+          display: flex;
+
+          .title {
+            max-width: 116px;
+            font-weight: 500;
+            // 单行溢出隐藏
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .ks-nav-bar-content-right {
+        display: flex;
+        align-items: center;
+      }
+    }
+    // 胶囊留白位置
+    .ks-nav-bar-capsule {
+      flex-shrink: 0;
+      width: 108px;
+      height: 44px;
+    }
+  }
+
+  // 顶部增加刘海屏安全距离
+  .ios {
+    .ks-nav-bar {
+      padding-top: 20px;
+    }
+  }
+
+  .ipx {
+    .ks-nav-bar {
+      padding-top: 44px;
+    }
+  }
+
+  .afc {
+    .ks-nav-bar {
+      padding-top: var(--status-bar-height, 0px)
+    }
+  }
+</style>

package/kuasheng-ui/components/ks-nav-bar.js

@@ -0,0 +1,35 @@
+import KsUserAccess from './ks-user-access'
+export default {
+  functional: true,
+  render (h, self) {
+    // off-statistics关闭用户访问统计
+    if (self.props.offStatistics === undefined) {
+      let slots = self.data.scopedSlots
+      if (slots && slots.title) {
+        let title = slots.title
+        slots.title = () => {
+          return [...title(), h(KsUserAccess,{props:self.props})]
+        }
+      } else {
+        const clickTitle = () => {
+          self.listeners['click-title'] && self.listeners['click-title']()
+        }
+        const title = h('span', {
+          on: {
+            click: clickTitle
+          }
+        }, self.props.title)
+        self.data.scopedSlots = {
+          ...self.scopedSlots,
+          title: () => {
+            return [title, h(KsUserAccess,{props:self.props})]
+          }
+        }
+      }
+    }
+    return h(
+      'van-nav-bar',
+      self.data
+    )
+  }
+}