platformFront/src/components/knowledgeExtra/_SubRulesGroup.vue

<template>
  <div class="sub-groups" v-if="data">
    <SubConditions
      v-for="(rules, i) in data"
      :key="i"
      ref="group"
      :groupData="rules"
      :isLast="data.length === 1"
      :ind="i"
      :showAdd="data.length < maxNum"
      :baseTypes="baseTypes"
      :firstPlace="firstPlace"
      :disabled="i === 0 && disable"
      @changeVal="handleInput"
      @addRule="addRule"
      @delRule="delRule"
    ></SubConditions>
    <div class="group-oper">
      <el-button size="small" @click="addGroup">+新增分组</el-button>
      <el-button
        :disabled="isLast"
        size="small"
        type="danger"
        plain
        @click="delGroup"
        >-删除分组</el-button
      >
    </div>
  </div>
</template>
<script>
import SubConditions from "./_SubConditions.vue";
export default {
  name: "SubRulesGroup",
  props: ["data", "inx", "isLast", "baseTypes", "maxNum", "firstPlace"],
  data() {
    return {};
  },
  computed: {
    disable: function () {
      return Object.keys(this.firstPlace || {}).length > 0;
    }
  },
  methods: {
    handleInput(val, i) {
      this.data[i] = val;
    },
    addRule() {
      let temp = {
        subDescription: "",
        subConceptId: "",
        subType: "",
        subLenName: "",
        subLenCode: "",
        subLibName: "",
        subMaxOperator: "",
        subMaxUnit: "",
        subMaxValue: "",
        subMinOperator: "",
        subMinUnit: "",
        subMinValue: "",
        subEqValue: "",
        dataType: ""
      };
      this.data.push(temp);
    },
    delRule(i) {
      if (i === 0 && this.data.length === 1) {
        this.$emit("delGroup", this.inx);
        return;
      }
      this.data.splice(i, 1);
    },
    addGroup() {
      this.$emit("addGroup");
    },
    delGroup() {
      this.$emit("delGroup", this.inx);
    },
    warning(msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || "warning"
      });
    },
    showConfirmDialog(msg, resolve) {
      this.$alert(msg, "提示", {
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          resolve();
        })
        .catch(() => {
          this.warning("删除失败，请重试！");
        });
    }
  },
  components: {
    SubConditions
  }
};
</script>
<style lang="less" scoped>
.sub-groups {
  background: #f5f5f5;
  padding: 20px;
}
.group-oper {
  text-align: center;
  padding: 11px 0;
  border-top: 4px solid #f5f5f5;
  background: #fff;
}
.el-button--danger.is-plain:focus,
.el-button--danger.is-plain:hover {
  color: #fbc4c4;
  border-color: #fbc4c4;
}
.el-button--danger.is-plain {
  background: none;
  &.is-disabled {
    color: #f9a7a7;
    background-color: #fef0f0;
    border-color: #fde2e2;
  }
}
</style>