init

2023-08-14 17:10:11 +08:00
commit 37f6ec895d
1145 changed files with 437754 additions and 0 deletions
@@ -0,0 +1,136 @@
+<template>
+  <a-date-picker
+    :show-time="false"
+    :open="open"
+    dropdownClassName="j-multiple-date-picker"
+    @openChange="handleOpenChange"
+    style="width: 100%"
+  >
+    <template slot="dateRender" slot-scope="current">
+      <div class="ant-calendar-date" @click.stop="clickCalendarDate(current)" :class="{'blue': getCurrentStyle(current)}">
+        {{current.date()}}
+      </div>
+    </template>
+    <template slot="renderExtraFooter" slot-scope="">
+      <a class="ant-calendar-ok-btn" @click="handleOk">确定</a>
+    </template>
+  </a-date-picker>
+</template>
+
+<script>
+export default {
+  name: 'JMultipleDatePicker',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    value (val) {
+      if (!val) {
+        this.checkedValue = []
+        document.getElementsByClassName('ant-calendar-picker-input')[0].value = ''
+        this.$emit('change', '')
+      }
+    }
+  },
+  data () {
+    return {
+      open: false,
+      checkedValue: []
+    }
+  },
+  methods: {
+    handleOpenChange (open) {
+      console.log(open)
+      if (open) {
+        this.open = open
+        setTimeout(() => {
+          document.getElementsByClassName('ant-calendar-input')[0].value = this.checkedValue.join(',')
+        }, 100)
+      } else {
+        this.open = open
+        this.$nextTick(() => {
+          document.getElementsByClassName('ant-calendar-picker-input')[0].value = this.checkedValue.join(',')
+        })
+      }
+    },
+    getCurrentStyle (current) {
+      const currentStr = current.format('YYYY-MM-DD')
+      if (this.checkedValue.includes(currentStr)) {
+        return true
+      }
+    },
+    clickCalendarDate (current) {
+      const currentStr = current.format('YYYY-MM-DD')
+      if (!this.checkedValue.includes(currentStr)) {
+        console.log('加日期')
+        this.checkedValue.push(currentStr)
+        // event.target.className += ' blue'
+      } else {
+        console.log('减日期')
+        this.checkedValue = this.checkedValue.filter(item => item !== currentStr)
+        // console.log(event.target.className)
+        // // 选中日期不存在该日期，该日期有blue类时删掉该类
+        // if (event.target.className.split(' ').includes('blue')) {
+        //   event.target.className = event.target.className.split(' ').filter(item => item !== 'blue').join(' ')
+        // }
+      }
+      document.getElementsByClassName('ant-calendar-input')[0].value = this.checkedValue.join(',')
+    },
+    handleOk () {
+      this.open = false
+      this.$nextTick(() => {
+        document.getElementsByClassName('ant-calendar-picker-input')[0].value = this.checkedValue.join(',')
+      })
+      this.$emit('change', this.checkedValue.join(','))
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+// 去掉日期面板中原本选中的样式
+.j-multiple-date-picker {
+  .ant-calendar-today {
+    .ant-calendar-date {
+      background: transparent;
+      border: none;
+    }
+  }
+  .ant-calendar-selected-day {
+    .ant-calendar-date{
+      background: transparent;
+    }
+  }
+}
+
+// 设置日期面板中选中日期的样式
+.blue {
+  background: #bae7ff !important;
+}
+
+// 设置输入框中的文字显示
+/deep/ .ant-calendar-picker-input {
+  padding-right: 30px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+// 设置弹出层footer的布局
+:global(.ant-calendar-footer-btn) {
+  display: flex !important;
+  justify-content: space-between !important;
+  flex-direction: row-reverse !important;
+}
+// 删除弹出层的今天按钮
+:global(.ant-calendar-today-btn) {
+  display: none !important;
+}
+</style>