优化组织显示

WebService/src/main/resources/components/orgPackage/org-manage/orgManage.html

@@ -1,120 +1,135 @@
 <div id="component" class="wrapper wrapper-content animated fadeInRight ecommerce">
     <div class="row">
-        <div class="col-lg-12">
-            <div class="ibox ">
-                <div class="ibox-title">
-                    <h5>查询条件</h5>
-                    <div class="ibox-tools" style="top:10px;">
-                        <button type="button" class="btn btn-link btn-sm" style="margin-right:10px;"
-                                v-on:click="_moreCondition()">{{orgManageInfo.moreCondition == true?'隐藏':'更多'}}
-                        </button>
-                    </div>
-                </div>
-                <div class="ibox-content">
-                    <div class="row">
-                        <div class="col-sm-4">
-                            <div class="form-group ">
-                                    <select class="custom-select" v-model="orgManageInfo.conditions.headOrgId">
-                                        <option selected  value="">必填，请选择总公司</option>
-                                        <option v-for="headOrg in orgManageInfo.headOrg" :value="headOrg.orgId">{{headOrg.orgName}}</option>
-                                    </select>
+        <div class="col-lg-4">
+            <div id="orgTree" class=""></div>
+        </div>
+        <div class="col-lg-8">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="ibox ">
+                        <div class="ibox-title">
+                            <h5>查询条件</h5>
+                            <div class="ibox-tools" style="top:10px;">
+                                <button type="button" class="btn btn-link btn-sm" style="margin-right:10px;"
+                                        v-on:click="_moreCondition()">{{orgManageInfo.moreCondition == true?'隐藏':'更多'}}
+                                </button>
                             </div>
                         </div>
-                        <div class="col-sm-4" >
-                            <div class="form-group">
-                                <select class="custom-select" v-model="orgManageInfo.conditions.branchOrgId">
-                                    <option selected  value="">必填，请选择分公司</option>
-                                    <option v-for="branchOrg in orgManageInfo.branchOrg" :value="branchOrg.orgId">{{branchOrg.orgName}}</option>
-                                </select>
+                        <div class="ibox-content">
+                            <div class="row">
+                                <div class="col-sm-4">
+                                    <div class="form-group ">
+                                        <select class="custom-select" v-model="orgManageInfo.conditions.headOrgId">
+                                            <option selected value="">必填，请选择总公司</option>
+                                            <option v-for="headOrg in orgManageInfo.headOrg" :value="headOrg.orgId">
+                                                {{headOrg.orgName}}
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="col-sm-4">
+                                    <div class="form-group">
+                                        <select class="custom-select" v-model="orgManageInfo.conditions.branchOrgId">
+                                            <option selected value="">必填，请选择分公司</option>
+                                            <option v-for="branchOrg in orgManageInfo.branchOrg"
+                                                    :value="branchOrg.orgId">{{branchOrg.orgName}}
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="col-sm-3">
+                                    <div class="form-group">
+                                        <input type="text" placeholder="请输入组织名称"
+                                               v-model="orgManageInfo.conditions.orgName"
+                                               class=" form-control">
+                                    </div>
+                                </div>
+
+                                <div class="col-sm-1">
+                                    <button type="button" class="btn btn-primary btn-sm" v-on:click="_queryOrgMethod()">
+                                        <i class="glyphicon glyphicon-search"></i>
+                                    </button>
+                                </div>
                             </div>
-                        </div>
-                        <div class="col-sm-3">
-                            <div class="form-group">
-                                <input type="text" placeholder="请输入组织名称" v-model="orgManageInfo.conditions.orgName"
-                                       class=" form-control">
+                            <div class="row">
+                                <div class="col-sm-4" v-if="orgManageInfo.moreCondition == true">
+                                    <div class="form-group">
+                                        <input type="text" placeholder="请输入组织ID"
+                                               v-model="orgManageInfo.conditions.orgId"
+                                               class=" form-control">
+                                    </div>
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="col-sm-1">
-                            <button type="button" class="btn btn-primary btn-sm" v-on:click="_queryOrgMethod()">
-                                <i class="glyphicon glyphicon-search"></i>
-                            </button>
+
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="col-sm-4" v-if="orgManageInfo.moreCondition == true">
-                            <div class="form-group">
-                                <input type="text" placeholder="请输入组织ID" v-model="orgManageInfo.conditions.orgId"
-                                       class=" form-control">
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="ibox">
+                        <div class="ibox-title">
+                            <h5>组织信息</h5>
+                            <div class="ibox-tools" style="top:10px;">
+                                <button type="button" class="btn btn-primary btn-sm" v-on:click="_openAddOrgModal()">
+                                    <i class="glyphicon glyphicon-plus"></i>
+                                    添加
+                                </button>
                             </div>
                         </div>
-                    </div>
+                        <div class="ibox-content">
 
+                            <table class="footable table table-stripped toggle-arrow-tiny"
+                                   data-page-size="15"
+                            >
+                                <thead>
+                                <tr>
+                                    <th class="text-center">组织ID</th>
+                                    <th class="text-center">组织名称</th>
+                                    <th class="text-center">组织级别</th>
+                                    <th class="text-center">上级组织</th>
+                                    <th class="text-center">操作</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr v-for="org in orgManageInfo.orgs">
+                                    <td class="text-center">{{org.orgId}}</td>
+                                    <td class="text-center">{{org.orgName}}</td>
+                                    <td class="text-center">{{org.orgLevelName}}</td>
+                                    <td class="text-center">{{org.orgLevel == 1 ? '无' : org.parentOrgName}}</td>
+                                    <td class="text-center">
+                                        <div class="btn-group" v-if="org.orgLevel != 1">
+                                            <button class="btn-white btn btn-xs" v-on:click="_openEditOrgModel(org)">
+                                                修改
+                                            </button>
+                                        </div>
+                                        <div class="btn-group" v-if="org.orgLevel != 1">
+                                            <button class="btn-white btn btn-xs" v-on:click="_openDeleteOrgModel(org)">
+                                                删除
+                                            </button>
+                                        </div>
+                                    </td>
 
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="ibox">
-                <div class="ibox-title">
-                    <h5>组织信息</h5>
-                    <div class="ibox-tools" style="top:10px;">
-                        <button type="button" class="btn btn-primary btn-sm" v-on:click="_openAddOrgModal()">
-                            <i class="glyphicon glyphicon-plus"></i>
-                            添加
-                        </button>
+                                </tr>
+                                </tbody>
+                                <tfoot>
+                                <tr>
+                                    <td colspan="7">
+                                        <ul class="pagination float-right"></ul>
+                                    </td>
+                                </tr>
+                                </tfoot>
+                            </table>
+                            <!-- 分页 -->
+                            <vc:create name="pagination"></vc:create>
+                        </div>
                     </div>
                 </div>
-                <div class="ibox-content">
-
-                    <table class="footable table table-stripped toggle-arrow-tiny"
-                           data-page-size="15"
-                    >
-                        <thead>
-                        <tr>
-                            <th class="text-center">组织ID</th>
-                            <th class="text-center">组织名称</th>
-                            <th class="text-center">组织级别</th>
-                            <th class="text-center">上级组织</th>
-                            <th class="text-center">操作</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr v-for="org in orgManageInfo.orgs">
-                            <td class="text-center">{{org.orgId}}</td>
-                            <td class="text-center">{{org.orgName}}</td>
-                            <td class="text-center">{{org.orgLevelName}}</td>
-                            <td class="text-center">{{org.orgLevel == 1 ? '无' : org.parentOrgName}}</td>
-                            <td class="text-center">
-                                <div class="btn-group" v-if="org.orgLevel != 1">
-                                    <button class="btn-white btn btn-xs" v-on:click="_openEditOrgModel(org)">修改</button>
-                                </div>
-                                <div class="btn-group" v-if="org.orgLevel != 1">
-                                    <button class="btn-white btn btn-xs"  v-on:click="_openDeleteOrgModel(org)">删除
-                                    </button>
-                                </div>
-                            </td>
-
-                        </tr>
-                        </tbody>
-                        <tfoot>
-                        <tr>
-                            <td colspan="7">
-                                <ul class="pagination float-right"></ul>
-                            </td>
-                        </tr>
-                        </tfoot>
-                    </table>
-                    <!-- 分页 -->
-                    <vc:create name="pagination"></vc:create>
-                </div>
             </div>
         </div>
     </div>
 
-
     <vc:create name="addOrg"
                callBackListener=""
                callBackFunction=""

WebService/src/main/resources/components/orgPackage/org-manage/orgManage.js

@@ -4,6 +4,7 @@
 (function(vc){
     var DEFAULT_PAGE = 1;
     var DEFAULT_ROWS = 10;
+    var ALL_ROWS = 100;
     vc.extends({
         data:{
             orgManageInfo:{
@@ -14,6 +15,7 @@
                 orgName:'',
                 headOrg:[],
                 branchOrg:[],
+                orgTree:[],
                 conditions:{
                     headOrgId:'',
                     branchOrgId:'',
@@ -51,8 +53,18 @@
             }
          },
         _initMethod:function(){
-            vc.component._listOrgs(DEFAULT_PAGE, DEFAULT_ROWS);
+            //只查 查询总公司级组织
+            vc.component.orgManageInfo.orgTree = [];
+            vc.component._listOrgTrees(vc.component.orgManageInfo.orgTree,'1', '',function(){
+                //默认查询分公司组织信息
+                vc.component._listOrgTrees(vc.component.orgManageInfo.orgTree[0].nodes,
+                                        '2',
+                                        vc.component.orgManageInfo.orgTree[0].orgId,
+                                        function(){}
+                                        );
+            });
             vc.component._getOrgsByOrgLevel(DEFAULT_PAGE, DEFAULT_ROWS,1,'');
+            vc.component._refreshOrgTree();
         },
         _initEvent:function(){
             
@@ -64,6 +76,41 @@
             });
         },
         methods:{
+            _refreshOrgTree:function(){
+                $('#orgTree').treeview({
+                          data: vc.component.orgManageInfo.orgTree
+                        });
+            },
+            _listOrgTrees:function(_nodes,_orgLevel,_parentOrgId,_callback){
+                var param = {
+                    params:{
+                        page:DEFAULT_PAGE,
+                        row:ALL_ROWS,
+                        orgLevel:_orgLevel,
+                        parentOrgId:_parentOrgId
+                    }
+               };
+               //发送get请求
+               vc.http.get('orgManage',
+                            'list',
+                             param,
+                             function(json,res){
+                                var _tmpOrgs =JSON.parse(json).orgs;
+                                _tmpOrgs.forEach(function (_item) {
+                                    _nodes.push({
+                                        orgId:_item.orgId,
+                                        text:_item.orgName,
+                                        href:function(_item){},
+                                        tags:[0],
+                                        nodes:[]
+                                    });
+                                    _callback();
+                                });
+                             },function(errInfo,error){
+                                console.log('请求失败处理');
+                             }
+                           );
+            },
             _listOrgs:function(_page, _rows){
 
                 vc.component.orgManageInfo.conditions.page = _page;

WebService/src/main/resources/components/pageFramePackage/common/commonTop.html

@@ -9,6 +9,7 @@
 <link href="/css/style.css" rel="stylesheet"/>
 <link rel="stylesheet" href="/css/common.css"/>
 <link rel="stylesheet" href="/css/bootstrap/bootstrap-datetimepicker.min.css"/>
+
 <script src="/js/bootstrap/jquery-3.3.1.min.js"></script>
 <script src="/js/vue/vue.min.js" ></script>
 <script src="/js/vue/vue-resource.min.js" ></script>
@@ -22,6 +23,7 @@
 <script src="/js/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
 <script src="/js/plugins/select2/select2.full.min.js"></script>
 
+
 <script type="text/javascript">
 
     console.log('############################################################');

WebService/src/main/resources/views/init_company.html

@@ -16,8 +16,8 @@
 </head>
 
 <body class="gray-bg">
-
-<vc:create name="loading"></vc:create>
+<vc:create name="bodyTop"></vc:create>
+<!--<vc:create name="loading"></vc:create>-->
 <div>
     <vc:create name="company"></vc:create>
 

WebService/src/main/resources/views/orgFlow.html

@@ -7,6 +7,8 @@
     <meta charset="UTF-8"/>
     <title>组织管理初始化|java110</title>
     <vc:create name="commonTop"></vc:create>
+    <link rel="stylesheet" href="/css/bootstrap/bootstrap-treeview.min.css"/>
+    <script src="/js/bootstrap/bootstrap-treeview.min.js"></script>
 </head>
 <body>
 <vc:create name="bodyTop"></vc:create>

java110-front/src/main/resources/static/css/bootstrap/bootstrap-treeview.min.css

@@ -0,0 +1 @@
+.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.icon{width:12px;margin-right:5px}.treeview .node-disabled{color:silver;cursor:not-allowed}