edit 规则维护 :基础布局完成、功能完成，剩余逻辑联动及提交

src/components/knowledgeExtra/AddNewRule.vue

@@ -150,12 +150,16 @@
         </div>
         <!-- 表格 -->
         <AddNewRuleTable
-          v-if="form.klRuleInfoSaveSub.length != 0"
+          v-if="form.parHasSub === 1"
           :klRuleInfoSaveSub="form.klRuleInfoSaveSub"
           :baseTypes="baseTypeList"
           :baseTermTypeList="baseTermTypeList"
+          :maxNum="subRuleMaxNum"
           @subTypeChange="subTypeChange"
           @searchConcept="searchConcept"
+          @addGroup="addGroup"
+          @delGroup="delGroup"
+          @delGroupChild="delGroupChild"
         />
       </el-form>
     </div>
@@ -212,6 +216,8 @@ export default {
       this.form.parMsg = "";
       const obj = this.ruleTypeList.find((it) => it.id === val); //console.log('???',val,obj)
       this.ruleTermTypeList = obj.subMenuList;
+      this.subRuleMaxNum = undefined;
+      this.setInitGroupData();
     },
     // table_form 规则术语类型选中
     ruleTermChange(val) {
@@ -220,30 +226,39 @@ export default {
       this.form.parLenName = obj.name;
       this.baseTypeList = obj.subMenuList;
       this.subRuleMaxNum = obj.number;
-      // this.setInitGroupData();
+      this.setInitGroupData();
       this.form.parHasSub = obj.subMenuList.length ? 1 : 0;
     },
+    // 初始化表格
+    setInitGroupData() {
+      const date = new Date().valueOf();
+      this.form.klRuleInfoSaveSub = [
+        {
+          groupId: date,
+          groupChildId: "child" + new Date().valueOf(),
+          subDescription: "",
+          parRuleType: "",
+          subConceptId: "",
+          subType: "",
+          subMaxOperator: "",
+          subMaxUnit: "",
+          subMaxValue: "",
+          subMinOperator: "",
+          subMinUnit: "",
+          subMinValue: "",
+          subEqValue: "",
+          subLenCode: "",
+          dataType: ""
+        }
+      ];
+      this.form.parConceptId = ""; //医学标准术语清空
+      this.conceptList = []; //下拉列表清空
+    },
     // 有无子条件切换
     hasSubChange(val) {
       if (val) {
         console.log(val);
-        this.form.klRuleInfoSaveSub = [
-          {
-            subDescription: "",
-            parRuleType: "",
-            subConceptId: "",
-            subType: "",
-            subMaxOperator: "",
-            subMaxUnit: "",
-            subMaxValue: "",
-            subMinOperator: "",
-            subMinUnit: "",
-            subMinValue: "",
-            subEqValue: "",
-            subLenCode: "",
-            dataType: ""
-          }
-        ];
+        this.setInitGroupData();
       } else {
         this.form.klRuleInfoSaveSub = [];
       }
@@ -254,7 +269,6 @@ export default {
       const obj = this.baseTypeList.find((it) => it.type === val);
       console.log("??", val, this.baseTypeList, obj);
       this.baseTermTypeList = obj.subMenuList;
-
       this.form.klRuleInfoSaveSub[index].subLenCode = "";
       this.form.klRuleInfoSaveSub[index].dataType = "";
       this.clearConcept(index);
@@ -274,6 +288,62 @@ export default {
       this.form.klRuleInfoSaveSub[index].subEqValue = "";
       this.form.klRuleInfoSaveSub[index].subEqOperator = "";
     },
+    // 添加分组 || 规则
+    addGroup(date, arg = { index: null, groupId: null }) {
+      /**
+       * @params
+       *    date:存在则添加规则 不存在则添加分组
+       *    arg:{index:添加规则用索引，groupId:添加分组用确切id}
+       */
+      !date && (date = new Date().valueOf());
+      const obj = {
+        groupId: date,
+        groupChildId: "child" + new Date().valueOf(),
+        subDescription: "",
+        parRuleType: "",
+        subConceptId: "",
+        subType: "",
+        subMaxOperator: "",
+        subMaxUnit: "",
+        subMaxValue: "",
+        subMinOperator: "",
+        subMinUnit: "",
+        subMinValue: "",
+        subEqValue: "",
+        subLenCode: "",
+        dataType: ""
+      };
+      if (typeof arg.index == "number") {
+        // 添加规则 直接在当前位置之后添加
+        this.form.klRuleInfoSaveSub.splice(arg.index + 1, 0, obj);
+      } else {
+        // 添加分组 在列表中相同groupId之后添加
+        var i = -1;
+        this.form.klRuleInfoSaveSub.forEach((item, inx) => {
+          console.log("look", item.groupId, arg.groupId);
+          if (item.groupId === arg.groupId) {
+            i = inx;
+          }
+        });
+        console.log("inx", i);
+        this.form.klRuleInfoSaveSub.splice(i + 1, 0, obj);
+      }
+    },
+    // 删除分组
+    delGroup(groupId) {
+      console.log("groupId", groupId);
+      const list = this.form.klRuleInfoSaveSub.filter(
+        (item) => item.groupId != groupId
+      );
+      this.form.klRuleInfoSaveSub = list;
+    },
+    // 删除规则
+    delGroupChild(groupChildId) {
+      const newGroupList = this.form.klRuleInfoSaveSub.filter(
+        (item) => item.groupChildId != groupChildId
+      );
+      this.form.klRuleInfoSaveSub = newGroupList;
+    },
     setDict() {
       this.dict = localStorage.getItem("zskDicts");
       this.msgDict = localStorage.getItem("zskMsgDict");
@@ -341,10 +411,36 @@ export default {
         this.msgDict.indexOf(this.ruleTermCodeStr) > -1
       );
     },
-    showHasSub: function () {
+    showHasSub() {
       return this.subDict.indexOf(this.ruleTermCodeStr) > -1;
     }
   },
+  watch: {
+    // "form.parRuleType": function (val) {
+    //   const obj = this.ruleTypeList.find((it) => it.id === val);
+    //   this.ruleTermTypeList = obj.subMenuList;
+    // },
+    // "form.parLenCode": function (val) {
+    //   if (!val) {
+    //     this.baseTypeList = [];
+    //     return;
+    //   }
+    //   const obj = this.ruleTermTypeList.find((it) => it.code === val);
+    //   this.baseTypeList = obj.subMenuList;
+    //   this.subRuleMaxNum = obj.number;
+    // },
+    // "form.parConceptId": function (val) {
+    //   if (val && this.checkFirstPlace && this.conceptList) {
+    //     this.firstPlace = this.conceptList.find((it) => it.conceptId === val);
+    //     this.firstPlace["checkedType"] = this.ruleTermCodeStr;
+    //   } else if (!val) {
+    //     this.setInitGroupData();
+    //     this.firstPlace = null;
+    //   } else {
+    //     this.firstPlace = null;
+    //   }
+    // }
+  },
   components: { AddNewRuleTable }
 };
 </script>

src/components/knowledgeExtra/AddNewRuleTable.vue

@@ -10,12 +10,18 @@
     width: 100%;
   }
   .btn_box {
-    width: 100px;
+    width: 100%;
     height: 100%;
-    margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-around;
+    .btn_div {
+      flex: 1;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
     img {
       width: 20px;
       height: 20px;
@@ -31,6 +37,13 @@
     /deep/ .el-form-item--mini.el-form-item,
     .el-form-item--small.el-form-item {
       margin: 0;
+      width: 100%;
+    }
+    display: flex;
+    // flex-wrap: wrap;
+    .type_content_item {
+      // flex: 1;
+      // min-width: 200px;
     }
   }
 }
@@ -39,20 +52,61 @@
 <template>
   <!-- :prop="`klRuleInfoSaveSub[${scope.$index}].subDescription`" -->
   <div class="AddNewRuleTable">
-    <el-table border :data="klRuleInfoSaveSub" style="width: 100%" size="mini">
-      <el-table-column width="100px" label="组" prop="groupType">
+    <el-table
+      border
+      :data="klRuleInfoSaveSub"
+      style="width: 100%"
+      size="mini"
+      stripe
+      :span-method="ObjectSpanMethod"
+    >
+      <el-table-column width="80px" label="组" prop="groupType">
         <template slot-scope="scope">
           <div class="btn_box">
-            <img src="../../images/add-new-rule-sub.png" alt="" />
-            <img src="../../images/add-new-rule-del.png" alt="" />
+            <div class="btn_div">
+              <img
+                @click="$emit('addGroup', null, { groupId: scope.row.groupId })"
+                src="../../images/add-new-rule-sub.png"
+                alt=""
+              />
+            </div>
+            <div class="btn_div">
+              <img
+                @click="$emit('delGroup', scope.row.groupId)"
+                v-if="!isLastDate(scope.row.groupId)"
+                src="../../images/add-new-rule-del.png"
+                alt=""
+              />
+            </div>
           </div>
         </template>
       </el-table-column>
-      <el-table-column width="100px" label="基础规则" prop="groupType">
+      <el-table-column
+        width="80px"
+        v-if="maxNum"
+        label="基础规则"
+        prop="groupType"
+      >
         <template slot-scope="scope">
           <div class="btn_box">
-            <img src="../../images/add-new-rule-sub.png" alt="" />
-            <img src="../../images/add-new-rule-del.png" alt="" />
+            <div class="btn_div">
+              <img
+                v-if="!isMax(scope.row.groupId)"
+                @click="
+                  $emit('addGroup', scope.row.groupId, { index: scope.$index })
+                "
+                src="../../images/add-new-rule-sub.png"
+                alt=""
+              />
+            </div>
+            <div class="btn_div">
+              <img
+                @click="$emit('delGroupChild', scope.row.groupChildId)"
+                v-if="klRuleInfoSaveSub.length > 1"
+                src="../../images/add-new-rule-del.png"
+                alt=""
+              />
+            </div>
           </div>
         </template>
       </el-table-column>
@@ -140,10 +194,12 @@
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column min-width="500px" label="规则具体内容" prop="">
+      <el-table-column label="规则具体内容" width="800px" prop="">
         <template slot-scope="scope">
           <div class="type_content">
             <el-form-item
+              class="type_content_item"
+              style="flex: 1.5"
               label="选择类型："
               label-width="100px"
               :prop="`klRuleInfoSaveSub[${scope.$index}].dataType`"
@@ -155,9 +211,14 @@
               </el-select>
             </el-form-item>
             <!-- v-if="klRuleInfoSaveSub[scope.$index].dataType === '1'" -->
-            <el-form-item label="最大值：">
+            <el-form-item
+              class="type_content_item"
+              style="flex: 2"
+              label="最大值："
+              v-if="scope.row.dataType === '1'"
+            >
               <div>
-                <el-col :span="3">
+                <el-col :span="6">
                   <el-form-item
                     :prop="`klRuleInfoSaveSub[${scope.$index}].subMaxOperator`"
                     :rules="[
@@ -199,7 +260,7 @@
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="3">
+                <el-col :span="6">
                   <el-form-item
                     :prop="`klRuleInfoSaveSub[${scope.$index}].subMaxValue`"
                     :rules="[
@@ -239,7 +300,7 @@
                     />
                   </el-form-item>
                 </el-col>
-                <el-col :span="3">
+                <el-col :span="6">
                   <el-form-item
                     :prop="`klRuleInfoSaveSub[${scope.$index}].subMaxUnit`"
                     :rules="rules.subMaxUnit"
@@ -253,9 +314,14 @@
                 </el-col>
               </div>
             </el-form-item>
-            <el-form-item label="最小值：">
+            <el-form-item
+              class="type_content_item"
+              style="flex: 2"
+              label="最小值："
+              v-if="scope.row.dataType === '1'"
+            >
               <div class="select-item clearfix">
-                <el-col :span="3">
+                <el-col :span="6">
                   <el-form-item
                     :prop="`klRuleInfoSaveSub[${scope.$index}].subMinOperator`"
                     :rules="[
@@ -302,7 +368,7 @@
                     </el-select>
                   </el-form-item>
                 </el-col>
-                <el-col :span="3">
+                <el-col :span="6">
                   <el-form-item
                     :prop="`klRuleInfoSaveSub[${scope.$index}].subMinValue`"
                     :rules="[
@@ -342,7 +408,7 @@
                     />
                   </el-form-item>
                 </el-col>
-                <el-col :span="3">
+                <el-col :span="6">
                   <el-form-item
                     :prop="`klRuleInfoSaveSub[${scope.$index}].subMinUnit`"
                     :rules="rules.subMinUnit"
@@ -358,7 +424,11 @@
             </el-form-item>
             <!-- v-if="klRuleInfoSaveSub[scope.$index].subType !== 6 && klRuleInfoSaveSub[scope.$index].dataType === '2'" -->
             <el-form-item
+              class="type_content_item"
+              style="flex: 2"
+              v-if="scope.row.subType !== 6 && scope.row.dataType === '2'"
               label="医学内容："
+              label-width="100px"
               :prop="`klRuleInfoSaveSub[${scope.$index}].subEqValue`"
               :rules="[
                 {
@@ -386,7 +456,10 @@
             </el-form-item>
             <!-- v-if="groupData.subType === 6" -->
             <el-form-item
+              class="type_content_item"
               label="正则表达式："
+              style="flex: 2"
+              v-if="scope.row.subType === 6"
               :prop="`klRuleInfoSaveSub[${scope.$index}].subEqValue`"
               :rules="[
                 {
@@ -405,7 +478,7 @@
             >
               <el-input
                 type="textarea"
-                rows="3"
+                rows="2"
                 placeholder="请输入正则表达式"
                 v-model.trim="scope.row.subEqValue"
               ></el-input>
@@ -438,21 +511,31 @@ export default {
     };
   },
   methods: {
+    // 判断是否为最后一条规则
+    isLastDate(id) {
+      const tableLength = this.klRuleInfoSaveSub.filter(
+        (item) => item.groupId !== id
+      ).length;
+      return tableLength === 0;
+    },
+    // 是否超出最大规则数
+    isMax(id) {
+      const typeNum = this.klRuleInfoSaveSub.filter(
+        (item) => item.groupId === id
+      ).length;
+      return typeNum >= this.maxNum;
+    },
     // 基础规则类型选择
     subTypeChange(e, index) {
-      console.log(e, index);
       this.$emit("subTypeChange", e, index);
     },
     //医学标准术语change
     subConceptIdfocus(index) {
-      console.log(index);
       this.subConceptIdIndex = "";
       this.subConceptIdIndex = index;
     },
     // 医学标准术语
     searchConcept(val) {
-      console.log(val);
-      console.log("subConceptIdIndex", this.subConceptIdIndex);
       const param = {
         excludedConceptIds: [
           this.klRuleInfoSaveSub[this.subConceptIdIndex].subType
@@ -471,6 +554,46 @@ export default {
         .catch((error) => {
           console.log(error);
         });
+    },
+    // 处理要合并相同行的列
+    getSpanArr(data) {
+      this.spanArr = [];
+      for (var i = 0; i < data.length; i++) {
+        if (i === 0) {
+          // 如果是第一条记录（即索引是0的时候），向数组中加入１
+          /** *
+           * 例子：
+           * name:1
+           * name:1
+           * name:2
+           * name:2
+           * 最终结果：spanArr = [2,0,2,0]
+           */
+          this.spanArr.push(1);
+          this.pos = 0;
+        } else {
+          if (data[i].groupId === data[i - 1].groupId) {
+            // 如果remark相等就累加，并且push 0
+            this.spanArr[this.pos] += 1;
+            this.spanArr.push(0);
+          } else {
+            // 不相等push 1,并且pos 要换成当前下标
+            this.spanArr.push(1);
+            this.pos = i;
+          }
+        }
+      }
+    },
+    // 合并单元格
+    ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex == 0) {
+        const _row = this.spanArr[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        };
+      }
     }
   },
   components: {
@@ -488,6 +611,12 @@ export default {
         : "正则表达式";
     }
   },
+  created() {
+    this.getSpanArr(this.klRuleInfoSaveSub);
+  },
+  beforeUpdate() {
+    this.getSpanArr(this.klRuleInfoSaveSub);
+  },
   props: {
     klRuleInfoSaveSub: {
       type: Array,
@@ -513,6 +642,9 @@ export default {
     baseTermTypeList: {
       type: Array,
       default: []
+    },
+    maxNum: {
+      default: null
     }
   }
 };

src/components/knowledgeExtra/_AddNewRule.vue

@@ -134,7 +134,6 @@
               @addGroup="addGroup"
               @delGroup="delGroup"
             ></SubRulesGroup>
-            <ComTable :list="subGroups" />
           </el-form-item>
           <el-button
             class="disclButn"