smart_archives_web/src/views/filesTransfer/setting/index.vue

<template>
    <!-- 归档配置 -->
    <div class="app-container">
        <el-card class="section-card">
            <div class="section-header">
                <div class="section-title">
                    <i class="el-icon-notebook-2" /> 定期归档配置
                    <el-switch v-model="periodicEnabled" />
                </div>
            </div>

            <el-form label-width="80px" :inline="false" class="section-form">
                <el-form-item label="周期周期"> 
                    <el-select v-model="periodicCycle" placeholder="请选择">
                        <el-option label="每天" value="daily" />
                        <el-option label="每周" value="weekly" />
                        <el-option label="每月" value="monthly" />
                    </el-select>
                </el-form-item>

                <!-- 每天 -->
                <el-form-item v-if="periodicCycle==='daily'" label="">
                    <el-time-picker
                        v-model="dailyTime"
                        placeholder="选择时间"
                        format="HH:mm"
                        value-format="HH:mm"
                        :clearable="false"
                        />
                </el-form-item>

                <!-- 每周 -->
                <el-form-item v-if="periodicCycle==='weekly'" label="">
                    <el-time-picker
                        v-model="weeklyTime"
                        placeholder="选择时间"
                        format="HH:mm"
                        value-format="HH:mm"
                        :clearable="false"
                        style="margin-right: 10px;"
                        />
                    <el-select v-model="weeklyDay" style="width: 120px;">
                        <el-option label="星期一" value="1" />
                        <el-option label="星期二" value="2" />
                        <el-option label="星期三" value="3" />
                        <el-option label="星期四" value="4" />
                        <el-option label="星期五" value="5" />
                        <el-option label="星期六" value="6" />
                        <el-option label="星期日" value="7" />
                    </el-select>
                </el-form-item>

                <!-- 每月：选择时间 + 天数（1-31） -->
                <el-form-item v-if="periodicCycle==='monthly'" label="">
                    <el-time-picker
                        v-model="monthTime"
                        placeholder="选择时间"
                        format="HH:mm"
                        value-format="HH:mm"
                        :clearable="false"
                        style="margin-right: 10px;"
                    />
                    <el-input-number
                        v-model="monthlyDay"
                        :min="1"
                        :max="31"
                        :step="1"
                        controls-position="right"
                        style="width: 140px;"
                    />
                    <span style="margin-left: 6px;color:#909399;">日</span>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="section-card">
            <div class="section-header">
                <div class="section-title">
                    <i class="el-icon-collection" /> 不定期归档配置
                    <el-switch v-model="nonPeriodicEnabled" />
                </div>
            </div>

            <div class="section-body">
                <el-date-picker
                    v-model="nonPeriodicDateTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                    :clearable="false"
                />
            </div>
        </el-card>

        <div class="actions">
            <el-button type="primary" icon="el-icon-check" @click="handleSave">保存</el-button>
        </div>
    </div>
    
</template>

<script>
import { queryAPI, editAPI } from '@/api/filesTransfer/setting'
export default {
    name: 'ArchiveSetting',
    data() {
        return {
            // 定期归档
            periodicEnabled: true,
            periodicCycle: 'daily', // daily | weekly | monthly
            dailyTime: '00:00',
            weeklyTime: '00:00',
            weeklyDay: '1',
            monthTime: '00:00',
            monthlyDay: 1,
            // 不定期归档
            nonPeriodicEnabled: true,
            nonPeriodicDateTime: ''
        }
    },
    watch: {
        periodicCycle(newVal) {
            if (newVal === 'daily' && !this.dailyTime) this.dailyTime = '00:00'
            if (newVal === 'weekly') {
                if (!this.weeklyTime) this.weeklyTime = '00:00'
                if (!this.weeklyDay) this.weeklyDay = '1'
            }
            if (newVal === 'monthly') {
                if (!this.monthTime) this.monthTime = '00:00'
                if (!this.monthlyDay) this.monthlyDay = 1
            }
        }
    },
    created() {
        this.query()
    },
    methods: {
        formatDateTime(date) {
            const y = date.getFullYear()
            const m = String(date.getMonth() + 1).padStart(2, '0')
            const d = String(date.getDate()).padStart(2, '0')
            const hh = String(date.getHours()).padStart(2, '0')
            const mm = String(date.getMinutes()).padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}`
        },
        // 修改归档配置
        handleSave() {
            // 组合两条配置数据：第一条定期归档，第二条不定期归档
            const periodicPayload = {
                useStatus: this.periodicEnabled ? 1 : 0,
                cycle: this.periodicCycle,
                time: this.dailyTime,
                time: this.weeklyTime,
                weekOfDay: this.weeklyDay,
                monthTime: this.monthTime,
                monthDay: this.monthlyDay,
                id:1,
                archivedType:1,
            }
            const nonPeriodicPayload = {
                useStatus: this.nonPeriodicEnabled ? 1 : 0,
                time: this.nonPeriodicDateTime,
                id:2,
                archivedType:2,
            }
            const payload = [periodicPayload, nonPeriodicPayload]
            console.log('保存归档配置: ', payload)
            editAPI(payload).then(() => {
                this.$message.success('保存成功')
                this.query()
            }).catch(() => {
                this.$message.error('保存失败')
            })
        },
        // 查询归档配置
        query() {
            queryAPI().then(res => {
                console.log('查询归档配置: ', res)
                const list = Array.isArray(res.data) ? res.data : []
                const periodic = list[0] || {}
                const nonPeriodic = list[1] || {}

                // 第一条：定期归档配置
                this.periodicEnabled = (periodic.useStatus !== undefined && periodic.useStatus !== null)
                  ? String(periodic.useStatus) === '1'
                  : this.periodicEnabled
                this.periodicCycle = periodic.cycle || this.periodicCycle
                this.dailyTime = periodic.time || this.dailyTime
                this.weeklyTime = periodic.time || this.weeklyTime
                this.weeklyDay = periodic.weekOfDay || this.weeklyDay
                this.monthTime = periodic.time || this.monthTime
                this.monthlyDay = periodic.monthDay || this.monthlyDay

                // 第二条：不定期归档配置
                this.nonPeriodicEnabled = (nonPeriodic.useStatus !== undefined && nonPeriodic.useStatus !== null)
                  ? String(nonPeriodic.useStatus) === '1'
                  : this.nonPeriodicEnabled
                this.nonPeriodicDateTime = nonPeriodic.time || this.nonPeriodicDateTime
            })
        },
    }
}
</script>

<style scoped>
.section-card {
    margin-bottom: 16px;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.section-title {
    font-weight: 600;
    color: #606266;
}
.section-title i {
    margin-right: 6px;
}
.section-title .el-switch {
    margin-left: 8px;
}
.section-form {
    padding-left: 8px;
}
.section-body {
    padding-left: 8px;
}
.actions {
    margin-top: 8px;
}
</style>