108 lines
3.4 KiB
Vue
108 lines
3.4 KiB
Vue
|
||
<template>
|
||
<div class="flex space-x-12">
|
||
<div>
|
||
<a-menu
|
||
id="dddddd"
|
||
v-model:openKeys="openKeys"
|
||
v-model:selectedKeys="selectedKeys"
|
||
:items="items"
|
||
mode="inline"
|
||
style="width: 256px"
|
||
@click="handleClick"
|
||
></a-menu>
|
||
</div>
|
||
<div class="flex flex-col space-y-8">
|
||
<div class="flex">
|
||
<div class="mt-4 flex space-x-5">
|
||
<div class="inline-flex rounded-md shadow-sm">
|
||
<a aria-current="page" class="w-16 flex justify-center items-center text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-500 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700" href="#">
|
||
全部
|
||
</a>
|
||
<a class="w-16 flex justify-center items-center text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-500 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 " href="#">
|
||
未读
|
||
</a>
|
||
</div>
|
||
<a-input class="h-8 w-56 border-gray-300 rounded-md" placeholder="请输入要查询的消息关键字" />
|
||
</div>
|
||
</div>
|
||
<div class="w-[1000px]">
|
||
<table class="w-full text-sm text-left rtl:text-right text-gray-500">
|
||
<tbody>
|
||
<tr v-for="(message, index) in messages" :key="index" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||
<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
|
||
{{ message.title }}
|
||
</th>
|
||
<td class="px-6 py-4">
|
||
{{ message.text }}
|
||
</td>
|
||
<td class="px-6 py-4 flex justify-end">
|
||
<a-button class="flex justify-center items-center" type="link" @click="deleteMessage(message.id)"><DeleteOutlined />删除</a-button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
<script setup>
|
||
import {onMounted, reactive, ref, watch} from 'vue';
|
||
import {DeleteOutlined} from '@ant-design/icons-vue';
|
||
import request from "@/js/request.js";
|
||
|
||
const selectedKeys = ref(['1']);
|
||
const openKeys = ref(['sub1']);
|
||
const token = window.localStorage.getItem('token')
|
||
const messages = ref([]); // 使用ref创建响应式数据
|
||
|
||
|
||
onMounted(() =>{
|
||
/*requests.userGetProfile(token).then((res)=>{
|
||
const data = {
|
||
"uid": res.data.data.id,
|
||
"begin": "",
|
||
"end": "",
|
||
"page": "",
|
||
"pageSize": ""
|
||
}*/
|
||
|
||
request.messageGet(token).then((res) => {
|
||
messages.value = res.data.data.rows;
|
||
})
|
||
/* });*/
|
||
})
|
||
|
||
|
||
const deleteMessage = (id) => {
|
||
// 这里调用后端接口删除消息
|
||
console.log("Deleting message with id:", id);
|
||
// 假设删除成功，从messages中移除这条消息
|
||
messages.value = messages.value.filter(message => message.id !== id);
|
||
};
|
||
|
||
|
||
|
||
function getItem(label, key, icon, children, type) {
|
||
return {
|
||
key,
|
||
icon,
|
||
children,
|
||
label,
|
||
type,
|
||
};
|
||
}
|
||
const items = reactive([
|
||
getItem('消息盒子', '1'),
|
||
getItem('保存的消息', '2'),
|
||
getItem('项目消息', '3'),
|
||
getItem('系统消息', '4'),
|
||
]);
|
||
const handleClick = e => {
|
||
console.log('click', e);
|
||
};
|
||
watch(openKeys, val => {
|
||
console.log('openKeys', val);
|
||
});
|
||
</script> |