AreaModel.vue

当时组件由其他人封装，现在代码中的dataManIndex，dataMan等关键点不知其具体作用，各位大神帮忙分析分析，到底是个什么思路？

tree组件封装后如下，组件实现了数据异步加载、半选全选回显。

组件在回显半选时无法直接渲染传入的halfChecked，但是需要在未加载下层数据时展示半选状态。

Template

<template>
  <div>
    <a-spin :spinning="confirmLoading" class="spin-box">
      <!-- <tree-area
        ref="treeArea"
        :checked-keys="checkedKeys"
        :tree-data="areaList"
      /> -->
      <a-tree ref="treeRef" multiple checkable :checkedKeys="checkedKeys" treeNodeFilterProp="title"
        :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :treeData="areaList" placeholder="请选择一个区域"
        @check="onCheck" @expand="onExpand" :load-data="onLoadData" v-model="checkedKeys" :replaceFields="replaceFields">
      </a-tree>
    </a-spin>
    <div class="drawer-form-footer">
      <a-button type="primary" :loading="btnLoading" @click="save">保 存</a-button>
      <a-button type="default" @click="close">取 消</a-button>
    </div>
  </div>
</template>

<script>
import {
  getCheckedAreaIds,
  savaAll,
} from "@/api/basicYunService/tenant/tenantArea";
import {
  lazyArea,
  selectAllAreaList,
  selectAreaForTenent,
} from "@/api/sysManage/sysAreas";

import { saveBasisGrid } from "@/api/gridService/baseGridManage";

import { getArrayToTree } from "@/utils/util";

import TreeArea from "@/components/Tree/TreeArea";

export default {
  name: "AreaModel",
  components: {
    TreeArea,
  },
  props: {
    areaRecord: {
      type: Object,
      default: () => ({}),
    },
    refreshTable: {
      type: Function,
    },
  },
  data() {
    return {
      confirmLoading: true,
      autoExpandParent: true,
      areaList: [],
      checkedKeys: [],
      btnLoading: true,
      replaceFields: {
        value: "areaId",
        key: "areaId",
        title: "areaName",
        children: "children",
      },
      dataManIndex: 3,
      dataMan: [
        {
          areaCode: null,
          areaId: -1,
          areaLevel: "1",
          areaName: "黑龙江省"
        },
        {
          areaCode: null,
          areaId: -2,
          areaLevel: "1",
          areaName: "黑龙江省"
        },
      ]
      // areaNode:[]
    };
  },
  created() {
    this.loadTreeData();
  },
  methods: {
    loadTreeData() {
      Promise.all([
        selectAreaForTenent({
          tenantId: this.areaRecord.tenantId,
          parentAreaId: 0,
        }), // 获取全部节点数据
        getCheckedAreaIds({ tenantId: this.areaRecord.tenantId }), // 获取已选中
      ])
        .then(([resAreaList, resCheckedKeys]) => {
          let checkedBak = []
          this.checkedKeys = resCheckedKeys.data.result.map((item) => {
            //树回显需要number
            return parseInt(item);
          });
          if (resAreaList.data.result[0].checked) {
            resAreaList.data.result[0].children = JSON.parse(JSON.stringify(this.dataMan));
            checkedBak = [-1, -2]
          } else if (resAreaList.data.result[0].halfChecked) {
            resAreaList.data.result[0].children = JSON.parse(JSON.stringify(this.dataMan));;
            checkedBak = [-1]

          }

          this.areaList = getArrayToTree(resAreaList.data.result, {
            id: "areaId",
            pid: "parentAreaId",
          });

          this.checkedKeys = this.checkedKeys.concat(checkedBak)
        })
        .finally(() => {
          this.confirmLoading = false;
          this.btnLoading = false;
        });
    },
    save() {
      if (this.checkedKeys.length < 1) {
        this.$message.warn("请勾选区域后分配");
        return;
      }

      this.confirmLoading = true;
      this.btnLoading = true;
      let NewcheckedKeys = this.checkedKeys.map((item) => {
        // debugger
        return (item = String(item));
      });
      console.log("NewcheckedKeys", NewcheckedKeys);
      const saveForm = {
        areaRecord: JSON.stringify(this.areaRecord),
        checkedNodes: JSON.stringify(NewcheckedKeys),
      };
      console.log(saveForm);
      // return
      savaAll(saveForm)
        .then((res) => {
          if (res.data.head.status === "200") {
            this.$message.success("保存成功");
            this.refreshTable();
          } else {
            this.$message.warn("抱歉，发生错误...");
          }
        })
        .finally(() => {
          this.confirmLoading = false;
          this.btnLoading = false;
        });
    },
    close() {
      // this.refreshTable()
      this.$emit("close");
    },
    /**   listToTree (list, tree, parentId) {
      list.forEach((item) => {
        // 判断是否为父级菜单
        if (item.parentAreaId === parentId) {
          const child = {
            ...item,
            key: item.areaId,
            name: item.areaName,
            title: item.areaName,
            pid: item.parentAreaId,
            children: []
          }
          // 迭代 list， 找到当前菜单相符合的所有子菜单
          this.listToTree(list, child.children, item.areaId)
          // 删掉不存在 children 值的属性
          if (child.children.length <= 0) {
            delete child.children
          }
          // 加入到树中
          tree.push(child)
        }
      })
    },*/
    onExpand() {},
    
    onLoadData(treeNode) {
      // debugger
      this.confirmLoading = true;
      // console.log("treeNode.dataRef", treeNode.dataRef);
      return new Promise((resolve) => {
        Promise.all([
          selectAreaForTenent({
            tenantId: this.areaRecord.tenantId,
            parentAreaId: treeNode.dataRef.areaId,
          }),
          selectAllAreaList({ parentAreaId: treeNode.dataRef.areaId })]).then(
            ([res,hasChildRes]) => {
              const children = res.data.result.map((r) => {
                  //遍历获取hasChild并赋值给isLeaf
                  const hasChild = hasChildRes.data.result.find((h) => h.areaId === r.areaId);
                  const isLeaf = !hasChild.hasChild
                  return {
                    areaCode: r.areaCode,
                    areaId: r.areaId,
                    areaLevel: r.areaLevel,
                    areaName: r.areaName,
                    parentAreaId: r.parentAreaId,
                    seqNum: r.seqNum,
                    status: r.status,
                    virtualCode: r.virtualCode,
                    children: [],
                    isLeaf: isLeaf,
                    checked: r.checked,
                    halfChecked: r.halfChecked,
                  }
                }) || [];
              let checkedBak = []
              if (treeNode.halfChecked || treeNode.checked) {
                // debugger
                // if (this.checkedKeys.indexOf(treeNode.dataRef.areaId) > -1||treeNode.halfChecked == true){
                  children.forEach(element => {
                    let man = JSON.parse(JSON.stringify(this.dataMan));
                    this.dataManIndex = this.dataManIndex + 1
                    man[0].areaId = -this.dataManIndex
                    this.dataManIndex = this.dataManIndex + 1
                    man[1].areaId = -this.dataManIndex
                    if (element.checked) {
                      element.children = man
                      checkedBak = [man[0].areaId, man[1].areaId]
                    } else if (element.halfChecked) {
                    
                      element.children = man
                      checkedBak = [man[0].areaId]
                    }

                  });
                
              }

              treeNode.dataRef.children = children;
              this.checkedKeys = this.checkedKeys.concat(checkedBak)
              this.areaList = [...this.areaList];
              console.log('checkBak', checkedBak);
              console.log('this.checkedKeys', this.checkedKeys);
              resolve();
            }
          ).finally(() => {
            this.confirmLoading = false;
          })
      });
    },
    onCheck(checkedKeys, info) {
      console.log("checkedKeys", checkedKeys);
      console.log("info", info);
      // this.areaNode = info.checkedNodes.map(item=>({
      //   areaCode: item.data.props.dataRef.areaCode,
      //         areaId: item.data.props.dataRef.areaId,
      //         areaLevel: item.data.props.dataRef.areaLevel,
      //         areaName: item.data.props.dataRef.areaName,
      //         parentAreaId: item.data.props.dataRef.parentAreaId,
      //         seqNum: item.data.props.dataRef.seqNum,
      //         status: item.data.props.dataRef.status,
      //         virtualCode: item.data.props.dataRef.virtualCode,
      // }))
      // console.log(this.areaNode)
    },
  },
};
</script>
<style lang="less" scoped>
.spin-box {
  height: 100%;

  ::v-deep .ant-spin-container {
    height: 100%;
  }
}
</style>