cdssHospital/src/components/knowledgeExtra/AddNewRuleTable.vue

<style lang="less" scoped>
  #AddNewRuleTable {
    width: 100%;
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    /deep/ .el-table .el-input--mini .el-input__inner,
    .el-select {
      width: 100%;
      font-size: 12px;
    }
    .btn_box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn_div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
    .inp_box {
      // width: 100px;
      height: 100%;
      margin: 0 auto;
    }
    /deep/ .el-form-item__error {
      // position: absolute;
      top: 28px;
    }
    .type_content {
      /deep/ .el-form-item--mini.el-form-item,
      .el-form-item--small.el-form-item {
        margin: 0;
        width: 100%;
      }
      display: flex;
      .type_content_item1 {
        /deep/ .el-form-item__content {
          padding-bottom: 8px;
        }
        .row_box {
          .el-col {
            /deep/ .el-form-item__content {
              position: static;
            }
            /deep/ .el-form-item__error {
              position: absolute;
              width: 260px;
              left: 72px;
              white-space: normal;
            }
          }
        }
      }
      /deep/ .el-input.is-disabled .el-input__inner {
        color: #888;
      }
    }
    .custom_table_header {
      vertical-align: middle;
      &::before {
        content: "*";
        color: red;
        font-size: 12px;
        margin-right: 4px;
      }
    }
    /deep/ .el-table th {
      background: transparent;
    }
    /deep/ .el-form-item__content {
      padding-bottom: 14px;
    }
    .table_cell_cls {
      vertical-align: top;
    }
    /deep/ .el-form-item__label {
      font-size: 12px;
    }
    h4 {
      font-size: 14px;
      font-weight: 400;
    }
    /deep/ .el-select {
      font-size: 12px;
    }
    /deep/ .el-table--mini,
    .el-table--small,
    .el-table__expand-icon {
      font-size: 14px;
    }
  }
</style>

<template>
  <!-- :prop="`klRuleByIdSub[${scope.$index}].subDescription`" -->
  <div id="AddNewRuleTable">
    <h4 style="margin-bottom: 24px">规则内容：</h4>
    <!-- 隔行换色  :row-style="rowStyle" -->
    <el-table
            border
            :data="klRuleByIdSub"
            size="mini"
            style="min-height: 200px"
            height="calc(100vh - 393px)"
            :header-row-style="{ background: '#E3EAF4' }"
            :cell-style="cellStyle"
            :span-method="ObjectSpanMethod"
            ref="table"
            row-key="groupChildId"
    >
      <el-table-column width="80px" label="组" prop="groupType" fixed="left">
        <template slot-scope="scope">
          <div class="btn_box">
            <div class="btn_div">
              <img
                      @click="addGroup(scope)"
                      src="../../images/add-new-rule-sub.png"
                      alt=""
              />
            </div>
            <div class="btn_div" v-if="!isLastDate(scope.row.groupId)">
              <img
                      @click="$emit('delGroup', scope.row.groupId)"
                      src="../../images/add-new-rule-del.png"
                      alt=""
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              width="80px"
              v-if="maxNum && maxNum > 1"
              fixed="left"
              label="基础规则"
              prop="groupType"
      >
        <template slot-scope="scope">
          <div class="btn_box">
            <div class="btn_div" v-if="!isMax(scope.row.groupId)">
              <img
                      @click="addChildGroup(scope)"
                      src="../../images/add-new-rule-sub.png"
                      alt=""
              />
            </div>
            <div
                    class="btn_div"
                    v-if="klRuleByIdSub.length > 1 && !scope.row.disabled"
            >
              <img
                      @click="$emit('delGroupChild', scope.row.groupChildId)"
                      src="../../images/add-new-rule-del.png"
                      alt=""
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="170px" prop="subDescription" label="基础规则名称">
        <template slot="header" slot-scope="scope">
          <div class="custom_table_header">基础规则名称</div>
        </template>
        <template slot-scope="scope">
          <el-form-item
                  class="inp_box"
                  :prop="`klRuleByIdSub[${scope.$index}].subDescription`"
                  :rules="rules.subDescription"
          >
            <el-input
                    type="text"
                    :disabled="scope.row.disabled"
                    v-model="scope.row.subDescription"
                    clearable
                    placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column width="170px" prop="subType" label="基础规则类型">
        <template slot="header" slot-scope="scope">
          <div class="custom_table_header">基础规则类型</div>
        </template>
        <template slot-scope="scope">
          <el-form-item
                  class="inp_box"
                  :prop="`klRuleByIdSub[${scope.$index}].subType`"
                  :rules="rules.subType"
          >
            <el-select
                    v-model="scope.row.subType"
                    :disabled="scope.row.disabled"
                    placeholder="请选择"
                    @change="subTypeChange($event, scope.$index)"
                    @focus="
                setTheRef($event, `klRuleByIdSub[${scope.$index}].subType`)
              "
                    :ref="`klRuleByIdSub[${scope.$index}].subType`"
            >
              <el-option
                      v-for="item in scope.row.baseTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.type"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column width="170px" prop="subLenCode" label="基础规则术语类型">
        <template slot="header" slot-scope="scope">
          <div class="custom_table_header">基础规则术语类型</div>
        </template>
        <template slot-scope="scope">
          <el-form-item
                  class="inp_box"
                  :prop="`klRuleByIdSub[${scope.$index}].subLenCode`"
                  :rules="rules.subLenCode"
          >
            <el-select
                    :disabled="scope.row.disabled"
                    v-model="scope.row.subLenCode"
                    placeholder="请选择"
                    :ref="`klRuleByIdSub[${scope.$index}].subLenCode`"
                    @change="subCodeChange($event, scope.$index)"
                    @focus="
                setTheRef($event, `klRuleByIdSub[${scope.$index}].subLenCode`)
              "
            >
              <el-option
                      v-for="item in scope.row.baseTermTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column width="170px" label="医学标准术语" prop="subConceptId">
        <template slot="header" slot-scope="scope">
          <div class="custom_table_header">医学标准术语</div>
        </template>
        <template slot-scope="scope">
          <el-form-item
                  class="inp_box"
                  :prop="`klRuleByIdSub[${scope.$index}].subConceptId`"
                  :rules="rules.subConceptId"
          >
            <el-select
                    clearable
                    remote
                    filterable
                    :disabled="scope.row.disabled"
                    @focus="subConceptIdfocus(scope.$index)"
                    :remote-method="searchConcept"
                    v-model.trim="scope.row.subConceptId"
                    :ref="`klRuleByIdSub[${scope.$index}].subConceptId`"
            >
              <el-option
                      v-for="item in scope.row.conceptList"
                      :key="item.conceptId"
                      :label="item.conceptName"
                      :value="item.conceptId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="规则具体内容" min-width="900px" prop="">
        <template slot-scope="scope">
          <div class="type_content">
            <el-form-item
                    style="width: 100px; margin-right: 20px"
                    :prop="`klRuleByIdSub[${scope.$index}].dataType`"
                    :rules="rules.dataType"
                    v-if="scope.row.subType === 2 && showDataType(scope.$index)"
            >
              <el-select
                      v-model="scope.row.dataType"
                      placeholder="选择类型"
                      @change="dataTypeChange($event, scope.$index)"
                      @focus="
                  setTheRef($event, `klRuleByIdSub[${scope.$index}].dataType`)
                "
                      :ref="`klRuleByIdSub[${scope.$index}].dataType`"
              >
                <el-option label="数值类型" value="1"> </el-option>
                <el-option label="文本类型" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <!-- v-if="klRuleByIdSub[scope.$index].dataType === '1'" -->
            <el-form-item
                    class="type_content_item type_content_item1"
                    style="flex: 2; margin: 0 10px"
                    label="最大值："
                    v-if="scope.row.dataType === '1'"
            >
              <!-- <div> -->
              <el-row :gutter="10" class="row_box">
                <el-col :span="6">
                  <el-form-item
                          :prop="`klRuleByIdSub[${scope.$index}].subMaxOperator`"
                          :rules="[
                      {
                        validator: (rule, value, callback) => {
                          subMaxOperator(scope, rule, value, callback);
                        },
                        trigger: ['change']
                      }
                    ]"
                  >
                    <el-select
                            v-model="scope.row.subMaxOperator"
                            placeholder="请选择"
                            clearable
                            @change="maxChange($event, scope.$index, 's')"
                            @focus="
                        setTheRef(
                          $event,
                          `klRuleByIdSub[${scope.$index}].subMaxOperator`
                        )
                      "
                            :ref="`klRuleByIdSub[${scope.$index}].subMaxOperator`"
                    >
                      <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: ['change']
                      }
                    ]"
                  >
                    <el-input
                            type="text"
                            @focus="maxChange($event, scope.$index, 'i')"
                            :ref="`klRuleByIdSub[${scope.$index}].subMaxValue`"
                            v-model="scope.row.subMaxValue"
                            placeholder="填写数值"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                          :prop="`klRuleByIdSub[${scope.$index}].subMaxUnit`"
                  >
                    <el-input
                            type="text"
                            @focus="setScrollRight"
                            v-model.trim="scope.row.subMaxUnit"
                            placeholder="填写单位"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- </div> -->
            </el-form-item>
            <el-form-item
                    class="type_content_item type_content_item1"
                    style="flex: 2"
                    label="最小值："
                    v-if="scope.row.dataType === '1'"
            >
              <el-row :gutter="10" class="row_box">
                <el-col :span="6">
                  <el-form-item
                          :prop="`klRuleByIdSub[${scope.$index}].subMinOperator`"
                          :rules="[
                      {
                        validator: (rule, value, callback) => {
                          subMinOperatorRule(scope, rule, value, callback);
                        },
                        trigger: ['change']
                      }
                    ]"
                  >
                    <el-select
                            v-model="scope.row.subMinOperator"
                            placeholder="请选择"
                            clearable
                            :ref="`klRuleByIdSub[${scope.$index}].subMinOperator`"
                            @change="minChange($event, scope.$index, 's')"
                            @focus="
                        setTheRef(
                          $event,
                          `klRuleByIdSub[${scope.$index}].subMinOperator`
                        )
                      "
                    >
                      <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: ['change']
                      }
                    ]"
                  >
                    <el-input
                            type="text"
                            :ref="`klRuleByIdSub[${scope.$index}].subMinValue`"
                            @focus="minChange($event, scope.$index, 'i')"
                            v-model="scope.row.subMinValue"
                            placeholder="填写数值"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                          :prop="`klRuleByIdSub[${scope.$index}].subMinUnit`"
                  >
                    <el-input
                            type="text"
                            @focus="setScrollRight"
                            v-model.trim="scope.row.subMinUnit"
                            placeholder="填写单位"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
            <!-- v-if="klRuleByIdSub[scope.$index].subType !== 6 && klRuleByIdSub[scope.$index].dataType === '2'" -->
            <div
                    style="flex: 2"
                    v-if="scope.row.subType != 6 && scope.row.dataType == '2'"
            >
              <el-form-item
                      class="type_content_item"
                      style="width: 100%"
                      label="医学内容："
                      label-width="100px"
                      :prop="`klRuleByIdSub[${scope.$index}].subEqValue`"
                      :rules="[
                  {
                    required: true,
                    message: '请输入' + textName(scope.$index),
                    trigger: 'blur'
                  },
                  {
                    validator: (rule, value, callback) => {
                      subEqValue(scope, rule, value, callback);
                    },
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                        type="textarea"
                        rows="1"
                        placeholder="请输入医学内容"
                        @focus="setScrollRight"
                        v-model.trim="scope.row.subEqValue"
                ></el-input>
              </el-form-item>
            </div>

            <!-- v-if="groupData.subType === 6" -->
            <div style="flex: 2" v-if="scope.row.subType == 6">
              <el-form-item
                      class="type_content_item"
                      label="正则表达式："
                      label-width="120px"
                      style="width: 100%"
                      :prop="`klRuleByIdSub[${scope.$index}].subEqValue1`"
                      :rules="[
                  {
                    required: true,
                    message: '请输入' + textName(scope.$index),
                    trigger: 'blur'
                  },
                  {
                    validator: (rule, value, callback) => {
                      subEqValue(scope, rule, value, callback);
                    },
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                        type="textarea"
                        rows="1"
                        placeholder="请输入正则表达式"
                        @focus="setScrollRight"
                        v-model.trim="scope.row.subEqValue"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import api from "@api/knowledgeLib.js";
    import { tableRules } from "./rules";
    export default {
        name: "AddNewRuleTable",
        data() {
            return {
                numTypes: "",
                subConceptIdIndex: "",
                operMaxList: [
                    { name: "<=", key: "<=" },
                    { name: "<", key: "<" }
                ],
                operMinList: [
                    { name: ">", key: ">" },
                    { name: ">=", key: ">=" }
                ],
                rules: tableRules,
                theRef: null
            };
        },
        methods: {
            setScrollRight() {
                this.$nextTick(() => {
                    this.$refs.table.bodyWrapper.scrollLeft = this.$refs.table.bodyWrapper.scrollWidth;
                });
            },
            maxChange(e, val, type) {
                if (
                    type === "i" &&
                    this.klRuleByIdSub[val].subMaxOperator &&
                    this.klRuleByIdSub[val].subMaxOperator != ""
                ) {
                    this.$emit("clearValidate", [
                        `klRuleByIdSub[${val}].subMinValue`,
                        `klRuleByIdSub[${val}].subMinOperator`
                    ]);
                } else if (
                    type === "s" &&
                    this.klRuleByIdSub[val].subMaxValue &&
                    this.klRuleByIdSub[val].subMaxValue != ""
                ) {
                    this.$emit("clearValidate", [
                        `klRuleByIdSub[${val}].subMinValue`,
                        `klRuleByIdSub[${val}].subMinOperator`
                    ]);
                }
                this.setScrollRight();
            },
            minChange(e, val, type) {
                if (
                    type === "i" &&
                    this.klRuleByIdSub[val].subMinOperator &&
                    this.klRuleByIdSub[val].subMinOperator != ""
                ) {
                    this.$emit("clearValidate", [
                        `klRuleByIdSub[${val}].subMaxOperator`,
                        `klRuleByIdSub[${val}].subMaxValue`
                    ]);
                } else if (
                    type === "s" &&
                    this.klRuleByIdSub[val].subMinValue &&
                    this.klRuleByIdSub[val].subMinValue != ""
                ) {
                    this.$emit("clearValidate", [
                        `klRuleByIdSub[${val}].subMaxOperator`,
                        `klRuleByIdSub[${val}].subMaxValue`
                    ]);
                }
                this.setScrollRight();
            },
            addGroup(scope) {
                this.$emit("addGroup", null, { groupId: scope.row.groupId });
                this.$refs.table.bodyWrapper.scrollLeft = 0;
            },
            addChildGroup(scope) {
                this.$emit("addGroup", scope.row.groupId, { index: scope.$index });
                this.$refs.table.bodyWrapper.scrollLeft = 0;
            },
            scrollFun() {
                this.$refs.table.bodyWrapper.scrollTop =
                    this.$refs.table.bodyWrapper.scrollTop + 60;
            },
            // table 隔行换色
            // rowStyle({ row }) {
            //   if (row.rowIndex % 2 == 0) {
            //     return {
            //       background: "#DFF7EF"
            //     };
            //   }
            // },
            // cellStyle
            cellStyle({ row, column, rowIndex, columnIndex }) {
                if (column.label == "组" || column.label == "基础规则") return {};
                return { "vertical-align": "top", "padding-top": "14px" };
            },
            // 最大值 选择rule
            subMaxOperator(scope, rule, value, callback) {
                const { subMaxValue, subMinOperator, subMinValue } = scope.row;
                const val = value + subMinOperator + subMinValue + subMaxValue;
                if (!val || (!value && subMaxValue !== "")) {
                    callback(new Error("最大值和最小值至少完整填写一个，单位不必填"));
                } else {
                    callback();
                }
            },
            // 最大值 数值rule
            subMaxValue(scope, rule, value, callback) {
                const { subMaxOperator, subMinOperator, subMinValue } = scope.row;
                const val = value + subMaxOperator + subMinValue + subMinOperator;
                const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
                if (!val || (value == "" && subMaxOperator)) {
                    callback(new Error("最大值和最小值至少完整填写一个，单位不必填"));
                } else if (value !== "" && !isNum) {
                    callback(new Error("只能输入数字"));
                } else {
                    callback();
                }
            },
            // 最小值 选择rule
            subMinOperatorRule(scope, rule, value, callback) {
                const { subMaxValue, subMaxOperator, subMinValue } = scope.row;
                const val = value + subMaxOperator + subMinValue + subMaxValue;
                if (!val || (!value && subMinValue !== "")) {
                    callback(new Error("最大值和最小值至少完整填写一个，单位不必填"));
                } else {
                    callback();
                }
            },
            // 最小值 数值rule
            subMinValueRule(scope, rule, value, callback) {
                const { subMaxValue, subMinOperator, subMaxOperator } = scope.row;
                const val = value + subMaxOperator + subMaxValue + subMinOperator;
                const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
                if (!val || (value == "" && subMinOperator)) {
                    callback(new Error("最大值和最小值至少完整填写一个，单位不必填"));
                } else if (value !== "" && !isNum) {
                    callback(new Error("只能输入数字"));
                } else {
                    callback();
                }
            },
            // 医学内容rule
            subEqValue(scope, rule, value, callback) {
                if (value === "") {
                    callback(new Error("请输入" + this.textName(scope.$index)));
                } else if (value.length > 200) {
                    callback(new Error(this.textName(scope.$index) + "不能超过200字"));
                } else {
                    callback();
                }
            },
            // 判断是否为最后一条规则
            isLastDate(id) {
                const tableLength = this.klRuleByIdSub.filter(
                    (item) => item.groupId !== id
                ).length;
                return tableLength === 0;
            },
            // 是否超出最大规则数
            isMax(id) {
                const typeNum = this.klRuleByIdSub.filter((item) => item.groupId === id)
                    .length;
                return typeNum >= this.maxNum;
            },
            // 基础规则类型选择
            subTypeChange(e, index) {
                this.$emit("subTypeChange", e, index);
            },
            //
            setTheRef(e, val) {
                this.theRef = val;
            },
            // 规则术语类型
            subCodeChange(val, index) {
                //基础规则术语类型修改
                this.$emit("childSubCodeChange", val, index, this.numTypes);
            },
            clearConcept(index) {
                this.$emit("childClearConcept", index);
            },
            clearNumText(index) {
                this.$emit("childClearNumText", index);
            },
            //医学标准术语change
            subConceptIdfocus(index) {
                this.subConceptIdIndex = "";
                this.subConceptIdIndex = index;
                this.setTheRef(1, `klRuleByIdSub[${index}].subConceptId`);
            },
            // 医学标准术语
            searchConcept(val) {
                const param = {
                    excludedConceptIds: [
                        this.klRuleByIdSub[this.subConceptIdIndex].subType
                    ],
                    libType: this.klRuleByIdSub[this.subConceptIdIndex].subLenCode,
                    name: val
                };
                api
                    .searchConcept(param)
                    .then((res) => {
                        if (res.data.code == "0") {
                            const data = res.data.data;
                            this.$emit("setFormData", this.subConceptIdIndex, data);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            dataTypeChange(val, index) {
                this.$emit("ChildDataTypeChange", val, index);
            },
            // 处理要合并相同行的列
            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
                    };
                }
            },
            showDataType(index) {
                return (
                    (this.numTypes + ",").indexOf(
                        this.klRuleByIdSub[index].subLenCode + ","
                    ) === -1
                );
            },
            textName(index) {
                return this.klRuleByIdSub[index].subType !== 6 &&
                this.klRuleByIdSub[index].dataType == "2"
                    ? "医学内容"
                    : "正则表达式";
            },
            blurRef() {
                console.log("scroll");
                console.log(this.$refs[this.theRef]);
                if (this.theRef) {
                    this.$refs[this.theRef].blur();
                    // console.log(document.getElementById(this.theRef).blur,'hehehe');
                    // document.getElementById(this.theRef).focus()
                    // document.getElementById(this.theRef).value = 123
                }
            }
        },
        components: {},
        mounted() {
            // this.theRef
            // console.log('mounted');
            // let that = this;
            // this.$refs.table.bodyWrapper.addEventListener(
            //   "scroll",
            //   that.blurRef,
            //   false
            // );
        },
        created() {
            this.numTypes = localStorage.getItem("zskNumDict");
            this.getSpanArr(this.klRuleByIdSub);
        },
        beforeUpdate() {
            this.getSpanArr(this.klRuleByIdSub);
        },

        updated() {
            // let that = this;
            // this.$nextTick(() => {
            //   // FIX 滚动添加事件
            //   this.$refs.table.bodyWrapper.removeEventListener(
            //     "scroll",
            //     that.blurRef,
            //     false
            //   );
            //   setTimeout(() => {
            //     that.$refs.table.bodyWrapper.addEventListener(
            //       "scroll",
            //       that.blurRef,
            //       false
            //     );
            //   }, 300);
            // });
        },
        props: {
            klRuleByIdSub: {
                type: Array,
                required: true
            },
            maxNum: {
                default: null
            }
        }
    };
</script>