282 行
9.6 KiB
HTML
可执行文件
282 行
9.6 KiB
HTML
可执行文件
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>营业员-特价打折</title>
|
|
<link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.css">
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.Promotion, blockquote {
|
|
box-sizing: border-box;
|
|
/*margin: 0;*/
|
|
padding: 0;
|
|
padding-left: 15px;
|
|
border-left: 2px solid #3D4357;
|
|
font-size: 14px;
|
|
}
|
|
|
|
table {
|
|
border: 1px solid #f1f1f1;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.glyphicon-plus {
|
|
color: #289FDE;
|
|
|
|
}
|
|
|
|
.glyphicon-minus {
|
|
color: #E77062;
|
|
}
|
|
|
|
.btn.active {
|
|
background: #232B42;
|
|
color: #fff;
|
|
}
|
|
|
|
.modal-body .form-group {
|
|
width: 100%;
|
|
}
|
|
.error{
|
|
color: red;
|
|
height: 20px;
|
|
line-height: 15px;
|
|
font-size: 12px;
|
|
margin-left:38%;
|
|
}
|
|
.glyphicon-alert {
|
|
color: #FFD800;
|
|
font-size: 20px;
|
|
}
|
|
.modal-body p span{
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<blockquote>
|
|
<p>营业员</p>
|
|
</blockquote>
|
|
<form action="" class="form-inline">
|
|
<div class="form-group has-feedback">
|
|
<label for="" class=" control-label sr-only"></label>
|
|
<input type="text" class="form-control salesClerk" placeholder="编号/姓名">
|
|
<span style="color: #999" class="glyphicon glyphicon-search form-control-feedback"></span>
|
|
</div>
|
|
<!--弹出框 -->
|
|
<button type="button" class="btn btn-default active" data-toggle="modal" data-target=".myModal">新增</button>
|
|
<button type="button" class="btn btn-default btnModify">修改</button>
|
|
<button type="button" class="btn btn-default btnDel">删除</button>
|
|
</form>
|
|
|
|
<table class="table table-hover salesTable">
|
|
<tr>
|
|
<th>
|
|
<input class="all" type="checkbox">
|
|
</th>
|
|
<th>序号</th>
|
|
<th>营业员编号</th>
|
|
<th>店名</th>
|
|
<th>营业员姓名</th>
|
|
<th>状态</th>
|
|
<th>备注</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input class="check" type="checkbox">
|
|
</td>
|
|
<td>1001</td>
|
|
<td class="num">122</td>
|
|
<td>品名</td>
|
|
<td class="name">0</td>
|
|
<td class="state">1</td>
|
|
<td>1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input class="check" type="checkbox">
|
|
</td>
|
|
<td>1001</td>
|
|
<td class="num">111</td>
|
|
<td>品名</td>
|
|
<td class="name">1</td>
|
|
<td class="state">1</td>
|
|
<td>1</td>
|
|
|
|
</tr>
|
|
</table>
|
|
|
|
<!--弹出层-->
|
|
<div class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document" style="width: 400px;height: 400px;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title" id="myModalLabel">选择商品</h4>
|
|
</div>
|
|
<div class="modal-body" style="height:300px;overflow:auto; ">
|
|
<form action="" class="form-inline">
|
|
<div class="form-group">
|
|
<label for="" class="control-label col-md-4 col-sm-4 text-right">
|
|
<span style="color:red;">*</span>营业员编号
|
|
</label>
|
|
<div class="col-md-6 col-sm-6">
|
|
<input type="text" class="form-control salesClerkNum">
|
|
</div>
|
|
</div>
|
|
<div class="error error-num"></div>
|
|
<div class="form-group">
|
|
<label for="" class="control-label col-md-4 col-sm-4 text-right">
|
|
<span style="color:red;">*</span>营业员姓名
|
|
</label>
|
|
<div class="col-md-6 col-sm-6">
|
|
<input type="text" class="form-control salesClerkName">
|
|
</div>
|
|
</div>
|
|
<div class="error error-name"></div>
|
|
<div class="form-group">
|
|
<label for="" class="control-label col-md-4 col-sm-4 text-right">
|
|
状态
|
|
</label>
|
|
<div class="col-md-6 col-sm-6">
|
|
<select name="" class="form-control">
|
|
<option value="">正常</option>
|
|
<option value="">停用</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="error"></div>
|
|
<div class="form-group">
|
|
<label for="" class="control-label col-md-4 col-sm-4 text-right">
|
|
备注
|
|
</label>
|
|
<div class="col-md-6 col-sm-6">
|
|
<textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary btnConfirm" style="background: #232B42">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--询问层-->
|
|
<div class="modal fade myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document" style="width: 400px;height: 400px;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title" id="">警告</h4>
|
|
</div>
|
|
<div class="modal-body" >
|
|
<p class="">
|
|
<span class="glyphicon glyphicon-alert"></span>
|
|
<span class="alertText">请选择要修改的记录</span>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal" style="background: #232B42">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="__PUBLIC__/jquery/js/jquery.min.js"></script>
|
|
<script src="__PUBLIC__/bootstrap/js/bootstrap.js"></script>
|
|
<script src="__PUBLIC__/Retail/discount/js/center.js"></script>
|
|
<script >
|
|
|
|
// 删除
|
|
$(".btnDel").click(function () {
|
|
var input = $(".table").find("input[type='checkbox']");
|
|
var chec = $(".table").find("input[type='checkbox']:checked");
|
|
if(input.is(":checked")){//选中执行
|
|
chec.parents('tr').remove();
|
|
if(input.length==2){ //表单长度如果删除只剩下表头 则整个删除
|
|
$(".salesTable").hide();
|
|
}
|
|
}else {
|
|
var Modal2= $('.myModal2').modal('show');
|
|
Modal2.find('.alertText').text('请选择要删除的记录')
|
|
}
|
|
})
|
|
//全选
|
|
$(".all").click(function () {
|
|
if($(this).prop("checked")==true){
|
|
$(".salesTable").find("input[type='checkbox']").prop('checked',true)
|
|
}else {
|
|
$(".salesTable").find("input[type='checkbox']").prop('checked',false)
|
|
}
|
|
})
|
|
|
|
//单个选中
|
|
$(".check").click(function () {
|
|
var check = $(".salesTable").find(".check"),
|
|
checkInput = $(".salesTable").find(".check:checked"),
|
|
allCheck = $(".salesTable").find(".all").prop('checked',true);
|
|
if(checkInput.length==check.length){
|
|
allCheck.prop('checked',true);
|
|
}else {
|
|
allCheck.prop('checked',false);
|
|
}
|
|
})
|
|
|
|
//修改
|
|
// $(".btnModify").click(function () {
|
|
// var input = $(".table input[type='checkbox']");
|
|
// if(input.is(":checked")){//选中执行
|
|
// $('.myModal').modal('show');
|
|
// }else {
|
|
// $('.myModal2').modal('show')
|
|
// }
|
|
// })
|
|
//修改
|
|
$(".btnModify").click(function () {
|
|
var input = $(".table input[type='checkbox']");
|
|
if(input.is(":checked")){//选中执行
|
|
$('.myModal').modal('show');
|
|
}else {
|
|
$('.myModal2').modal('show')
|
|
}
|
|
})
|
|
|
|
|
|
//弹框确定
|
|
$(".btnConfirm").click(function () {
|
|
var salesClerkNum = $(".salesClerkNum");
|
|
var salesClerkName = $(".salesClerkName");
|
|
if(salesClerkNum.val()==''){
|
|
$(".error-num").text('编号不能为空')
|
|
}else if(salesClerkName.val()==''){
|
|
$(".error-name").text('姓名不能为空')
|
|
}else{
|
|
$('.myModal').modal('hide');
|
|
}
|
|
|
|
salesClerkNum.focus(function () {
|
|
$(".error").text('')
|
|
})
|
|
salesClerkName.focus(function () {
|
|
$(".error").text('')
|
|
})
|
|
})
|
|
</script>
|
|
</html> |