finish init again
This commit is contained in:
382
src/view/project/projectNotice.vue
Normal file
382
src/view/project/projectNotice.vue
Normal file
@ -0,0 +1,382 @@
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted} from "vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import myAxios from "../../api/myAxios";
|
||||
import {message} from "ant-design-vue";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '项目通知ID',
|
||||
dataIndex: 'id',
|
||||
width: 20,
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '通知标题',
|
||||
dataIndex: 'notificationTitle',
|
||||
key: 'notificationTitle',
|
||||
width: 30,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '通知内容',
|
||||
dataIndex: 'notificationContent',
|
||||
key: 'notificationContent',
|
||||
width: 150,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '项目ID',
|
||||
dataIndex: 'projectId',
|
||||
key: 'projectId',
|
||||
width: 20,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 70,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
// 修改接口数据类型
|
||||
interface ProjectNotification {
|
||||
id: number;
|
||||
notificationTitle: string;
|
||||
notificationContent: string;
|
||||
projectId: number;
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const projectId = ref<string | number>("");
|
||||
const originalTableData = ref<ProjectNotification[]>([]);
|
||||
const searchedData = ref<ProjectNotification[]>([]); // 存储搜索结果
|
||||
const displayData = ref<ProjectNotification[]>([]); // 实际显示的数据
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
const searchId = ref("");
|
||||
|
||||
// 修改搜索处理方法，不再调用后端接口
|
||||
const handleIdSearch = () => {
|
||||
const value = searchId.value.trim();
|
||||
|
||||
if (!value) {
|
||||
message.warning("请输入有效的项目通知ID");
|
||||
return;
|
||||
}
|
||||
|
||||
const id = Number(value);
|
||||
if (isNaN(id)) {
|
||||
message.warning("ID必须为数字");
|
||||
return;
|
||||
}
|
||||
|
||||
// 在原始数据中过滤
|
||||
const result = originalTableData.value.filter(item => item.id === id);
|
||||
|
||||
if (result.length === 0) {
|
||||
message.warning("未找到匹配的项目通知ID");
|
||||
}
|
||||
|
||||
// 更新显示数据为搜索结果
|
||||
searchedData.value = result;
|
||||
displayData.value = result;
|
||||
};
|
||||
|
||||
|
||||
const reset = () => {
|
||||
searchId.value = "";
|
||||
displayData.value = originalTableData.value;
|
||||
searchedData.value = [];
|
||||
};
|
||||
|
||||
if (typeof route.query.id === "string") {
|
||||
projectId.value = route.query.id;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (projectId.value) {
|
||||
getNotifications(projectId.value);
|
||||
}
|
||||
});
|
||||
const getNotifications = async (id: string | number) => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
loading.value = true;
|
||||
const response:any = await myAxios.post(
|
||||
"/projectNotification/query/pid",
|
||||
{ id },
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
}
|
||||
);
|
||||
console.log(response)
|
||||
if (response.code === 1) {
|
||||
originalTableData.value = response.data;
|
||||
displayData.value = response.data; // 初始显示所有数据
|
||||
} else {
|
||||
error.value = "获取通知列表失败";
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = "数据加载失败，请重试";
|
||||
originalTableData.value = [];
|
||||
displayData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (projectId.value) {
|
||||
getNotifications(projectId.value);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const goToNotificationDetail = (id: number) => {
|
||||
router.push({
|
||||
path: '/noticeDetail',
|
||||
query: { id }
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(getNotifications)
|
||||
|
||||
//删除操作
|
||||
const deleteNotification = async (id: number) => {
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const res: any = await myAxios.post(
|
||||
"/projectNotification/delete",
|
||||
{ id },
|
||||
{
|
||||
headers: {
|
||||
Authorization: storedToken,
|
||||
'AfterScript': 'required-script'
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功');
|
||||
if (projectId.value) {
|
||||
await getNotifications (projectId.value);
|
||||
}
|
||||
} else {
|
||||
message.error(res.message || '删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
message.error('删除操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 从路由参数中获取项目ID
|
||||
if (typeof route.query.id === "string") {
|
||||
projectId.value = route.query.id;
|
||||
}
|
||||
|
||||
// 修改新增按钮的路由跳转，传递projectId到新增页面
|
||||
const goAddProjectNotice = () => {
|
||||
router.push({
|
||||
path: '/addprojectNotice',
|
||||
query: { projectId: projectId.value } // 传递项目ID到新增页面
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/project')
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="ID">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
placeholder="请输入项目通知ID"
|
||||
enter-button
|
||||
@search="handleIdSearch"
|
||||
v-model:value="searchId"
|
||||
type="number"
|
||||
class="custom-search"
|
||||
min="0"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="goAddProjectNotice">新增项目通知</a-button>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 修改表格模板 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="displayData"
|
||||
:scroll="{ x: 1200, y: 450 }"
|
||||
:loading="loading"
|
||||
bordered
|
||||
rowKey="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space :size="8">
|
||||
<a-button size="small" danger @click="deleteNotification(record.id)">
|
||||
删除
|
||||
</a-button>
|
||||
<a-button size="small" @click="goToNotificationDetail(record.id)">
|
||||
编辑
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="table-footer">
|
||||
<a-button @click="goBack" class="back-button">返回</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.error-alert {
|
||||
padding: 1rem;
|
||||
background: #ffe3e3;
|
||||
color: #ff4444;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
background: #ff4444;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
background-color: #fafafa !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
|
||||
/*橙色按钮*/
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
.custom-button.ant-btn-dangerous {
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.custom-button.ant-btn-dangerous:hover,
|
||||
.custom-button.ant-btn-dangerous:focus {
|
||||
background-color: #ff7875;
|
||||
border-color: #ff7875;
|
||||
}
|
||||
|
||||
/* 保持原有的其他样式不变 */
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
/* 保持输入框原有样式不变 */
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
/* 新增表格页脚样式 */
|
||||
.table-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
/* 调整分页器位置 */
|
||||
:deep(.ant-table-pagination.ant-pagination) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user