@kyfe/fms-vue2-components 0.0.3 → 0.0.5

package/src/components/oa-datetime-picker-new/components/date-picker/style.less

@@ -0,0 +1,117 @@
+@title-color: #7972FE;
+@day-text-color: #333;
+@selected-bgcolor: #7972FE;
+@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: 62px;
+  padding: 16px 16px 0 16px;
+  box-shadow: 0 0 4px 0 rgba(158,155,218,0.22);
+  z-index: 1;
+}
+
+// 公共样式
+.ks-date-picker {
+  &__body {
+    flex: 1;
+    overflow: hidden;
+    height: 100%;
+    position: relative;
+  }
+}
+
+// 覆盖vant样式
+.ks-date-picker {
+  .van-calendar__body {
+    height: 100%;
+    flex: 1;
+    overflow: auto;
+    -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__day--disabled {
+      color: #ccc;
+    }
+  }
+  .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(121,114,254,.1);
+  }
+  .van-calendar__day--end::after {
+    position: absolute;
+    right: 50%;
+    top: 0;
+    bottom: 0;
+    width: 85%;
+    content: " ";
+    background-color: rgba(121,114,254,.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/src/components/oa-datetime-picker-new/components/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/src/components/oa-datetime-picker-new/components/date-picker/week-select.vue

@@ -0,0 +1,100 @@
+<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 && (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: #7972fe !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/src/components/oa-datetime-picker-new/index.vue

@@ -0,0 +1,212 @@
+// 新的日期选择组件
+// 替换为日历格式的新UI日期组件
+<template>
+  <div class="oa-datetime-picker">
+    <van-field readonly
+               name="datetimePicker"
+               input-align="right"
+               error-message-align="right"
+               :required="required"
+               :rules="[{ required: required, message: `请选择${label}` }]"
+               :value="displayValue"
+               :label="label"
+               v-bind="$attrs"
+               :placeholder="placeholder"
+               @click="show">
+      <template #label>
+        <slot name="label"/>
+      </template>
+    </van-field>
+    <!-- 替换为全新的日期组件-日历形式,没法选择时间 -->
+    <date-picker :type="type"
+                 v-model="showPicker"
+                 :min="minDate||min"
+                 :max="maxDate||max"
+                 :formatter="formatter"
+                 :defaultValue="defaultDate"
+                 @confirm="onConfirm"
+                 v-bind="$attrs"
+                 @cancel="showPicker = false"
+                 ref="dp" />
+  </div>
+</template>
+
+<script>
+  import moment from 'dayjs'
+  import DatePicker from './components/date-picker'
+
+  const DEFAULT_FORMATS = {
+    month: 'YYYY/MM',
+    date: 'YYYY/MM/DD',
+    daterange: 'YYYY-MM-DD',
+    // datetime: 'YYYY/MM/DD HH:mm',
+    // months: 'yyyy-MM',
+    // time: 'HH:mm:ss',
+    // week: 'yyyywWW',
+    // timerange: 'HH:mm:ss',
+    // monthrange: 'yyyy-MM',
+    // datetimerange: 'yyyy-MM-dd HH:mm:ss',
+    // year: 'yyyy',
+    // years: 'yyyy'
+  };
+
+  const formatAsFormatAndType = (value, customFormat, type) => {
+    if (!value) return null
+    const format = customFormat || DEFAULT_FORMATS[type]
+    return momentFormatUtil(value, format)
+  }
+
+  const momentFormatUtil = (value, format) => {
+    return moment(value).format(format)
+  }
+
+  export default {
+    name: 'oa-datetime-picker',
+    props: {
+      type: {
+        type: String,
+        default: 'date'
+      },
+      value: [String, Number],
+      label: String,
+      placeholder: String,
+      required: Boolean,
+      disabled: Boolean,
+      minDate: String,
+      maxDate: String,
+      min: String,
+      max: String,
+      // 提交的数据格式是否需要为时间戳
+      isTimestamp: {
+        type: Boolean,
+        default: false
+      },
+      displayFormat: String // 显示的格式
+    },
+    computed: {
+      // 用于页面显示的值
+      displayValue () {
+        if (this.type === 'daterange' && Array.isArray(this.value)) {
+          if (this.value.length !== 2) return ''
+          const start = formatAsFormatAndType(this.value[0], this.displayFormat, this.type)
+          const end = formatAsFormatAndType(this.value[1], this.displayFormat, this.type)
+          return `${start} ~ ${end}`
+        }
+        return formatAsFormatAndType(this.parsedValue, this.displayFormat, this.type)
+      },
+      // 兜底逻辑,支持更多的传入类型,不至于报错
+      parsedValue () {
+        if (!this.value) return this.value
+        // 兼容问题:这里不要用new Date(),IOS机型如果传入'2020-01',会变成invalid date
+        // return new Date(this.value)
+        return moment(this.value)
+      }
+    },
+    components: { DatePicker },
+    data () {
+      return {
+        showPicker: false,
+        timeVal: new Date()
+      }
+    },
+    methods: {
+      show () {
+        // 禁用选择
+        if (this.disabled) {
+          return false
+        }
+        this.defaultDate = this.parsedValue || new Date()
+        this.showPicker = true
+        if (this.type === 'daterange') {
+          // 当为日期范围时,默认定位到当天日期
+          let timer = setInterval(() => {
+            let selector = this.$refs.dp.$refs.selector
+            if (selector) {
+              let currentDate = [new Date(), new Date()]
+              if (Array.isArray(this.value) && this.value.length === 2) {
+                currentDate = [
+                  new Date(this.value[0]),
+                  new Date(this.value[1]),
+                ]
+              }
+              selector.currentDate = currentDate
+              clearInterval(timer)
+            }
+          })
+          // 3秒后强制终止轮询
+          setTimeout(() => {
+            clearInterval(timer)
+          }, 3000)
+        }
+      },
+      formatter (type, val) {
+        if (type === 'year') {
+          return `${val}年`
+        } else if (type === 'month') {
+          return `${val}月`
+        } else if (type === 'day') {
+          return `${val}日`
+        } else if (type === 'hour') {
+          return `${val}时`
+        } else if (type === 'minute') {
+          return `${val}分`
+        }
+        return val
+      },
+      onConfirm (val) {
+        console.log('onConfirm---', val)
+        this.timeVal = val.date
+        // 恢复之前的日期格式
+        let formatMap = [
+          {
+            label: 'month',
+            value: 'YYYY-MM'
+          },
+          {
+            label: 'date',
+            value: 'YYYY-MM-DD'
+          },
+          // {
+          //   label: 'datetime',
+          //   value: 'YYYY-MM-DD HH:mm'
+          // }
+        ]
+        if (this.type === 'daterange' && Array.isArray(this.timeVal)) {
+          let arr = []
+          if (this.timeVal.every(val => val)) {
+            const start = momentFormatUtil(this.timeVal[0], 'YYYY-MM-DD')
+            const end = momentFormatUtil(this.timeVal[1], 'YYYY-MM-DD')
+            arr = [start, end]
+          } 
+          this.showPicker = false
+          this.$emit('input', arr)
+          return
+        }
+        let format = formatMap.find(t => t.label === this.type) || {}
+        console.log('format---', format, this.timeVal, format.value)
+        // 这里不要修改父组件传进来的值,this.value
+        const newValue = momentFormatUtil(this.timeVal, format ? format.value : 'YYYY-MM-DD')
+        console.log('newValue', newValue)
+        this.showPicker = false
+        this.$emit('input', this.isTimestamp ? new Date(newValue).getTime() : newValue)
+      },
+    },
+  }
+</script>
+
+<style scoped lang="less">
+  .oa-datetime-picker {
+    .van-cell:after {
+      position: absolute;
+      content: " ";
+      pointer-events: none;
+      right: 0;
+      bottom: 0;
+      left: 16px;
+      right: 16px;
+      border-bottom: 1px solid #d9d9d9;
+      -webkit-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+    }
+  }
+</style>

package/src/index.js

@@ -5,6 +5,8 @@ import FmsKsDecrypt from './components/fms-ks-decrypt/index'
 import FmsKsFileUpload from './components/fms-ks-file-upload/index'
 import FmsKsFileView from './components/fms-ks-file-view/index'
 import FmsScrollList from './components/fms-scroll-list/index'
+import FmsKsFormGrid from './components/fms-ks-form-grid'
+import FmsKsSearchTips from './components/fms-ks-search-tips'
 
 const components = [
   FmsCopyBox,
@@ -12,7 +14,9 @@ const components = [
   FmsKsDecrypt,
   FmsKsFileUpload,
   FmsKsFileView,
-  FmsScrollList
+  FmsScrollList,
+  FmsKsFormGrid,
+  FmsKsSearchTips
 ]
 
 const install = function(Vue) {
@@ -28,7 +32,9 @@ export {
   FmsKsDecrypt,
   FmsKsFileUpload,
   FmsKsFileView,
-  FmsScrollList
+  FmsScrollList,
+  FmsKsFormGrid,
+  FmsKsSearchTips
 }
 // 全量导出
 export default {

package/vite.config.js

@@ -25,11 +25,22 @@ const getComponentEntries = () => {
 
 export default defineConfig({
   plugins: [
-    vueJsx(),
     vue(),
+    vueJsx({
+      // 添加以下配置处理 .js 文件中的 JSX
+      include: /\.[jt]sx?$/, // 处理 .js 和 .jsx、.vue 文件
+      exclude: [/node_modules/]      // 排除 node_modules
+    }),
     libcss(),
     libInjectCss()
   ],
+  // 添加以下优化配置
+  optimizeDeps: {
+    include: [
+      '**/*.js',     // 显式包含 .js 文件
+      '**/*.jsx',     // 包含 .jsx 文件
+    ]
+  },
   resolve: {
     alias: {
       '@': './src',