vue2-client 1.12.1 → 1.12.3

package/src/base-client/components/common/XDatePicker/index.vue

@@ -1,259 +1,259 @@
-<script>
-import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
-import moment from 'moment'
-
-export default {
-  name: 'XFormDatePicker',
-  components: { XFormCol },
-  data () {
-    return {
-      yearShowOne: false,
-    }
-  },
-  props: {
-    value: {
-      type: [String, Array],
-      default: undefined,
-    },
-    attr: {
-      type: Object,
-      default: () => ({
-        type: 'datePicker',
-        model: undefined,
-        prop: undefined,
-        flex: undefined,
-      }),
-    },
-    mode: {
-      type: String,
-      default: '新增',
-    },
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  mounted () {},
-  computed: {
-    localValue: {
-      get () {
-        try {
-          if (
-            ['monthPicker', 'yearPicker'].includes(this.attr.type) &&
-            this.attr.queryType === 'BETWEEN' &&
-            this.mode === '查询'
-          ) {
-            if (this.value && this.value.length) {
-              return this.value[0]
-            }
-          }
-        } catch (e) {}
-        return this.value
-      },
-      set (val) {
-        if (this.attr.queryType === 'BETWEEN' && this.mode === '查询') {
-          if (this.attr.type === 'monthPicker') {
-            // 使用 moment 获取这个月的 第一天和最后一天
-            const start = moment(val).startOf('month').format(this.formatType)
-            const end = moment(val).endOf('month').format(this.formatType)
-            this.$emit('change', [start, end])
-          } else if (this.attr.type === 'yearPicker') {
-            // 使用 moment 获取当年的 第一天和最后一天
-            const start = moment(val).startOf('year').format(this.formatType)
-            const end = moment(val).endOf('year').format(this.formatType)
-            this.$emit('change', [start, end])
-          } else {
-            this.$emit('change', val)
-          }
-        } else {
-          this.$emit('change', val)
-        }
-        this.yearShowOne = false
-      },
-    },
-    // 格式化类型
-    formatType () {
-      let defaultFormat = 'YYYY-MM-DD HH:mm:ss'
-      if (['datePicker', 'rangePicker'].includes(this.attr.type)) {
-        if (
-          this.mode === '查询' &&
-          this.attr.queryType &&
-          this.attr.queryType !== 'BETWEEN'
-        ) {
-          defaultFormat = 'YYYY-MM-DD'
-        } else if (!this.attr.queryType) {
-          defaultFormat = 'YYYY-MM-DD'
-        }
-      } else if (['monthRangePicker', 'monthPicker'].includes(this.attr.type)) {
-        defaultFormat = 'YYYY-MM'
-      } else if (['yearRangePicker', 'yearPicker'].includes(this.attr.type)) {
-        defaultFormat = 'YYYY'
-      }
-      return (
-        (this.mode === '查询' && this.attr.queryValueFormat
-          ? this.attr.queryValueFormat
-          : this.attr.formValueFormat) || defaultFormat
-      )
-    },
-    ranges () {
-      const 本周 = [moment().startOf('week'), moment().endOf('week')]
-      const 本月 = [moment().startOf('month'), moment().endOf('month')]
-      const 本年 = [moment().startOf('year'), moment().endOf('year')]
-
-      if (['datePicker', 'rangePicker'].includes(this.attr.type)) {
-        return {
-          本周,
-          本月,
-          本年,
-        }
-      } else if (this.attr.type === 'monthRangePicker') {
-        return {
-          本月,
-          本年,
-        }
-      } else {
-        return {
-          本年,
-        }
-      }
-    },
-    placeholder () {
-      const placeholders = {
-        datePicker: ['开始日期', '结束日期'],
-        rangePicker: ['开始日期', '结束日期'],
-        monthRangePicker: ['开始月份', '结束月份'],
-        yearRangePicker: ['开始年份', '结束年份'],
-      }
-      return placeholders[this.attr.type] || ['开始', '结束']
-    },
-    showMode () {
-      const modes = {
-        datePicker: ['date', 'date'],
-        rangePicker: ['date', 'date'],
-        monthRangePicker: ['month', 'month'],
-        yearRangePicker: ['year', 'year'],
-      }
-      return modes[this.attr.type] || ['date', 'date']
-    },
-    showTime () {
-      if (this.formatType === 'YYYY-MM-DD HH:mm:ss') {
-        if (this.attr.name.indexOf('开始') > -1 || this.attr.name.indexOf('起始') > -1) {
-          return { defaultValue: moment('00:00:00', 'HH:mm:ss') }
-        } else {
-          return { defaultValue: moment('23:59:59', 'HH:mm:ss') }
-        }
-      } else {
-        return false
-      }
-    },
-  },
-  methods: {
-    moment,
-    openChange (status) {
-      this.yearShowOne = status
-    },
-    RangePanelChange (value, mode) {
-      this.localValue = [
-        moment(value[0]).format(this.formatType),
-        moment(value[1]).format(this.formatType),
-      ]
-    },
-  },
-}
-</script>
-
-<template>
-  <!-- 单日选择器 -->
-  <a-date-picker
-    v-if="
-      (['datePicker'].includes(attr.type) &&
-        (attr?.queryType !== 'BETWEEN' || mode !== '查询')) ||
-        (['rangePicker'].includes(attr.type) && mode !== '查询')
-    "
-    v-model="localValue"
-    :disabled="disabled || readOnly"
-    style="width: 100%"
-    :showToday="true"
-    placeholder="请选择日期"
-    :show-time="showTime"
-    :format="formatType"
-    :valueFormat="formatType"
-  />
-  <!-- 月份选择器 -->
-  <a-month-picker
-    v-else-if="
-      attr.type === 'monthPicker' ||
-        (attr.type === 'monthRangePicker' && mode !== '查询')
-    "
-    v-model="localValue"
-    :disabled="disabled || readOnly"
-    :show-time="true"
-    placeholder="请选择月份"
-    :valueFormat="formatType"
-    style="width: 100%"
-  />
-  <!--   年份选择器   -->
-  <a-date-picker
-    v-else-if="
-      attr.type === 'yearPicker' ||
-        (attr.type === 'yearRangePicker' && mode !== '查询')
-    "
-    v-model="localValue"
-    :disabled="disabled || readOnly"
-    format="YYYY"
-    :valueFormat="formatType"
-    :open="yearShowOne"
-    mode="year"
-    placeholder="请选择年份"
-    @openChange="openChange"
-    @panelChange="
-      (value, mode) => {
-        localValue = moment(value).format(formatType);
-      }
-    "
-    style="width: 100%"
-  />
-  <!-- 单日范围选择器 / 月份范围选择器/ 年份范围选择器  -->
-  <a-range-picker
-    v-else-if="
-      (attr.type === 'datePicker' &&
-        mode === '查询' &&
-        attr.queryType === 'BETWEEN') ||
-        (attr.type === 'rangePicker' && mode === '查询') ||
-        ['yearRangePicker', 'monthRangePicker'].includes(attr.type)
-    "
-    v-model="localValue"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :show-time="
-      ['yearRangePicker', 'monthRangePicker'].includes(attr.type)
-        ? false
-        : {
-          defaultValue: [
-            moment('00:00:00', 'HH:mm:ss'),
-            moment('23:59:59', 'HH:mm:ss'),
-          ],
-        }
-    "
-    :ranges="ranges"
-    style="width: 100%"
-    :mode="showMode"
-    :format="formatType"
-    @panelChange="RangePanelChange"
-    @change="RangePanelChange"
-  />
-</template>
-
-<style scoped lang="less"></style>
+<script>
+import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
+import moment from 'moment'
+
+export default {
+  name: 'XFormDatePicker',
+  components: { XFormCol },
+  data () {
+    return {
+      yearShowOne: false,
+    }
+  },
+  props: {
+    value: {
+      type: [String, Array],
+      default: undefined,
+    },
+    attr: {
+      type: Object,
+      default: () => ({
+        type: 'datePicker',
+        model: undefined,
+        prop: undefined,
+        flex: undefined,
+      }),
+    },
+    mode: {
+      type: String,
+      default: '新增',
+    },
+    showLabel: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  mounted () {},
+  computed: {
+    localValue: {
+      get () {
+        try {
+          if (
+            ['monthPicker', 'yearPicker'].includes(this.attr.type) &&
+            this.attr.queryType === 'BETWEEN' &&
+            this.mode === '查询'
+          ) {
+            if (this.value && this.value.length) {
+              return this.value[0]
+            }
+          }
+        } catch (e) {}
+        return this.value
+      },
+      set (val) {
+        if (this.attr.queryType === 'BETWEEN' && this.mode === '查询') {
+          if (this.attr.type === 'monthPicker') {
+            // 使用 moment 获取这个月的 第一天和最后一天
+            const start = moment(val).startOf('month').format(this.formatType)
+            const end = moment(val).endOf('month').format(this.formatType)
+            this.$emit('change', [start, end])
+          } else if (this.attr.type === 'yearPicker') {
+            // 使用 moment 获取当年的 第一天和最后一天
+            const start = moment(val).startOf('year').format(this.formatType)
+            const end = moment(val).endOf('year').format(this.formatType)
+            this.$emit('change', [start, end])
+          } else {
+            this.$emit('change', val)
+          }
+        } else {
+          this.$emit('change', val)
+        }
+        this.yearShowOne = false
+      },
+    },
+    // 格式化类型
+    formatType () {
+      let defaultFormat = 'YYYY-MM-DD HH:mm:ss'
+      if (['datePicker', 'rangePicker'].includes(this.attr.type)) {
+        if (
+          this.mode === '查询' &&
+          this.attr.queryType &&
+          this.attr.queryType !== 'BETWEEN'
+        ) {
+          defaultFormat = 'YYYY-MM-DD'
+        } else if (!this.attr.queryType) {
+          defaultFormat = 'YYYY-MM-DD'
+        }
+      } else if (['monthRangePicker', 'monthPicker'].includes(this.attr.type)) {
+        defaultFormat = 'YYYY-MM'
+      } else if (['yearRangePicker', 'yearPicker'].includes(this.attr.type)) {
+        defaultFormat = 'YYYY'
+      }
+      return (
+        (this.mode === '查询' && this.attr.queryValueFormat
+          ? this.attr.queryValueFormat
+          : this.attr.formValueFormat) || defaultFormat
+      )
+    },
+    ranges () {
+      const 本周 = [moment().startOf('week'), moment().endOf('week')]
+      const 本月 = [moment().startOf('month'), moment().endOf('month')]
+      const 本年 = [moment().startOf('year'), moment().endOf('year')]
+
+      if (['datePicker', 'rangePicker'].includes(this.attr.type)) {
+        return {
+          本周,
+          本月,
+          本年,
+        }
+      } else if (this.attr.type === 'monthRangePicker') {
+        return {
+          本月,
+          本年,
+        }
+      } else {
+        return {
+          本年,
+        }
+      }
+    },
+    placeholder () {
+      const placeholders = {
+        datePicker: ['开始日期', '结束日期'],
+        rangePicker: ['开始日期', '结束日期'],
+        monthRangePicker: ['开始月份', '结束月份'],
+        yearRangePicker: ['开始年份', '结束年份'],
+      }
+      return placeholders[this.attr.type] || ['开始', '结束']
+    },
+    showMode () {
+      const modes = {
+        datePicker: ['date', 'date'],
+        rangePicker: ['date', 'date'],
+        monthRangePicker: ['month', 'month'],
+        yearRangePicker: ['year', 'year'],
+      }
+      return modes[this.attr.type] || ['date', 'date']
+    },
+    showTime () {
+      if (this.formatType === 'YYYY-MM-DD HH:mm:ss') {
+        if (this.attr.name.indexOf('开始') > -1 || this.attr.name.indexOf('起始') > -1) {
+          return { defaultValue: moment('00:00:00', 'HH:mm:ss') }
+        } else {
+          return { defaultValue: moment('23:59:59', 'HH:mm:ss') }
+        }
+      } else {
+        return false
+      }
+    },
+  },
+  methods: {
+    moment,
+    openChange (status) {
+      this.yearShowOne = status
+    },
+    RangePanelChange (value, mode) {
+      this.localValue = [
+        moment(value[0]).format(this.formatType),
+        moment(value[1]).format(this.formatType),
+      ]
+    },
+  },
+}
+</script>
+
+<template>
+  <!-- 单日选择器 -->
+  <a-date-picker
+    v-if="
+      (['datePicker'].includes(attr.type) &&
+        (attr?.queryType !== 'BETWEEN' || mode !== '查询')) ||
+        (['rangePicker'].includes(attr.type) && mode !== '查询')
+    "
+    v-model="localValue"
+    :disabled="disabled || readOnly"
+    style="width: 100%"
+    :showToday="true"
+    placeholder="请选择日期"
+    :show-time="showTime"
+    :format="formatType"
+    :valueFormat="formatType"
+  />
+  <!-- 月份选择器 -->
+  <a-month-picker
+    v-else-if="
+      attr.type === 'monthPicker' ||
+        (attr.type === 'monthRangePicker' && mode !== '查询')
+    "
+    v-model="localValue"
+    :disabled="disabled || readOnly"
+    :show-time="true"
+    placeholder="请选择月份"
+    :valueFormat="formatType"
+    style="width: 100%"
+  />
+  <!--   年份选择器   -->
+  <a-date-picker
+    v-else-if="
+      attr.type === 'yearPicker' ||
+        (attr.type === 'yearRangePicker' && mode !== '查询')
+    "
+    v-model="localValue"
+    :disabled="disabled || readOnly"
+    format="YYYY"
+    :valueFormat="formatType"
+    :open="yearShowOne"
+    mode="year"
+    placeholder="请选择年份"
+    @openChange="openChange"
+    @panelChange="
+      (value, mode) => {
+        localValue = moment(value).format(formatType);
+      }
+    "
+    style="width: 100%"
+  />
+  <!-- 单日范围选择器 / 月份范围选择器/ 年份范围选择器  -->
+  <a-range-picker
+    v-else-if="
+      (attr.type === 'datePicker' &&
+        mode === '查询' &&
+        attr.queryType === 'BETWEEN') ||
+        (attr.type === 'rangePicker' && mode === '查询') ||
+        ['yearRangePicker', 'monthRangePicker'].includes(attr.type)
+    "
+    v-model="localValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :show-time="
+      ['yearRangePicker', 'monthRangePicker'].includes(attr.type)
+        ? false
+        : {
+          defaultValue: [
+            moment('00:00:00', 'HH:mm:ss'),
+            moment('23:59:59', 'HH:mm:ss'),
+          ],
+        }
+    "
+    :ranges="ranges"
+    style="width: 100%"
+    :mode="showMode"
+    :format="formatType"
+    @panelChange="RangePanelChange"
+    @change="RangePanelChange"
+  />
+</template>
+
+<style scoped lang="less"></style>