imatrix-ui 0.2.6-up → 0.2.7-up

package/packages/IntervalSelection/src/sectionDate.vue

@@ -1,475 +1,475 @@
-<template>
-  <div>
-    <!-- 年份选择器 -->
-    <div v-if="colFieldSetting.options.showType === 'year'" class="select">
-      <el-date-picker
-        :shortcuts="pickerOptions && pickerOptions.shortcuts"
-        :disabled-date="pickerOptions && pickerOptions.disabledDate"
-        :cell-class-name="pickerOptions && pickerOptions.cellClassName"
-        v-model="yearStartDate"
-        type="year"
-        :placeholder="colFieldSetting.options.startPlaceholder"
-        :disabled="colFieldSetting.options.disabled"
-        :clearable="colFieldSetting.options.clearable"
-        :size="
-          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
-        "
-        @change="onChangeStatYear"
-      ></el-date-picker>
-      <div class="intervalCenter">-</div>
-      <el-date-picker
-        :shortcuts="pickerOptions && pickerOptions.shortcuts"
-        :disabled-date="pickerOptions && pickerOptions.disabledDate"
-        :cell-class-name="pickerOptions && pickerOptions.cellClassName"
-        v-model="yearDate"
-        type="year"
-        :placeholder="colFieldSetting.options.endPlaceholder"
-        :disabled="colFieldSetting.options.disabled"
-        :clearable="colFieldSetting.options.clearable"
-        :size="
-          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
-        "
-        @change="onChangeEndYear"
-      ></el-date-picker>
-    </div>
-    <!-- 季度选择器 -->
-    <!--<div-->
-    <!--  v-else-if="colFieldSetting.options.showType === 'quarterScope'"-->
-    <!--  class="select"-->
-    <!--&gt;-->
-    <!--  <quarterScope-->
-    <!--    v-model:value="ScopeStartDate"-->
-    <!--    :size="-->
-    <!--      colFieldSetting.options.size ? colFieldSetting.options.size : 'small'-->
-    <!--    "-->
-    <!--    :disabled="colFieldSetting.options.disabled"-->
-    <!--    :clearable="colFieldSetting.options.clearable"-->
-    <!--    :placeholder="colFieldSetting.options.placeholder"-->
-    <!--    :format="-->
-    <!--      'yyyy' +-->
-    <!--      $t('IntervalSelection.upload') +-->
-    <!--      'q' +-->
-    <!--      $t('IntervalSelection.quarter')-->
-    <!--    "-->
-    <!--    style="width: 100%"-->
-    <!--    @change="quarterStatrt"-->
-    <!--  />-->
-    <!--  <div class="intervalCenter">-</div>-->
-    <!--  <quarterScope-->
-    <!--    v-model:value="ScopeEndDate"-->
-    <!--    :size="-->
-    <!--      colFieldSetting.options.size ? colFieldSetting.options.size : 'small'-->
-    <!--    "-->
-    <!--    :disabled="colFieldSetting.options.disabled"-->
-    <!--    :clearable="colFieldSetting.options.clearable"-->
-    <!--    :placeholder="colFieldSetting.options.placeholder"-->
-    <!--    style="width: 100%"-->
-    <!--    :format="-->
-    <!--      'yyyy' +-->
-    <!--      $t('IntervalSelection.upload') +-->
-    <!--      'q' +-->
-    <!--      $t('IntervalSelection.quarter')-->
-    <!--    "-->
-    <!--    :end-quarter-date="true"-->
-    <!--    @change="quarterEnd"-->
-    <!--  />-->
-    <!--</div>-->
-    <!-- 星期选择器 -->
-    <div v-else-if="colFieldSetting.options.showType === 'week'" class="select">
-      <el-date-picker
-        :shortcuts="{ firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.shortcuts"
-        :disabled-date="
-          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.disabledDate
-        "
-        :cell-class-name="
-          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.cellClassName
-        "
-        v-model="weekStareDate"
-        :type="colFieldSetting.options.showType"
-        :is-range="colFieldSetting.options.range"
-        :placeholder="colFieldSetting.options.placeholder"
-        :start-placeholder="colFieldSetting.options.startPlaceholder"
-        :end-placeholder="colFieldSetting.options.endPlaceholder"
-        :readonly="colFieldSetting.options.readonly"
-        :disabled="colFieldSetting.options.disabled"
-        :editable="colFieldSetting.options.editable"
-        :size="
-          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
-        "
-        :clearable="colFieldSetting.options.clearable"
-        :format="
-          'yyyy' +
-          $t('IntervalSelection.auxiliary') +
-          'WW' +
-          $t('IntervalSelection.week')
-        "
-        @change="weekStatChange"
-      ></el-date-picker>
-      <div class="intervalCenter">-</div>
-      <el-date-picker
-        :shortcuts="{ firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.shortcuts"
-        :disabled-date="
-          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.disabledDate
-        "
-        :cell-class-name="
-          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.cellClassName
-        "
-        v-model="weekDate"
-        :type="colFieldSetting.options.showType"
-        :is-range="colFieldSetting.options.range"
-        :placeholder="colFieldSetting.options.placeholder"
-        :start-placeholder="colFieldSetting.options.startPlaceholder"
-        :end-placeholder="colFieldSetting.options.endPlaceholder"
-        :readonly="colFieldSetting.options.readonly"
-        :disabled="colFieldSetting.options.disabled"
-        :editable="colFieldSetting.options.editable"
-        :size="
-          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
-        "
-        :clearable="colFieldSetting.options.clearable"
-        :format="
-          'yyyy' +
-          $t('IntervalSelection.auxiliary') +
-          'WW' +
-          $t('IntervalSelection.week')
-        "
-        @change="weekChange"
-      ></el-date-picker>
-    </div>
-    <!-- 月份选择 -->
-    <div
-      v-else-if="colFieldSetting.options.showType === 'monthrange'"
-      class="select"
-    >
-      <el-date-picker
-        v-model="monthStareDate"
-        type="month"
-        :is-range="colFieldSetting.options.range"
-        :placeholder="colFieldSetting.options.placeholder"
-        :start-placeholder="colFieldSetting.options.startPlaceholder"
-        :end-placeholder="colFieldSetting.options.endPlaceholder"
-        :readonly="colFieldSetting.options.readonly"
-        :disabled="colFieldSetting.options.disabled"
-        :editable="colFieldSetting.options.editable"
-        :clearable="colFieldSetting.options.clearable"
-        :size="
-          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
-        "
-        value-format="timestamp"
-        @change="monthStatChange"
-      />
-      <div class="intervalCenter">-</div>
-      <el-date-picker
-        v-model="monthDate"
-        type="month"
-        :is-range="colFieldSetting.options.range"
-        :placeholder="colFieldSetting.options.placeholder"
-        :start-placeholder="colFieldSetting.options.startPlaceholder"
-        :end-placeholder="colFieldSetting.options.endPlaceholder"
-        :readonly="colFieldSetting.options.readonly"
-        :disabled="colFieldSetting.options.disabled"
-        :editable="colFieldSetting.options.editable"
-        :clearable="colFieldSetting.options.clearable"
-        :size="
-          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
-        "
-        @change="monthChange"
-      />
-    </div>
-    <div v-else style="width: 100%; height: 100%">
-      <el-date-picker
-        v-model="datStareDate"
-        :type="colFieldSetting.options.showType"
-        :is-range="colFieldSetting.options.range"
-        :placeholder="colFieldSetting.options.placeholder"
-        :start-placeholder="colFieldSetting.options.startPlaceholder"
-        :end-placeholder="colFieldSetting.options.endPlaceholder"
-        :readonly="colFieldSetting.options.readonly"
-        :disabled="colFieldSetting.options.disabled"
-        :size="
-          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
-        "
-        :editable="colFieldSetting.options.editable"
-        :clearable="colFieldSetting.options.clearable"
-        value-format="timestamp"
-        style="width: 100%"
-        @change="changeForm"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-// import quarterScope from './quarterScope'
-import {
-  getFirstDayOfSeason,
-  getWeekOfSeason,
-  formatTimefn,
-  getDateRangeSelectorDefaultValue,
-} from '../../../src/utils/range-selector'
-export default {
-  name: 'SectionDate',
-  components: {
-    // quarterScope,
-  },
-  props: {
-    // 组件数据项目
-    colFieldSetting: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      modelValue: {},
-      startDate: '',
-      endDate: '',
-      weekStareDate: '',
-      weekDate: '',
-      monthStareDate: '',
-      monthDate: '',
-      datStareDate: [],
-      yearStartDate: '',
-      yearDate: '',
-      ScopeStartDate: '',
-      ScopeEndDate: '',
-      pickerOptions: {
-        disabledDate(time) {
-          return time.getFullYear() < 2000
-        },
-      },
-      fordateParams: '',
-    }
-  },
-  watch: {
-    datStareDate: {
-      handler(newValue) {
-        this.startDate = this.formatTimefn(
-          this.colFieldSetting.options.format,
-          newValue[0]
-        )
-        this.endDate = this.formatTimefn(
-          this.colFieldSetting.options.format,
-          newValue[1]
-        )
-      },
-      immediate: false,
-      deep: true,
-    },
-  },
-  created() {
-    this.setTimeScope()
-  },
-  methods: {
-    // 时间格式处理函数
-    formatTimefn(format, dateTime) {
-      return formatTimefn(format, dateTime)
-    },
-    getFirstDayOfSeason(date) {
-      return getFirstDayOfSeason(date)
-    },
-    getWeekOfSeason(date) {
-      return getWeekOfSeason(date)
-    },
-    // 填充默认值
-    setTimeScope() {
-      const dataOptions = this.colFieldSetting.options
-      const defaultValueMap = getDateRangeSelectorDefaultValue(
-        dataOptions.stareScopeTimeType,
-        dataOptions.format
-      )
-      if (defaultValueMap) {
-        const startTimeTemp = defaultValueMap.startTimeTemp
-        const endTimeTemp = defaultValueMap.endTimeTemp
-        const myStartDate = defaultValueMap.startDate
-        const myEndDate = defaultValueMap.endDate
-        if (
-          dataOptions.showType === 'year' &&
-          dataOptions.stareScopeTimeType !== '' &&
-          dataOptions.stareScopeTimeType !== null &&
-          dataOptions.stareScopeTimeType !== undefined
-        ) {
-          // 年范围选择器
-          this.yearStartDate = startTimeTemp
-          this.yearDate = endTimeTemp
-        } else if (
-          dataOptions.showType === 'quarterScope' &&
-          dataOptions.stareScopeTimeType !== '' &&
-          dataOptions.stareScopeTimeType !== null &&
-          dataOptions.stareScopeTimeType !== undefined
-        ) {
-          // 季度范围选择器
-          this.ScopeStartDate = startTimeTemp
-          this.ScopeEndDate = endTimeTemp
-        } else if (
-          dataOptions.showType === 'week' &&
-          dataOptions.stareScopeTimeType !== '' &&
-          dataOptions.stareScopeTimeType !== null &&
-          dataOptions.stareScopeTimeType !== undefined
-        ) {
-          // 周范围选择器
-          this.weekStareDate = startTimeTemp
-          this.weekDate = endTimeTemp
-        } else if (
-          dataOptions.showType === 'monthrange' &&
-          dataOptions.stareScopeTimeType !== '' &&
-          dataOptions.stareScopeTimeType !== null &&
-          dataOptions.stareScopeTimeType !== undefined
-        ) {
-          // 月份范围选择器
-          this.monthStareDate = startTimeTemp
-          this.monthDate = endTimeTemp
-        } else if (
-          dataOptions.showType === 'daterange' &&
-          dataOptions.stareScopeTimeType !== '' &&
-          dataOptions.stareScopeTimeType !== null &&
-          dataOptions.stareScopeTimeType !== undefined
-        ) {
-          // 日期范围选择器
-          this.datStareDate = [startTimeTemp, endTimeTemp]
-        }
-        this.startDate = myStartDate
-        this.endDate = myEndDate
-      }
-      this.changeForm()
-    },
-    getTimeTamp(date) {
-      return new Date(date).getTime()
-    },
-    onChangeStatYear() {
-      this.startDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        new Date(this.yearStartDate).getTime()
-      )
-      this.changeForm()
-    },
-    onChangeEndYear() {
-      const year = new Date(this.yearDate).getFullYear()
-      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
-        // 是闰年
-        this.forTimeParams =
-          new Date(this.yearDate).getTime() + 365 * 24 * 60 * 60 * 1000
-      } else {
-        // 不是闰年
-        this.forTimeParams =
-          new Date(this.yearDate).getTime() + 364 * 24 * 60 * 60 * 1000
-      }
-      this.endDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        this.forTimeParams
-      )
-      this.startDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        new Date(this.yearStartDate).getTime()
-      )
-      this.changeForm()
-    },
-    // 选择周处理函数
-    weekChange() {
-      this.forTimeParams =
-        new Date(this.weekDate).getTime() + 5 * 24 * 60 * 60 * 1000
-      this.endDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        this.forTimeParams
-      )
-      this.changeForm()
-    },
-    weekStatChange() {
-      // 组件返回默认日期是周二
-      const time = new Date(this.weekStareDate) - 24 * 60 * 60 * 1000
-      this.startDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        new Date(time).getTime()
-      )
-      this.changeForm()
-    },
-    changeForm() {
-      const mondValue = [this.startDate, this.endDate]
-      $emit(this, 'SectionDateTransfer', mondValue)
-    },
-    quarterStatrt(date) {
-      this.startDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        new Date(date).getTime()
-      )
-      this.changeForm()
-    },
-    quarterEnd(date) {
-      this.endDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        new Date(date).getTime()
-      )
-      this.changeForm()
-    },
-    monthChange() {
-      const year = new Date(this.monthDate).getFullYear()
-      const month = new Date(this.monthDate).getMonth() + 1
-      const solarMonth = [1, 3, 5, 7, 8, 10, 12]
-      if (
-        this.monthStareDate !== '' &&
-        this.monthStareDate !== null &&
-        this.monthStareDate !== undefined
-      ) {
-        this.startDate = this.formatTimefn(
-          this.colFieldSetting.options.format,
-          this.monthStareDate
-        )
-      }
-      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
-        // 是闰年
-        if (month === 2) {
-          this.forTimeParams =
-            new Date(this.monthDate).getTime() + 28 * 24 * 60 * 60 * 1000
-        } else if (solarMonth.indexOf(month) !== -1) {
-          this.forTimeParams =
-            new Date(this.monthDate).getTime() + 30 * 24 * 60 * 60 * 1000
-        } else {
-          this.forTimeParams =
-            new Date(this.monthDate).getTime() + 29 * 24 * 60 * 60 * 1000
-        }
-      } else {
-        // 不是闰年
-        if (month === 2) {
-          this.forTimeParams =
-            new Date(this.monthDate).getTime() + 27 * 24 * 60 * 60 * 1000
-        } else if (solarMonth.indexOf(month) !== -1) {
-          this.forTimeParams =
-            new Date(this.monthDate).getTime() + 30 * 24 * 60 * 60 * 1000
-        } else {
-          this.forTimeParams =
-            new Date(this.monthDate).getTime() + 29 * 24 * 60 * 60 * 1000
-        }
-      }
-      this.endDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        this.forTimeParams
-      )
-      this.changeForm()
-    },
-    monthStatChange() {
-      this.startDate = this.formatTimefn(
-        this.colFieldSetting.options.format,
-        this.monthStareDate
-      )
-      this.changeForm()
-    },
-  },
-  emits: ['SectionDateTransfer'],
-}
-</script>
-
-<style lang="scss" scoped>
-.select {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: calc(50% - 10px) 20px calc(50% - 10px);
-  align-items: center;
-  .intervalCenter {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-  }
-}
-</style>
+<template>
+  <div>
+    <!-- 年份选择器 -->
+    <div v-if="colFieldSetting.options.showType === 'year'" class="select">
+      <el-date-picker
+        :shortcuts="pickerOptions && pickerOptions.shortcuts"
+        :disabled-date="pickerOptions && pickerOptions.disabledDate"
+        :cell-class-name="pickerOptions && pickerOptions.cellClassName"
+        v-model="yearStartDate"
+        type="year"
+        :placeholder="colFieldSetting.options.startPlaceholder"
+        :disabled="colFieldSetting.options.disabled"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        @change="onChangeStatYear"
+      ></el-date-picker>
+      <div class="intervalCenter">-</div>
+      <el-date-picker
+        :shortcuts="pickerOptions && pickerOptions.shortcuts"
+        :disabled-date="pickerOptions && pickerOptions.disabledDate"
+        :cell-class-name="pickerOptions && pickerOptions.cellClassName"
+        v-model="yearDate"
+        type="year"
+        :placeholder="colFieldSetting.options.endPlaceholder"
+        :disabled="colFieldSetting.options.disabled"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        @change="onChangeEndYear"
+      ></el-date-picker>
+    </div>
+    <!-- 季度选择器 -->
+    <!--<div-->
+    <!--  v-else-if="colFieldSetting.options.showType === 'quarterScope'"-->
+    <!--  class="select"-->
+    <!--&gt;-->
+    <!--  <quarterScope-->
+    <!--    v-model:value="ScopeStartDate"-->
+    <!--    :size="-->
+    <!--      colFieldSetting.options.size ? colFieldSetting.options.size : 'small'-->
+    <!--    "-->
+    <!--    :disabled="colFieldSetting.options.disabled"-->
+    <!--    :clearable="colFieldSetting.options.clearable"-->
+    <!--    :placeholder="colFieldSetting.options.placeholder"-->
+    <!--    :format="-->
+    <!--      'yyyy' +-->
+    <!--      $t('IntervalSelection.upload') +-->
+    <!--      'q' +-->
+    <!--      $t('IntervalSelection.quarter')-->
+    <!--    "-->
+    <!--    style="width: 100%"-->
+    <!--    @change="quarterStatrt"-->
+    <!--  />-->
+    <!--  <div class="intervalCenter">-</div>-->
+    <!--  <quarterScope-->
+    <!--    v-model:value="ScopeEndDate"-->
+    <!--    :size="-->
+    <!--      colFieldSetting.options.size ? colFieldSetting.options.size : 'small'-->
+    <!--    "-->
+    <!--    :disabled="colFieldSetting.options.disabled"-->
+    <!--    :clearable="colFieldSetting.options.clearable"-->
+    <!--    :placeholder="colFieldSetting.options.placeholder"-->
+    <!--    style="width: 100%"-->
+    <!--    :format="-->
+    <!--      'yyyy' +-->
+    <!--      $t('IntervalSelection.upload') +-->
+    <!--      'q' +-->
+    <!--      $t('IntervalSelection.quarter')-->
+    <!--    "-->
+    <!--    :end-quarter-date="true"-->
+    <!--    @change="quarterEnd"-->
+    <!--  />-->
+    <!--</div>-->
+    <!-- 星期选择器 -->
+    <div v-else-if="colFieldSetting.options.showType === 'week'" class="select">
+      <el-date-picker
+        :shortcuts="{ firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.shortcuts"
+        :disabled-date="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.disabledDate
+        "
+        :cell-class-name="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.cellClassName
+        "
+        v-model="weekStareDate"
+        :type="colFieldSetting.options.showType"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        :clearable="colFieldSetting.options.clearable"
+        :format="
+          'yyyy' +
+          $t('IntervalSelection.auxiliary') +
+          'WW' +
+          $t('IntervalSelection.week')
+        "
+        @change="weekStatChange"
+      ></el-date-picker>
+      <div class="intervalCenter">-</div>
+      <el-date-picker
+        :shortcuts="{ firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.shortcuts"
+        :disabled-date="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.disabledDate
+        "
+        :cell-class-name="
+          { firstDayOfWeek: 1 } && { firstDayOfWeek: 1 }.cellClassName
+        "
+        v-model="weekDate"
+        :type="colFieldSetting.options.showType"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        :clearable="colFieldSetting.options.clearable"
+        :format="
+          'yyyy' +
+          $t('IntervalSelection.auxiliary') +
+          'WW' +
+          $t('IntervalSelection.week')
+        "
+        @change="weekChange"
+      ></el-date-picker>
+    </div>
+    <!-- 月份选择 -->
+    <div
+      v-else-if="colFieldSetting.options.showType === 'monthrange'"
+      class="select"
+    >
+      <el-date-picker
+        v-model="monthStareDate"
+        type="month"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        value-format="timestamp"
+        @change="monthStatChange"
+      />
+      <div class="intervalCenter">-</div>
+      <el-date-picker
+        v-model="monthDate"
+        type="month"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :editable="colFieldSetting.options.editable"
+        :clearable="colFieldSetting.options.clearable"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        @change="monthChange"
+      />
+    </div>
+    <div v-else style="width: 100%; height: 100%">
+      <el-date-picker
+        v-model="datStareDate"
+        :type="colFieldSetting.options.showType"
+        :is-range="colFieldSetting.options.range"
+        :placeholder="colFieldSetting.options.placeholder"
+        :start-placeholder="colFieldSetting.options.startPlaceholder"
+        :end-placeholder="colFieldSetting.options.endPlaceholder"
+        :readonly="colFieldSetting.options.readonly"
+        :disabled="colFieldSetting.options.disabled"
+        :size="
+          colFieldSetting.options.size ? colFieldSetting.options.size : 'small'
+        "
+        :editable="colFieldSetting.options.editable"
+        :clearable="colFieldSetting.options.clearable"
+        value-format="timestamp"
+        style="width: 100%"
+        @change="changeForm"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+// import quarterScope from './quarterScope'
+import {
+  getFirstDayOfSeason,
+  getWeekOfSeason,
+  formatTimefn,
+  getDateRangeSelectorDefaultValue,
+} from '../../../src/utils/range-selector'
+export default {
+  name: 'SectionDate',
+  components: {
+    // quarterScope,
+  },
+  props: {
+    // 组件数据项目
+    colFieldSetting: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      modelValue: {},
+      startDate: '',
+      endDate: '',
+      weekStareDate: '',
+      weekDate: '',
+      monthStareDate: '',
+      monthDate: '',
+      datStareDate: [],
+      yearStartDate: '',
+      yearDate: '',
+      ScopeStartDate: '',
+      ScopeEndDate: '',
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getFullYear() < 2000
+        },
+      },
+      fordateParams: '',
+    }
+  },
+  watch: {
+    datStareDate: {
+      handler(newValue) {
+        this.startDate = this.formatTimefn(
+          this.colFieldSetting.options.format,
+          newValue[0]
+        )
+        this.endDate = this.formatTimefn(
+          this.colFieldSetting.options.format,
+          newValue[1]
+        )
+      },
+      immediate: false,
+      deep: true,
+    },
+  },
+  created() {
+    this.setTimeScope()
+  },
+  methods: {
+    // 时间格式处理函数
+    formatTimefn(format, dateTime) {
+      return formatTimefn(format, dateTime)
+    },
+    getFirstDayOfSeason(date) {
+      return getFirstDayOfSeason(date)
+    },
+    getWeekOfSeason(date) {
+      return getWeekOfSeason(date)
+    },
+    // 填充默认值
+    setTimeScope() {
+      const dataOptions = this.colFieldSetting.options
+      const defaultValueMap = getDateRangeSelectorDefaultValue(
+        dataOptions.stareScopeTimeType,
+        dataOptions.format
+      )
+      if (defaultValueMap) {
+        const startTimeTemp = defaultValueMap.startTimeTemp
+        const endTimeTemp = defaultValueMap.endTimeTemp
+        const myStartDate = defaultValueMap.startDate
+        const myEndDate = defaultValueMap.endDate
+        if (
+          dataOptions.showType === 'year' &&
+          dataOptions.stareScopeTimeType !== '' &&
+          dataOptions.stareScopeTimeType !== null &&
+          dataOptions.stareScopeTimeType !== undefined
+        ) {
+          // 年范围选择器
+          this.yearStartDate = startTimeTemp
+          this.yearDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'quarterScope' &&
+          dataOptions.stareScopeTimeType !== '' &&
+          dataOptions.stareScopeTimeType !== null &&
+          dataOptions.stareScopeTimeType !== undefined
+        ) {
+          // 季度范围选择器
+          this.ScopeStartDate = startTimeTemp
+          this.ScopeEndDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'week' &&
+          dataOptions.stareScopeTimeType !== '' &&
+          dataOptions.stareScopeTimeType !== null &&
+          dataOptions.stareScopeTimeType !== undefined
+        ) {
+          // 周范围选择器
+          this.weekStareDate = startTimeTemp
+          this.weekDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'monthrange' &&
+          dataOptions.stareScopeTimeType !== '' &&
+          dataOptions.stareScopeTimeType !== null &&
+          dataOptions.stareScopeTimeType !== undefined
+        ) {
+          // 月份范围选择器
+          this.monthStareDate = startTimeTemp
+          this.monthDate = endTimeTemp
+        } else if (
+          dataOptions.showType === 'daterange' &&
+          dataOptions.stareScopeTimeType !== '' &&
+          dataOptions.stareScopeTimeType !== null &&
+          dataOptions.stareScopeTimeType !== undefined
+        ) {
+          // 日期范围选择器
+          this.datStareDate = [startTimeTemp, endTimeTemp]
+        }
+        this.startDate = myStartDate
+        this.endDate = myEndDate
+      }
+      this.changeForm()
+    },
+    getTimeTamp(date) {
+      return new Date(date).getTime()
+    },
+    onChangeStatYear() {
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(this.yearStartDate).getTime()
+      )
+      this.changeForm()
+    },
+    onChangeEndYear() {
+      const year = new Date(this.yearDate).getFullYear()
+      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        // 是闰年
+        this.forTimeParams =
+          new Date(this.yearDate).getTime() + 365 * 24 * 60 * 60 * 1000
+      } else {
+        // 不是闰年
+        this.forTimeParams =
+          new Date(this.yearDate).getTime() + 364 * 24 * 60 * 60 * 1000
+      }
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.forTimeParams
+      )
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(this.yearStartDate).getTime()
+      )
+      this.changeForm()
+    },
+    // 选择周处理函数
+    weekChange() {
+      this.forTimeParams =
+        new Date(this.weekDate).getTime() + 5 * 24 * 60 * 60 * 1000
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.forTimeParams
+      )
+      this.changeForm()
+    },
+    weekStatChange() {
+      // 组件返回默认日期是周二
+      const time = new Date(this.weekStareDate) - 24 * 60 * 60 * 1000
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(time).getTime()
+      )
+      this.changeForm()
+    },
+    changeForm() {
+      const mondValue = [this.startDate, this.endDate]
+      $emit(this, 'SectionDateTransfer', mondValue)
+    },
+    quarterStatrt(date) {
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(date).getTime()
+      )
+      this.changeForm()
+    },
+    quarterEnd(date) {
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        new Date(date).getTime()
+      )
+      this.changeForm()
+    },
+    monthChange() {
+      const year = new Date(this.monthDate).getFullYear()
+      const month = new Date(this.monthDate).getMonth() + 1
+      const solarMonth = [1, 3, 5, 7, 8, 10, 12]
+      if (
+        this.monthStareDate !== '' &&
+        this.monthStareDate !== null &&
+        this.monthStareDate !== undefined
+      ) {
+        this.startDate = this.formatTimefn(
+          this.colFieldSetting.options.format,
+          this.monthStareDate
+        )
+      }
+      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        // 是闰年
+        if (month === 2) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 28 * 24 * 60 * 60 * 1000
+        } else if (solarMonth.indexOf(month) !== -1) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 30 * 24 * 60 * 60 * 1000
+        } else {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 29 * 24 * 60 * 60 * 1000
+        }
+      } else {
+        // 不是闰年
+        if (month === 2) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 27 * 24 * 60 * 60 * 1000
+        } else if (solarMonth.indexOf(month) !== -1) {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 30 * 24 * 60 * 60 * 1000
+        } else {
+          this.forTimeParams =
+            new Date(this.monthDate).getTime() + 29 * 24 * 60 * 60 * 1000
+        }
+      }
+      this.endDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.forTimeParams
+      )
+      this.changeForm()
+    },
+    monthStatChange() {
+      this.startDate = this.formatTimefn(
+        this.colFieldSetting.options.format,
+        this.monthStareDate
+      )
+      this.changeForm()
+    },
+  },
+  emits: ['SectionDateTransfer'],
+}
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: calc(50% - 10px) 20px calc(50% - 10px);
+  align-items: center;
+  .intervalCenter {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+  }
+}
+</style>