shijiplus-web-plugin 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shijiplus-web-plugin",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "files": [
     "src"
   ],

package/src/components/begin-end-date-picker/begin-end-date-picker.vue

@@ -0,0 +1,597 @@
+<template>
+  <div id="datepicker">
+    <Row style="width: 100%">
+      <i-col :span="modal == 'all' ? 11 : 24">
+        <DatePicker
+          ref="beginpickerRef"
+          :clearable="clearable"
+          :editable="editableDis"
+          :placement="mPlacement.begin"
+          :disabled="beginDisabled"
+          v-model="beginCopy"
+          :options="beginDateOptions"
+          :time-picker-options="beginTimePickerOptions"
+          :format="beginFormat"
+          :type="type"
+          :steps="timeSteps"
+          :transfer="transfer"
+          @on-change="beginChange"
+          :placeholder="startplaceholder"
+        ></DatePicker>
+      </i-col>
+      <template v-if="modal == 'all'">
+        <i-col style="text-align: center" span="2">-</i-col>
+        <i-col span="11" id="endpicker">
+          <DatePicker
+            ref="endpickerRef"
+            :clearable="clearable"
+            :editable="editableDis"
+            :placement="mPlacement.end"
+            :disabled="endDisabled"
+            v-model="endCopy"
+            :options="endDateOptions"
+            :time-picker-options="endTimePickerOptions"
+            :format="endFormat"
+            :type="type"
+            :steps="timeSteps"
+            :transfer="transfer"
+            @on-change="endChange"
+            :placeholder="endplaceholder"
+          ></DatePicker>
+        </i-col>
+      </template>
+    </Row>
+  </div>
+</template>
+<script>
+// Vue.js组件，用于显示起始和结束日期的选择器
+export default {
+  name: 'BeginEndDatePicker',
+  props: {
+    // 控制是否只显示开始时间
+    modal: {
+      type: String,
+      default: 'all'
+    },
+    format: {
+      // 日期格式化方式，可以是字符串或对象
+      type: [String, Object],
+      default: 'yyyy-MM-dd'
+    },
+    type: {
+      // 选择器类型
+      default: 'date'
+    },
+    transfer: {
+      // 是否将弹出框放置于body元素下
+      default: false
+    },
+    startplaceholder: {
+      // 开始日期的占位符
+      default: '开始时间'
+    },
+    editableDis: {
+      // 是否禁用日期的编辑
+      default: false
+    },
+    endplaceholder: {
+      // 结束日期的占位符
+      default: '结束时间'
+    },
+    min: {
+      // 允许的最小日期，可以是对象或字符串
+      default() {
+        return {
+          minStart: null
+        }
+      }
+    },
+    max: {
+      // 允许的最大日期，可以是日期对象或字符串
+      type: [Date, Object],
+      default() {
+        return null
+      }
+    },
+    begin: {
+      // 开始日期的值
+      default: ''
+    },
+    end: {
+      // 结束日期的值
+      default: ''
+    },
+    disabled: {
+      // 是否禁用选择器，可以是布尔值或对象
+      type: [Boolean, Object]
+    },
+    clearable: {
+      // 是否可清除日期
+      default: true
+    },
+    // 时间步长
+    timeSteps: {
+      // 用于设置小时、分钟和秒的步长
+      default() {
+        return [1, 1, 1]
+      }
+    },
+    disabledMinutes: {
+      type: Boolean,
+      default: false
+    },
+    // 距离开始时间的结束时间步长
+    // {
+    //       years: 0,
+    //       months: 0,
+    //       days: 0,
+    //       hours: 0,
+    //       minutes: 0,
+    //       seconds: 0
+    //     }
+    maxEndStep: {
+      default() {
+        return null
+      }
+    }
+  },
+  watch: {
+    format: {
+      // 监听format属性变化
+      handler(val) {
+        if (typeof val === 'string') {
+          this.beginFormat = val
+          this.endFormat = val
+        } else {
+          this.beginFormat = val.begin
+          this.endFormat = val.end
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    begin: {
+      // 监听begin属性变化
+      handler(val) {
+        if (val) {
+          if (val instanceof Date) {
+            this.beginChange(this.$formatDate(val, this.beginFormat))
+          } else if (typeof val == 'string') {
+            this.beginCopy = val
+          }
+        } else {
+          this.beginCopy = ''
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    end: {
+      // 监听end属性变化
+      handler(val) {
+        if (val) {
+          if (val instanceof Date) {
+            this.endChange(this.$formatDate(val, this.endFormat))
+          } else if (typeof val == 'string') {
+            this.endCopy = val
+          }
+        } else {
+          this.endCopy = ''
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    clearable: {
+      // 监听clearable属性变化
+      handler(val) {
+        if (val == false) {
+          this.$nextTick(() => {
+            this.$refs.beginpickerRef.$children[1].$children[0].$children[6].$children[1].$el.style.display =
+              'none'
+            this.$refs.endpickerRef.$children[1].$children[0].$children[6].$children[1].$el.style.display =
+              'none'
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    disabled: {
+      // 监听disabled属性变化
+      handler(val) {
+        if (val) {
+          if (typeof val === 'boolean') {
+            this.beginDisabled = val
+            this.endDisabled = val
+          } else {
+            this.beginDisabled = val.begin
+            this.endDisabled = val.end
+          }
+        } else {
+          this.beginDisabled = false
+          this.endDisabled = false
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    max: {
+      // 监听max属性变化
+      handler(val) {
+        if (val) {
+          if (val instanceof Date) {
+            this.beginMaxDate = val
+            this.endMaxDate = val
+          } else if (typeof val == 'string') {
+            this.beginMaxDate = this.$getDateFromString(val, this.beginFormat)
+            this.endMaxDate = this.$getDateFromString(val, this.endFormat)
+          } else {
+            this.beginMaxDate = this.$getDateFromString(
+              val.begin,
+              this.beginFormat
+            )
+            this.endMaxDate = this.$getDateFromString(val.end, this.endFormat)
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    placement: {
+      handler(val) {
+        if (val) {
+          if (val instanceof String) {
+            this.mPlacement = {
+              begin: val,
+              end: val
+            }
+          } else {
+            this.mPlacement = val
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    timeSteps: {
+      handler(val) {
+        if (val) {
+          if (val instanceof Array) {
+            if (val.length < 3) {
+              throw new Error(
+                'from begin-end-date-picker: timeSteps prop is [' +
+                  val +
+                  '] need [h,m,s]'
+              )
+            }
+          } else {
+            throw new Error(
+              'from begin-end-date-picker: timeSteps prop need Array type'
+            )
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      mPlacement: {
+        begin: 'bottom-end',
+        end: 'bottom-end'
+      },
+      // 内部的开始时间
+      beginCopy: '',
+      // 内部的结束时间
+      endCopy: '',
+      // 内部的开始时间是否可用
+      beginDisabled: false,
+      // 内部的结束时间是否可用
+      endDisabled: false,
+      // 内部的结束时间格式
+      beginFormat: '',
+      // 内部的结束时间格式
+      endFormat: '',
+      // 开始时间最大值
+      beginMaxDate: null,
+      // 结束时间最大值
+      endMaxDate: null
+    }
+  },
+  computed: {
+    /**
+    设置开始时间的时间选择器的选项
+    @returns {Object} 返回包含禁用小时、禁用分钟和时间步长的对象
+    */
+    beginTimePickerOptions() {
+      let disabledHours = []
+      let disabledMinutes = []
+      if (this.min && this.min.minStart) {
+        // 获取最小开始时间的日期对象
+        let minStartDate = this.$getDateFromString(
+          this.min.minStart,
+          this.beginFormat
+        )
+        let hours = minStartDate.getHours()
+        // 将小于最小开始时间的小时加入禁用小时数组
+        for (var h = 0; h < hours; h++) {
+          disabledHours.push(h)
+        }
+        if (this.beginCopy) {
+          // 获取开始时间的日期对象
+          let beginDate = this.$getDateFromString(
+            this.beginCopy,
+            this.beginFormat
+          )
+          if (hours >= beginDate.getHours()) {
+            // 如果开始时间小时等于最小开始时间小时，则将小于最小开始时间分钟的分钟加入禁用分钟数组
+            let minutes = minStartDate.getMinutes()
+            for (let m = 0; m < minutes; m++) {
+              disabledMinutes.push(m)
+            }
+          }
+          // 如果开始时间大于最小开始时间，则重置禁用小时和禁用分钟数组
+          if (beginDate > minStartDate) {
+            if (
+              beginDate.getDate() > minStartDate.getDate() ||
+              beginDate.getMonth() > minStartDate.getMonth() ||
+              beginDate.getFullYear() > minStartDate.getFullYear()
+            ) {
+              disabledHours = []
+              disabledMinutes = []
+            } else if (
+              beginDate.getDate() == minStartDate.getDate() ||
+              beginDate.getMonth() == minStartDate.getMonth() ||
+              beginDate.getFullYear() == minStartDate.getFullYear()
+            ) {
+              disabledHours.push(beginDate.getHours())
+              if (beginDate.getHours() > minStartDate.getHours()) {
+                disabledMinutes = []
+              }
+            }
+          }
+        }
+      }
+      if (this.disabledMinutes) {
+        disabledMinutes = []
+        for (let m = 0; m < 60; m++) {
+          disabledMinutes.push(m)
+        }
+      }
+      return {
+        disabledHours,
+        disabledMinutes,
+        steps: this.timeSteps
+      }
+    },
+    // 同设置开始时间的时间选择器的选项
+    endTimePickerOptions() {
+      let disabledHours = []
+      let disabledMinutes = []
+      // var minDate = this.getEndMinDate()
+      let endMaxDate = this.getEndMaxDate()
+      if (endMaxDate) {
+        let maxHours = endMaxDate.getHours()
+        if (this.endCopy) {
+          let endDate = this.$getDateFromString(this.endCopy, this.endFormat)
+          if (maxHours <= endDate.getHours()) {
+            let maxMinutes = endMaxDate.getMinutes()
+            for (let m = 59; m > maxMinutes; m--) {
+              disabledMinutes.push(m)
+            }
+          }
+          if (endDate > endMaxDate) {
+            disabledHours = []
+            disabledMinutes = []
+          }
+        } else {
+          for (let h = 23; h >= 0; h--) {
+            disabledHours.push(h)
+          }
+          for (let m = 59; m >= 0; m--) {
+            disabledMinutes.push(m)
+          }
+        }
+      }
+
+      if (this.disabledMinutes) {
+        disabledMinutes = []
+        for (let m = 0; m < 60; m++) {
+          disabledMinutes.push(m)
+        }
+      }
+      return {
+        disabledHours,
+        disabledMinutes,
+        steps: this.timeSteps
+      }
+    },
+    // 开始时间选项
+    beginDateOptions() {
+      return {
+        // 禁用日期函数，返回值为true表示禁用该日期，false表示启用该日期
+        disabledDate: (date) => {
+          var gEqualMin = true // 日期是否大于等于最小日期
+          var lEqualMax = true // 日期是否小于等于最大日期
+          if (this.min && this.min.minStart) {
+            // 如果存在最小日期，则获取最小日期并判断当前日期是否大于等于最小日期
+            let startDate = this.$getDateFromString(
+              this.min.minStart,
+              this.beginFormat
+            )
+            gEqualMin = date >= startDate
+            // 如果日期包含小时，则需要判断年月日是否相等
+            if (!gEqualMin && this.beginFormat.indexOf('HH') > -1) {
+              gEqualMin =
+                this.$formatDate(startDate, 'yyyy-MM-dd') ===
+                this.$formatDate(date, 'yyyy-MM-dd')
+            }
+          }
+          if (this.beginMaxDate) {
+            // 如果存在最大日期，则判断当前日期是否小于等于最大日期
+            lEqualMax = date <= this.beginMaxDate
+          }
+          // 返回日期是否在最小日期和最大日期之间
+          return !(gEqualMin && lEqualMax)
+        }
+      }
+    },
+    // 结束时间选项
+    endDateOptions() {
+      return {
+        disabledDate: (date) => {
+          var gEqualMin = true
+          var minDate = this.getEndMinDate()
+          gEqualMin = date >= minDate
+          if (!gEqualMin && this.beginFormat.indexOf('HH') > -1) {
+            gEqualMin =
+              this.$formatDate(minDate, 'yyyy-MM-dd') ===
+              this.$formatDate(date, 'yyyy-MM-dd')
+          }
+          var lEqualMax = true
+          const endMaxDate = this.getEndMaxDate()
+          if (endMaxDate) {
+            lEqualMax = date <= endMaxDate
+          }
+          return !(gEqualMin && lEqualMax)
+        }
+      }
+    }
+  },
+  methods: {
+    // 获取结束日期的最大值
+    getEndMaxDate() {
+      var maxDate = null
+      if (this.maxEndStep) {
+        // 如果没有设置结束日期的最大值，但设置了最大时间间隔，则根据开始日期及最大时间间隔计算结束日期的最大值
+        if (this.beginCopy) {
+          maxDate = this.beginCopy
+          maxDate = this.$addYears(maxDate, this.maxEndStep.years)
+          maxDate = this.$addMonths(maxDate, this.maxEndStep.months)
+          maxDate = this.$addDays(maxDate, this.maxEndStep.days)
+          maxDate = this.$addHours(maxDate, this.maxEndStep.hours)
+          maxDate = this.$addMinutes(maxDate, this.maxEndStep.minutes)
+          maxDate = this.$addSeconds(maxDate, this.maxEndStep.seconds)
+        }
+      }
+      if (this.endMaxDate) {
+        if (maxDate == null || maxDate > this.endMaxDate) {
+          // 如果已经设置了结束日期的最大值，则直接使用该值
+          maxDate = this.$getDateFromString(this.endMaxDate, this.endFormat)
+        }
+      }
+      return maxDate
+    },
+    // 获取结束日期的最小值
+    getEndMinDate() {
+      var minDate = null
+      if (this.beginCopy) {
+        minDate = this.$getDateFromString(this.beginCopy, this.beginFormat)
+      } else if (this.min && this.min.minEnd) {
+        minDate = this.$getDateFromString(this.min.minEnd, this.beginFormat)
+      }
+      return minDate
+    },
+    beginChange(value) {
+      // 如果选择的时间早于最小可选时间，强制设为最小可选时间
+      if (value) {
+        if (this.min && this.min.minStart) {
+          let selDate = this.$getDateFromString(value, this.beginFormat)
+          if (selDate <= this.min.minStart) {
+            // 根据步长重新设置时间
+            let copyMinStart = this.calcTimeByTimeStep(this.min.minStart)
+            value = this.$formatDate(copyMinStart, this.beginFormat)
+            this.beginCopy = value
+          }
+        }
+        // 触发begin-change事件
+        this.$emit('begin-change', value)
+      } else {
+        // 清空开始时间
+        this.beginCopy = ''
+        this.$emit('begin-change', null)
+      }
+      // 这么复杂是因为要保证转出来的时间一致
+      // 如果开始时间晚于结束时间，强制清空结束时间
+      if (this.endCopy) {
+        const beginDate = this.$getDateFromString(value, this.beginFormat)
+        const oldEndDate = this.$getDateFromString(
+          this.endCopy,
+          this.beginFormat
+        )
+        if (beginDate > oldEndDate) {
+          this.endChange(null)
+        } else {
+          const endMaxDate = this.getEndMaxDate()
+          if (endMaxDate && endMaxDate < oldEndDate) {
+            this.endChange(null)
+          }
+        }
+      }
+    },
+    endChange(value) {
+      if (!value) {
+        this.endCopy = ''
+        this.$emit('end-change', null)
+        return
+      }
+      let minDate = this.getEndMinDate()
+      if (minDate) {
+        let selDate = this.$getDateFromString(value, this.endFormat)
+        if (selDate <= minDate) {
+          value = this.$formatDate(minDate, this.endFormat)
+          this.endCopy = value
+        }
+      }
+      this.$emit('end-change', value)
+    },
+    calcTimeByTimeStep(oldTime) {
+      let newTime = new Date(oldTime)
+      let oldH = oldTime.getHours()
+      let oldMi = oldTime.getMinutes()
+      let oldSec = oldTime.getSeconds()
+      let hStep = this.timeSteps[0]
+      let mStep = this.timeSteps[1]
+      let sStep = this.timeSteps[2]
+      // 检验下次可选时间
+      if (oldSec + sStep > 59) {
+        oldMi += 1
+        oldSec = 0
+      }
+      if (oldMi + mStep > 59) {
+        oldH += 1
+        oldMi = 0
+        oldSec = 0
+      } else {
+        oldMi += mStep
+      }
+      // 根据步长重新设置时间
+      let hValueByStep = Math.floor(oldH / hStep) * hStep
+      let mValueByStep = Math.floor(oldMi / mStep) * mStep
+      let sValueByStep = Math.floor(oldSec / sStep) * sStep
+      newTime.setHours(hValueByStep)
+      newTime.setMinutes(mValueByStep)
+      newTime.setSeconds(sValueByStep)
+      return newTime
+    }
+  }
+}
+</script>
+<style lang="less">
+#datepicker {
+  .ivu-row::after {
+    clear: none;
+  }
+  .ivu-date-picker {
+    width: 100%;
+  }
+  // #endpicker {
+  //   .ivu-select-dropdown {
+  //     right: -5px;
+  //     left: 0px !important;
+  //   }
+  // }
+}
+</style>

package/src/components/begin-end-date-picker/index.js

@@ -0,0 +1,2 @@
+import BeginEndDatePicker from './begin-end-date-picker'
+export default BeginEndDatePicker

package/src/components/plus-comp/plus-table/export-mixin.js

@@ -97,9 +97,10 @@ export default {
         const startDate = new Date(searchForm.startDate || searchForm.startTime || "")
         const endDate = new Date(searchForm.endDate || searchForm.startTime || "")
         const oneMonthInMs = 31 * 24 * 60 * 60 * 1000 // 1 个月的毫秒数
-        if (!startDate || !endDate) {
+
+        if (!startDate || isNaN(startDate.getTime()) || !endDate || isNaN(endDate.getTime())) {
           setTimeout(() => {
-            this.$Message.error('请选择导出开始和结束时间', 3)
+            this.$Message.error('请选择有效的导出开始和结束时间', 3)
           }, 0)
           return
         }

package/src/directive/module/authAccess.js

@@ -1,3 +1,20 @@
+
+function removeElement(el, vnode) {
+  if (el.parentNode) {
+    el.parentNode.removeChild(el)
+    // el.parentNode.style.display = 'none'
+    if (vnode.componentInstance && vnode.componentInstance.$options.name == 'TabPane') {
+      console.log('------------', vnode.componentInstance)
+      for (let i = 0; i < vnode.componentInstance.TabsInstance.$children.length; i++) {
+        if (vnode.componentInstance.TabsInstance.$children[i].currentName == vnode.componentInstance.currentName) {
+          vnode.componentInstance.TabsInstance.$children.splice(i, 1)
+          break
+        }
+      }
+      vnode.componentInstance.updateNav()
+    }
+  }
+}
 export default {
   inserted(el, binding, vnode, oldVnode) {
     // console.log('plugin-access', vnode.context.$store)
@@ -10,17 +27,53 @@ export default {
     if (binding.value === undefined) {
       throw new Error('v-access必须有值')
     }
-    if (vnode.context.$store.state.user.access.indexOf(binding.value) === -1) {
-      el.parentNode.removeChild(el)
-      if (vnode.componentInstance && vnode.componentInstance.$options.name == 'TabPane') {
-        console.log('------------', vnode.componentInstance)
-        for (let i = 0; i < vnode.componentInstance.TabsInstance.$children.length; i++) {
-          if (vnode.componentInstance.TabsInstance.$children[i].currentName == vnode.componentInstance.currentName) {
-            vnode.componentInstance.TabsInstance.$children.splice(i, 1)
-            break
+    if (typeof binding.value === 'object') {
+      if (!binding.value.code) {
+        throw new Error('v-access code必须有值')
+      }
+      if (vnode.context.$store.state.user.access.indexOf(binding.value.code) === -1) {
+        if (binding.value.isHide) {
+          removeElement(el, vnode)
+        } else {
+          el.parentNode.addEventListener('click', function (e) {
+            if (e.target == el) {
+              vnode.context.$Message.error('无操作权限，请联系管理员~')
+              e.stopPropagation()
+              e.preventDefault()
+            }
+          }, true)
+        }
+        // el.parentNode.addEventListener('mousedown', function (e) {
+        //   if (e.target == el) {
+        //     console.log('mousedown,没有权限')
+        //     e.stopPropagation()
+        //     e.preventDefault()
+        //   }
+        // }, true)
+        // el.parentNode.addEventListener('touchstart', function (e) {
+        //   if (e.target == el) {
+        //     console.log('touchstart,没有权限')
+        //     e.stopPropagation()
+        //     e.preventDefault()
+        //   }
+        // }, true)
+        console.log('没有权限', el)
+      }
+    }
+
+    if (typeof binding.value === 'string') {
+      if (vnode.context.$store.state.user.access.indexOf(binding.value) === -1) {
+        el.parentNode.removeChild(el)
+        if (vnode.componentInstance && vnode.componentInstance.$options.name == 'TabPane') {
+          console.log('------------', vnode.componentInstance)
+          for (let i = 0; i < vnode.componentInstance.TabsInstance.$children.length; i++) {
+            if (vnode.componentInstance.TabsInstance.$children[i].currentName == vnode.componentInstance.currentName) {
+              vnode.componentInstance.TabsInstance.$children.splice(i, 1)
+              break
+            }
           }
+          vnode.componentInstance.updateNav()
         }
-        vnode.componentInstance.updateNav()
       }
     }
   }

package/src/index.js

@@ -4,6 +4,7 @@ import i18n from './locale'
 import ExtentionPlugin from './extentionPlugin'
 import importDirective from './directive'
 import PlusComp from './components/plus-comp'
+import BeginEndDatePicker from './components/begin-end-date-picker'
 
 console.log('--------web-tool---index.js----------')
 
@@ -17,6 +18,7 @@ export default {
   PlusComp,
   install(vue, opts = {}) {
     vue.use(PlusComp)
+    vue.component('BeginEndDatePicker', BeginEndDatePicker)
     /**
      * 注册指令
      */