<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { computed, inject, nextTick, onMounted, reactive, toRefs, watch } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { encryptByBase64 } from '@jnpf/utils';
|
|
import { delMsgRecord, getMessageList, readInfo } from '#/api/system/message';
|
import { getScheduleDetail } from '#/api/teamwork/schedule';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
import Detail from '#/views/msgCenter/notice/Detail.vue';
|
import ScheduleDetail from '#/views/teamwork/schedule/Detail.vue';
|
|
defineOptions({ name: 'MessageRecord' });
|
|
interface State {
|
activeKey: string;
|
keyword: string;
|
messageType: any[];
|
}
|
|
const emitter: any = inject('emitter');
|
|
const router = useRouter();
|
const { createMessage, createConfirm } = useMessage();
|
const state = reactive<State>({
|
activeKey: '0',
|
keyword: '',
|
messageType: [],
|
});
|
const { activeKey, messageType } = toRefs(state);
|
const baseStore = useBaseStore();
|
const getSearchInfo = computed(() => ({ keyword: state.keyword, type: state.activeKey == '0' ? '' : state.activeKey }));
|
|
const [registerForm, { resetFields }] = useForm({
|
baseColProps: { span: 6 },
|
showActionButtonGroup: true,
|
showAdvancedButton: true,
|
compact: true,
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
});
|
const columns: BasicColumn[] = [
|
{ title: '消息标题', dataIndex: 'title', minWidth: 200, slots: { default: 'title' } },
|
{ title: '消息类型', dataIndex: 'type', width: 120, slots: { default: 'type' } },
|
{ title: '发送人员', dataIndex: 'releaseUser', width: 120 },
|
{ title: '发送时间', dataIndex: 'releaseTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '状态', dataIndex: 'isRead', width: 70, slots: { default: 'isRead' } },
|
];
|
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useVxeTable({
|
api: getMessageList,
|
rowSelection: { type: 'checkbox' },
|
clickToRowSelect: false,
|
immediate: false,
|
});
|
const [registerDetail, { openModal: openDetailModal }] = useModal();
|
const [registerScheduleDetail, { openModal: openScheduleDetailModal }] = useModal();
|
|
watch(
|
() => state.activeKey,
|
() => {
|
resetFields();
|
},
|
);
|
|
async function initMessageType() {
|
const all = { id: '', fullName: '全部', enCode: '' };
|
const list = ((await baseStore.getDictionaryData('msgSourceType')) as any[]) || [];
|
state.messageType = [all, ...list];
|
}
|
function handleSubmit(values) {
|
state.keyword = values?.keyword || '';
|
handleSearch();
|
}
|
function handleReset() {
|
state.keyword = '';
|
handleSearch();
|
}
|
function handleSearch() {
|
nextTick(() => {
|
reload({ page: 1 });
|
});
|
}
|
function handleDelete() {
|
const list: any[] = getSelectRows();
|
if (!list.length) return createMessage.error($t('common.selectDataTip'));
|
const query = { ids: list.map((item) => item.id).join(',') };
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: $t('common.batchDelTip'),
|
onOk: () => {
|
delMsgRecord(query).then((res) => {
|
createMessage.success(res.msg);
|
clearSelectedRowKeys();
|
reload();
|
});
|
},
|
});
|
}
|
function handleView(item) {
|
readInfo(item.id).then((res) => {
|
if (item.isRead == '0') item.isRead = '1';
|
if (item.type == 4) {
|
const bodyText = res.data.bodyText ? JSON.parse(res.data.bodyText) : {};
|
if (bodyText.type == 3) return;
|
getScheduleDetail(bodyText.groupId, bodyText.id).then(() => {
|
openScheduleDetailModal(true, { id: bodyText.id, groupId: bodyText.groupId });
|
});
|
} else if (item.type == 2 && item.flowType == 2) {
|
const bodyText = JSON.parse(res.data.bodyText);
|
if (bodyText.type == 0) return;
|
emitter.emit('openProfileModal', { activeKey: 'entrust', subActiveKey: bodyText.type });
|
} else {
|
if (item.type == 1 || item.type == 3) {
|
openDetailModal(true, { id: item.id, type: 1 });
|
} else {
|
if (!res.data.bodyText) return;
|
router.push(`/workFlowDetail?config=${encodeURIComponent(encryptByBase64(res.data.bodyText))}`);
|
}
|
}
|
});
|
}
|
function getTypeName(type?) {
|
const list = state.messageType.filter((o) => o.enCode == type) || [];
|
return list.length ? list[0].fullName : '公告';
|
}
|
|
onMounted(() => {
|
initMessageType();
|
state.activeKey = '';
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper message-record-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-search-box">
|
<BasicForm class="search-form" @register="registerForm" @submit="handleSubmit" @reset="handleReset" />
|
</div>
|
<div class="jnpf-content-wrapper-content flex flex-col bg-white">
|
<a-tabs v-model:active-key="activeKey" class="jnpf-content-wrapper-tabs" destroy-inactive-tab-pane>
|
<a-tab-pane v-for="item in messageType" :key="item.enCode" :tab="item.fullName" />
|
</a-tabs>
|
<BasicVxeTable @register="registerTable" :columns="columns" :search-info="getSearchInfo">
|
<template #tableTitle>
|
<a-button type="error" pre-icon="icon-ym icon-ym-btn-clearn" @click="handleDelete">{{ $t('common.delText') }}</a-button>
|
</template>
|
<template #title="{ record }">
|
<a :title="record.name" @click="handleView(record)">{{ record.title }}</a>
|
</template>
|
<template #type="{ record }">
|
{{ getTypeName(record.type) }}
|
</template>
|
<template #isRead="{ record }">
|
<a-tag :color="record.isRead == 1 ? 'success' : ''">{{ record.isRead == 1 ? '已读' : '未读' }}</a-tag>
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Detail @register="registerDetail" />
|
<ScheduleDetail @register="registerScheduleDetail" />
|
</div>
|
</template>
|
