ocpview-plus 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocpview-plus",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "title": "ocpviewPlus",
   "description": "A high quality Service UI components Library with Vue.js",
   "homepage": "",

package/src/components/grid/editgridbase.vue

@@ -43,8 +43,18 @@ export default {
                 text: '编辑',
             }, ],
             openChange: false,
+            focusIndex: null,
+            focusKey: null,
         };
     },
+    computed: {
+        colKeys() {
+            return this.soltTableColumns.map(c => c.key);
+        }
+    },
+    beforeUnmount() {
+        document.removeEventListener('keydown', this.handleKeydown);
+    },
     methods: {
         customInit() {
             if (this.myConfig.items && this.myConfig.items.length > 0) {
@@ -99,6 +109,10 @@ export default {
                 this.customInit2();
             }
             this.myConfig.getGridObject = this.getGridObject;
+            //监听键盘事件
+            document.addEventListener('keydown', (e) => {       
+                this.handleKeydown(e);
+            })
         },
         getGridObject() {
             let that = this;
@@ -450,6 +464,7 @@ export default {
             return error;
         },
         EditCell(index, config) {
+            this.setEditGridFocus(index, config.key);
             if (this.myConfig.readOnly) {
                 this.cancelCellEditing();
                 return;
@@ -487,6 +502,95 @@ export default {
                 this.setcheckInfo(index, config.key);
             }
         },
+        // 设置焦点位置
+        setEditGridFocus(rowIdx, colKey) {
+            this.focusIndex = rowIdx;
+            this.focusKey = colKey;
+            this.editIndex = rowIdx;
+            this.editKey = colKey;
+            this.focusCell(rowIdx, colKey);
+        },
+        // 设置键盘选中单元格样式
+        focusCell(rowIdx, colKey) {
+            this.$nextTick(() => {
+                const tableEl = this.$refs.table.$el;
+                const selector = `div[cell-row="${rowIdx}"][cell-col="${colKey}"]`;
+                let curElement = tableEl.querySelector(selector);
+                if(curElement) {
+                    const arr = tableEl.querySelectorAll('.ivu-table-column-selected');
+                    if(arr.length != 0) {
+                        arr.forEach(el => {
+                            el.classList.remove('ivu-table-column-selected');
+                        })
+                    }
+
+                    const cellDiv = curElement.closest('td');
+                    if (cellDiv) {
+                        cellDiv.classList.add('ivu-table-column-selected');
+                        cellDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                    }
+                }
+            });
+        },
+        // 键盘导航事件
+        handleKeydown(event) {
+            if (this.focusIndex === null || this.focusKey === null) return;
+            const colIdx = this.colKeys.findIndex(it => { return it == this.focusKey});
+
+            this.focusKey = this.colKeys[colIdx];
+            let newRow = this.focusIndex;
+            let newCol = colIdx;
+
+            let name = 'cell_' + this.editIndex + '_' + this.editKey;
+            const { key } = event;
+            
+            if(key == 'ArrowUp') {
+                if (this.focusIndex > 0) newRow--;
+                this.extEditStatus();
+            }
+            if(key == 'ArrowDown') {
+                if (this.focusIndex < this.data.length - 1) newRow++;
+                this.extEditStatus();
+            }
+            if(key == 'ArrowLeft') {
+                if (colIdx > 1) newCol--;
+                this.extEditStatus();
+            }
+            if(key == 'ArrowRight') {
+                if (colIdx < this.colKeys.length - 1) newCol++;
+                this.extEditStatus();
+            }
+            
+            if(key == 'Enter') {
+                if (colIdx < this.colKeys.length - 1) newCol++;
+            }
+
+            this.setEditGridFocus(newRow, this.colKeys[newCol]);
+            if(!this.myConfig.readOnly) {
+                // 解决键盘按下input框的值不修改问题           
+                if (this.$refs[name] && this.$refs[name].autofocus) {
+                    return true;
+                }
+            } else {
+                this.handleOut();
+            }
+            event.preventDefault();
+        },
+        extEditStatus() {
+            if(!this.myConfig.readOnly) {
+                //this.handleOut();
+                let name = 'cell_' + this.editIndex + '_' + this.editKey;
+                if (this.$refs[name] && this.$refs[name].setFocus) {
+                    this.$refs[name].setFocus(false);
+                }
+                let self = this;
+                this.$nextTick(() => {
+                    self.editKey = '';
+                    self.oldEditIndex = this.editIndex;
+                    //self.editIndex = -1;
+                });
+            }
+        },
         setcheckInfo(index, key) {
             let checkIndex = index;
             let row = this.getCurRow(index);
@@ -633,6 +737,7 @@ export default {
                 this.editIndex = nextKey.editIndex;
                 this.editKey = nextKey.editKey;
                 this.setcheckInfo(nextKey.editIndex, nextKey.editKey);
+                this.setEditGridFocus(this.editIndex, this.editKey);
             }
         },
         findNextItems(editIndex, editName) {
@@ -950,3 +1055,8 @@ export default {
     },
 };
 </script>
+<style lang="less">
+    .ivu-table-column-selected, .active-cell{
+        box-shadow: inset 0 0 0 2px #AF292E;
+    }
+</style>

package/src/components/masterplate/base.vue

@@ -39,7 +39,7 @@ export default {
             showAsyncImportExport:false,
             showBillContPrintMode:false,
             showPrintMode:false,
-            billprintModeUrl:'/mall-sysconf-vue/#/billdataprint?modulecode={modulecode}&dataid={dataid}&mktcode={mktcode}&token={token}',
+            billprintModeUrl:'/widgetmodelv3/#/bill-print?modulecode={modulecode}&dataid={dataid}&mktcode={mktcode}&token={token}',
             printModeUrl:'',
             eventObject:['valueChanged','setDataBefore','searchBefore','cellbeginedit','importSuccess','addRowBefore','indexMethod','delRowBefore','delRowAfter','onSelectionChange','formatValue','updateCellConfig','overrideSearchParam','overrideData','refurbishCheck','onSingleChange','onSetRowCheck','onSelect','onSelectCancel','onSelectionChange','customSummary','customImgPath','onDelTag','onSearch','onAppend','filterData','onAddTag','getDictData','setLabel','setImportUrl','onLinkTo','newSaveFormBefore','setQueryConfig','setNodeClass','setTreeNodeIcon','rowClassName','customSummaryGroup','disabledDate'],
             layoutTypeList:['ListDetails','ListDetailsV2','BillListDetails']

package/src/components/masterplate/editgridcard.vue

@@ -33,9 +33,9 @@
                 </Col>
             </Row>
             <Row v-show="showGrid" >
-                <Table ref="table"  :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe"  :border="myConfig.showBorder" :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" @on-selection-change="OnSelectionChange" :columns="tableColumns"  :data="data" @on-column-width-resize="onColumnWidthResize" @on-row-click="rowClick" :show-summary="myConfig.showSummary"  :summary-method="handleSummary">
+                <Table ref="table" :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize" :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" @on-selection-change="OnSelectionChange" :columns="tableColumns" :data="data" @on-column-width-resize="onColumnWidthResize" @on-row-click="rowClick" :show-summary="myConfig.showSummary"  :summary-method="handleSummary">
                     <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ index }" :key="'show_' + config.key">          
-                        <div @click="EditCell(index,config)" :class="config.cellClassName">
+                        <div @click="EditCell(index,config)" :class="config.cellClassName" :cell-row="index" :cell-col="config.key">
                             <ControlBox v-if="editIndex === index && editKey=== config.key"  :ref="'cell_'+ index + '_' + config.key"  :autofocus="true" :config="getCellConfig(index,config)"  :valueData="getCurRow(index)" @inputValue="input" :editIndex="index" @doAction="doAction"></ControlBox>
                             <ShowText v-else  :label="formatValue(index,config)"  :contentAlign="config.contentAlign"  :class="IsCellError(index,config)" :config="config" :rowIndex="index"></ShowText>
                         </div>
@@ -104,9 +104,43 @@ export default {
             },
             curlEffectData:[],
             effectData:[]
-
         };
     },
+    computed: {
+        tableHeight() {
+            let currentHeight = this.currentHeight - this.extraHeight - this.outsideHeight;
+            if(this.isFull) {
+                currentHeight = this.clientHeight - this.$refs.table.$el.offsetTop;
+            } else {
+                if (!this.myConfig.dynamicHeight) {
+                    currentHeight = this.currentHeight;
+                    if (this.extraHeight) {
+                        currentHeight =  currentHeight - Number(this.extraHeight);
+                    }
+                    if (this.outsideHeight) {
+                        currentHeight =  currentHeight - Number(this.outsideHeight);
+                    }
+                    if (this.myConfig.showSummary) {
+                        currentHeight = currentHeight  - 50; 
+                    }
+                } 
+            }
+            return currentHeight;
+        },
+        tableMaxHeight() {
+            let currentHeight = this.currentHeight - this.extraHeight - this.outsideHeight;
+            if(this.isFull) {
+                currentHeight = this.clientHeight - this.$refs.table.$el.offsetTop;
+            } else {
+                if (this.myConfig.dynamicHeight) {
+                    if (this.myConfig.showSummary) {
+                        currentHeight = currentHeight  - 50; 
+                    }
+                }
+            }
+            return currentHeight;
+        }
+    },
     methods: {
         customInit2() {
             if (this.myConfig.showTitle !== undefined) {

package/src/components/masterplate/layouttemplate.vue

@@ -4,7 +4,7 @@
    <Modal title="附件" v-model="showDetailAppendix" :width="appendixCurrentWidth" :footer-hide="true">
         <AppendixBoxs v-if="detalAppendixFlag" ref="detailappendix" :config="billDetailAppendixConfig"  @doAction="doAction"/>
     </Modal>
-    <Modal title="模版打印" v-model="showPrintMode" :width="appendixCurrentWidth" :footer-hide="true" :fullscreen="true">
+    <Modal title="模版打印" v-model="showPrintMode" :width="appendixCurrentWidth" :footer-hide="true" :fullscreen="true" class-name="print-bill-panel-modal">
          <iframe ref="iframetemplate" v-if="printModeReset" :src="printModeUrl"  width="100%"  height="100%" allowtransparency="true" frameborder="0"  ></iframe>
     </Modal>
     <BillAsyncImport v-if="importReset" ref="billAsyncImport"  :config="billAsyncImportConfig"  />
@@ -31,3 +31,11 @@ export default {
     },
 };
 </script>
+<style lang="less">
+.print-bill-panel-modal{
+    .ivu-modal-body{
+        padding: 0px!important;
+        overflow: hidden!important;
+    }
+}
+</style>