platformFront/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;
  }
  .form-texarea {
    /deep/ .el-form-item__error {
      // position: absolute;
      top: 54px!important;
    }
    /deep/ .el-textarea__inner {
      resize: none;
    }
  }
  .texarea-form {
    /deep/ .el-form-item__error {
      // position: absolute;
      top: 32px;
    }
    /deep/ .el-textarea__inner {
      resize: none;
    }
  }
  .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="170px"
        label="附加信息"
        prop="subMsg"
        v-if="ruleTermCodeStr!='2-106-1' && ruleTermCodeStr!='3-108-1' && ruleTermCodeStr!='3-112-1' && ruleTermCodeStr!='4-108-1'"
      >
        <template slot="header" slot-scope="scope">
          <div :class="showMsg?'custom_table_header':''">附加信息</div>
        </template>
        <template slot-scope="scope">
          <el-form-item
            :prop="`klRuleByIdSub[${scope.$index}].subMsg`"
            :rules="showMsg?rules.subMsg:rules.subMsgs"
            :class="scope.row.subMsg?'form-texarea':''"
            class="texarea-form"
          >
            <el-input
              type="textarea"
              :autosize="{minRows: 1,maxRows: 2}"
              placeholder="请输入附加信息"
              v-model.trim="scope.row.subMsg"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        width="80px"
        v-if="maxNum && maxNum > 1"
        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.trim="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}].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>
          </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 {};
      if (column.label == '附加信息') return { 'padding-top': '14px' };
      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) {
      console.log(e)
      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 || columnIndex == 1) {
        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
    },
    showMsg: {
      default: null
    },
    ruleTermCodeStr: {
      default: null
    }
  }
};
</script>