sl-sfy-safety/src/views/message/reportmessage/YearReport.vue

<template>
  <div class="reportCard">
      <el-form-item label="推送时间:" required>
        <el-form-item 
          prop="monthAndDayList[0]"
          :rules="{ required: true, message: '请选择时间', trigger: 'change', }"
          >
            
          <el-col :span="22">
            <el-cascader
              v-model="prop.form.monthAndDayList"
              :options="yearArray"
              @change="handleChange"
              placeholder="每年1月1日"
              style="width: 145.5px;"
             :disabled="disableType.contentDisable"
            />
          </el-col>
        </el-form-item>

        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>

        <el-form-item 
          prop="pushTimeList[0]" 
          :rules="{ required: true, message: '请选择时间', trigger: 'blur' }"
          >
            <el-col :span="22">
              <el-time-picker
               v-model="prop.form.pushTimeList[0]"
                  placeholder="09:00"
                  value-format="HH:mm:ss"
                  style="width: 126.5px; height: 32px;"
                  :disabled="disableType.contentDisable"
                  />
            </el-col>
        </el-form-item>
    </el-form-item>

    <el-form-item label="推送对象:" required prop="recipientType">
      <el-radio-group
         v-model="prop.form.recipientType"
          :disabled="disableType.contentDisable"
        >
        <el-radio :value="1">全员</el-radio>
        <el-radio :value="2">分组</el-radio>
        <el-radio :value="3">自定义</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item 
      v-if="prop.form.recipientType === 2"
      label="选择分组:"
      required
      prop="userGroupList"
      >
        <el-col :span="10">
          <el-select
            v-model="prop.form.userGroupList"
            multiple
            placeholder="请选择分组"
            style="width: 240px"
            :disabled="disableType.contentDisable"
          >
            <el-option
              v-for="item in options"
              :key="item.userGroupId"
              :label="item.name"
              :value="item.userGroupId"
            />
          </el-select>
        </el-col>
    </el-form-item>

    <el-form-item 
      v-if="form.recipientType === 3"
      label="选择人员:"
      required
      prop="customUserList.value"
      :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
      >
        <el-col :span="18">
          <SelectTree :form="form" :disableType="disableType"/>
        </el-col>
    </el-form-item>
  </div>
  
</template>

<script lang="ts" setup>
  import { ref, onMounted, } from 'vue';
  import { searchGroup } from '@/api/sendMessage/sendMessage';
  import SelectTree from '../SelectTree.vue';

  const prop = defineProps(['form', 'disableType'])
  const options =  ref()

  const handleChange = () => {
    if (prop.form.monthList.length === 0){
      prop.form.monthList.push(prop.form.monthAndDayList[0])
      prop.form.dayOfMonthList.push(prop.form.monthAndDayList[1])
    }
    else{
      if (prop.form.statisticType != 3){  // 非季报
        prop.form.monthList.length = 0
        prop.form.monthList.push(prop.form.monthAndDayList[0])
        prop.form.dayOfMonthList.length = 0
        prop.form.dayOfMonthList.push(prop.form.monthAndDayList[1])
      }
    }
  }


  // 默认每年2月都是29天，如果2月选了29日则后端再判断当年或明年2月具体有多少天
  const monthMap = {"1":31, "2":29, "3":31, "4":30, "5":31, "6":30, "7":31, "8":31, "9":30, "10":31, "11":30, "12":31}
  const yearArray = Array.from({ length: 12 }, (_, index) => ({
    id: index + 1,
    value: `${index + 1}`,
    label: `${index + 1} 月`,
    children: Array.from({ length: monthMap[index + 1] }, (_, dayIndex) => ({
        id: dayIndex + 1,
        value: `${dayIndex + 1}`,
        label: `${dayIndex + 1} 日`  
      }))
    
  }));

  onMounted(()=>{
    searchGroup().then(res => {
      options.value = res.groupVOList
    }).catch(error => {});
  })
</script>

<style scoped>
  .reportCard{
    margin-left: 87px;
    background-color: #FAFAFA;
    padding-top: 12px;
    width: 530px;
    .el-sellect{

    }
  }


</style>