|
|
@@ -94,6 +94,14 @@
|
|
|
color: #999999;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+ .flex{display: flex;align-items: center;}
|
|
|
+ .flex-center{display: flex;align-items: center;justify-content: center;}
|
|
|
+ .flex-center{display: flex;align-items: center;justify-content: space-between;}
|
|
|
+ .print-html {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 9990px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
@@ -127,7 +135,9 @@
|
|
|
<div style="display: inline-block;" class="allPrice">总数量: {{tableData.length}}</div>
|
|
|
<div style="display: inline-block;" class="allPrice">
|
|
|
<el-checkbox v-model="checked"></el-checkbox>
|
|
|
- 结账后自动打印2份
|
|
|
+ 结账后自动打印
|
|
|
+ <el-input style="width: 50px;" type="text" v-model="printAmount"></el-input></el-form-item>
|
|
|
+ 份
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog title="选择花材" v-if="isSelectNumber" :visible.sync="isSelectNumber" width="30%" center>
|
|
|
@@ -151,12 +161,12 @@
|
|
|
<div class="">
|
|
|
<div class="accounts-list">
|
|
|
客户
|
|
|
- <el-select style="width: 80%" v-model="value" filterable placeholder="请选择">
|
|
|
+ <el-select ref="selectShopListInput" style="width: 80%" v-model="selectShopListVal" filterable placeholder="请选择" :visible-change="true">
|
|
|
<el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
+ v-for="item in allShopList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.shopName"
|
|
|
+ :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
@@ -170,7 +180,7 @@
|
|
|
<div class="accounts-list" v-if="type=='配送'">
|
|
|
运费
|
|
|
<div class="accounts-center">
|
|
|
- <el-input placeholder="留空表示免运费" v-model="input" :disabled="true"></el-input>
|
|
|
+ <el-input placeholder="请填写运费,留空免运费" v-model="freight"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="accounts-list">
|
|
|
@@ -186,34 +196,79 @@
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
:rows="2"
|
|
|
- placeholder="请输入内容">
|
|
|
+ placeholder="请输入内容" v-model="remark">
|
|
|
</el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="accounts-list">
|
|
|
{{ payType }}
|
|
|
<div class="accounts-center">
|
|
|
- ¥5266.00
|
|
|
+ ¥{{ totalMoney }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="accounts-list">
|
|
|
<span></span>
|
|
|
<div class="accounts-center">
|
|
|
- <el-button>取消(Esc)</el-button>
|
|
|
- <el-button type="primary">确认(Enter)</el-button>
|
|
|
+ <el-button @click="isAccounts = false">取消(Esc)</el-button>
|
|
|
+ <el-button type="primary" @click="createOrder">确认(Ctrl+Enter)</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p style="text-align: center;color: #999999;">按Tab切到下一个,按空格选中</p>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 配送单 -->
|
|
|
+ <div class="print-html">
|
|
|
+
|
|
|
+ <table border="0" width="780" style="border:solid 1px #fff;border-collapse:collapse">
|
|
|
+ <tr>
|
|
|
+ <td style="padding: 10px;width: 260px;">客户:{{orderMsg.customName}}</td>
|
|
|
+ <td style="padding: 10px;width: 260px;">单号:{{orderMsg.orderSn}}</td>
|
|
|
+ <td style="padding: 10px;width: 260px;">售日期:{{orderMsg.deadline}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table border="1" width="780" style="border:solid 1px black;border-collapse:collapse">
|
|
|
+ <tr>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">序号</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">名称</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">单位</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">数量</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">单价</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">金额</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">备注</td>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(res,i) in printSelectList">
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">{{ i+1 }}</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">{{ res.name }}</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">{{ res.unit }}</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">{{ res.count }}</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">{{ res.price }}</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;">{{ res.money }}</td>
|
|
|
+ <td style="padding: 10px;width: 100px;text-align: center;"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td style="padding: 10px;width: 100px;">其他说明:</td>
|
|
|
+ <td style="padding: 10px;width: 100px;" colspan="6">{{remark}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table border="0" width="780" style="border:solid 1px #fff;border-collapse:collapse">
|
|
|
+ <tr >
|
|
|
+ <td style="padding: 10px;width: 260px;">开单员:{{orderMsg.shopAdminName}}</td>
|
|
|
+ <td style="padding: 10px;width: 260px;">配送员</td>
|
|
|
+ <td style="padding: 10px;width: 260px;">打印时间:{{todays(1)}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getLodop } from '@/utils/lodop';
|
|
|
export default {
|
|
|
name: 'order-add',
|
|
|
data() {
|
|
|
return {
|
|
|
+ printAmount:1,
|
|
|
checked:true,
|
|
|
type:'自提',//取货方式
|
|
|
payType:'欠款',//结算方式
|
|
|
@@ -231,7 +286,13 @@ export default {
|
|
|
seekListIndex:0,
|
|
|
seekList:[],//搜索展示的列表
|
|
|
tableDataIndex:0,
|
|
|
- tableData: []// {index:'001',name:'测试1',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
|
|
|
+ tableData: [],// {index:'001',name:'测试1',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
|
|
|
+ allShopList:[],
|
|
|
+ selectShopListVal:'',
|
|
|
+ freight:'',//运费
|
|
|
+ remark:'',//备注
|
|
|
+ printSelectList:'',
|
|
|
+ orderMsg:'',
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -244,8 +305,16 @@ export default {
|
|
|
this.getAllList()
|
|
|
let self = this;
|
|
|
document.onkeydown=function(e) {
|
|
|
+ if(e && e.keyCode==13 && e.ctrlKey ){ //同时按下ctrl+enter
|
|
|
+ if(self.isAccounts){
|
|
|
+ self.isAccounts = false
|
|
|
+ self.createOrder();
|
|
|
+ console.log('ctrl+enter')
|
|
|
+ }
|
|
|
+ //要做的事情
|
|
|
+ }
|
|
|
if(e && e.keyCode==81 && e.ctrlKey ){ //同时按下ctrl+Q
|
|
|
- // console.log('ctrl+Q')
|
|
|
+ console.log('ctrl+Q')
|
|
|
self.$refs['commodityInput'].focus();//选中
|
|
|
//要做的事情
|
|
|
}
|
|
|
@@ -276,6 +345,10 @@ export default {
|
|
|
//要做的事情
|
|
|
}
|
|
|
if( e && e.keyCode==27 ){ //按下esc
|
|
|
+ if(self.isAccounts){
|
|
|
+ self.isAccounts = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
self.escFun();
|
|
|
//要做的事情
|
|
|
}
|
|
|
@@ -294,21 +367,100 @@ export default {
|
|
|
//要做的事情
|
|
|
}
|
|
|
if( e && e.keyCode==120 ){ //按下f9
|
|
|
- console.log('f9')
|
|
|
- alert('f9')
|
|
|
- // self.escFun();
|
|
|
+ self.orderMsg = '';
|
|
|
+ if(self.$util.isEmpty(self.tableData)){
|
|
|
+ self.$message({message: '请先选择花材!',type: 'warning'});
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ self.isAccounts = true;
|
|
|
+ if(self.$util.isEmpty(self.allShopList)){
|
|
|
+ self.getShopAll();
|
|
|
+ }else{
|
|
|
+ self.$nextTick(()=>{
|
|
|
+ self.$refs['selectShopListInput'].focus();
|
|
|
+ })
|
|
|
+ }
|
|
|
//要做的事情
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ todays(type) {
|
|
|
+ var myDate = new Date();
|
|
|
+ let todaty = '';
|
|
|
+ if(type==1){
|
|
|
+ todaty = myDate.getFullYear()+'-'+parseInt(myDate.getMonth()+1)+'-'+myDate.getDate()+' '+myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds()
|
|
|
+ }else if(type=='time'){
|
|
|
+ todaty = myDate.getHours()+':'+myDate.getMinutes();
|
|
|
+ }else{
|
|
|
+ // todaty = myDate.getFullYear()+'-'+parseInt(myDate.getMonth()+1)+'-'+myDate.getDate()
|
|
|
+ let getDate = myDate.getDate()>9?myDate.getDate():'0'+myDate.getDate()
|
|
|
+ let getDateMonth = parseInt(myDate.getMonth()+1)>9?parseInt(myDate.getMonth()+1):'0'+parseInt(myDate.getMonth()+1)
|
|
|
+ todaty = myDate.getFullYear()+'-'+getDateMonth+'-'+getDate
|
|
|
+ }
|
|
|
+ return todaty
|
|
|
+ // console.log(myDate.getFullYear())
|
|
|
+ },
|
|
|
/**拿到所有数据*/
|
|
|
getAllList(){
|
|
|
this.$service.product.list().then(res => {
|
|
|
this.allList = res.list;
|
|
|
});
|
|
|
},
|
|
|
+ /**获取客户列表**/
|
|
|
+ getShopAll(){
|
|
|
+ this.$service.shop.shopAll().then(res => {
|
|
|
+ this.allShopList = res;
|
|
|
+ this.$refs['selectShopListInput'].focus();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**生成订单**/
|
|
|
+ createOrder(){
|
|
|
+ const product = this.tableData.map(ele => {
|
|
|
+ return { productId: ele.id, bigNum: ele.big, smallNum: ele.small };
|
|
|
+ });
|
|
|
+ let parameter = {
|
|
|
+ customId:this.selectShopListVal,
|
|
|
+ getType:this.type=='自提'?1:2,
|
|
|
+ sendCost:this.freight,
|
|
|
+ product:JSON.stringify(product),
|
|
|
+ remark:this.remark,
|
|
|
+ clearType:this.payType='欠款'?1:2,
|
|
|
+ }
|
|
|
+ this.$service.order.orderCreate(parameter).then(res => {
|
|
|
+ this.orderMsg = res;
|
|
|
+ this.printSelectList = this.tableData;
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.tableData = [];
|
|
|
+ this.isAccounts = false;
|
|
|
+ this.escFun();
|
|
|
+ })
|
|
|
+ this.printOrder();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //打印
|
|
|
+ printOrder() {
|
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let LODOP = getLodop();
|
|
|
+
|
|
|
+ LODOP.SET_PRINT_STYLE('FontSize', 20);
|
|
|
+ LODOP.SET_PRINT_STYLE('Bold', 1);
|
|
|
+ LODOP.ADD_PRINT_TEXT(150, 10, 790, 30, `纯彩花艺销售单`);
|
|
|
+ LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
|
|
|
+ LODOP.SET_PRINT_STYLE('FontSize', 12);
|
|
|
+
|
|
|
+ LODOP.ADD_PRINT_HTM(
|
|
|
+ 200,
|
|
|
+ 10,
|
|
|
+ 790,
|
|
|
+ 600,
|
|
|
+ document.querySelector('.print-html').innerHTML
|
|
|
+ );
|
|
|
+ LODOP.PREVIEW();
|
|
|
+ // LODOP.PRINT();
|
|
|
+ });
|
|
|
+ },
|
|
|
/** 搜索--按键回车*/
|
|
|
async enterSeekFun(){
|
|
|
if(this.seekVal==''){this.isSeek = false;return;}
|
|
|
@@ -369,6 +521,7 @@ export default {
|
|
|
this.tableData.push(
|
|
|
{
|
|
|
index:'001',
|
|
|
+ id:selectList.id,
|
|
|
name:selectList.itemName,
|
|
|
lv:selectList.rank,
|
|
|
unit:selectList.bigUnit+'/'+selectList.smallUnit,
|