将add-box抽出来

7 files changed, 154 insertions, 208 deletions

diff --git a/nezha-admin/src/main/resources/statics/css/addDetectType.css b/nezha-admin/src/main/resources/statics/css/addDetectType.css
index 85c196cd..c05591ea 100644
--- a/nezha-admin/src/main/resources/statics/css/addDetectType.css
+++ b/nezha-admin/src/main/resources/statics/css/addDetectType.css
@@ -9,92 +9,6 @@
     height: 135px;
     z-index:99999;
 }
-.add-box{
-    font-size:13px;
-    border:1px solid #cccccc;
-    width:90%;
-    border-radius:4px;
-}
-
-.add-box_head {
-    border-bottom: 1px solid #cccccc;
-    padding: 7px 10px 4px 10px;
-}
-.add-box_head_meta, .add-box_row1_meta {
-    display: inline-block;
-    width: 25%;
-}
-.add-box_head_param, .add-box_row1_param {
-    display: inline-block;
-    width: 45%;
-}
-.add-meta-box_rows {
-    padding: 3px 0;
-    position:relative;
-    height:135px;
-}
-.add-param-box_rows {
-    padding: 3px 0;
-    position:relative;
-    height:100%;
-}
-.add-box_row {
-    line-height: 23px;
-    position: relative;
-    padding: 3px 10px;
-}
-
-.add-box_tag1, .add-box_tag2 {
-    font-size: 12px;
-    display: inline-block;
-    color: white;
-    line-height: 18px;
-    padding: 0 5px;
-    border-radius: 4px;
-}
-.add-box_tag1 {
-    background-color: #3c8dbc;
-}
-.add-box_tag2 {
-    background-color: #55c8c3;
-}
-.add-box_op {
-    position: absolute;
-    right: 30px;
-    color: #777777;
-    cursor: pointer;
-    /*top:10px;*/
-}
-.add-box_del {
-    position: absolute;
-    right: 10px;
-    color: red;
-    cursor: pointer;
-    /*top:10px;*/
-}
-.add-box_rec {
-    position: absolute;
-    right: 10px;
-    color: lightgreen;
-    cursor: pointer;
-    /*top:10px;*/
-}
-
-.add-box_ok {
-    position: absolute;
-    right: 10px;
-    cursor: pointer;
-    /*top:10px;*/
-}
-
-.add-box_foot {
-    height: 23px;
-    line-height: 23px;
-    text-align: center;
-}
-.add-box_foot>span, .meta-win_list-foot>span {
-    cursor: pointer;
-}
 .metatype-question {
     display: inline-block;
     margin-left: 2px;
diff --git a/nezha-admin/src/main/resources/statics/css/detect.css b/nezha-admin/src/main/resources/statics/css/detect.css
index 576ed865..c7edda01 100644
--- a/nezha-admin/src/main/resources/statics/css/detect.css
+++ b/nezha-admin/src/main/resources/statics/css/detect.css
@@ -9,67 +9,6 @@
     width: 100%;
 }
 
-/* 自定义框组件 */
-.add-box {
-	font-size: 13px;
-	border: 1px solid #cccccc;
-	width: 90%;
-	border-radius: 4px;
-}
-.add-box2 {
-	font-size: 13px;
-	border: 1px solid #cccccc;
-	width: 90%;
-	border-radius: 4px;
-	padding: 15px 0 0 0;
-}
-.add-box2 .form-group {
-	margin-bottom: 15px;
-}
-.add-box2 .control-label {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.add-box-first {
-	margin-bottom: 15px;
-}
-.add-box_head {
-	 border-bottom: 1px solid #cccccc;
-	 padding: 7px 10px 4px 10px;
-}
-.add-box_rows {
-	padding: 3px 0;
-	position: relative;
-	height: 160px;
-}
-.add-box_ug {
-	height: auto;
-}
-.add-box_row {
-    line-height: 23px;
-    position: relative;
-    padding: 3px 0 3px 10px;
-    margin-right: 7px;
-}
-.add-box_op {
-	position: absolute;
-	right: 10px;
-	color: #777777;
-}
-.add-box_op>i {
-	cursor: pointer;
-}
-.add-box_foot {
-	height: 23px;
-	line-height: 23px;
-	text-align: center;
-}
-.add-box_foot>i {
-	cursor: pointer;
-}
-/* 自定义框组件 end*/
 
 .plus {
     height: 23px;
diff --git a/nezha-admin/src/main/resources/statics/css/main.css b/nezha-admin/src/main/resources/statics/css/main.css
index 879f2d2b..4b6e9bdf 100644
--- a/nezha-admin/src/main/resources/statics/css/main.css
+++ b/nezha-admin/src/main/resources/statics/css/main.css
@@ -105,7 +105,12 @@ tbody > tr > th {font-weight: normal; }
 	padding:20px 2px 0px 2px;
 }
 .col-xs-6{padding-left: 0px;padding-right: 0px;}
-.form-horizontal .form-group {margin-left:0px;margin-right:0px;}
+.form-horizontal .form-group {
+	margin-left:0px;
+	margin-right:0px;
+
+}
+
 .form-horizontal{
 	width:550px;padding-top:20px;
 }
@@ -300,4 +305,94 @@ tbody > tr > th {font-weight: normal; }
 .ad-search-dropdown-item:hover {
 	background-color: #41B883;
 	color: white;
-}
\ No newline at end of file
+}
+
+/* add-box组件 */
+/* 自定义框组件 */
+.add-box { /*整体*/
+	font-size: 13px;
+	border: 1px solid #cccccc;
+	width: 90%;
+	border-radius: 4px;
+}
+.add-box_first { /*当有两个add-box在一起时，第一个add-box加上此class*/
+	margin-bottom: 15px;
+}
+.add-box_head { /*标题*/
+	 border-bottom: 1px solid #cccccc;
+	 padding: 7px 10px 4px 10px;
+}
+.add-box_body { /*内容，高度根据内部dom自动撑开*/
+	padding: 3px 0;
+	position: relative;
+}
+.add-box_body_160 { /*高度160px*/
+	height: 160px;
+}
+.add-box_row { /*每行内容*/
+    line-height: 23px;
+    position: relative;
+    padding: 3px 8px 3px 10px;
+    border-bottom: 1px solid white;
+}
+.add-box_cell { /*行内单元格*/
+	display: inline-block;
+}
+.add-box_cell_25 {
+	width: 25%;
+}
+.add-box_cell_30 {
+	width: 30%;
+}
+.add-box_cell_40 {
+	width: 40%;
+}
+.add-box_cell_45 {
+	width: 45%;
+}
+.add-box_cell_50 {
+	width: 50%;
+}
+.add-box_cell_60 {
+	width: 60%;
+}
+.add-box_cell_75 {
+	width: 75%;
+}
+.add-box_input {
+	height: 26px;
+}
+.add-box_tag1, .add-box_tag2 { /*自定义标签*/
+    font-size: 12px;
+    display: inline-block;
+    color: white;
+    line-height: 18px;
+    padding: 0 5px;
+    border-radius: 4px;
+}
+.add-box_tag1 {
+    background-color: #3c8dbc;
+}
+.add-box_tag2 {
+    background-color: #55c8c3;
+}
+/* .add-box_head .add-box_cell { head内的cell的文字稍稍偏右一点
+	padding-left: 3px;
+} */
+.add-box_ops { /*行末的按钮区域*/
+	position: absolute;
+	right: 10px;
+	color: #777777;
+}
+.add-box_ops>i {
+	cursor: pointer;
+}
+.add-box_foot { /*组件脚部，主要用来放'+'按钮*/
+	height: 23px;
+	line-height: 23px;
+	text-align: center;
+}
+.add-box_foot>i {
+	cursor: pointer;
+}
+/* add-box组件end */
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/js/modules/detect/addType.js b/nezha-admin/src/main/resources/templates/js/modules/detect/addType.js
index 3f966acf..7a64d3e4 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/detect/addType.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/detect/addType.js
@@ -2,7 +2,7 @@
 $(function(){
     var ps1 = new PerfectScrollbar('.meta-win_list');
     // var ps2 = new PerfectScrollbar('.add-param-box_rows');
-    var ps3 = new PerfectScrollbar('.add-meta-box_rows');
+    var ps3 = new PerfectScrollbar('.add-box_body_160');
 })
 Vue.use(window.vuelidate.default);
 Vue.component('multiselect', window.VueMultiselect.default);
diff --git a/nezha-admin/src/main/resources/templates/modules/detect/addTypeTemplate.html b/nezha-admin/src/main/resources/templates/modules/detect/addTypeTemplate.html
index 09de02b7..9d2facf7 100644
--- a/nezha-admin/src/main/resources/templates/modules/detect/addTypeTemplate.html
+++ b/nezha-admin/src/main/resources/templates/modules/detect/addTypeTemplate.html
@@ -51,39 +51,34 @@
                 <div class="col-sm-9">
                     <div class="add-box">
                         <div class="add-box_head">
-                				<span class="add-box_head_meta">
-                					<span>Field-Type</span>
-                                    <!-- <span class="metatype-question"><i class="fa fa-question-circle"></i></span> -->
-                				</span>
-                            <span class="add-box_head_meta">
-                					<span>Data-Type</span>
+                			<span class="add-box_cell add-box_cell_25">Field-Type
                                 <!-- <span class="metatype-question"><i class="fa fa-question-circle"></i></span> -->
-                				</span>
-                            <span>Name</span>
+                			</span>
+                            <span class="add-box_cell add-box_cell_25">Data-Type
+                                <!-- <span class="metatype-question"><i class="fa fa-question-circle"></i></span> -->
+                			</span>
+                            <span class="add-box_cell">Name</span>
                         </div>
-                        <div class="add-meta-box_rows">
+                        <div class="add-box_body add-box_body_160">
                             <div class="add-box_row"
-
                                  v-for="(meta,index) in deteType.deteTypeMetas"
                                  :class="{'danger2':meta.passFlag!=undefined&&!meta.passFlag}"
                                  v-if="meta.delFlag=='0'" >
-                                <!--<div style="width:800px;height:1px;margin:0px auto;padding:0px;background-color:black;overflow:hidden;"></div>-->
-                                <div class="add-box_row1_meta">
+                                <div class="add-box_cell add-box_cell_25">
                                     <span class="add-box_tag1">{{meta.fieldType.value}}</span>
                                 </div>
-                                <div class="add-box_row1_meta">
+                                <div class="add-box_cell add-box_cell_25">
                                     <span class="add-box_tag2">{{meta.dataType.value}}</span>
                                 </div>
-                                <span class="add-box_name" :title="meta.name" v-html="meta.name.length>20?spliteName(meta.name):meta.name"></span>
-                                <span class="add-box_op" >
-                                    <i @click="openMetaWindow(index)" class="fa fa-pencil-square-o"></i>
+                                <span class="add-box_cell" :title="meta.name" v-html="meta.name.length>20?spliteName(meta.name):meta.name"></span>
+                                <span class="add-box_ops" >
+                                    <i @click="openMetaWindow(index)" class="fa fa-pencil"></i>
                                     <i @click="delMeta(index)"  class="fa fa-trash-o"></i>
                                 </span>
-
                             </div>
                         </div>
                         <div class="add-box_foot">
-                            <span @click="openMetaWindow()"><i class="fa fa-plus"></i></span>
+                            <i @click="openMetaWindow()" class="fa fa-plus"></i>
                         </div>
 
                     </div>
@@ -95,12 +90,12 @@
             <div class="form-group">
                 <div class="col-sm-2 control-label">参数:</div>
                 <div class="col-sm-9">
-                    <div class="add-box" >
+                    <div class="add-box">
                         <div class="add-box_head">
-                            <span class="add-box_head_param">Name</span>
-                            <span>Default</span>
+                            <span class="add-box_cell add-box_cell_45">Name</span>
+                            <span class="add-box_cell">Default</span>
                         </div>
-                        <div class="add-param-box_rows" id="r-dete-param-container">
+                        <div class="add-box_body" id="r-dete-param-container">
                             <template v-for="(param,index) in deteType.deteTypeParams">
                                 <nz-add-param
                                     :dete-param="param"
@@ -111,15 +106,12 @@
                                     @del-param="delParam"
                                 ></nz-add-param>
                             </template>
-
                         </div>
                         <div class="add-box_foot">
-                            <span @click="addParam"><i class="fa fa-plus"></i></span>
+                            <i @click="addParam" class="fa fa-plus"></i>
                         </div>
                     </div>
-                    <div class="form-control_error-msg" v-if="!paramRequired">
-                        必填项
-                    </div>
+                    <div class="form-control_error-msg" v-if="!paramRequired">必填项</div>
                 </div>
             </div>
             <!--<div class="form-group">
@@ -348,12 +340,10 @@
 <script type="text/x-template" id="addDetectParam" >
     <div draggable="true" :index="index">
         <div class="add-box_row" v-show="!editSwitch" v-id:[listPreKey]="index" :class="{'text-disabled':deteParam.delFlag=='1'}">
-            <div class="add-box_row1_param">
-                <span>{{deteParam.name}}</span>
-            </div>
+            <div class="add-box_cell add-box_cell_45">{{deteParam.name}}</div>
             <span class="add-box_name">{{deteParam.defVal}}</span>
-            <span class="add-box_op"  >
-                <i @click="editSelf" class="fa fa-pencil-square-o" :id="'add-box_op_edit_'+index"></i>
+            <span class="add-box_ops"  >
+                <i @click="editSelf" class="fa fa-pencil" :id="'add-box_op_edit_'+index"></i>
                 <i @click="deteParam.delFlag=='0'?delSelf():recSelf()" :class="{'fa fa-trash-o':deteParam.delFlag=='0','fa fa-undo':deteParam.delFlag=='1'}"></i>
             </span>
 <!--            <span :class="{'add-box_del':deteParam.delFlag=='0','add-box_rec':deteParam.delFlag=='1'}" ></span>-->
@@ -363,14 +353,16 @@
 
             </div>
             <form class="form-inline">
-                <div class="form-group form-group-left">
-                    <input type="text" :id="'r-param-name-input-'+index" :class="{'form-control--error':$v.deteParam.name.$dirty&&(!$v.deteParam.name.required||!$v.deteParam.name.inPageNameRepeat)}" class="form-control"  placeholder="请输入名称" v-model="$v.deteParam.name.$model">
-
-                </div>
-                <div class="form-group form-group-right">
-                    <input type="text" :id="'r-param-defval-input-'+index" :class="{'form-control--error':$v.deteParam.defVal.$dirty&&!$v.deteParam.defVal.required}" class="form-control"  placeholder="请输入默认值" v-model="$v.deteParam.defVal.$model">
-                </div>
-                <span class="add-box_op" @click="submitSelf" style="right: 0px"><i class="fa fa-check"></i></span>
+				<div class="add-box_cell add-box_cell_45">
+                	<input type="text" :id="'r-param-name-input-'+index" :class="{'form-control--error':$v.deteParam.name.$dirty&&(!$v.deteParam.name.required||!$v.deteParam.name.inPageNameRepeat)}" class="form-control add-box_input"  placeholder="请输入名称" v-model="$v.deteParam.name.$model">
+				</div>
+				<div class="add-box_cell add-box_cell_45">
+                    <input type="text" :id="'r-param-defval-input-'+index" :class="{'form-control--error':$v.deteParam.defVal.$dirty&&!$v.deteParam.defVal.required}" class="form-control add-box_input"  placeholder="请输入默认值" v-model="$v.deteParam.defVal.$model">
+				</div>
+                <span class="add-box_ops">
+					<i @click="submitSelf" class="fa fa-check"></i>
+					<i @click="submitSelf" class="fa fa-trash-o"></i>
+				</span>
             </form>
         </div>
     </div>
diff --git a/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html b/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html
index 73774aff..97c0e2d2 100644
--- a/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html
+++ b/nezha-admin/src/main/resources/templates/modules/detect/deteSet.html
@@ -5,7 +5,7 @@
     <title><@spring.message 'deteSet'/></title>
     <link rel="stylesheet" href="${request.contextPath}/statics/css/nzNodeSelector.css">
     <link rel="stylesheet" href="${request.contextPath}/statics/css/addDetectType.css">
-    <link rel="stylesheet" href="${request.contextPath}/statics/css/detect.css">
+    <link rel="stylesheet" href="${request.contextPath}/statics/css/detect.css?">
 
 </head>
 <#include "/header.html">
@@ -86,8 +86,14 @@
             <div class="form-group" v-show="typeParams !=null && typeParams.length>0">
                 <div class="col-sm-2 control-label"><@spring.message 'validate.deteSet.param'/>:</div>
                 <div class="col-sm-9">
-                <div class="add-box2">
-	                <label-input v-for="param,index in typeParams" :def-val="param.defVal" :label="param.name" v-model="paramVals[index]"></label-input>
+                <div class="add-box">
+                	<div class="add-box_head">
+						<span class="add-box_cell add-box_cell_30">名称</span>
+						<span class="add-box_cell add-box_cell_60">值</span>
+					</div>
+					<div class="add-box_body">
+	                	<label-input v-for="param,index in typeParams" :def-val="param.defVal" :label="param.name" v-model="paramVals[index]"></label-input>
+                	</div>
                 </div>
                 </div>
             </div>
@@ -95,14 +101,14 @@
                 <div class="col-sm-2 control-label"><@spring.message 'common.selectNodeOrNodeGroup'/>:</div>
                 <div class="col-sm-9">
                     <!--                    <a  class="btn btn-default" href="#" @click="openNodePannel">节点/节点组</a>-->
-                    <div class="add-box add-box-first" :class="{'form-control--error': nodeOrGroupEmpty}">
+                    <div class="add-box add-box_first" :class="{'form-control--error': nodeOrGroupEmpty}">
                         <div class="add-box_head">
-                        	<@spring.message 'common.nodeGroup'/>
+                        	<span class="add-box_cell"><@spring.message 'common.nodeGroup'/></span>
                         </div>
-                        <div class="add-box_rows psNg">
+                        <div class="add-box_body add-box_body_160 psNg">
 	                        <div class="add-box_row" v-for="ng,index in nodeGroupsChecked">
-	                            <span class="add-box_row_item">{{ng.absolutePath}}</span>
-	                            <span class="add-box_op">
+	                            <span class="add-box_cell">{{ng.absolutePath}}</span>
+	                            <span class="add-box_ops">
 	                            	<i @click="unCheckGroup(ng)" class="fa fa-trash-o"></i>
 	                            </span>
 	                        </div>
@@ -113,13 +119,13 @@
                     </div>
                     <div class="add-box" :class="{'form-control--error': nodeOrGroupEmpty}">
                         <div class="add-box_head">
-                            <@spring.message 'common.node'/>
+                            <span class="add-box_cell"><@spring.message 'common.node'/></span>
                         </div>
                         <div>
-                            <div class="add-box_rows psN">
+                            <div class="add-box_body add-box_body_160 psN">
 		                        <div class="add-box_row" v-for="ni,index in nodeInfosChecked">
-	                                <span class="add-box_row_item">{{ni.ip}}</span>
-	                                <span class="add-box_op">
+	                                <span class="add-box_cell">{{ni.ip}}</span>
+	                                <span class="add-box_ops">
 	                                	<i @click="unCheckNodeInfo(ni)" class="fa fa-trash-o"></i>
 	                                </span>
 		                        </div>
@@ -161,9 +167,9 @@
 	                    </template>
                     </div>
                     <div class="add-box" v-show="deteSet.viewLevel==1">
-                    	<div class="add-box_rows add-box_ug" :class="{'form-control--error': deteSet.viewLevel==1&&userGroupsEmpty}">
+                    	<div class="add-box_body" :class="{'form-control--error': deteSet.viewLevel==1&&userGroupsEmpty}">
 	                        <div class="add-box_row" v-for="viewer in viewers" v-if="viewers ==null || viewers.length > 0">
-	                             <span class="add-box_row_item"><input type="checkbox" :value="viewer.code"  v-model="viewer.checked"> {{viewer.value}}</span>
+	                             <span class="add-box_cell"><input type="checkbox" :value="viewer.code"  v-model="viewer.checked"> {{viewer.value}}</span>
 	                        </div>
 	                        <span class="help-block" v-else>
 	                                <@spring.message 'validate.common.noUsergroupInSysView'/>
diff --git a/nezha-admin/src/main/resources/templates/modules/detect/main.html b/nezha-admin/src/main/resources/templates/modules/detect/main.html
index ed6506c6..91c36677 100644
--- a/nezha-admin/src/main/resources/templates/modules/detect/main.html
+++ b/nezha-admin/src/main/resources/templates/modules/detect/main.html
@@ -1,8 +1,8 @@
 <script id="labelInput" type="text/x-template">
-<div class="form-group">
-	<div class="col-sm-3 control-label" :title="label">{{label}}</div>
-	<div class="col-sm-8">
-		<input type="text" class="form-control" :placeholder="defVal" :value="value" @input="$emit('input', $event.target.value)"/>
+<div class="add-box_row">
+	<div class="add-box_cell add-box_cell_30" :title="label">{{label}}</div>
+	<div class="add-box_cell add-box_cell_60">
+		<input type="text" class="form-control add-box_input" :placeholder="defVal" :value="value" @input="$emit('input', $event.target.value)"/>
 	</div>
 </div>
 </script>