|
|
@@ -5,16 +5,14 @@
|
|
|
<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>
|
|
|
+ <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 === 3" label="指定人员:" required prop="designatedUserList" style="width: 660px"
|
|
|
+ <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" />
|
|
|
@@ -39,18 +37,6 @@
|
|
|
<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>
|
|
|
@@ -68,19 +54,8 @@
|
|
|
</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">
|
|
|
+ <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">
|
|
|
</CustomReport>
|
|
|
@@ -116,58 +91,53 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { reactive, ref, watch, onBeforeMount } from 'vue';
|
|
|
-import type { FormInstance } from 'element-plus';
|
|
|
+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 } from '@/types/message/constant';
|
|
|
+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';
|
|
|
-import { reportMessage, toReportMessage, reportMessageToFinal } from './class.ts';
|
|
|
-import { addMassage, searchMassage, editMassage } from '@/api/message/report-message';
|
|
|
-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 DesignatedPersonSelection from './components/DesignatedPersonSelection.vue';
|
|
|
-import type { FormProps } from 'element-plus';
|
|
|
-import { debounce } from 'lodash-es';
|
|
|
|
|
|
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;
|
|
|
-
|
|
|
+let operater = info.value.realname;
|
|
|
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);
|
|
|
+// 功能类型: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) : 0,
|
|
|
+ route.query.statisticType ? Number(route.query.statisticType) : Default_Value,
|
|
|
);
|
|
|
let queryType = { type: reportType.value, statisticType: statisticType.value };
|
|
|
|
|
|
const form = reactive<reportMessage>({
|
|
|
configIdList: null,
|
|
|
- type: 0,
|
|
|
- statisticType: 0,
|
|
|
+ type: Default_Value,
|
|
|
+ statisticType: Default_Value,
|
|
|
monthAndDayList: ['1', '1'],
|
|
|
dayOfWeek: 1,
|
|
|
monthList: [''],
|
|
|
@@ -181,6 +151,16 @@ const form = reactive<reportMessage>({
|
|
|
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 = [];
|
|
|
|
|
|
@@ -209,44 +189,33 @@ const editDebounce = debounce((form) => {
|
|
|
|
|
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
if (!formEl) return;
|
|
|
- await formEl.validate((valid, fields) => {
|
|
|
+ await formEl.validate((valid) => {
|
|
|
if (valid) {
|
|
|
let submitForm = reportMessageToFinal(form);
|
|
|
- if (pageType.value != 3) {
|
|
|
+ if (pageType.value != OperationTypeEnum.EDIT) {
|
|
|
addDebounce(submitForm);
|
|
|
} else {
|
|
|
editDebounce(submitForm);
|
|
|
}
|
|
|
- } 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) {
|
|
|
+ if (pageType === OperationTypeEnum.ADD) {
|
|
|
// 新增
|
|
|
disableType.value.statisticTypeDisable = false;
|
|
|
disableType.value.contentDisable = false;
|
|
|
- } else if (pageType === 2) {
|
|
|
+ } else if (pageType === OperationTypeEnum.SEARCH) {
|
|
|
// 查询
|
|
|
disableType.value.statisticTypeDisable = true;
|
|
|
disableType.value.contentDisable = true;
|
|
|
- } else if (pageType === 3) {
|
|
|
+ } else if (pageType === OperationTypeEnum.EDIT) {
|
|
|
// 编辑
|
|
|
disableType.value.statisticTypeDisable = true;
|
|
|
disableType.value.contentDisable = false;
|
|
|
@@ -254,24 +223,9 @@ const getDisableType = (pageType) => {
|
|
|
};
|
|
|
|
|
|
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);
|
|
|
+ getDisableType(pageType.value);
|
|
|
+ if (pageType.value === OperationTypeEnum.SEARCH || pageType.value === OperationTypeEnum.EDIT) {
|
|
|
searchMassage(queryType).then((res) => {
|
|
|
- console.log('res3333', res);
|
|
|
toReportMessage(form, res);
|
|
|
return res;
|
|
|
});
|