pc-component-v5/packages/client-organization/src/ClientOrganization.vue

<template>
  <div>
    <div>
      <div class="panel panel-default">
        <div class="panel-body">
          <div
            v-for="clientOrganization in clientOrganizations"
            :key="clientOrganization.id"
          >
            <TreeViewNode
              :node="clientOrganization"
              :is-root="true"
              :is-show-check="clientOrganization.isShowCheck"
              @node-expand="nodeExpand"
              @node-select="nodeSelect"
            />
          </div>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
var Common = require('../../common/Common.js').default;
var Notify = require('../../common/Notify.js').default;
var Loading = require('../../loading/src/Loading.vue').default;
var TreeViewNode = require('../../tree/src/TreeViewNode.vue').default;

export default {
  name: 'ClientOrganization',
  components: {
    TreeViewNode, Loading,
  },
  props: {
    'whereClause': {
      type: String,
      default: '',
    }, 
    'isSearchWidget': {
      type: Boolean,
      default: false,
    },
    'modelData': {
      type: Object,
      default: null,
    },
    'parentModelData': {
      type: Object,
      default: null,
    },
    'fieldValue': {
      type: Object,
      default: null,
    },
  },

  emits: ['dataSelected', 'deleteSelected'],

  data: function () {
    return {
      'infoWindowDto': {},
      'datas': [],
      sendData: {},
      clientOrganizations: [],
      loading: false,
    };
  },

  watch: {
    fieldValue: function (to, from) {
      this.reSelectedNode(to);
    },
  },

  mounted: function () {
    this.refresh();
  },

  methods: {
    // 节点打开事件
    nodeExpand: function (node) {
      console.log(node);
    },

    // 节点选择事件
    nodeSelect: function (node) {
      console.log(node);
      if (!node.isClient) {
        node.selected = !node.selected;
        if (node.selected) {
          // 增加
          let modelData1 = {
            'id': node.id,
            'data': {
              'name': {
                'displayValue': [node.name],
              },
            },
          };
          this.$emit('dataSelected', modelData1);
        } else {
          // 减少
          let modelData1 = {
            'id': node.id,
            'data': {
              'name': {
                'displayValue': [node.name],
              },
            },
          };
          this.$emit('deleteSelected', modelData1);
        }
        // this.reSelectedNode(newFieldValue);
      }
    },

    // 获取单位部门
    refresh: function () {
      var _self = this;
      $.ajax({
        type: 'get',
        dataType: 'json',
        url: Common.getApiURL('organizationResource/getClientOrganizations'),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if(data.errorCode != 0){
            Notify.error('部门查询失败', data.errorCode, false);
            return;
          }
          function setOpen(node) {
            node.open = false;
            node.selected = false;
            if (node.isClient) {
              node.isShowCheck = false;
            } else {
              node.isShowCheck = true;
            }
            node.text = node.name;
            if (node.childrenDatas != undefined && node.childrenDatas.length > 0) {
              node.childrenDatas.forEach(function (item) {
                setOpen(item);
              });
            }
          }
          data.datas.forEach(function (item) {
            if (item.childrenDatas == null) {
              item.open = true;
            }
            setOpen(item);
          });
          // add by jack 20180201
          // 展开一级树
          // if (data.childrenDatas != undefined && data.childrenDatas.length > 0) {
          // 	data.childrenDatas.forEach(function (item) {								
          // item.open = true;
          //	});
          // }

          _self.clientOrganizations = data.datas;
          _self.reSelectedNode(_self.fieldValue);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    reSelectedNode: function (fieldValue) {
      if (fieldValue == undefined) {
        return;
      }
      var ids = fieldValue.ids;
      function setOpen(node) {
        if (ids.indexOf(node.id) > -1) {
          node.selected = true;
        } else {
          node.selected = false;
        }
        if (node.childrenDatas != undefined && node.childrenDatas.length > 0) {
          node.childrenDatas.forEach(function (item) {
            setOpen(item);
          });
        }
      }
      if (ids != undefined) {
        this.clientOrganizations.forEach(function (item) {
          setOpen(item);
        });
      }
    },

  },
};
</script>
    
<style scoped>
.clear-div {
    clear: both;
}

.filter-button {
    float: right;
}
</style>