Kaynağa Gözat

refactor(data-fill): 优化序列号数据填充表单布局

duy 1 ay önce
ebeveyn
işleme
06b036e2ff
1 değiştirilmiş dosya ile 59 ekleme ve 48 silme
  1. 59 48
      src/views/data-fill/collapse-form/push-code.vue

+ 59 - 48
src/views/data-fill/collapse-form/push-code.vue

@@ -7,55 +7,66 @@
             </el-radio-group>
         </div>
         <div v-if="formCode.type === 1" class="mt-2 bg-[#EFF5FF] py-[20px]">
-            <el-form ref="formCodeRef" :model="formCode" :inline="true" class="flex flex-wrap items-center justify-start gap-x-4 gap-y-2 px-4" :rules="formCodeRules">
-                <div class="w-[160px]">
-                    <el-form-item label=" " prop="startNumber1">
-                        <el-input v-model="formCode.startNumber1" placeholder="数值(起)" clearable style="width: 120px;" />
-                    </el-form-item>
-                </div>
-                <div class="w-[160px]">
-                    <el-form-item label=" " prop="endNumber1">
-                        <el-input v-model="formCode.endNumber1" placeholder="数值(始)" clearable style="width: 120px;" />
-                    </el-form-item>
-                </div>
-                <div>
-                    <el-form-item label=" " prop="increType1">
-                        <el-select
-                            v-model="formCode.increType1"
-                            placeholder="递增分类"
-                            clearable
-                            style="width: 120px;"
-                        >
-                            <el-option label="常规递增" :value="1" />
-                            <el-option label="奇数递增" :value="2" />
-                            <el-option label="偶数递增" :value="3" />
-                        </el-select>
-                    </el-form-item>
-                </div>
-                <div>
-                    <el-form-item label=" " prop="cycleType1">
-                        <el-select
-                            v-model="formCode.cycleType1"
-                            placeholder="循环分类"
-                            clearable
-                            style="width: 120px;"
-                        >
-                            <el-option label="固定循环" value="1" />
-                            <el-option label="递增循环" value="2" />
-                        </el-select>
-                    </el-form-item>
-                </div>
-          
-                <div>
-                    <el-form-item label=" " prop="cycleTypeGroup1">
-                        <el-input v-model="formCode.cycleTypeGroup1" placeholder="循环组数" clearable style="width: 120px;" />
-                    </el-form-item>
+            <!-- 添加一个外层容器使内容居中 -->
+            <div class="mx-auto max-w-5xl flex flex-col items-center">
+                <!-- 表单部分 -->
+                <el-form 
+                    ref="formCodeRef" 
+                    :model="formCode" 
+                    :inline="true" 
+                    class="flex flex-wrap items-center justify-center gap-x-2 gap-y-2" 
+                    :rules="formCodeRules"
+                >
+                    <div class="w-[160px]">
+                        <el-form-item label=" " prop="startNumber1">
+                            <el-input v-model="formCode.startNumber1" placeholder="数值(起)" clearable style="width: 120px;" />
+                        </el-form-item>
+                    </div>
+                    <div class="w-[160px]">
+                        <el-form-item label=" " prop="endNumber1">
+                            <el-input v-model="formCode.endNumber1" placeholder="数值(始)" clearable style="width: 120px;" />
+                        </el-form-item>
+                    </div>
+                    <div>
+                        <el-form-item label=" " prop="increType1">
+                            <el-select
+                                v-model="formCode.increType1"
+                                placeholder="递增分类"
+                                clearable
+                                style="width: 120px;"
+                            >
+                                <el-option label="常规递增" :value="1" />
+                                <el-option label="奇数递增" :value="2" />
+                                <el-option label="偶数递增" :value="3" />
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div>
+                        <el-form-item label=" " prop="cycleType1">
+                            <el-select
+                                v-model="formCode.cycleType1"
+                                placeholder="循环分类"
+                                clearable
+                                style="width: 120px;"
+                            >
+                                <el-option label="固定循环" value="1" />
+                                <el-option label="递增循环" value="2" />
+                            </el-select>
+                        </el-form-item>
+                    </div>
+                    <div>
+                        <el-form-item label=" " prop="cycleTypeGroup1">
+                            <el-input v-model="formCode.cycleTypeGroup1" placeholder="循环组数" clearable style="width: 120px;" />
+                        </el-form-item>
+                    </div>
+                </el-form>
+        
+                <!-- 提示文本部分 - 现在也会居中 -->
+                <div class="max-w-3xl w-full px-4 text-left text-orange-500 line-height-10">
+                    <p>提示:起和止分别代表编号数据的开始编号和结束编号</p>
+                    <p>固定循环:起止以内的编号每个数据循环n次,如1-3:1、1、1..n个1/2、2、2..n个2/3、3、3..n个3</p>
+                    <p>递增循环:起止以内的编号递增n次,如1-3:1、2、3/1、2、3/....n次循环1、2、3</p>
                 </div>
-            </el-form>
-            <div class="ml-[150px] max-w-3xl text-left text-orange-500 line-height-10">
-                <p>提示:起和止分别代表编号数据的开始编号和结束编号</p>
-                <p>固定循环:起止以内的编号每个数据循环n次,如1-3:1、1、1..n个1/2、2、2..n个2/3、3、3..n个3</p>
-                <p>递增循环:起止以内的编号递增n次,如1-3:1、2、3/1、2、3/....n次循环1、2、3</p>
             </div>
         </div>
         <div v-if="formCode.type === 2" class="mt-2 flex justify-center bg-[#EFF5FF] py-[20px]">