Ver Fonte

refactor(pressure2/equipboiler): 调整受压元件表单的布局结构

将受压元件模块从原折叠面板位置调整到内部检验信息前,优化页面排版
xuzhancheng há 1 semana atrás
pai
commit
d8e63c2734

+ 82 - 50
yudao-ui-admin-vue3/src/views/pressure2/equipboiler/EquipBoilerForm.vue

@@ -541,6 +541,61 @@
           </el-form-item>
           </el-form-item>
         </div>
         </div>
       </div>
       </div>
+      <div class="form-section">
+        <el-collapse v-model="activeCollapse">
+          <el-collapse-item name="pressureParts">
+            <template #title>
+              <h3 class="collapse-title">受压元件</h3>
+            </template>
+            <div style="margin-bottom: 10px;">
+              <el-button type="primary" size="small" @click="handleAddPressurePart">
+                <Icon icon="ep:plus" class="mr-5px" /> 添加
+              </el-button>
+            </div>
+            <el-table :data="pressureParts" border size="small" style="width: 100%">
+              <el-table-column label="部件" width="180" align="center">
+                <template #default="{ row }">
+                  <el-select v-model="row.partType" placeholder="请选择部件" clearable size="small">
+                    <el-option
+                      v-for="dict in getStrDictOptions(DICT_TYPE.PRESSURE2_BOILER_PART_TYPE)"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="受压元件名称" width="180" align="center">
+                <template #default="{ row }">
+                  <el-input v-model="row.partName" placeholder="请输入" size="small" />
+                </template>
+              </el-table-column>
+              <el-table-column label="规格" width="160" align="center">
+                <template #default="{ row }">
+                  <el-input v-model="row.specification" placeholder="请输入" size="small" />
+                </template>
+              </el-table-column>
+              <el-table-column label="材质" width="160" align="center">
+                <template #default="{ row }">
+                  <el-input v-model="row.material" placeholder="请输入" size="small" />
+                </template>
+              </el-table-column>
+              <el-table-column label="备注" min-width="180" align="center">
+                <template #default="{ row }">
+                  <el-input v-model="row.remark" placeholder="请输入" size="small" />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="80" align="center" fixed="right">
+                <template #default="{ $index }">
+                  <el-button type="danger" size="small" @click="handleRemovePressurePart($index)">
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
       <div class="form-section">
       <div class="form-section">
         <h3>内部检验信息</h3>
         <h3>内部检验信息</h3>
         <div class="form-grid">
         <div class="form-grid">
@@ -766,56 +821,6 @@
           />
           />
         </el-form-item>
         </el-form-item>
       </div>
       </div>
-      <el-collapse v-model="activeCollapse" class="mb-15px">
-        <el-collapse-item title="受压元件" name="pressureParts">
-          <div style="margin-bottom: 10px;">
-            <el-button type="primary" size="small" @click="handleAddPressurePart">
-              <Icon icon="ep:plus" class="mr-5px" /> 添加
-            </el-button>
-          </div>
-          <el-table :data="pressureParts" border size="small" style="width: 100%">
-            <el-table-column label="部件" width="180" align="center">
-              <template #default="{ row }">
-                <el-select v-model="row.partType" placeholder="请选择部件" clearable size="small">
-                  <el-option
-                    v-for="dict in getStrDictOptions(DICT_TYPE.PRESSURE2_BOILER_PART_TYPE)"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                  />
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column label="受压元件名称" width="180" align="center">
-              <template #default="{ row }">
-                <el-input v-model="row.partName" placeholder="请输入" size="small" />
-              </template>
-            </el-table-column>
-            <el-table-column label="规格" width="160" align="center">
-              <template #default="{ row }">
-                <el-input v-model="row.specification" placeholder="请输入" size="small" />
-              </template>
-            </el-table-column>
-            <el-table-column label="材质" width="160" align="center">
-              <template #default="{ row }">
-                <el-input v-model="row.material" placeholder="请输入" size="small" />
-              </template>
-            </el-table-column>
-            <el-table-column label="备注" min-width="180" align="center">
-              <template #default="{ row }">
-                <el-input v-model="row.remark" placeholder="请输入" size="small" />
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="80" align="center" fixed="right">
-              <template #default="{ $index }">
-                <el-button type="danger" size="small" @click="handleRemovePressurePart($index)">
-                  删除
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-collapse-item>
-      </el-collapse>
     </el-form>
     </el-form>
     <template #footer>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -1367,6 +1372,33 @@ const changeAddress = ()=> {
   border-left: 3px solid #409EFF;
   border-left: 3px solid #409EFF;
 }
 }
 
 
+.collapse-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 0 16px;
+  color: #303133;
+  padding-left: 8px;
+  border-left: 3px solid #409EFF;
+}
+
+:deep(.form-section .el-collapse) {
+  border: none;
+}
+
+:deep(.form-section .el-collapse-item__header) {
+  height: auto;
+  line-height: 1.5;
+  border-bottom: none;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  background: transparent;
+}
+
+:deep(.form-section .el-collapse-item__wrap) {
+  border-bottom: none;
+}
+
 .form-grid {
 .form-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-columns: repeat(4, 1fr);