637 lines
18 KiB
HTML
637 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Stage管理</title>
|
||
<link rel="stylesheet" href="/ui/assets/common.css" />
|
||
<style>
|
||
body {
|
||
font-family: "Microsoft YaHei", sans-serif;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 16px;
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.btn:hover {
|
||
background-color: #40a9ff;
|
||
}
|
||
|
||
.btn-danger {
|
||
background-color: #ff4d4f;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background-color: #ff7875;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.table th {
|
||
background-color: #fafafa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.table tr:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.action-cell {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: white;
|
||
padding: 24px;
|
||
border-radius: 4px;
|
||
width: 400px;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.close {
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.loading {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(255, 255, 255, 0.7);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 2000;
|
||
}
|
||
|
||
.spinner {
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #1890ff;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #999;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1 class="title">Stage管理</h1>
|
||
<button class="btn" id="add-stage-btn">添加Stage</button>
|
||
</div>
|
||
|
||
<div id="stage-list">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Name</th>
|
||
<th>关联树节点</th>
|
||
<!-- <th>描述</th> -->
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="stage-table-body">
|
||
<!-- 数据将通过JavaScript动态加载 -->
|
||
</tbody>
|
||
</table>
|
||
<div id="empty-state" class="empty-state" style="display: none">
|
||
<p>暂无Stage数据，请添加新Stage</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加/编辑Stage的模态框 -->
|
||
<div class="modal" id="stage-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title" id="modal-title">添加Stage</h2>
|
||
<span class="close" id="close-modal">×</span>
|
||
</div>
|
||
<form id="stage-form">
|
||
<input type="hidden" id="stage-id" value="" />
|
||
<div class="form-group">
|
||
<label class="form-label" for="stage-name">名称</label>
|
||
<input
|
||
type="text"
|
||
class="form-input"
|
||
id="stage-name"
|
||
value=""
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="stage-tree-id">关联树节点</label>
|
||
<select class="form-input" id="stage-tree-id" required>
|
||
<option value="">请选择树节点</option>
|
||
<!-- 树节点选项将通过JavaScript动态加载 -->
|
||
</select>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn" id="cancel-btn">取消</button>
|
||
<button type="submit" class="btn" id="save-btn">保存</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认删除的模态框 -->
|
||
<div class="modal" id="confirm-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title">确认删除</h2>
|
||
<span class="close" id="close-confirm-modal">×</span>
|
||
</div>
|
||
<p>
|
||
确定要删除此Stage吗？此操作将同时删除该Stage下的所有图形节点和连接，且不可恢复。
|
||
</p>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn" id="cancel-delete-btn">取消</button>
|
||
<button type="button" class="btn btn-danger" id="confirm-delete-btn">
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载指示器 -->
|
||
<div class="loading" id="loading" style="display: none">
|
||
<div class="spinner"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// 基础URL
|
||
const API_BASE_URL = "http://127.0.0.1:5002/api";
|
||
|
||
// DOM元素
|
||
const stageTableBody = document.getElementById("stage-table-body");
|
||
const emptyState = document.getElementById("empty-state");
|
||
const addStageBtn = document.getElementById("add-stage-btn");
|
||
const stageModal = document.getElementById("stage-modal");
|
||
const modalTitle = document.getElementById("modal-title");
|
||
const closeModalBtn = document.getElementById("close-modal");
|
||
const stageForm = document.getElementById("stage-form");
|
||
const stageIdInput = document.getElementById("stage-id");
|
||
const stageNameInput = document.getElementById("stage-name");
|
||
const stageTreeIdSelect = document.getElementById("stage-tree-id");
|
||
const cancelBtn = document.getElementById("cancel-btn");
|
||
const confirmModal = document.getElementById("confirm-modal");
|
||
const closeConfirmModal = document.getElementById("close-confirm-modal");
|
||
const cancelDeleteBtn = document.getElementById("cancel-delete-btn");
|
||
const confirmDeleteBtn = document.getElementById("confirm-delete-btn");
|
||
const loading = document.getElementById("loading");
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
|
||
// 当前要删除的StageID
|
||
let currentDeleteId = null;
|
||
// 存储树节点数据
|
||
let treeNodes = [];
|
||
let projectId = urlParams.get("project_id");
|
||
// 页面加载时获取Stage列表和树节点列表
|
||
function init() {
|
||
fetchTreeNodes();
|
||
|
||
fetchStages();
|
||
}
|
||
init();
|
||
// 添加Stage按钮点击事件
|
||
addStageBtn.addEventListener("click", () => {
|
||
modalTitle.textContent = "添加Stage";
|
||
stageForm.reset();
|
||
stageIdInput.value = "";
|
||
openModal(stageModal);
|
||
});
|
||
|
||
// 关闭模态框
|
||
closeModalBtn.addEventListener("click", () => closeModal(stageModal));
|
||
cancelBtn.addEventListener("click", () => closeModal(stageModal));
|
||
|
||
// 关闭确认删除模态框
|
||
closeConfirmModal.addEventListener("click", () =>
|
||
closeModal(confirmModal)
|
||
);
|
||
cancelDeleteBtn.addEventListener("click", () => closeModal(confirmModal));
|
||
|
||
// 确认删除
|
||
confirmDeleteBtn.addEventListener("click", deleteStage);
|
||
|
||
// 表单提交
|
||
stageForm.addEventListener("submit", handleFormSubmit);
|
||
// 获取所有Stage
|
||
async function fetchStages() {
|
||
showLoading();
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/stage/${projectId}/`);
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && Array.isArray(result.data)) {
|
||
renderStageList(result.data);
|
||
} else {
|
||
showError("获取Stage列表失败: " + (result.message || "未知错误"));
|
||
}
|
||
} catch (error) {
|
||
console.error("获取Stage列表错误:", error);
|
||
showError("获取Stage列表错误: " + error.message);
|
||
} finally {
|
||
hideLoading();
|
||
}
|
||
}
|
||
async function fetchTreeNodes() {
|
||
showLoading();
|
||
try {
|
||
const response = await fetch(
|
||
`${API_BASE_URL}/project/demand/${projectId}`
|
||
);
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
console.log("fetch nodes", response);
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && Array.isArray(result.data)) {
|
||
treeNodes = result.data;
|
||
populateTreeSelect();
|
||
} else {
|
||
showError("获取树节点列表失败: " + (result.message || "未知错误"));
|
||
}
|
||
} catch (error) {
|
||
console.error("获取树节点列表错误:", error);
|
||
showError("获取树节点列表错误: " + error.message);
|
||
} finally {
|
||
hideLoading();
|
||
}
|
||
}
|
||
// 加载Stage数据用于编辑
|
||
|
||
// 填充树节点选择框
|
||
function populateTreeSelect() {
|
||
stageTreeIdSelect.innerHTML = '<option value="">请选择树节点</option>';
|
||
// 添加虚拟根节点选项
|
||
/* const rootOption = document.createElement("option");
|
||
rootOption.value = "root"; // 使用特殊值"root"表示虚拟根节点
|
||
rootOption.textContent = "所有节点 (虚拟根节点)";
|
||
stageTreeIdSelect.appendChild(rootOption);
|
||
*/
|
||
treeNodes.forEach((node) => {
|
||
const option = document.createElement("option");
|
||
option.value = node.id;
|
||
option.textContent = `${node.name} (Level: ${node.level})`;
|
||
stageTreeIdSelect.appendChild(option);
|
||
});
|
||
}
|
||
function renderStageList(stages) {
|
||
stageTableBody.innerHTML = "";
|
||
|
||
if (stages.length === 0) {
|
||
emptyState.style.display = "block";
|
||
return;
|
||
}
|
||
|
||
emptyState.style.display = "none";
|
||
|
||
stages.forEach((stage) => {
|
||
const row = document.createElement("tr");
|
||
|
||
// 截断ID以便显示
|
||
const shortId = stage.id.substring(0, 8) + "...";
|
||
|
||
// 查找关联的树节点名称
|
||
let treeNodeName = "未关联";
|
||
if (stage.tree_id) {
|
||
if (stage.tree_id === "root") {
|
||
treeNodeName = "所有节点 (虚拟根节点)";
|
||
} else {
|
||
console.log("tree_id: ", stage.tree_id);
|
||
console.log(treeNodes);
|
||
const treeNode = treeNodes.find(
|
||
(node) => node.id === stage.tree_id
|
||
);
|
||
if (treeNode) {
|
||
treeNodeName = `${treeNode.name} (Level: ${treeNode.level})`;
|
||
} else {
|
||
treeNodeName = `ID: ${stage.tree_id.substring(0, 8)}...`;
|
||
}
|
||
}
|
||
}
|
||
|
||
row.innerHTML = `
|
||
<td title="${stage.id}">${shortId}</td>
|
||
<td>${stage.name || "未命名"}</td>
|
||
<td>${treeNodeName}</td>
|
||
<td class="action-cell">
|
||
<button class="btn" data-id="${
|
||
stage.id
|
||
}" data-action="view-graph">查看Graph</button>
|
||
<button class="btn" data-id="${
|
||
stage.id
|
||
}" data-action="edit">编辑</button>
|
||
<button class="btn btn-danger" data-id="${
|
||
stage.id
|
||
}" data-action="delete">删除</button>
|
||
</td>
|
||
`;
|
||
|
||
stageTableBody.appendChild(row);
|
||
});
|
||
|
||
// 添加按钮事件监听
|
||
document.querySelectorAll("[data-action]").forEach((button) => {
|
||
button.addEventListener("click", handleActionClick);
|
||
});
|
||
}
|
||
// 处理操作按钮点击
|
||
async function handleActionClick(event) {
|
||
console.log("action click");
|
||
const action = event.target.getAttribute("data-action");
|
||
const stageId = event.target.getAttribute("data-id");
|
||
|
||
switch (action) {
|
||
case "view-graph":
|
||
// 跳转到图形页面
|
||
window.location.href = `/ui/page/stageGraph.html?id=${stageId}`;
|
||
break;
|
||
|
||
case "edit":
|
||
await loadStageForEdit(stageId);
|
||
break;
|
||
|
||
case "delete":
|
||
openDeleteConfirmation(stageId);
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 加载Stage数据用于编辑
|
||
async function loadStageForEdit(stageId) {
|
||
showLoading();
|
||
try {
|
||
const response = await fetch(
|
||
`${API_BASE_URL}/stage/${project_id}/${stageId}/`
|
||
);
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
console.log("get");
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && result.data) {
|
||
const stage = result.data.stage;
|
||
|
||
// 填充表单
|
||
console.log(stageIdInput);
|
||
stageIdInput.value = stage.id;
|
||
stageNameInput.value = stage.name || "";
|
||
stageTreeIdSelect.value = stage.tree_id || "";
|
||
//stageLevelInput.value = stage.level || 0;
|
||
//stageDescriptionInput.innerHTML = stage.description || "";
|
||
|
||
// 更新模态框标题
|
||
modalTitle.textContent = "编辑Stage";
|
||
|
||
// 打开模态框
|
||
openModal(stageModal);
|
||
} else {
|
||
showError("获取Stage详情失败: " + (result.message || "未知错误"));
|
||
}
|
||
} catch (error) {
|
||
console.error("获取Stage详情错误:", error);
|
||
showError("获取Stage详情错误: " + error.message);
|
||
} finally {
|
||
hideLoading();
|
||
}
|
||
}
|
||
|
||
async function handleFormSubmit(event) {
|
||
event.preventDefault();
|
||
|
||
const stageId = stageIdInput.value;
|
||
const isEdit = !!stageId;
|
||
|
||
const stageData = {
|
||
name: stageNameInput.value,
|
||
project_id: projectId,
|
||
tree_id: stageTreeIdSelect.value,
|
||
};
|
||
|
||
showLoading();
|
||
try {
|
||
const url = isEdit
|
||
? `${API_BASE_URL}/stage/${projectId}/${stageId}/`
|
||
: `${API_BASE_URL}/stage/${projectId}/`;
|
||
|
||
const method = isEdit ? "PATCH" : "POST";
|
||
|
||
const response = await fetch(url, {
|
||
method: method,
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(stageData),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0) {
|
||
showMessage(isEdit ? "Stage更新成功" : "Stage创建成功");
|
||
closeModal(stageModal);
|
||
fetchStages(); // 刷新列表
|
||
} else {
|
||
showError(
|
||
(isEdit ? "更新" : "创建") +
|
||
"Stage失败: " +
|
||
(result.message || "未知错误")
|
||
);
|
||
}
|
||
} catch (error) {
|
||
console.error(isEdit ? "更新Stage错误:" : "创建Stage错误:", error);
|
||
showError((isEdit ? "更新" : "创建") + "Stage错误: " + error.message);
|
||
} finally {
|
||
hideLoading();
|
||
}
|
||
}
|
||
// 打开删除确认对话框
|
||
function openDeleteConfirmation(stageId) {
|
||
currentDeleteId = stageId;
|
||
openModal(confirmModal);
|
||
}
|
||
|
||
// 删除Stage
|
||
async function deleteStage() {
|
||
if (!currentDeleteId) return;
|
||
|
||
showLoading();
|
||
try {
|
||
const response = await fetch(
|
||
`${API_BASE_URL}/stage/${project_id}/${currentDeleteId}/`,
|
||
{
|
||
method: "DELETE",
|
||
}
|
||
);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0) {
|
||
showMessage("Stage删除成功");
|
||
closeModal(confirmModal);
|
||
fetchStages(); // 刷新列表
|
||
} else {
|
||
showError("删除Stage失败: " + (result.message || "未知错误"));
|
||
}
|
||
} catch (error) {
|
||
console.error("删除Stage错误:", error);
|
||
showError("删除Stage错误: " + error.message);
|
||
} finally {
|
||
hideLoading();
|
||
currentDeleteId = null;
|
||
}
|
||
}
|
||
|
||
// 工具函数：打开模态框
|
||
function openModal(modal) {
|
||
modal.style.display = "flex";
|
||
}
|
||
|
||
// 工具函数：关闭模态框
|
||
function closeModal(modal) {
|
||
modal.style.display = "none";
|
||
}
|
||
|
||
// 工具函数：显示加载中
|
||
function showLoading() {
|
||
loading.style.display = "flex";
|
||
}
|
||
|
||
// 工具函数：隐藏加载中
|
||
function hideLoading() {
|
||
loading.style.display = "none";
|
||
}
|
||
|
||
// 工具函数：显示消息
|
||
function showMessage(message) {
|
||
alert(message); // 简单实现，可以替换为更友好的通知
|
||
}
|
||
|
||
// 工具函数：显示错误
|
||
function showError(message) {
|
||
alert("错误: " + message); // 简单实现，可以替换为更友好的通知
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|