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: ['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();

onMounted(() => {
  searchGroup()
    .then((res) => {
      options.value = res.groupVOList;
    })
    .catch((error) => {});
});
</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>