edit 规则维护 ：修改样式

src/components/knowledgeExtra/AddNewRule.vue

@@ -11,14 +11,14 @@
     box-sizing: border-box;
     background: #fff;
     padding: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    .table_flex_item {
-      min-width: 25%;
-      // flex: 1;
-      padding-right: 20px;
-      box-sizing: border-box;
-    }
+    // display: flex;
+    // flex-wrap: wrap;
+    // .table_flex_item {
+    //   min-width: 25%;
+    //   // flex: 1;
+    //   padding-right: 20px;
+    //   box-sizing: border-box;
+    // }
   }
   /deep/ .el-input--mini .el-input__inner,
   .el-select {
@@ -28,6 +28,12 @@
     margin-top: -8px;
     font-size: 12px;
     color: red;
+    // transform: scale(.8, .8); 
+  }
+  .form_btn {
+    width: 100%;
+    margin: 20px 0;
+    text-align: center;
   }
 }
 </style>
@@ -40,120 +46,133 @@
     ></crumbs>
     <div class="AddRuleContent">
       <el-form size="mini" :model="form" :rules="rules" ref="ruleForm">
-        <div class="table_form">
-          <!-- 规则名称 -->
-          <el-form-item
-            class="table_flex_item"
-            label-width="130px"
-            label="规则名称："
-            prop="parDescription"
-          >
-            <el-input style="width: 100%" v-model.trim="form.parDescription" />
-          </el-form-item>
-          <!-- 规则类型 -->
-          <el-form-item
-            class="table_flex_item"
-            label-width="130px"
-            label="规则类型："
-            prop="parRuleType"
-          >
-            <el-select
-              v-model="form.parRuleType"
-              placeholder="请选择"
-              @change="ruleTypeChange"
+        <!-- <div class="table_form"> -->
+        <el-row :gutter="20" class="table_form">
+          <el-col :span="8">
+            <!-- 规则名称 -->
+            <el-form-item
+              label-width="130px"
+              label="规则名称："
+              prop="parDescription"
             >
-              <el-option
-                v-for="item in ruleTypeList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+              <el-input
+                style="width: 100%"
+                v-model.trim="form.parDescription"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <!-- 规则类型 -->
+            <el-form-item
+              label-width="130px"
+              label="规则类型："
+              prop="parRuleType"
+            >
+              <el-select
+                v-model="form.parRuleType"
+                placeholder="请选择"
+                @change="ruleTypeChange"
               >
-              </el-option>
-            </el-select>
-            <div class="tip_text">
-              注：更改规则类型，将会清空已填写的规则内容~
-            </div>
-          </el-form-item>
-          <!-- 规则术语类型： -->
-          <el-form-item
-            class="table_flex_item"
-            label-width="130px"
-            label="规则术语类型："
-            prop="parLenCode"
-          >
-            <el-select
-              v-model="form.parLenCode"
-              placeholder="请选择"
-              @change="ruleTermChange"
+                <el-option
+                  v-for="item in ruleTypeList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <div class="tip_text">
+                注：更改规则类型，将会清空已填写的规则内容~
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <!-- 规则术语类型： -->
+            <el-form-item
+              label-width="130px"
+              label="规则术语类型："
+              prop="parLenCode"
             >
-              <el-option
-                v-for="item in ruleTermTypeList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.code"
+              <el-select
+                v-model="form.parLenCode"
+                placeholder="请选择"
+                @change="ruleTermChange"
               >
-              </el-option>
-            </el-select>
-            <div class="tip_text">
-              注：更改规则术语类型，将会清空已填写的规则内容~
-            </div>
-          </el-form-item>
-          <!-- 医学标准术语 -->
-          <el-form-item
-            class="table_flex_item"
-            label-width="130px"
-            label="医学标准术语："
-            prop="parConceptId"
-          >
-            <el-select
-              clearable
-              filterable
-              remote
-              :remote-method="searchConcept"
-              v-model.trim="form.parConceptId"
-              @change="parConceptIdChange"
+                <el-option
+                  v-for="item in ruleTermTypeList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.code"
+                >
+                </el-option>
+              </el-select>
+              <div class="tip_text">
+                注：更改规则术语类型，将会清空已填写的规则内容~
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              label-width="130px"
+              label="医学标准术语："
+              prop="parConceptId"
             >
-              <el-option
-                v-for="item in conceptList"
-                :key="item.conceptId"
-                :label="item.conceptName"
-                :value="item.conceptId"
+              <el-select
+                clearable
+                filterable
+                remote
+                :remote-method="searchConcept"
+                v-model.trim="form.parConceptId"
+                @change="parConceptIdChange"
               >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            class="table_flex_item"
-            label-width="130px"
-            v-if="showHasSub"
-            label="有无子条件："
-            prop="parHasSub"
-          >
-            <el-select
-              v-model="form.parHasSub"
-              placeholder="请选择"
-              @change="hasSubChange"
+                <el-option
+                  v-for="item in conceptList"
+                  :key="item.conceptId"
+                  :label="item.conceptName"
+                  :value="item.conceptId"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              label-width="130px"
+              v-if="showHasSub"
+              label="有无子条件："
+              prop="parHasSub"
             >
-              <el-option label="有" :value="1"></el-option>
-              <el-option label="无" :value="0"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            class="table_flex_item"
-            style="flex: 1; minwidth: 500px"
-            label-width="130px"
-            v-if="showMsg"
-            label="附加信息："
-            prop="parMsg"
-          >
-            <el-input
-              type="textarea"
-              :rows="3"
-              placeholder="请输入附加信息"
-              v-model.trim="form.parMsg"
-            ></el-input>
-          </el-form-item>
-        </div>
+              <el-select
+                v-model="form.parHasSub"
+                placeholder="请选择"
+                @change="hasSubChange"
+              >
+                <el-option label="有" :value="1"></el-option>
+                <el-option label="无" :value="0"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              style="flex: 1; minwidth: 500px"
+              label-width="130px"
+              v-if="showMsg"
+              label="附加信息："
+              prop="parMsg"
+            >
+              <el-input
+                type="textarea"
+                :rows="3"
+                placeholder="请输入附加信息"
+                v-model.trim="form.parMsg"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+
+          <!-- 医学标准术语 -->
+        </el-row>
+        <!-- </div> -->
         <!-- 表格 -->
         <AddNewRuleTable
           v-if="form.parHasSub"
@@ -167,9 +186,14 @@
           @setFormData="setFormData"
         />
         <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')"
-            >立即创建</el-button
-          >
+          <div class="form_btn">
+            <el-button
+              type="primary"
+              size="medium "
+              @click="submitForm('ruleForm')"
+              >立即创建</el-button
+            >
+          </div>
         </el-form-item>
       </el-form>
     </div>
@@ -288,6 +312,7 @@ export default {
     },
     // 提交
     submitForm(formName) {
+      console.log("???????????????");
       this.$refs[formName].validate((valid) => {
         if (valid) {
           let params = JSON.parse(JSON.stringify(this.form));
@@ -485,8 +510,8 @@ export default {
         this.form.klRuleByIdSub.splice(arg.index + 1, 0, obj);
       } else {
         // 添加分组 在列表中相同groupId之后添加
-        // 添加分组时判断是否需要加disabled和添加默认值
 
+        // 添加分组时判断是否需要加disabled和添加默认值
         if (this.form.parHasSub && this.firstPlace) {
           obj.disabled = true;
           const dict =

src/components/knowledgeExtra/AddNewRuleTable.vue

@@ -228,7 +228,7 @@
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="规则具体内容" min-width="800px" prop="">
+      <el-table-column label="规则具体内容" min-width="900px" prop="">
         <template slot-scope="scope">
           <div class="type_content">
             <el-form-item
@@ -252,69 +252,71 @@
             <!-- v-if="klRuleByIdSub[scope.$index].dataType === '1'" -->
             <el-form-item
               class="type_content_item"
-              style="flex: 2"
+              style="flex: 2;margin:0 10px"
               label="最大值："
               v-if="scope.row.dataType === '1'"
             >
               <div>
-                <el-col :span="6">
-                  <el-form-item
-                    :prop="`klRuleByIdSub[${scope.$index}].subMaxOperator`"
-                    :rules="[
-                      {
-                        validator: (rule, value, callback) => {
-                          subMaxOperator(scope, rule, value, callback);
-                        },
-                        trigger: 'blur'
-                      }
-                    ]"
-                  >
-                    <el-select
-                      v-model="scope.row.subMaxOperator"
-                      placeholder="请选择"
-                      clearable
+                <el-row :gutter="10">
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="`klRuleByIdSub[${scope.$index}].subMaxOperator`"
+                      :rules="[
+                        {
+                          validator: (rule, value, callback) => {
+                            subMaxOperator(scope, rule, value, callback);
+                          },
+                          trigger: 'blur'
+                        }
+                      ]"
                     >
-                      <el-option
-                        v-for="item in operMaxList"
-                        :key="item.key"
-                        :label="item.name"
-                        :value="item.key"
+                      <el-select
+                        v-model="scope.row.subMaxOperator"
+                        placeholder="请选择"
+                        clearable
                       >
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item
-                    :prop="`klRuleByIdSub[${scope.$index}].subMaxValue`"
-                    :rules="[
-                      {
-                        validator: (rule, value, callback) => {
-                          subMaxValue(scope, rule, value, callback);
-                        },
-                        trigger: 'blur'
-                      }
-                    ]"
-                  >
-                    <el-input
-                      type="text"
-                      v-model="scope.row.subMaxValue"
-                      placeholder="填写数值"
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item
-                    :prop="`klRuleByIdSub[${scope.$index}].subMaxUnit`"
-                    :rules="rules.subMaxUnit"
-                  >
-                    <el-input
-                      type="text"
-                      v-model.trim="scope.row.subMaxUnit"
-                      placeholder="填写单位"
-                    />
-                  </el-form-item>
-                </el-col>
+                        <el-option
+                          v-for="item in operMaxList"
+                          :key="item.key"
+                          :label="item.name"
+                          :value="item.key"
+                        >
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="`klRuleByIdSub[${scope.$index}].subMaxValue`"
+                      :rules="[
+                        {
+                          validator: (rule, value, callback) => {
+                            subMaxValue(scope, rule, value, callback);
+                          },
+                          trigger: 'blur'
+                        }
+                      ]"
+                    >
+                      <el-input
+                        type="text"
+                        v-model="scope.row.subMaxValue"
+                        placeholder="填写数值"
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="`klRuleByIdSub[${scope.$index}].subMaxUnit`"
+                      :rules="rules.subMaxUnit"
+                    >
+                      <el-input
+                        type="text"
+                        v-model.trim="scope.row.subMaxUnit"
+                        placeholder="填写单位"
+                      />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
               </div>
             </el-form-item>
             <el-form-item
@@ -324,64 +326,66 @@
               v-if="scope.row.dataType === '1'"
             >
               <div class="select-item clearfix">
-                <el-col :span="6">
-                  <el-form-item
-                    :prop="`klRuleByIdSub[${scope.$index}].subMinOperator`"
-                    :rules="[
-                      {
-                        validator: (rule, value, callback) => {
-                          subMinOperatorRule(scope, rule, value, callback);
-                        },
-                        trigger: 'blur'
-                      }
-                    ]"
-                  >
-                    <el-select
-                      v-model="scope.row.subMinOperator"
-                      placeholder="请选择"
-                      clearable
+                <el-row :gutter="10">
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="`klRuleByIdSub[${scope.$index}].subMinOperator`"
+                      :rules="[
+                        {
+                          validator: (rule, value, callback) => {
+                            subMinOperatorRule(scope, rule, value, callback);
+                          },
+                          trigger: 'blur'
+                        }
+                      ]"
                     >
-                      <el-option
-                        v-for="item in operMinList"
-                        :key="item.name"
-                        :label="item.name"
-                        :value="item.name"
+                      <el-select
+                        v-model="scope.row.subMinOperator"
+                        placeholder="请选择"
+                        clearable
                       >
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item
-                    :prop="`klRuleByIdSub[${scope.$index}].subMinValue`"
-                    :rules="[
-                      {
-                        validator: (rule, value, callback) => {
-                          subMinValueRule(scope, rule, value, callback);
-                        },
-                        trigger: 'blur'
-                      }
-                    ]"
-                  >
-                    <el-input
-                      type="text"
-                      v-model="scope.row.subMinValue"
-                      placeholder="填写数值"
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item
-                    :prop="`klRuleByIdSub[${scope.$index}].subMinUnit`"
-                    :rules="rules.subMinUnit"
-                  >
-                    <el-input
-                      type="text"
-                      v-model.trim="scope.row.subMinUnit"
-                      placeholder="填写单位"
-                    />
-                  </el-form-item>
-                </el-col>
+                        <el-option
+                          v-for="item in operMinList"
+                          :key="item.name"
+                          :label="item.name"
+                          :value="item.name"
+                        >
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="`klRuleByIdSub[${scope.$index}].subMinValue`"
+                      :rules="[
+                        {
+                          validator: (rule, value, callback) => {
+                            subMinValueRule(scope, rule, value, callback);
+                          },
+                          trigger: 'blur'
+                        }
+                      ]"
+                    >
+                      <el-input
+                        type="text"
+                        v-model="scope.row.subMinValue"
+                        placeholder="填写数值"
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="`klRuleByIdSub[${scope.$index}].subMinUnit`"
+                      :rules="rules.subMinUnit"
+                    >
+                      <el-input
+                        type="text"
+                        v-model.trim="scope.row.subMinUnit"
+                        placeholder="填写单位"
+                      />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
               </div>
             </el-form-item>
             <!-- v-if="klRuleByIdSub[scope.$index].subType !== 6 && klRuleByIdSub[scope.$index].dataType === '2'" -->