94 lines
3.4 KiB
HTML
94 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}展延暫時規範{% endblock %}
|
|
|
|
{% block content %}
|
|
<h2 class="mb-4">展延暫時規範</h2>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
規範編號: <strong>{{ spec.spec_code }}</strong>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" enctype="multipart/form-data">
|
|
<p><strong>主題:</strong> {{ spec.title }}</p>
|
|
<p><strong>原結束日期:</strong> {{ spec.end_date.strftime('%Y-%m-%d') }}</p>
|
|
|
|
<div class="mb-3">
|
|
<label for="new_end_date" class="form-label"><strong>新的結束日期</strong></label>
|
|
<input type="date" class="form-control" id="new_end_date" name="new_end_date"
|
|
value="{{ default_new_end_date.strftime('%Y-%m-%d') }}" required>
|
|
<div class="form-text">預設為原結束日期後一個月。</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="new_file" class="form-label"><strong>重新上傳佐證檔案 (必填)</strong></label>
|
|
<input class="form-control" type="file" id="new_file" name="new_file" accept=".pdf" required>
|
|
<div class="form-text">請上傳展延申請的相關佐證文件 (PDF 格式)。</div>
|
|
</div>
|
|
|
|
<!-- 郵件通知對象選擇 -->
|
|
<div class="mb-3">
|
|
<label for="recipients" class="form-label"><strong>郵件通知對象</strong></label>
|
|
<select id="recipients" name="recipients" multiple placeholder="請輸入姓名或 Email 來搜尋...">
|
|
</select>
|
|
<div class="form-text">可搜尋姓名或 Email 地址，支援多人選擇</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">確認展延</button>
|
|
<a href="{{ url_for('temp_spec.spec_list') }}" class="btn btn-secondary">取消</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const recipientSelect = new TomSelect('#recipients', {
|
|
valueField: 'value',
|
|
labelField: 'text',
|
|
searchField: 'text',
|
|
placeholder: '請輸入姓名或 Email 來搜尋...',
|
|
plugins: ['remove_button'],
|
|
maxItems: null,
|
|
create: false,
|
|
load: function(query, callback) {
|
|
if (!query || query.length < 2) {
|
|
callback();
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/ldap-search?q=${encodeURIComponent(query)}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
callback(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('LDAP search error:', error);
|
|
callback();
|
|
});
|
|
},
|
|
onItemAdd: function(value, item) {
|
|
// 選擇項目後清空搜尋框
|
|
this.setTextboxValue('');
|
|
this.refreshOptions(false);
|
|
},
|
|
render: {
|
|
option: function(item, escape) {
|
|
return `<div class="py-1">${escape(item.text)}</div>`;
|
|
},
|
|
item: function(item, escape) {
|
|
// 移除藍底背景，改用淺灰背景
|
|
return `<div class="badge bg-light text-dark border me-1">${escape(item.text)}</div>`;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |