箱信息 - 包装、箱型

src/views/main/BookingLedger/detail/modules/goodsTable.vue

@@ -21,6 +21,7 @@
           :columns="columns"
           :table-data="tableData"
           borderY
+          ref="tableRef"
           style="min-width:970;"
           :cell-autofill-option="cellAutofillOption"
           :editOption="editOption"
@@ -120,45 +121,59 @@ export default {
           edit: false,
           renderBodyCell: ({ row, column, rowIndex }, h) => {
             return (
-              // <a-auto-complete
-              //     allowClear={true}
-              //     value={row['ctnall']}
-              //     class="customer-input"
-              //   >
-              //     {
-              //       <template slot="dataSource">
-              //         <a-select-opt-group>
-              //           {
-              //             this.ctnList.map((item, index) => {
-              //                 return <a-select-option>{ item.name }</a-select-option>
-              //             })
-              //           }
-              //         </a-select-opt-group>
-              //       </template>
-              //     }
-              //     {
-              //      <a-input>
-              //        <a-icon slot="suffix" type="search" class="certain-category-icon" />
-              //      </a-input>
-              //     }
-              //   </a-auto-complete>
               <a-select
                 value={row['ctnall']}
                 showSearch
+                ref="ctnallView"
+                class="ctnallView"
                 allow-clear={true}
                 style="width: 90px"
                 on-change={val => {
-                  const data = this.ctnList[val]
+                  console.log(' change - 修改内容', val)
-                  this.tableData[rowIndex].ctnall = data.name
+                  if (val) {
-                  this.tableData[rowIndex].ctncode = data.code
+                    const data = this.ctnList[val]
-                  row['ctnall'] = data.name
+                    this.tableData[rowIndex].ctnall = data.name
-                  this.$forceUpdate()
+                    this.tableData[rowIndex].ctncode = data.code
+                    row['ctnall'] = data.name
+                    this.$forceUpdate()
+                  } else {
+                    row['ctnall'] = ''
+                    this.tableData[rowIndex].ctnall = ''
+                    this.tableData[rowIndex].ctncode = ''
+                  }
+                }}
+                on-focus={val => {
+                  this.ctnallViewIndex = rowIndex
+                  console.log('=获取焦点=', rowIndex, this.ctnallViewIndex)
+                }}
+                on-blur={val => {
+                  this.ctnallViewIndex = null
+                  console.log('=失去焦点=', rowIndex, this.ctnallViewIndex, val)
+                }}
+                on-input={val => {
+                  console.log('== input - 修改内容==', val)
                 }}
               >
                 {this.ctnList.map((item, index) => {
                   return <a-select-option value={index}>{item.name}</a-select-option>
                 })}
               </a-select>
+              // <div class="ctnallView">
+              //   <input type="text"
+              //   v-model={row['ctnall']}
+              //   on-focus={val => {
+              //      this.ctnallViewIndex = rowIndex
+              //      console.log('=获取焦点=', rowIndex, this.ctnallViewIndex)
+              //    }}
+              //    on-blur={val => {
+              //      this.ctnallViewIndex = null
+              //      console.log('=失去焦点=', rowIndex, this.ctnallViewIndex)
+              //    }}
+              //    on-input={val => {
+              //      console.log('修改内容', val)
+              //    }}
+              //   />
+              // </div>
             )
           }
         },
@@ -207,11 +222,42 @@ export default {
                 defaultValue={row['kindpkgs']}
                 option-filter-prop="children"
                 style="width: 120px"
+                class="kindpkgsView"
                 on-change={val => {
-                  const data = this.packageList[val]
+                  console.log('包装修改：', this.packageList[val])
-                  this.tableData[rowIndex].kindpkgs = data.name
+                  if (val) {
-                  row['kindpkgs'] = data.name
+                    const data = this.packageList[val]
-                  this.$forceUpdate()
+                    this.tableData[rowIndex].kindpkgs = data.name
+                    row['kindpkgs'] = data.name
+                    this.tableData.map((item, index) => {
+                      item.kindpkgs = this.packageList[val].name || ''
+                      if (document.getElementsByClassName('kindpkgsView')[index].getElementsByClassName('ant-select-selection-selected-value')[0]) {
+                       document.getElementsByClassName('kindpkgsView')[index].getElementsByClassName('ant-select-selection-selected-value')[0].innerHTML = this.packageList[val].name || ''
+                      } else {
+                        document.getElementsByClassName('kindpkgsView')[index].getElementsByTagName('input')[0].val = this.packageList[val].name || ''
+                      }
+                    })
+                    this.$forceUpdate()
+                  } else {
+                    row['kindpkgs'] = ''
+                    this.tableData[rowIndex].kindpkgs = ''
+                    this.tableData.map((item, index) => {
+                      item.kindpkgs = ''
+                      document.getElementsByClassName('kindpkgsView')[index].getElementsByClassName('ant-select-selection-selected-value')[0].innerHTML = ''
+                    })
+                  }
+                  console.log(this.tableData)
+                }}
+                on-focus={val => {
+                  this.kindpkgsViewIndex = rowIndex
+                  console.log('=获取焦点=', rowIndex, this.kindpkgsViewIndex)
+                }}
+                on-blur={val => {
+                  this.kindpkgsViewIndex = null
+                  console.log('=失去焦点=', rowIndex, this.kindpkgsViewIndex)
+                }}
+                on-input={val => {
+                  console.log('== input - 修改内容==', val)
                 }}
               >
                 {this.packageList.map((item, index) => {
@@ -535,6 +581,8 @@ export default {
           }
         },
         cellValueChange: ({ row, column }) => {
+          console.log('cellValueChange row::', row);
+          console.log('cellValueChange column::', column);
         }
       },
       editChildOption: {
@@ -725,7 +773,9 @@ export default {
       childModelSelectIndex: null,
       selectChildArr: [],
       YarnLoading: false,
-      WeightLoading: false
+      WeightLoading: false,
+      ctnallViewIndex: null,
+      kindpkgsViewIndex: null
     }
   },
   watch: {
@@ -773,9 +823,35 @@ export default {
 
   created() {
     this.init()
+    document.onkeydown = (event) => {
+      console.log("按下:"+event.key+"键:"+event.keyCode, document.activeElement);
+      console.log(document.activeElement);
+      if (event.key === 'Backspace' && this.ctnallViewIndex !== null) {
+        const val = document.getElementsByClassName('ctnallView')[this.ctnallViewIndex].getElementsByTagName('input')[0].value
+        console.log('内容', val, this.ctnList)
+        document.getElementsByClassName('ctnallView')[this.ctnallViewIndex].getElementsByTagName('input')[0].value = val.substr(0, val.length - 1)
+        // this.tableData[this.ctnallViewIndex].ctnall = val.substr(0, val.length - 1)
+      }
+      if (event.key === 'Backspace' && this.kindpkgsViewIndex !== null) {
+        const val = document.getElementsByClassName('kindpkgsView')[this.kindpkgsViewIndex].getElementsByTagName('input')[0].value
+        console.log('内容', val, this.ctnList)
+        document.getElementsByClassName('kindpkgsView')[this.kindpkgsViewIndex].getElementsByTagName('input')[0].value = val.substr(0, val.length - 1)
+        // this.tableData[this.ctnallViewIndex].ctnall = val.substr(0, val.length - 1)
+      }
+      if (event.key === 'Tab') {
+        const activeDom = document.activeElement
+        if (activeDom.dataset['next'] === 'box-ctnall') {
+           this.startEditingCell('0', 'ctnall')
+        }
+        console.log(this.ctnallViewIndex)
+      }
+    }
   },
 
   methods: {
+    startEditingCell(rowKey, colKey, defaultValue) {
+      this.$refs['tableRef'].startEditingCell({ rowKey, colKey, defaultValue });
+    },
     init() {
       if (Object.keys(this.details).length > 0) {
         const arr = []

src/views/main/BookingLedger/detail/modules/operationArea.vue

@@ -65,7 +65,7 @@
         :style="{ width: '150px' }"
       >
         <button @click="addChild()" v-if="!details.hbList || details.hbList.length === 0"><span class="iconfont icon-zhizhishu"></span>添加分单</button>
-        <!-- <button><span class="iconfont icon-electronic-signature"></span>自定义必填项</button> -->
+        <button><span class="iconfont icon-electronic-signature"></span>自定义必填项</button>
       </div>
     </a-card>
 

src/views/main/BookingLedger/detail/modules/remarksInfo.vue

@@ -7,7 +7,7 @@
       </a-col>
       <a-col :span="12">
         <div class="tit"><span class="iconfont icon-bianji"></span>截单备注</div>
-        <a-textarea class="input-box" v-model="details.siremark" />
+        <a-textarea class="input-box" v-model="details.siremark" data-next="box-ctnall"/>
       </a-col>
     </a-row>
   </a-card>