修改样式

src/common/portrait.styl

@@ -104,6 +104,10 @@
   margin-top: 16px;
 }
 
+.mb-0{
+  margin-bottom: 0px;
+}
+
 .mb-1{
   margin-bottom: 4px;
 }
@@ -148,6 +152,14 @@
   margin-left: 32px;
 }
 
+.ml-9{
+  margin-left: 36px;
+}
+
+.ml-10{
+  margin-left: 40px;
+}
+
 .mr-1{
   margin-right: 4px;
 }

src/components/CaseTable/CaseKTOne.vue

@@ -1,25 +1,69 @@
 <template>
   <div class="flex-column">
-    <a-form :form="form">
-      <div v-for="(item, index) in caseList" :key="index" style="width: 100%">
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="item.name" label-align="left">
-          <a-form-item v-if="item.optionStatus === 1" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+    <!-- <a-form :form="form">
+      <div :key="index" style="width: 100%" v-for="(item, index) in caseList">
+        <a-form-item
+          :label="item.name"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label-align="left"
+          class="mb-2"
+        >
+          <a-form-item
+            :label-col="formItemLayout.labelCol"
+            :wrapper-col="formItemLayout.wrapperCol"
+            v-if="item.optionStatus === 1"
+          >
             <a-input-number
-              placeholder="最小值"
-              style="width: 100px; margin-left: 40px"
               :min="0"
               @change="onChange($event, item.code, 'min')"
+              placeholder="最小值"
+              style="width: 100px; margin-left: 40px"
             />~
-            <a-input-number placeholder="最大值" style="width: 100px" :min="0" @change="onChange($event, item.code, 'max')" />
+            <a-input-number
+              :min="0"
+              @change="onChange($event, item.code, 'max')"
+              placeholder="最大值"
+              style="width: 100px"
+            />
           </a-form-item>
-          <!-- <a-form-item
-            :label-col="formItemLayout.labelCol"
-            :wrapper-col="formItemLayout.wrapperCol"
+          <CaseKTTwo
+            :case-list="item.children"
+            style="margin-top: 40px"
             v-if="item.children.length > 0"
-            label-align="left"
-          > -->
-          <CaseKTTwo v-if="item.children.length > 0" :case-list="item.children" style="margin-top: 40px" />
-          <!-- </a-form-item> -->
+          />
+        </a-form-item>
+      </div>
+    </a-form>-->
+    <a-form :form="form">
+      <div :key="index" style="width: 100%" v-for="(item, index) in caseList">
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          class="d-flex align-center mb-3"
+          label-align="left"
+        >
+          <div class="d-flex flex-row">
+            <h3 class="font-bold">{{ item.name }}：</h3>
+            <div class="d-flex flex-row" v-if="item.optionStatus === 1">
+              <a-input-number
+                :min="0"
+                @change="onChange($event, item.code, 'min')"
+                placeholder="最小值"
+                style="width: 150px;"
+                v-model="item.minValue"
+              />
+              <div class="px-2">~</div>
+              <a-input-number
+                :min="0"
+                @change="onChange($event, item.code, 'max')"
+                placeholder="最大值"
+                style="width: 150px"
+                v-model="item.maxValue"
+              />
+            </div>
+          </div>
+          <case-KT-two :case-list="item.children" v-show="item.children.length > 0" />
         </a-form-item>
       </div>
     </a-form>

src/components/CaseTable/CaseKTTwo.vue

@@ -1,30 +1,68 @@
 <template>
   <div class="flex-column">
-    <a-form :form="form">
-      <div v-for="(item, index) in caseList" :key="index" style="width: 100%">
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="item.name">
+    <!-- <a-form :form="form">
+      <div :key="index" style="width: 100%" v-for="(item, index) in caseList">
+        <a-form-item
+          :label="item.name"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+        >
           <a-form-item
-            v-if="item.optionStatus === 1"
             :label-col="formItemLayout.labelCol"
             :wrapper-col="formItemLayout.wrapperCol"
             label-align="left"
+            v-if="item.optionStatus === 1"
           >
             <a-input-number
-              placeholder="最小值"
-              style="width: 100px; margin-left: 40px"
               :min="0"
               @change="onChange1($event, item.code, 'min')"
+              placeholder="最小值"
+              style="width: 100px; margin-left: 40px"
             />~
-            <a-input-number placeholder="最大值" style="width: 100px" :min="0" @change="onChange1($event, item.code, 'max')" />
+            <a-input-number
+              :min="0"
+              @change="onChange1($event, item.code, 'max')"
+              placeholder="最大值"
+              style="width: 100px"
+            />
           </a-form-item>
-          <!-- <a-form-item
-            :label-col="formItemLayout.labelCol"
-            :wrapper-col="formItemLayout.wrapperCol"
+          <CaseKTOne
+            :case-list="item.children"
+            style="margin-top: 40px"
             v-if="item.children.length > 0"
-            label-align="left"
-          > -->
-          <CaseKTOne v-if="item.children.length > 0" :case-list="item.children" style="margin-top: 40px" />
-          <!-- </a-form-item> -->
+          />
+        </a-form-item>
+      </div>
+    </a-form>-->
+    <a-form :form="form">
+      <div :key="index" v-for="(item, index) in caseList">
+        <a-form-item class="mb-2">
+          <div class="d-flex flex-column">
+            <div class="d-flex flex-row">
+              <span
+                :class="item.children.length > 0 ? 'font-weight-bold' : ''"
+                class="ml-8"
+              >{{ item.name }}：</span>
+              <div class="d-flex flex-row" v-if="item.optionStatus === 1">
+                <a-input-number
+                  :min="0"
+                  @change="onChange1($event, item.code, 'min')"
+                  placeholder="最小值"
+                  style="width: 150px;"
+                  v-model="item.minValue"
+                />
+                <div class="px-2">~</div>
+                <a-input-number
+                  :min="0"
+                  @change="onChange1($event, item.code, 'max')"
+                  placeholder="最大值"
+                  style="width: 150px"
+                  v-model="item.maxValue"
+                />
+              </div>
+            </div>
+            <case-KT-one :case-list="item.children" class="ml-10" v-if="item.children.length > 0" />
+          </div>
         </a-form-item>
       </div>
     </a-form>