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="选择日期"
            :disabled-date="disabledDate"
            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>

    <!-- :rules="{validator: validateCustom, trigger: 'change' }" -->
    <!-- :rules="{validator: (rule, value, cb) => validateCustom(rule, value, cb, index), trigger: 'change' }" -->
    <!-- :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }" -->
    <el-form-item
      v-if="item.recipientType === '3'"
      label="选择人员:"
      required
      placeholder="请选择人员"
      :prop="`customPushConfigList[` + index + `].customUserList`"
      :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }"
    >
      <el-col :span="18">
        <CustomSelectTree
          :form="form"
          :disableType="disableType"
          :index="index"
          :statisticType="5"
          :ruleFormRef="ruleFormRef"
        />
      </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', 'ruleFormRef']);
  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);
  };

  const disabledDate = (time: Date) => {
    return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
  };

  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>