diantou/src_product/iam/audit/maintain/audit-warrant-input.vue

<template>
  <a-form-model-item
    v-if="lx === 'type'"
    ref="model"
    :rules="rules"
    :label="null"
    prop="empowerType"
  >
    <a-select v-model="model.empowerType" @change="changee">
      <a-select-option v-for="(key, i) in field.attr.selectListItem" :key="i" :value="key.value">
        {{ key.label }}
      </a-select-option>
    </a-select>
  </a-form-model-item>
  <a-form-model-item
    v-else-if="lx === 'stime'"
    ref="model"
    :rules="rules"
    :label="null"
    prop="startDate"
  >
    <a-date-picker
      v-model="model.startDate"
      :disabled="disabled"
      :disabled-date="disabledStartDate"
      @change="changest"
    />
  </a-form-model-item>
  <a-form-model-item v-else ref="model" :label="null" :rules="rules" prop="endDate">
    <a-date-picker
      v-model="model.endDate"
      :disabled="disabled"
      :disabled-date="disabledEndDate"
      @change="changeet"
    />
  </a-form-model-item>
</template>

<script>
import moment from 'moment'
import components from './_import-components/audit-warrant-input-import'

export default {
  name: 'AuditWarrantInput',
  metaInfo: {
    title: 'AuditWarrantInput',
  },
  components,
  props: {
    value: {
      type: Object,
      default: null,
    },
    field: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: -1,
    },
    lx: {
      type: String,
      default: '',
    },
    data: {
      type: String,
      default: 'udata',
    },
  },
  data() {
    return {
      time: '',
      model: { empowerType: '', startDate: '', endDate: '' },
      disabled: this.value.empowerType === '1' || this.value.empowerType === '2',
      rules: [{ required: true, trigger: ['change', 'blur'] }],
      empowerType: '',
      startDate: '',
      endDate: '',
    }
  },
  watch: {
    empowerType() {
      this.$emit('change', this.model.empowerType, this.field, this.index, this.lx, this.data)
      this.$refs.model.validate('blur')
    },
    startDate() {
      this.$emit('change', this.model.startDate, this.field, this.index, this.lx, this.data)
      this.$refs.model.validate('blur')
    },
    endDate() {
      this.$emit('change', this.model.endDate, this.field, this.index, this.lx, this.data)
      this.$refs.model.validate('blur')
    },
  },
  created() {
    if (this.value !== null) {
      if (this.lx === 'type') {
        if (this.value.empowerType) {
          this.model.empowerType = this.value.empowerType
        }
      } else if (this.lx === 'stime') {
        if (this.value.startDate) {
          this.model.startDate = this.value.startDate
          if (this.value.empowerType === '1') {
            this.disabled = true
          }
        }
      } else if (this.lx === 'etime') {
        if (this.value.endDate) {
          this.model.endDate = this.value.endDate
          if (this.value.empowerType === '1') {
            this.disabled = true
          }
        }
      }
    }
  },
  methods: {
    disabledStartDate(startDate) {
      const finishDate = this.time
      if (!startDate || !finishDate) {
        return false
      }
      return startDate.valueOf() > finishDate.valueOf()
    },
    disabledEndDate(finishDate) {
      const startDate = this.time
      if (!finishDate || !startDate) {
        return false
      }
      return startDate.valueOf() >= finishDate.valueOf()
    },
    changee(value) {
      this.empowerType = value
    },
    changest(value) {
      this.startDate = value
    },
    changeet(value) {
      this.endDate = value
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>