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

<template>
  <div class="reportCard">
    <el-form-item label="推送时间:" required>
      <el-form-item prop="dayOfWeek">
        <el-col :span="22">
          <el-select
            v-model="form.dayOfWeek"
            placeholder="每周一"
            style="width: 146.5px; height: 32px"
            :disabled="disableType.contentDisable"
            prop="dayOfWeek"
          >
            <el-option label="周一" :value="1" />
            <el-option label="周二" :value="2" />
            <el-option label="周三" :value="3" />
            <el-option label="周四" :value="4" />
            <el-option label="周五" :value="5" />
            <el-option label="周六" :value="6" />
            <el-option label="周日" :value="7" />
          </el-select>
        </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="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="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="form.recipientType === 2"
      label="选择分组:"
      required
      prop="userGroupList"
      style="margin-top: 10px"
    >
      <el-col :span="10">
        <el-select
          v-model="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';

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

  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>