<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="tou">
<input id="tou" type="text" :value="tou" />
</div>
<div class="two">
<div style="width: 50%;float: left; ">
日期：{{riqi}}
</div>
<div style="width: 50%;float: left;">
单号：{{danhao}}
</div>
</div>
<div class="k">
<div class="k2 w5">名称</div>
<div class="k2 w24">数量</div>
<div class="k2 w24 nob">单价</div>
<div v-for="(item,index) in arr" :key="index">
<div class="k2 w5">
<input class="shuru" type="text" :value="item.shangpin" ref="getValue0"
@input="input($event,index,0)" />
</div>
<div class="k2 w24">
<input class="shuru" type="text" :value="item.shuliang" ref="getValue1"
@input="input($event,index,1)" />
</div>
<div class="k2 w24 nob">
<input class="shuru" type="text" :value="item.danjia" ref="getValue2"
@keyup="show($event,index)" @input="input($event,index,2)" />
</div>
</div>
<div class="k2 w5 nob3">合计</div>
<div class="k2 w49 nob2">{{heji}}</div>
</div>
<div class="noprint bottom">
<button @click="jisuan()"
style="width: 14%; margin: 0 auto; height: 42px; margin-left: 5%; margin-right: 5%; background-color:rebeccapurple; color: #fff;border: none; border-radius: 5px;">计算</button>
<button @click="tijiao()"
style="width: 14%; margin: 0 auto; height: 42px; margin-left: 5%; margin-right: 5%; background-color: yellowgreen; color: #fff;border: none; border-radius: 5px;">保存</button>
<button @click="printme()"
style="width: 14%; margin: 0 auto; height: 42px; margin-left: 5%; margin-right: 5%; background-color: green; color: #fff;border: none; border-radius: 5px;">打印</button>
<button @click="chakan()"
style="width: 14%; margin: 0 auto; height: 42px; margin-left: 5%; margin-right: 5%; background-color: forestgreen; color: #fff;border: none; border-radius: 5px;">查看</button>
<div style="text-align: center; line-height: 24px;">
<br>
1.输入完单价按回车会新增一行<br>
2.点击最后一行的单价按shift键删除这行<br>
3.输入完毕或者修改某项后点 计算->保存->打印
</div>
</div>
</div>
<script>
//console.log(axios);
const App = {
data() {
return {
counter: 20,
tou: '前程阀门货单',
riqi: '',
danhao: '',
shangpin: '',
shuliang: '',
danjia: '',
arr: [{
shangpin: '',
shuliang: '',
danjia: ''
}],
heji: 0,
goon: false
}
},
created() {
this.getNowDate();
var a = new Date().getTime(); //获取到当前时间戳
var b = new Date(a); //创建一个指定的日期对象
this.nowDate(b);
},
methods: {
tijiao() {
if (this.heji == '' || this.heji == 0 || isNaN(this.heji)) {
alert('合计为空，不可操作')
return
}
axios({
method: 'POST',
url: 'http://jxc.zbyuntuo.com/public/index.php/baocun',
data: {
date: this.riqi,
member: this.danhao,
sum: this.heji,
content: this.arr
},
}).then(function(res) {
if (res.data == 200) {
alert('保存成功')
}
})
},
jisuan() {
var that = this
that.arr.forEach(function(value) {
let hj = 0
if (JSON.parse(JSON.stringify(value)).shuliang && JSON.parse(JSON.stringify(value))
.danjia) {
let hj = JSON.parse(JSON.stringify(value)).shuliang * JSON.parse(JSON.stringify(
value)).danjia
//console.log(hj)
that.heji = that.heji + hj
} else {
let hj = 0
}
return
//console.log(hj)
});
},
chakan(){
window.location.href="chakan.html"
},
printme() {
if (this.heji == '' || this.heji == 0 || isNaN(this.heji)) {
alert('合计为空，不可操作')
return
}
// if(this.goon == false){
// alert('最后一个单价，回车后才可以保存')
// return
// }
window.print();
},
show: function(ev, i) {
if (ev.keyCode == 13) {
//console.log(this.arr[i].shangpin)
if (this.$refs.getValue0.value || this.$refs.getValue1.value || this.$refs.getValue2.value) {
this.arr[i].shangpin = this.$refs.getValue0.value
this.arr[i].shuliang = this.$refs.getValue1.value
this.arr[i].danjia = this.$refs.getValue2.value
//this.heji = this.heji + this.arr[i].shuliang * this.arr[i].danjia
this.heji = 0
this.arr.push({
shangpin: '',
shuliang: '',
danjia: ''
})
this.goon = true
}
}
if (ev.keyCode == 16) {
this.heji = 0
//this.heji = this.heji - this.arr[i].shuliang * this.arr[i].danjia
this.arr.splice(i, 1)
}
},
input(event, index, n) {
this.goon = false
//console.log(event.currentTarget.value) 痛苦 忘记了
if (n == 0) {
this.arr[index].shangpin = event.currentTarget.value
}
if (n == 1) {
this.heji = 0
this.arr[index].shuliang = event.currentTarget.value
}
if (n == 2) {
this.heji = 0
this.arr[index].danjia = event.currentTarget.value
}
},
getNowDate() {
const timeOne = new Date()
const year = timeOne.getFullYear()
let month = timeOne.getMonth() + 1
let day = timeOne.getDate()
month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
const NOW_MONTHS_AGO = `${year}-${month}-${day}`
this.riqi = NOW_MONTHS_AGO
},
nowDate(now) {
var year = now.getFullYear(); //年份
var month = now.getMonth() + 1; //月份（0-11）
var date = now.getDate(); //天数（1到31）
var hour = now.getHours(); //小时数（0到23）
var minute = now.getMinutes(); //分钟数（0到59）
var second = now.getSeconds(); //秒数（0到59）
this.danhao = 'QCFM' + year + '' + month + '' + date + '' + hour + '' + minute + '' + second
}
},
};
Vue.createApp(App).mount('#app');
</script>
</body>
<style media="print" type="text/css">
.noprint {
visibility: hidden
}
</style>
<style>
.bottom {
margin-top: 20px;
}
#tou,
.tou {
text-align: center;
font-size: 20px;
line-height: 42px;
margin-bottom: 10px;
}
.two {
height: 32px;
}
.k {
border: 1px solid #000000;
height: auto;
overflow: hidden;
}
.k2 {
float: left;
width: 33%;
text-align: center;
border-right: 1px solid #000;
height: 32px;
line-height: 32px;
border-bottom: 1px solid #000;
font-size: 14px;
}
.nob {
border-right: none;
}
.nob2 {
border-right: none;
border-bottom: none;
}
.nob3 {
border-bottom: none;
}
.w5 {
width: 49%;
margin-left: 1%;
}
.w49 {
width: 49%;
}
#shuliang {
text-align: center;
}
#danjia {
text-align: center;
}
.w24 {
width: 24.5%;
}
.shuru {
font-size: 12px;
text-align: center;
}
input {
border: none;
font-size: 14px;
width: 95%;
margin: 0 auto;
margin-top: 1px;
margin-bottom: 1px;
height: 26px;
line-height: 32px;
}
</style>
