fix: 输入限制

src/views/config/order.vue

@@ -2,26 +2,22 @@
     <div class="list-container">
         <el-form ref="refsForm" v-loading="state.loading" label-width="120px" :model="state.form" :rules="state.rules">
             <el-form-item label="订单创建超过" prop="orderPayExpire">
-                <el-input v-model="state.form.orderPayExpire" :clearable="false" type="number">
-                    <template #append>分</template>
-                </el-input>
+                <el-input-number v-model="state.form.orderPayExpire" :clearable="false" :controls="false" :min="1" />
+                <div class="unit">分</div>
                 <p>未付款，订单自动关闭</p>
             </el-form-item>
             <el-form-item label="订单发货超过" prop="automaticReceipt">
-                <el-input v-model="state.form.automaticReceipt" :clearable="false" type="number">
-                    <template #append>天</template>
-                </el-input>
+                <el-input-number v-model="state.form.automaticReceipt" :clearable="false" :controls="false" :min="1" />
+                <p class="unit">天</p>
                 <p>未收货，订单自动完成</p>
             </el-form-item>
             <el-form-item label="订单完成超过" prop="afterSalesExpire">
-                <el-input v-model="state.form.afterSalesExpire" :clearable="false" type="number">
-                    <template #append>天</template>
-                </el-input>
+                <el-input-number v-model="state.form.afterSalesExpire" :clearable="false" :controls="false" :min="1" />
+                <p class="unit">天</p>
                 <p>自动结束交易，不能申请售后</p>
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="handleUpdate">提交</el-button>
-                <el-button @click="handleSearch">刷新</el-button>
             </el-form-item>
         </el-form>
     </div>
@@ -35,8 +31,8 @@
         loading: false,
         form: {
             orderPayExpire: 30,
-            automaticReceipt: 15,
-            afterSalesExpire: 7,
+            automaticReceipt: 7,
+            afterSalesExpire: 15,
         },
         rules: {
             orderPayExpire: [{ required: true, message: '订单创建超时自动关闭不能为空' }],
@@ -45,8 +41,10 @@
         },
     });
     const handleSearch = async () => {
+        state.loading = true;
         let res = await store.dispatch('orderConfig/search');
         Object.assign(state.form, res);
+        state.loading = false;
     };
     handleSearch();
     const handleUpdate = async () => {
@@ -67,15 +65,26 @@
         justify-content: center;
         align-items: center;
         .el-form {
-            // width: 680px;
             :deep(.el-form-item__content) {
                 flex-wrap: nowrap;
-                .el-input {
-                    width: 120px;
+                .el-input-number {
+                    width: 60px;
                     input {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
                         text-align: center;
                     }
                 }
+                .unit {
+                    margin: 0;
+                    padding: 0 @layout-space;
+                    background: #f1f1f1;
+                    border-top-right-radius: 4px;
+                    border-bottom-right-radius: 4px;
+                    position: relative;
+                    left: -1px;
+                    box-shadow: 0 0 0 1px #dcdfe6 inset;
+                }
                 p {
                     min-width: max-content;
                     margin-left: @layout-space;