提交树形选择器代码。

Signed-off-by: zouap <zouap@pcl.ac.cn>

templates/repo/modelarts/trainjob/show.tmpl

@@ -564,6 +564,9 @@
             </div>
         </div>
     </div>
+    <div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index:9999">
+	        <ul id="treeDemo" class="ztree" style="margin-top:0; width: 83%; height: 100%;"></ul>
+    </div>
     <!-- 创建模型 -->
     <div id="newmodel">
         <div class="ui modal second">
@@ -604,6 +607,10 @@
                         <input type="hidden" id="Engine" name="Engine" required>
                         <input style="width: 45%;" id="Engine_name" name="Engine_name" readonly required maxlength="255">
                     </div>
+                    <div class="unite min_title inline field required">
+                        <label>模型文件</label>
+                        <input id="modelSelectedFile" type="text" style="width: 83%;" readonly required onclick="showMenu();"  name="modelSelectedFile" >
+                    </div>
                     <div class="inline field">
                         <label>模型标签</label>
                         <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255"
@@ -636,7 +643,124 @@
 </div>
 {{template "base/footer" .}}
 
+<script type="text/javascript" src="/self/ztree/js/jquery.ztree.core.js"></script>
+<script type="text/javascript" src="/self/ztree/js/jquery.ztree.excheck.js"></script>
+
 <script>
+    var setting = {
+			check: {
+				enable: true,
+				chkboxType: {"Y":"ps", "N":"ps"}
+			},
+			view: {
+				dblClickExpand: false
+			},
+			callback: {
+				beforeClick: beforeClick,
+				onCheck: onCheck
+			}
+	};
+
+	function beforeClick(treeId, treeNode) {
+			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+			zTree.checkNode(treeNode, !treeNode.checked, null, true);
+			return false;
+	}
+		
+	function onCheck(e, treeId, treeNode) {
+			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
+			nodes = zTree.getCheckedNodes(true),
+			v = "";
+			for (var i=0, l=nodes.length; i<l; i++) {
+                if(nodes[i].isParent){
+                   continue;
+                }
+                var pathNodes = nodes[i].getPath();
+                var path ="";
+                for(var j=0;j<pathNodes.length;j++){
+                    if(j ==0){
+                        path +=  pathNodes[j].name;
+                    }else{
+                        path += "/" + pathNodes[j].name;
+                    }
+                }
+				v += path + ";";
+			}
+			if (v.length > 0 ) v = v.substring(0, v.length-1);
+			var cityObj = $("#modelSelectedFile");
+			cityObj.attr("value", v);
+	}
+       
+	function showMenu() {
+			var cityObj = $("#modelSelectedFile");
+			var cityOffset = $("#modelSelectedFile").offset();
+			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
+
+			$("body").bind("mousedown", onBodyDown);
+	}
+	function hideMenu() {
+			$("#menuContent").fadeOut("fast");
+			$("body").unbind("mousedown", onBodyDown);
+	}
+	function onBodyDown(event) {
+			if (!(event.target.id == "menuBtn" || event.target.id == "modelSelectedFile" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
+				hideMenu();
+			}
+	}
+
+    function loadModelFile(trainJob){
+            console.log("trainJob=" + trainJob);
+            $('#choice_file').dropdown('clear')
+            $("#model-file").empty()
+            if(trainJob ==null || trainJob ==""){
+                console.log("trainJob is null");
+            }else{
+                $.get(`${repolink}/modelmanage/query_train_model?jobName=${trainJob.JobName}&type=${trainJob.Type}&VersionName=${trainJob.VersionName}`, (data) => {
+                    const n_length = data.length
+                    let file_html=''
+                    let firstFileName =''
+                    var zNodes=[];
+                    var nodesMap={};
+                    for (let i=0;i<n_length;i++){
+                        parentNodeMap = nodesMap;
+                        var fileSplits = data[i].FileName.split("/");
+                        for(let j=0;j < fileSplits.length;j++){
+                            if(fileSplits[j] == ""){
+                                break;
+                            }
+                            if(parentNodeMap[fileSplits[j]] == null){
+                                parentNodeMap[fileSplits[j]] = {};
+                            }
+                            parentNodeMap = parentNodeMap[fileSplits[j]]
+                        }
+                    }
+                    convertToNode(zNodes,nodesMap);
+                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
+                })
+            }
+    }
+
+    function convertToNode(nodeList,nodesMap){
+            var keyList = Object.keys(nodesMap);
+            keyList.sort(function(a,b){
+	            return a-b;
+            });
+            var isFirst = true;
+            for(var i=0; i<keyList.length;i++){
+                var node = {};
+                node["name"] = keyList[i];
+                nodeList.push(node);
+                if(nodesMap[keyList[i]] != null && Object.keys(nodesMap[keyList[i]]).length >0){
+                    node["children"]=[];
+                    if(isFirst){
+                        node["open"] = true;
+                        isFirst= false;
+                    }
+                    convertToNode(node["children"],nodesMap[keyList[i]]);
+                }
+            }
+    }
+
     $('.menu .item').tab()
     $(document).ready(function () {
         $('.ui.accordion').accordion({ selector: { trigger: '.icon' } });
@@ -684,7 +808,8 @@
                         $('input[name="Engine"]').val(1);
                     }
                     $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })
-                    createModelName()
+                    createModelName();
+                    loadModelFile(obj);
                 },
                 onHide: function () {
                     document.getElementById("formId").reset();
@@ -1050,4 +1175,7 @@
             scrollAnimation(logContentDom, logContentDom.scrollTop + 1, logContentDom.scrollHeight - logContentDom.clientHeight);
         })
     })
+
+
+    
 </script>