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

<template>
  <div class="reportCard" v-for="(item, index) in prop.form.customPushConfigList">
    <a v-if="!disableType.contentDisable">
        <el-icon class="cardIcon"
          color="rgb(216,216,216)"
          v-if="prop.form.customPushConfigList.length != 1"
          @click="deleteReportCard(index)"
        >
        <CircleCloseFilled />
      </el-icon>
    </a>

    <el-form-item label="统计区间:" required>
      <el-form-item 
        :prop="`customPushConfigList[` + index + `].customStartTime`"
        :rules="[{ required: true, message: '请选择推统计区间', trigger: 'change'}]"
        >
          <el-col :span="22">
              <el-date-picker
                v-model="item.daterange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="default"
                value-format="YYYY-MM-DD"
                :disabled="disableType.contentDisable"
              />
          </el-col>
      </el-form-item>
    </el-form-item>

    <el-form-item label="推送时间:" required>
      <el-form-item 
        :prop="`customPushConfigList[` + index + `].pushDay`"
        :rules="{ required: true, message: '请选择推送日期', trigger: 'change' }"
        >
          <el-col :span="22">
            <el-date-picker
              v-model="item.pushDay"
              type="date"
              placeholder="选择日期"
              size="default"
              style="width: 146.5px; height: 32px;"
              value-format="YYYY-MM-DD"
              :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="`customPushConfigList[` + index + `].pushTime`"
        :rules="{ required: true, message: '请选择推送时间', trigger: 'change' }"
        >
          <el-col :span="22">
            <el-time-picker
                v-model="item.pushTime"
                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="`customPushConfigList[` + index + `].recipientType`"
      :rules="{ required: true, message: '请选择推送对象', trigger: 'change' }"
      >
        <el-radio-group 
          v-model="item.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="item.recipientType === '2'"
      label="选择分组:"
      required
      :prop="`customPushConfigList[` + index + `].userGroupList`"
      :rules="{ required: true, message: '请选择分组', trigger: 'change' }"
    >
        <el-col :span="10">
          <el-select
            v-model="item.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="item.recipientType === '3'"
      label="选择人员:"
      required
      :prop="`customPushConfigList[` + index + `].customUserList`"
      :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }"
      >
        <el-col :span="18">
          <CustomSelectTree :form="form" :disableType="disableType" :index="index" :statisticType="5"/>
        </el-col>
    </el-form-item>
  </div>
  <el-button type="primary" @click="addCustom" class="addButton" :disabled="disableType.contentDisable">新建自定义</el-button>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { computeCustom, createCustomReport } from './class.ts';
  import {CircleCloseFilled} from '@element-plus/icons-vue'
  import { searchGroup } from '@/api/sendMessage/sendMessage';
  import CustomSelectTree from '../CustomSelectTree.vue';

  const prop = defineProps(['form', 'disableType'])
  const emit = defineEmits(['customPropsChange']);

  if (prop.form.customPushConfigList.length === 0){
    prop.form.customPushConfigList = reactive<computeCustom[]>([])
    const defaultReport = createCustomReport()
    prop.form.customPushConfigList.push(defaultReport)
  }

  
  const options =  ref()
  
  const addCustom = () => {
    prop.form.customPushConfigList.push(createCustomReport())
  };

  const deleteReportCard = (index) => {
    prop.form.customPushConfigList.splice(index, 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;
    position: relative;
  }

  .addButton{
    margin-top: 16px;
    margin-bottom: 32px;
    margin-left: 87px;
    width: 124px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px dashed #1790FF;
    color: #1890FF;
  }

  .cardIcon{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 14px;
    height: 14px;
  }
</style>