pc开单

ghs/src/main.js

@@ -26,13 +26,15 @@ Vue.use(ElementUI);
 Vue.config.productionTip = false;
 Vue.config.keyCodes = {
 	// camelCase 不可用
-	keyAdd: 107,
-	keyMinus: 107,
-	keyQ: 81,
+	keyAdd: 107,//+
+	keyMinus: 107,//-
+	keyQ: 81,//Q
+	keyBackspace: 8,//回退
 	// 取而代之的是 kebab-case 且用双引号括起来
 	"key-add": 107,
 	"key-minus": 109,
 	"key-q": 81,
+	"key-backspace": 8,
 }
 
 const conf = {

ghs/src/views/order/add.vue

@@ -1,5 +1,5 @@
 <style lang="scss">
-.el-dialog__title{color: #fff}
+//.el-dialog__title{color: #fff}
 .tableBox {
   th {
     padding: 0 !important;
@@ -77,6 +77,17 @@
     }
 
   }
+  .accounts-list{
+    width: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding-bottom: 20px;
+    .accounts-center{
+      width: 80%;
+    }
+  }
   .remark{
     margin-top: 20px;
     text-align: center;
@@ -88,7 +99,7 @@
 <template>
   <div class="app-list-content">
     <div class="left_box">
-      <p class="tor">全屏：F11 结账：F9 改价：F8 整单折扣：F7 数量加：+ 数量减：- 删除：Delete 删除所有：Page Down 聚焦至商品输入框：Ctrl + q </p>
+      <p class="tor">全屏：F11 结账：F9 改价：F8 数量加：+ 数量减：- 删除：Delete 删除所有：Page Down 聚焦至商品输入框：Ctrl + q </p>
       <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%" border :header-cell-style="{background:'#fdfdfd', color: '#666', fontWeight: 400}" class="tableBox active">
         <el-table-column prop="index" label="编号" width="120" align="center"></el-table-column>
         <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>
@@ -110,35 +121,90 @@
     <div class="bottom_input">
       <el-form ref="form" label-width="80px" style="display: inline-block">
         <el-form-item label="花材">
-<!--          <el-input style="width: 200px"-->
-<!--                    @keyup.key-add.native="addFun"-->
-<!--                    @keyup.key-minus.native="minusFun"-->
-<!--                    @keyup.up.native="upFun()"-->
-<!--                    @keyup.down.native="downFun()"-->
-<!--                    @keyup.enter.native="enterFun()"-->
-<!--                    type="text" ref="commodityInput" v-model="seekVal"></el-input>-->
-<!--        </el-form-item>-->
-        <el-input style="width: 200px" @keyup.enter.native="enterFun()" type="text" ref="commodityInput" v-model="seekVal"></el-input></el-form-item>
+        <el-input style="width: 200px" @keyup.enter.native="enterSeekFun()" type="text" ref="commodityInput" v-model="seekVal"></el-input></el-form-item>
       </el-form>
-      <div style="display: inline-block;" class="allPrice">总金额: 123</div>
+      <div style="display: inline-block;" class="allPrice">总金额: {{ totalMoney }}</div>
       <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份
       </div>
     </div>
-    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
+    <el-dialog title="选择花材" v-if="isSelectNumber" :visible.sync="isSelectNumber" width="30%" center>
       <div class="el-dialog-center">
-        <span>粉佳人</span>
-        <el-input style="width: 150px;margin-left: 20px" type="text" ref="commodityInput" v-model="seekVal"></el-input></el-form-item>
-        <span>扎</span>
-        <el-input style="width: 150px;margin-left: 20px" type="text" ref="commodityInput" v-model="seekVal"></el-input></el-form-item>
-        <span>支</span>
+        <span>{{ seekList[seekListIndex].itemName }}</span>
+        <el-input ref="bigInput" style="width: 130px;margin-left: 15px" placeholder="0" @keyup.key-backspace.native="backspaceFun('big')" @keyup.enter.native="enterFun()" type="number" v-model="big"></el-input></el-form-item>
+        <span>{{seekList[seekListIndex].bigUnit}}</span>
+        <el-input style="width: 130px;margin-left: 15px" placeholder="0" @keyup.key-backspace.native="backspaceFun('small')" @keyup.enter.native="enterFun()" type="number" v-model="small"></el-input></el-form-item>
+        <span>{{ seekList[seekListIndex].smallUnit }}</span>
       </div>
       <div class="remark">Enter确定 数字键 改数量，Backspace 清0，Enter 确定，Esc 取消</div>
-<!--    <el-button @click="centerDialogVisible = false">取 消</el-button>-->
-<!--    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>-->
+    </el-dialog>
+
+    <el-dialog title="改价" v-if="isAmendPrice" :visible.sync="isAmendPrice" width="30%" center>
+      <div class="el-dialog-center">
+        <el-input ref="priceInput" style="width: 130px;margin-left: 15px" type="number" @keyup.enter.native="amendPrice" v-model="priceAmend"></el-input></el-form-item>
+      </div>
+    </el-dialog>
 
+    <el-dialog title="结账" v-if="isAccounts" :visible.sync="isAccounts" width="30%" center>
+      <div class="">
+        <div class="accounts-list">
+          客户
+          <el-select style="width: 80%" v-model="value" filterable placeholder="请选择">
+            <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="accounts-list">
+          取货
+          <div class="accounts-center">
+            <el-button :type="type=='自提'?'primary':''" @keyup.enter.native="type='自提'" @click="type='自提'">自提</el-button>
+            <el-button :type="type=='配送'?'primary':''" @keyup.enter.native="type='配送'" @click="type='配送'">配送</el-button>
+          </div>
+        </div>
+        <div class="accounts-list" v-if="type=='配送'">
+          运费
+          <div class="accounts-center">
+            <el-input placeholder="留空表示免运费" v-model="input" :disabled="true"></el-input>
+          </div>
+        </div>
+        <div class="accounts-list">
+          结算方式
+          <div class="accounts-center">
+            <el-button :type="payType=='欠款'?'primary':''" @keyup.enter.native="payType='欠款'" @click="payType='欠款'">欠款</el-button>
+            <el-button :type="payType=='已收款'?'primary':''" @keyup.enter.native="payType='已收款'" @click="payType='已收款'">已收款</el-button>
+          </div>
+        </div>
+        <div class="accounts-list">
+          备注
+          <div class="accounts-center">
+            <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容">
+            </el-input>
+          </div>
+        </div>
+        <div class="accounts-list">
+          {{ payType }}
+          <div class="accounts-center">
+            ￥5266.00
+          </div>
+        </div>
+        <div class="accounts-list">
+          <span></span>
+          <div class="accounts-center">
+            <el-button>取消（Esc）</el-button>
+            <el-button type="primary">确认（Enter）</el-button>
+          </div>
+        </div>
+        <p style="text-align: center;color: #999999;">按Tab切到下一个，按空格选中</p>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -148,23 +214,25 @@ export default {
   name: 'order-add',
   data() {
     return {
-      centerDialogVisible:false,
+      checked:true,
+      type:'自提',//取货方式
+      payType:'欠款',//结算方式
+      isSelectNumber:false,//选择扎和支的弹窗
+      isAmendPrice:false,//修改单价弹窗
+      isAccounts:false,//结账弹窗
+      priceAmend:0,//修改单价弹窗
       isSeek:false,
+      big:null,//大单位（扎）
+      small:null,//小单位（支）
+      totalMoney:0,//总价
       allList:'',//所有-可搜索数据
       seekVal:'',//搜索值
       seekOldVal:'',//旧-搜索值（上一次搜索值）
       seekListIndex:0,
       seekList:[],//搜索展示的列表
       tableDataIndex:0,
-      tableData: [
-        {index:'001',name:'测试1',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
-        {index:'002',name:'测试2',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
-        {index:'003',name:'测试3',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
-        {index:'004',name:'测试4',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
-        {index:'005',name:'测试5',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
-        {index:'006',name:'测试6',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
-      ]
-    };
+      tableData: []// {index:'001',name:'测试1',lv:'2',unit:'支',count:'100',price:'50',money:'100'},
+  };
   },
   created() {
     this.$nextTick(()=>{
@@ -176,7 +244,6 @@ export default {
     this.getAllList()
     let self = this;
     document.onkeydown=function(e) {
-      console.log(e)
       if(e && e.keyCode==81 && e.ctrlKey ){   //同时按下ctrl+Q
         // console.log('ctrl+Q')
         self.$refs['commodityInput'].focus();//选中
@@ -192,10 +259,11 @@ export default {
       }
       if( e && e.keyCode==107 ){   //按下+
         console.log('+')
+        self.addSelectBig()
         //要做的事情
       }
       if( e && e.keyCode==109 ){   //按下-
-        console.log('-')
+        self.minusSelectBig()
         //要做的事情
       }
       if( e && e.keyCode==46 ){   //按下delete  删除选中
@@ -207,6 +275,30 @@ export default {
         self.tableData = [];
         //要做的事情
       }
+      if( e && e.keyCode==27 ){   //按下esc
+        self.escFun();
+        //要做的事情
+      }
+      if( e && e.keyCode==119 ){   //按下f8 改价
+        if(self.tableData!=''){
+          self.isAmendPrice = true;
+          self.priceAmend = 0;
+          self.priceAmend = self.tableData[self.tableDataIndex].price;
+          self.$nextTick(()=>{
+            self.$refs['priceInput'].focus();
+          })
+        }
+        // console.log('f8')
+        // alert('f8')
+        // self.escFun();
+        //要做的事情
+      }
+      if( e && e.keyCode==120 ){   //按下f9
+        console.log('f9')
+        alert('f9')
+        // self.escFun();
+        //要做的事情
+      }
     }
   },
   methods: {
@@ -218,13 +310,23 @@ export default {
     },
 
     /** 搜索--按键回车*/
-    async enterFun(){
+    async enterSeekFun(){
       if(this.seekVal==''){this.isSeek = false;return;}
-      if(this.seekVal==this.seekOldVal){
+      if(this.seekVal==this.seekOldVal&&this.seekList!=''){
+        if(Number(this.seekList[this.seekListIndex].stock)==0){
+          this.$message({message: '库存不足',type: 'warning'});
+          return;
+        }
         this.isSeek = false;
+        this.isSelectNumber = true;
+        console.log(this.seekList[this.seekListIndex])
+        this.$nextTick(()=>{
+          this.$refs['bigInput'].focus();
+        })
         console.log('两个值相同')
       }else{
         this.seekList = [];
+        this.seekListIndex = 0;
         console.log('两个不相同，赋值')
         this.seekOldVal = this.seekVal;
         this.isSeek = true;
@@ -241,14 +343,128 @@ export default {
         this.$refs.seekList.setCurrentRow(this.seekList[0]);
       }
     },
-
-    selectList(){
-
+    /** 选择数量--按键回车*/
+    enterFun(){
+      let selectList = this.seekList[this.seekListIndex];
+      let big = this.big;
+      let small = this.small;
+      big==null?Number(0):big;
+      small==null?Number(0):small;
+      console.log(big,small)
+      if(big<=0 && small<=0){
+        this.$message({message: '请先输入数量',type: 'warning'});
+        return;
+      }
+      if(Number(selectList.stock)<Number(big) + Number(small) / Number(selectList.ratio)){
+        this.$message({message: '库存不足',type: 'warning'});
+        return;
+      }
+      // let money = Number(selectList.price) * Number(big) + Number(selectList.price) * Number(small)
+      let money = Number(selectList.price) * (Number(big) + Number(small) / Number(selectList.ratio))
+      for (let i=0;i<this.tableData.length;i++){
+        if(this.tableData[i].name==selectList.itemName){
+          this.tableData.splice(i,1)
+        }
+      }
+        this.tableData.push(
+            {
+              index:'001',
+              name:selectList.itemName,
+              lv:selectList.rank,
+              unit:selectList.bigUnit+'/'+selectList.smallUnit,
+              count:Number(big)+'/'+Number(small),
+              big:Number(big),
+              small:Number(small),
+              ratio:Number(selectList.ratio),
+              stock:Number(selectList.stock),
+              price:selectList.price,
+              money:money
+            }
+        )
+      this.tableDataIndex = this.tableData.length-1;
+      this.$refs.singleTable.setCurrentRow(this.tableData[this.tableData.length-1]);
+      this.$nextTick(()=>{
+        this.big = null;
+        this.small = null;
+      })
+      this.escFun();
     },
+    /**获取已选择的总金额**/
+    getAllTableDataMoney(){
+      let totalMoney = 0;
+      this.tableData.forEach(ele => {
+        totalMoney= totalMoney + ele.money
+      })
+      this.totalMoney = totalMoney;
+    },
+    /**关闭选择扎支弹窗-初始化**/
+    escFun(){
+      this.getAllTableDataMoney();
+      // if(this.isSelectNumber){ }
+      this.isAmendPrice = false;
+      this.seekVal = '';
+        this.seekList = [];
+        this.isSelectNumber = false
+        this.$nextTick(()=>{
+          this.$refs['commodityInput'].focus();
+        })
 
+    },
+    /**清空扎、支值**/
+    backspaceFun(type){
+      switch (type){
+        case 'big':
+          this.big = null;
+        break;
+        case 'small':
+          this.small = null;
+          break;
+      }
 
-
-    tableDataUp(){
+    },
+    /**改价-确定**/
+    amendPrice(){
+      let selectList = this.tableData[this.tableDataIndex];
+      this.tableData[this.tableDataIndex].price = this.priceAmend;
+      let money = Number(selectList.price) * (Number(selectList.big) + Number(selectList.small) / Number(selectList.ratio));
+      this.tableData[this.tableDataIndex].money = money;
+      this.priceAmend = 0;
+      this.escFun();
+    },
+    /**增加数量**/
+    addSelectBig(){
+      let selectList = this.tableData[this.tableDataIndex];
+      if(Number(selectList.stock)<Number(selectList.big+1) + Number(selectList.small) / Number(selectList.ratio)){
+        this.$message({message: '库存不足',type: 'warning'});
+        return;
+      }
+      this.tableData[this.tableDataIndex].big++
+      let money = Number(selectList.price) * (Number(selectList.big) + Number(selectList.small) / Number(selectList.ratio));
+      this.tableData[this.tableDataIndex].count = this.tableData[this.tableDataIndex].big+'/'+Number(this.tableData[this.tableDataIndex].small);
+      this.tableData[this.tableDataIndex].money = money;
+      this.getAllTableDataMoney();
+      setTimeout(()=>{
+        this.seekVal = '';
+      },100)
+    },
+    /**减少数量**/
+    minusSelectBig(){
+      let selectList = this.tableData[this.tableDataIndex];
+      // if(Number(selectList.stock)<Number(selectList.big-1) + Number(selectList.small) / Number(selectList.ratio)){
+      //   this.$message({message: '库存不足',type: 'warning'});
+      //   return;
+      // }
+      this.tableData[this.tableDataIndex].big--
+      let money = Number(selectList.price) * (Number(selectList.big) + Number(selectList.small) / Number(selectList.ratio));
+      this.tableData[this.tableDataIndex].count = this.tableData[this.tableDataIndex].big+'/'+Number(this.tableData[this.tableDataIndex].small);
+      this.tableData[this.tableDataIndex].money = money;
+      this.getAllTableDataMoney();
+      setTimeout(()=>{
+        this.seekVal = '';
+      },100)
+    },
+    /**向下移动**/
+    tableDataDown(){
       if(this.isSeek){
         let tableDataLength = this.seekList.length-1;
         if(tableDataLength==this.seekListIndex){
@@ -268,7 +484,8 @@ export default {
       }
 
     },
-    tableDataDown(){
+    /**向上移动**/
+    tableDataUp(){
       if(this.isSeek){
         if(this.seekListIndex==0){
           this.seekListIndex = 0