155 lines
3.5 KiB
Vue
155 lines
3.5 KiB
Vue
<template>
|
||
<div class="settings-section">
|
||
<div class="settings-form-horizontal">
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<label class="form-label">自动投递：</label>
|
||
<ToggleSwitch v-model="config.autoDelivery" @change="updateConfig('autoDelivery', $event)" />
|
||
<span class="switch-label">{{ config.autoDelivery ? '开启' : '关闭' }}</span>
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label class="form-label">投递开始时间：</label>
|
||
<InputText type="time" :value="config.startTime" @input="updateConfig('startTime', $event.target.value)" class="form-input" />
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label class="form-label">投递结束时间：</label>
|
||
<InputText type="time" :value="config.endTime" @input="updateConfig('endTime', $event.target.value)" class="form-input" />
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label class="form-label">是否仅工作日：</label>
|
||
<Select
|
||
v-model="config.workdaysOnly"
|
||
:options="workdaysOptions"
|
||
optionLabel="label"
|
||
optionValue="value"
|
||
@change="updateConfig('workdaysOnly', $event.value)"
|
||
class="form-input"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions } from 'vuex';
|
||
import ToggleSwitch from 'primevue/toggleswitch';
|
||
import InputText from 'primevue/inputtext';
|
||
import Select from 'primevue/select';
|
||
import logMixin from '../mixins/logMixin.js';
|
||
|
||
export default {
|
||
name: 'DeliverySettings',
|
||
mixins: [logMixin],
|
||
components: {
|
||
ToggleSwitch,
|
||
InputText,
|
||
Select
|
||
},
|
||
props: {
|
||
config: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
workdaysOptions: [
|
||
{ label: '全部日期', value: false },
|
||
{ label: '仅工作日', value: true }
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
...mapActions('delivery', ['updateDeliveryConfig', 'saveDeliveryConfig']),
|
||
updateConfig(key, value) {
|
||
// ToggleSwitch 的 change 事件传递的是布尔值
|
||
const boolValue = typeof value === 'boolean' ? value : (value?.value !== undefined ? value.value : value);
|
||
this.updateDeliveryConfig({ key, value: boolValue });
|
||
},
|
||
async handleSave() {
|
||
const result = await this.saveDeliveryConfig();
|
||
if (result && result.success) {
|
||
this.addLog('success', '投递配置已保存');
|
||
} else {
|
||
this.addLog('error', result?.error || '保存配置失败');
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.settings-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
color: #333;
|
||
}
|
||
|
||
.settings-form-horizontal {
|
||
background: #fff;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.form-label {
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.form-input {
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
border-color: #4CAF50;
|
||
}
|
||
}
|
||
|
||
.switch-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.form-row {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.form-item {
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
</style>
|
||
|