415 lines
16 KiB
JavaScript
415 lines
16 KiB
JavaScript
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;
|