limitLevel.vue 3.47 KB
<template>
  <div v-if="data">
    <template v-for="(item, index) in data">
      <!-- <div v-if="item.type === 'end'" :key="item.name">
        <limit-end :rule="item" @submitAns="submitAns"></limit-end>
      </div> -->
      <div :key="index">
        <el-form-item
          :label="item.name ? item.name : ''"
          :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
        >
          <el-select
            v-model="item.ans"
            placeholder="请选择"
            @change="changeSelect(index)"
          >
            <el-option
              v-for="(option, option_index) in item.children"
              :key="option.name"
              :label="option.name"
              :value="option_index"
            ></el-option>
          </el-select>
        </el-form-item>
        <template v-if="item.child">
          <limitLevel
            :rule="item.child"
            :moIndex="item.index"
            @submitAns="submitAns"
          ></limitLevel>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "limitLevel",
  props: {
    rule: {
      type: Array,
      required: true,
      default: null,
    },
    moIndex: {
      type: Number,
      required: true,
      default: null,
    },
    info: {
      type: Object,
      default: null,
    },
  },
  created() {
    this.data = this.rule;
    console.log("level create", this.rule);
  },
  methods: {
    changeSelect(index) {
      //console.log("change index:" + index, this.data);
      //console.log("ans", this.data[index].ans);
      let option = this.data[index].children[this.data[index].ans];
      //console.log("select option", option);

      this.$set(this.data[index], "child", null);

      if (option.isLeaf === 1) {
        console.log("final");

        //答案 无显示终节点
        // this.$set(this.data[index], "child", null);

        this.$nextTick(() => {
          // let ans = this.data[index].ans;

          // let option =[{"type":"end"}]
          // this.$set(this.data[index], "child", option);
          // this.$set(this.data[index], "index", index);

          //调用submit方法 传递答案上去

          console.log("option final", option);

          let ids = [];
          this.submitAns(ids, option.id, "", this.data);
        });
      } else {
        //重新设置值 数据源  要更改的具体数据 重新赋的值
        this.$nextTick(() => {
          //let ans = this.data[index].ans;
          //let option = this.data[index].children[ans];

          if (option.children) {
            this.$set(this.data[index], "child", option.children);
            this.$set(this.data[index], "index", index);
          }
        });
      }
    },
    /**
     * data 答案
     * des 名称
     * 所有数据
     * 序号
     */
    submitAns(ids, id, name, data) {
      console.log("submitAns:", ids, id, name, data);

      console.log("data", this.data);
      for (let i = 0; i < this.data.length; i++) {

            //答案层
             let index = this.data[i].ans;
            let option = this.data[i].children[index];
          
            name +=" " + option.name+" "+this.data[i].name;
            id=this.data[i].id
            ids.push(option.id)
            ids.push(id)
            break
          
      }

      this.$emit("submitAns", ids, id,  name, this.data);
    },
  },
  data() {
    return {
      data: null,
      value_index: null,
      value: null,
      child: null,
    };
  },
};
</script>