将其中不用的js，删除，返还给我全部的代码 <template>
<div class="container">
<div class="header">
<div class="left-section">
<el-button type="primary" @click="openAddDialog">新增</el-button>
</div>
<div class="right-section">
<el-input
v-model="searchKeyword"
placeholder="输入关键字"
clearable
style="width: 240px"
@input="handleSearch"
>
<template #prefix>
<el-icon><search /></el-icon>
</template>
</el-input>
</div>
</div>
<el-table
:data="
pagedTask
Types"
border
style="width: 100%"
v-loading="loading"
>
<el-table-column prop="sn" label="类型编码" />
<el-table-column prop="label" label="类型描述" />
<el-table-column label="操作" width="180">
<template #default="{ row }">
<el-button size="small" type="primary" @click="openEditDialog(row)"
>编辑</el-button
>
<el-button
size="small"
type="danger"
@click="deleteTaskType(row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 - 居中显示 -->
<div class="pagination-center">
<el-pagination
background
layout="total, prev,
pager, next"
:total="filteredTask
Types.length"
:
page-size="
pageSize"
v-model:current-
page="current
Page"
/>
</div>
<!-- 统一弹窗组件 - 添加 align-center 属性 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="500px"
align-center
@closed="resetForm"
>
<el-form
:model="formData"
:rules="formRules"
ref="formRef"
label-width="80px"
>
<el-form-item label="SN" prop="sn">
<el-input v-model="formData.sn" placeholder="输入SN（可选）" />
</el-form-item>
<el-form-item label="Label" prop="label">
<el-input v-model="formData.label" placeholder="输入Label（可选）" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">保存</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from '@element-plus/icons-vue';
// 响应式数据
const task
Types = ref([]);
const loading = ref(false);
const dialogVisible = ref(false);
const formData = ref({ id: "", sn: "", label: "" });
const formRef = ref(null);
const isEdit = ref(false);
const current
Page = ref(1);
const
pageSize = ref(17);
const searchKeyword = ref("");
const filteredTask
Types = ref([]);
let eventSource = null;
// 计算当前页显示的数据
const
pagedTask
Types = computed(() => {
const start = (current
Page.value - 1) *
pageSize.value;
const end = start +
pageSize.value;
return filteredTask
Types.value.slice(start, end);
});
// 计算弹窗标题
const dialogTitle = computed(() =>
isEdit.value ? "编辑任务类型" : "添加任务类型"
);
// 修改后的表单验证规则（移除了required规则）
const formRules = ref({
sn: [], // 空数组表示无验证规则
label: [] // 空数组表示无验证规则
});
// 初始化SSE连接
const initSSE = () => {
eventSource = new EventSource("http://127.0.0.1:8888/sse/task-
types");
eventSource.onmessage = (event) => {
task
Types.value = JSON.parse(event.data);
handleSearch(); // 数据更新后重新应用搜索过滤
};
eventSource.on
error = (
error) => {
console.
error("SSE错误:",
error);
eventSource.close();
// 尝试重新连接
setTimeout(initSSE, 3000);
};
};
// 处理搜索
const handleSearch = () => {
if (!searchKeyword.value) {
filteredTask
Types.value = [...task
Types.value];
return;
}
const keyword = searchKeyword.value.toLowerCase();
filteredTask
Types.value = task
Types.value.filter(item =>
item.sn.toLowerCase().includes(keyword) ||
item.label.toLowerCase().includes(keyword)
);
// 重置到第一页
current
Page.value = 1;
};
// 打开添加弹窗 - 添加时间戳随机数
const openAddDialog = () => {
isEdit.value = false;
formData.value = {
sn: Date.now().toString(), // 使用时间戳生成随机SN
label: ""
};
dialogVisible.value = true;
};
// 打开编辑弹窗
const openEditDialog = (task) => {
isEdit.value = true;
formData.value = { ...task };
dialogVisible.value = true;
};
// 提交表单
const submitForm = async () => {
try {
await formRef.value.validate();
if (isEdit.value) {
await updateTaskType();
} else {
await addTaskType();
}
dialogVisible.value = false;
} catch (
error) {
console.
error("表单提交错误:",
error);
}
};
// 添加新类型
const addTaskType = async () => {
try {
const response = await fetch("http://127.0.0.1:8888/task-
types", {
method: "
POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData.value),
});
if (response.ok) {
ElMessage.success("添加成功");
} else {
throw new
Error("添加失败");
}
} catch (
error) {
ElMessage.
error(
error.message || "请求失败");
throw
error;
}
};
// 更新类型
const updateTaskType = async () => {
try {
const response = await fetch(
`http://127.0.0.1:8888/task-
types/${formData.value.id}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
sn: formData.value.sn,
label: formData.value.label,
}),
}
);
if (response.ok) {
ElMessage.success("更新成功");
} else {
throw new
Error("更新失败");
}
} catch (
error) {
ElMessage.
error(
error.message || "请求失败");
throw
error;
}
};
// 删除类型 - 添加自定义类名实现居中
const deleteTaskType = async (id) => {
try {
await ElMessageBox.confirm("确定删除此任务类型？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
customClass: 'centered-message-box' // 添加自定义类名
});
const response = await fetch(`http://127.0.0.1:8888/task-
types/${id}`, {
method: "DELETE",
});
if (response.ok) {
ElMessage.success("删除成功");
} else {
throw new
Error("删除失败");
}
} catch (
error) {
if (
error !== "cancel") {
ElMessage.
error(
error.message || "删除失败");
}
}
};
// 重置表单
const resetForm = () => {
formRef.value?.resetFields();
};
// 生命周期钩子
onMounted(() => {
initSSE();
// 初始加载时设置过滤后的数据为全部数据
filteredTask
Types.value = [...task
Types.value];
});
onBeforeUnmount(() => {
if (eventSource) eventSource.close();
});
</script>
<style scoped>
.container {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.left-section {
display: flex;
align-items: center;
}
.header h2 {
margin: 0;
margin-right: 15px;
}
.right-section {
display: flex;
align-items: center;
}
.el-table {
flex: 1;
overflow: hidden;
}
/* 分页居中样式 */
.pagination-center {
display: flex;
justify-content: center; /* 水平居中 */
margin-top: 15px;
}
/* 调整分页组件样式 */
.el-pagination {
--el-pagination-bg-color: #fff;
--el-pagination-button-disabled-bg-color: #fff;
--el-pagination-button-bg-color: #fff;
--el-pagination-hover-color: #409eff;
--el-pagination-button-radius: 4px;
}
/* 分页按钮样式优化 */
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-
pager li {
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 4px;
border-radius: 4px;
}
/* 当前页样式 */
.el-
pager li.is-active {
background-color: #409eff;
color: #fff;
font-weight: bold;
}
</style>
<!-- 添加全局样式确保所有弹窗居中 -->
<style>
/* 主弹窗居中 */
.el-dialog {
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 !important;
}
/* 删除确认框居中 */
.centered-message-box {
position: fixed;
top: 30% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
}
</style>
博客指出在WordPress中注册新文章类型后写文章打开报404错误的问题。原因是虽注册了新帖子类型，但WordPress不知如何处理。解决办法是到设置 -> 固定链接，重新点击保存，再打开自定义文章类型的文章。
扫一扫
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
