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

<template>
  <div class="page">
    <div class="top">
      <div class="topLeft" @click="clickBack">
        <img src="./img/rollback.png" style="margin-right: 8px" /><span>返回</span>
      </div>
      <div class="topRight">
        <span>{{ OperationTypeNames[pageType] }}报表配置</span>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <el-form
          ref="ruleFormRef"
          style="max-width: 1000px"
          :model="form"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          :label-position="labelPosition"
        >
          <el-form-item
            v-if="form.type === PushMessageTypeEnum.DESIGNEE_ACCESS_DATA"
            label="指定人员:"
            required
            prop="designatedUserList"
            style="width: 660px"
            :rules="{ required: true, message: '请选择人员', trigger: 'change' }"
          >
            <el-col :span="18">
              <DesignatedPersonSelection :form="form" :disableType="disableType" />
            </el-col>
          </el-form-item>

          <el-form-item label="报表周期：" prop="statisticType" required>
            <el-radio-group v-model="form.statisticType" :disabled="disableType.statisticTypeDisable">
              <StatisticOption
                v-for="option in ReportOptions"
                :key="option.value"
                :value="option.value"
                :tooltip-content="option.tooltipContent"
                :tooltip-placement="option.tooltipPlacement"
                :label="option.label"
              />
            </el-radio-group>
          </el-form-item>

          <component :is="currentComponent" :form="form" :disableType="disableType" />
          <div v-if="Number(form.statisticType) === StatisticTypeEnum.CUSTOM_REPORT" class="custom-report">
            <CustomReport
              ref="CustomReportComponent"
              :form="form"
              :disableType="disableType"
              :ruleFormRef="ruleFormRef"
            />
          </div>

          <el-form-item label="推送渠道：" prop="pushChannel" required>
            <el-checkbox-group v-model="form.pushChannel" :disabled="disableType.contentDisable">
              <el-col :span="2">
                <el-checkbox :value="1" name="channel"> 蓝信推送 </el-checkbox>
              </el-col>
              <el-col :span="2">
                <el-checkbox :value="2" name="channel"> 平台推送 </el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="操作人：" style="margin-left: 10px">
            <el-input style="width: 425px; margin-left: -10px" disabled :placeholder="operater" />
          </el-form-item>
        </el-form>
        <div class="two-btns">
          <el-button @click="clickBack">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)" :disabled="disableType.contentDisable">
            确定
          </el-button>
        </div>
      </div>
      <div class="right">
        <TemplateExample :form="form" :disableType="disableType" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onBeforeMount, computed } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { ElMessage } from 'element-plus';
  import type { FormInstance, FormProps } from 'element-plus';
  import { debounce } from 'lodash-es';
  import { addMassage, searchMassage, editMassage } from '@/api/message/report-message';
  import { useUserStore } from '@/store/modules/user';
  import { useFormList } from './store/useFormList';
  import { reportMessage, toReportMessage, reportMessageToFinal } from './class';
  import {
    OperationTypeEnum,
    StatisticTypeEnum,
    OperationTypeNames,
    PushMessageTypeEnum,
    Default_Value,
    ReportOptions,
  } from '@/types/message/constant';
  import StatisticOption from './components/StatisticOption.vue';
  import DesignatedPersonSelection from './components/DesignatedPersonSelection.vue';
  import TemplateExample from './TemplateExample.vue';
  import WeekReport from './WeekReport.vue';
  import MonthReport from './MonthReport.vue';
  import YearReport from './YearReport.vue';
  import CustomReport from './CustomReport.vue';

  const labelPosition = ref<FormProps['labelPosition']>('left');
  const useUser = useUserStore();
  const FormList = useFormList();
  const { info } = storeToRefs(useUser);
  const { type } = storeToRefs(FormList);
  let operater = info.value.realname;
  let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
  const formSize = ref('default'); // 校验表单
  const ruleFormRef = ref();
  const route = useRoute();
  const router = useRouter();
  // 功能类型：1是新增，2是查询，3是编辑
  const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : Default_Value);
  // 报表类型：1是违规报警，2是平台访问，3是指定人员访问
  const reportType = ref<number>(route.query.type ? Number(route.query.type) : Default_Value);
  // 统计时间段类型：1-周报 2-月报 3-季报 4-年报 5-自定义
  const statisticType = ref<number>(route.query.statisticType ? Number(route.query.statisticType) : Default_Value);
  let queryType = { type: reportType.value, statisticType: statisticType.value };

  const form = reactive<reportMessage>({
    configIdList: null,
    type: Default_Value,
    statisticType: Default_Value,
    monthAndDayList: ['1', '1'],
    dayOfWeek: 1,
    monthList: [''],
    dayOfMonthList: ['1'],
    pushTimeList: ['09:00:00'],
    pushChannel: [],
    userGroupList: [],
    designatedUserList: [],
    recipientType: undefined,
    customPushConfigList: [],
    customUserList: [],
  });

  // 根据报表周期展示不同组件
  const ComponentEnum = {
    [StatisticTypeEnum.WEEK_REPORT]: WeekReport,
    [StatisticTypeEnum.MONTH_REPORT]: MonthReport,
    [StatisticTypeEnum.YEAR_REPORT]: YearReport,
  };

  // 当前组件
  const currentComponent = computed(() => ComponentEnum[form.statisticType]);

  form.customUserList.value = []; // 防止进入页面开始就显示校验错误
  form.designatedUserList = [];

  const rules = reactive({
    statisticType: [{ required: true, message: '请选择统计时间段', trigger: 'change, blur' }],
    pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
    dayOfWeek: [{ required: true, message: '请选择推送日期', trigger: 'change' }],
    dayOfMonthList: [{ required: true, message: '请选择推送日', trigger: 'change' }],
    recipientType: [{ required: true, message: '请选择推送对象', trigger: ['blur', 'change'] }],
    userGroupList: [{ required: true, message: '请选择推送分组', trigger: 'change' }],
  });

  const addDebounce = debounce((form) => {
    addMassage(form).then(() => {
      ElMessage.success('新增成功');
      clickBack();
    });
  }, 500);

  const editDebounce = debounce((form) => {
    editMassage(form).then(() => {
      ElMessage.success('修改成功');
      clickBack();
    });
  }, 500);

  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
      if (valid) {
        let submitForm = reportMessageToFinal(form);
        if (pageType.value != OperationTypeEnum.EDIT) {
          addDebounce(submitForm);
        } else {
          editDebounce(submitForm);
        }
      }
    });
  };

  const clickBack = () => {
    type.value = reportType.value;
    router.back();
  };

  const getDisableType = (pageType) => {
    if (pageType === OperationTypeEnum.ADD) {
      // 新增
      disableType.value.statisticTypeDisable = false;
      disableType.value.contentDisable = false;
    } else if (pageType === OperationTypeEnum.SEARCH) {
      // 查询
      disableType.value.statisticTypeDisable = true;
      disableType.value.contentDisable = true;
    } else if (pageType === OperationTypeEnum.EDIT) {
      // 编辑
      disableType.value.statisticTypeDisable = true;
      disableType.value.contentDisable = false;
    }
  };

  onBeforeMount(() => {
    getDisableType(pageType.value);
    if (pageType.value === OperationTypeEnum.SEARCH || pageType.value === OperationTypeEnum.EDIT) {
      searchMassage(queryType).then((res) => {
        toReportMessage(form, res);
        return res;
      });
    }
    form.type = reportType.value;
  });
</script>

<style lang="scss" scoped>
  .page {
    height: calc(100vh - 64px - 18px);
    background-color: rgba(255, 255, 255, 1);

    .top {
      display: flex;
      padding: 16px 0 15px 20px;
      border-bottom: 1px solid #e9e9e9;

      .topLeft {
        display: flex;
        align-items: center;
        cursor: pointer;

        a {
          display: flex;
          align-items: center;
        }
      }

      .topRight {
        margin-left: 20px;
      }
    }

    .content {
      display: flex;
      height: calc(100vh - 130px);

      .left {
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 20px 0 0 32px;
        width: 769px;
        border-right: 1px solid rgba(0, 0, 0, 0.06);
        overflow-y: auto;

        .custom-report {
          max-height: calc(100vh - 450px);
          overflow-y: auto;
        }

        .two-btns {
          position: absolute;
          right: 33px;
          bottom: 32px;
        }
      }

      .right {
        height: 299px;
        width: 363px;
        margin-left: 31px;
        margin-top: 20px;
        background: #ffffff;
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #e9e9e9;
      }
    }
  }
</style>