Skip to content

B
bigDataSystem
Commit 7d8279fc authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改通知中心

parent ddc7b8eb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4563 additions and 66 deletions
src/views/notifications/noticeManage/basicStandards.data.ts 0 → 100644
View file @ 7d8279fc
This diff is collapsed.
src/views/notifications/noticeManage/basicStandardsData.ts 0 → 100644
View file @ 7d8279fc
This diff is collapsed.
src/views/notifications/noticeManage/index.vue
View file @ 7d8279fc
......@@ -81,6 +81,7 @@
<NotiModalEmail @register="registerModalEmail" @success="handleSuccess" />
<NotiModalDetail @register="registerModalDetail" @success="handleSuccess" />
<NotiModalNew @register="registerModalNew" @success="handleSuccess" />
<NotiModalView @register="registerModalView" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
......@@ -91,7 +92,7 @@
import NotiDrawer from './notiDrawer.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema, columnstab2, searchFormSchematab2 } from './noti.data';
import { reactive, unref, onDeactivated, onMounted, ref } from 'vue';
import { reactive, unref, onDeactivated, onMounted, ref, watchEffect, nextTick } from 'vue';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { useUserStore } from '@/store/modules/user';
......@@ -99,6 +100,7 @@
import NotiModalEmail from './notiModalEmail.vue';
import NotiModalDetail from './notiModalDetail.vue';
import NotiModalNew from './notiModalNew.vue';
import NotiModalView from './notiModalView.vue';
import { useModal } from '@/components/Modal';
import { getMenuListByPage } from '@/api/system/menu/menu';
import { Tabs, Descriptions, Alert, Popconfirm, message, Modal } from 'ant-design-vue';
......@@ -113,11 +115,14 @@
const { createMessage } = useMessage();
const tableData = ref([]);
const tableDatatab2 = ref([]);
const isView = ref(false);
const isUpdate = ref(false);
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerModal, { openModal }] = useModal();
const [registerModalEmail, { openModal: openModalEmail }] = useModal();
const [registerModalDetail, { openModal: openModalDetail }] = useModal();
const [registerModalNew, { openModal: openModalNew }] = useModal();
const [registerModalView, { openModal: openModalView }] = useModal();
const [registerTable, { reload, getForm, getRowSelection }] = useTable({
title: '通知列表',
api: async (params) => {
......@@ -210,10 +215,14 @@
}
/**查看详情按钮*/
const handleViewDetail = (record: Recordable) => {
openModalNew(true, {
record,
isView: true,
isUpdate: true,
isView.value = true;
isUpdate.value = false;
nextTick(() => {
openModalView(true, {
record,
isView: true, // 强制设置 isView 为 true
isUpdate: false, // 强制设置 isUpdate 为 false
});
});
};
/** 导出按钮*/
......
src/views/notifications/noticeManage/mock.ts
View file @ 7d8279fc
export const tableListtab1: any[] = [
{
createDate: '2024-10-24 10:04:04',
alarmRule: '元数据变更',
alarmLevel: '紧急',
resourceType: '资源类型1',
triggerType: '触发方式1',
alarmRuleName: '元数据变更',
alarmLevel: '高',
resourceType: '数据加载',
triggerType: '运行成功',
businessId: 401,
institutionId: null,
},
{
createDate: '2024-10-24 10:04:04',
alarmRule: '元数据变更',
alarmLevel: '紧急',
resourceType: '资源类型1',
triggerType: '触发方式1',
alarmRuleName: '元数据变更',
alarmLevel: '高',
resourceType: '数据加载',
triggerType: '运行成功',
businessId: 402,
institutionId: null,
},
{
createDate: '2024-10-24 10:04:04',
alarmRule: '元数据变更',
alarmLevel: '紧急',
resourceType: '资源类型2',
triggerType: '触发方式1',
alarmRuleName: '元数据变更',
alarmLevel: '中',
resourceType: '数据加载',
triggerType: '运行成功',
businessId: 403,
institutionId: null,
},
{
createDate: '2024-10-24 10:04:04',
alarmRule: '元数据变更',
alarmLevel: '紧急',
resourceType: '资源类型2',
triggerType: '触发方式1',
alarmRuleName: '元数据变更',
alarmLevel: '高',
resourceType: '数据加载',
triggerType: '运行失败',
businessId: 404,
institutionId: null,
},
{
createDate: '2024-10-24 10:04:04',
alarmRule: '元数据变更',
alarmLevel: '紧急',
resourceType: '资源类型1',
triggerType: '触发方式3',
alarmRuleName: '元数据变更',
alarmLevel: '低',
resourceType: '数据加载',
triggerType: '开始运行',
businessId: 405,
institutionId: null,
},
......@@ -49,7 +49,7 @@ export const tableListtab2: any[] = [
{
alarmRuleName: '元数据变更',
resourceType: '资源类型1',
alarmLevel: '紧急',
alarmLevel: '高',
status: '状态1',
businessId: 401,
institutionId: null,
......@@ -57,7 +57,7 @@ export const tableListtab2: any[] = [
{
alarmRuleName: '元数据变更',
resourceType: '资源类型1',
alarmLevel: '紧急',
alarmLevel: '中',
status: '状态2',
businessId: 402,
institutionId: null,
......@@ -65,7 +65,7 @@ export const tableListtab2: any[] = [
{
alarmRuleName: '元数据变更',
resourceType: '资源类型1',
alarmLevel: '紧急',
alarmLevel: '高',
status: '状态3',
businessId: 403,
institutionId: null,
......@@ -73,7 +73,7 @@ export const tableListtab2: any[] = [
{
alarmRuleName: '元数据变更',
resourceType: '资源类型1',
alarmLevel: '紧急',
alarmLevel: '低',
status: '状态4',
businessId: 404,
institutionId: null,
......@@ -81,7 +81,7 @@ export const tableListtab2: any[] = [
{
alarmRuleName: '元数据变更',
resourceType: '资源类型1',
alarmLevel: '紧急',
alarmLevel: '低',
status: '状态5',
businessId: 405,
institutionId: null,
......
src/views/notifications/noticeManage/noti.data.ts
View file @ 7d8279fc
......@@ -14,7 +14,7 @@ export const columns: BasicColumn[] = [
},
{
title: '通知规则',
dataIndex: 'alarmRule',
dataIndex: 'alarmRuleName',
width: 180,
},
{
......@@ -186,9 +186,10 @@ export const searchFormSchematab2: FormSchema[] = [
export const formSchema: FormSchema[] = [
{
field: 'ruleName',
field: 'alarmRuleName',
label: '规则名称',
component: 'Input',
colProps: { span: 24 },
rules: [
{
required: true,
......@@ -200,18 +201,22 @@ export const formSchema: FormSchema[] = [
field: 'description',
label: '描述',
component: 'InputTextArea',
colProps: { span: 24 },
},
{
field: 'roleStatus',
label: '规则状态',
component: 'Switch',
colProps: { span: 24 },
defaultValue: false,
},
{
field: 'resourceType',
label: '资源类型',
component: 'Select',
colProps: { span: 24 },
componentProps: {
defaultValue: '数据加载',
options: [
{ label: '数据加载', value: '1' },
{ label: '数据同步', value: '2' },
......@@ -224,34 +229,190 @@ export const formSchema: FormSchema[] = [
],
},
},
//未解决问题:以下四个表单项在原型截图中被挡住 无法看出内容
//未解决问题:作用范围列未添加
// {
// field: 'alarmRange',
// label: '作用范围',
// component: 'Select',
// colProps: { span: 24 },
// componentProps: {
// options: [
// { label: '元数据变更', value: '1' },
// { label: '元数据处理', value: '2' },
// ],
// },
// rules: [
// {
// required: true,
// message: '请选择作用范围',
// },
// ],
// },
{
field: 'triggerType',
label: '触发方式',
component: 'CheckboxGroup',
colProps: { span: 24 },
componentProps: {
defaultValue: ['1'],
options: [
{ label: '运行失败', value: '1' },
{ label: '运行成功', value: '2' },
{ label: '开始运行', value: '3' },
{ label: '运行超时', value: '4' },
{ label: '源端元数据更新', value: '5' },
],
},
rules: [
{
required: true,
message: '请选择触发方式',
},
],
},
{
field: 'alarmType',
label: '通知方式',
component: 'CheckboxGroup',
colProps: { span: 24 },
componentProps: {
defaultValue: ['1', '2'],
options: [
{ label: '站内信', value: '1' },
{ label: '邮件', value: '2' },
],
},
rules: [
{
required: true,
message: '请选择通知方式',
},
],
},
{
field: 'message',
label: '收件人',
component: 'CheckboxGroup',
colProps: { span: 12 },
componentProps: {
defaultValue: ['1'],
options: [
{ label: '收件人1', value: '1' },
{ label: '收件人2', value: '2' },
],
},
ifShow: ({ values }) => values.alarmType !== undefined && values.alarmType.includes('1'),
required: ({ values }) => values.alarmType !== undefined && values.alarmType.includes('1'),
},
{
field: 'email',
label: '邮箱地址',
component: 'InputTextArea',
colProps: { span: 12 },
componentProps: {
defaultValue: '11111112222222@123321.123',
placeholder: '多个邮件地址用;分隔符分割',
},
ifShow: ({ values }) => values.alarmType !== undefined && values.alarmType.includes('2'),
required: ({ values }) => values.alarmType !== undefined && values.alarmType.includes('2'),
},
{
field: 'alarmRange',
label: '作用范围',
field: 'alarmLevel',
label: '紧急程度',
component: 'Select',
colProps: { span: 24 },
componentProps: {
options: [
{ label: '元数据变更', value: '1' },
{ label: '元数据处理', value: '2' },
{ label: '低', value: '1' },
{ label: '中', value: '2' },
{ label: '高', value: '3' },
],
},
rules: [
{
required: true,
message: '请选择作用范围',
message: '请选择紧急程度',
},
],
},
];
export const formSchema2: FormSchema[] = [
{
field: 'alarmRuleName',
label: '规则名称',
component: 'Input',
colProps: { span: 24 },
rules: [
{
required: true,
message: '请输入规则名称',
},
],
},
{
field: 'description',
label: '描述',
component: 'InputTextArea',
colProps: { span: 24 },
},
{
field: 'roleStatus',
label: '规则状态',
component: 'Switch',
colProps: { span: 24 },
defaultValue: false,
},
{
field: 'resourceType',
label: '资源类型',
component: 'Select',
colProps: { span: 24 },
componentProps: {
defaultValue: '数据加载',
options: [
{ label: '数据加载', value: '1' },
{ label: '数据同步', value: '2' },
{ label: '工作流', value: '3' },
{ label: '标签', value: '4' },
{ label: '数据质量任务', value: '5' },
{ label: '落标检查任务', value: '6' },
{ label: '元数据变更', value: '7' },
{ label: '标准版本变更', value: '8' },
],
},
},
//未解决问题:作用范围列未添加
// {
// field: 'alarmRange',
// label: '作用范围',
// component: 'Select',
// colProps: { span: 24 },
// componentProps: {
// options: [
// { label: '元数据变更', value: '1' },
// { label: '元数据处理', value: '2' },
// ],
// },
// rules: [
// {
// required: true,
// message: '请选择作用范围',
// },
// ],
// },
{
field: 'triggerType',
label: '触发方式',
component: 'CheckboxGroup',
colProps: { span: 24 },
componentProps: {
defaultValue: ['1'],
options: [
{ label: '状态切换', value: '1' },
{ label: '系统异常', value: '2' },
{ label: '数据异常', value: '3' },
{ label: '策略告警', value: '4' },
{ label: '运行失败', value: '1' },
{ label: '运行成功', value: '2' },
{ label: '开始运行', value: '3' },
{ label: '运行超时', value: '4' },
{ label: '源端元数据更新', value: '5' },
],
},
rules: [
......@@ -265,7 +426,9 @@ export const formSchema: FormSchema[] = [
field: 'alarmType',
label: '通知方式',
component: 'CheckboxGroup',
colProps: { span: 24 },
componentProps: {
defaultValue: ['1', '2'],
options: [
{ label: '站内信', value: '1' },
{ label: '邮件', value: '2' },
......@@ -282,7 +445,9 @@ export const formSchema: FormSchema[] = [
field: 'message',
label: '收件人',
component: 'CheckboxGroup',
colProps: { span: 12 },
componentProps: {
defaultValue: ['1'],
options: [
{ label: '收件人1', value: '1' },
{ label: '收件人2', value: '2' },
......@@ -295,7 +460,9 @@ export const formSchema: FormSchema[] = [
field: 'email',
label: '邮箱地址',
component: 'InputTextArea',
colProps: { span: 12 },
componentProps: {
defaultValue: '11111112222222@123321.123',
placeholder: '多个邮件地址用;分隔符分割',
},
ifShow: ({ values }) => values.alarmType !== undefined && values.alarmType.includes('2'),
......@@ -305,10 +472,12 @@ export const formSchema: FormSchema[] = [
field: 'alarmLevel',
label: '紧急程度',
component: 'Select',
colProps: { span: 24 },
componentProps: {
options: [
{ label: '紧急', value: '1' },
{ label: '不紧急', value: '2' },
{ label: '低', value: '1' },
{ label: '中', value: '2' },
{ label: '高', value: '3' },
],
},
rules: [
......
src/views/notifications/noticeManage/notiModalNew.vue
View file @ 7d8279fc
......@@ -7,6 +7,24 @@
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
<div class="modalRow">
<div style="display: flex; align-items: center">
<span style="margin-right: 5px; color: red">*</span>
<div>可见范围</div>
</div>
<div class="right">
<!-- <div class="clearAll"> 清空 </div> -->
<div>
<a-button type="primary">添加工作区</a-button>
</div>
</div>
</div>
<div class="addDialogBG">
<div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div>
<TreeTwo class="w-1/4 xl:w-1/5" @select="handleSelect" />
</div>
</BasicModal>
</template>
<script lang="ts" setup>
......@@ -16,10 +34,12 @@
import { formSchema } from './noti.data';
import { getDeptList } from '@/api/system/dept/dept';
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { encryptTwo } from '../../../../src/utils/jsencrypt.js';
import { useMessage } from '@/hooks/web/useMessage';
import { TableData } from './mock';
import { router } from '@/router';
import { resetNameFormSchema, createBasicTypeFormSchema } from './basicStandards.data';
import { TreeData } from './basicStandardsData';
import TreeTwo from '@/views/notifications/noticeManage/treeTwo.vue';
defineOptions({ name: 'ModelModal' });
......@@ -54,30 +74,25 @@
...data.record,
});
}
// const treeList = handleTree(TableData, 'businessId', undefined, undefined, undefined);
// console.log('treeList', treeList);
// updateSchema([
// {
// field: 'modelId',
// componentProps: {
// tableData: treeList,
// },
// },
// ]);
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'standardsTree',
componentProps: {
treeData: treeList,
},
},
{
field: 'ModelTree',
componentProps: {
treeData: treeList,
},
},
]);
});
// eslint-disable-next-line vue/return-in-computed-property
const getTitle = computed(() => {
if (unref(isView) && unref(isUpdate)) {
return '查看通知详情';
} else if (unref(isUpdate)) {
return '编辑通知详情';
} else if (!unref(isView) && !unref(isUpdate)) {
return '新增通知详情';
}
});
const getTitle = computed(() => (!unref(isUpdate) ? '新建通知规则' : '编辑通知规则'));
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
......@@ -117,3 +132,31 @@
closeModal();
}
</script>
<style lang="scss" scoped>
.modalRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
.clearAll {
padding-right: 10px;
font-size: 16px;
}
.right {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.addDialogBG {
width: 98%;
height: 400px;
margin: 10px;
padding: 20px;
border-radius: 10px;
background-color: #e8ecf7;
}
</style>
src/views/notifications/noticeManage/notiModalView.vue 0 → 100644
View file @ 7d8279fc
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
:showCancelBtn="false"
>
<BasicForm @register="registerForm" />
<div class="modalRow">
<div style="display: flex; align-items: center">
<span style="margin-right: 5px; color: red">*</span>
<div>可见范围</div>
</div>
<div class="right">
<!-- <div class="clearAll"> 清空 </div> -->
<div>
<a-button type="primary">添加工作区</a-button>
</div>
</div>
</div>
<div class="addDialogBG">
<div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div>
<TreeTwo class="w-1/4 xl:w-1/5 treedisabled" @select="handleSelect" />
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema2 } from './noti.data';
import { getDeptList } from '@/api/system/dept/dept';
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { useMessage } from '@/hooks/web/useMessage';
import { TableData } from './mock';
import { router } from '@/router';
import { resetNameFormSchema, createBasicTypeFormSchema } from './basicStandards.data';
import { TreeData } from './basicStandardsData';
import TreeTwo from '@/views/notifications/noticeManage/treeTwo.vue';
defineOptions({ name: 'ModelModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isView = ref(false);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
disabled: true,
schemas: formSchema2,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
if (unref(!isUpdate.value)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
setFieldsValue({
...data.record,
});
}
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'standardsTree',
componentProps: {
treeData: treeList,
},
},
{
field: 'ModelTree',
componentProps: {
treeData: treeList,
},
},
]);
});
// eslint-disable-next-line vue/return-in-computed-property
const getTitle = computed(() => (!unref(isUpdate) ? '查看通知记录详情' : '查看通知记录详情'));
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
</script>
<style lang="scss" scoped>
.modalRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
opacity: 0.5;
pointer-events: none;
.clearAll {
padding-right: 10px;
font-size: 16px;
}
.right {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.addDialogBG {
width: 98%;
height: 400px;
margin: 10px;
padding: 20px;
border-radius: 10px;
background-color: #e8ecf7;
}
.treedisabled {
opacity: 0.5;
pointer-events: none;
}
</style>
src/views/notifications/noticeManage/treeTwo.vue 0 → 100644
View file @ 7d8279fc
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
title="工作区"
ref="treeRef"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:checkable="true"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'label' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import { Nullable } from '@vben/types';
import { treeDataListTwo } from './basicStandardsData';
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
async function fetch() {
treeData.value = treeDataListTwo;
await nextTick(() => {
getTree().expandAll(true);
});
}
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
</script>
<style lang="scss" scoped>
.bg-white {
width: 97%;
}
::v-deep(.vben-tree) {
background-color: #e8ecf7 !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment