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

<!-- 多选时间和可选N/A和TBD组件 -->
<template>
  <el-col :span="span" class="date-picker-group-with-text">
    <div class="wrap">
      <el-form-item
        :label="config.attrName"
        :prop="config.attrField"
        :label-width="labelWidth"
        class="add-form-item"
        :class="{'form-item-disabled': disabled}"
        :title="config.attrName"
      >
        <template v-if="radioValue === '1'">
          <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" :key="index">
                <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>
            <template v-if="!['EOPSSRQ'].includes(config.attrField) || tagList.length < 1">
              <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 tag-wrap-btn-box" v-else>
                <el-button
                    class="add-date"
                    type="primary"
                    plain
                    size="mini"
                    @click="handleAddDate">增加日期</el-button>
              </div>
            </template>
          </div>
          <div class="date-picker-group" v-else>
            <template v-for="(tag, index) in tagList">
              <transition name="el-zoom-in-center" :key="index">
                <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>
        </template>
        <template v-else>
          <el-input
            :value="value"
            v-if="radioValue !== '1'"
            disabled
          />
        </template>
      </el-form-item>
    </div>
    <div class="warp">
      <el-form-item label-width="10px">
        <el-radio-group :value="radioValue" :disabled="disabled">
          <el-radio label="1" @click.native="handleRadioChange('1')">时间</el-radio>
          <el-radio label="N/A" @click.native="handleRadioChange('N/A')">N/A</el-radio>
          <el-radio label="TBD" @click.native="handleRadioChange('TBD')">TBD</el-radio>
          <el-radio label="已实施" @click.native="handleRadioChange('已实施')">已实施</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
  </el-col>
</template>

<script>
import moment from 'moment'
// 用于显示相关字段
export const formatText = (str) => {
  if (moment(str).isValid()) {
    return moment(str).format('YYYY-MM-DD')
  } else {
    return str
  }
}
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 () {
      if (this.tagList.length === 10) {
        this.$message({
          message: '日期选择上限为10个',
          type: 'warning'
        })
      } else {
        this.datePickerVisible = true
        this.$nextTick(() => {
          this.$refs.datePicker.focus()
        })
      }
    },

    handleRemoveTag (index) {
      this.tagList.splice(index, 1)
      this.$emit('input', this.tagList.join(','))
    },
    // 时间、N/A、TBD切换事件
    handleRadioChange (val) {
      switch (val) {
        case '1':
          this.$emit('input', '')
          break
        case 'N/A':
          this.$emit('input', 'N/A')
          break
        case 'TBD':
          this.$emit('input', 'TBD')
          break
        case '已实施':
          this.$emit('input', '已实施')
          break
      }
    }
  },
  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'))
        }
      }
    },
    radioValue () {
      const value = this.value
      if (value === 'N/A' || value === 'TBD' || value === '已实施') {
        return value
      } else {
        return '1'
      }
    }
  },
  watch: {
    value (val) {
      this.tagList = val !== '' && val !== null && val !== undefined ? val.split(',') : []
    },
    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>
  .date-picker-group-with-text {
    display: flex;
    .wrap {
      &:first-child {
        flex: 1;
        overflow: hidden;
      }
    }
  }
  .add-form-item {
    height: auto;
    min-height: 50px;
    /deep/.el-form-item{
      margin-bottom: 0;
    }
    .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;
        }
      }
      .tag-wrap-btn-box{
        .add-date {
          height: 24px;
          padding: 0 8px;
          line-height: 22px;
        }
      }
    }
    /deep/.el-form-item__error{
      right: 0 !important;
    }
  }
</style>