n20-common-lib 1.3.111 → 1.3.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "1.3.111",
+  "version": "1.3.112",
   "private": false,
   "main": "src/index.js",
   "scripts": {
@@ -46,6 +46,7 @@
     "dayjs": "*",
     "js-cookie": "^3.0.1",
     "jsonwebtoken": "^8.5.1",
+    "lz-string": "^1.4.4",
     "normalize.css": "^8.0.1",
     "numerify": "*",
     "panzoom": "*",

package/src/assets/css/_coreLib.scss

@@ -34,7 +34,7 @@
 @import '../../plugins/Print/print.scss';
 @import './select.scss';
 @import './plain-text.scss';
-
+@import './cl-date-quarter.scss';
 /* 临时引入 */
 @import '../../components/ChildRange/style.scss';
 @import '../../components/PageHeader/style.scss';

package/src/assets/css/cl-date-quarter.scss

@@ -0,0 +1,61 @@
+.n20-date-select {
+  display: inline-block;
+  width: 285px;
+  border: 1px solid var(--border-color-base);
+  border-radius: var(--border-radius-base);
+
+  .el-select .el-input__inner {
+    border: none;
+    border-radius: 4px 0 0 4px;
+  }
+
+  .el-select .el-input__inner:active,
+  .el-select .el-input__inner:hover,
+  .el-select .el-input__inner:focus {
+    box-shadow: none;
+    border-color: none;
+  }
+  .el-date-editor .el-input__inner {
+    // border-left: none;
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
+    border-radius: 0 4px 4px 0;
+  }
+  .el-date-editor .el-input__inner:active,
+  .el-date-editor .el-input__inner:hover,
+  .el-date-editor .el-input__inner:focus {
+    box-shadow: none;
+    border-color: none;
+  }
+}
+.n20-date-select:hover,
+.n20-date-select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 2px var(--color-primary);
+}
+
+.n20-quarter-date-picker__grid {
+  display: grid;
+  grid-row-gap: 20px;
+  grid-template-columns: 1fr 1fr;
+  padding-top: 20px;
+  .el-button + .el-button {
+    margin-left: 0;
+  }
+}
+.n20-quarter-date-picker__year__grid {
+  display: grid;
+  grid-row-gap: 20px;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  padding-top: 20px;
+  .el-button + .el-button {
+    margin-left: 0;
+  }
+}
+.n20-quarter-date-picker__btn {
+  color: var(--color-text-regular);
+}
+.n20-quarter-date-picker.el-popover {
+  padding: 0;
+}

package/src/components/DateSelect/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <!-- 日 周 月  年 时间选择控件封装 -->
+  <div class="n20-date-select">
+    <el-select v-model="type" placeholder="请选择" style="width: 65px" @change="dateTypeSelectChange">
+      <el-option label="日" :value="1" />
+      <el-option label="周" :value="2" />
+      <el-option label="月" :value="3" />
+      <el-option label="季" :value="4" />
+      <el-option label="年" :value="5" />
+    </el-select>
+    <el-date-picker
+      v-if="selectType === 1"
+      v-model="day"
+      format="yyyy-MM-dd"
+      value-format="yyyy-MM-dd"
+      type="date"
+      placeholder="选择日"
+      @change="dayChange"
+    />
+    <el-date-picker
+      v-if="selectType === 2"
+      v-model="week"
+      format="yyyy 第 WW 周"
+      type="week"
+      :picker-options="{ firstDayOfWeek: 1 }"
+      :default-time="['00:00:00', '23:59:59']"
+      placeholder="选择周"
+      @change="weekChange"
+    />
+
+    <el-date-picker
+      v-if="selectType === 3"
+      v-model="month"
+      type="month"
+      format="yyyy-MM"
+      value-format="yyyy-MM"
+      :editable="false"
+      placeholder="选择月"
+      @change="monthChange"
+    />
+    <quarter-date-picker v-if="selectType === 4" v-model="quarter" @change="handleChange" />
+    <el-date-picker
+      v-if="selectType === 5"
+      v-model="year"
+      type="year"
+      format="yyyy"
+      value-format="yyyy"
+      :editable="false"
+      placeholder="选择年"
+      @change="yearChange"
+    />
+  </div>
+</template>
+
+<script>
+import quarterDatePicker from './quarterDatePicker'
+export default {
+  name: 'SelectDatePicker',
+  components: {
+    quarterDatePicker
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    selectType: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      day: '',
+      week: '',
+      month: '',
+      year: '',
+      quarter: ''
+    }
+  },
+  computed: {
+    type: {
+      set(v) {
+        this.$emit('update:selectType', v)
+      },
+      get(v) {
+        return this.selectType
+      }
+    }
+  },
+  methods: {
+    dateTypeSelectChange(val) {
+      this.$emit('update:selectType', val)
+      this.day = ''
+      this.week = ''
+      this.month = ''
+      this.year = ''
+      this.$emit('selectChange', val)
+    },
+
+    dayChange(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    timestampToTime(timestamp) {
+      var date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+      let Y = date.getFullYear() + '-'
+      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
+      let D = date.getDate() + ''
+      return Y + M + D
+    },
+    weekChange(val) {
+      let todayDay = val ? new Date(val) : new Date()
+      let todayOfWeek = todayDay.getDay()
+      let spendDay = 1
+      if (todayOfWeek !== 0) {
+        spendDay = 7 - todayOfWeek // 开始时间到结束时间还有几天
+      }
+      //  86400000为一天的毫秒数
+      let startTimeNum = todayDay.valueOf() - (6 - spendDay) * 86400000 // 开始时间时间戳
+      let endTimeNum = todayDay.valueOf() + spendDay * 86400000 // 结束时间时间戳
+      let startTimeStr = this.timestampToTime(startTimeNum) // 时间戳转字符串
+      let endTimeStr = this.timestampToTime(endTimeNum)
+      let weekTime = startTimeStr + ' - ' + endTimeStr // 选择的范围
+
+      this.$emit('input', weekTime)
+      this.$emit('change', weekTime)
+    },
+    monthChange(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    yearChange(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    handleChange(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    }
+  }
+}
+</script>

package/src/components/DateSelect/quarterDatePicker.vue

@@ -0,0 +1,174 @@
+<template>
+  <!-- 季度选择时间控件 -->
+  <el-popover
+    ref="popover"
+    v-model="showSeason"
+    popper-class="n20-quarter-date-picker el-date-picker"
+    width="324"
+    placement="bottom-start"
+    trigger="click"
+  >
+    <div class="el-picker-panel__body">
+      <div class="el-date-picker__header el-date-picker__header--bordered">
+        <button
+          type="button"
+          aria-label="前一年"
+          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
+          @click="prev"
+        ></button>
+        <span role="button" class="el-date-picker__header-label" @click="handleYear">{{ year }}年</span>
+        <button
+          type="button"
+          aria-label="后一年"
+          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
+          @click="next"
+        ></button>
+      </div>
+
+      <div class="el-picker-panel__content">
+        <div v-if="isQuarter" class="n20-quarter-date-picker__grid">
+          <el-button type="text" size="medium" class="n20-quarter-date-picker__btn" @click="selectSeason(0)"
+            >{{ year }}年 第一季度</el-button
+          >
+          <el-button type="text" size="medium" class="n20-quarter-date-picker__btn" @click="selectSeason(1)"
+            >{{ year }}年 第二季度</el-button
+          >
+          <el-button type="text" size="medium" class="n20-quarter-date-picker__btn" @click="selectSeason(2)"
+            >{{ year }}年 第三季度</el-button
+          >
+          <el-button type="text" size="medium" class="n20-quarter-date-picker__btn" @click="selectSeason(3)"
+            >{{ year }}年 第四季度</el-button
+          >
+        </div>
+        <div v-else class="n20-quarter-date-picker__year__grid">
+          <el-button
+            v-for="item in getYear"
+            :key="item"
+            type="text"
+            size="medium"
+            :class="year === item ? 'color-primary' : ''"
+            class="n20-quarter-date-picker__btn"
+            @click="selectYaer(item)"
+            >{{ item }}年</el-button
+          >
+        </div>
+      </div>
+    </div>
+    <el-input
+      slot="reference"
+      ref="quarterDate"
+      v-model="showValue"
+      class="el-date-editor"
+      placeholder="选择季度"
+      clearable
+      @focus="changeFocus"
+    >
+      <i slot="prefix" class="el-input__icon el-icon-date"></i>
+    </el-input>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'QuarterDatePicker',
+  props: {
+    valueArr: {
+      default: () => {
+        return ['01-03', '04-06', '07-09', '10-12']
+      },
+      type: Array
+    },
+    getValue: {
+      default: (val) => {
+        return val
+      },
+      type: Function
+    },
+    defaultValue: {
+      // 默认值 201904-201906
+      default: '',
+      type: String
+    }
+  },
+  data() {
+    return {
+      showSeason: false,
+      season: '',
+      year: new Date().getFullYear(), // input显示时间，会随着用户操作改变
+      defaultyear: new Date().getFullYear(), // 当前年份，不变
+      month: new Date().getMonth() + 1, // 当前月份，不变
+      showValue: '',
+      isQuarter: true, // 默认展示季度
+      beforeyear: null // 默认显示上一季度所用时间，可能是去年
+    }
+  },
+  computed: {
+    getYear() {
+      let nfOptionsArray = []
+      for (var i = this.year - 4; i <= this.year + 5; i++) {
+        nfOptionsArray.push(i)
+      }
+      return nfOptionsArray
+    }
+  },
+  mounted() {
+    // 每次挂在时都对组件进行重置，那么就不需要在上级组件中进行重置
+    // this.getDefaultTime()
+  },
+  methods: {
+    prev() {
+      this.year = this.year * 1 - 1
+    },
+    next() {
+      this.year = this.year * 1 + 1
+    },
+    handleYear() {
+      this.isQuarter = false
+    },
+    changeFocus() {
+      this.isQuarter = true
+      this.$refs.quarterDate.blur()
+    },
+    selectYaer(i) {
+      this.year = i
+      this.isQuarter = true
+    },
+    selectSeason(i) {
+      let that = this
+      that.season = i + 1
+      let arr = that.valueArr[i].split('-')
+      that.showSeason = false
+      this.showValue = `${this.year} 年 ${this.season} 季度`
+      that.$emit('input', this.year + '-' + arr[0] + ' - ' + this.year + '-' + arr[1])
+      that.$emit('change', this.year + '-' + arr[0] + ' - ' + this.year + '-' + arr[1], this.year - this.season) // 每次选择时间都将当前选择时间发送到父组件
+    }
+    // getDefaultTime() {
+    //   // 获取默认的上一个季度
+    //   var year = this.defaultyear
+    //   var month = this.month
+    //   var season = null
+    //   if (month <= 3) {
+    //     this.season = 1
+    //     year -= 1
+    //     season = 4
+    //     this.beforeyear = year
+    //   } else if (month > 3 && month <= 6) {
+    //     this.season = 2
+    //     season = 1
+    //     this.beforeyear = year
+    //   } else if (month > 6 && month <= 9) {
+    //     this.season = 3
+    //     season = 2
+    //     this.beforeyear = year
+    //   } else if (month > 9 && month <= 12) {
+    //     this.season = 4
+    //     season = 3
+    //     this.beforeyear = year
+    //   }
+    //   this.showValue = `${year} 年 ${season} 季度`
+    // }
+  }
+}
+</script>
+
+<style lang="scss"></style>

package/src/index.js

@@ -1,4 +1,5 @@
 import './utils/importGlobal.js' // 联合加载组件保存位置
+import './utils/storagePro.js' // 扩展Storage
 /** 提供组件给外部使用的入口 */
 import ContentLoading from './components/ContentLoading/index.vue'
 import ContentNull from './components/ContentNull/index.vue'
@@ -55,6 +56,9 @@ import FileImport from './components/FileImport/index.vue'
 import PageHeader from './components/PageHeader/index.vue'
 import Descriptions from './components/Descriptions/index.vue'
 import EventBubble from './components/EventBubble/index.vue'
+import SelectDatePicker from './components/DateSelect/index.vue'
+import QuarterDatePicker from './components/DateSelect/quarterDatePicker.vue'
+
 // ECharts 不要打包进来
 import Stamp from './components/Stamp/index.vue'
 import Diff from './components/Diff/index.vue'
@@ -155,6 +159,8 @@ const components = [
   ApprovalImg,
   Stamp,
   Diff,
+  SelectDatePicker,
+  QuarterDatePicker,
   /* old */
   TableO,
   FiltersO,
@@ -274,6 +280,8 @@ export {
   ApprovalImg,
   Stamp,
   Diff,
+  SelectDatePicker,
+  QuarterDatePicker,
   /* 中建科 */
   ApprovalCardZjk,
   ApproveCardZjk,

package/src/utils/storagePro.js

@@ -0,0 +1,39 @@
+import LZString from 'lz-string'
+
+if (!window.__POWERED_BY_QIANKUN__ && Storage) {
+  // 当字符串长度大于512kb,压缩保存
+  const setItemPro = function (key, str) {
+    if (str && str.length > 524288) {
+      this.removeItem(key)
+      let strLZ = LZString.compressToBase64(str)
+      this._setItem(key + ':[LZ]', strLZ)
+    } else {
+      return this._setItem(key, str)
+    }
+  }
+
+  const getItemPro = function (key) {
+    let str = this._getItem(key)
+    if (str === null && this[key + ':[LZ]']) {
+      let strLZ = this._getItem(key + ':[LZ]')
+      let str = strLZ ? LZString.decompressFromBase64(strLZ) : null
+      return str
+    } else {
+      return str
+    }
+  }
+
+  const removeItemPro = function (key) {
+    this._removeItem(key)
+    this._removeItem(key + ':[LZ]')
+  }
+
+  Storage.prototype._setItem = Storage.prototype.setItem
+  Storage.prototype.setItem = setItemPro
+
+  Storage.prototype._getItem = Storage.prototype.getItem
+  Storage.prototype.getItem = getItemPro
+
+  Storage.prototype._removeItem = Storage.prototype.removeItem
+  Storage.prototype.removeItem = removeItemPro
+}