106 lines
9.1 KiB
PHP
106 lines
9.1 KiB
PHP
<x-layouts.admin>
|
||
<x-slot name="title">{{ $connection ? '修改数据库' : '添加数据库' }}</x-slot>
|
||
|
||
<x-slot name="content">
|
||
<div class="my-6">
|
||
@include('system_settings.partials.navigation')
|
||
|
||
@php($selectedDriver = old('driver', $values['driver']))
|
||
@php($postgres = $selectedDriver !== 'sqlsrv')
|
||
<form id="cloud-database-form" method="POST" action="{{ $connection ? route('system-settings.databases.update', $connection->id) : route('system-settings.databases.store') }}" class="max-w-4xl rounded-xl border border-gray-200 bg-white p-6">
|
||
@csrf
|
||
@if ($connection) @method('PATCH') @endif
|
||
|
||
@if ($errors->any())
|
||
<div class="mb-5 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
|
||
@foreach ($errors->all() as $error)<p>{{ $error }}</p>@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||
<label class="block sm:col-span-2">
|
||
<span class="text-sm font-semibold text-gray-700">数据库类型 *</span>
|
||
<select name="driver" required class="mt-1 w-full rounded-lg border border-[#D8D2C7] px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]">
|
||
<option value="sqlsrv" @selected($selectedDriver === 'sqlsrv')>SQL Server</option>
|
||
<option value="pgsql" @selected($selectedDriver === 'pgsql')>PostgreSQL</option>
|
||
<option value="mysql" @selected($selectedDriver === 'mysql')>MySQL / MariaDB</option>
|
||
</select>
|
||
</label>
|
||
<p data-postgres-help class="text-sm text-gray-600 sm:col-span-2" style="{{ $postgres ? '' : 'display:none' }}" role="status">通过 TLS 加密连接（PostgreSQL 使用 sslmode=require）；只读查询最长 15 秒。启用后自动发现字段目录，业务表按已批准的数据集同步。</p>
|
||
<label class="block sm:col-span-2">
|
||
<span class="text-sm font-semibold text-gray-700">配置名称 *</span>
|
||
<input name="name" value="{{ old('name', $values['name']) }}" required maxlength="191" placeholder="例如：JianSun 测试库" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm placeholder-gray-500 focus:border-[#856632] focus:ring-[#856632]">
|
||
</label>
|
||
<label class="block sm:col-span-2">
|
||
<span class="text-sm font-semibold text-gray-700">主机地址 *</span>
|
||
<input name="host" value="{{ old('host', $values['host']) }}" required maxlength="191" autocomplete="off" placeholder="只填写域名或 IP，不含端口" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm placeholder-gray-500 focus:border-[#856632] focus:ring-[#856632]">
|
||
</label>
|
||
<label class="block">
|
||
<span class="text-sm font-semibold text-gray-700">端口 *</span>
|
||
<input type="number" name="port" value="{{ old('port', $values['port']) }}" required min="1" max="65535" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]">
|
||
</label>
|
||
<label class="block">
|
||
<span class="text-sm font-semibold text-gray-700">数据库名称 *</span>
|
||
<input name="database_name" value="{{ old('database_name', $values['database_name']) }}" required maxlength="191" autocomplete="off" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]">
|
||
</label>
|
||
<label class="block">
|
||
<span class="text-sm font-semibold text-gray-700">只读账号 *</span>
|
||
<input name="username" value="{{ old('username', $values['username']) }}" required maxlength="191" autocomplete="off" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]">
|
||
</label>
|
||
<label class="block">
|
||
<span class="text-sm font-semibold text-gray-700">密码 {{ $connection ? '' : '*' }}</span>
|
||
<input type="password" name="password" @required(! $connection) maxlength="1000" autocomplete="new-password" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]">
|
||
<span class="mt-1 block text-xs text-gray-500">{{ $connection ? '留空表示保留原密码。' : '保存后不会回显。' }}</span>
|
||
</label>
|
||
</div>
|
||
|
||
<details class="mt-6 rounded-lg border border-gray-200 px-4 py-3">
|
||
<summary class="cursor-pointer text-sm font-semibold text-gray-700">高级设置</summary>
|
||
<div class="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||
<label data-sqlserver-only class="block" style="{{ $postgres ? 'display:none' : '' }}"><span class="text-sm font-semibold text-gray-700">ODBC 驱动</span><input name="odbc_driver" value="{{ old('odbc_driver', $values['odbc_driver'] ?: 'FreeTDS') }}" required @disabled($postgres) maxlength="128" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]"></label>
|
||
<label data-sqlserver-only class="block" style="{{ $postgres ? 'display:none' : '' }}"><span class="text-sm font-semibold text-gray-700">TDS 版本</span><input name="tds_version" value="{{ old('tds_version', $values['tds_version'] ?: '7.4') }}" required @disabled($postgres) maxlength="16" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]"></label>
|
||
<label class="block"><span class="text-sm font-semibold text-gray-700">连接超时（秒）</span><input type="number" name="connect_timeout" value="{{ old('connect_timeout', $values['connect_timeout']) }}" required min="1" max="30" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]"></label>
|
||
<label class="block"><span class="text-sm font-semibold text-gray-700">查询超时（秒）</span><input type="number" name="query_timeout" value="{{ old('query_timeout', $values['query_timeout']) }}" required min="1" max="120" class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#856632] focus:ring-[#856632]"></label>
|
||
</div>
|
||
</details>
|
||
|
||
<div class="mt-6 flex items-center justify-between border-t border-gray-100 pt-5">
|
||
<div>
|
||
<input type="hidden" name="enabled" value="0">
|
||
<label class="inline-flex items-center gap-2 text-sm font-semibold text-gray-700"><input type="checkbox" name="enabled" value="1" @checked((bool) old('enabled', $values['enabled'])) class="rounded border-gray-300 text-[#856632] focus:ring-[#856632]">启用</label>
|
||
</div>
|
||
<div class="flex gap-3">
|
||
<a href="{{ route('system-settings.databases.index') }}" class="rounded-lg px-5 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-100">取消</a>
|
||
<button type="submit" class="rounded-lg bg-[#856632] px-5 py-2 text-sm font-semibold text-white hover:bg-[#6A5129]">保存</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
@push('body_end')
|
||
<script>
|
||
(() => {
|
||
const form = document.getElementById('cloud-database-form');
|
||
const driver = form.elements.driver;
|
||
const ports = {sqlsrv: '1433', pgsql: '5432', mysql: '3306'};
|
||
let previous = driver.value;
|
||
const update = (changePort) => {
|
||
const postgres = driver.value !== 'sqlsrv';
|
||
if (changePort && form.elements.port.value === ports[previous]) {
|
||
form.elements.port.value = ports[driver.value];
|
||
}
|
||
form.querySelectorAll('[data-sqlserver-only]').forEach((group) => {
|
||
group.style.display = postgres ? 'none' : '';
|
||
group.querySelectorAll('input, select').forEach((field) => field.disabled = postgres);
|
||
});
|
||
form.querySelector('[data-postgres-help]').style.display = postgres ? '' : 'none';
|
||
form.elements.query_timeout.max = postgres ? '15' : '120';
|
||
previous = driver.value;
|
||
};
|
||
driver.addEventListener('change', () => update(true));
|
||
update(false);
|
||
})();
|
||
</script>
|
||
@endpush
|
||
</x-slot>
|
||
</x-layouts.admin>
|