花材选择

ghs/src/views/order/add.vue

@@ -1,118 +1,11 @@
-<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;
-  }
-}
-</style>
-<style lang="scss" scoped>
-.app-list-content {
-  position: relative;
-
-  .right_box {
-    float: right;
-    width: 20%;
-    // margin-top: 40px;
-    // background: #ffffff;
-    // border: 1px solid #ebeef5;
-    box-sizing: border-box;
-    vertical-align: top;
-    margin-left: -1px;
-  }
-
-  .left_box {
-    //float: left;
-    width: 90%;
-    margin: 0 auto;
-    vertical-align: top;
-
-    .tor {
-      line-height: 40px;
-      color: #999;
-      padding-left: 10px;
-      font-size: 16px;
-      span{
-        margin-right: 60px;
-      }
-    }
-  }
-  .seek-list-box{
-    position: absolute;
-    bottom: 70px;
-    right: 20%;
-    width: 70%;
-    max-height: 310px;
-    overflow: hidden;
-    //overflow-y: scroll;
-  }
-  .bottom_input {
-    position: absolute;
-    bottom: 18px;
-    right: 6%;
-    // transform: translateX(-50%);
-    .allPrice {
-      margin-left: 80px;
-      // color: #606266;
-      font-size: 16px;
-      font-weight: 700;
-      &.active{
-        margin-left: 200px;
-      }
-    }
-  }
-  .el-dialog-center{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    span{
-      padding: 0 20px;
-    }
-
-  }
-  .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;
-    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: fixed;
-    left: 0;
-    top: 9990px;
-  }
-}
-</style>
 <template>
-  <div class="app-list-content">
+  <div v-if="customId == 0" style="text-align:center;">
+    <el-select @change="searchSelectCustom" v-model="selectCustomName" filterable remote reserve-keyword placeholder="搜索客户" clearable ref="customref"
+				:remote-method="searchCustomInfo" :loading="loading" style="width:500px;margin-left:20px;" size="big">
+    				<el-option v-for="item in customInfoList" :key="item.id" :label="`${item.name}`" :value="item.id"></el-option>
+  				</el-select>
+  </div>
+  <div class="app-list-content" v-else>
     <div class="left_box">
       <p class="tor">
         <span>全屏：F11</span>
@@ -122,7 +15,6 @@
         <span>数量减：-</span>
         <span>删除：Delete</span>
         <span>删除所有：Page Down</span>
-        <span>聚焦至花材输入框：Ctrl + Q</span>
       </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>
@@ -143,17 +35,12 @@
       </el-table>
     </div>
     <div class="bottom_input">
-<!--      <el-form ref="form" label-width="80px" style="display: inline-block">-->
-<!--        <el-form-item label="花材" style="font-weight: 700;">-->
-<!--          <el-input style="width: 280px;font-size:13px" @keyup.enter.native="enterSeekFun()" placeholder="请输入名称，支持拼音首字母，按Esc取消" type="text" ref="commodityInput" v-model="seekVal"></el-input>-->
-<!--        </el-form-item>-->
-<!--      </el-form>-->
       <span style="margin-right:10px;font-weight: 700;">花材</span>
-      <el-input style="width: 280px;font-size:13px" @keyup.enter.native="enterSeekFun()" placeholder="请输入名称，按Esc取消" type="text" ref="commodityInput" v-model="seekVal"></el-input>
-
+      <el-input style="width: 280px;font-size:13px" @keyup.enter.native="enterSeekFun()" placeholder="这里搜索，光标插入 Ctrl + Q" type="text" ref="itemSearchRef" v-model="seekVal"></el-input>
       <div style="display: inline-block;" class="allPrice">总金额: {{ totalMoney.toFixed(2) }}</div>
       <div style="display: inline-block;" class="allPrice">总数量: {{tableData.length}}</div>
-      <div style="display: inline-block;" class="allPrice active">----------------------------</div>
+      <div style="display: inline-block;" class="allPrice active">
+      </div>
     </div>
     <el-dialog title="选择花材" v-if="isSelectNumber" :visible.sync="isSelectNumber" width="30%" center>
       <div class="el-dialog-center">
@@ -326,14 +213,21 @@ export default {
       printSelectList:'',
       orderMsg:'',
       number: 0,
+      customId:0,
+      customInfoList:[],
+      loading: false,
+      selectCustomName:''
     };
   },
   created() {
-    this.$nextTick(()=>{
-      this.$refs['commodityInput'].focus();
-    })
+
   },
   mounted() {
+
+    this.$nextTick(() => {
+      this.$refs.customref.focus()
+    })
+
     this.getAllList()
     let self = this;
     document.onkeydown=function(e) {
@@ -343,38 +237,30 @@ export default {
           self.createOrder();
           console.log('ctrl+enter')
         }
-        //要做的事情
       }
       if(e && e.keyCode==81 && e.ctrlKey ){   //同时按下ctrl+Q
         console.log('ctrl+Q')
-        self.$refs['commodityInput'].focus();//选中
-        //要做的事情
+        self.$refs['itemSearchRef'].focus();
       }
       if( e && e.keyCode==38 ){   //按下上
         self.tableDataUp();
-        //要做的事情
       }
       if( e && e.keyCode==40 ){   //按下下
         self.tableDataDown();
-        //要做的事情
       }
       if( e && e.keyCode==107 ){   //按下+
         console.log('+')
         self.addSelectBig()
-        //要做的事情
       }
       if( e && e.keyCode==109 ){   //按下-
         self.minusSelectBig()
-        //要做的事情
       }
       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 = [];
-        //要做的事情
       }
       if( e && e.keyCode==27 ){   //按下esc
         if(self.isAccounts){
@@ -382,7 +268,6 @@ export default {
           return;
         }
         self.escFun();
-        //要做的事情
       }
       if( e && e.keyCode==119 ){   //按下f8 改价
         if(self.tableData!=''){
@@ -393,7 +278,7 @@ export default {
             self.$refs['priceInput'].focus();
           })
         }
-        //要做的事情
+        
       }
       if( e && e.keyCode==120 ){   //按下f9
         self.orderMsg = '';
@@ -410,11 +295,28 @@ export default {
             self.$refs['selectShopListInput'].focus();
           })
         }
-        //要做的事情
       }
     }
   },
   methods: {
+    searchSelectCustom(e){
+			this.customId = e
+      this.$nextTick(()=>{
+        this.$refs['itemSearchRef'].focus()
+      })
+		},
+		searchCustomInfo(query) {
+			let that = this
+			if (query !== '') {
+				this.loading = true;
+				this.$service.custom.list({name:query}).then(res=>{
+					that.loading = false
+					that.customInfoList = res.list	
+				})
+			} else {
+				this.customInfoList = []
+			}
+		},
     modifyPriceFun(money){
       let modifyPrice =  this.$util.copyObject(money)
       return modifyPrice.toFixed(2);
@@ -575,7 +477,7 @@ export default {
       this.seekList = [];
       this.isSelectNumber = false
       this.$nextTick(()=>{
-        this.$refs['commodityInput'].focus();
+        this.$refs['itemSearchRef'].focus();
       })
 
     },
@@ -693,3 +595,117 @@ export default {
   }
 };
 </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 {
+  text-align: center;
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.app-list-content {
+  position: relative;
+
+  .right_box {
+    float: right;
+    width: 20%;
+    // margin-top: 40px;
+    // background: #ffffff;
+    // border: 1px solid #ebeef5;
+    box-sizing: border-box;
+    vertical-align: top;
+    margin-left: -1px;
+  }
+
+  .left_box {
+    //float: left;
+    width: 90%;
+    margin: 0 auto;
+    vertical-align: top;
+
+    .tor {
+      line-height: 40px;
+      color: #999;
+      padding-left: 10px;
+      font-size: 16px;
+      span{
+        margin-right: 60px;
+      }
+    }
+  }
+  .seek-list-box{
+    position: absolute;
+    bottom: 70px;
+    right: 20%;
+    width: 70%;
+    max-height: 310px;
+    overflow: hidden;
+    //overflow-y: scroll;
+  }
+  .bottom_input {
+    position: absolute;
+    bottom: 18px;
+    right: 6%;
+    // transform: translateX(-50%);
+    .allPrice {
+      margin-left: 80px;
+      // color: #606266;
+      font-size: 16px;
+      font-weight: 700;
+      &.active{
+        margin-left: 200px;
+      }
+    }
+  }
+  .el-dialog-center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span{
+      padding: 0 20px;
+    }
+
+  }
+  .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;
+    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: fixed;
+    left: 0;
+    top: 9990px;
+  }
+}
+</style>