You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

625 lines
28 KiB

6 months ago
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>库存管理</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo "><i class="layui-icon layui-icon-cart"></i>库存管理系统</div>
<!-- 头部区域可配合layui已有的水平导航 -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item" ><a href="/index/"><i class="layui-icon layui-icon-table"></i>库存管理</a></li>
<li class="layui-nav-item"><a href="/count/"><i class="layui-icon layui-icon-rmb"></i>预算统计</a></li>
<li class="layui-nav-item"><a href="/other/"><i class="layui-icon layui-icon-time"></i>出入库记录</a></li>
</ul>
</div>
<div style="padding: 5%;">
<!-- 内容主体区域 -->
<div class="layui-fluid">
<div class="demoTable">
<i class="layui-icon layui-icon-search"></i>
产品种类:
<div class="layui-form layui-input-inline">
<select id="search_type" name="search_type" lay-filter = "search_type">
<option value="">请选择</option>
<option value="激励环">激励环</option>
<option value="壳体">壳体</option>
<option value="工具">工具</option>
<option value="其它">其它</option>
</select>
</div>
工件工序:
<div class="layui-form layui-input-inline">
<select id="search_process" name="search_process" >
</select>
</div>
搜索品名:
<div class="layui-inline">
<input class="layui-input" name="search_name" id="search_name" autocomplete="off">
</div>
搜索型号:
<div class="layui-inline">
<input class="layui-input" name="search_model" id="search_model" autocomplete="off">
</div>
<button type="button" class="layui-btn" id="searchbt" data-type="reload">搜索</button>
<button type="button" class="layui-btn" id="addbt" style="float: right;"><i class="layui-icon">&#xe608;</i> 添加库存品类</button>
</div>
</div>
<table class="layui-hide" id="goods" lay-filter="goods"></table>
<script type="text/html" id="toolbarDemo"></script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">更新</a>
<a class="layui-btn layui-btn-xs" lay-event="out">出库</a>
<a class="layui-btn layui-btn-xs" lay-event="in">入库</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</div>
<script type="text/html" id="edit_html">
<form class="layui-form" id="edit_form">
<div style="padding: 3%;">
</div>
<div class="layui-form-item">
<label class="layui-form-label">序号</label>
<div class="layui-input-inline">
<input type="text" name="edit_id" id="edit_id" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品名</label>
<div class="layui-input-inline">
<input type="text" name="edit_name" id="edit_name" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">型号</label>
<div class="layui-input-inline">
<input type="text" name="edit_model" id="edit_model" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">产品种类</label>
<div class="layui-form layui-input-inline">
<select id="edit_type" name="edit_type" lay-filter = "edit_type">
<option value="">请选择</option>
<option value="激励环">激励环</option>
<option value="壳体">壳体</option>
<option value="工具">工具</option>
<option value="其它">其它</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工件工序</label>
<div class="layui-form layui-input-inline">
<select id="edit_process" name="edit_process" >
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">厂商</label>
<div class="layui-input-inline">
<input type="text" name="edit_factory" id="edit_factory" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单价</label>
<div class="layui-input-inline">
<input type="text" name="edit_price" id="edit_price" lay-verify="required|number" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">安全数量</label>
<div class="layui-input-inline">
<input type="text" name="edit_safenumber" id="edit_safenumber" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="edit_submit" >立即提交</button>
</div>
</div>
</form>
</script>
<script type="text/html" id="in_html">
<form class="layui-form" id="in_form">
<div style="padding: 3%;"></div>
<div class="layui-form-item">
<label class="layui-form-label">序号</label>
<div class="layui-input-inline">
<input type="text" name="in_id" id="in_id" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品名</label>
<div class="layui-input-inline">
<input type="text" id="in_name" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">型号</label>
<div class="layui-input-inline">
<input type="text" id="in_model" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工序</label>
<div class="layui-input-inline">
<input type="text" id="in_process" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">厂商</label>
<div class="layui-input-inline">
<input type="text" id="in_factory" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入库数量</label>
<div class="layui-input-inline">
<input type="text" name="in_change" lay-verify="required|number" placeholder="请输入库数量" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入库人员</label>
<div class="layui-input-inline">
<select id ="in_people" name="in_people" lay-verify="required">
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="in_submit">立即提交</button>
</div>
</div>
</form>
</script>
<script type="text/html" id="out_html">
<form class="layui-form" id="out_form">
<div style="padding: 3%;"></div>
<div class="layui-form-item">
<label class="layui-form-label">序号</label>
<div class="layui-input-inline">
<input type="text" name="out_id" id="out_id" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品名</label>
<div class="layui-input-inline">
<input type="text" id="out_name" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">型号</label>
<div class="layui-input-inline">
<input type="text" id="out_model" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工序</label>
<div class="layui-input-inline">
<input type="text" id="out_process" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">厂商</label>
<div class="layui-input-inline">
<input type="text" id="out_factory" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">目前库存</label>
<div class="layui-input-inline">
<input type="text" id="out_number" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出库数量</label>
<div class="layui-input-inline">
<input type="text" name="out_change" lay-verify="required|number|bigger|more" placeholder="请输出库数量" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出库人员</label>
<div class="layui-input-inline">
<select id ="out_people" name="out_people" lay-verify="required">
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="out_submit" >立即提交</button>
</div>
</div>
</form>
</script>
<script type="text/html" id="del_html">
<form class="layui-form" id="del_form">
<div style="padding: 3%;"></div>
<div class="layui-form-item">
<label class="layui-form-label">序号</label>
<div class="layui-input-inline">
<input type="text" name="del_id" id="del_id" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品名</label>
<div class="layui-input-inline">
<input type="text" id="del_name" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">型号</label>
<div class="layui-input-inline">
<input type="text" id="del_model" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工序</label>
<div class="layui-input-inline">
<input type="text" id="del_process" lay-verify="required" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">厂商</label>
<div class="layui-input-inline">
<input type="text" id="del_factory" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">库存数量</label>
<div class="layui-input-inline">
<input type="text" id="del_number" lay-verify="zero" readonly="true" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="del_submit">确认删除</button>
</div>
</div>
</form>
</script>
<script type="text/html" id="add_html">
<form class="layui-form" id="add_form">
<div style="padding: 3%;"></div>
<div class="layui-form-item">
<label class="layui-form-label">品名</label>
<div class="layui-input-inline">
<input type="text" name="add_name" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">型号</label>
<div class="layui-input-inline">
<input type="text" name="add_model" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">产品种类</label>
<div class="layui-input-inline">
<select id ="add_type" name="add_type" lay-verify="required" lay-filter ="add_type">
<option value="">请选择</option>
<option value="激励环">激励环</option>
<option value="壳体">壳体</option>
<option value="工具">工具</option>
<option value="其它">其它</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工件工序</label>
<div class="layui-input-inline">
<select id ="add_process" name="add_process" lay-verify="required">
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">厂商</label>
<div class="layui-input-inline">
<input type="text" name="add_factory" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单价</label>
<div class="layui-input-inline">
<input type="text" name="add_price" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="add_submit">立即提交</button>
</div>
</div>
</form>
</script>
</div>
<script>
layui.use(['table','form','layer'], function () {
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
var get_names = function(name, htmlID) {
$.get("/data/" + ("?", (name)), function(d) {
var list = d.data;
var names = "<option ></option>"
for (var i = 0; i < list.length; i++) {
if (Object.keys(list[i])[0] == "id") {
names += "<option >" + Object.values(list[i])[1] + "</option>"
} else {
names += "<option >" + Object.values(list[i])[0] + "</option>"
}
}
$("#" + ("?", htmlID)).html(names);
form.render();
});
}
table.render({
elem: '#goods'
, url:'/data/goods/'
, toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print']
, title: '库存数据表'
,initSort: {
field: 'needbuy' //排序字段,对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
, cols: [[
{ field: 'id', title: '序号', width: 60, fixed: 'left'}
, { field: 'name', title: '品名', width: 120 , sort: true }
, { field: 'model', title: '型号', width: 220 }
, { field: 'factory', title: '厂商', width: 80, sort: true}
, { field: 'process', title: '工件工序', width: 200, sort: true}
, { field: 'price', title: '单价', width: 80}
, { field: 'number', title: '数量', width: 60}
, { field: 'safenumber', title: '安全数量', width: 120}
, { field: 'needbuy', title: '需要购买', width: 120}
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 220 }
]]
,id: 'goods_tablerender'
,page: false
,skin: 'row'
,even: true
,height: 'full-160'
,done:function(res,curr,count){
//layui.table.cache['goods_tablerender']获取表格中的数据,完成排序的返回排完序后的数据
for(var i in layui.table.cache['goods_tablerender']){
var ID = layui.table.cache['goods_tablerender'][i]
if(ID.number < ID.safenumber){
//改变整行颜色为红色
$("tr[data-index='" + i + "']").css("background-color","red")
//改变整行字体颜色为白色
$("tr[data-index='" + i + "']").css("color","white")
layer.confirm("Warning:"+ID.model+" 数量过低,请及时补货",function(index){
layer.close(index);
})
}
}
},
});
//监听行工具事件
table.on('tool(goods)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'del') {
layer.open({
type: 1,
area: ['380px', '450px'],
title:["删除库存品类",'font-size:25px;'],
content:$("#del_html").html(),
zIndex: layer.zIndex //重点1
,
success:function () {
$("#del_id").val(data.id)
$("#del_name").val(data.name)
$("#del_model").val(data.model)
$("#del_type").val(data.type)
$("#del_process").val(data.process)
$("#del_factory").val(data.factory)
$("#del_number").val(data.number)
}
})
} else if (obj.event === 'in') {
layer.open({
type: 1,
area: ['380px', '500px'],
title:["入库",'font-size:25px;'],
content:$("#in_html").html(),
success:function () {
$("#in_id").val(data.id)
$("#in_name").val(data.name)
$("#in_model").val(data.model)
$("#in_factory").val(data.factory)
$("#in_type").val(data.type)
$("#in_process").val(data.process)
get_names("operator_names","in_people");
form.render();
}
})
}else if (obj.event === 'out') {
layer.open({
type: 1,
area: ['380px', '550px'],
title:["出库",'font-size:25px;'],
content:$("#out_html").html(),
success:function () {
$("#out_id").val(data.id)
$("#out_name").val(data.name)
$("#out_model").val(data.model)
$("#out_factory").val(data.factory)
$("#out_type").val(data.type)
$("#out_process").val(data.process)
$("#out_number").val(data.number)
get_names("operator_names","out_people");
form.render()
}
})
}else if (obj.event ==='edit') {
layer.open({
type: 1,
area: ['380px', '580px'],
title:["编辑库存信息",'font-size:25px;'],
content:$("#edit_html").html(),
success:function () {
$("#edit_id").val(data.id)
$("#edit_name").val(data.name)
$("#edit_model").val(data.model)
$("#edit_factory").val(data.factory)
$("#edit_type").val(data.type)
$("#edit_process").val(data.process)
$("#edit_price").val(data.price)
$("#edit_safenumber").val(data.safenumber)
form.render()
}
})
}
});
var active = {
reload: function(){
var search_process = $('#search_process');
var search_name = $('#search_name');
var search_model = $('#search_model');
//执行重载
table.reload('goods_tablerender', {
<!-- page: {-->
<!-- curr: 1 //重新从第 1 页开始-->
<!-- },-->
where: {
search_process: search_process.val(),
search_name: search_name.val(),
search_model: search_model.val()
}
}, 'data');
}
};
form.on('select(search_type)', function() {
if ($("#search_type").val() == "激励环") {
get_names("jlh_processes_names", "search_process");
} else if ($("#search_type").val() == "壳体") {
get_names("kt_processes_names", "search_process")
} else if ($("#search_type").val() == "工具") {
get_names("tool_names", "search_process")
} else if ($("#search_type").val() == "其它") {
get_names("other_names", "search_process")
} else {
layer.msg("种类未选中")
}
});
form.on('select(add_type)', function() {
if ($("#add_type").val() == "激励环") {
get_names("jlh_processes_names", "add_process");
} else if ($("#add_type").val() == "壳体") {
get_names("kt_processes_names", "add_process")
} else if ($("#add_type").val() == "工具") {
get_names("tool_names", "add_process")
} else if ($("#add_type").val() == "其它") {
get_names("other_names", "add_process")
} else {
layer.msg("种类未选中")
}
});
form.on('select(edit_type)', function() {
if ($("#edit_type").val() == "激励环") {
get_names("jlh_processes_names", "edit_process");
} else if ($("#edit_type").val() == "壳体") {
get_names("kt_processes_names", "edit_process")
} else if ($("#edit_type").val() == "工具") {
get_names("tool_names", "edit_process")
} else if ($("#edit_type").val() == "其它") {
get_names("other_names", "edit_process")
} else {
layer.msg("种类未选中")
}
});
$('#searchbt').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('#addbt').on('click', function(){
layer.open({
type: 1,
area: ['380px', '500px'],
title:['添加库存品类','font-size:25px;'],
content:$("#add_html").html(),
success:function(){
form.render();
}
})
});
form.verify({
zero: [
/^[0.]+$/
,'当前仍有库存,请出库后删除!'
],
bigger:[
/^[1-9]+[0-9]*$/
,'出入库数量必须大于0'
],
more:function (value){ //value表单的值、item表单的DOM对象
if(Number(value)>Number($("#out_number").val())){
return '出库数量不能大于目前库存!';
}
}
});
form.on('submit(edit_submit)', function(data){
layer.closeAll();
$.get("/op/edit", $("#edit_form").serialize() );
$("#searchbt").click();
return false;
});
form.on('submit(add_submit)', function(data){
layer.closeAll();
$.get("/op/add", $("#add_form").serialize());
$("#searchbt").click();
return false;
});
form.on('submit(del_submit)', function(data){
layer.closeAll();
$.get("/op/del", $("#del_form").serialize());
$("#searchbt").click();
return false;
});
form.on('submit(in_submit)', function(data){
layer.closeAll();
$.get("/op/in", $("#in_form").serialize());
$("#searchbt").click();
return false;
});
form.on('submit(out_submit)', function(data){
layer.closeAll();
$.get("/op/out", $("#out_form").serialize());
$("#searchbt").click();
return false;
});
});
</script>
</body>
</html>