ocpview-plus 1.0.17 → 1.0.19

package/README.md

@@ -0,0 +1,3 @@
+
+### 1.0.18 更新说明
+ListDetail 模板 EditGrid 增加键盘导航

package/dist/ocpviewplus.min.esm.js

@@ -9071,6 +9071,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 var ViewGrid = /* @__PURE__ */ _export_sfc$1(_sfc_main$1G, [["render", _sfc_render$1t]]);
+var editgridbase_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$1F = {
   name: "editgridbase",
   extends: _sfc_main$1I,
@@ -9113,9 +9114,16 @@ const _sfc_main$1F = {
         name: "editRowForm",
         text: "\u7F16\u8F91"
       }],
-      openChange: false
+      openChange: false,
+      focusIndex: null,
+      focusKey: null
     };
   },
+  computed: {
+    colKeys() {
+      return this.soltTableColumns.map((c10) => c10.key);
+    }
+  },
   methods: {
     customInit() {
       if (this.myConfig.items && this.myConfig.items.length > 0) {
@@ -9550,6 +9558,91 @@ const _sfc_main$1F = {
         this.setcheckInfo(index, config2.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((el2) => {
+              el2.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((it2) => {
+        return it2 == this.focusKey;
+      });
+      this.focusKey = this.colKeys[colIdx];
+      let newRow = this.focusIndex;
+      let newCol = colIdx;
+      let name2 = "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) {
+        if (this.$refs[name2] && this.$refs[name2].autofocus) {
+          return true;
+        }
+      } else {
+        this.handleOut();
+      }
+      event.preventDefault();
+    },
+    extEditStatus() {
+      if (!this.myConfig.readOnly) {
+        let name2 = "cell_" + this.editIndex + "_" + this.editKey;
+        if (this.$refs[name2] && this.$refs[name2].setFocus) {
+          this.$refs[name2].setFocus(false);
+        }
+        let self2 = this;
+        this.$nextTick(() => {
+          self2.editKey = "";
+          self2.oldEditIndex = this.editIndex;
+        });
+      }
+    },
     setcheckInfo(index, key) {
       let checkIndex = index;
       let row = this.getCurRow(index);
@@ -43970,6 +44063,41 @@ const _sfc_main$v = {
       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 !== void 0) {
@@ -44098,7 +44226,7 @@ const _hoisted_2$k = {
 };
 const _hoisted_3$c = ["textContent"];
 const _hoisted_4$a = { key: 0 };
-const _hoisted_5$8 = ["onClick"];
+const _hoisted_5$8 = ["onClick", "cell-row", "cell-col"];
 const _hoisted_6$5 = {
   key: 0,
   ref: "page",
@@ -44259,8 +44387,8 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
               size: $data.myConfig.tableSize,
               stripe: $data.myConfig.showStripe,
               border: $data.myConfig.showBorder,
-              height: _ctx.tableHeight,
-              maxHeight: _ctx.tableMaxHeight,
+              height: $options.tableHeight,
+              maxHeight: $options.tableMaxHeight,
               "show-header": $data.myConfig.showHeader,
               onOnSelectionChange: _ctx.OnSelectionChange,
               columns: _ctx.tableColumns,
@@ -44276,7 +44404,9 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
                   fn: withCtx(({ index }) => [
                     createElementVNode("div", {
                       onClick: ($event) => _ctx.EditCell(index, config2),
-                      class: normalizeClass(config2.cellClassName)
+                      class: normalizeClass(config2.cellClassName),
+                      "cell-row": index,
+                      "cell-col": config2.key
                     }, [
                       _ctx.editIndex === index && _ctx.editKey === config2.key ? (openBlock(), createBlock(_component_ControlBox, {
                         key: 0,
@@ -44365,7 +44495,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
               size: $data.myConfig.tableSize,
               border: $data.myConfig.showBorder,
               stripe: $data.myConfig.showStripe,
-              maxHeight: _ctx.tableMaxHeight,
+              maxHeight: $options.tableMaxHeight,
               columns: _ctx.tableColumns,
               data: $data.curlEffectData,
               onOnColumnWidthResize: _ctx.onColumnWidthResize
@@ -44414,7 +44544,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 512);
 }
-var mEditGridCard = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["render", _sfc_render$s], ["__scopeId", "data-v-52b06f05"]]);
+var mEditGridCard = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["render", _sfc_render$s], ["__scopeId", "data-v-3cf9d240"]]);
 const _sfc_main$u = {
   name: "mformcard",
   extends: FormBox,