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

<template>
  <el-form :model="form" class="common-form" label-width="auto" :rules="rules">
    <el-form-item label="单个订单最少回收本数：" prop="dayOrderNum">
      <ele-input
        v-model="form.dayOrderNum"
        placeholder="请输入"
        clearable
        suffixStr="本"
      />
    </el-form-item>
    <el-form-item label="单个订单最多回收本数：" prop="dayOrderTotal">
      <ele-input
        v-model="form.dayOrderTotal"
        placeholder="请输入"
        suffixStr="本"
        clearable
      />
    </el-form-item>
    <el-form-item label="单个订单最少预估金额：" prop="mobile">
      <ele-input
        v-model="form.mobile"
        placeholder="请输入"
        clearable
        suffixStr="元"
      />
    </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 lang="ts" setup>
  import { reactive } from 'vue';
  import EleInput from '@/components/CommonPage/EleInput.vue';

  const form = reactive({
    dayOrderNum: '',
    dayOrderTotal: '',
    mobile: ''
  });

  const rules = reactive({
    dayOrderNum: [
      {
        required: true,
        message: '请输入每人每日申请恢复订单限量',
        trigger: 'blur'
      }
    ],
    dayOrderTotal: [
      {
        required: true,
        message: '请输入每日申请恢复订单总限量',
        trigger: 'blur'
      }
    ],
    mobile: [
      {
        required: true,
        message: '请输入预留手机号',
        trigger: 'blur'
      }
    ]
  });

  const onSubmit = () => {
    console.log('submit!');
  };
</script>