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

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>