peisweb/src/components/patientRegister/customerOrgTreeAll.vue

<template>
  <div style="width:208px">
    <div style="margin:2px 2px 2px 2px;">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" />
    </div>
    <div>
      <el-tree
        :style="'overflow: scroll;height:' + (window.pageHeight < 600 ? 465 : window.pageHeight - 135) + 'px;width:200px;'"
        :data="customerOrgTreeAll" :props="treeprops" node-key="id" @node-contextmenu="nodeContextmenu"
        @node-click="treeclick" highlight-current ref="customerOrgTree" :load="loadNode" lazy>
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>
            <span class="treeicons">
              <!-- <i
                class="el-icon-document-remove"
                v-if="data.parentId == null"
              ></i> -->
              <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 } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { tcdate, deepCopy, reMadeOrgTree } from "../../utlis/proFunc";
export default {
  components: {},
  data() {
    return {
      filterText: '',
      treeprops: {
        label: "label",
        value: "id",
        id: "id",
        children: "treeChildren",
        isLeaf: "isLeaf"
      }, //树形组件的数据结构
      LocalConfig: {
        patientRegister: {
          dispCustomerOrgCode: 'N', // 人员登记列表--单位树是否显示 customerOrgCode
        }
      },
      customerOrgTreeAll: []
    };
  },
  //<el-tree :data="$store.state.customerOrg.customerOrgTree" :props="$store.state.customerOrg.treeprops" @node-click="treeclick"></el-tree>
  computed: {
    ...mapState(["window", "dict", "dataTransOpts", "customerOrg", "patientRegister"]),
  },
  //创建组件后
  created() {
    try {
      let LocalConfig = JSON.parse(window.localStorage.getItem('LocalConfig'))
      if (LocalConfig && LocalConfig.patientRegister) {
        if (LocalConfig.patientRegister.dispCustomerOrgCode) this.LocalConfig.patientRegister.dispCustomerOrgCode = LocalConfig.patientRegister.dispCustomerOrgCode
      }
    } catch (error) {
      console.log("window.localStorage.getItem('LocalConfig')", error)
    }
  },

  //挂载组件完成
  mounted() {
    //获取体检单位列表树信息    
    this.getCustomerOrgChild(null)
      .then(res => {
        this.customerOrgTreeAll = res
        this.patientRegister.customerOrgTreeAll = res
        // console.log('this.customerOrgTreeAll', this.customerOrgTreeAll)
      })
  },

  methods: {

    getCustomerOrgChild(parentId) {
      return new Promise((resolve, reject) => {
        postapi('/api/app/CustomerOrg/GetCustomerOrgByParentId', { parentId })
          .then(res => {
            if (res.code > -1) {
              res.data.forEach(e => {
                e.isLeaf = e.isChild == 'Y' ? false : true
              });
              let treeData = reMadeOrgTree(deepCopy(res.data), this.LocalConfig.patientRegister.dispCustomerOrgCode);
              resolve(treeData)
            }
          })
          .catch(err => {
            reject(err)
          })
      })

    },

  
    loadNode(node, resolve) {
      // console.log('node', node)
      if (node && node.data && node.data.id) {
        this.getCustomerOrgChild(node.data.id).then(res => {
          resolve(res)
        }).catch(err => {
          resolve([])
        })
      }
    },

    // 节点右击事件
    nodeContextmenu(event, data, node, ids) {
      console.log('event,data,node,ids', event, data, node, ids)
      if (data.id == this.dict.personOrgId) return

      let items = [
        {
          label: "置顶",
          onClick: () => {
            this.treeSort(data, 1);
          },
        },
        {
          label: "置底",
          onClick: () => {
            this.treeSort(data, 2);
          },
        }
      ] //菜单项
      this.$contextmenu({
        items,
        event,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "custom-class",
        zIndex: 3,
        minWidth: 80,
      });
      return false;

    },

    // 树节点排序
    treeSort(data, sortType) {
      console.log('data', data)
      // if (data.parentId) {
      //   this.$message.warning({ showClose: true, message: "请选择一级单位" })
      //   return
      // }
      // console.log('data,sortType',data,sortType)
      putapi(`/api/app/customerorg/updatemanysort?id=${data.id}&SortType=${sortType}`).then(res => {
        if (res.code > -1) {
          this.getCustomerOrgChild(data.parentId).then(res => {
            data.treeChildren = res
            if(data.parentId == null){
              this.customerOrgTreeAll = res
              this.patientRegister.customerOrgTreeAll = res
            }
          })
        }
      })
    },

    //树过滤
    filterNode(value, data) {
      // console.log(value, data)
      // if (!value) return true;
      // return data['displayName'].indexOf(value) > -1 || data['simpleCode'].indexOf(value.toUpperCase()) > -1 || data['shortName'].indexOf(value) > -1 || data['customerOrgCode'].indexOf(value) > -1;
      this.customerOrgTreeAll = this.patientRegister.customerOrgTreeAll.filter(e => {
        return e.label.indexOf(value) > -1 || e.simpleCode.indexOf(value.toUpperCase()) > -1 || e.shortName.indexOf(value) > -1
      })

    },


    //点击树节点
    treeclick(data) {
      // console.log('data',data)
      this.patientRegister.query.customerOrgId = data.id;
      this.patientRegister.query.customerOrgName = data.displayName;
      this.dataTransOpts.plus.PatientRegisterEditQuery++
      //获取体检单位父级ID
      // this.getCustomerOrgParentId(data.id);

      // this.patientRegister.query.times++; //用于触发查询条件
    },
  },
  watch: {
    "filterText": {
      // immediate: true,
      handler(newVal, oldVal) {
        // console.log(`watch 人员登记 newVal:${newVal} oldVal:${oldVal} registerCheckId: ${this.dataTransOpts.tableS.patient_register.id}`);
        if (newVal != oldVal) this.filterNode(newVal)
      }
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_tree.css";

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

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