n20-common-lib 2.2.30 → 2.2.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.2.30",
+  "version": "2.2.31",
   "private": false,
   "main": "src/index.js",
   "scripts": {

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

@@ -96,6 +96,16 @@
 .n20-quarter-date-picker__btn {
   color: var(--color-text-regular);
 }
+
+.n20-quarter-date-picker__btn.isactive {
+  color: var(--color-primary);
+}
+
 .n20-quarter-date-picker.el-popover {
   padding: 0;
 }
+
+.el-button.el-button--text.is-disabled,
+.el-button.el-button--text.is-disabled:hover {
+  color: #333;
+}

package/src/components/SelectDatePickerPro/index.vue

@@ -13,7 +13,9 @@
       value-format="yyyy-MM-dd"
       type="daterange"
       clearable
+      v-bind="$attrs"
       :placeholder="'选择日' | $lc"
+      v-on="$listeners"
     />
     <date-picker
       v-if="type === '周' && selectList.includes(type)"
@@ -21,7 +23,7 @@
       v-model="week"
       format="yyyy 第 WW 周"
       type="week"
-      :picker-options="{ firstDayOfWeek: 1 }"
+      :picker-options="attrs"
       :default-time="['00:00:00', '23:59:59']"
       :placeholder="'选择周' | $lc"
     />
@@ -34,15 +36,22 @@
       format="yyyy-MM"
       value-format="yyyy-MM"
       :editable="false"
+      v-bind="$attrs"
       :placeholder="'选择月' | $lc"
     />
-    <quarter-date-picker v-if="type === '季'" key="quarter" v-model="quarter" />
+    <quarter-date-picker
+      v-if="type === '季'"
+      key="quarter"
+      v-model="quarter"
+      :disabled-date="this.attrs.disabledDate"
+    />
     <date-picker
       v-if="type === '年' && selectList.includes(type)"
       key="year"
       v-model="year"
       type="year"
       format="yyyy"
+      v-bind="$attrs"
       value-format="yyyy"
       :editable="false"
       :placeholder="'选择年' | $lc"
@@ -51,7 +60,7 @@
 </template>
 
 <script>
-// TODO: 双休绑定数值格式不统一
+// TODO: 双向绑定数值格式不统一
 import datePicker from '../DatePicker/index.vue'
 import quarterDatePicker from './quarterDatePicker'
 import dayjs from 'dayjs'
@@ -89,6 +98,7 @@ export default {
     }
   },
   data() {
+    this.attrs = Object.assign({ firstDayOfWeek: 1 }, this.$attrs['picker-options'])
     return {}
   },
   computed: {
@@ -124,38 +134,38 @@ export default {
         return this.value.startDate
       },
       set(value) {
-       if (value) {
-         let todayDay = value ? new Date(value) : 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 = {
-          startDate: startTimeStr,
-          endDate: endTimeStr,
-          typeDate: this.value.typeDate
-        } // 选择的范围
+        if (value) {
+          let todayDay = value ? new Date(value) : 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 = {
+            startDate: startTimeStr,
+            endDate: endTimeStr,
+            typeDate: this.value.typeDate
+          } // 选择的范围
 
-        this.$emit('input', weekTime)
-        this.$emit('change', weekTime)
-       } else {
-         this.$emit('input', {
-          startDate: '',
-          endDate: '',
-          typeDate: this.value.typeDate
-        })
-        this.$emit('change', {
-          startDate: '',
-          endDate: '',
-          typeDate: this.value.typeDate
-        })
-       }
+          this.$emit('input', weekTime)
+          this.$emit('change', weekTime)
+        } else {
+          this.$emit('input', {
+            startDate: '',
+            endDate: '',
+            typeDate: this.value.typeDate
+          })
+          this.$emit('change', {
+            startDate: '',
+            endDate: '',
+            typeDate: this.value.typeDate
+          })
+        }
       }
     },
     month: {

package/src/components/SelectDatePickerPro/quarterDatePicker.vue

@@ -27,16 +27,40 @@
 
       <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)"
+          <el-button
+            type="text"
+            :disabled="isDisabled(year, '1')"
+            size="medium"
+            class="n20-quarter-date-picker__btn"
+            :class="this.season == 1 ? 'isactive' : ''"
+            @click="selectSeason(0)"
             >{{ year }}年 第一季度</el-button
           >
-          <el-button type="text" size="medium" class="n20-quarter-date-picker__btn" @click="selectSeason(1)"
+          <el-button
+            type="text"
+            :disabled="isDisabled(year, '2')"
+            size="medium"
+            class="n20-quarter-date-picker__btn"
+            :class="this.season == 2 ? 'isactive' : ''"
+            @click="selectSeason(1)"
             >{{ year }}年 第二季度</el-button
           >
-          <el-button type="text" size="medium" class="n20-quarter-date-picker__btn" @click="selectSeason(2)"
+          <el-button
+            type="text"
+            :disabled="isDisabled(year, '3')"
+            size="medium"
+            class="n20-quarter-date-picker__btn"
+            :class="this.season == 3 ? 'isactive' : ''"
+            @click="selectSeason(2)"
             >{{ year }}年 第三季度</el-button
           >
-          <el-button type="text" size="medium" class="n20-quarter-date-picker__btn" @click="selectSeason(3)"
+          <el-button
+            :disabled="isDisabled(year, '4')"
+            type="text"
+            size="medium"
+            class="n20-quarter-date-picker__btn"
+            :class="this.season == 4 ? 'isactive' : ''"
+            @click="selectSeason(3)"
             >{{ year }}年 第四季度</el-button
           >
         </div>
@@ -81,6 +105,10 @@ export default {
         return {}
       }
     },
+    disabledDate: {
+      type: Function,
+      default: () => false
+    },
     valueArr: {
       default: () => {
         return ['01-01 - 03-31', '04-01 - 06-30', '07-01 - 09-30', '10-01 - 12-31']
@@ -185,6 +213,35 @@ export default {
       this.showValue = `${this.year} 年 ${this.season} 季度`
       that.$emit('input', { startDate: this.year + '-' + arr[0], endDate: this.year + '-' + arr[1] })
       that.$emit('change', { startDate: this.year + '-' + arr[0], endDate: this.year + '-' + arr[1] }) // 每次选择时间都将当前选择时间发送到父组件
+    },
+    isDisabled(year, type) {
+      let quarterDate
+      switch (type) {
+        case '1':
+          quarterDate = dayjs(year + '03')
+            .endOf('month')
+            .toDate()
+          break
+        case '2':
+          quarterDate = dayjs(year + '06')
+            .endOf('month')
+            .toDate()
+          break
+        case '3':
+          quarterDate = dayjs(year + '09')
+            .endOf('month')
+            .toDate()
+          break
+        case '4':
+          quarterDate = dayjs(year + '12')
+            .endOf('month')
+            .toDate()
+          break
+      }
+      if (this.disabledDate) {
+        return this.disabledDate(quarterDate)
+      }
+      return false
     }
   }
 }