供货商PC开单

ghs/src/main.js

@@ -24,6 +24,16 @@ Vue.use(Viewer);
 Vue.use(ElementUI);
 
 Vue.config.productionTip = false;
+Vue.config.keyCodes = {
+	// camelCase 不可用
+	keyAdd: 107,
+	keyMinus: 107,
+	keyQ: 81,
+	// 取而代之的是 kebab-case 且用双引号括起来
+	"key-add": 107,
+	"key-minus": 109,
+	"key-q": 81,
+}
 
 const conf = {
 	store,

ghs/src/service/product/index.js

@@ -2,6 +2,13 @@ import { BaseService, Service } from '@/cool';
 
 @Service('product')
 export class ProductService extends BaseService {
+	// 控制台首页 b
+	list(data) {
+		return this.request({
+			url: '/list',
+			params: data
+		});
+	}
 
 /** *
  * 批量修改product信息

ghs/src/utils/util.js

@@ -27,7 +27,25 @@ const getShortUrl = url => {
 	let urlArr = url.split('.');
 	return url.substring(startIndex, endIndex) + '.' + urlArr[urlArr.length - 1];
 };
-
+/**
+ * 深拷贝对象
+ * @param {要拷贝对象} obj
+ */
+const copyObject = obj => {
+	let str,
+		newobj = Array.isArray(obj) === true ? [] : {};
+	if (typeof obj !== "object") {
+		return;
+	} else if (JSON) {
+		(str = JSON.stringify(obj)), //系列化对象
+			(newobj = JSON.parse(str)); //还原
+	} else {
+		for (let i in obj) {
+			newobj[i] = typeof obj[i] === "object" ? copyObject(obj[i]) : obj[i];
+		}
+	}
+	return newobj;
+};
 /** *
  * 全局公共按钮跳转
  * @parmas item.funtion 为可执行函数
@@ -191,6 +209,7 @@ export function checkPhone(val) {
 }
 export default {
 	isEmpty,
+	copyObject,
 	parse,
 	pageTo,
 	$checkName,

ghs/src/views/order/add.vue

@@ -1,119 +1,19 @@
-<template>
-  <div class="app-list-content">
-    <div class="left_box">
-      <p class="tor">全屏：F11 结账：F9 改价：F8 整单折扣：F7 数量加：+ 数量减：- 删除：Delete 删除所有：Page Down 聚焦至商品输入框：Ctrl + q </p>
-      <el-table
-        :data="tableData"
-        style="width: 100%"
-        border
-        :header-cell-style="{background:'#fdfdfd', color: '#666', fontWeight: 400}"
-        class="tableBox"
-      >
-        <el-table-column
-          label="编号"
-          width="120"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="name"
-          label="名称"
-          width="180"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="等级"
-          width="180"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="单位"
-          width="120"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="数量"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="单价"
-          align="center"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="金额"
-          align="center"
-        >
-        </el-table-column>
-      </el-table>
-    </div>
-    <div class="right_box">
-      111
-    </div>
-    <div class="bottom_input">
-      <el-form
-        ref="form"
-        label-width="80px"
-        style="display: inline-block"
-      >
-        <el-form-item label="活动名称">
-          <el-input style="width: 200px"></el-input>
-        </el-form-item>
-      </el-form>
-      <div
-        style="display: inline-block;"
-        class="allPrice"
-      >总金额: 123</div>
-      <div
-        style="display: inline-block;"
-        class="allPrice"
-      >总数量: 123</div>
-      <div
-        style="display: inline-block;"
-        class="allPrice"
-      >
-        <el-checkbox v-model="checked"></el-checkbox>结账后自动打印2份
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'order-add',
-  data () {
-    return {
-      tableData: []
-    };
-  },
-  created () {
-  },
-  methods: {
-  }
-};
-</script>
 <style lang="scss">
+.el-dialog__title{color: #fff}
 .tableBox {
   th {
     padding: 0 !important;
     height: 40px;
     line-height: 40px;
   }
+
   td {
     padding: 0 !important;
     height: 45px;
     line-height: 45px;
   }
 }
+
 .bottom_input {
   .el-form-item {
     margin-bottom: 0;
@@ -123,6 +23,7 @@ export default {
 <style lang="scss" scoped>
 .app-list-content {
   position: relative;
+
   .right_box {
     float: right;
     width: 20%;
@@ -133,10 +34,13 @@ export default {
     vertical-align: top;
     margin-left: -1px;
   }
+
   .left_box {
-    float: left;
-    width: 80%;
+    //float: left;
+    width: 90%;
+    margin: 0 auto;
     vertical-align: top;
+
     .tor {
       line-height: 40px;
       color: #999;
@@ -144,10 +48,15 @@ export default {
       font-size: 16px;
     }
   }
+  .seek-list-box{
+    position: absolute;
+    bottom: 70px;
+    right: 20%;
+    width: 70%;
+    max-height: 200px;
+    overflow-y: scroll;
+  }
   .bottom_input {
-    // height: 100px;
-    // width: 600px;
-    background: pink;
     position: absolute;
     bottom: 10px;
     right: 20%;
@@ -159,5 +68,224 @@ export default {
       font-weight: 700;
     }
   }
+  .el-dialog-center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span{
+      padding: 0 20px;
+    }
+
+  }
+  .remark{
+    margin-top: 20px;
+    text-align: center;
+    color: #999999;
+    font-size: 14px;
+  }
 }
-</style>
+</style>
+<template>
+  <div class="app-list-content">
+    <div class="left_box">
+      <p class="tor">全屏：F11 结账：F9 改价：F8 整单折扣：F7 数量加：+ 数量减：- 删除：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>
+        <el-table-column prop="lv" label="等级" width="180" align="center"></el-table-column>
+        <el-table-column prop="unit" label="单位" width="120" align="center"></el-table-column>
+        <el-table-column prop="count" label="数量" align="center"></el-table-column>
+        <el-table-column prop="price" label="单价" align="center"></el-table-column>
+        <el-table-column prop="money" label="金额" align="center"></el-table-column>
+      </el-table>
+    </div>
+    <div class="seek-list-box" v-if="seekList!=''">
+      <el-table ref="seekList" :data="seekList" highlight-current-row style="width: 100%" border :header-cell-style="{background:'#fdfdfd', color: '#666'}" class="tableBox active">
+        <el-table-column prop="itemName" label="名称" width="180" align="center"></el-table-column>
+        <el-table-column prop="stock" label="库存" width="180" align="center"></el-table-column>
+        <el-table-column prop="bigUnit" label="单位" align="center"></el-table-column>
+        <el-table-column prop="price" label="单价" align="center"></el-table-column>
+      </el-table>
+    </div>
+    <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-form>
+      <div style="display: inline-block;" class="allPrice">总金额: 123</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>
+      <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>
+      </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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'order-add',
+  data() {
+    return {
+      centerDialogVisible:false,
+      isSeek:false,
+      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'},
+      ]
+    };
+  },
+  created() {
+    this.$nextTick(()=>{
+      this.$refs['commodityInput'].focus();
+    })
+
+  },
+  mounted() {
+    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();//选中
+        //要做的事情
+      }
+      if( e && e.keyCode==38 ){   //按下上
+        self.tableDataUp();
+        //要做的事情
+      }
+      if( e && e.keyCode==40 ){   //按下下
+        self.tableDataDown();
+        //要做的事情
+      }
+      if( e && e.keyCode==107 ){   //按下+
+        console.log('+')
+        //要做的事情
+      }
+      if( e && e.keyCode==109 ){   //按下-
+        console.log('-')
+        //要做的事情
+      }
+      if( e && e.keyCode==46 ){   //按下delete  删除选中
+        self.tableData.splice(self.tableDataIndex, 1);
+        self.$refs.singleTable.setCurrentRow(self.tableData[0]);
+        //要做的事情
+      }
+      if( e && e.keyCode==34 ){   //按下pageDown  删除所有
+        self.tableData = [];
+        //要做的事情
+      }
+    }
+  },
+  methods: {
+    /**拿到所有数据*/
+    getAllList(){
+      this.$service.product.list().then(res => {
+        this.allList = res.list;
+      });
+    },
+
+    /** 搜索--按键回车*/
+    async enterFun(){
+      if(this.seekVal==''){this.isSeek = false;return;}
+      if(this.seekVal==this.seekOldVal){
+        this.isSeek = false;
+        console.log('两个值相同')
+      }else{
+        this.seekList = [];
+        console.log('两个不相同，赋值')
+        this.seekOldVal = this.seekVal;
+        this.isSeek = true;
+        let list = this.$util.copyObject(this.allList);
+        let commonList = list;
+        await commonList.forEach(ele => {
+          let hasName = ele.itemName && ele.itemName.indexOf(this.seekVal) >= 0;
+          let elePy = (ele.py && ele.py.toLocaleUpperCase()) || "";
+          let hasPy = elePy.indexOf(this.seekVal.toLocaleUpperCase()) >= 0;
+          if (hasName || hasPy) {
+            this.seekList.push(ele);
+          }
+        });
+        this.$refs.seekList.setCurrentRow(this.seekList[0]);
+      }
+    },
+
+    selectList(){
+
+    },
+
+
+
+    tableDataUp(){
+      if(this.isSeek){
+        let tableDataLength = this.seekList.length-1;
+        if(tableDataLength==this.seekListIndex){
+          this.seekListIndex = tableDataLength
+        }else{
+          this.seekListIndex++;
+        }
+        this.$refs.seekList.setCurrentRow(this.seekList[this.seekListIndex]);
+      }else{
+        let tableDataLength = this.tableData.length-1;
+        if(tableDataLength==this.tableDataIndex){
+          this.tableDataIndex = tableDataLength
+        }else{
+          this.tableDataIndex++;
+        }
+        this.$refs.singleTable.setCurrentRow(this.tableData[this.tableDataIndex]);
+      }
+
+    },
+    tableDataDown(){
+      if(this.isSeek){
+        if(this.seekListIndex==0){
+          this.seekListIndex = 0
+        }else{
+          this.seekListIndex--;
+        }
+        this.$refs.seekList.setCurrentRow(this.seekList[this.seekListIndex]);
+      }else{
+        if(this.tableDataIndex==0){
+          this.tableDataIndex = 0
+        }else{
+          this.tableDataIndex--;
+        }
+        this.$refs.singleTable.setCurrentRow(this.tableData[this.tableDataIndex]);
+      }
+
+    },
+  }
+};
+</script>