shuhi-ui/src/views/recycle/orderSetting/components/auto-cancel-order.vue

<template>
    <el-form :model="form" class="common-form" label-width="auto">
        <el-form-item label="已扫码-待提交：">
            <div class="flex items-center">
                <el-checkbox v-model="form.submitSwitch" :true-label="1" :false-label="0">开启</el-checkbox>
                <ele-text class="ml-6">
                    待提交状态的订单，在距离最后一次扫码
                    <el-input v-model="form.submitHours" placeholder="请输入" clearable style="width: 100px" />
                    小时后，系统自动取消订单。
                </ele-text>
                <ele-text type="info" class="ml-6">取消后不可恢复订单</ele-text>
            </div>
        </el-form-item>
        <el-form-item label="已初审-待上门取件：">
            <div class="flex items-center">
                <el-checkbox v-model="form.pickUpSwitch" :true-label="1" :false-label="0">开启</el-checkbox>
                <ele-text class="ml-6">
                    待上门取件的订单，路由信息
                    <el-input v-model="form.pickUpDays" placeholder="请输入" clearable style="width: 100px" />
                    天未更新时，系统自动取消回收订单。
                </ele-text>
                <ele-text type="info" class="ml-6">取消后3个月内可恢复订单</ele-text>
            </div>
        </el-form-item>

        <el-form-item>
            <el-button type="success" style="width: 100px" plain @click="onSubmit">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';

const props = defineProps({
    settings: {
        type: Object,
        default: () => ({})
    }
});

const form = reactive({
    submitSwitch: 0,
    submitHours: '',
    pickUpSwitch: 0,
    pickUpDays: ''
});

watch(() => props.settings, (newVal) => {
    if (newVal) {
        form.submitSwitch = newVal.autoCancelSubmitSwitch;
        form.submitHours = newVal.autoCancelSubmitHours;
        form.pickUpSwitch = newVal.autoCancelPickUpSwitch;
        form.pickUpDays = newVal.autoCancelPickUpDays;
    }
}, { immediate: true, deep: true });

const onSubmit = () => {
    request.post('/recycle/manage/overall/update/autoCancel', {
        submitSwitch: form.submitSwitch,
        submitHours: form.submitHours,
        pickUpSwitch: form.pickUpSwitch,
        pickUpDays: form.pickUpDays
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('保存成功');
        } else {
            ElMessage.error(res.data.msg)
        }   
    });
};
</script>