提交选择组件。

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

public/self/ztree/css/zTreeStyle/zTreeStyle.css

@@ -9,14 +9,16 @@ website:	http://code.google.com/p/jquerytree/
 -------------------------------------*/
 
 .ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
-.ztree {margin:0; padding:5px; color:#333}
-.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
+.ztree {margin:0; padding:5px; color:#333;margin-top: 0; height: 100%; max-height: 400px; overflow-y: scroll;}
+.ztree::-webkit-scrollbar-track{background-color: #FFF;}
+.ztree li{padding:5px 0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0; position: relative;}
 .ztree li ul{ margin:0; padding:0 0 0 18px}
-.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
+/*.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}*/
 
 .ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
 	text-decoration:none; vertical-align:top; display: inline-block}
-.ztree li a:hover {text-decoration:underline}
+.ztree li a:hover {text-decoration:none;}
+.ztree li a:hover .node_name::after{content: '';position: absolute;left: 0;right: 0;top: 0;background-color: #f7f7f7;height: 100%;z-index: -1;}
 .ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
 .ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
 .ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid;

templates/repo/modelmanage/index.tmpl

@@ -5,7 +5,17 @@
         color: rgba(0, 0, 0, .87) !important
     }
     .menuContent{
-        background:#ffffff
+        position: absolute;
+        background: #ffffff;
+        left: 0;
+        right: 26px;
+        top: 36px;
+        z-index:999;
+        border: 1px solid #96c8da;
+        border-top: 0;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+        box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
     }
 </style>
 <link rel="stylesheet" href="/self/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
@@ -106,9 +116,7 @@
         </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">
         <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
@@ -121,10 +129,10 @@
                     <!-- <p>asdasdasd</p> -->
                 </div>
                 <input type="hidden" name="_csrf" value="">
-                <div class="two inline fields ">
+                <div class="two inline fields">
                     <div class="required ten wide field">
-                        <label style="margin-left: -23px;">选择训练任务</label>
-                        <div class="ui dropdown selection search width83 loading" id="choice_model">
+                        <label>选择训练任务</label>
+                        <div class="ui dropdown selection search loading" id="choice_model">
                             <input type="hidden" id="JobId" name="JobId" required>
                             <div class="default text">选择训练任务</div>
                             <i class="dropdown icon"></i>
@@ -144,19 +152,28 @@
                         </div>
                     </div>
                 </div>
-                <div class="required inline field" id="modelname">
-                    <label>模型名称</label>
-                    <input style="width: 45%;" id="name" name="Name" required maxlength="25"
-                        onkeyup="this.value=this.value.replace(/[, ]/g,'')">
+                <div class="required inline fields" id="modelname">
+                    <div class="two wide field">
+                        <label>模型名称</label>
+                    </div>
+                    <div class="eight wide field">
+                        <input id="name" name="Name" required maxlength="25" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
+                    </div>
                 </div>
-                <div class="required inline field" id="verionname">
-                    <label>模型版本</label>
-                    <input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255">
+                <div class="required inline fields" id="verionname">
+                    <div class="two wide field">
+                        <label>模型版本</label>
+                    </div>
+                    <div class="eight wide field">
+                        <input id="version" name="Version" value="" readonly required maxlength="255">
+                    </div>
                 </div>
 
-                <div class="unite min_title inline field required">
-                    <label>模型框架</label>
-                    <div class="ui dropdown selection search width70" id="choice_Engine">
+                <div class="unite min_title inline fields required">
+                    <div class="two wide field">
+                        <label>模型框架</label>
+                    </div>
+                    <div class="ui ten wide field dropdown selection search" id="choice_Engine">
                         <input type="hidden" id="Engine" name="Engine" required>
                         <div class="default text">选择模型框架</div>
                         <i class="dropdown icon"></i>
@@ -167,23 +184,37 @@
 
                 </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 class="unite min_title inline fields required">
+                    <div class="two wide field">
+                        <label>模型文件</label>
+                    </div>                    
+                    <div class="thirteen wide field" style="position:relative">
+                        <input id="modelSelectedFile" type="text" readonly required onclick="showMenu();"  name="modelSelectedFile" >
+                        <div id="menuContent" class="menuContent" style="display:none;">
+                            <ul id="treeDemo" class="ztree"></ul>
+                        </div>
+                    </div>
                 </div>
 
-                <div class="inline field">
-                    <label>模型标签</label>
-                    <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255"
-                        placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
+                <div class="inline fields">
+                    <div class="two wide field">
+                        <label>模型标签</label>
+                    </div>
+                    <div class="thirteen wide field">
+                        <input id="label" name="Label" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
+                    </div>    
                 </div>
-                <div class="inline field">
-                    <label for="description">模型描述</label>
-                    <textarea style="width: 83%;margin-left: 7px;" id="Description" name="Description" rows="3"
-                        maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}'
-                        onchange="this.value=this.value.substring(0, 255)"
-                        onkeydown="this.value=this.value.substring(0, 255)"
-                        onkeyup="this.value=this.value.substring(0, 256)"></textarea>
+                <div class="inline fields">
+                    <div class="two wide field">                    
+                        <label for="description">模型描述</label>
+                    </div>
+                    <div class="thirteen wide field">
+                        <textarea id="Description" name="Description" rows="3"
+                            maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}'
+                            onchange="this.value=this.value.substring(0, 255)"
+                            onkeydown="this.value=this.value.substring(0, 255)"
+                            onkeyup="this.value=this.value.substring(0, 256)"></textarea>
+                    </div> 
                 </div>
 
                 <div class="inline field" style="margin-left: 75px;">
@@ -254,7 +285,8 @@
 		function showMenu() {
 			var cityObj = $("#modelSelectedFile");
 			var cityOffset = $("#modelSelectedFile").offset();
-			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
+			// $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
+            $("#menuContent").slideDown("fast");
 
 			$("body").bind("mousedown", onBodyDown);
 		}
@@ -315,7 +347,7 @@
         $(function () {
             $('#choice_model').dropdown({
                 onChange: function (value) {
-                    $(".ui.dropdown.selection.search.width70").addClass("loading")
+                    $("#choice_version").addClass("loading")
                     $('#choice_version').dropdown('clear')
                     $("#job-version").empty()
                     loadTrainVersion(value)
@@ -363,12 +395,12 @@
                         train_html += '</div>'
                     }
                     $("#job-name").append(train_html)
-                    $(".ui.dropdown.selection.search.width83").removeClass("loading")
+                    $("#choice_model").removeClass("loading")
                     $('#choice_model .default.text').text(data[0].DisplayJobName)
                     $('#choice_model input[name="JobId"]').val(data[0].JobID)
                     loadTrainVersion()
                 }else{
-                    $(".ui.dropdown.selection.search.width83").removeClass("loading")
+                    $("#choice_model").removeClass("loading")
                 }
             })
         }
@@ -384,7 +416,7 @@
                 }
                 if (data.length) {
                     $("#job-version").append(train_html)
-                    $(".ui.dropdown.selection.search.width70").removeClass("loading")
+                    $("#choice_version").removeClass("loading")
                     var versionName = data[0].VersionName;
                     if (versionName == null || versionName == "") {
                         versionName = "V0001";