基于ElementUI封装的下拉树选择可搜索单选多选清空功能

效果:

组件代码

javascript 复制代码
/**
  * 树形下拉选择组件,下拉框展示树形结构,提供选择某节点功能,方便其他模块调用
  * @author wy
  * @date 2024-01-03  * 调用示例:
  * <tree-select 
  * :height="400" // 下拉框中树形高度
  *     :width="200" // 下拉框中树形宽度
  *     :isFilter="true" //是否出现树结构搜索过滤
  *     size="small"  // 输入框的尺寸: medium/small/mini
  *     :data="data" // 树结构的数据
  *     :defaultProps="defaultProps" // 树结构的props
  *     multiple   // 多选
  *     :inputWidth='250'  //输入框的长度 Number
  *     clearable   // 可清空选择
  *     collapseTags   // 多选时将选中值按文字的形式展示
  *     checkStrictly // 多选时,严格遵循父子不互相关联
  *     :nodeKey="nodeKey"   // 绑定nodeKey,默认绑定'id'
  *     :checkedKeys="defaultCheckedKeys"  // 传递默认选中的节点key组成的数组
  *     @popoverHide="popoverHide"> // 事件有两个参数:第一个是所有选中的节点ID,第二个是所有选中的节点数据
  *  </tree-select>
*/
<template>
  <div>
    <div
      v-show="isShowSelect"
      class="mask"
      @click="isShowSelect = !isShowSelect"
    />
    <el-popover
      v-model="isShowSelect"
      placement="bottom-start"
      :width="width"
      trigger="manual"
      style="padding: 12px 0"
      @hide="popoverHide"
    >
      <el-input v-if="isFilter" placeholder="输入关键字进行过滤" size="mini" v-model="filterText">
      </el-input>
      <el-tree
        ref="tree"
        class="common-tree"
        :style="style"
        :data="data"
        :props="defaultProps"
        :show-checkbox="multiple"
        :node-key="nodeKey"
        :check-strictly="checkStrictly"
        default-expand-all
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        :check-on-click-node="multiple"
        :highlight-current="true"
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
      />
      <el-select
        slot="reference"
        ref="select"
        v-model="selectedData"
        :style="selectStyle"
        :size="size"
        :multiple="multiple"
        :clearable="clearable"
        :collapse-tags="collapseTags"
        class="tree-select"
        @click.native="isShowSelect = !isShowSelect"
        @remove-tag="removeSelectedNodes"
        @clear="removeSelectedNode"
        @change="changeSelectedNodes"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    // 树结构数据
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    defaultProps: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "name",
        };
      },
    },
    // 配置是否可多选
    multiple: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 配置是否可清空选择
    clearable: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 配置多选时是否将选中值按文字的形式展示
    collapseTags: {
      type: Boolean,
      default() {
        return false;
      },
    },
    //唯一key值
    nodeKey: {
      type: String,
      default() {
        return "id";
      },
    },
    // 显示复选框情况下,是否严格遵循父子不互相关联
    checkStrictly: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 默认选中的节点key数组
    checkedKeys: {
      type: Array,
      default() {
        return [];
      },
    },
    // 输入框的尺寸
    size: {
      type: String,
      default() {
        return "medium";
      },
    },
    // 总体宽度
    width: {
      type: Number,
      default() {
        return 250;
      },
    },
    // 输入框的宽度
    inputWidth: {
      type: Number,
      default() {
        return 150;
      },
    },
    // 下拉框的高度
    height: {
      type: Number,
      default() {
        return 300;
      },
    },
    // 是否具有过滤搜索功能
    isFilter: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  data() {
    return {
      filterText: "", //树搜索
      isShowSelect: false, // 是否显示树状选择器
      options: [],
      selectedData: [], // 选中的节点
      style: "width:" + this.width + "px;" + "height:" + this.height + "px;",
      selectStyle: "width:" + this.inputWidth + "px;",
      checkedIds: [],
      checkedData: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    // eslint-disable-next-line no-unused-vars
    isShowSelect(val) {
      // 隐藏select自带的下拉框
      this.$refs.select.blur();
    },
    checkedKeys(val) {
      console.log("checkedKeys", val);
      if (!val) return;
      // eslint-disable-next-line vue/no-mutating-props
      this.checkedKeys = val;
      this.initCheckedData();
    },
  },
  mounted() {
    this.initCheckedData();
  },
  methods: {
    //过滤函数
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    // 单选时点击tree节点,设置select选项
    setSelectOption(node) {
      // console.log("~~~~~",node)
      const tmpMap = {};
      tmpMap.value = node.key;
      tmpMap.label = node.label;
      this.options = [];
      this.options.push(tmpMap);
      this.selectedData = node.key;
    },
    // 单选,选中传进来的节点
    checkSelectedNode(checkedKeys) {
      var item = checkedKeys[0];
      this.$refs.tree.setCurrentKey(item);
      var node = this.$refs.tree.getNode(item);
      // console.log("checkSelectedNode",this.$refs.tree)
      this.setSelectOption(node);
    },
    // 多选,勾选上传进来的节点
    checkSelectedNodes(checkedKeys) {
      // this.$refs.tree.setCheckedKeys(checkedKeys)
      // console.log("checkSelectedNodes-checkedKeys",checkedKeys)
      // 优化select回显显示 有个延迟的效果
      const that = this;
      setTimeout(function () {
        that.$refs.tree.setCheckedKeys(checkedKeys);
      }, 10);
      this.$forceUpdate();
      // console.log('checkSelectedNodes', this.selectedData)
    },
    // 单选,清空选中
    clearSelectedNode() {
      this.selectedData = [];
      this.$refs.tree.setCurrentKey(null);
    },
    // 多选,清空所有勾选
    clearSelectedNodes() {
      var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
      for (let i = 0; i < checkedKeys.length; i++) {
        this.$refs.tree.setChecked(checkedKeys[i], false);
      }
    },
    // 在组件初始化时,根据传递的默认选中节点信息,设置树形结构中的节点的选中状态。
    initCheckedData() {
      if (this.multiple) {
        // 多选
        // console.log(this.checkedKeys.length)
        if (this.checkedKeys.length > 0) {
          this.checkSelectedNodes(this.checkedKeys);
        } else {
          this.clearSelectedNodes();
        }
      } else {
        // 单选
        if (this.checkedKeys.length > 0) {
          this.checkSelectedNode(this.checkedKeys);
        } else {
          this.clearSelectedNode();
        }
      }
    },
    popoverHide() {
      if (this.multiple) {
        this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
        this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据
      } else {
        this.checkedIds = this.$refs.tree.getCurrentKey();
        this.checkedData = this.$refs.tree.getCurrentNode();
      }
      this.$emit("popoverHide", this.checkedIds, this.checkedData);
    },
    // 单选,节点被点击时的回调,返回被点击的节点数据
    handleNodeClick(data, node) {
      if (!this.multiple) {
        this.setSelectOption(node);
        this.isShowSelect = !this.isShowSelect;
        this.$emit("change", this.selectedData);
      }
    },
    // 多选,节点勾选状态发生变化时的回调
    handleCheckChange() {
      var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
      this.options = checkedKeys.map((item) => {
        var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
        const tmpMap = {};
        tmpMap.value = node.key;
        tmpMap.label = node.label;
        return tmpMap;
      });
      this.selectedData = this.options.map((item) => {
        return item.value;
      });
      this.$emit("change", this.selectedData);
    },
    // 多选,删除任一select选项的回调
    removeSelectedNodes(val) {
      this.$refs.tree.setChecked(val, false);
      var node = this.$refs.tree.getNode(val);
      if (!this.checkStrictly && node.childNodes.length > 0) {
        this.treeToList(node).map((item) => {
          if (item.childNodes.length <= 0) {
            this.$refs.tree.setChecked(item, false);
          }
        });
        this.handleCheckChange();
      }
      this.$emit("change", this.selectedData);
    },
    treeToList(tree) {
      var queen = [];
      var out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        var first = queen.shift();
        if (first.childNodes) {
          queen = queen.concat(first.childNodes);
        }
        out.push(first);
      }
      return out;
    },
    // 单选,清空select输入框的回调
    removeSelectedNode() {
      this.clearSelectedNode();
      this.$emit("change", this.selectedData);
    },
    // 选中的select选项改变的回调
    changeSelectedNodes(selectedData) {
      // 多选,清空select输入框时,清除树勾选
      if (this.multiple && selectedData.length <= 0) {
        this.clearSelectedNodes();
      }
      this.$emit("change", this.selectedData);
    },
  },
};
</script>
<style scoped>
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 11;
}

.common-tree {
  overflow: auto;
}

.tree-select {
  z-index: 111;
}
</style>

参数方法说明

属性 说明
height 下拉框中树形高度 height="400"
width 下拉框中树形宽度 width ="400"
isFilter 是否出现树结构搜索过滤 默认为true
size 输入框的尺寸: medium/small/mini
data 树结构的数据
defaultProps 树结构的props,树结构说明
multiple 是否多选
inputWidth 输入框的长度 Number
clearable 是否可清空选择
collapseTags 多选时将选中值按文字的形式展示
checkStrictly 多选时,严格遵循父子不互相关联
nodeKey 绑定nodeKey,默认绑定'id'
checkedKeys 传递默认选中的节点key组成的数组
@popoverHide="popoverHide" 事件有两个参数:第一个是所有选中的节点ID,第二个是所有选中的节点数据
@change="clearKey" 当选项改变时触发

组件使用包含模拟数据

javascript 复制代码
<template>
  <div>
    <HSKselecte
      v-model="workName"
      :inputWidth="250"
      :data="treeData"
      v-show="dialogFormVisible"
      style="'width: 100%'"
      :checkedKeys="defaultCheckedKeys"
      @change="clearKey"
      :isFilter="isFilter"
      clearable
      :multiple="multiple"
      @popoverHide="onCateSelect"
    >
    </HSKselecte>
  </div>
</template>
<script>
// import selectTree from "@/package/hsk-treeSelect/index.vue";
import HSKselecte from "../package/hsk-treeSelect/index.vue";
export default {
  data() {
    return {
      isFilter:true,
      multiple:true,
      radio1:'',
      workName:'',
      dialogFormVisible: true,
      selectType: "sigle",
      defaultCheckedKeys: [],
      defaultExpandedKeys: [],
      checkedKeys: [],
      treeData: [
        {
          id: "platform-1651478710725455875",
          parentId: null,
          name: "基础信息",
          identification: null,
          url: null,
          sortNo: null,
          menuType: "0",
          permissionGroupId: null,
          checkFlag: null,
          platformId: null,
          children: [
            {
              id: "1",
              parentId: "0",
              name: "生产单位管理",
              identification: null,
              url: "/workUnit",
              sortNo: "1",
              menuType: "1",
              permissionGroupId: null,
              checkFlag: true,
              platformId: "1651478710725455875",
              children: [
                {
                  id: "6",
                  parentId: "1",
                  name: "生产单位",
                  identification: null,
                  url: "workUnit",
                  sortNo: "1",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "pagInfo-1",
                      parentId: "6",
                      name: "车间管理",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "17",
                          parentId: "pagInfo-1",
                          name: "新增",
                          identification:
                            "basic:productionUnitManagement:productionUnit:addworkshop",
                          url: null,
                          sortNo: "1",
                          menuType: "4",
                          permissionGroupId: "1",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "18",
                          parentId: "pagInfo-1",
                          name: "修改",
                          identification:
                            "basic:productionUnitManagement:productionUnit:editshop",
                          url: null,
                          sortNo: "2",
                          menuType: "4",
                          permissionGroupId: "1",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "19",
                          parentId: "pagInfo-1",
                          name: "删除",
                          identification:
                            "basic:productionUnitManagement:productionUnit:deleteshop",
                          url: null,
                          sortNo: "3",
                          menuType: "4",
                          permissionGroupId: "1",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "20",
                          parentId: "pagInfo-1",
                          name: "设置状态",
                          identification:
                            "basic:productionUnitManagement:productionUnit:editshopstatus",
                          url: null,
                          sortNo: "4",
                          menuType: "4",
                          permissionGroupId: "1",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                    {
                      id: "pagInfo-2",
                      parentId: "6",
                      name: "工作中心管理",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "21",
                          parentId: "pagInfo-2",
                          name: "新增",
                          identification:
                            "basic:productionUnitManagement:productionUnit:addworkcenter",
                          url: null,
                          sortNo: "5",
                          menuType: "4",
                          permissionGroupId: "2",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "22",
                          parentId: "pagInfo-2",
                          name: "修改",
                          identification:
                            "basic:productionUnitManagement:productionUnit:editworkcenter",
                          url: null,
                          sortNo: "6",
                          menuType: "4",
                          permissionGroupId: "2",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "23",
                          parentId: "pagInfo-2",
                          name: "删除",
                          identification:
                            "basic:productionUnitManagement:productionUnit:deleteworkcenter",
                          url: null,
                          sortNo: "7",
                          menuType: "4",
                          permissionGroupId: "2",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "24",
                          parentId: "pagInfo-2",
                          name: "设置状态",
                          identification:
                            "basic:productionUnitManagement:productionUnit:editworkcenterstatus",
                          url: null,
                          sortNo: "8",
                          menuType: "4",
                          permissionGroupId: "2",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                    {
                      id: "pagInfo-3",
                      parentId: "6",
                      name: "产线管理",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "25",
                          parentId: "pagInfo-3",
                          name: "新增",
                          identification:
                            "basic:productionUnitManagement:productionUnit:addproductionline",
                          url: null,
                          sortNo: "9",
                          menuType: "4",
                          permissionGroupId: "3",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "26",
                          parentId: "pagInfo-3",
                          name: "修改",
                          identification:
                            "basic:productionUnitManagement:productionUnit:editproductionline",
                          url: null,
                          sortNo: "10",
                          menuType: "4",
                          permissionGroupId: "3",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "27",
                          parentId: "pagInfo-3",
                          name: "删除",
                          identification:
                            "basic:productionUnitManagement:productionUnit:deleteproductionline",
                          url: null,
                          sortNo: "11",
                          menuType: "4",
                          permissionGroupId: "3",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "28",
                          parentId: "pagInfo-3",
                          name: "设置状态",
                          identification:
                            "basic:productionUnitManagement:productionUnit:editproductionlinestatus",
                          url: null,
                          sortNo: "12",
                          menuType: "4",
                          permissionGroupId: "3",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                    {
                      id: "pagInfo-4",
                      parentId: "6",
                      name: "设备管理",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "29",
                          parentId: "pagInfo-4",
                          name: "绑定",
                          identification:
                            "basic:productionUnitManagement:productionUnit:bindequipment",
                          url: null,
                          sortNo: "13",
                          menuType: "4",
                          permissionGroupId: "4",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "30",
                          parentId: "pagInfo-4",
                          name: "解绑",
                          identification:
                            "basic:productionUnitManagement:productionUnit:unbindequipment",
                          url: null,
                          sortNo: "14",
                          menuType: "4",
                          permissionGroupId: "4",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                  ],
                },
                {
                  id: "7",
                  parentId: "1",
                  name: "设备保养计划",
                  identification: null,
                  url: "maintenancePlan",
                  sortNo: "2",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "31",
                      parentId: "7",
                      name: "新增",
                      identification:
                        "basic:productionUnitManagement:maintenancePlan:addPlan",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "32",
                      parentId: "7",
                      name: "修改",
                      identification:
                        "basic:productionUnitManagement:maintenancePlan:editPlan",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "33",
                      parentId: "7",
                      name: "删除",
                      identification:
                        "basic:productionUnitManagement:maintenancePlan:deletePlan",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "39",
                      parentId: "7",
                      name: "导入模板",
                      identification:
                        "basic:productionUnitManagement:maintenancePlan:importPlan",
                      url: null,
                      sortNo: "5",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "97",
                      parentId: "7",
                      name: "查看详情",
                      identification:
                        "basic:productionUnitManagement:maintenancePlan:detailPlan",
                      url: null,
                      sortNo: "6",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
                {
                  id: "8",
                  parentId: "1",
                  name: "设备管理",
                  identification: null,
                  url: "equipment",
                  sortNo: "3",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "34",
                      parentId: "8",
                      name: "新增",
                      identification:
                        "basic:productionUnitManagement:equipmentUnit:addequipment",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "35",
                      parentId: "8",
                      name: "修改",
                      identification:
                        "basic:productionUnitManagement:equipmentUnit:editequipment",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "36",
                      parentId: "8",
                      name: "删除",
                      identification:
                        "basic:productionUnitManagement:equipmentUnit:deleteequipment",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "37",
                      parentId: "8",
                      name: "设置状态",
                      identification:
                        "basic:productionUnitManagement:equipmentUnit:editequipmentstatus",
                      url: null,
                      sortNo: "4",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "41",
                      parentId: "8",
                      name: "导入模板",
                      identification:
                        "basic:productionUnitManagement:equipmentUnit:importtemplate",
                      url: null,
                      sortNo: "6",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
              ],
            },
            {
              id: "2",
              parentId: "0",
              name: "用户权限管理",
              identification: null,
              url: "/user",
              sortNo: "2",
              menuType: "1",
              permissionGroupId: null,
              checkFlag: true,
              platformId: "1651478710725455875",
              children: [
                {
                  id: "9",
                  parentId: "2",
                  name: "用户管理",
                  identification: null,
                  url: "user",
                  sortNo: "1",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "pagInfo-5",
                      parentId: "9",
                      name: "部门管理",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "42",
                          parentId: "pagInfo-5",
                          name: "新增",
                          identification: "basic:userManage:depart:addDept",
                          url: null,
                          sortNo: "1",
                          menuType: "4",
                          permissionGroupId: "5",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "43",
                          parentId: "pagInfo-5",
                          name: "修改",
                          identification: "basic:userManage:depart:editDept",
                          url: null,
                          sortNo: "2",
                          menuType: "4",
                          permissionGroupId: "5",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "44",
                          parentId: "pagInfo-5",
                          name: "删除",
                          identification: "basic:userManage:depart:deleteDept",
                          url: null,
                          sortNo: "3",
                          menuType: "4",
                          permissionGroupId: "5",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                    {
                      id: "pagInfo-6",
                      parentId: "9",
                      name: "用户管理",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "45",
                          parentId: "pagInfo-6",
                          name: "新增",
                          identification: "basic:userManage:user:adduser",
                          url: null,
                          sortNo: "4",
                          menuType: "4",
                          permissionGroupId: "6",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "46",
                          parentId: "pagInfo-6",
                          name: "修改",
                          identification: "basic:userManage:user:edituser",
                          url: null,
                          sortNo: "5",
                          menuType: "4",
                          permissionGroupId: "6",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "47",
                          parentId: "pagInfo-6",
                          name: "删除",
                          identification: "basic:userManage:user:deleteuser",
                          url: null,
                          sortNo: "6",
                          menuType: "4",
                          permissionGroupId: "6",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "48",
                          parentId: "pagInfo-6",
                          name: "设置状态",
                          identification:
                            "basic:userManage:user:edituserstatus",
                          url: null,
                          sortNo: "7",
                          menuType: "4",
                          permissionGroupId: "6",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "49",
                          parentId: "pagInfo-6",
                          name: "分配角色",
                          identification: "basic:userManage:user:assignroles",
                          url: null,
                          sortNo: "8",
                          menuType: "4",
                          permissionGroupId: "6",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "50",
                          parentId: "pagInfo-6",
                          name: "重置密码",
                          identification: "basic:userManage:user:userrepaw",
                          url: null,
                          sortNo: "9",
                          menuType: "4",
                          permissionGroupId: "6",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "52",
                          parentId: "pagInfo-6",
                          name: "导入模板",
                          identification:
                            "basic:userManage:user:importtemplate",
                          url: null,
                          sortNo: "11",
                          menuType: "4",
                          permissionGroupId: "6",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                  ],
                },
                {
                  id: "10",
                  parentId: "2",
                  name: "角色管理",
                  identification: null,
                  url: "role",
                  sortNo: "2",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "53",
                      parentId: "10",
                      name: "分配权限",
                      identification: "basic:roleManage:role:assignauthority",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "54",
                      parentId: "10",
                      name: "新增",
                      identification: "basic:roleManage:role:addrole",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "55",
                      parentId: "10",
                      name: "修改",
                      identification: "basic:roleManage:role:editrole",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "56",
                      parentId: "10",
                      name: "删除",
                      identification: "basic:roleManage:role:deleterole",
                      url: null,
                      sortNo: "4",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
              ],
            },
            {
              id: "3",
              parentId: "0",
              name: "生产物料管理",
              identification: null,
              url: "/material",
              sortNo: "3",
              menuType: "1",
              permissionGroupId: null,
              checkFlag: true,
              platformId: "1651478710725455875",
              children: [
                {
                  id: "11",
                  parentId: "3",
                  name: "物料管理",
                  identification: null,
                  url: "material",
                  sortNo: "1",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "57",
                      parentId: "11",
                      name: "新增",
                      identification:
                        "basic:materialUnitManagement:materialUnit:addmaterial",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "58",
                      parentId: "11",
                      name: "修改",
                      identification:
                        "basic:materialUnitManagement:materialUnit:editmaterial",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "59",
                      parentId: "11",
                      name: "删除",
                      identification:
                        "basic:materialUnitManagement:materialUnit:deletematerial",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "61",
                      parentId: "11",
                      name: "导入模板",
                      identification:
                        "basic:materialUnitManagement:materialUnit:importmaterial",
                      url: null,
                      sortNo: "5",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "62",
                      parentId: "11",
                      name: "导出",
                      identification:
                        "basic:materialUnitManagement:materialUnit:exportmaterial",
                      url: null,
                      sortNo: "6",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "98",
                      parentId: "11",
                      name: "新增bom",
                      identification:
                        "basic:materialUnitManagement:bomUnit:addbom",
                      url: null,
                      sortNo: "7",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "99",
                      parentId: "11",
                      name: "修改bom",
                      identification:
                        "basic:materialUnitManagement:bomUnit:editbom",
                      url: null,
                      sortNo: "8",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "100",
                      parentId: "11",
                      name: "新增工艺路线",
                      identification:
                        "basic:materialUnitManagement:processrouteUnit:addprocessroute",
                      url: null,
                      sortNo: "9",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "101",
                      parentId: "11",
                      name: "修改工艺路线",
                      identification:
                        "basic:materialUnitManagement:processrouteUnit:editprocessroute",
                      url: null,
                      sortNo: "10",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
                {
                  id: "12",
                  parentId: "3",
                  name: "BOM管理",
                  identification: null,
                  url: "bom",
                  sortNo: "2",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "63",
                      parentId: "12",
                      name: "新增",
                      identification:
                        "basic:materialUnitManagement:bomUnit:addbom",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "64",
                      parentId: "12",
                      name: "修改",
                      identification:
                        "basic:materialUnitManagement:bomUnit:editbom",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "65",
                      parentId: "12",
                      name: "删除",
                      identification:
                        "basic:materialUnitManagement:bomUnit:deletebom",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "67",
                      parentId: "12",
                      name: "导入模板",
                      identification:
                        "basic:materialUnitManagement:bomUnit:importbom",
                      url: null,
                      sortNo: "5",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "68",
                      parentId: "12",
                      name: "设置状态",
                      identification:
                        "basic:materialUnitManagement:bomUnit:editbomstatus",
                      url: null,
                      sortNo: "6",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
                {
                  id: "13",
                  parentId: "3",
                  name: "工艺路线管理",
                  identification: null,
                  url: "processRoute",
                  sortNo: "3",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "69",
                      parentId: "13",
                      name: "新增",
                      identification:
                        "basic:materialUnitManagement:processrouteUnit:addprocessroute",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "70",
                      parentId: "13",
                      name: "修改",
                      identification:
                        "basic:materialUnitManagement:processrouteUnit:editprocessroute",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "71",
                      parentId: "13",
                      name: "删除",
                      identification:
                        "basic:materialUnitManagement:processrouteUnit:deleteprocessroute",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "72",
                      parentId: "13",
                      name: "设置状态",
                      identification:
                        "basic:materialUnitManagement:processrouteUnit:editprocessroutestatus",
                      url: null,
                      sortNo: "4",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "74",
                      parentId: "13",
                      name: "导入模板",
                      identification:
                        "basic:materialUnitManagement:processrouteUnit:importprocessroute",
                      url: null,
                      sortNo: "6",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
                {
                  id: "14",
                  parentId: "3",
                  name: "工艺管理",
                  identification: null,
                  url: "technology",
                  sortNo: "4",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "75",
                      parentId: "14",
                      name: "新增",
                      identification: "basic:technologyManage:technology:add",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "76",
                      parentId: "14",
                      name: "修改",
                      identification: "basic:technologyManage:technology:edit",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "77",
                      parentId: "14",
                      name: "删除",
                      identification:
                        "basic:technologyManage:technology:delete",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "78",
                      parentId: "14",
                      name: "设置状态",
                      identification:
                        "basic:technologyManage:technology:edittechnologystatus",
                      url: null,
                      sortNo: "4",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "80",
                      parentId: "14",
                      name: "导入模板",
                      identification:
                        "basic:technologyManage:technology:importtemplate",
                      url: null,
                      sortNo: "6",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
              ],
            },
            {
              id: "4",
              parentId: "0",
              name: "生产日历管理",
              identification: null,
              url: "/calendar",
              sortNo: "4",
              menuType: "1",
              permissionGroupId: null,
              checkFlag: true,
              platformId: "1651478710725455875",
              children: [
                {
                  id: "15",
                  parentId: "4",
                  name: "工作日历",
                  identification: null,
                  url: "calendar",
                  sortNo: "1",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "81",
                      parentId: "15",
                      name: "新增",
                      identification:
                        "basic:calendarUnitManagement:calendarUnit:addcalendar",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "82",
                      parentId: "15",
                      name: "修改",
                      identification:
                        "basic:calendarUnitManagement:calendarUnit:editcalendar",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "83",
                      parentId: "15",
                      name: "删除",
                      identification:
                        "basic:calendarUnitManagement:calendarUnit:deletecalendar",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "84",
                      parentId: "15",
                      name: "配置班次",
                      identification:
                        "basic:calendarUnitManagement:calendarUnit:configclassforcalendar",
                      url: null,
                      sortNo: "4",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
                {
                  id: "16",
                  parentId: "4",
                  name: "班次管理",
                  identification: null,
                  url: "scheduling",
                  sortNo: "2",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "85",
                      parentId: "16",
                      name: "新增",
                      identification:
                        "basic:calendarUnitManagement:scheduleUnit:addschedule",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "86",
                      parentId: "16",
                      name: "修改",
                      identification:
                        "basic:calendarUnitManagement:scheduleUnit:editschedule",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "87",
                      parentId: "16",
                      name: "删除",
                      identification:
                        "basic:calendarUnitManagement:scheduleUnit:deleteschedule",
                      url: null,
                      sortNo: "3",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "88",
                      parentId: "16",
                      name: "设置状态",
                      identification:
                        "basic:calendarUnitManagement:scheduleUnit:editschedulestatus",
                      url: null,
                      sortNo: "4",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
              ],
            },
            {
              id: "5",
              parentId: "0",
              name: "系统信息",
              identification: null,
              url: "/bmgl",
              sortNo: "5",
              menuType: "1",
              permissionGroupId: null,
              checkFlag: true,
              platformId: "1651478710725455875",
              children: [
                {
                  id: "89",
                  parentId: "5",
                  name: "编码管理",
                  identification: null,
                  url: "bmgl",
                  sortNo: "1",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "90",
                      parentId: "89",
                      name: "修改",
                      identification: "basic:codeManage:code:edit",
                      url: null,
                      sortNo: "1",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                    {
                      id: "91",
                      parentId: "89",
                      name: "设置状态",
                      identification: "basic:codeManage:code:editcodestatus",
                      url: null,
                      sortNo: "2",
                      menuType: "4",
                      permissionGroupId: null,
                      checkFlag: true,
                      platformId: "1651478710725455875",
                      children: [],
                    },
                  ],
                },
                {
                  id: "92",
                  parentId: "5",
                  name: "操作日志",
                  identification: null,
                  url: "operateLog",
                  sortNo: "2",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [],
                },
                {
                  id: "93",
                  parentId: "5",
                  name: "信息导入",
                  identification: null,
                  url: "informationImport",
                  sortNo: "3",
                  menuType: "2",
                  permissionGroupId: null,
                  checkFlag: true,
                  platformId: "1651478710725455875",
                  children: [
                    {
                      id: "pagInfo-7",
                      parentId: "93",
                      name: "数据导入",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "94",
                          parentId: "pagInfo-7",
                          name: "模板下载",
                          identification:
                            "basic:Infoimport:import:downloadtemplate",
                          url: null,
                          sortNo: "1",
                          menuType: "4",
                          permissionGroupId: "7",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                        {
                          id: "95",
                          parentId: "pagInfo-7",
                          name: "数据导入",
                          identification:
                            "basic:Infoimport:import:importtemplate",
                          url: null,
                          sortNo: "2",
                          menuType: "4",
                          permissionGroupId: "7",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                    {
                      id: "pagInfo-8",
                      parentId: "93",
                      name: "导入记录",
                      identification: null,
                      url: null,
                      sortNo: null,
                      menuType: "3",
                      permissionGroupId: null,
                      checkFlag: null,
                      platformId: null,
                      children: [
                        {
                          id: "96",
                          parentId: "pagInfo-8",
                          name: "错误数据下载",
                          identification:
                            "basic:Infoimport:import:downloaderrdata",
                          url: null,
                          sortNo: "3",
                          menuType: "4",
                          permissionGroupId: "8",
                          checkFlag: true,
                          platformId: "1651478710725455875",
                          children: [],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  components: {
    // selectTree,
    HSKselecte,
  },
  props: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
     onCateSelect(a,b){
      console.log("onCateSelect",a,b)
    },
    clearKey(a){
      console.log(a)
    },
    //获取勾选数据
    getdetail(val) {
      this.defaultKey = [];
      this.defaultKey.push(val);
      // this.form.workGroupId = val.workGroupId;
    },
    changeTreeItem(res) {
      console.log(res);
    },
    getGroupSequence() {
      return this.treeData;
    },
  },
};
</script>
<style scoped>
.flex1 {
  flex: 1;
}
</style>
相关推荐
M_emory_12 分钟前
解决 git clone 出现:Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git
Ciito15 分钟前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
成都被卷死的程序员1 小时前
响应式网页设计--html
前端·html
fighting ~1 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html
老码沉思录1 小时前
React Native 全栈开发实战班 - 列表与滚动视图
javascript·react native·react.js
abments1 小时前
JavaScript逆向爬虫教程-------基础篇之常用的编码与加密介绍(python和js实现)
javascript·爬虫·python
mon_star°1 小时前
将答题成绩排行榜数据通过前端生成excel的方式实现导出下载功能
前端·excel
Zrf21913184551 小时前
前端笔试中oj算法题的解法模版
前端·readline·oj算法
老码沉思录1 小时前
React Native 全栈开发实战班 - 状态管理入门(Context API)
javascript·react native·react.js
文军的烹饪实验室2 小时前
ValueError: Circular reference detected
开发语言·前端·javascript