我的消息
This commit is contained in:
parent
9d0eec83ca
commit
5d329f4b2a
34
src/views/dashboard/message/columns.ts
Normal file
34
src/views/dashboard/message/columns.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { h } from 'vue';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed:"left"
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '消息标题',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: '消息状态',
|
||||
key: 'status',
|
||||
customRender({ record }) {
|
||||
return h('span', record.status === 1 ? '已读' : '未读')
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
key: 'createUser',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
},
|
||||
];
|
||||
92
src/views/dashboard/message/edit.vue
Normal file
92
src/views/dashboard/message/edit.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
|
||||
<template #default>
|
||||
<n-descriptions :column="2" bordered :labelStyle="{ width: '110px' }" label-placement="left">
|
||||
<n-descriptions-item label="消息标题:">{{ formData.title }}</n-descriptions-item>
|
||||
<n-descriptions-item label="消息类型:">{{ getTyepText(formData.type) }}</n-descriptions-item>
|
||||
<n-descriptions-item label="业务类型:">{{ formData.bizType == 1 ? '订单' : '其他' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="消息状态:">{{ formData.status == 1 ? '已读' : '未读' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="消息内容:">{{ formData.content }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</template>
|
||||
<template #action>
|
||||
<span class="dialog-footer">
|
||||
<n-button @click="dialogClose">关闭</n-button>
|
||||
</span>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getMessageDetail } from "@/api/dashboard/message";
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { onMounted, reactive } from "vue";
|
||||
|
||||
const emit = defineEmits(["success", "update:visible"]);
|
||||
const formData = reactive({
|
||||
id: "",
|
||||
title: "",
|
||||
type: '',
|
||||
bizType: '',
|
||||
status: '',
|
||||
content: ''
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
messageId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
const [modalRegister, { openModal }] = useModal({
|
||||
title: "日志详情",
|
||||
subBtuText: '确定',
|
||||
width: 600,
|
||||
});
|
||||
|
||||
const dialogClose = () => {
|
||||
emit("update:visible", false);
|
||||
};
|
||||
|
||||
const setFormData = async () => {
|
||||
const data = await getMessageDetail(props.messageId);
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
const getTyepText = (type) => {
|
||||
let typeText = ''
|
||||
switch (type) {
|
||||
case 1:
|
||||
typeText = '系统通知'
|
||||
break;
|
||||
case 2:
|
||||
typeText = '用户私信 '
|
||||
break;
|
||||
case 3:
|
||||
typeText = '代办事项'
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return typeText
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.messageId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
157
src/views/dashboard/message/index.vue
Normal file
157
src/views/dashboard/message/index.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<n-card>
|
||||
<n-tabs v-model="activeName" @update:value="handleClick">
|
||||
<n-tab-pane :name="item.value" :tab="item.configName" v-for="(item, index) in messageTypeList">
|
||||
<template #tab>
|
||||
<n-badge :value="item.number ? item.number : ''" class="item" :offset="[10,2]">
|
||||
<span class="t1">{{ item.name }}</span>
|
||||
</n-badge>
|
||||
</template>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
<BasicTable :columns="columns" :actionColumn="actionColumn" :request="loadDataTable" :row-key="(row) => row.id"
|
||||
ref="tableRef" @update:checked-row-keys="onSelectionChange">
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-button type="primary" @click="handleSetRead()">
|
||||
批量确认
|
||||
</n-button>
|
||||
<n-button type="error" @click="handleDelete()" :disabled="!selectionData.length">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
<editDialog v-if="editVisible" :messageId="messageId" v-model:visible="editVisible" ref="createModalRef"
|
||||
@success="reloadTable('noRefresh')">
|
||||
</editDialog>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, h, nextTick, defineAsyncComponent, onMounted } from 'vue';
|
||||
import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@vicons/antd';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import { getMessageProfile, messageDelete, messageBatchDelete, setRead } from '@/api/dashboard/message';
|
||||
import { columns } from './columns';
|
||||
import editDialog from './edit.vue';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { renderIcon } from '@/utils';
|
||||
const messageId = ref(0)
|
||||
const message = useMessage();
|
||||
const dialog = useDialog()
|
||||
const activeName = ref(1)
|
||||
const messageTypeList = ref([
|
||||
{
|
||||
name: '系统通知',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '用户私信',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '代办事项',
|
||||
value: 3
|
||||
},
|
||||
])
|
||||
const editVisible = ref(false)
|
||||
const createModalRef= ref()
|
||||
const selectionData = ref([])
|
||||
const tableRef = ref();
|
||||
const formParams = reactive({
|
||||
type: 1
|
||||
});
|
||||
|
||||
const loadDataTable = async (res: any) => {
|
||||
selectionData.value = []
|
||||
const result = await getMessageProfile({ ...formParams, ...res });
|
||||
let item = messageTypeList.value.find((item, index) => item.value == activeName.value)
|
||||
item.number = result.number
|
||||
return result;
|
||||
};
|
||||
const actionColumn = reactive({
|
||||
width: 300,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '确认',
|
||||
icon: renderIcon(CheckOutlined),
|
||||
type: 'info',
|
||||
onClick: handleSetRead.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '详情',
|
||||
icon: renderIcon(EyeOutlined),
|
||||
type: 'info',
|
||||
onClick: handleInfo.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
function reloadTable(noRefresh = '') {
|
||||
tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
const handleClick = (e) => {
|
||||
activeName.value = e
|
||||
formParams.type = e
|
||||
reloadTable()
|
||||
}
|
||||
|
||||
const handleInfo = async (record) => {
|
||||
messageId.value = record.id
|
||||
editVisible.value = true
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
};
|
||||
|
||||
async function handleDelete(record) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
record.id ? await messageDelete(record.id) : await messageBatchDelete(selectionData.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
})
|
||||
}
|
||||
async function handleSetRead(id) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定标记为已读？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
record.id ? await setRead(record.id) : await setRead(rowKeys.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
})
|
||||
}
|
||||
function onSelectionChange(value) {
|
||||
selectionData.value = value
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user