<template>
|
<div class="page">
|
<h3 class="section-title">预约字段</h3>
|
<el-table :data="fields" v-loading="fieldsLoading" stripe border class="wide-table booking-fields-table">
|
<el-table-column prop="fieldName" label="字段" min-width="160" show-overflow-tooltip />
|
<el-table-column label="是否启用" width="120" align="center">
|
<template #default="{ row }">
|
<el-switch
|
v-permission="'config:booking-settings:update'"
|
:model-value="row.visible === 1"
|
:disabled="isFieldLocked(row)"
|
:class="{ 'switch-locked': isFieldLocked(row) }"
|
@change="(v: boolean) => patchField(row, 'visible', v)"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="是否必填" width="120" align="center">
|
<template #default="{ row }">
|
<el-switch
|
v-permission="'config:booking-settings:update'"
|
:model-value="row.requiredFlag === 1"
|
:disabled="isFieldLocked(row) || row.visible !== 1"
|
:class="{ 'switch-locked': isFieldLocked(row) }"
|
@change="(v: boolean) => patchField(row, 'required', v)"
|
/>
|
</template>
|
</el-table-column>
|
</el-table>
|
<p class="fields-hint">预约字段变更即时生效</p>
|
|
<h3 class="section-title section-gap">可预约范围</h3>
|
<el-form label-width="120px" class="block-form">
|
<el-form-item label="预约时段">
|
<el-radio-group v-model="rangeMode">
|
<el-radio-button value="SINGLE">单日</el-radio-button>
|
<el-radio-button value="MULTI">多日</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="rangeMode === 'MULTI'" label="最长连续预约天数">
|
<el-input-number
|
v-model="maxConsecutiveDays"
|
:min="1"
|
:max="999"
|
:precision="0"
|
:step="1"
|
controls-position="right"
|
style="width: 200px"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<h3 class="section-title section-gap">节假日配置</h3>
|
<div class="holiday-toolbar">
|
<span class="lbl">节假日/高温假：</span>
|
<el-date-picker
|
v-model="pickDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="选择日期"
|
clearable
|
style="width: 200px"
|
/>
|
<el-button v-permission="'config:booking-settings:update'" type="primary" @click="addHoliday">添加</el-button>
|
<el-button v-permission="'config:booking-settings:update'" @click="resetHolidays">重置</el-button>
|
</div>
|
<div class="holiday-tags">
|
<el-tag v-for="d in holidayDates" :key="d" closable class="tag-item" @close="removeHoliday(d)">
|
{{ d }}
|
</el-tag>
|
<span v-if="holidayDates.length === 0" class="empty-hint">暂无已选节假日</span>
|
</div>
|
|
<h3 class="section-title section-gap">车辆道闸权限</h3>
|
<div class="barrier-block">
|
<div class="barrier-row">
|
<span class="barrier-label">车辆道闸下放权限：</span>
|
<el-switch v-permission="'config:booking-settings:update'" v-model="vehicleBarrierEnabled" />
|
</div>
|
<p class="barrier-hint">开启后道闸可识别预约车辆，自动开闸</p>
|
</div>
|
|
<div class="save-bar">
|
<el-button v-permission="'config:booking-settings:update'" type="primary" :loading="extrasSaving" @click="saveExtras">保存预约策略</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import http from "../api/http";
|
|
const LOCKED_CODES = new Set(["respondent", "visit_start_time"]);
|
|
type FieldRow = {
|
id: number;
|
uuid: string;
|
fieldCode: string;
|
fieldName: string;
|
visible: number;
|
requiredFlag: number;
|
};
|
|
const fieldsLoading = ref(false);
|
const fields = ref<FieldRow[]>([]);
|
|
function isFieldLocked(row: FieldRow) {
|
return LOCKED_CODES.has(row.fieldCode);
|
}
|
|
async function loadFields() {
|
fieldsLoading.value = true;
|
try {
|
const { data } = await http.get("/config/fields");
|
fields.value = (data.result || []) as FieldRow[];
|
} catch (e: unknown) {
|
ElMessage.error(e instanceof Error ? e.message : "加载字段失败");
|
} finally {
|
fieldsLoading.value = false;
|
}
|
}
|
|
async function patchField(row: FieldRow, kind: "visible" | "required", val: boolean) {
|
const prevV = row.visible;
|
const prevR = row.requiredFlag;
|
const body: { uuid: string; visible?: number; requiredFlag?: number } = { uuid: row.uuid };
|
if (kind === "visible") {
|
body.visible = val ? 1 : 0;
|
if (!val) body.requiredFlag = 0;
|
} else {
|
body.requiredFlag = val ? 1 : 0;
|
}
|
try {
|
await http.patch(`/config/fields/${row.id}`, body);
|
if (kind === "visible") {
|
row.visible = val ? 1 : 0;
|
if (!val) row.requiredFlag = 0;
|
} else {
|
row.requiredFlag = val ? 1 : 0;
|
}
|
} catch (e: unknown) {
|
row.visible = prevV;
|
row.requiredFlag = prevR;
|
ElMessage.error(e instanceof Error ? e.message : "更新失败");
|
}
|
}
|
|
const rangeMode = ref<"SINGLE" | "MULTI">("SINGLE");
|
const maxConsecutiveDays = ref(7);
|
const holidayDates = ref<string[]>([]);
|
const pickDate = ref<string | null>(null);
|
const vehicleBarrierEnabled = ref(false);
|
const extrasSaving = ref(false);
|
|
async function loadExtras() {
|
try {
|
const { data } = await http.get("/config/booking-settings");
|
const r = data.result as {
|
rangeMode?: string;
|
maxConsecutiveDays?: number;
|
holidayDates?: string[];
|
vehicleBarrierEnabled?: boolean;
|
};
|
const m = (r.rangeMode || "SINGLE").toUpperCase();
|
rangeMode.value = m === "MULTI" ? "MULTI" : "SINGLE";
|
maxConsecutiveDays.value =
|
r.maxConsecutiveDays != null && r.maxConsecutiveDays >= 1 ? r.maxConsecutiveDays : 7;
|
holidayDates.value = Array.isArray(r.holidayDates) ? [...r.holidayDates] : [];
|
vehicleBarrierEnabled.value = !!r.vehicleBarrierEnabled;
|
} catch {
|
/* ignore */
|
}
|
}
|
|
function addHoliday() {
|
const d = pickDate.value?.trim();
|
if (!d) {
|
ElMessage.warning("请先选择日期");
|
return;
|
}
|
if (holidayDates.value.includes(d)) {
|
ElMessage.info("该日期已在列表中");
|
return;
|
}
|
holidayDates.value = [...holidayDates.value, d].sort();
|
pickDate.value = null;
|
}
|
|
function removeHoliday(d: string) {
|
holidayDates.value = holidayDates.value.filter((x) => x !== d);
|
}
|
|
async function resetHolidays() {
|
pickDate.value = null;
|
try {
|
const { data } = await http.get("/config/booking-settings");
|
const hol = data.result?.holidayDates as string[] | undefined;
|
holidayDates.value = Array.isArray(hol) ? [...hol] : [];
|
} catch (e: unknown) {
|
holidayDates.value = [];
|
ElMessage.error(e instanceof Error ? e.message : "重置失败");
|
}
|
}
|
|
async function saveExtras() {
|
if (rangeMode.value === "MULTI") {
|
const n = maxConsecutiveDays.value;
|
if (n == null || !Number.isInteger(n) || n < 1) {
|
ElMessage.warning("最长连续预约天数须为正整数");
|
return;
|
}
|
}
|
extrasSaving.value = true;
|
try {
|
await http.put("/config/booking-settings", {
|
rangeMode: rangeMode.value,
|
maxConsecutiveDays: rangeMode.value === "MULTI" ? maxConsecutiveDays.value : maxConsecutiveDays.value ?? 7,
|
holidayDates: holidayDates.value,
|
vehicleBarrierEnabled: vehicleBarrierEnabled.value,
|
});
|
ElMessage.success("已保存");
|
await loadExtras();
|
} catch (e: unknown) {
|
ElMessage.error(e instanceof Error ? e.message : "保存失败");
|
} finally {
|
extrasSaving.value = false;
|
}
|
}
|
|
onMounted(async () => {
|
await Promise.all([loadFields(), loadExtras()]);
|
});
|
</script>
|
|
<style scoped>
|
.page {
|
padding: 0;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: 600;
|
margin: 0 0 12px;
|
padding-left: 10px;
|
border-left: 3px solid #409eff;
|
color: #303133;
|
}
|
.section-gap {
|
margin-top: 28px;
|
}
|
.wide-table {
|
max-width: 720px;
|
}
|
.fields-hint {
|
margin: 8px 0 0;
|
font-size: 12px;
|
color: #909399;
|
line-height: 1.4;
|
}
|
:deep(.booking-fields-table .el-table__cell) {
|
padding-top: 6px;
|
padding-bottom: 6px;
|
}
|
:deep(.booking-fields-table .el-table__cell .cell) {
|
line-height: 18px;
|
}
|
:deep(.switch-locked .el-switch__core) {
|
opacity: 0.85;
|
}
|
.block-form {
|
max-width: 640px;
|
}
|
.holiday-toolbar {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
gap: 10px;
|
margin-bottom: 12px;
|
}
|
.lbl {
|
font-size: 14px;
|
color: #606266;
|
}
|
.holiday-tags {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
align-items: center;
|
min-height: 32px;
|
}
|
.tag-item {
|
margin: 0;
|
}
|
.empty-hint {
|
font-size: 13px;
|
color: #c0c4cc;
|
}
|
.barrier-block {
|
max-width: 560px;
|
}
|
.barrier-row {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
.barrier-label {
|
font-size: 14px;
|
color: #606266;
|
}
|
.barrier-hint {
|
margin: 8px 0 0;
|
font-size: 12px;
|
color: #909399;
|
line-height: 1.5;
|
}
|
.save-bar {
|
margin-top: 28px;
|
}
|
</style>
|
