<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例管理</title>
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/bootstrapStyle.css" />
<link rel="stylesheet" href="/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-3.3.7-dist/css/bootstrap.css" />
<!-- 引入 自定义 样式 -->
<link rel="stylesheet" href="/plugins/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.row {
margin: 0px auto;
margin-bottom: 10px;
padding: 5px;
}
.alert-info {
text-align: center;
background: #71b3c8;
border: #e5e8e8;
color: black;
}
._content div {
margin: 0px;
}
._content ._tile {
color: black;
background-color: #4aa4bd;
border: #9e9a9a;
}
._content ._height {
height: 500px;
overflow: auto;
}
._caseTitle {
padding-top: 7px;
}
._caseText{
padding-top: 7px;
text-align: left;
}
.patternCss,.stepCss {
text-align: left;
overflow: hidden;
white-space: nowrap;
}
.patternCss:HOVER,.stepCss:HOVER {
cursor: pointer;
}
._sure {
color: white;
}
._sure:HOVER {
cursor: pointer;
}
.showCZ:HOVER{
cursor: pointer;
}
.showCZ:HOVER .showCzBtn{
display: inline!important;
}
button{
opacity:0.3;
height: 17px;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!--header start-->
<div class="header">
<div id="topPage"></div>
</div>
<!--header end-->
<main class="container-fluid">
<div class="m-top">
<div>
<a class="float_l" href=""><img src="/img/tittle.png" alt="tupian" /></a>
<p class="float_l">案例 / 案例集管理 / 新增案例集</p>
</div>
</div>
<div class="r-piece" style="width: 100%;padding: 0.5%">
<div class="row alert alert-info">
<div class="col-md-3 _caseTitle">
归属项目:<span id="projectName">Ao01_xxqq</span>
</div>
<div class="col-md-3 _caseTitle">
归属版本:<span id="versionName">qh_z0824</span>
</div>
<div class="col-md-6">
<div class="col-md-3 _caseTitle">案例集名称:</div>
<div class="col-md-9">
<input type="text" class="form-control" id="suiteTile" placeholder="请输入">
</div>
</div>
</div>
<div class="row _content">
<div class="col-md-4">
<div class="row alert alert-info _tile">功能模块</div>
<div class="row alert alert-info _height">
<ul id="modules" class="ztree"></ul>
</div>
</div>
<div class="col-md-4">
<div class="row alert _tile">
<div class="col-md-4" style="text-align: left;">
<input type="checkbox" id="checkedAll" name="checkedAll" />全选
</div>
<div class="col-md-4">案例列表</div>
<div class="col-md-4 _sure" οnclick="_sure();";>确认选择</div>
</div>
<div class="row alert alert-info _height" id="cases"></div>
</div>
<div class="col-md-4">
<div class="row alert alert-info _tile">已选案例列表</div>
<div class="row alert alert-info _height" id="sureCases"></div>
</div>
</div>
<div class="row" style="text-align: center;">
<button type="button" class="btn btn-primary" οnclick="commitSuite();">保存</button>
<button type="button" class="btn btn-default" οnclick="goBack();">返回</button>
</div>
</div>
</main>
</body>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script src="/plugins/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- ztree -->
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.exedit.js"></script>
<!-- paginator.js(分页) -->
<script type="text/javascript" src="/js/bootstrap-paginator.js"></script>
<!-- 封装的ajax请求 -->
<script type="text/javascript" src="/autotest/common-js/common.js"></script>
<!-- 对话框 -->
<script type="text/javascript" src="/autotest/common-js/dialog.js"></script>
<!-- 对应当前页面的js文件 -->
<script type="text/javascript" charset="utf-8" src="/autotest/autotest-js/module/module.js"></script>
<script type="text/javascript" src="/autotest/autotest-js/cases/add_suite.js"></script>
</html>
$("#topPage").load("/pages/commonPage/newTop.html");
/**
* ztree相关操作
*/
// 定制ztreeSetting
var setting = {
view : {
showLine : false,
selectedMulti : false
},
callback : {
beforeDrag : beforeDrag,
onClick: zTreeOnClick
},
data : {
simpleData : {
enable : true,
idKey : "id",
pIdKey : "parentid",
rootPId : 0
}
}
};
// 禁止拖拽
function beforeDrag(treeId, treeNodes) {
return false;
}
var cases=$("#cases");
var moduleIds={
moduleIds:[]
};
//onclick
function zTreeOnClick(event, treeId, treeNode) {
var ids=[];
ids.push(treeNode.id);
if(treeNode.id=='1'){
ids=[];
}
moduleIds.moduleIds=ids;
randerCases();
//如果checkbox全部为选中,则让全选按钮选中
var checkboxs=$("input[name='ck']:checkbox");
if(checkboxs.lenght==0){
$('[name=checkedAll]:checkbox').prop('checked', false);
}
var sureCasesLength=$("#sureCases").find("div").length;
//点击模块时候如果确认的案例已经存在,则让checkbox选中
if(sureCasesLength>0){
$("#sureCases").find("div").each(function(){
var sueredId=$(this).attr("data-id");
$("input[name='ck']:checkbox").each(function() {
if(sueredId==$(this).val()){
$("#ck"+$(this).val()).prop("checked",true);
}
});
});
var checked = $("input[name='ck']:checked");
if(checkboxs.length==checked.length&&checkboxs.length!=0){
$('[name=checkedAll]:checkbox').prop('checked', true);
}
}
}
//加载案例列表
var randerCases=function(){
if(moduleIds.moduleIds.length==0){
moduleIds.moduleIds.push(-1);
}
$.hsf.ajaxGet("/cases/getCasesByModuleIds",moduleIds, false, function(result) {
if (result.messageCode == 1) {
cases.empty();
var strs="";
$.each(result.details,function(index,item){
strs+="<div style='text-align:left;margin-top:1%' οnclick='ckck(this)';><input id='ck"+item.id+"' type='checkbox' name='ck' value='"+item.id+"'/>"+item.name+'</div>';
});
cases.append(strs);
}
});
$('[name=checkedAll]:checkbox').prop('checked', false);
};
$(function() {
initTree(setting);
randerCases();
});
$("#checkedAll").change(function(){
if($(this).is(":checked")){
$('[name=ck]:checkbox').prop('checked', true);
}else{
$('[name=ck]:checkbox').prop('checked', false);
};
});
//点击一个
function ckck(obj) {
var checkBoxslength=$("input[name='ck']:checkbox").length;
var checkedlength = $("input[name='ck']:checked").length;
if(checkBoxslength==checkedlength){
$('[name=checkedAll]:checkbox').prop('checked', true);
}else{
$('[name=checkedAll]:checkbox').prop('checked', false);
}
}
var sureCasesIds=[];
//确认选择
var _sure=function(){
var sureCasesLength=$("#sureCases").find("div").length;
var sureIds=[];
if(sureCasesLength>0){
$("#sureCases").find("div").each(function(){
var sureId=$(this).attr("data-id");
sureIds.push(sureId);
});
}
$("input[name='ck']:checkbox").each(function() {
if ($(this).is(':checked')) {
var checkId=$(this).val();
var index_=$.inArray(checkId, sureIds);
if(index_==-1){
var content=$(this).parent().text();
var str="<div class='showCZ' data-id="+checkId+" style='text-align:left;margin-top:1%;'>"+content;
str+=" <button type='button' οnclick='_move(this);' style='border:none;display:none' class='btn-group btn-group-sm showCzBtn'> <i class='fa fa-trash-o'></i> </button>";
str+=" <button type='button' οnclick='_up(this);' style='border:none;display:none' class='btn-group btn-group-sm showCzBtn'> <i class='fa fa-arrow-up'></i> </button>";
str+=" <button type='button' οnclick='_down(this)'; style='border:none;display:none' class='btn-group btn-group-sm showCzBtn'> <i class='fa fa-arrow-down'></i> </button>";
str+="</button>";
str+="<div>";
$("#sureCases").append(str);
sureCasesIds.push(checkId);
}
}
if($(this).is(':checked')==false){
var checkId=$(this).val();
$("#sureCases").find("div").each(function(){
var sureId=$(this).attr("data-id");
if(checkId==sureId){
$(this).remove();
}
});
}
});
var mainContainer =$("#sureCases");
var scrollToContainer = mainContainer.find('div:last');
if(typeof(scrollToContainer.offset())!="undefined"){
mainContainer.animate({
scrollTop : scrollToContainer.offset().top - mainContainer.offset().top+ mainContainer.scrollTop()
}, 2000);// 2秒滑动到指定位置
};
}
//移除
var _move=function(obj){
var div_data_id=$(obj).parent().attr("data-id");
$("input[name='ck']:checkbox").each(function() {
if($(this).is(":checked")){
$("#ck"+div_data_id).prop("checked",false);
$('[name=checkedAll]:checkbox').prop('checked', false);
}
});
$(obj).parent().remove();
}
//up
var _up=function(obj){
var currentDiv=$(obj).parent();
var prevDiv=currentDiv.prev();
if(typeof(prevDiv.html())=='undefined'){
showMsg("已经是第一个了!");
}else{
currentDiv.insertBefore(prevDiv);
prevDiv.insertAfter(currentDiv);
};
}
//down
var _down=function(obj){
var currentDiv=$(obj).parent();
var nextDiv=currentDiv.next();
if(typeof(nextDiv.html())=='undefined'){
showMsg("已经是最后一个了!");
}else{
currentDiv.insertBefore(nextDiv);
nextDiv.insertBefore(currentDiv);
};
}
var commitSuite=function(){
var suiteTile=$("#suiteTile").val();
if(suiteTile==""){
showMsg("请填写案例集名称!");
return false;
}
var sureCaseLength= $("#sureCases").find("div").length;
if(sureCaseLength==0){
showMsg("请至少选择一条案例!");
return false;
};
//添加案例集操作
var params={
name:suiteTile,
suiteCases:[]
};
var cases=[];
var i=1;
$("#sureCases").find("div").each(function(){
var cas = {
caseId : '',
name : '',
sortIndex:''
};
if($(this).attr("data-id")>0){
cas.sortIndex=i++;
cas.caseId=$.trim($(this).attr("data-id"));
cases.push(cas);
}
});
params.suiteCases=cases;
//提交
$.hsf.ajaxPostT("/caseSet/addSuite",JSON.stringify(params),false,function(result){
if(result.messageCode==1){
showMsg("保存案例集成功!");
window.location.href="/pages/cases/suite.html";
}
});
}
var goBack=function(){
window.location.href="/pages/cases/suite.html";
}