755 lines
20 KiB
HTML
755 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>文档管理</title>
|
||
<style>
|
||
body {
|
||
font-family: "Microsoft YaHei", sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.header h1 {
|
||
margin: 0;
|
||
color: #333;
|
||
}
|
||
|
||
.breadcrumb {
|
||
margin-bottom: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: #1890ff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.breadcrumb a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.control-panel {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.search-box {
|
||
flex-grow: 1;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
input[type="text"] {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
button {
|
||
padding: 8px 16px;
|
||
margin-right: 8px;
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: #40a9ff;
|
||
}
|
||
|
||
button.danger {
|
||
background-color: #ff4d4f;
|
||
}
|
||
|
||
button.danger:hover {
|
||
background-color: #ff7875;
|
||
}
|
||
|
||
button.secondary {
|
||
background-color: #52c41a;
|
||
}
|
||
|
||
button.secondary:hover {
|
||
background-color: #73d13d;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
th {
|
||
background-color: #fafafa;
|
||
font-weight: 600;
|
||
}
|
||
|
||
tr:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-buttons button {
|
||
padding: 4px 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: #fff;
|
||
margin: 10% auto;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
width: 50%;
|
||
max-width: 500px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.modal-header h2 {
|
||
margin: 0;
|
||
}
|
||
|
||
.close {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group textarea,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 100px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.modal-footer {
|
||
margin-top: 20px;
|
||
text-align: right;
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
color: #999;
|
||
}
|
||
|
||
.empty-state p {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.file-upload {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.file-upload input[type="file"] {
|
||
display: none;
|
||
}
|
||
|
||
.file-upload label {
|
||
display: inline-block;
|
||
padding: 8px 16px;
|
||
background-color: #f0f0f0;
|
||
color: #333;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.file-upload label:hover {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
.file-name {
|
||
margin-left: 10px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="breadcrumb">
|
||
<a href="project_list.html">项目列表</a> >
|
||
<span id="project-name">文档管理</span>
|
||
</div>
|
||
|
||
<div class="header">
|
||
<h1>文档管理</h1>
|
||
<div>
|
||
<button id="back-btn" style="display: none">返回项目列表</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-panel">
|
||
<div class="search-box">
|
||
<input type="text" id="search-input" placeholder="搜索文档..." />
|
||
</div>
|
||
<button id="add-doc-btn">添加文档</button>
|
||
<button id="refresh-btn" style="display: none">刷新</button>
|
||
</div>
|
||
|
||
<div id="docs-table-container">
|
||
<table id="docs-table">
|
||
<thead>
|
||
<tr>
|
||
<th>文档名称</th>
|
||
<th>类型</th>
|
||
<th>创建时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="docs-list">
|
||
<!-- 文档列表将通过JavaScript动态生成 -->
|
||
</tbody>
|
||
</table>
|
||
|
||
<div id="empty-state" class="empty-state" style="display: none">
|
||
<p>暂无文档数据</p>
|
||
<button id="create-first-doc-btn">创建第一个文档</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加/编辑文档的模态框 -->
|
||
<div id="doc-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modal-title">添加文档</h2>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="doc-form">
|
||
<input type="hidden" id="doc-id" />
|
||
<div class="form-group">
|
||
<label for="doc-name">文档名称</label>
|
||
<input type="text" id="doc-name" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="doc-type">文档类型</label>
|
||
<select id="doc-type">
|
||
<option value="requirement">需求文档</option>
|
||
<option value="api">API文档</option>
|
||
|
||
<option value="design">设计文档</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="doc-description">文档描述</label>
|
||
<textarea id="doc-description"></textarea>
|
||
</div>
|
||
<div class="form-group file-upload">
|
||
<label for="doc-file">上传文件</label>
|
||
<input type="file" id="doc-file" />
|
||
<span class="file-name" id="file-name">未选择文件</span>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="cancel-btn">取消</button>
|
||
<button id="save-doc-btn">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认删除的模态框 -->
|
||
<div id="confirm-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>确认删除</h2>
|
||
<span class="close">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>确定要删除这个文档吗？此操作不可撤销。</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="cancel-delete-btn">取消</button>
|
||
<button id="confirm-delete-btn" class="danger">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 全局变量
|
||
let docs = [];
|
||
let currentDocId = null;
|
||
let projectId = null;
|
||
let projectName = "";
|
||
|
||
// DOM元素
|
||
const docsListEl = document.getElementById("docs-list");
|
||
const emptyStateEl = document.getElementById("empty-state");
|
||
const searchInputEl = document.getElementById("search-input");
|
||
const docModal = document.getElementById("doc-modal");
|
||
const confirmModal = document.getElementById("confirm-modal");
|
||
const modalTitle = document.getElementById("modal-title");
|
||
const docForm = document.getElementById("doc-form");
|
||
const docIdInput = document.getElementById("doc-id");
|
||
const docNameInput = document.getElementById("doc-name");
|
||
const docTypeInput = document.getElementById("doc-type");
|
||
const docDescInput = document.getElementById("doc-description");
|
||
const docFileInput = document.getElementById("doc-file");
|
||
const fileNameEl = document.getElementById("file-name");
|
||
const projectNameEl = document.getElementById("project-name");
|
||
|
||
// 按钮
|
||
const backBtn = document.getElementById("back-btn");
|
||
const addDocBtn = document.getElementById("add-doc-btn");
|
||
const refreshBtn = document.getElementById("refresh-btn");
|
||
const createFirstDocBtn = document.getElementById("create-first-doc-btn");
|
||
const saveDocBtn = document.getElementById("save-doc-btn");
|
||
const cancelBtn = document.getElementById("cancel-btn");
|
||
const confirmDeleteBtn = document.getElementById("confirm-delete-btn");
|
||
const cancelDeleteBtn = document.getElementById("cancel-delete-btn");
|
||
const closeButtons = document.querySelectorAll(".close");
|
||
|
||
// 初始化
|
||
// 初始化
|
||
init();
|
||
function init() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
projectId = urlParams.get("project_id");
|
||
|
||
if (!projectId) {
|
||
alert("未指定项目ID，将返回项目列表");
|
||
window.location.href = "project_list.html";
|
||
return;
|
||
}
|
||
|
||
// 获取项目信息
|
||
fetchProjectInfo();
|
||
|
||
// 获取文档列表
|
||
fetchDocs();
|
||
|
||
// 设置事件监听器
|
||
setupEventListeners();
|
||
}
|
||
|
||
// 设置事件监听器
|
||
function setupEventListeners() {
|
||
// 返回按钮
|
||
backBtn.addEventListener("click", () => {
|
||
window.location.href = "project_list.html";
|
||
});
|
||
|
||
// 添加文档按钮
|
||
addDocBtn.addEventListener("click", () => openDocModal());
|
||
|
||
// 刷新按钮
|
||
refreshBtn.addEventListener("click", fetchDocs);
|
||
|
||
// 创建第一个文档按钮
|
||
createFirstDocBtn.addEventListener("click", () => openDocModal());
|
||
|
||
// 保存文档按钮
|
||
saveDocBtn.addEventListener("click", saveDoc);
|
||
|
||
// 取消按钮
|
||
cancelBtn.addEventListener("click", closeDocModal);
|
||
|
||
// 确认删除按钮
|
||
confirmDeleteBtn.addEventListener("click", deleteDoc);
|
||
|
||
// 取消删除按钮
|
||
cancelDeleteBtn.addEventListener("click", closeConfirmModal);
|
||
|
||
// 关闭按钮
|
||
closeButtons.forEach((button) => {
|
||
button.addEventListener("click", function () {
|
||
docModal.style.display = "none";
|
||
confirmModal.style.display = "none";
|
||
});
|
||
});
|
||
|
||
// 搜索输入框
|
||
searchInputEl.addEventListener("input", filterDocs);
|
||
|
||
// 文件选择监听
|
||
docFileInput.addEventListener("change", function () {
|
||
if (this.files.length > 0) {
|
||
fileNameEl.textContent = this.files[0].name;
|
||
if (docNameInput.value === "") {
|
||
console.log("changeName");
|
||
docNameInput.value = this.files[0].name;
|
||
}
|
||
} else {
|
||
fileNameEl.textContent = "未选择文件";
|
||
}
|
||
});
|
||
|
||
// 点击模态框外部关闭
|
||
window.addEventListener("click", function (event) {
|
||
if (event.target === docModal) {
|
||
closeDocModal();
|
||
}
|
||
if (event.target === confirmModal) {
|
||
closeConfirmModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 获取项目信息
|
||
async function fetchProjectInfo() {
|
||
try {
|
||
const response = await fetch(
|
||
`http://127.0.0.1:5002/api/project/${projectId}`
|
||
);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && result.data) {
|
||
projectName = result.data.name || "未命名项目";
|
||
projectNameEl.textContent = projectName;
|
||
document.title = `${projectName} - 文档管理`;
|
||
} else {
|
||
console.error("获取项目信息失败:", result.message || "未知错误");
|
||
}
|
||
} catch (error) {
|
||
console.error("获取项目信息错误:", error);
|
||
}
|
||
}
|
||
|
||
// 获取文档列表
|
||
async function fetchDocs() {
|
||
try {
|
||
const response = await fetch(
|
||
`http://127.0.0.1:5002/api/doc/${projectId}/`
|
||
);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && Array.isArray(result.data)) {
|
||
docs = result.data.sort((a, b) => {
|
||
return new Date(b.created_at) - new Date(a.created_at);
|
||
});
|
||
//console.log("docs", docs)
|
||
renderDocs(docs);
|
||
} else {
|
||
console.error("获取文档失败:", result.message || "未知错误");
|
||
showEmptyState(true, "加载失败，请重试");
|
||
}
|
||
} catch (error) {
|
||
console.error("获取文档错误:", error);
|
||
showEmptyState(true, "加载失败，请重试");
|
||
}
|
||
}
|
||
|
||
// 渲染文档列表
|
||
function renderDocs(docsToRender) {
|
||
if (!docsToRender || docsToRender.length === 0) {
|
||
showEmptyState(true);
|
||
return;
|
||
}
|
||
|
||
showEmptyState(false);
|
||
|
||
docsListEl.innerHTML = "";
|
||
|
||
docsToRender.forEach((doc) => {
|
||
const row = document.createElement("tr");
|
||
|
||
// 格式化日期
|
||
const createdAt = new Date(doc.created_at);
|
||
const formattedDate = createdAt.toLocaleString("zh-CN", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
|
||
// 格式化文档类型
|
||
let docType = "其他";
|
||
switch (doc.type) {
|
||
case "api":
|
||
docType = "API文档";
|
||
break;
|
||
case "requirement":
|
||
docType = "需求文档";
|
||
break;
|
||
case "design":
|
||
docType = "设计文档";
|
||
break;
|
||
}
|
||
|
||
row.innerHTML = `
|
||
<td>${doc.name}</td>
|
||
<td>${docType}</td>
|
||
<td>${formattedDate}</td>
|
||
<td class="action-buttons">
|
||
<button class="view-demands-btn secondary" data-id="${doc.id}">查看需求</button>
|
||
<button class="edit-btn" data-id="${doc.id}">编辑</button>
|
||
<button class="delete-btn danger" data-id="${doc.id}">删除</button>
|
||
</td>
|
||
`;
|
||
|
||
docsListEl.appendChild(row);
|
||
});
|
||
|
||
// 添加按钮事件
|
||
document.querySelectorAll(".view-demands-btn").forEach((btn) => {
|
||
btn.addEventListener("click", function () {
|
||
const docId = this.getAttribute("data-id");
|
||
window.location.href = `demand.html?doc_id=${docId}`;
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll(".edit-btn").forEach((btn) => {
|
||
btn.addEventListener("click", function () {
|
||
const docId = this.getAttribute("data-id");
|
||
const doc = docs.find((d) => d.id === docId);
|
||
openDocModal(doc);
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll(".delete-btn").forEach((btn) => {
|
||
btn.addEventListener("click", function () {
|
||
const docId = this.getAttribute("data-id");
|
||
openConfirmModal(docId);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 显示/隐藏空状态
|
||
function showEmptyState(show, message = "暂无文档数据") {
|
||
if (show) {
|
||
document.getElementById("docs-table").style.display = "none";
|
||
emptyStateEl.style.display = "block";
|
||
emptyStateEl.querySelector("p").textContent = message;
|
||
} else {
|
||
document.getElementById("docs-table").style.display = "table";
|
||
emptyStateEl.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// 过滤文档
|
||
function filterDocs() {
|
||
const searchTerm = searchInputEl.value.toLowerCase();
|
||
|
||
if (!searchTerm) {
|
||
renderDocs(docs);
|
||
return;
|
||
}
|
||
|
||
const filteredDocs = docs.filter(
|
||
(doc) =>
|
||
doc.name.toLowerCase().includes(searchTerm) ||
|
||
(doc.description &&
|
||
doc.description.toLowerCase().includes(searchTerm))
|
||
);
|
||
|
||
renderDocs(filteredDocs);
|
||
}
|
||
|
||
// 打开文档模态框
|
||
function openDocModal(doc = null) {
|
||
modalTitle.textContent = doc ? "编辑文档" : "添加文档";
|
||
|
||
if (doc) {
|
||
docIdInput.value = doc.id;
|
||
docNameInput.value = doc.name || "";
|
||
docTypeInput.value = doc.type || "other";
|
||
docDescInput.value = doc.description || "";
|
||
fileNameEl.textContent = "保持原文件";
|
||
} else {
|
||
docForm.reset();
|
||
docIdInput.value = "";
|
||
fileNameEl.textContent = "未选择文件";
|
||
}
|
||
|
||
docModal.style.display = "block";
|
||
}
|
||
|
||
// 关闭文档模态框
|
||
function closeDocModal() {
|
||
docModal.style.display = "none";
|
||
docForm.reset();
|
||
fileNameEl.textContent = "未选择文件";
|
||
}
|
||
|
||
// 打开确认删除模态框
|
||
function openConfirmModal(docId) {
|
||
currentDocId = docId;
|
||
confirmModal.style.display = "block";
|
||
}
|
||
|
||
// 关闭确认删除模态框
|
||
function closeConfirmModal() {
|
||
confirmModal.style.display = "none";
|
||
currentDocId = null;
|
||
}
|
||
|
||
// 保存文档
|
||
async function saveDoc() {
|
||
const docId = docIdInput.value;
|
||
const name = docNameInput.value.trim();
|
||
const type = docTypeInput.value;
|
||
const description = docDescInput.value.trim();
|
||
|
||
if (!name) {
|
||
alert("请输入文档名称");
|
||
return;
|
||
}
|
||
|
||
// 创建FormData对象用于文件上传
|
||
const formData = new FormData();
|
||
formData.append("name", name);
|
||
formData.append("type", type);
|
||
formData.append("description", description);
|
||
formData.append("project_id", projectId);
|
||
|
||
// 如果有选择文件，添加到FormData
|
||
if (docFileInput.files.length > 0) {
|
||
formData.append("file", docFileInput.files[0]);
|
||
}
|
||
|
||
try {
|
||
let url = "http://127.0.0.1:5002/api/doc/";
|
||
let method = "POST";
|
||
|
||
if (docId) {
|
||
url += docId;
|
||
method = "PATCH";
|
||
}
|
||
|
||
const response = await fetch(url, {
|
||
method,
|
||
body: formData,
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0) {
|
||
alert(docId ? "文档更新成功" : "文档创建成功");
|
||
closeDocModal();
|
||
fetchDocs();
|
||
} else {
|
||
alert(`操作失败: ${result.message || "未知错误"}`);
|
||
}
|
||
} catch (error) {
|
||
console.error("保存文档错误:", error);
|
||
alert(`操作失败: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
// 删除文档
|
||
async function deleteDoc() {
|
||
if (!currentDocId) return;
|
||
|
||
try {
|
||
const response = await fetch(
|
||
`http://127.0.0.1:5002/api/doc/${currentDocId}`,
|
||
{
|
||
method: "DELETE",
|
||
}
|
||
);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0) {
|
||
alert("文档删除成功");
|
||
closeConfirmModal();
|
||
fetchDocs();
|
||
} else {
|
||
alert(`删除失败: ${result.message || "未知错误"}`);
|
||
}
|
||
} catch (error) {
|
||
console.error("删除文档错误:", error);
|
||
alert(`删除失败: ${error.message}`);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|