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: 146.5px; height: 32px"
            :disabled="disableType.contentDisable"
          />
        </el-col>
      </el-form-item>

      <el-col class="text-center" :span="2" style="padding-bottom: 10px">
        <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: 146.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
      style="margin-top: 10px"
      prop="userGroupList"
    >
      <el-col :span="10">
        <el-select
          v-model="prop.form.userGroupList"
          multiple
          placeholder="请选择分组"
          style="width: 326px"
          :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"
      style="width: 526px; margin-top: 10px"
      :rules="{ required: true, message: '请选择推送人员', trigger: 'blur' }"
    >
      <el-col :span="18">
        <DefaultPersonSelection :form="form" :disableType="disableType" />
      </el-col>
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { searchGroup } from '@/api/message/report-message';
  import DefaultPersonSelection from './components/DefaultPersonSelection.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((e) => {
        console.log(e);
      });
  });
</script>

<style scoped>
  .reportCard {
    margin-left: 87px;
    padding: 12px 0px 0px 12px;
    margin-bottom: 16px;
    background-color: #fafafa;
    width: 530px;
    box-sizing: border-box;
  }

  .el-form-item--default {
    /* margin-bottom: 8px; */
    margin-bottom: 0px;
    padding-bottom: 10px;
  }

  .reportCard > .el-form-item:last-child {
    /* background:#ff0000; */
    padding-bottom: 16px;
  }

  ::v-deep .el-select__selection {
    min-height: 25px;
  }
</style>