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

<template>
    <el-form :model="form" class="common-form" label-width="auto">
        <el-form-item label="单个订单最少回收本数：" prop="minNum">
            <ele-input
                v-model="form.minNum"
                placeholder="请输入"
                clearable
                suffixStr="本"
            />
        </el-form-item>
        <el-form-item label="单个订单最多回收本数：" prop="maxNum">
            <ele-input
                v-model="form.maxNum"
                placeholder="请输入"
                suffixStr="本"
                clearable
            />
        </el-form-item>
        <el-form-item label="单个订单最少预估金额：" prop="minMoney">
            <ele-input
                v-model="form.minMoney"
                placeholder="请输入"
                clearable
                suffixStr="元"
            />
        </el-form-item>
        <el-form-item label="满足条件：" prop="andOr">
            <el-radio-group v-model="form.andOr">
                <el-radio :label="1">满足任一个</el-radio>
                <el-radio :label="2">需同时满足</el-radio>
            </el-radio-group>
            <div class="ml-4 text-gray-400 text-xs mt-2">（最少本书和最少金额）</div>
        </el-form-item>
        <el-form-item>
            <el-button
                type="success"
                style="width: 100px"
                plain
                @click="onSubmit"
                v-permission="'recycle:orderSetting:recycleOrderSettings'"
                >保存</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';
    import EleInput from '@/components/CommonPage/EleInput.vue';

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

    const form = reactive({
        minNum: '',
        maxNum: '',
        minMoney: '',
        andOr: 1
    });

    watch(
        () => props.settings,
        (newVal) => {
            if (newVal) {
                form.minNum = newVal.recycleOrderMinNum;
                form.maxNum = newVal.recycleOrderMaxNum;
                form.minMoney = newVal.recycleOrderMinMoney;
                form.andOr = newVal.recycleOrderAndOr || 1;
            }
        },
        { immediate: true, deep: true }
    );

    const onSubmit = () => {
        request
            .post('/recycle/manage/overall/update/recycleOrder', {
                minNum: form.minNum,
                maxNum: form.maxNum,
                minMoney: form.minMoney,
                andOr: form.andOr
            })
            .then((res) => {
                if (res.data.code === 200) {
                    ElMessage.success('保存成功');
                } else {
                    ElMessage.error(res.data.msg);
                }
            });
    };
</script>