<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { onMounted } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import dayjs from 'dayjs';
|
|
import { delMsgMonitor, emptyMsgMonitor, getMsgMonitorList } from '#/api/msgCenter/msgMonitor';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
|
import Detail from './Detail.vue';
|
|
defineOptions({ name: 'MonitorMsgMonitor' });
|
|
const baseStore = useBaseStore();
|
const { createMessage, createConfirm } = useMessage();
|
const columns: BasicColumn[] = [
|
{ title: '消息类型', dataIndex: 'messageType', width: 100 },
|
{ title: '消息来源', dataIndex: 'messageSource', width: 100 },
|
{ title: '消息标题', dataIndex: 'title', minWidth: 100 },
|
{ title: '发送时间', dataIndex: 'sendTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
];
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getForm }] = useVxeTable({
|
api: getMsgMonitorList,
|
columns,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
{
|
field: 'messageType',
|
label: '消息类型',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
},
|
},
|
{
|
field: 'messageSource',
|
label: '消息来源',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
},
|
},
|
{
|
field: 'pickerVal',
|
label: '发送时间',
|
component: 'DateRange',
|
componentProps: {
|
format: 'YYYY-MM-DD HH:mm:ss',
|
showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
|
placeholder: ['开始时间', '结束时间'],
|
},
|
},
|
],
|
fieldMapToTime: [['pickerVal', ['startTime', 'endTime']]],
|
},
|
actionColumn: {
|
width: 60,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
rowSelection: { type: 'checkbox' },
|
clickToRowSelect: false,
|
});
|
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.detailText'),
|
onClick: handleDetail.bind(null, record.id),
|
},
|
];
|
}
|
function handleDel() {
|
const selectData = getSelectRows() || [];
|
if (!selectData.length) return createMessage.error($t('common.selectDataTip'));
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: $t('common.batchDelTip'),
|
onOk: () => {
|
const query = {
|
ids: selectData.map((item) => item.id),
|
};
|
delMsgMonitor(query).then((res) => {
|
createMessage.success(res.msg);
|
clearSelectedRowKeys();
|
reload();
|
});
|
},
|
});
|
}
|
function handleDelAll() {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '您确定要清空全部数据吗, 是否继续?',
|
onOk: () => {
|
emptyMsgMonitor().then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
},
|
});
|
}
|
function handleDetail(id) {
|
openFormModal(true, { id });
|
}
|
async function init() {
|
const messageTypeList = (await baseStore.getDictionaryData('msgSendType')) as any[];
|
messageTypeList.map((o) => (o.id = o.enCode));
|
getForm().updateSchema([{ field: 'messageType', componentProps: { options: messageTypeList } }]);
|
const messageSourceList = (await baseStore.getDictionaryData('msgSourceType')) as any[];
|
messageSourceList.map((o) => (o.id = o.enCode));
|
getForm().updateSchema([{ field: 'messageSource', componentProps: { options: messageSourceList } }]);
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="error" pre-icon="icon-ym icon-ym-btn-clearn" @click="handleDel">{{ $t('common.delText') }}</a-button>
|
<a-button type="link" danger @click="handleDelAll">一键清空 </a-button>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Detail @register="registerForm" @reload="reload" />
|
</div>
|
</template>
|
