一个简易的进销存管理系统
一个简易的进销存管理系统
程序代码：
<html>
<head>
<meta charset="utf-8">
<style>
/* youchuo */
.bootstrap-frm {
width: 300px;
position: fixed;
top:120px;
left:20px;
margin-left:auto;
margin-right:auto;
max-width: 600px;
background: #FFF;
padding: 20px 30px 20px 30px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #DDD;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.bootstrap-frm input[type='text'],input[type='date'], select{
border: 1px solid #CCC;
color: #888;
height: 20px;
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 5px 0px 5px 5px;
width: 70%;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background: #FFF;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height:15px;
}
.button {
background: #FFF;
border: 1px solid #CCC;
padding: 10px 25px 10px 25px;
color: #333;
border-radius: 4px;
}
.button:hover {
color: #333;
background-color: #EBEBEB;
border-color: #ADADAD;
}
body{
margin: 6px;
padding: 0;
font-size: 12px;
font-family: tahoma, arial;
background: #fff;
}
.odd{
background: #fff;
}
.even{
background: #eee;
}
div{
width: 100%;
border: none; ;
}
.datagrid2{
width: 100%;
border-collapse: collapse;
}
.thead{
text-align: left;
background: #9cf;
padding: 3px;
border: 1px #333 solid;
}
td{
padding: 3px;
border: none;
border:1px #333 solid;
}
tr:hover{
background: #9cf;
}
.menu {
border-collapse: collapse;
position: fixed;
width: 500px;
left: 500px;
top: 50px;
}
</style>
</head>
<body>
<h1>简易仓库管理系统</h1>
<input type="button" id=101 value="记录单"/>
<input type="button" id=102 value="库存报表"/>
<input type="button" id=103 value="改信息"/>
<input type="button" id=104 value="改物料"/>
<input type="button" id=105 value="改出入库"/>
<input type="button" id=106 value="改单据"/>
<div id="s1">
<table id=5 class="menu">
</table>
<div id=9 class="bootstrap-frm">
记录单号<select id=901 /></select><br />
日期<input type="date" id=902 /><br />
对象id<input type="text" id=903 /><br />
<table id=1 class="datagrid2">
<tr class="thead"><td>编码</td><td>数量</td></tr>
</table>
<input type="button" class="button" id=911 value="+"/>
<input type="button" class="button" id=912 value="-"/>
<input type="button" class="button" id=913 value="保存"/>
</div>
</div>
<div id="s0" border=0>
<table id=0 class="datagrid2">
</table>
<div id="s01">
<input type="button" class="button" id=9111 value="+"/>
<input type="button" class="button" id=9121 value="-"/>
<input type="button" class="button" id=9131 value="修改"/>
</div>
</div>
</body>
<script>
var $=function(a){return document.getElementById(a)}
var nowid;
$(902).valueAsDate = new Date();
var 数据库=openDatabase('MyData','1.0版','我的数据库描述',102400);
数据库.transaction(function(数据库事务){
数据库事务.executeSql("CREATE TABLE IF NOT EXISTS 信息 as select '公司001' as 对象id,'本公司' as 类别,'初始库存' as 内容;",[]);
数据库事务.executeSql("CREATE TABLE IF NOT EXISTS 物料 as select '组件001' as 编码,'新物料' as 名称,'新规格' as 规格,'新单位' as 单位,'新单价' as 单价;",[]);
数据库事务.executeSql("CREATE TABLE IF NOT EXISTS 出入库 as select '入库10001' as 单据编号,'组件001' as 编码,'0' as 数量;",[]);
数据库事务.executeSql("CREATE TABLE IF NOT EXISTS 单据 as select '入库10001' as 单据编号,'2017-01-01' as 日期,'公司001' as 对象id;",[]);
数据库事务.executeSql("create view IF NOT EXISTS 库存 as with c as (select 单据编号,出入库.编码,名称,规格,单位,单价,数量 from 出入库 join 物料 using(编码)),d as (select 编码,名称,规格,单位,单价,sum(case when 单据编号 like '入库%' then 数量 else 0 end) as 入库数量,sum(case when 单据编号 like '出库%' then 数量 else 0 end) as 出库数量 from c group by 编码),e as (select *,入库数量-出库数量 as 结存数量,round((入库数量-出库数量)*单价,2) as 结存金额 from d) select * from e union all select '汇总','','','','','','','',round(sum(结存金额),2) from e;",[]);
});
$(911).onclick=function(){
var tr=$(1).insertRow($(1).rows.length);
tr.className=($(1).rows.length%2==0)?"odd":"even";
for (var i=0;i<$(1).rows[0].cells.length;i++){
var xxx=tr.insertCell(i);
xxx.contentEditable=true;
if(i==0){
xxx.id=2000+$(1).rows.length;
xxx.onkeyup=function(){
查询("select * from 物料 where 编码 like '%"+this.innerText+"%';",5,false,true);
}
xxx.onclick=function(){
nowid=this.id;
}
}
else{
xxx.onkeypress=function(event){
var keychar = String.fromCharCode(event.which);
var numcheck = /\d/;
return numcheck.test(keychar);
}
}
}
}
$(912).onclick=function(){
if($(1).rows.length>1) $(1).deleteRow($(1).rows.length-1);
}
$(913).onclick=function(){
数据库.transaction(function(数据库事务){
数据库事务.executeSql('INSERT INTO 单据 VALUES(?,?,?)',[$(901).value,$(902).value,$(903).value]);
for(var i=1;i<$(1).rows.length;i++){
var ss=$(1).rows[i].cells;
var tt=[$(901).value];
for(var j=0;j<ss.length;j++) tt.push(ss[j].innerText);
数据库事务.executeSql('INSERT INTO 出入库 VALUES(?,?,?)',tt);
}
下拉列表("with a as (select case when max(rowid) is null then 10001 else max(rowid)+10001 end as 编号 from 单据) select '入库'||编号 from a union all select '出库'||编号 from a;",901);
$(1).innerHTML='<tr class="thead"><td>编码</td><td>数量</td></tr>';
});
}
$(9111).onclick=function(){
var tr=$(0).insertRow($(0).rows.length);
for (var i=0;i<$(0).rows[0].cells.length;i++) tr.insertCell(i).contentEditable=true;
}
$(9121).onclick=function(){
if($(0).rows.length>1) $(0).deleteRow($(0).rows.length-1);
}
var 查询=function(表名,id,change,input){
var sql=表名.length>10?表名:"select * from "+表名+";";
var thisid=id || 0;
var thischange=change || false;
var thisinput=input || false;
if(!thisinput){
$("s1").hidden=true;
$("s0").hidden=false;
$("s01").hidden=true;
}
数据库.transaction(function(数据库事务){
数据库事务.executeSql(sql,[],function(数据库事务,查询结果集){
$(thisid).innerHTML="";
if(查询结果集.rows.length>0){
var tr=$(thisid).insertRow($(thisid).rows.length);
tr.className='thead';
var pp=0;
for (var i in 查询结果集.rows.item(0)) tr.insertCell(pp++).innerHTML=i;
for (var i=0;i<查询结果集.rows.length;i++){
var tr=$(thisid).insertRow($(thisid).rows.length);
if(i<查询结果集.rows.length-1){
tr.className=(i%2!=0?'even':'odd');
}
else{
tr.className='thead';
}
var v=查询结果集.rows.item(i);
var pp=0;
for(var j in v){
var xxx=tr.insertCell(pp++);
if(thischange) xxx.contentEditable=true;
if(thisinput && pp==1) xxx.onclick=function(){
if(nowid>2000){
$(nowid).innerHTML=this.innerHTML;
}
else{
$(nowid).value=this.innerHTML;
}
}
xxx.innerHTML=v[j];
}
}
}
});
});
if(thischange){
$("s01").hidden=false;
$(9131).onclick=function(){
数据库.transaction(function(数据库事务){
var sql='delete from '+表名+';';
数据库事务.executeSql(sql,[]);
for(var i=1;i<$(0).rows.length;i++){
var ss=$(0).rows[i].cells;
var tt=[];
for(var j=0;j<ss.length;j++) tt.push(ss[j].innerText);
var mysql="";
for(var x=0;x<tt.length;x++) mysql+='?,';
mysql=mysql.slice(0,-1);
mysql='INSERT INTO '+表名+' VALUES('+mysql+')';
数据库事务.executeSql(mysql,tt);
}
})
}
}
}
var 下拉列表=function(sql,id){
数据库.transaction(function(数据库事务){
数据库事务.executeSql(sql,[],function(数据库事务,查询结果集){
if(查询结果集.rows.length>0){
var txt="";
for (var i=0;i<查询结果集.rows.length;i++){
var v=查询结果集.rows.item(i);
for(var j in v){
txt+="<option value='"+v[j]+"'>"+v[j]+"</option>";
}
}
$(id).innerHTML=txt;
}
});
});
}
下拉列表("with a as (select case when max(rowid) is null then 10001 else max(rowid)+10001 end as 编号 from 单据) select '入库'||编号 from a union all select '出库'||编号 from a;",901);
$("s1").hidden=true;
$("s0").hidden=true;
$(903).onkeyup=function(){
查询("select * from 信息 where 对象id like '%"+this.value+"%';",5,false,true);
}
$(903).onclick=function(){
nowid=this.id;
}
$(101).onclick=function(){
$("s1").hidden=false;
$("s0").hidden=true;
}
$(102).onclick=function(){
查询("库存");
}
$(103).onclick=function(){
查询("信息",0,true);
}
$(104).onclick=function(){
查询("物料",0,true);
}
$(105).onclick=function(){
查询("出入库",0,true);
}
$(106).onclick=function(){
查询("单据",0,true);
}
</script>
</html>
