这段代码中， 新增，修改，删除，的弹出框都
显示在页面正中间 不包括导航栏和
标题栏 <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="pagedTaskTypes"
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="filteredTaskTypes.length"
:page-size="pageSize"
v-model:current-page="currentPage"
/>
</div>
<!-- 统一弹窗组件 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="500px"
@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 taskTypes = ref([]);
const loading = ref(false);
const dialogVisible = ref(false);
const formData = ref({ id: "", sn: "", label: "" });
const formRef = ref(null);
const isEdit = ref(false);
const currentPage = ref(1);
const pageSize = ref(17);
const searchKeyword = ref("");
const filteredTaskTypes = ref([]);
let eventSource = null;
// 计算当前页
显示的数据
const pagedTaskTypes = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return filteredTaskTypes.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) => {
taskTypes.value = JSON.parse(event.data);
handleSearch(); // 数据更新后重新应用搜索过滤
};
eventSource.onerror = (error) => {
console.error("SSE错误:", error);
eventSource.close();
// 尝试重新连接
setTimeout(initSSE, 3000);
};
};
// 处理搜索
const handleSearch = () => {
if (!searchKeyword.value) {
filteredTaskTypes.value = [...taskTypes.value];
return;
}
const keyword = searchKeyword.value.toLowerCase();
filteredTaskTypes.value = taskTypes.value.filter(item =>
item.sn.toLowerCase().includes(keyword) ||
item.label.toLowerCase().includes(keyword)
);
// 重置到第一页
currentPage.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",
});
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();
// 初始加载时设置过滤后的数据为全部数据
filteredTaskTypes.value = [...taskTypes.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>
扫一扫
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
