<template>
<div>
<div class="ns-table-title">消息中心</div>
<a-tabs v-model:activeKey="loginType" :destroyInactiveTabPane="true" class="tabs-list">
<a-tab-pane v-for="(item, index) in typeName" :key="typeCode[index]" :tab="item">
<ns-view-list-table ref="nsTableRef" v-bind="tableConfig">
<template #bodyCell="data">
<template v-if="data.column.dataIndex == 'status'">
<div v-if="data.record.status == 1"> <div class="no-read"></div>未读 </div>
<div v-if="data.record.status == 2"> <div class="readed"></div>已读 </div>
</template>
<template v-if="data.column.dataIndex == 'index'">{{ data.index + 1 }}</template>
</template>
</ns-view-list-table>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script setup lang="ts" name="MessageCenterIndex">
import { Modal } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { dateUtil } from '/nerv-lib/util/date-util';
import { http } from '/nerv-lib/util/http';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
const props = defineProps({
listTableApi: String,
actionApi: Object,
});
let typeName = ['任务', '通知', '预警', '其他'];
let typeCode = [13, 16, 18, 99];
const nsTableRef = ref();
const router = useRouter();
const loginType = ref(typeCode[0]);
const detailUrl = (record) => {
// 服务通知 智慧社区
if (record.tpCode == 'userSubmitVisitor') {
router.push({ name: 'DoorwayAuditIndex' });
}
if (record.tpCode == 'accountBindRoom') {
router.push({ name: 'CertificationAuditIndex' });
}
if (record.tpCode == 'workOrderCommit') {
switch (record.messageBizUuid2) {
case '1':
router.push({ name: 'RepairOrderIndex' });
case '2':
router.push({ name: 'CleanOrderIndex' });
case '3':
router.push({ name: 'WashCleanWorkOrderIndex' });
case '4':
router.push({ name: 'WaterDeliveryOrderIndex' });
case '5':
router.push({ name: 'ProblemReportIndex' });
case '6':
router.push({ name: 'DecorateRegistrationIndex' });
case '7':
router.push({ name: 'CourierServiceIndex' });
default:
break;
}
}
if (record.tpCode == 'feedbackCommit') {
router.push({ name: 'ProblemReportIndex' });
}
if (record.tpCode == 'accountBindRoom') {
router.push({ name: 'CertificationAuditIndex' });
}
if (record.tpCode == 'submitFurnishLog') {
router.push({ name: 'DecorateRegistrationIndex' });
}
if (record.tpCode == 'workOrderCentCommit') {
switch (record.messageBizUuid2) {
case '1':
router.push({ name: 'RepairOrderIndex' });
case '2':
router.push({ name: 'CleanOrderIndex' });
case '3':
router.push({ name: 'WashCleanWorkOrderIndex' });
case '4':
router.push({ name: 'WaterDeliveryOrderIndex' });
case '5':
router.push({ name: 'ProblemReportIndex' });
case '6':
router.push({ name: 'DecorateRegistrationIndex' });
case '7':
router.push({ name: 'CourierServiceIndex' });
default:
break;
}
}
if (record.tpCode == 'accountPackInit') {
router.push({ name: 'CourierServiceIndex' });
}
if (record.tpCode == 'entrustLeaseWebInit') {
router.push({ name: 'LeaseApplicationIndex' });
}
if (record.tpCode == 'entrustLeaseRoomWebInit') {
router.push({ name: 'RentalApplicationIndex' });
}
// 系统通知 智慧社区
if (record.tpCode == 'patrolTaskTime') {
router.push({ name: 'PatrolTaskIndex' });
}
if (record.tpCode == 'leaveCommit') {
router.push({ name: '' }); // 缺失待补充
}
if (record.tpCode == 'leaveCommit') {
router.push({ name: '' }); // 缺失待补充
}
if (record.tpCode == 'alarmReport') {
router.push({ name: 'IncidentRecordIndex' });
}
if (record.tpCode == 'costStandardInit') {
router.push({ name: 'CostCheckIndex' });
}
if (record.tpCode == 'roomCallBill') {
router.push({ name: 'CostCallIndex' });
}
if (record.tpCode == 'attendanceRecord') {
router.push({ name: '' }); // 缺失待补充
}
// 会议通知 会议中心
let params = JSON.parse(record.params);
if (record.tpCode == 'canHuiTongZhi') {
router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'huiYiTiXing') {
router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'huiYiQuXiao') {
router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'riChengQuXiao') {
router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'qianDaoChengGong') {
router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'huiYiYuQi') {
router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'shenPiTongGuo') {
router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'shenPiJuJue') {
router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'shenPiGuoQi') {
router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'huiYiShenPi') {
router.push({ name: 'MeetingApprovalIndex', query: { meetingName: params.meetingName } });
}
if (record.tpCode == 'jiYaoFenXiang') {
router.push({ name: 'MeetingListDetail', query: { id: params.summaryId } });
}
if (record.tpCode == 'huiYiCheXiao') {
router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
}
// 设备通知 社区/养老
if (record.tpCode == 'DeviceRuleAlarm') {
router.push({ name: 'AlarmCenterIndex' });
}
if (record.tpCode == 'DeviceRuleAlarmTimeOut') {
router.push({ name: 'AlarmCenterIndex' });
}
};
watch(
() => loginType.value,
(val) => {
tableConfig.value.params.type = val;
},
{ deep: true },
);
const tableConfig = ref({
api: props.listTableApi,
// title: '消息中心',
params: {
type: loginType.value,
},
headerActions: [
{
label: '全部标记已读',
name: 'MessageCenterReaded',
type: 'primary',
handle: () => {
http
.get(props.actionApi['MessageCenterUnRead'], { type: loginType.value })
.then((res) => {
if (res.data) {
Modal.confirm({
title: '警告',
content: '确定设置全部消息已读吗？',
cancelText: '取消',
onOk: () => {
http
.post(props.actionApi['MessageCenterReaded'], { type: loginType.value })
.then((res) => {
nsTableRef.value.nsTableRef.reload();
});
},
});
} else {
message.warn('暂无未读消息!', 3);
}
});
},
},
],
rowSelection: null,
resultField: 'data',
scroll: { x: '100%' },
columns: [
{
title: '序号',
dataIndex: 'index',
textNumber: 2,
},
{
title: '消息内容',
dataIndex: 'content',
textEllipsis: true,
},
{
title: '通知时间',
dataIndex: 'messageTime',
textNumber: 8,
customRender: ({ value }) => {
return dateUtil(value).format('YYYY-MM-DD HH:mm:ss');
},
},
{
title: '模块来源',
dataIndex: 'title',
textNumber: 8,
},
{
title: '消息状态',
dataIndex: 'status',
textNumber: 4,
customRender: ({ value }) => {
if (value == 1) {
return '未读';
}
if (value == 2) {
return '已读';
}
},
},
],
columnActions: {
title: '操作',
actions: [
{
label: '查看',
name: 'MessageCenterDetail',
handle: (record) => {
http.post(props.actionApi['MessageCenterDetail'], { messageId: record.id }).then(() => {
detailUrl(record);
});
},
},
{
label: '删除',
name: 'MessageCenterDelete',
dynamicParams: {
messageId: 'id',
},
confirm: {
title: '提示',
content: `确定删除该条消息吗？`,
},
isReload: true,
api: props.actionApi['MessageCenterDelete'],
},
],
},
formConfig: {
schemas: [
{
label: '消息状态',
field: 'status',
component: 'NsSelect',
defaultValue: '',
componentProps: {
options: [
{
label: '全部',
value: '',
},
{
label: '已读',
value: 2,
},
{
label: '未读',
value: 1,
},
],
},
},
],
},
});
</script>
<style lang="less" scoped>
:deep(.ant-tabs-top > .ant-tabs-nav) {
margin-bottom: 0;
.ant-tabs-nav-wrap {
padding-left: 24px;
}
}
.no-read {
width: 8px;
height: 8px;
background-color: #ff1744;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
margin-bottom: 1px;
}
.readed {
width: 8px;
height: 8px;
background-color: #17be6b;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
margin-bottom: 1px;
}
.ns-table-title {
text-align: left;
height: 46px;
line-height: 46px;
//font-size: 16px;
font-size: 18px;
font-weight: bold;
user-select: text;
padding-left: 16px;
background: #fff;
width: calc(100% + 32px);
margin-left: -16px;
cursor: pointer;
}
.tabs-list {
overflow: visible !important;
}
:deep(.ant-tabs-nav) {
width: calc(100% + 32px);
margin-left: -16px !important;
background: #fff;
}
:deep(.ant-tabs-nav-wrap) {
padding: 0 16px;
}
</style>