ContractHub/templates/system_config.html

{% extends "base.html" %}

{% block title %}逐鹿人才-证件合同管理系统-系统配置{% endblock %}

{% block content %}
<div class="container mt-4">

    <!-- 系统配置表单 -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <h3 class="mb-4 fw-bold">系统配置</h3>
            <form method="POST">
                <!-- 网站信息 -->
                <h5 class="mb-3">网站信息</h5>
                <div class="mb-3">
                    <label for="site_name" class="form-label">网站名称</label>
                    <input type="text" class="form-control" id="site_name" name="site_name"
                           value="{{ config.site_name }}" required>
                </div>

                <!-- 邮件配置 -->
                <h5 class="mb-3 mt-4">邮件服务器配置</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="mail_server" class="form-label">SMTP服务器</label>
                        <input type="text" class="form-control" id="mail_server" name="mail_server"
                               value="{{ config.mail_server }}" required>
                    </div>
                    <div class="col-md-6">
                        <label for="mail_port" class="form-label">端口</label>
                        <input type="number" class="form-control" id="mail_port" name="mail_port"
                               value="{{ config.mail_port }}" required>
                    </div>
                    <div class="col-md-6">
                        <label for="mail_username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="mail_username" name="mail_username"
                               value="{{ config.mail_username }}" required>
                    </div>
                    <div class="col-md-6">
                        <label for="mail_password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="mail_password" name="mail_password"
                               value="{{ config.mail_password }}" required>
                    </div>
                </div>
                <div class="form-check mt-3">
                    <input type="checkbox" class="form-check-input" id="mail_use_tls" name="mail_use_tls"
                           {% if config.mail_use_tls %}checked{% endif %}>
                    <label class="form-check-label" for="mail_use_tls">使用TLS加密</label>
                </div>

                <div class="d-grid gap-2 mt-4">
                    <button type="submit" class="btn btn-primary btn-lg">保存配置</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 定时任务配置 -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <h5 class="mb-3">合同到期提醒设置</h5>
            <form id="scheduler-form" method="POST" action="/system/config/scheduler">
                <div class="mb-3">
                    <label class="form-label">发送频率</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="frequency" id="frequency-daily" value="daily"
                               {% if config.scheduler_frequency == 'daily' %}checked{% endif %}>
                        <label class="form-check-label" for="frequency-daily">
                            每天发送
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="frequency" id="frequency-weekly" value="weekly"
                               {% if config.scheduler_frequency == 'weekly' %}checked{% endif %}>
                        <label class="form-check-label" for="frequency-weekly">
                            每周发送
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="frequency" id="frequency-monthly" value="monthly"
                               {% if config.scheduler_frequency == 'monthly' %}checked{% endif %}>
                        <label class="form-check-label" for="frequency-monthly">
                            每月发送
                        </label>
                    </div>
                </div>

                <div id="weekly-options" class="mb-3" style="display: {% if config.scheduler_frequency == 'weekly' %}block{% else %}none{% endif %};">
                    <label class="form-label">选择星期几</label>
                    <div class="row">
                        {% for day in ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] %}
                        <div class="col-4 col-md-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="weekdays" id="weekday-{{ loop.index }}"
                                       value="{{ loop.index0 }}" {% if loop.index0 in config.scheduler_weekdays %}checked{% endif %}>
                                <label class="form-check-label" for="weekday-{{ loop.index }}">{{ day }}</label>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <div id="monthly-options" class="mb-3" style="display: {% if config.scheduler_frequency == 'monthly' %}block{% else %}none{% endif %};">
                    <label class="form-label">选择日期 (1-31)</label>
                    <input type="number" class="form-control" name="month_day" min="1" max="31"
                           value="{{ config.scheduler_month_day or 1 }}">
                </div>

                <div class="mb-3">
                    <label class="form-label">发送时间</label>
                    <div class="row g-2">
                        <div class="col-4">
                            <label class="form-label small text-muted">小时</label>
                            <select class="form-select" name="hour">
                                {% for h in range(0, 24) %}
                                <option value="{{ h }}" {% if h == config.scheduler_hour %}selected{% endif %}>
                                    {{ h }}:00
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-4">
                            <label class="form-label small text-muted">分钟</label>
                            <select class="form-select" name="minute">
                                {% for m in range(0, 60) %}
                                <option value="{{ m }}" {% if m == config.scheduler_minute %}selected{% endif %}>
                                    {{ m }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-4 d-flex align-items-end">
                            <div class="form-text">(0-59)</div>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 mt-4">
                    <button type="submit" class="btn btn-primary">保存定时设置</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 部门/我方主体/合同类型管理 -->
    <div class="row g-4">

        <!-- 部门管理 -->
        <div class="col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-header fw-bold">部门管理</div>
                <div class="card-body d-flex flex-column">
                    <ul class="list-group mb-3 flex-grow-1 overflow-auto" id="department-list" style="max-height:300px;">
                        {% for dept in departments %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {{ dept.name }}
                            <button class="btn btn-sm btn-danger delete-btn" data-id="{{ dept.id }}">删除</button>
                        </li>
                        {% endfor %}
                    </ul>
                    <div class="input-group mt-auto">
                        <input type="text" id="new-department" class="form-control" placeholder="新增部门">
                        <button class="btn btn-primary" id="add-department">添加</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我方主体管理 -->
        <div class="col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-header fw-bold">我方主体管理</div>
                <div class="card-body d-flex flex-column">
                    <ul class="list-group mb-3 flex-grow-1 overflow-auto" id="entity-list" style="max-height:300px;">
                        {% for entity in entities %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {{ entity.name }}
                            <button class="btn btn-sm btn-danger delete-btn" data-id="{{ entity.id }}">删除</button>
                        </li>
                        {% endfor %}
                    </ul>
                    <div class="input-group mt-auto">
                        <input type="text" id="new-entity" class="form-control" placeholder="新增公司主体">
                        <button class="btn btn-primary" id="add-entity">添加</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 合同类型管理 -->
        <div class="col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-header fw-bold">合同类型管理</div>
                <div class="card-body d-flex flex-column">
                    <ul class="list-group mb-3 flex-grow-1 overflow-auto" id="type-list" style="max-height:300px;">
                        {% for ct in contract_types %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ ct.name }}</strong>
                                {% if ct.prefix %}<span class="text-muted">[前缀: {{ ct.prefix }}]</span>{% endif %}
                            </div>
                            <div>
                                <button class="btn btn-sm btn-secondary edit-prefix-btn" data-id="{{ ct.id }}" data-prefix="{{ ct.prefix or '' }}">设置前缀</button>
                                <button class="btn btn-sm btn-danger delete-btn" data-id="{{ ct.id }}">删除</button>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                    <div class="input-group mt-auto">
                        <input type="text" id="new-type" class="form-control" placeholder="新增合同类型">
                        <button class="btn btn-primary" id="add-type">添加</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
// 添加部门/主体/类型
function addItem(url, inputId) {
    let name = document.getElementById(inputId).value.trim();
    if(!name) return alert('请输入名称');
    fetch(url, {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({name})
    }).then(res=>location.reload());
}

document.getElementById('add-department').addEventListener('click', ()=>addItem('/system/config/department/add','new-department'));
document.getElementById('add-entity').addEventListener('click', ()=>addItem('/system/config/entity/add','new-entity'));
document.getElementById('add-type').addEventListener('click', ()=>addItem('/system/config/type/add','new-type'));

// 设置前缀
document.querySelectorAll('.edit-prefix-btn').forEach(btn=>{
    btn.addEventListener('click', function(){
        const id=this.dataset.id;
        const currentPrefix=this.dataset.prefix;
        const newPrefix=prompt("请输入合同类型前缀：", currentPrefix);
        if(newPrefix===null) return;
        fetch(`/system/config/type/set_prefix/${id}`,{
            method:'POST',
            headers:{'Content-Type':'application/json'},
            body:JSON.stringify({prefix:newPrefix})
        }).then(res=>location.reload());
    });
});

// 删除
document.querySelectorAll('.delete-btn').forEach(btn=>{
    btn.addEventListener('click', function(){
        const id=this.dataset.id;
        const cardHeader=this.closest('.card').querySelector('.card-header').innerText;
        const type = cardHeader.includes('部门') ? 'department' : cardHeader.includes('主体') ? 'entity' : 'type';
        fetch(`/system/config/${type}/delete/${id}`, {method:'POST'}).then(res=>location.reload());
    });
});

// 显示/隐藏频率相关选项
document.querySelectorAll('input[name="frequency"]').forEach(radio => {
    radio.addEventListener('change', function() {
        document.getElementById('weekly-options').style.display =
            (this.value === 'weekly') ? 'block' : 'none';
        document.getElementById('monthly-options').style.display =
            (this.value === 'monthly') ? 'block' : 'none';
    });
});

// 处理定时设置表单提交
document.getElementById('scheduler-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const data = {
        frequency: formData.get('frequency'),
        weekdays: formData.getAll('weekdays').map(Number),
        month_day: parseInt(formData.get('month_day')),
        hour: parseInt(formData.get('hour')),
        minute: parseInt(formData.get('minute'))
    };

    fetch('/system/config/scheduler', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(response => {
        if (response.ok) {
            alert('定时设置已保存');
            location.reload();
        } else {
            alert('保存失败，请重试');
        }
    });
});
</script>

<style>
/* 卡片内部列表滚动 */
.list-group {
    max-height: 300px;
    overflow-y: auto;
}

/* 条目间距与按钮大小 */
.list-group-item .btn {
    margin-left: 5px;
}

/* 标题加粗 */
.card-header, h3 {
    font-weight: 600;
}

/* 表单与列表分离 */
.card-body input.form-control {
    min-width: 0;
}

/* 按钮圆角和阴影 */
.btn-primary, .btn-danger, .btn-secondary {
    border-radius: 0.35rem;
}

/* 频率选项间距 */
.form-check {
    margin-bottom: 0.5rem;
}

/* 星期选项布局 */
#weekly-options .col-4 {
    margin-bottom: 0.5rem;
}
</style>
{% endblock %}