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

<template>
  <div v-for="(item, index) in prop.form.customPushConfigList">
    <div v-if="item.isDeleted != 1" class="reportCard">
      <a v-if="!disableType.contentDisable">
        <el-icon
          class="cardIcon"
          color="rgb(216,216,216)"
          v-if="prop.form.customPushConfigList.filter((custom) => custom.isDeleted === 0).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"
              style="width: 327.5px"
              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" style="padding-bottom: 10px">
          <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="选择时间"
              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
        style="margin-top: 10px"
        :prop="`customPushConfigList[` + index + `].userGroupList`"
        :rules="{ required: true, message: '请选择分组', trigger: 'change' }"
      >
        <el-col :span="10">
          <el-select
            v-model="item.userGroupList"
            multiple
            placeholder="请选择分组"
            style="width: 326px; padding-bottom: 0px"
            :disabled="disableType.contentDisable"
          >
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </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="请选择人员"
        style="width: 526px; margin-top: 10px"
        :prop="`customPushConfigList[` + index + `].customUserList`"
        :rules="{ required: true, message: '请选择推送人员', trigger: 'blur' }"
      >
        <el-col :span="18">
          <CustomPersonSelection
            style="padding-bottom: 0"
            :form="form"
            :disableType="disableType"
            :index="index"
            :statisticType="5"
            :ruleFormRef="ruleFormRef"
          />
        </el-col>
      </el-form-item>
    </div>
  </div>
  <el-button type="primary" :icon="Plus" @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/message/report-message';
  import CustomPersonSelection from './components/CustomPersonSelection.vue';
  import { Plus } from '@element-plus/icons-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[index].isDeleted = 1;
    // 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((e) => {
        console.log(e);
      });
  });
</script>

<style scoped>
  .reportCard {
    margin-left: 87px;
    margin-bottom: 16px;
    padding: 12px 0px 0px 12px;
    background-color: #fafafa;
    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;
  }

  .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>