peisweb/src/components/customerOrg/customerOrgTree.vue

<template>
  <div>
    <div style="margin:2px 2px 2px 2px;">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" />
    </div>
    <div>
      <el-tree :data="customerOrg.customerOrgTree" :props="treeprops" node-key="id" :filter-node-method="filterNode"
        :style="'overflow: scroll;width:200px;height:' + (window.pageHeight < 600 ? 465 : window.pageHeight - 135) + 'px;'"
        :default-expanded-keys="customerOrg.defaultExpandedKeys" @node-contextmenu="nodeContextmenu"
        @node-click="treeclick" highlight-current ref="customerOrgTree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>
            <span class="treeicons">
              <img style="width:20px;height:20px;vertical-align: sub;" src="@/assets/images/order.png"
                v-if="!data.parentId" />
            </span>
            <span :class="!data.parentId ? 'maxtitle' : 'mintitle'">{{ node.label }}
            </span>
          </div>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { tcdate, deepCopy, reMadeOrgTree } from "../../utlis/proFunc";
import { getTreePids } from "../../utlis/tree";

export default {
  components: {},
  data() {
    return {
      filterText: '',
      treeprops: {
        label: "displayName",  // label/displayName
        value: "id",
        id: "id",
        children: "treeChildren",
      }, //树形组件的数据结构
    };
  },
  //<el-tree :data="$store.state.customerOrg.customerOrgTree" :props="$store.state.customerOrg.treeprops" @node-click="treeclick"></el-tree>
  computed: {
    ...mapState(["customerOrg", "window", "dataTransOpts"]),
  },

  //创建组件后
  created() {
  },

  //挂载组件完成
  mounted() {
    //获取体检单位列表树信息
    this.getCustomerOrgTree();
  },

  methods: {
    ...mapMutations(["setData"]),

    //获取体检单位列表树信息
    getCustomerOrgTree() {
      //let customerOrgTree = []
      // [
      //   {
      //     displayName: "个人体检", //
      //     id: "00000000-0000-0000-0000-000000000000", //
      //     //treeChildren: [],
      //   },
      //   {
      //     displayName: "组件式", //
      //     id: "10000000-0000-0000-0000-000000000000", //
      //     //treeChildren: [],
      //   },
      // ];
      //console.log('getCustomerOrgTree start')
      // api/app/organization-units/organization-unit-by-is-peis    // api/app/customer-org/by-code-all
      getapi("/api/app/customerorg/getbycodeall?IsHidePerson=1").then((res) => {
        //customerOrgTree = res.data;
        if (res.code != -1) {
          this.customerOrg.customerOrgTree = reMadeOrgTree(deepCopy(res.data))
          // tcdate(this.customerOrg.customerOrgTree);
        }
      });
    },


    //获取联系方式列表
    //api/app/contact-method/in-contact-person-id?ContactPersonId=3a0c08ad-4304-138b-d9e6-a7338739dfc4' \
    getContactMethodList(ContactPersonId) {
      getapi("/api/app/contact-method/in-contact-person-id", {
        ContactPersonId,
      }).then((res) => {
        if (res.code != -1) {
          this.customerOrg.contactMethodList = res.data;
        }
      });
    },

    //点击树节点
    treeclick(data) {
      //console.log(data.id + " 查询单位详情、体检次数、联系人等信息 " + data.displayName);//   api/app/customer-org/3a0c0439-a5ca-8a63-b2b9-e0eb24cb58b1
      this.customerOrg.oprStatus = 'edit'

      //只有单位才有体检次数登记，部门无
      this.dataTransOpts.tableS.customer_org.id = data.id //单位ID
      this.dataTransOpts.tableS.customer_org.parent_id = data.id //一级单位ID
      if (data.parentId) {
        let pids = getTreePids(this.customerOrg.customerOrgTree, "treeChildren", 'parentId', 'id', data.id)
        this.dataTransOpts.tableS.customer_org.parent_id = pids[pids.length - 2]
      }
      this.dataTransOpts.refresh.customer_org.S++
      this.dataTransOpts.refresh.customer_org_register.M++
      this.dataTransOpts.refresh.contact_person.M++

    },

    // 节点右击事件
    nodeContextmenu(event, data, node, ids) {
      console.log('event,data,node,ids', event, data, node, ids)
      
    },

    //树过滤
    filterNode(value, data) {
      //console.log(value,data)
      if (!value) return true;
      return data['displayName'].indexOf(value) !== -1 || data['simpleCode'].indexOf(value.toUpperCase()) !== -1;
    }
  },

  watch: {
    "customerOrg.treeCurrentNodekey"(newVal, oldVal) {
      //console.log('watch:customerOrg.treeCurrentNodekey',newVal,oldVal)
      if (newVal && newVal != oldVal) {
        this.$nextTick(() => {
          this.$refs['customerOrgTree'].setCurrentKey(newVal);
        })
      }
    },

    "filterText"(newVal, oldVal) {
      this.$refs['customerOrgTree'].filter(newVal);
    }
  },

};
</script>
<style scoped>
@import "../../assets/css/global.css";
@import "../../assets/css/global_tree.css";

.treeicons {
  font-size: 20px;
  margin-right: 5px;
}

:deep .el-tree-node>.el-tree-node__children {
  overflow: visible;
}
</style>