8
0
Ver Fonte

refactor(UI): 调整表单布局和样式,优化用户体验

- 在 oss.vue 中,将表单列宽从 12 调整为 18,以更好地展示内容
- 在 paramDetail.vue 中,重构项目选择表单的布局,新增“新增”按钮并优化删除图标样式
- 将表单类型从布尔值改为数字 2,以匹配业务逻辑
duy há 4 meses atrás
pai
commit
d5ebe32997
2 ficheiros alterados com 36 adições e 31 exclusões
  1. 35 30
      src/views/desk/wbs/paramter/paramDetail.vue
  2. 1 1
      src/views/resource/oss.vue

+ 35 - 30
src/views/desk/wbs/paramter/paramDetail.vue

@@ -123,35 +123,40 @@
                 </el-form-item>
        
                 <template v-if="form.type === 2">
-                    <div v-for="(item, index) in proData" :key="index" class="form-container" :style="{ marginTop: index === 0 ? '40px' : '0' }"> 
-                        <!-- 删除图标 -->
-                        <el-button
-                            v-if="index !== 0" type="danger" size="mini"
-                            icon="el-icon-delete" 
-                            circle 
-                            class="delete-icon" 
-                            @click="removeProData(index)"
-                        />
-                        <el-form-item label="选择项目" prop="contractSection" label-width="120px">
-                            <el-select v-model="item.projectName" placeholder="请选择项目" clearable style="width: 100%;" @change="changeProject">
-                                <el-option
-                                    v-for="item1 in projectList1"
-                                    :key="item1.id"
-                                    :label="item1.projectName"
-                                    :value="item1.id"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="选择合同段" prop="contractSection" label-width="120px">
-                            <el-select v-model="item.contractSection" placeholder="请选择合同段" clearable multiple class="multiple-select">
-                                <el-option
-                                    v-for="item2 in contractList"
-                                    :key="item2.id"
-                                    :label="item2.contractName"
-                                    :value="item2.id"
-                                />
-                            </el-select>
-                        </el-form-item>
+                    <!-- 新增图标 -->
+                    <div class="mb-1 text-right">
+                        <el-button hc-btn type="primary" @click="addProData">新增</el-button>
+                    </div>
+                    
+                    <div class="max-h-100 overflow-y-auto">
+                        <div v-for="(item, index) in proData" :key="index" class="form-container"> 
+                            <!-- 删除图标 -->
+                            <HcIcon
+                                name="delete-bin"
+                                class="absolute right-10px top-10px cursor-pointer text-24px text-red"
+                                @click="removeProData(index)"
+                            />
+                            <el-form-item label="选择项目" prop="contractSection" label-width="120px">
+                                <el-select v-model="item.projectName" placeholder="请选择项目" clearable style="width: 100%;" @change="changeProject">
+                                    <el-option
+                                        v-for="item1 in projectList1"
+                                        :key="item1.id"
+                                        :label="item1.projectName"
+                                        :value="item1.id"
+                                    />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="选择合同段" prop="contractSection" label-width="120px">
+                                <el-select v-model="item.contractSection" placeholder="请选择合同段" clearable multiple class="multiple-select">
+                                    <el-option
+                                        v-for="item2 in contractList"
+                                        :key="item2.id"
+                                        :label="item2.contractName"
+                                        :value="item2.id"
+                                    />
+                                </el-select>
+                            </el-form-item>
+                        </div>
                     </div>
                 </template>
             </el-form>
@@ -209,7 +214,7 @@ const isEdit = ref(false)
 const form = ref({
     elementName: '',
     selectedElement: [],
-    type: false,
+    type: 2, // 将 false 改为数字 2,对应"否"选项
 })
 const proData = ref([{}])
 const rules = {

+ 1 - 1
src/views/resource/oss.vue

@@ -41,7 +41,7 @@
         <hc-dialog v-model="isDialogShow" widths="60rem" is-footer-center :title="dialogTitle" @close="dialogClose">
             <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
                 <el-row :gutter="20">
-                    <el-col :span="12">
+                    <el-col :span="18">
                         <el-form-item label="存储分类:" prop="category">
                             <div class="form-item-div">
                                 <el-radio-group v-model="formModel.category">