修改退回订单的恢复订单功能

src/views/recycle/components/set-params.vue

@@ -1,108 +1,131 @@
 <!-- 编辑弹窗 -->
 <template>
-    <ele-modal form :width="560" v-model="visible" title="设置独立参数" @open="handleOpen">
-        <SimpleForm :items="items" labelWidth="140px" ref="formRef" :initKeys="form"></SimpleForm>
-        <template #footer>
-            <el-button @click="handleCancel">关闭</el-button>
-            <el-button type="primary" @click="handleSumbit">确定</el-button>
-        </template>
-    </ele-modal>
+  <ele-modal
+    form
+    :width="560"
+    v-model="visible"
+    title="设置独立参数"
+    @open="handleOpen"
+  >
+    <el-form :model="form" ref="formRef" label-width="140px" :rules="rules">
+      <el-form-item label="回收折扣" prop="recycleDiscount" required>
+        <el-input v-model="form.recycleDiscount" @input="handleChange" />
+      </el-form-item>
+      <el-form-item label="最大回收数量" prop="recycleMax" required>
+        <el-input v-model="form.recycleMax" @input="handleChange" />
+      </el-form-item>
+      <el-form-item label="单个订单回收数量" prop="recycleMaxPerOrder" required>
+        <el-input v-model="form.recycleMaxPerOrder" @input="handleChange" />
+      </el-form-item>
+      <el-form-item label="状态" prop="settingStatus" required>
+        <el-radio-group v-model="form.settingStatus">
+          <template v-for="item in dictData" :key="item.dictValue">
+            <el-radio :label="item.dictValue">{{ item.dictLabel }}</el-radio>
+          </template>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleCancel">关闭</el-button>
+      <el-button type="primary" @click="handleSumbit">确定</el-button>
+    </template>
+  </ele-modal>
 </template>
 
 <script setup>
-import { ref, reactive, nextTick } from 'vue';
-import SimpleForm from '@/components/CommonPage/SimpleForm.vue';
-import validators from '@/utils/validators';
-import request from '@/utils/request';
+  import { ref, reactive, nextTick } from 'vue';
+  import validators from '@/utils/validators';
+  import request from '@/utils/request';
+  import { useDictData } from '@/utils/use-dict-data';
 
-/** 弹窗是否打开 */
-const visible = defineModel({ type: Boolean });
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
 
-/** 关闭弹窗 */
-const handleCancel = () => {
+  /** 字典数据 */
+  const [dictData] = useDictData(['discount_status']);
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
     visible.value = false;
     nextTick(() => {
-        formRef.value?.resetForm();
+      formRef.value?.resetFields();
     });
-};
+  };
+
+  // 监听输入框的值变化，改成状态为有效
+  function handleChange(value) {
+    if (form.settingStatus == '0') {
+      form.settingStatus = '1';
+    }
+  }
 
-const form = ref({
+  const form = reactive({
     isbn: '',
     recycleDiscount: '',
     recycleMax: '',
     recycleMaxPerOrder: '',
-    settingStatus: '0'
-});
-/** 弹窗打开事件 */
-const handleOpen = (data) => {
+    settingStatus: '1'
+  });
+
+  // 表单校验规则
+  const rules = {
+    recycleDiscount: [
+      { required: true, message: '请输入回收折扣', trigger: 'blur' },
+      validators.money
+    ],
+    recycleMax: [
+      { required: true, message: '请输入最大回收数量', trigger: 'blur' },
+      validators.nonNegativeInteger
+    ],
+    recycleMaxPerOrder: [
+      { required: true, message: '请输入单个订单回收数量', trigger: 'blur' },
+      validators.nonNegativeInteger
+    ],
+    settingStatus: [
+      { required: true, message: '请选择状态', trigger: 'change' }
+    ]
+  };
+
+  /** 弹窗打开事件 */
+  const handleOpen = (data) => {
     visible.value = true;
     nextTick(() => {
-        if (data?.isbn) {
-            form.value.isbn = data.isbn;
-            getParams(data.isbn);
-        }
+      if (data?.isbn) {
+        form.isbn = data.isbn;
+        getParams(data.isbn);
+      }
     });
-};
-//根据isbn获取参数
-const getParams = (isbn) => {
+  };
+
+  //根据isbn获取参数
+  const getParams = (isbn) => {
     request.get(`/book/bookRecycleInfo/getSepSet/${isbn}`).then((res) => {
-        let data = res.data.data;
-        console.log(data);
-        form.value.recycleDiscount = data.recycleDiscount;
-        form.value.recycleMax = data.recycleMax;
-        form.value.recycleMaxPerOrder = data.recycleMaxPerOrder;
-        form.value.settingStatus = data.settingStatus;
-        formRef.value?.setData(form.value);
+      let data = res.data.data;
+      console.log(data);
+      form.recycleDiscount = data.recycleDiscount;
+      form.recycleMax = data.recycleMax;
+      form.recycleMaxPerOrder = data.recycleMaxPerOrder;
+      form.settingStatus = data.settingStatus;
     });
-};
-
-
-const items = reactive([
-    {
-        label: '回收折扣',
-        prop: 'recycleDiscount',
-        type: 'input',
-        required: true,
-        rules: [validators.decimalRange]
-    },
-    {
-        label: '最大回收数量',
-        prop: 'recycleMax',
-        type: 'input',
-        required: true,
-        rules: [validators.nonNegativeInteger]
-    },
-    {
-        label: '单个订单回收数量',
-        prop: 'recycleMaxPerOrder',
-        type: 'input',
-        required: true,
-        rules: [validators.nonNegativeInteger]
-    },
-    {
-        label: '状态',
-        prop: 'settingStatus',
-        type: 'dictRadio',
-        props: { code: 'discount_status' },
-        required: true
-    }
-]);
+  };
 
-const formRef = ref();
+  const formRef = ref();
 
-const emit = defineEmits(['refresh']);
-const handleSumbit = () => {
-    formRef.value?.submitForm().then((data) => {
-        data.isbn = form.value.isbn;
+  const emit = defineEmits(['refresh']);
+  const handleSumbit = () => {
+    formRef.value?.validate((valid) => {
+      if (valid) {
+        const data = { ...form };
         request.post('/book/bookRecycleInfo/setSep', data).then(() => {
-            visible.value = false;
-            ElMessage.success('设置成功');
-            emit('refresh');
+          visible.value = false;
+          ElMessage.success('设置成功');
+          emit('refresh');
         });
+      }
     });
-};
+  };
 
-defineExpose({
+  defineExpose({
     handleOpen
-});
+  });
 </script>