ocpview-plus 1.0.3 → 1.0.5

package/src/components/masterplate/RewriteBillListDetails/mixins/useVxeGridEditTypeKeydownEventHook.js

@@ -0,0 +1,251 @@
+export default {
+    name: "useVxeGridEditTypeKeydownEventHook",
+    data() {
+        return {
+            VG_currentEditRecord: {},
+        };
+    },
+    computed: {
+        /**
+         * 按键配置项
+         */
+        VG_keyboardConfig() {
+            const onOff = true;
+            return {
+                isArrow: onOff,
+                isEdit: onOff,
+                isEsc: onOff,
+                isEnter: onOff,
+                enterToTab: onOff,
+                isChecked: onOff,
+            };
+        },
+        VG_mouseConfig() {
+            const onOff = true;
+            return {
+                selected: onOff,
+            };
+        },
+    },
+    methods: {
+        /**
+         * 当表格被激活且键盘被按下时会触发的事件
+         * @param {*} $event
+         */
+        VG_keydown({ $event, $table }) {
+            // 按键码
+            const keyCode = $event.keyCode;
+            // console.log("🚀 ~ VG_keydown ~ keyCode:", keyCode);
+            // 按键分支
+            switch (keyCode) {
+                case 13:
+                    // 回车事件
+                    window.event.returnValue = false;
+                    $event.preventDefault();
+                    this.VG_keyCode13Event($table);
+                    break;
+
+                case 38:
+                    // 上键事件
+                    window.event.returnValue = false;
+                    $event.preventDefault();
+                    this.VG_keyCodeUpAndDownEvent($table, "up");
+                    break;
+
+                case 40:
+                    // 下键事件
+                    window.event.returnValue = false;
+                    $event.preventDefault();
+                    this.VG_keyCodeUpAndDownEvent($table, "down");
+                    break;
+
+                default:
+                    break;
+            }
+        },
+
+        /**
+         * 回车键盘事件
+         *
+         * keydown-start    当表格被激活且键盘被按下开始时会触发的事件
+         * keydown-end  当表格被激活且键盘被按下结束时会触发的事件
+         * @param {*} $table
+         */
+        VG_keyCode13Event($table) {
+            // 获取方法的返回值用来决定该单元格是否允许编辑
+            const activeMethod = this.$utils.get(
+                $table,
+                "editConfig.beforeEditMethod",
+                function () {
+                    return true;
+                }
+            );
+            // 获取编辑状态、选择装填相关数据 getEditRecord
+            const editRecord = $table.getEditRecord();
+            const selectedCell = $table.getSelectedCell();
+            // 完整列信息查询
+            const { tableColumn } = $table.getTableColumn();
+            const fullData = $table.getTableData().fullData;
+            // 编辑状态,关闭当前编辑状态
+            if (editRecord) {
+                const { row, column } = editRecord;
+                const rowIndex = $table.getVTRowIndex(row);
+                const columnIndex = $table.getVTColumnIndex(column);
+                $table.scrollToRow(row, column).then(() => {
+                    $table.clearEdit();
+                    const isLastEditCell = this.VG_setRowIsEditCell(
+                        row,
+                        columnIndex,
+                        tableColumn,
+                        activeMethod,
+                        $table
+                    );
+                    if (isLastEditCell) {
+                        const nextRowSub = rowIndex + 1;
+                        if (fullData[nextRowSub]) {
+                            const { scrollTop } = $table.getScroll();
+                            $table.scrollTo(0, scrollTop).then(() => {
+                                // 存在下一行数据
+                                // $table.setEditRow(fullData[nextRowSub]);
+                                this.VG_setRowIsEditCell(
+                                    fullData[nextRowSub],
+                                    0,
+                                    tableColumn,
+                                    activeMethod,
+                                    $table
+                                );
+                            });
+                        } else {
+                            $table.setEditRow(fullData[rowIndex], column);
+                        }
+                    }
+                });
+            }
+
+            // 单元格选中状态
+            if (selectedCell) {
+                const { row, column } = selectedCell;
+                const rowIndex = $table.getVTRowIndex(row);
+                const columnIndex = $table.getVTColumnIndex(column);
+                $table.scrollToRow(row, column).then(() => {
+                    const succ = activeMethod(selectedCell);
+                    if (column.editRender && succ) {
+                        $table.setEditCell(row, column.property);
+                    } else {
+                        const isLastEditCell = this.VG_setRowIsEditCell(
+                            row,
+                            columnIndex,
+                            tableColumn,
+                            activeMethod,
+                            $table
+                        );
+                        // 当前行到达最后一个可编辑项
+                        if (isLastEditCell) {
+                            const nextRowSub = rowIndex + 1;
+                            if (fullData[nextRowSub]) {
+                                const { scrollTop } = $table.getScroll();
+                                $table.scrollTo(0, scrollTop).then(() => {
+                                    // 存在下一行数据
+                                    this.VG_setRowIsEditCell(
+                                        fullData[nextRowSub],
+                                        0,
+                                        tableColumn,
+                                        activeMethod,
+                                        $table
+                                    );
+                                });
+                            } else {
+                                // 已经到底，可以走新增逻辑
+                                // console.log("已经到底，可以走新增逻辑111111");
+                                // if (lastEditCellKeyCode13Method)
+                                //     lastEditCellKeyCode13Method();
+                            }
+                        }
+                    }
+                });
+            }
+        },
+
+        /**
+         * 下键事件
+         * @param {*} $table
+         */
+        VG_keyCodeUpAndDownEvent($table, type = "down") {
+            // 暂存当前编辑行资源
+            this.VG_currentEditRecord = $table.getEditRecord();
+            // 获取方法的返回值用来决定该单元格是否允许编辑
+            const activeMethod = this.$utils.get(
+                $table,
+                "editConfig.beforeEditMethod",
+                function () {
+                    return true;
+                }
+            );
+            // 获取编辑状态、选择装填相关数据 getEditRecord
+            const editRecord = $table.getEditRecord();
+            const fullData = $table.getTableData().fullData;
+            // 编辑状态,关闭当前编辑状态
+            if (editRecord) {
+                const { row, column } = editRecord;
+                const rowIndex = $table.getVTRowIndex(row);
+                $table.scrollToRow(row, column).then(() => {
+                    $table.clearEdit();
+                    const succ = activeMethod({ row, column });
+                    if (column.editRender && succ) {
+                        const nextRowSub =
+                            type === "down" ? rowIndex + 1 : rowIndex - 1;
+                        if (fullData[nextRowSub]) {
+                            const { scrollTop } = $table.getScroll();
+                            $table.scrollTo(0, scrollTop).then(() => {
+                                // 存在下一行\上一行数据
+                                $table.setEditRow(fullData[nextRowSub], column);
+                            });
+                        } else {
+                            $table.setEditRow(fullData[rowIndex], column);
+                        }
+                    }
+                });
+            }
+        },
+
+        /**
+         * 行内可编辑项跳转
+         * @param {*} row
+         * @param {*} columnIndex
+         * @param {*} fullColumn
+         * @param {*} activeMethod
+         * @param {*} $table
+         * @returns
+         */
+        VG_setRowIsEditCell(
+            row,
+            columnIndex,
+            fullColumn,
+            activeMethod,
+            $table
+        ) {
+            let isLastEditCell = true;
+            for (
+                let i = columnIndex + 1, len = fullColumn.length;
+                i < len;
+                i++
+            ) {
+                const column = fullColumn[i];
+                const succ = activeMethod({ row, column });
+
+                if (column.editRender && column.editRender.enabled && succ) {
+                    $table.scrollToRow(row, column).then(() => {
+                        $table.setEditCell(row, column.property);
+                    });
+                    isLastEditCell = false;
+                    break;
+                }
+            }
+            return isLastEditCell;
+        },
+
+        VG_editActivated(params) {
+            this.VG_currentEditRecord = params;
+        },
+    },
+};