弹窗选择-树形ztree

2021-11-18 19:25:06 +08:00 · 2021-11-18 19:25:06 +08:00 · 200834ea8e
parent 01fd773772
commit 200834ea8e
5 changed files with 185 additions and 2 deletions
--- a/src/main/java/cn/palmte/work/bean/ZtreeNode.java
+++ b/src/main/java/cn/palmte/work/bean/ZtreeNode.java
@ -0,0 +1,61 @@
+package cn.palmte.work.bean;
+
+/**
+ * { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
+ * @author xiongshiyan at 2021/11/18 , contact me with email yanshixiong@126.com or phone 15208384257
+ */
+public class ZtreeNode {
+    private String id;
+    private String pId;
+    private String name;
+    private boolean checked;
+    private boolean open = true;
+
+    public ZtreeNode(String id, String pId, String name, boolean checked, boolean open) {
+        this.id = id;
+        this.pId = pId;
+        this.name = name;
+        this.checked = checked;
+        this.open = open;
+    }
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getpId() {
+        return pId;
+    }
+
+    public void setpId(String pId) {
+        this.pId = pId;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public boolean isChecked() {
+        return checked;
+    }
+
+    public void setChecked(boolean checked) {
+        this.checked = checked;
+    }
+
+    public boolean isOpen() {
+        return open;
+    }
+
+    public void setOpen(boolean open) {
+        this.open = open;
+    }
+}
--- a/src/main/java/cn/palmte/work/controller/backend/ProjectController.java
+++ b/src/main/java/cn/palmte/work/controller/backend/ProjectController.java
@ -456,6 +456,29 @@ public class ProjectController extends BaseController {
        actProcInsService.createProcInsPng(response, relationList.get(0).getProcessInsId());
    }

+
+
+    @RequestMapping("/roleUsers")
+    @ResponseBody
+    public ResponseMsg roleUsers(@RequestParam int projectId) {
+        /*{ id:1, pId:0, name:"随意勾选 1", open:true},
+        { id:11, pId:1, name:"随意勾选 1-1", open:true},
+        { id:12, pId:1, name:"随意勾选 1-2", open:true},
+        { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
+        { id:21, pId:2, name:"随意勾选 2-1"},
+        { id:22, pId:2, name:"随意勾选 2-2", open:true},
+        { id:23, pId:2, name:"随意勾选 2-3"}*/
+        List<ZtreeNode> ztreeNodes = new ArrayList<>();
+        ztreeNodes.add(new ZtreeNode("1","0","随意勾选 1",false,true));
+        ztreeNodes.add(new ZtreeNode("11","1","随意勾选 1-1",false,true));
+        ztreeNodes.add(new ZtreeNode("12","1","随意勾选 1-2",false,true));
+        ztreeNodes.add(new ZtreeNode("2","0","随意勾选 2",false,true));
+        ztreeNodes.add(new ZtreeNode("21","2","随意勾选 2-1",false,true));
+        ztreeNodes.add(new ZtreeNode("22","2","随意勾选 2-2",false,true));
+        ztreeNodes.add(new ZtreeNode("23","2","随意勾选 2-3",false,true));
+        return ResponseMsg.buildSuccessData(ztreeNodes);
+    }
+
    @InitBinder
    public void initBinder(WebDataBinder webDataBinder) {
        webDataBinder.addCustomFormatter(new DateFormatter("yyyy-MM-dd"));
--- a/src/main/resources/static/assets/js/project_common.js
+++ b/src/main/resources/static/assets/js/project_common.js
@ -76,8 +76,26 @@ function postAjax(url, data, callback) {
        async: false,
        success: function (d) {
            console.log(d);
+            if(callback) {
                callback(data, d);
            }
+        }
+    });
+}
+function getAjax(url, params, callback) {
+    $.ajax({
+        url: url,
+        data: params,
+        type: "get",
+        dataType: "json",
+        /*contentType:"application/json",*/
+        async: false,
+        success: function (d) {
+            console.log(d);
+            if(callback) {
+                callback(params, d);
+            }
+        }
    });
 }

--- a/src/main/resources/templates/admin/project_list.ftl
+++ b/src/main/resources/templates/admin/project_list.ftl
@ -1,7 +1,20 @@
 <#assign base=request.contextPath />
 <#import "../common/defaultLayout.ftl" as defaultLayout>
+
 <@defaultLayout.layout>
    <link rel="stylesheet" href="../assets/css/amazeui.switch.css"/>
+    <link rel="stylesheet" href="${base}/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
+    <style>
+        ul.ztree {
+            margin-top: 10px;
+            border: 1px solid #617775;
+            background: #f0f6e4;
+            width:220px;
+            height:360px;
+            overflow-y:scroll;
+            overflow-x:auto;
+        }
+    </style>
    <div class="admin-content">
        <div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;">
            <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
@ -199,6 +212,10 @@
                                <td>
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
+                                            <button type="button"
+                                                    class="am-btn am-btn-default am-btn-xs am-text-secondary"
+                                                    onclick="selectRoleUser(${list.id}, this)"><span class="am-icon-pencil-square-o"></span>设置项目可见性
+                                            </button>
                                        <#--<@shiro.hasPermission name="PROJECT_EDIT">-->
                                        <#--概算状态 并且概算审批状态为草稿和不通过-->
                                            <#if list.status==1 && (list.approveStatusEstimate==0 || list.approveStatusEstimate==3)>
@ -304,12 +321,33 @@
        </div>


+
+
+
+        <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt-select-role-user">
+            <div class="am-modal-dialog">
+                <div class="am-modal-hd">请选择项目可见性</div>
+                <div class="am-modal-bd">
+                    请勾选能够看到该项目的人员或角色
+                    <ul id="treeSelectRoleUser" class="ztree"></ul>
+                </div>
+                <div class="am-modal-footer">
+                    <span class="am-modal-btn" data-am-modal-cancel>取消</span>
+                    <span class="am-modal-btn" data-am-modal-confirm>提交</span>
+                </div>
+            </div>
+        </div>
+
        <footer class="admin-content-footer">
            <hr>
        </footer>
    </div>
 </@defaultLayout.layout>
 <script src="../assets/js/amazeui.switch.js"></script>
+<script src="${base}/assets/js/project_common.js"></script>
+<script type="text/javascript" src="${base}/ztree/js/jquery.ztree.core.js"></script>
+<script type="text/javascript" src="${base}/ztree/js/jquery.ztree.excheck.js"></script>
+<script type="text/javascript" src="${base}/ztree/js/jquery.ztree.exedit.js"></script>
 <script type="text/javascript">
    $(function () {

@ -373,4 +411,47 @@

    });

+
+    function selectRoleUser(projectId) {
+
+
+        getAjax("${base}/project/roleUsers?projectId="+projectId,null,function (p,d) {
+            var setting = {
+                check: {
+                    enable: true
+                },
+                data: {
+                    simpleData: {
+                        enable: true
+                    }
+                }
+            };
+
+            /*var zNodes =[
+                { id:1, pId:0, name:"随意勾选 1", open:true},
+                { id:11, pId:1, name:"随意勾选 1-1", open:true},
+                { id:111, pId:11, name:"随意勾选 1-1-1"},
+                { id:112, pId:11, name:"随意勾选 1-1-2"},
+                { id:12, pId:1, name:"随意勾选 1-2", open:true},
+                { id:121, pId:12, name:"随意勾选 1-2-1"},
+                { id:122, pId:12, name:"随意勾选 1-2-2"},
+                { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
+                { id:21, pId:2, name:"随意勾选 2-1"},
+                { id:22, pId:2, name:"随意勾选 2-2", open:true},
+                { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
+                { id:222, pId:22, name:"随意勾选 2-2-2"},
+                { id:23, pId:2, name:"随意勾选 2-3"}
+            ];*/
+            $.fn.zTree.init($("#treeSelectRoleUser"), setting, d.data);
+
+            $("#my-prompt-select-role-user").modal({
+                relatedTarget: $(this),
+                onConfirm: function(e) {
+                    postAjax("${base}/project/selectRoleUser", data, null);
+                }
+            });
+        });
+
+    }
+
 </script>
--- a/src/main/resources/templates/common/common_pager.ftl
+++ b/src/main/resources/templates/common/common_pager.ftl
@ -3,7 +3,7 @@

 <ul class="pagination am-pagination" id="pager"></ul>
 <input type="hidden" name="pageNumber" id="pageNumber" value="${pager.pageNumber}" />
-<script src="${base}/assets/js/jquery-3.4.1.min.js"></script>
+<#--<script src="${base}/assets/js/jquery-3.4.1.min.js"></script>-->
 <script type="text/javascript" src="${base}/common/js/jqPaginator/jqPaginator.min.js"></script>
 <link type="text/css" rel="stylesheet" href="${base}/common/js/jqPaginator/bootstrap.min.css"/>
 <script type="text/javascript">