将待办事项页面组件化
This commit is contained in:
parent
cea7e09e29
commit
0d9a30a614
File diff suppressed because it is too large
Load Diff
142
XNSimHtml/components/todo/todo-list.js
Normal file
142
XNSimHtml/components/todo/todo-list.js
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
class TodoList {
|
||||||
|
static renderTodoList(todos, {
|
||||||
|
onEditExecutor,
|
||||||
|
onEditSchedule,
|
||||||
|
onEditTitle,
|
||||||
|
onEditDescription,
|
||||||
|
onDelete,
|
||||||
|
onComplete,
|
||||||
|
onToggleDescription
|
||||||
|
}) {
|
||||||
|
const todosContainer = document.createElement('div');
|
||||||
|
todosContainer.className = 'todo-container';
|
||||||
|
|
||||||
|
todos.forEach(todo => {
|
||||||
|
const todoElement = document.createElement('div');
|
||||||
|
todoElement.className = 'todo-item';
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
const createdDate = new Date(todo.created_at).toLocaleString('zh-CN');
|
||||||
|
const scheDate = new Date(todo.sche_time).toLocaleString('zh-CN');
|
||||||
|
const completeDate = todo.complete_time ?
|
||||||
|
new Date(todo.complete_time).toLocaleString('zh-CN') : '';
|
||||||
|
|
||||||
|
todoElement.innerHTML = `
|
||||||
|
<div class="todo-header">
|
||||||
|
<div class="todo-actions">
|
||||||
|
<button class="complete-button" title="${todo.completed ? '取消完成' : '标记完成'}">
|
||||||
|
<img src="assets/icons/png/${todo.completed ? 'cancel_b.svg' : 'complete_b.svg'}" alt="${todo.completed ? '取消完成' : '标记完成'}" class="action-icon">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<h3>${todo.project} - ${todo.subproject} - ${todo.title}</h3>
|
||||||
|
<div class="todo-actions">
|
||||||
|
<button class="edit-button" title="编辑标题">
|
||||||
|
<img src="assets/icons/png/sliders_b.png" alt="编辑" class="action-icon">
|
||||||
|
</button>
|
||||||
|
<button class="delete-button delete-red" title="删除待办">
|
||||||
|
<img src="assets/icons/png/delete_b.png" alt="删除" class="action-icon">
|
||||||
|
</button>
|
||||||
|
<span class="status ${todo.completed ? 'completed' : 'pending'}">
|
||||||
|
${todo.completed ? '已完成' : '进行中'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-content">
|
||||||
|
<div class="todo-info">
|
||||||
|
<span class="label">执行人：</span>
|
||||||
|
<a href="#" class="executor-link">${todo.exeuser || '未分配'}</a>
|
||||||
|
<span class="spacer"></span>
|
||||||
|
<span class="label">创建人：</span>
|
||||||
|
<span class="value">${todo.adduser}</span>
|
||||||
|
</div>
|
||||||
|
<div class="todo-info">
|
||||||
|
<span class="label">计划时间：</span>
|
||||||
|
<a href="#" class="schedule-link">${scheDate}</a>
|
||||||
|
<span class="label">创建时间：</span>
|
||||||
|
<span class="value">${createdDate}</span>
|
||||||
|
</div>
|
||||||
|
${todo.completed ? `
|
||||||
|
<div class="todo-info">
|
||||||
|
<span class="label">完成时间：</span>
|
||||||
|
<span class="value">${completeDate}</span>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
<div class="todo-description">
|
||||||
|
<div class="description-header">
|
||||||
|
<span>详细描述：</span>
|
||||||
|
<div class="description-actions">
|
||||||
|
<button class="edit-button" title="编辑描述">
|
||||||
|
<img src="assets/icons/png/sliders_b.png" alt="编辑" class="action-icon">
|
||||||
|
</button>
|
||||||
|
<button class="toggle-button" title="展开/收起">
|
||||||
|
<img src="assets/icons/png/chevron-down_b.png" alt="展开/收起" class="action-icon toggle-icon">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="description-content">${todo.text || '无详细描述'}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 添加执行人链接点击事件
|
||||||
|
const executorLink = todoElement.querySelector('.executor-link');
|
||||||
|
executorLink.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onEditExecutor(todo);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加计划时间链接点击事件
|
||||||
|
const scheduleLink = todoElement.querySelector('.schedule-link');
|
||||||
|
scheduleLink.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onEditSchedule(todo);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加编辑按钮事件
|
||||||
|
const editButton = todoElement.querySelector('.edit-button');
|
||||||
|
editButton.addEventListener('click', () => {
|
||||||
|
onEditTitle(todo);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加描述编辑按钮事件
|
||||||
|
const descriptionEditButton = todoElement.querySelector('.todo-description .edit-button');
|
||||||
|
descriptionEditButton.addEventListener('click', () => {
|
||||||
|
onEditDescription(todo);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加删除按钮事件
|
||||||
|
const deleteButton = todoElement.querySelector('.delete-button');
|
||||||
|
deleteButton.addEventListener('click', () => {
|
||||||
|
onDelete(todo);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加完成/取消完成按钮事件
|
||||||
|
const completeButton = todoElement.querySelector('.complete-button');
|
||||||
|
completeButton.addEventListener('click', () => {
|
||||||
|
onComplete(todo);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加展开/收起按钮事件
|
||||||
|
const toggleButton = todoElement.querySelector('.toggle-button');
|
||||||
|
const descriptionContent = todoElement.querySelector('.description-content');
|
||||||
|
const toggleIcon = toggleButton.querySelector('.toggle-icon');
|
||||||
|
|
||||||
|
// 移除可能存在的旧事件监听器
|
||||||
|
const newToggleButton = toggleButton.cloneNode(true);
|
||||||
|
toggleButton.parentNode.replaceChild(newToggleButton, toggleButton);
|
||||||
|
|
||||||
|
// 添加新的事件监听器
|
||||||
|
newToggleButton.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
onToggleDescription(descriptionContent, newToggleButton);
|
||||||
|
});
|
||||||
|
|
||||||
|
todosContainer.appendChild(todoElement);
|
||||||
|
});
|
||||||
|
|
||||||
|
return todosContainer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TodoList;
|
||||||
414
XNSimHtml/components/todo/todo-modal.js
Normal file
414
XNSimHtml/components/todo/todo-modal.js
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
class TodoModal {
|
||||||
|
static createModal(type) {
|
||||||
|
// 创建样式
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 400px;
|
||||||
|
max-width: 90%;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.modal-header {
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.modal-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
.close-button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #6c757d;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.modal-body {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.modal-footer {
|
||||||
|
padding: 15px;
|
||||||
|
border-top: 1px solid #e9ecef;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
.form-group input[type="text"],
|
||||||
|
.form-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.form-group input[type="text"]:focus,
|
||||||
|
.form-group select:focus {
|
||||||
|
border-color: #7986E7;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
|
||||||
|
}
|
||||||
|
.form-group select:disabled {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.form-group select[contenteditable="true"] {
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
.form-group input[list] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.form-group input[list]:focus {
|
||||||
|
border-color: #7986E7;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
|
||||||
|
}
|
||||||
|
.form-group datalist {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.form-group input[list]::-webkit-calendar-picker-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-group input[list]::-webkit-list-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-group input[list]::-webkit-datetime-edit {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.form-group input[list]::-webkit-datetime-edit-fields-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.form-group input[list]::-webkit-datetime-edit-text {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
.form-group input[list]::-webkit-datetime-edit-hour-field,
|
||||||
|
.form-group input[list]::-webkit-datetime-edit-minute-field,
|
||||||
|
.form-group input[list]::-webkit-datetime-edit-second-field,
|
||||||
|
.form-group input[list]::-webkit-datetime-edit-ampm-field {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
.form-group input[list] + datalist {
|
||||||
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.form-group input[list] + datalist option {
|
||||||
|
padding: 8px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.form-group input[list] + datalist option:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.save-button, .cancel-button {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.save-button {
|
||||||
|
background-color: #7986E7;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.save-button:hover {
|
||||||
|
background-color: #6875D6;
|
||||||
|
}
|
||||||
|
.cancel-button {
|
||||||
|
background-color: #6c757d;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.cancel-button:hover {
|
||||||
|
background-color: #5a6268;
|
||||||
|
}
|
||||||
|
input[type="datetime-local"] {
|
||||||
|
font-family: inherit;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
margin-right: 4px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
input[type="datetime-local"]::-webkit-datetime-edit {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
input[type="datetime-local"]::-webkit-datetime-edit-text {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
|
||||||
|
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
|
||||||
|
input[type="datetime-local"]::-webkit-datetime-edit-second-field,
|
||||||
|
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
.form-group textarea:focus {
|
||||||
|
border-color: #7986E7;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
|
||||||
|
}
|
||||||
|
.custom-select {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.select-options {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #7986E7;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 4px 8px rgba(121, 134, 231, 0.2);
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 1000;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.select-option {
|
||||||
|
padding: 8px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.select-option:hover {
|
||||||
|
background-color: #7986E7;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.select-option:active {
|
||||||
|
background-color: #6875D6;
|
||||||
|
}
|
||||||
|
.select-options::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.select-options::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.select-options::-webkit-scrollbar-thumb {
|
||||||
|
background: #7986E7;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.select-options::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #6875D6;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const modal = document.createElement('div');
|
||||||
|
modal.className = 'modal';
|
||||||
|
|
||||||
|
// 根据类型创建不同的模态框内容
|
||||||
|
if (type === 'executor') {
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3>编辑执行人</h3>
|
||||||
|
<button class="close-button">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="executor">选择执行人：</label>
|
||||||
|
<select id="executor" class="form-control">
|
||||||
|
<option value="">请选择执行人</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="save-button">保存</button>
|
||||||
|
<button class="cancel-button">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (type === 'schedule') {
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3>编辑计划时间</h3>
|
||||||
|
<button class="close-button">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="schedule">选择计划时间：</label>
|
||||||
|
<input type="datetime-local" id="schedule" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="save-button">保存</button>
|
||||||
|
<button class="cancel-button">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (type === 'new-todo') {
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3>新增待办</h3>
|
||||||
|
<button class="close-button">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="title">标题：</label>
|
||||||
|
<input type="text" id="title" class="form-control" required placeholder="请输入待办标题">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="project">项目：</label>
|
||||||
|
<div class="custom-select">
|
||||||
|
<input type="text" id="project" class="form-control" placeholder="请选择或输入项目">
|
||||||
|
<div class="select-options" id="project-options"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="subproject">子项目：</label>
|
||||||
|
<div class="custom-select">
|
||||||
|
<input type="text" id="subproject" class="form-control" placeholder="请选择或输入子项目">
|
||||||
|
<div class="select-options" id="subproject-options"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="text">详细描述：</label>
|
||||||
|
<textarea id="text" class="form-control"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="schedule">计划时间：</label>
|
||||||
|
<input type="datetime-local" id="schedule" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="executor">执行人：</label>
|
||||||
|
<select id="executor" class="form-control" required>
|
||||||
|
<option value="">请选择执行人</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="save-button">保存</button>
|
||||||
|
<button class="cancel-button">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (type === 'edit-title') {
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3>编辑标题</h3>
|
||||||
|
<button class="close-button">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="title">标题：</label>
|
||||||
|
<input type="text" id="title" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="save-button">保存</button>
|
||||||
|
<button class="cancel-button">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (type === 'edit-description') {
|
||||||
|
modal.innerHTML = `
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3>编辑详细描述</h3>
|
||||||
|
<button class="close-button">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="text">详细描述：</label>
|
||||||
|
<textarea id="text" class="form-control" rows="6"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="save-button">保存</button>
|
||||||
|
<button class="cancel-button">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加关闭按钮事件
|
||||||
|
const closeButton = modal.querySelector('.close-button');
|
||||||
|
closeButton.addEventListener('click', () => {
|
||||||
|
modal.remove();
|
||||||
|
style.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加取消按钮事件
|
||||||
|
const cancelButton = modal.querySelector('.cancel-button');
|
||||||
|
cancelButton.addEventListener('click', () => {
|
||||||
|
modal.remove();
|
||||||
|
style.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将样式添加到文档头部
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
||||||
|
return { modal, style };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TodoModal;
|
||||||
61
XNSimHtml/components/todo/todo-service.js
Normal file
61
XNSimHtml/components/todo/todo-service.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
class TodoService {
|
||||||
|
static async fetchTodos() {
|
||||||
|
const response = await fetch('/api/todos');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('获取待办事项失败');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
static async fetchUsers() {
|
||||||
|
const response = await fetch('/api/users');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('获取用户数据失败');
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return data.users || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
static async updateTodo(todoId, todoData) {
|
||||||
|
const response = await fetch(`/api/todos/${todoId}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(todoData)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('更新待办事项失败');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
static async createTodo(todoData) {
|
||||||
|
const response = await fetch('/api/todos', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(todoData)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.message || '创建待办失败');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
static async deleteTodo(todoId) {
|
||||||
|
const response = await fetch(`/api/todos/${todoId}`, {
|
||||||
|
method: 'DELETE'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('删除待办事项失败');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TodoService;
|
||||||
139
XNSimHtml/components/todo/todo-tree.js
Normal file
139
XNSimHtml/components/todo/todo-tree.js
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
class TodoTree {
|
||||||
|
static buildProjectTree(todos) {
|
||||||
|
const tree = {};
|
||||||
|
todos.forEach(todo => {
|
||||||
|
const project = todo.project || '其它';
|
||||||
|
const subproject = todo.subproject || '其它';
|
||||||
|
|
||||||
|
if (!tree[project]) {
|
||||||
|
tree[project] = {
|
||||||
|
name: project,
|
||||||
|
subprojects: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (!tree[project].subprojects[subproject]) {
|
||||||
|
tree[project].subprojects[subproject] = {
|
||||||
|
name: subproject,
|
||||||
|
todos: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
tree[project].subprojects[subproject].todos.push(todo);
|
||||||
|
});
|
||||||
|
return tree;
|
||||||
|
}
|
||||||
|
|
||||||
|
static renderProjectTree(tree, {
|
||||||
|
expandedProjects,
|
||||||
|
selectedProject,
|
||||||
|
selectedSubproject,
|
||||||
|
showCompleted,
|
||||||
|
onProjectSelect,
|
||||||
|
onSubprojectSelect,
|
||||||
|
onExpandToggle,
|
||||||
|
onShowCompletedChange,
|
||||||
|
onShowAll,
|
||||||
|
onAddTodo
|
||||||
|
}) {
|
||||||
|
const treeContainer = document.createElement('div');
|
||||||
|
treeContainer.className = 'project-tree';
|
||||||
|
|
||||||
|
// 创建树内容容器
|
||||||
|
const treeContent = document.createElement('div');
|
||||||
|
treeContent.className = 'tree-content';
|
||||||
|
|
||||||
|
// 添加新增待办按钮
|
||||||
|
const addTodoButton = document.createElement('button');
|
||||||
|
addTodoButton.className = 'add-todo-button';
|
||||||
|
addTodoButton.textContent = '新增待办';
|
||||||
|
addTodoButton.addEventListener('click', onAddTodo);
|
||||||
|
treeContent.appendChild(addTodoButton);
|
||||||
|
|
||||||
|
Object.values(tree).forEach(project => {
|
||||||
|
const projectNode = document.createElement('div');
|
||||||
|
projectNode.className = 'project-node';
|
||||||
|
|
||||||
|
const projectHeader = document.createElement('div');
|
||||||
|
projectHeader.className = 'project-header';
|
||||||
|
projectHeader.innerHTML = `
|
||||||
|
<div class="project-header-content">
|
||||||
|
<span class="expand-icon ${expandedProjects.has(project.name) ? 'expanded' : ''}">▶</span>
|
||||||
|
<span class="project-name">${project.name}</span>
|
||||||
|
<span class="todo-count">(${Object.values(project.subprojects).reduce((sum, sub) =>
|
||||||
|
sum + sub.todos.length, 0)})</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
projectHeader.addEventListener('click', () => {
|
||||||
|
onProjectSelect(project.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
const expandButton = projectHeader.querySelector('.expand-icon');
|
||||||
|
expandButton.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onExpandToggle(project.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
const subprojectsContainer = document.createElement('div');
|
||||||
|
subprojectsContainer.className = 'subprojects-container';
|
||||||
|
subprojectsContainer.style.display = expandedProjects.has(project.name) ? 'block' : 'none';
|
||||||
|
|
||||||
|
Object.values(project.subprojects).forEach(subproject => {
|
||||||
|
const subprojectNode = document.createElement('div');
|
||||||
|
subprojectNode.className = 'subproject-node';
|
||||||
|
if (selectedProject === project.name && selectedSubproject === subproject.name) {
|
||||||
|
subprojectNode.classList.add('selected');
|
||||||
|
}
|
||||||
|
subprojectNode.innerHTML = `
|
||||||
|
<span class="subproject-name">${subproject.name}</span>
|
||||||
|
<span class="todo-count">(${subproject.todos.length})</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
subprojectNode.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onSubprojectSelect(project.name, subproject.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
subprojectsContainer.appendChild(subprojectNode);
|
||||||
|
});
|
||||||
|
|
||||||
|
projectNode.appendChild(projectHeader);
|
||||||
|
projectNode.appendChild(subprojectsContainer);
|
||||||
|
treeContent.appendChild(projectNode);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建底部控制区域
|
||||||
|
const bottomControls = document.createElement('div');
|
||||||
|
bottomControls.className = 'bottom-controls';
|
||||||
|
|
||||||
|
// 添加显示已完成复选框
|
||||||
|
const showCompletedContainer = document.createElement('div');
|
||||||
|
showCompletedContainer.className = 'show-completed-container';
|
||||||
|
showCompletedContainer.innerHTML = `
|
||||||
|
<input type="checkbox" id="show-completed" ${showCompleted ? 'checked' : ''}>
|
||||||
|
<label for="show-completed">显示已完成</label>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 添加复选框事件监听
|
||||||
|
const checkbox = showCompletedContainer.querySelector('input');
|
||||||
|
checkbox.addEventListener('change', (e) => {
|
||||||
|
onShowCompletedChange(e.target.checked);
|
||||||
|
});
|
||||||
|
|
||||||
|
bottomControls.appendChild(showCompletedContainer);
|
||||||
|
|
||||||
|
// 添加显示全部按钮
|
||||||
|
const showAllButton = document.createElement('button');
|
||||||
|
showAllButton.className = 'show-all-button';
|
||||||
|
showAllButton.textContent = '显示全部';
|
||||||
|
showAllButton.addEventListener('click', onShowAll);
|
||||||
|
bottomControls.appendChild(showAllButton);
|
||||||
|
|
||||||
|
// 将树内容和底部控制区域添加到树容器
|
||||||
|
treeContainer.appendChild(treeContent);
|
||||||
|
treeContainer.appendChild(bottomControls);
|
||||||
|
|
||||||
|
return treeContainer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TodoTree;
|
||||||
Loading…
x
Reference in New Issue
Block a user