diantou/src_product/iam/audit/remindconfig/audit-remind-setting.vue

<template>
  <div>
    <!-- 天 -->
    <div v-if="feedbackCycle === '10'" :class="$style.weekremindset">
      <div>
        <span>每天</span>
        <span v-if="editable">
          <a-select v-model="dayval" @change="fnSetDateTime">
            <a-select-option v-for="(item, index) in timeoptions" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </span>
        <span v-else>{{ dayval }}</span>
        <span>发送提醒</span>
      </div>
    </div>
    <!-- 周 -->
    <div v-if="feedbackCycle === '20'" :class="$style.weekremindset">
      <div>
        <span>每</span>
        <span v-if="editable">
          <a-select v-model="weekval" @change="fnSetWeek">
            <a-select-option v-for="(item, index) in weekoptions" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </span>
        <span v-else>{{ weekval }}</span>
        <span>发送提醒</span>
      </div>
    </div>
    <!-- 月 -->
    <div v-if="feedbackCycle === '1' || feedbackCycle === ''" :class="$style.weekremindset">
      <div>
        <span>每月</span>
        <span v-if="editable" :class="$style.weekremindoptions">
          <a-select v-model="daysval" @change="fnSetMonth">
            <a-select-option v-for="(item, index) in daysoptions" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </span>
        <span v-else>{{ daysval }}</span>
        <span>号发送提醒消息</span>
      </div>
    </div>
    <!-- 季度 -->
    <div v-if="feedbackCycle === '2'" :class="$style.weekremindset">
      <div>
        <span>每季度第</span>
        <span v-if="editable" :class="$style.weekremindoptions">
          <a-select v-model="monthval" @change="fnSetQuarter">
            <a-select-option v-for="(item, index) in monthoptions" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </span>
        <span v-else>{{ monthval }}</span>
        <span>月，第</span>
        <span v-if="editable" :class="$style.weekremindoptions">
          <a-select v-model="monthdaysval" @change="fnSetQuarter">
            <a-select-option v-for="(item, index) in daysoptions" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </span>
        <span v-else>{{ monthdaysval }}</span>
        <span>天发送提醒消息</span>
      </div>
    </div>
    <!-- 半年 -->
    <div v-if="feedbackCycle === '3'" :class="$style.weekremindset">
      <div>
        <span>上半年提醒日期:</span>
        <span v-if="editable">
          <span>
            <a-input-number
              v-model="pmonth"
              :min="1"
              :max="6"
              :precision="0"
              :on-blur="fnSetHalfaYear()"
            />
          </span>
          <span>月</span>
          <span v-if="pmonth === 2">
            <a-input-number
              v-model="pdays"
              :min="1"
              :max="29"
              :precision="0"
              :on-blur="fnSetHalfaYear()"
            />
          </span>
          <span v-else>
            <a-input-number
              v-model="pdays"
              :min="1"
              :max="31"
              :precision="0"
              :on-blur="fnSetHalfaYear()"
            />
          </span>
          <span>日</span>
        </span>
        <span v-else>
          <span>{{ pmonth }}月</span>
          <span>{{ pdays }}日</span>
        </span>
      </div>
      <div>
        <span>下半年提醒日期:</span>
        <span v-if="editable">
          <span>
            <a-input-number
              v-model="nmonth"
              :min="7"
              :max="12"
              :precision="0"
              :on-blur="fnSetHalfaYear()"
            />
          </span>
          <span>月</span>
          <span>
            <a-input-number
              v-model="ndays"
              :min="1"
              :max="31"
              :precision="0"
              :on-blur="fnSetHalfaYear()"
            />
          </span>
          <span>日</span>
        </span>
        <span v-else>
          <span>{{ nmonth }}月</span>
          <span>{{ ndays }}日</span>
        </span>
      </div>
    </div>
    <!-- 年 -->
    <div v-if="feedbackCycle === '4'" :class="$style.weekremindset">
      <div>
        <span>每年提醒日期:</span>
        <span v-if="editable">
          <span>
            <a-input-number
              v-model="everymonth"
              :min="1"
              :max="12"
              :precision="0"
              :on-blur="fnSetYear()"
            />
          </span>
          <span>月</span>
          <span v-if="everymonth === 2">
            <a-input-number
              v-model="everydays"
              :min="1"
              :max="29"
              :precision="0"
              :on-blur="fnSetYear()"
            />
          </span>
          <span v-else>
            <a-input-number
              v-model="everydays"
              :min="1"
              :max="31"
              :precision="0"
              :on-blur="fnSetYear()"
            />
          </span>
          <span>日</span>
        </span>
        <span v-else>
          <span>{{ everymonth }}月</span>
          <span>{{ everydays }}日</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import components from './_import-components/audit-remind-setting-import'

export default {
  name: 'AuditRemindSetting',
  metaInfo: {
    title: 'AuditRemindSetting',
  },
  components,
  props: {
    /**
     * 已选中的值
     */
    value: {
      type: [Array, String],
      default: undefined,
    },

    editable: {
      type: Boolean,
      default: true,
    },

    feedbackCycle: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      aTimePickerOpen: false,
      timeoptions: ['上午', '下午'],
      weekoptions: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      daysoptions: [],
      monthoptions: [],
      selecttime: '',
      dayval: '',
      weekval: '',
      daysval: '',
      monthval: '',
      monthdaysval: '',
      pmonth: '',
      pdays: '',
      nmonth: '',
      ndays: '',
      everymonth: '',
      everydays: '',
    }
  },
  created() {
    this.fnCreateDaysJsonObject(31)
    this.fnCreateMonthJsonObject(4)
    this.fninit()
  },
  methods: {
    // 内部的值改变时这里给外面赋值，每个不同的设置项都可以写个方法，输出参照下面那句
    fninit() {
      let tmpArray
      let tmptime
      switch (this.feedbackCycle) {
        case '10':
          /* if (this.value && this.value !== '') {
            tmptime = new Date()
            tmptime.setTime(this.value ? this.value : '')
            this.selecttime = moment(
              tmptime.getHours() + ':' + tmptime.getMinutes() + ':' + tmptime.getSeconds(),
              'HH:mm:ss'
            )
          } */
          switch (this.value) {
            case '0':
              this.dayval = '上午'
              break
            case '1':
              this.dayval = '下午'
              break
            default:
          }

          break
        case '20':
          // this.weekval = this.value

          switch (this.value) {
            case '1':
              this.weekval = '周一'
              break
            case '2':
              this.weekval = '周二'
              break
            case '3':
              this.weekval = '周三'
              break
            case '4':
              this.weekval = '周四'
              break
            case '5':
              this.weekval = '周五'
              break
            case '6':
              this.weekval = '周六'
              break
            case '7':
              this.weekval = '周日'
              break
            default:
          }
          break
        case '1':
          this.daysval = this.value
          break
        case '2':
          tmpArray = this.value.split(',')
          if (tmpArray.length === 1) {
            this.monthval = tmpArray[0]
          } else {
            this.monthval = tmpArray[0]
            this.monthdaysval = tmpArray[1]
          }
          break
        case '3':
          tmpArray = this.value.split(',')
          if (tmpArray.length === 1) {
            this.pmonth = tmpArray[0]
          } else if (tmpArray.length === 2) {
            this.pmonth = tmpArray[0]
            this.pdays = tmpArray[1]
          } else if (tmpArray.length === 3) {
            this.pmonth = tmpArray[0]
            this.pdays = tmpArray[1]
            this.nmonth = tmpArray[2]
          } else {
            this.pmonth = tmpArray[0]
            this.pdays = tmpArray[1]
            this.nmonth = tmpArray[2]
            this.ndays = tmpArray[3]
          }
          break
        case '4':
          tmpArray = this.value.split(',')
          if (tmpArray.length === 1) {
            this.everymonth = tmpArray[0]
          } else {
            this.everymonth = tmpArray[0]
            this.everydays = tmpArray[1]
          }
          break
        default:
      }
    },
    // 天
    // fnSetDate() {
    //   this.$emit('input', this.selecttime.toDate().getTime() + '')
    // },
    // 天
    fnSetDateTime() {
      let strDateTimeId
      switch (this.dayval) {
        case '上午':
          strDateTimeId = '0'
          break
        case '下午':
          strDateTimeId = '1'
          break
        default:
      }
      this.$emit('input', strDateTimeId)
    },
    // 周
    fnSetWeek() {
      // this.$emit('input', this.weekval[0].id.toString())
      let strWeekId
      switch (this.weekval) {
        case '周一':
          strWeekId = '1'
          break
        case '周二':
          strWeekId = '2'
          break
        case '周三':
          strWeekId = '3'
          break
        case '周四':
          strWeekId = '4'
          break
        case '周五':
          strWeekId = '5'
          break
        case '周六':
          strWeekId = '6'
          break
        case '周日':
          strWeekId = '7'
          break
        default:
      }
      this.$emit('input', strWeekId)
    },
    // 月
    fnSetMonth() {
      this.$emit('input', this.daysval.toString())
    },
    // 季度
    fnSetQuarter() {
      let strRemindSetting = ''
      if (this.monthval && this.monthdaysval) {
        strRemindSetting = this.monthval + ',' + this.monthdaysval
      }
      this.$emit('input', strRemindSetting)
    },
    // 半年
    fnSetHalfaYear() {
      let strRemindSetting = ''
      if (this.pmonth !== '' && this.pdays !== '' && this.nmonth !== '' && this.ndays !== '') {
        strRemindSetting =
          this.pmonth.toString() +
          ',' +
          this.pdays.toString() +
          ',' +
          this.nmonth.toString() +
          ',' +
          this.ndays.toString()
      }
      this.$emit('input', strRemindSetting)
    },
    // 年
    fnSetYear() {
      let strRemindSetting = ''
      if (this.everymonth !== '' && this.everydays !== '') {
        strRemindSetting = this.everymonth.toString() + ',' + this.everydays.toString()
      }
      this.$emit('input', strRemindSetting)
    },
    fnCreateDaysJsonObject(num) {
      for (let i = 1; i <= num; i++) {
        this.daysoptions.push(i.toString())
      }
    },
    fnCreateMonthJsonObject(num) {
      for (let i = 1; i <= num; i++) {
        this.monthoptions.push(i.toString())
      }
    },
    handleClose() {
      this.aTimePickerOpen = false
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.weekremindset {
  :global(.ant-select) {
    width: 150px;
    margin: 0 5px;
  }
}
:global(.ant-time-picker-panel-addon) {
  text-align: right;
}
</style>