待办事项目前已经可以实现编辑执行人
This commit is contained in:
parent
4ff8b0b7a0
commit
cc8bd92569
@ -1,4 +1,9 @@
|
||||
class TodoComponent extends HTMLElement {
|
||||
static {
|
||||
// 添加静态初始化标志
|
||||
this.isInitializing = false;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
@ -6,6 +11,39 @@ class TodoComponent extends HTMLElement {
|
||||
this.selectedProject = null;
|
||||
this.selectedSubproject = null;
|
||||
this.expandedProjects = new Set();
|
||||
this.users = [];
|
||||
this.currentUser = null;
|
||||
this.editingTodo = null; // 当前正在编辑的待办事项
|
||||
this.isInitialized = false; // 添加初始化标志
|
||||
}
|
||||
|
||||
// 初始化组件
|
||||
async initialize() {
|
||||
// 检查是否正在初始化
|
||||
if (TodoComponent.isInitializing) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
TodoComponent.isInitializing = true;
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
this.fetchTodos(),
|
||||
this.fetchUsers(),
|
||||
this.getCurrentUser()
|
||||
]);
|
||||
this.isInitialized = true;
|
||||
this.render();
|
||||
} catch (error) {
|
||||
console.error('初始化组件时发生错误:', error);
|
||||
this.showError('初始化失败，请刷新页面重试');
|
||||
} finally {
|
||||
TodoComponent.isInitializing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async fetchTodos() {
|
||||
@ -15,13 +53,40 @@ class TodoComponent extends HTMLElement {
|
||||
throw new Error('获取待办事项失败');
|
||||
}
|
||||
this.todos = await response.json();
|
||||
this.render();
|
||||
} catch (error) {
|
||||
console.error('获取待办事项时发生错误:', error);
|
||||
this.showError('获取待办事项失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
|
||||
async fetchUsers() {
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
if (!response.ok) {
|
||||
throw new Error('获取用户数据失败');
|
||||
}
|
||||
const data = await response.json();
|
||||
this.users = data.users || [];
|
||||
} catch (error) {
|
||||
console.error('获取用户数据时发生错误:', error);
|
||||
this.showError('获取用户数据失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentUser() {
|
||||
try {
|
||||
const userStr = localStorage.getItem('userInfo');
|
||||
if (userStr) {
|
||||
this.currentUser = JSON.parse(userStr);
|
||||
} else {
|
||||
console.log('未找到登录用户信息');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取当前用户信息时发生错误:', error);
|
||||
this.showError('获取用户信息失败');
|
||||
}
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'error-message';
|
||||
@ -117,25 +182,273 @@ class TodoComponent extends HTMLElement {
|
||||
treeContainer.appendChild(projectNode);
|
||||
});
|
||||
|
||||
// 添加显示全部按钮
|
||||
const showAllButton = document.createElement('button');
|
||||
showAllButton.className = 'show-all-button';
|
||||
showAllButton.textContent = '显示全部';
|
||||
showAllButton.addEventListener('click', () => {
|
||||
this.selectedProject = null;
|
||||
this.selectedSubproject = null;
|
||||
this.render();
|
||||
});
|
||||
treeContainer.appendChild(showAllButton);
|
||||
|
||||
return treeContainer;
|
||||
}
|
||||
|
||||
// 过滤待办事项
|
||||
filterTodos() {
|
||||
if (!this.selectedProject) {
|
||||
return this.todos;
|
||||
if (!this.currentUser) {
|
||||
console.log('未获取到当前用户信息，无法进行筛选');
|
||||
return [];
|
||||
}
|
||||
|
||||
// 首先根据项目/子项目筛选
|
||||
let filteredTodos = this.todos;
|
||||
if (this.selectedProject) {
|
||||
filteredTodos = filteredTodos.filter(todo => {
|
||||
const matchesProject = todo.project === this.selectedProject;
|
||||
if (!this.selectedSubproject) {
|
||||
return matchesProject;
|
||||
}
|
||||
return matchesProject && todo.subproject === this.selectedSubproject;
|
||||
});
|
||||
}
|
||||
|
||||
// 根据用户等级进行筛选
|
||||
const userLevel = this.currentUser.level || 0;
|
||||
|
||||
return this.todos.filter(todo => {
|
||||
const matchesProject = todo.project === this.selectedProject;
|
||||
if (!this.selectedSubproject) {
|
||||
return matchesProject;
|
||||
}
|
||||
return matchesProject && todo.subproject === this.selectedSubproject;
|
||||
// 等级4可以看到所有待办事项
|
||||
if (userLevel === 4) {
|
||||
return filteredTodos;
|
||||
}
|
||||
|
||||
// 等级3不能看到创建人和执行人都是等级4的待办事项
|
||||
if (userLevel === 3) {
|
||||
return filteredTodos.filter(todo => {
|
||||
const creator = this.users.find(u => u.username === todo.adduser);
|
||||
const executor = this.users.find(u => u.username === todo.exeuser);
|
||||
|
||||
// 如果找不到用户信息，默认显示
|
||||
if (!creator || !executor) return true;
|
||||
|
||||
// 只要创建人或执行人不是等级4，就显示
|
||||
return !(creator.level === 4 && executor.level === 4);
|
||||
});
|
||||
}
|
||||
|
||||
// 等级2或更低只能看到创建人或执行人是自己的待办事项
|
||||
return filteredTodos.filter(todo => {
|
||||
return todo.adduser === this.currentUser.username ||
|
||||
todo.exeuser === this.currentUser.username;
|
||||
});
|
||||
}
|
||||
|
||||
// 创建模态对话框
|
||||
createModal() {
|
||||
// 创建样式
|
||||
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-control {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.save-button, .cancel-button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.save-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
.save-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.cancel-button {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
.cancel-button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'modal';
|
||||
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>
|
||||
`;
|
||||
|
||||
// 添加关闭按钮事件
|
||||
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(); // 移除样式
|
||||
});
|
||||
|
||||
// 添加保存按钮事件
|
||||
const saveButton = modal.querySelector('.save-button');
|
||||
saveButton.addEventListener('click', async () => {
|
||||
const executor = modal.querySelector('#executor').value;
|
||||
if (executor && this.editingTodo) {
|
||||
try {
|
||||
const response = await fetch(`/api/todos/${this.editingTodo.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...this.editingTodo,
|
||||
exeuser: executor
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('更新执行人失败');
|
||||
}
|
||||
|
||||
// 更新本地数据
|
||||
this.editingTodo.exeuser = executor;
|
||||
this.render();
|
||||
modal.remove();
|
||||
style.remove(); // 移除样式
|
||||
} catch (error) {
|
||||
console.error('更新执行人时发生错误:', error);
|
||||
this.showError('更新执行人失败，请稍后重试');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return modal;
|
||||
}
|
||||
|
||||
// 显示编辑执行人对话框
|
||||
showEditExecutorModal(todo) {
|
||||
this.editingTodo = todo;
|
||||
const modal = this.createModal();
|
||||
|
||||
// 获取当前用户等级
|
||||
const currentUserLevel = this.currentUser.access_level || 0;
|
||||
|
||||
// 填充用户下拉列表
|
||||
const executorSelect = modal.querySelector('#executor');
|
||||
|
||||
// 筛选符合条件的用户
|
||||
const availableUsers = this.users.filter(user =>
|
||||
user &&
|
||||
user.access_level > 0 &&
|
||||
user.access_level <= currentUserLevel
|
||||
);
|
||||
|
||||
// 添加用户选项
|
||||
availableUsers.forEach(user => {
|
||||
const option = document.createElement('option');
|
||||
option.value = user.username;
|
||||
option.textContent = `${user.username} (${user.full_name})`;
|
||||
if (user.username === todo.exeuser) {
|
||||
option.selected = true;
|
||||
}
|
||||
executorSelect.appendChild(option);
|
||||
});
|
||||
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.isInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空现有内容
|
||||
this.shadowRoot.innerHTML = '';
|
||||
|
||||
@ -153,6 +466,25 @@ class TodoComponent extends HTMLElement {
|
||||
border-right: 1px solid #e9ecef;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.show-all-button {
|
||||
margin-top: 15px;
|
||||
padding: 8px 16px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.show-all-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.show-all-button:active {
|
||||
background-color: #004085;
|
||||
}
|
||||
.todo-container {
|
||||
flex: 1;
|
||||
@ -211,36 +543,57 @@ class TodoComponent extends HTMLElement {
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
.todo-item h3 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #212529;
|
||||
.todo-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
.todo-item p {
|
||||
margin: 5px 0;
|
||||
.todo-header h3 {
|
||||
margin: 0;
|
||||
color: #212529;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.todo-content {
|
||||
color: #495057;
|
||||
}
|
||||
.todo-item .status {
|
||||
.todo-info {
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.todo-info .label {
|
||||
color: #6c757d;
|
||||
}
|
||||
.todo-info .value {
|
||||
color: #212529;
|
||||
}
|
||||
.todo-description {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
color: #495057;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.todo-item .status.completed {
|
||||
.status.completed {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.todo-item .status.pending {
|
||||
.status.pending {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
.todo-item .meta {
|
||||
font-size: 0.85em;
|
||||
color: #6c757d;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.error-message {
|
||||
color: #721c24;
|
||||
padding: 10px;
|
||||
@ -251,6 +604,14 @@ class TodoComponent extends HTMLElement {
|
||||
.selected {
|
||||
background: #cfe2ff !important;
|
||||
}
|
||||
.executor-link {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.executor-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
this.shadowRoot.appendChild(style);
|
||||
|
||||
@ -277,24 +638,48 @@ class TodoComponent extends HTMLElement {
|
||||
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') : '未完成';
|
||||
new Date(todo.complete_time).toLocaleString('zh-CN') : '';
|
||||
|
||||
todoElement.innerHTML = `
|
||||
<h3>${todo.title}</h3>
|
||||
<p>${todo.text || '无详细描述'}</p>
|
||||
<p>项目：${todo.project}</p>
|
||||
<p>子项目：${todo.subproject}</p>
|
||||
<p>执行人：${todo.exeuser || '未分配'}</p>
|
||||
<p>计划时间：${scheDate}</p>
|
||||
<div class="status ${todo.completed ? 'completed' : 'pending'}">
|
||||
${todo.completed ? '已完成' : '进行中'}
|
||||
<div class="todo-header">
|
||||
<h3>${todo.project}-${todo.subproject}</h3>
|
||||
<span class="status ${todo.completed ? 'completed' : 'pending'}">
|
||||
${todo.completed ? '已完成' : '进行中'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<p>创建人：${todo.adduser}</p>
|
||||
<p>创建时间：${createdDate}</p>
|
||||
<p>完成时间：${completeDate}</p>
|
||||
<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>
|
||||
<span class="value">${scheDate}</span>
|
||||
<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">
|
||||
${todo.text || '无详细描述'}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加执行人链接点击事件
|
||||
const executorLink = todoElement.querySelector('.executor-link');
|
||||
executorLink.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.showEditExecutorModal(todo);
|
||||
});
|
||||
|
||||
todosContainer.appendChild(todoElement);
|
||||
});
|
||||
|
||||
@ -303,8 +688,7 @@ class TodoComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// 组件被添加到DOM时获取数据
|
||||
this.fetchTodos();
|
||||
this.initialize();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user