浏览代码

试验容器

iZaiZaiA 2 年之前
父节点
当前提交
b9bceb286f
共有 2 个文件被更改,包括 39 次插入4 次删除
  1. 13 0
      src/styles/app/element.scss
  2. 26 4
      src/views/tentative/parameter/container.vue

+ 13 - 0
src/styles/app/element.scss

@@ -155,8 +155,21 @@
             margin-left: 12px;
         }
     }
+    &.el-form--label-top .hc-form-item .el-form-item .el-form-item__label {
+        position: relative;
+        .solt-label {
+            position: relative;
+            width: calc(100% - 100px);
+        }
+        .solt-extra {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
 }
 
+
 //滚动条
 .el-scrollbar {
     overflow: initial;

+ 26 - 4
src/views/tentative/parameter/container.vue

@@ -70,25 +70,47 @@
         </div>
 
         <!--新增/编辑 节点-->
-        <HcDialog :show="addEditNodeFormModal" title="新增/编辑 试验容器" widths="35rem" :loading="addEditNodeFormLoading" @save="addEditNodeFormModalSave" @close="addEditNodeFormModalClose">
+        <HcDialog :show="addEditNodeFormModal" title="新增/编辑 试验容器" widths="30rem" isRowFooter @close="addEditNodeFormModalClose">
             <el-form :model="addEditNodeFormModel" label-width="auto" label-position="top" size="large">
-                <el-form-item class="mb-0" label="试验容器名称">
+                <el-form-item label="试验容器名称">
                     <el-input v-model="addEditNodeFormModel.key1" placeholder="请输入试验容器名称"/>
                 </el-form-item>
                 <template v-for="item in addEditNodeData">
                     <div class="hc-form-item">
-                        <el-form-item label="数据类型">
+                        <el-form-item class="w-32" label="数据类型" style="flex: initial;">
                             <el-select v-model="item.type" block>
                                 <el-option label="文本" :value="1"/>
                                 <el-option label="日期框" :value="2"/>
                             </el-select>
                         </el-form-item>
-                        <el-form-item label="表头名">
+                        <el-form-item label="字段名">
+                            <template #label>
+                                <div class="solt-label">字段名</div>
+                                <div class="solt-extra">
+                                    <el-button type="primary" plain size="small">删除当前行</el-button>
+                                </div>
+                            </template>
                             <el-input v-model="item.name" block/>
                         </el-form-item>
                     </div>
                 </template>
             </el-form>
+            <template #leftRowFooter>
+                <el-button size="large">
+                    <HcIcon name="add"/>
+                    <span>加字段</span>
+                </el-button>
+            </template>
+            <template #rightRowFooter>
+                <el-button size="large" @click="addEditNodeFormModalClose">
+                    <HcIcon name="close"/>
+                    <span>取消</span>
+                </el-button>
+                <el-button type="primary" hc-btn :loading="addEditNodeFormLoading" @click="addEditNodeFormModalSave">
+                    <HcIcon name="check"/>
+                    <span>提交</span>
+                </el-button>
+            </template>
         </HcDialog>
 
         <!--新增/编辑-->