【update 系统】顶部消息加翻译、增加选择单侧日期的组件

2024-06-26 10:49:58 +08:00
parent fda50d0d7d
commit 570fb6475f
5 changed files with 178 additions and 7 deletions
@@ -0,0 +1,150 @@
+<template>
+  <span tabindex="0" class="ant-calendar-picker j-calendar-picker" @click="onChangeOpen(true)">
+    <span class="ant-calendar-picker-input ant-input">
+      <input readonly="true" v-model="startDate" :placeholder="placeholder[0] || $t('startDate')" tabindex="-1" class="ant-calendar-range-picker-input">
+      <span class="ant-calendar-range-picker-separator"> ~ </span>
+      <input readonly="true" v-model="endDate" :placeholder="placeholder[1] || $t('endDate')" tabindex="-1" class="ant-calendar-range-picker-input">
+      <a-icon v-if="startDate || endDate" @click.stop="clearValue" type="close-circle" class='anticon anticon-close-circle ant-calendar-picker-clear' theme="filled" />
+      <span class="ant-calendar-picker-icon"></span>
+    </span>
+    <a-range-picker class="j-calendar-picker-comp"
+                    v-model="dateValue"
+                    :open="open"
+                    @openChange="onChangeOpen"
+                    @change="onChange"
+                    dropdownClassName="j-calendar-picker-comp-dropdown"
+                    v-bind="$attrs">
+      <template slot="dateRender" slot-scope="current">
+        <div class="ant-calendar-date" @click="clickCalendarDate(current)">
+          {{current.date()}}
+        </div>
+      </template>
+      <template slot="renderExtraFooter">
+        <div class="j-calendar-picker-comp-dropdown-btns">
+          <a-button @click="handleCurrentChange('startDate')" type="primary" size="small">{{$t('curAfter')}}</a-button>
+          <a-button @click="handleCurrentChange('endDate')" type="primary" size="small" style="margin-left: 8px;">{{$t('curBefore')}}</a-button>
+        </div>
+      </template>
+    </a-range-picker>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'JDatePicker',
+  props: {
+    placeholder: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    value: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      open: false,
+      dateValue: [],
+      startDate: '',
+      endDate: '',
+      lastSelectDate: ''
+    }
+  },
+  watch: {
+    value (val) {
+      console.log('更新日期', val)
+      if (Array.isArray(val)) {
+        this.startDate = val[0] || ''
+        this.endDate = val[1] || ''
+        this.dateValue = val
+      } else {
+        this.lastSelectDate = ''
+        this.startDate = ''
+        this.endDate = ''
+        this.dateValue = []
+      }
+    }
+  },
+  methods: {
+    // 清空选中值
+    clearValue () {
+      this.lastSelectDate = ''
+      this.startDate = ''
+      this.endDate = ''
+      this.dateValue = []
+      this.triggerChange()
+    },
+    // 控制弹出层打开
+    onChangeOpen (open) {
+      this.open = open
+      this.dateValue = [this.startDate, this.endDate]
+    },
+    // 日期正常选择
+    onChange (dateArr) {
+      this.startDate = dateArr[0]
+      this.endDate = dateArr[1]
+      this.triggerChange()
+    },
+    // 点击底部按钮
+    handleCurrentChange (field) {
+      if (!this.lastSelectDate) {
+        this.$message.warning(this.$t('pleaseSelectADate'))
+        return
+      }
+      this.onChangeOpen(false)
+      this.startDate = ''
+      this.endDate = ''
+      this[field] = this.lastSelectDate
+      this.triggerChange()
+    },
+    // 触发change事件
+    triggerChange () {
+      this.$emit('change', [this.startDate, this.endDate])
+    },
+    // 记录最后一次点击的日期
+    clickCalendarDate (val) {
+      this.lastSelectDate = val.format('YYYY-MM-DD')
+      console.log(val, this.lastSelectDate)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.j-calendar-picker {
+  position: relative;
+
+  .j-calendar-picker-comp {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+
+  }
+}
+</style>
+<style lang="less">
+// 弹出层样式
+.j-calendar-picker-comp-dropdown {
+  .ant-calendar-range .ant-calendar-footer-extra {
+    width: 100%;
+
+    .j-calendar-picker-comp-dropdown-btns {
+      padding: 7px 6px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+.ant-calendar-picker:hover .ant-calendar-picker-clear {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>