foton-laws-system-front/src/components/CustomFormComponents/DatePickerGroup.vue

<!-- 多选时间组件 -->
<template>
  <el-col :span="span">
    <el-form-item
      :label="config.attrName"
      :prop="config.attrField"
      :label-width="labelWidth"
      class="add-form-item"
      :class="{'form-item-disabled': disabled}"
    >
      <el-input
        v-show="false"
        :value="value"
        :placeholder="placeholder"
        :disabled="disabled"
        clearable
      ></el-input>
      <div class="date-picker-group" v-if="!disabled">
        <template v-for="(tag, index) in tagList">
          <transition name="el-zoom-in-center">
            <div class="tag-wrap" v-if="tagAnimateList.includes(tag)" :key="index">
              <el-tag
                size="small"
                :closable="!disabled"
                @close="handleRemoveTag(index)">{{ tag }}</el-tag>
            </div>
          </transition>
        </template>
        <div class="tag-wrap" v-if="datePickerVisible">
          <el-date-picker
            ref="datePicker"
            v-model="datePickerVal"
            type="date"
            :disabled="disabled"
            :placeholder="placeholder"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @input="handleChange"
          >
          </el-date-picker>
        </div>
        <div class="tag-wrap" v-else>
          <el-button
            class="add-date"
            type="primary"
            plain
            size="mini"
            @click="handleAddDate">增加日期</el-button>
        </div>
      </div>
      <div class="date-picker-group" v-else>
        <template v-for="(tag, index) in tagList">
          <transition name="el-zoom-in-center">
            <div class="tag-wrap" v-if="tagAnimateList.includes(tag)" :key="index">
              <el-tag
                size="small"
                :closable="!disabled"
                @close="handleRemoveTag(index)">{{ tag }}</el-tag>
            </div>
          </transition>
        </template>
      </div>
    </el-form-item>
  </el-col>
</template>

<script>
export default {
  name: 'CusTomDataPickerGroup',
  mixins: [],
  props: {
    config: {
      type: Object,
      required: true
    },
    value: {
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 栅格比例
    span: {
      type: Number,
      default: 24
    },
    labelWidth: {
      type: String,
      default: '150px'
    }
  },
  components: {},
  data () {
    return {
      datePickerVal: '',
      tagList: [],
      datePickerVisible: false,
      tagAnimateList: []
    }
  },
  methods: {
    handleChange (value) {
      const val = this.$dateFormat(value, 'yyyy-MM-dd')
      this.tagList.push(val)
      this.datePickerVisible = false
      this.datePickerVal = ''
      this.$emit('input', this.tagList.join(','))
    },

    handleAddDate () {
      this.datePickerVisible = true
      this.$nextTick(() => {
        this.$refs.datePicker.focus()
      })
    },

    handleRemoveTag (index) {
      this.tagList.splice(index, 1)
      this.$emit('input', this.tagList.join(','))
    }
  },
  computed: {
    placeholder () {
      return `请选择${this.config.attrName}`
    },
    showMessage () {
      return `${this.config.attrName}不能为空`
    },
    isRequired () {
      return !!this.config.isMust
    },
    isString (str) {
      return (typeof str === 'string') && str.constructor === String
    },
    pickerOptions () {
      const _this = this
      return {
        disabledDate (time) {
          return _this.tagList.includes(_this.$dateFormat(time, 'yyyy-MM-dd'))
        }
      }
    }
  },
  watch: {
    value (val) {
      this.tagList = val !== '' && val !== null ? val.split(',') : []
      this.tagList=this.tagList.map((item)=>item.substring(0,10))
    },
    tagList: {
      handler (val) {
        setTimeout(() => {
          this.tagAnimateList = JSON.parse(JSON.stringify(val))
        })
      }
    }
  },
  mounted () {
    this.tagList = this.value !== '' && this.value !== null && typeof (this.value) !== 'undefined' ? this.value.split(',') : []
  }
}
</script>

<style lang="less" scoped>
  .add-form-item {
    height: auto;
    min-height: 50px;
    .date-picker-group {
      min-height: 49px;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      padding-left: 10px;
      .tag-wrap {
        height: 50px;
        display: inline-flex;
        align-items: center;
        margin-right: 5px;
        user-select: none;
        &:last-child {
          margin-right: 0;
        }
      }
      .add-date {
        height: 24px;
        padding: 0 8px;
        line-height: 22px;
      }
    }
  }
</style>