我的消息
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