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 v-if="pageType === 1">新建报表配置</span>
        <span v-if="pageType === 2">查看报表配置</span>
        <span v-if="pageType === 3">编辑报表配置</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 === 3"
            label="指定人员:"
            required
            prop="designatedUserList.value"
            style="width: 660px;"
            :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
          >
            <el-col :span="18">
              <DesignatedUserList :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"
            >
              <el-tooltip :visible="weekVisible" placement="top">
                <template #content>
                  <span>每次推送上个自然周数据</span><br /><div style="text-align: center;">(每周一至周日)</div>
                </template>
                <el-radio
                  :value="1"
                  @mouseenter="weekVisible = true"
                  @mouseleave="weekVisible = false"
                  >周报</el-radio
                >
              </el-tooltip>

              <el-tooltip :visible="monthVisible" placement="top">
                <template #content>
                  <span>每次推送上个自然月数据</span><br /><div style="text-align: center;">(每月第一天至最后一天)</div>
                </template>
                <el-radio
                  :value="2"
                  @mouseenter="monthVisible = true"
                  @mouseleave="monthVisible = false"
                  >月报</el-radio
                >
              </el-tooltip>

              <el-tooltip :visible="seasonVisible" placement="top">
                <template #content>
                  <span>每次将推送上个自然季度数据</span>
                </template>
                <el-radio
                  :value="3"
                  @mouseenter="seasonVisible = true"
                  @mouseleave="seasonVisible = false"
                  >季报</el-radio
                >
              </el-tooltip>

              <el-tooltip :visible="yearVisible" placement="top">
                <template #content>
                  <span>每次推送上一整年的数据</span>
                </template>
                <el-radio
                  :value="4"
                  @mouseenter="yearVisible = true"
                  @mouseleave="yearVisible = false"
                  >年报</el-radio
                >
              </el-tooltip>

              <el-tooltip :visible="customVisible" placement="top">
                <template #content>
                  <span>根据个人需求按开始和结束日期进行统计</span>
                </template>
                <el-radio
                  el-radio
                  :value="5"
                  @mouseenter="customVisible = true"
                  @mouseleave="customVisible = false"
                  >自定义</el-radio
                >
              </el-tooltip>
            </el-radio-group>
          </el-form-item>

          <div v-if="form.statisticType === 1">
            <WeekReport :form="form" :disableType="disableType"></WeekReport>
          </div>

          <div v-if="form.statisticType === 2">
            <MonthReport :form="form" :disableType="disableType"></MonthReport>
          </div>

          <div v-if="form.statisticType === 4">
            <YearReport :form="form" :disableType="disableType"></YearReport>
          </div>

          <div v-if="form.statisticType === 5" class="custom-report">
            <CustomReport
              ref="CustomReportComponent"
              :form="form"
              :disableType="disableType"
              :ruleFormRef="ruleFormRef"
            ></CustomReport>
          </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"></TemplateExample>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onBeforeMount } from 'vue';
import type { FormInstance } from 'element-plus';
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';
import { reportMessage, toReportMessage, reportMessageToFinal } from './class.ts';
import { addMassage, searchMassage, editMassage } from '@/api/sendMessage/sendMessage';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/modules/user';
import { useFormList } from './store/useFormList';
import { useRoute, useRouter } from 'vue-router';
import DesignatedUserList from '@/views/message/designatedUserSelectTree.vue';
import type { FormProps } from 'element-plus';
const labelPosition = ref<FormProps['labelPosition']>('left');

const useUser = useUserStore();
const FormList = useFormList();
const { info } = storeToRefs(useUser);
const { type } = storeToRefs(FormList);
let operater = info.value.nickname;

const weekVisible = ref(false); // 控制Tooltip显示
const monthVisible = ref(false); // 控制Tooltip显示
const seasonVisible = ref(false); // 控制Tooltip显示
const yearVisible = ref(false); // 控制Tooltip显示
const customVisible = ref(false); // 控制Tooltip显示

let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑

const formSize = ref('default'); // 校验表单
const ruleFormRef = ref();

// let pageType = 3  // 功能类型：1是新增，2是查询，3是编辑
// let reportType = 1  // 报表类型：1是违规报警，2是平台访问，3是指定人员访问
const route = useRoute();
const router = useRouter();
const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : 0);
const reportType = ref<number>(route.query.type ? Number(route.query.type) : 0);
const statisticType = ref<number>(
  route.query.statisticType ? Number(route.query.statisticType) : 0,
);
let queryType = { type: reportType.value, statisticType: statisticType.value };

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

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

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' }],
  // customUserList: [{ required: true, message: '请选择推送人员', trigger: 'change, blur' }],
});

// const form = reactive<reportMessage>({
//   configIdList: null,
//   type: 0,
//   statisticType: 0,
//   monthAndDayList: ['1', '1'],
//   dayOfWeek: 1,
//   monthList: [''],
//   dayOfMonthList: ['1'],
//   pushTimeList: ['09:00:00'],
//   pushChannel: [],
//   userGroupList: [],
//   designatedUserList: [],
//   recipientType: undefined,
//   customPushConfigList: [],
//   customUserList: []
// });
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!');
      let submitForm = reportMessageToFinal(form);
      console.log('submitForm', submitForm);
      if (pageType.value != 3) {
        addMassage(submitForm).then((res) => {
          console.log('新增res', res);
          ElMessage.success('新增成功');
          router.back();
          return res;
        });
      } else {
        editMassage(submitForm).then((res) => {
          console.log('修改res', res);

          ElMessage.success('修改成功');
          router.back();
          return res;
        });
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

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

watch(form, () => {
  console.log(`form newvalue:`, form);
});

const getDisableType = (pageType) => {
  if (pageType === 1) {
    // 新增
    disableType.value.statisticTypeDisable = false;
    disableType.value.contentDisable = false;
  } else if (pageType === 2) {
    // 查询
    disableType.value.statisticTypeDisable = true;
    disableType.value.contentDisable = true;
  } else if (pageType === 3) {
    // 编辑
    disableType.value.statisticTypeDisable = true;
    disableType.value.contentDisable = false;
  }
};

onBeforeMount(() => {
  if (pageType.value === 1) {
    // 新增
    getDisableType(1);
  }
  if (pageType.value === 2) {
    // 查询
    getDisableType(2);
    searchMassage(queryType).then((res) => {
      console.log('res', res);
      toReportMessage(form, res);
      return res;
    });
  }
  if (pageType.value === 3) {
    // 编辑
    getDisableType(3);
    searchMassage(queryType).then((res) => {
      console.log('res', 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>