platformFront/src/components/knowledgeExtra/AddAssess/ScoreResultsTable.vue

<style lang="less" scoped>
.ScoreResults {
  width: 100%;
  // padding: 30px 30px 0 30px;
  box-sizing: border-box;
  border-top: 10px solid rgba(203, 207, 212, 0.3);
  h4 {
    font-size: 14px;
    border-bottom: 1px solid rgba(203, 207, 212, 0.3);
    padding: 10px 35px;
  }
  .table_box {
    padding: 0 35px;
    margin-top: -10px;
  }
  /deep/.el-table th,
  .el-table tr {
    height: 50px;
    background: #e3eaf4;
  }
  /deep/.el-table th {
    padding: 0;
  }
  .btn_box {
    width: 100%;
    height: 100%;
    padding: 20px 0;
    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;
    }
  }
  .range_box {
    display: flex;
    position: relative;
    .range_child {
      flex: 1;
      &:nth-child(1) {
        margin-right: 20px;
      }
      /deep/.el-form-item__content {
        position: static;
      }
      /deep/ .is-error .el-form-item__error {
        left: 70px;
      }
    }
  }
  /deep/.el-input--mini .el-input__inner {
    width: 100%;
  }
  /deep/.el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    padding: 18px 0;
  }
  .custom_table_header {
    vertical-align: middle;
    &::before {
      content: "*";
      color: red;
      font-size: 12px;
      margin-right: 4px;
    }
  }
}
/deep/ .el-textarea__inner {
  overflow-y: hidden;
}
.showScroll {
  /deep/ .el-textarea__inner {
    overflow-y: auto;
  }
}
/deep/ .el-input--mini {
  font-size: 14px;
}
/deep/ .el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
</style>
<template>
  <div class="ScoreResults">
    <h4>得分结果：</h4>
    <div class="table_box">
      <el-table
        :data="list"
        border
        style="width: 100%; margin: 20px 0"
      >
        <el-table-column prop="orderNo" width="70px" label="">
          <template slot-scope="scope">
            <div class="btn_box">
              <div class="btn_div">
                <img
                  @click="$emit('CHANEG_SCORE_RESULT', 1, scope.$index)"
                  src="@/images/add-new-rule-sub.png"
                  alt=""
                />
              </div>
              <div class="btn_div" v-if="list.length > 1">
                <img
                  @click="$emit('CHANEG_SCORE_RESULT', 0, scope.$index)"
                  src="@/images/add-new-rule-del.png"
                  alt=""
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="得分范围">
          <template slot="header" slot-scope="scope">
            <div class="custom_table_header">得分范围</div>
          </template>
          <template slot-scope="scope">
            <!-- <div>{{ scope.row.content.max }},{{ scope.row.content.min }}</div> -->
            <div class="range_box">
              <div class="range_child">
                <el-form-item
                  label="大于等于:"
                  label-width="80px"
                  :prop="`scoreresultsdatas[${scope.$index}].content.min`"
                  :rules="[
                    {
                      validator: (rule, value, callback) => {
                        validateMinMax(scope, rule, value, callback);
                      },
                      trigger: ['blur']
                    }
                  ]"
                >
                  <el-input
                    type="text"
                    maxlength="7"
                    :id="`scoreresultsdatas[${scope.$index}].content.min`"
                    @input="
                      handleInput($event, scope.$index);
                      scope.row.content.min = numInputChange(
                        scope.row.content.min
                      );
                    "
                    v-model="scope.row.content.min"
                    clearable
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="range_child">
                <el-form-item
                  label="小于等于:"
                  label-width="80px"
                  :prop="`scoreresultsdatas[${scope.$index}].content.max`"
                  :rules="[
                    {
                      validator: (rule, value, callback) => {
                        validateMinMax(scope, rule, value, callback);
                      },
                      trigger: ['blur']
                    }
                  ]"
                >
                  <el-input
                    type="text"
                    maxlength="7"
                    :id="`scoreresultsdatas[${scope.$index}].content.max`"
                    @input="
                      handleInput($event, scope.$index);
                      scope.row.content.max = numInputChange(
                        scope.row.content.max
                      );
                    "
                    v-model="scope.row.content.max"
                    clearable
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果">
          <template slot="header" slot-scope="scope">
            <div class="custom_table_header">结果</div>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="`scoreresultsdatas[${scope.$index}].result`"
              :rules="rules.soureResult"
            >
              <el-input
                :id="`scoreresultsdatas[${scope.$index}].result`"
                type="textarea"
                rows="1"
                :autosize="true"
                resize="none"
                v-model="scope.row.result"
                clearable
                maxlength="10"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="pushInfo" label="建议">
          <template slot-scope="scope">
            <el-form-item
              :prop="`scoreresultsdatas[${scope.$index}].pushInfo`"
              class="showScroll"
            >
              <el-input
                :id="`scoreresultsdatas[${scope.$index}].pushInfo`"
                type="textarea"
                rows="2"
                resize="none"
                v-model="scope.row.pushInfo"
                clearable
                maxlength="500"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import rules from "./rules";
import { numInputChange } from "./util";
export default {
  data() {
    return {
      rules: rules
    };
  },
  methods: {
    numInputChange,
    handleInput(val, i) {
      // `scoreresultsdatas[${scope.$index}].content.min`
      this.$emit("clearValidate", [
        `scoreresultsdatas[${i}].content.max`,
        `scoreresultsdatas[${i}].content.min`
      ]);
    },
    resizeTable() {
      setTimeout(() => {
        this.list.forEach((item, index) => {
          this.$refs[`scoreresultsdatas[${index}].pushInfo`] &&
            this.$refs[`scoreresultsdatas[${index}].pushInfo`].resizeTextarea();
          this.$refs[`scoreresultsdatas[${index}].result`] &&
            this.$refs[`scoreresultsdatas[${index}].result`].resizeTextarea();
        });
      }, 500);
    },
    validateMinMax(scope, rule, value, callback) {
      const { min, max } = scope.row.content;
      if (min || max) {
        callback();
      } else {
        callback(new Error("大于和小于至少完整填写一个"));
      }
    }
  },
  props: {
    list: {
      default: []
    }
  }
};
</script>