三级复选框

 <template>
  <div class="deliverySetting">
    <!-- 一级复选框 -->
    <div class="firstCheckBox">
      <el-checkbox
        v-model="isOwn"
        :indeterminate="indeterminate"
        @change="handleCheckAllChange"
        >{{ title }}</el-checkbox
      >
    </div>

    <div
      v-for="(assessment, assessmentIndex) in children"
      :key="assessmentIndex"
      class="child-content"
    >
      <!-- 二级复选框 -->
      <div class="secondCheckBox">
        <el-checkbox
          :key="assessmentIndex"
          v-model="assessment.isOwn"
          :indeterminate="assessment.indeterminate"
          @change="handleCheckedCountryAllChange(assessmentIndex, $event)"
          >{{ assessment.name }}</el-checkbox
        >
      </div>
      <!-- 三级复选框 -->
      <div class="thiredCheckBox">
        <el-checkbox
          v-for="(children, index) in assessment.children"
          :key="index"
          v-model="children.isOwn"
          :label="children"
          @change="handleCheckedCountryChange(assessmentIndex, index, $event)"
        >
          {{ children.name }}
        </el-checkbox>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //name: 'deliverySetting',
  props: ["item"],
  components: {},
  data() {
    return {
      title: "养护考核",
      // 按钮是否选中
      isOwn: true,
      // 当前按钮的状态
      indeterminate: true,
      children: [
        {
          name: "年度考核分析",
          isOwn: true,
          indeterminate: false,
          children: [
            {
              id: "1x",
              name: "导出问题路段表",
              isOwn: false,
            },
          ],
        },
        {
          name: "季度考核",
          isOwn: false,
          indeterminate: false,
          children: [
            {
              id: "1x",
              name: "新增",
              isOwn: true,
            },
            {
              id: "2x",
              name: "编辑",
              isOwn: true,
            },
            {
              id: "3x",
              name: "删除",
              isOwn: true,
            },
            {
              id: "4x",
              name: "导入",
              isOwn: true,
            },
            {
              id: "5x",
              name: "定位",
              isOwn: true,
            },
            {
              id: "6x",
              name: "复核",
              isOwn: false,
            },
            {
              id: "7x",
              name: "导出扣分汇总",
              isOwn: true,
            },
            {
              id: "8x",
              name: "导出扣分明细",
              isOwn: true,
            },
          ],
        },
        {
          name: "扣分标准",
          isOwn: false,
          indeterminate: false,
          children: [
            {
              id: "1x",
              name: "新增",
              isOwn: false,
            },
            {
              id: "2x",
              name: "编辑",
              isOwn: false,
            },
            {
              id: "3x",
              name: "删除",
              isOwn: false,
            },
            {
              id: "4x",
              name: "导入",
              isOwn: false,
            },
            {
              id: "5x",
              name: "导出",
              isOwn: false,
            },
          ],
        },
      ],
    };
  },
  watch: {
    item: {
      // 将权限拥有状态适配组件
      handler(newValue) {
        this.changState(newValue)
      },
      immediate: true,
    },
  },
  beforeCreate() {},
  created() {},
  mounted() {
    // props传值不能直接修改 但是能修改传递的对象属性
    // this.changState();
    // setTimeout(() => {
    //   this.getIsCheckAll();
    // }, 1000);
  },

  methods: {
    // 改变状态
    changState(newValue) {
      console.log("初始化子组件数据", newValue);
      // 初始化一级权限
      this.title = newValue.name;
      this.isOwn = newValue.isOwn;
      this.children = newValue.children;
      this.getIsCheckAll();
    },
    handleCheckAllChange(e) {
      console.log("1级权限选择", e)
      //一级change事件
      this.isOwn = e;
      this.indeterminate = false;
      // 二级全选反选
      this.children.forEach(second =>{
        second.isOwn = e;
        second.indeterminate = false;
        // 三级反选
        second.children.forEach(third =>{
          third.isOwn = e;
        })
      })
      this.getIsCheckAll();
    },
    // 点击二级事件
    handleCheckedCountryAllChange(index, e) {
      console.log("2级权限选择",index, e)
      //二级勾选后，子级全部勾选或者取消
      this.children[index].isOwn = e;
      this.children[index].indeterminate = false;
      let childrenArray = this.children[index].children;
      childrenArray.forEach(item => {
        item.isOwn = e;
      })
      this.getIsCheckAll();
    },
    // 点击三级事件
    handleCheckedCountryChange(topIndex, sonId, e) {
      console.log("3级权限选择", topIndex, sonId, e)
      //三级change事件
      let childrenArray = this.children[topIndex].children
      for (let i = 0; i < childrenArray.length; i++) {
        if (sonId === i) childrenArray[i].isOwn = e;
      }
      this.getIsCheckAll();
    },

    // 通过判断二级选中不选中来选中一级
    getIsCheckAll() {
      console.log("绘制权限编辑展示数据", this.$data);
      // 二级全选、部分选数量
      let secondSelAllCount = 0;
      let secondSelCount = 0;
      // 循环二级权限，判断子节点权限
      this.children.forEach( second =>{
        // 定义循环三级菜单的变量
        let thirdSelCount = 0,
          thirdList = second.children
        // 循坏三级菜单判断选中不选中
        thirdList.forEach(third =>{
          if (third.isOwn === true) thirdSelCount++;
        })
        // console.log("选择的数量", thirdSelCount)
        // 区分子节点是否有权限
        if (second.children.length > 0){
          second.indeterminate = second.isOwn === true;
          if (thirdSelCount > 0){
            second.isOwn = true;
            second.indeterminate = thirdSelCount !== second.children.length;
          }
        } else {
          second.indeterminate = false;
        }
        // 部分选
        if (second.isOwn === true) secondSelCount++;
        //全选checkbox状态
        if (second.isOwn === true && second.indeterminate === false) secondSelAllCount++;
      })
      // 区分子节点是否有权限
      if (secondSelCount > 0) this.isOwn = true;
      if (this.children.length > 0){
        this.indeterminate = this.isOwn === true;
        if (secondSelAllCount > 0){
          this.indeterminate = secondSelAllCount !== this.children.length;
        }
      } else {
        this.indeterminate = false;
      }
      console.log("绘制完成权限编辑展示数据", this.$data);
      this.$nextTick(() => {
        let value = {
          name: this.title,
          code: this.item.code,
          isOwn: this.isOwn,
          parentCode: this.item.parentCode,
          type: this.item.type,
          children: this.children,
        };
        this.$emit("getListItem", value);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.deliverySetting {
  background-color: #f4f5f9;
  border-bottom: 1px solid #ffffff;
  .firstCheckBox {
    width: 250px;
    padding-bottom: 10px;
    background-color: #e8ebf5;
    padding-left: 16px;
  }
  .child-content {
    display: flex;
    .secondCheckBox {
      display: inline-block;
      padding-left: 66px;
      width: 200px;
      padding-bottom: 10px;
      background-color: #e8ebf5;
    }
    .thiredCheckBox {
      flex: 1;
      display: inline-block;
      padding-left: 16px;
    }
  }
}
</style>