gitadmin/wms-antdvue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化我的消息

Browse Source
This commit is contained in:
zjl 2024-12-13 13:57:34 +08:00
parent 97e0cd4488
commit f281ce1200
3 changed files with 240 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/dashboard/message/columns.ts
View File

@ -10,21 +10,25 @@ export const columns = [
{ {
title: '消息标题', title: '消息标题',
dataIndex: 'title', dataIndex: 'title',
width: 250,
}, },
{ {
title: '消息状态', title: '消息状态',
dataIndex: 'status', dataIndex: 'status',
width: 100,
customRender({ record }) { customRender({ record }) {
return h('span', record.status === 1 ? '已读' : '未读') return h('span', record.status === 1 ? '已读' : '未读');
}, },
}, },
{ {
title: '创建人', title: '创建人',
dataIndex: 'createUser', dataIndex: 'createUser',
width: 100,
}, },
{ {
title: '创建时间', title: '创建时间',
dataIndex: 'createTime', dataIndex: 'createTime',
width: 100,
}, },
{ {
title: '操作', title: '操作',

154
src/views/dashboard/message/edit.vue
View File

@ -1,13 +1,22 @@
<template> <template>
<a-modal v-model:visible="props.visible" title="消息详情" width="800px" <a-modal
style="top:20px;" @cancel="dialogClose"> v-model:visible="props.visible"
<a-descriptions :column="2" bordered :labelStyle="{width:'110px'}"> title="消息详情"
<a-descriptions-item label="消息标题:">{{formData.title}}</a-descriptions-item> width="800px"
<a-descriptions-item label="消息类型:">{{getTyepText(formData.type)}}</a-descriptions-item> style="top: 20px"
<a-descriptions-item label="业务类型:">{{formData.bizType==1?'订单':'其他'}}</a-descriptions-item> @cancel="dialogClose"
<a-descriptions-item label="消息状态:">{{formData.status==1?'已读':'未读'}}</a-descriptions-item> >
<a-descriptions-item label="消息内容:">{{formData.content}}</a-descriptions-item> <a-descriptions :column="2" bordered :labelStyle="{ width: '110px' }">
</a-descriptions> <a-descriptions-item label="消息标题:">{{ formData.title }}</a-descriptions-item>
<a-descriptions-item label="消息类型:">{{ getTyepText(formData.type) }}</a-descriptions-item>
<a-descriptions-item label="业务类型:">{{
formData.bizType == 1 ? '订单' : '其他'
}}</a-descriptions-item>
<a-descriptions-item label="消息状态:">{{
formData.status == 1 ? '已读' : '未读'
}}</a-descriptions-item>
<a-descriptions-item label="消息内容:">{{ formData.content }}</a-descriptions-item>
</a-descriptions>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<a-button @click="dialogClose">关闭</a-button> <a-button @click="dialogClose">关闭</a-button>
@ -16,68 +25,87 @@
</a-modal> </a-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {getMessageDetail} from "@/api/dashboard/message"; import { getMessageDetail } from '@/api/dashboard/message';
import {onMounted, reactive} from "vue"; import { onMounted, reactive } from 'vue';
const emit = defineEmits(["success", "update:visible"]); const emit = defineEmits(['success', 'update:visible']);
const formData = reactive({
id: "",
title: "",
type:'',
bizType:'',
status:'',
content:''
});
const props = defineProps({ /**
visible: { * 定义表单参数
type: Boolean, */
required: true, const formData = reactive({
default: false id: '',
}, title: '',
messageId: { type: '',
type: Number, bizType: '',
required: true, status: '',
default: 0 content: '',
} });
});
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
messageId: {
type: Number,
required: true,
default: 0,
},
});
const dialogClose = () => { /**
emit("update:visible", false); * 关闭弹窗
}; */
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) { const setFormData = async () => {
//@ts-ignore const data = await getMessageDetail(props.messageId);
formData[key] = data[key]; for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
} }
} };
};
const getTyepText =(type)=>{ /**
let typeText = '' * 获取类型文本描述
* @param type 类型
*/
const getTyepText = (type) => {
let typeText = '';
switch (type) { switch (type) {
case 1: case 1:
typeText='系统通知' typeText = '系统通知';
break; break;
case 2: case 2:
typeText='用户私信 ' typeText = '用户私信 ';
break; break;
case 3: case 3:
typeText='代办事项' typeText = '代办事项';
break; break;
default: default:
break; break;
} }
return typeText return typeText;
} };
onMounted(() => {
if (props.messageId) {
setFormData();
}
});
/**
* 钩子函数
*/
onMounted(() => {
if (props.messageId) {
setFormData();
}
});
</script> </script>

237
src/views/dashboard/message/index.vue
View File

@ -2,10 +2,14 @@
<PageWrapper> <PageWrapper>
<a-card class="proCard tabsCard"> <a-card class="proCard tabsCard">
<a-tabs v-model:activeKey="activeName" @change="handleClick"> <a-tabs v-model:activeKey="activeName" @change="handleClick">
<a-tab-pane :key="item.value" :tab="item.configName" v-for="(item, index) in messageTypeList"> <a-tab-pane
:key="item.value"
:tab="item.configName"
v-for="(item, index) in messageTypeList"
>
<template #tab> <template #tab>
<a-badge :count="item.number?item.number:''" class="item"> <a-badge :count="item.number ? item.number : ''" class="item">
<span class="t1">{{item.name}}</span> <span class="t1">{{ item.name }}</span>
</a-badge> </a-badge>
</template> </template>
</a-tab-pane> </a-tab-pane>
@ -15,138 +19,185 @@
:request="loadDataTable" :request="loadDataTable"
:row-key="(row) => row.id" :row-key="(row) => row.id"
ref="tableRef" ref="tableRef"
:row-selection="{onChange: onSelectionChange}" :row-selection="{ onChange: onSelectionChange }"
> >
<template #tableTitle> <template #tableTitle>
<a-space> <a-space>
<a-button type="primary" @click="handleSetRead()"> <a-button type="primary" @click="handleSetRead()"> 批量确认 </a-button>
批量确认
</a-button>
<a-button type="danger" @click="handleDelete()" :disabled="!selectionData.length"> <a-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
<template #icon> <template #icon>
<DeleteOutlined /> <DeleteOutlined />
</template> </template>
删除 删除
</a-button> </a-button>
</a-space> </a-space>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a-space> <a-space>
<a-button type="primary" @click="handleSetRead(record.id)"> <a-button type="primary" @click="handleSetRead(record.id)">
<template #icon><CheckOutlined /></template> <template #icon><CheckOutlined /></template>
确认 确认
</a-button> </a-button>
<a-button type="primary" @click="handleInfo(record.id)"> <a-button type="primary" @click="handleDetail(record.id)">
<template #icon><EyeOutlined /></template> <template #icon><EyeOutlined /></template>
详情 详情
</a-button> </a-button>
<a-button type="primary" danger @click="handleDelete(record.id)"> <a-button type="primary" danger @click="handleDelete(record.id)">
<template #icon><DeleteOutlined /></template> <template #icon><DeleteOutlined /></template>
删除 删除
</a-button> </a-button>
</a-space> </a-space>
</template>
</template> </template>
</template>
</BasicTable> </BasicTable>
</a-card> </a-card>
<editDialog <editDialog
v-if="editVisible" v-if="editVisible"
:messageId="messageId" :messageId="messageId"
v-model:visible="editVisible" v-model:visible="editVisible"
@success="reloadTable('noRefresh')" @success="reloadTable('noRefresh')"
> />
</editDialog>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, h,nextTick,defineAsyncComponent,onMounted } from 'vue'; import { reactive, ref, h, nextTick, defineAsyncComponent, onMounted } from 'vue';
import {EyeOutlined,DeleteOutlined,CheckOutlined} from '@ant-design/icons-vue'; import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { getMessageProfile,messageDelete,messageBatchDelete,setRead } from '@/api/dashboard/message'; import {
getMessageProfile,
messageDelete,
messageBatchDelete,
setRead,
} from '@/api/dashboard/message';
import { columns } from './columns'; import { columns } from './columns';
import { Modal,message } from 'ant-design-vue'; import { Modal, message } from 'ant-design-vue';
const editDialog = defineAsyncComponent(() =>
import('./edit.vue') /**
) * 定义参数
const messageId =ref(0) */
const docHeight = ref(500) const editDialog = defineAsyncComponent(() => import('./edit.vue'));
const activeName = ref(1) const messageId = ref(0);
const messageTypeList = ref([ const docHeight = ref(500);
{ const activeName = ref(1);
name:'系统通知', const editVisible = ref(false);
value:1 const selectionData = ref([]);
},
{
name:'用户私信',
value:2
},
{
name:'代办事项',
value:3
},
])
const editVisible=ref(false)
const selectionData = ref([])
const tableRef = ref(); const tableRef = ref();
/**
* 定义查询参数
*/
const formParams = reactive({ const formParams = reactive({
type:1 type: 1,
}); });
/**
* 定义数据源
*/
const messageTypeList = ref([
{
name: '系统通知',
value: 1,
},
{
name: '用户私信',
value: 2,
},
{
name: '代办事项',
value: 3,
},
]);
/**
* 加载数据列表
* @param res 参数
*/
const loadDataTable = async (res: any) => { const loadDataTable = async (res: any) => {
const result = await getMessageProfile({ ...formParams, ...res }); const result = await getMessageProfile({ ...formParams, ...res });
let item = messageTypeList.value.find((item,index)=>item.value==activeName.value) let item = messageTypeList.value.find((item, index) => item.value == activeName.value);
item.number = result.number item.number = result.number;
return result; return result;
}; };
function reloadTable(noRefresh='') { /**
tableRef.value.reload(noRefresh?{}:{pageNo:1}); * 刷新数据列表
* @param noRefresh 参数
*/
function reloadTable(noRefresh = '') {
tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
} }
const handleClick = (e)=>{
activeName.value = e
formParams.type = e
reloadTable()
}
const handleInfo = async (id) => { /**
messageId.value=id * 执行点击事件
await nextTick(); * @param e 参数
editVisible.value=true */
}; const handleClick = (e) => {
activeName.value = e;
formParams.type = e;
reloadTable();
};
async function handleDelete(id) { /**
* 执行查看详情
* @param id 参数
*/
const handleDetail = async (id) => {
messageId.value = id;
await nextTick();
editVisible.value = true;
};
/**
* 执行删除
* @param id 参数
*/
async function handleDelete(id) {
Modal.confirm({ Modal.confirm({
title: '提示', title: '提示',
content: "确定要删除？", content: '确定要删除？',
onOk: async () => { onOk: async () => {
id? await messageDelete(id):await messageBatchDelete(selectionData.value); id ? await messageDelete(id) : await messageBatchDelete(selectionData.value);
message.success("删除成功"); message.success('删除成功');
reloadTable() reloadTable();
} },
}); });
} }
async function handleSetRead(id) {
/**
* 执行已读
* @param id 参数
*/
async function handleSetRead(id) {
Modal.confirm({ Modal.confirm({
title: '提示', title: '提示',
content: "确定标记为已读？", content: '确定标记为已读？',
onOk: async () => { onOk: async () => {
id? await setRead(id):await setRead(selectionData.value); id ? await setRead(id) : await setRead(selectionData.value);
message.success("标记成功"); message.success('标记成功');
reloadTable() reloadTable();
} },
}); });
}
function onSelectionChange(value){
selectionData.value = value
} }
/**
* 数据行选中事件
* @param value 参数
*/
function onSelectionChange(value) {
selectionData.value = value;
}
/**
* 钩子函数
*/
onMounted(() => { onMounted(() => {
docHeight.value =document.body.clientHeight - 160 docHeight.value = document.body.clientHeight - 160;
}) });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.ant-badge-count){ :deep(.ant-badge-count) {
right: -13px; right: -13px;
} }
</style> </style>