cnhis-design-vue 3.1.34-beta.6 → 3.1.34-beta.8

package/README.md

@@ -1,123 +1,123 @@
-# 安装
-
-```shell
-npm i cnhis-design-vue@[版本号]
-# or
-yarn add cnhis-design-vue@[版本号] #推荐
-```
-
-## 1.全局引入
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import 'cnhis-design-vue/es/packages/index.css';
-import cui from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(cui).mount('#app');
-```
-
-## 2. 按需引入
-
-组件现在支持了自动按需引入, 但是样式文件需要额外的处理
-
-### 2.1 样式处理方式 1(按需引入样式)
-
-```shell
-# 安装自动导入样式的插件
-npm i -d vite-plugin-style-import
-```
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import { createStyleImportPlugin } from 'vite-plugin-style-import';
-
-export default defineConfig({
-  plugins: [
-    // ...otherPlugins
-    createStyleImportPlugin({
-      libs: [
-        {
-          libraryName: 'cnhis-design-vue',
-          esModule: true,
-          ensureStyleFile: true,
-          resolveStyle: name => {
-            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
-          }
-        }
-      ]
-    })
-  ]
-});
-```
-
-### 2.2 样式处理方式 2(全局引入样式)
-
-```typescript
-// main.ts
-import 'cnhis-design-vue/es/components/index.css';
-```
-
-## 3. 注意
-
-由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-
-import { CGrid } from 'cnhis-design-vue';
-// 或者
-import { CBigTable } from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(CGrid);
-// 或者
-app.use(CBigTable);
-app.mount('#app');
-```
-
-## 4.FAQ
-
-### 4.1 项目打包后样式丢失
-
-> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  rollupOptions: {
-    // ..otherOptions
-    output: {
-      dir: './dist',
-      manualChunks(id: string) {
-        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
-          return 'vendor';
-        }
-      }
-    }
-  }
-});
-```
-
-### 4.2 找不到文件
-
-> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
-
-```javascript
-// vite.config.ts
-const config = {
-  // ...otherOptions
-  resolve: {
-    // ...otherOptions
-    // 如果没有配置, 则不用考虑
-    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
-  }
-};
-```
+# 安装
+
+```shell
+npm i cnhis-design-vue@[版本号]
+# or
+yarn add cnhis-design-vue@[版本号] #推荐
+```
+
+## 1.全局引入
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'cnhis-design-vue/es/packages/index.css';
+import cui from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(cui).mount('#app');
+```
+
+## 2. 按需引入
+
+组件现在支持了自动按需引入, 但是样式文件需要额外的处理
+
+### 2.1 样式处理方式 1(按需引入样式)
+
+```shell
+# 安装自动导入样式的插件
+npm i -d vite-plugin-style-import
+```
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
+export default defineConfig({
+  plugins: [
+    // ...otherPlugins
+    createStyleImportPlugin({
+      libs: [
+        {
+          libraryName: 'cnhis-design-vue',
+          esModule: true,
+          ensureStyleFile: true,
+          resolveStyle: name => {
+            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
+          }
+        }
+      ]
+    })
+  ]
+});
+```
+
+### 2.2 样式处理方式 2(全局引入样式)
+
+```typescript
+// main.ts
+import 'cnhis-design-vue/es/components/index.css';
+```
+
+## 3. 注意
+
+由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+
+import { CGrid } from 'cnhis-design-vue';
+// 或者
+import { CBigTable } from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(CGrid);
+// 或者
+app.use(CBigTable);
+app.mount('#app');
+```
+
+## 4.FAQ
+
+### 4.1 项目打包后样式丢失
+
+> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  rollupOptions: {
+    // ..otherOptions
+    output: {
+      dir: './dist',
+      manualChunks(id: string) {
+        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
+          return 'vendor';
+        }
+      }
+    }
+  }
+});
+```
+
+### 4.2 找不到文件
+
+> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
+
+```javascript
+// vite.config.ts
+const config = {
+  // ...otherOptions
+  resolve: {
+    // ...otherOptions
+    // 如果没有配置, 则不用考虑
+    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
+  }
+};
+```

package/es/components/big-table/index.d.ts

@@ -647,6 +647,7 @@ declare const BigTable: SFCWithInstall<import("vue").DefineComponent<{
         sysImageSize: unknown[];
     }>;
     treeConfig: import("vue").ComputedRef<any>;
+    keyboardConfig: import("vue").ComputedRef<any>;
     hideAllWrap: (e: any) => void;
     bindDocumentClick: () => void;
     unBindDocumentClick: () => void;

package/es/components/big-table/src/BigTable.vue.d.ts

@@ -646,6 +646,7 @@ declare const _default: import("vue").DefineComponent<{
         sysImageSize: unknown[];
     }>;
     treeConfig: import("vue").ComputedRef<any>;
+    keyboardConfig: import("vue").ComputedRef<any>;
     hideAllWrap: (e: any) => void;
     bindDocumentClick: () => void;
     unBindDocumentClick: () => void;

package/es/components/big-table/src/BigTable.vue2.js

@@ -143,11 +143,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       } = props.tableParams;
       let statusNumber = Number(state.isTree);
       if ([1, 3].includes(statusNumber)) {
-        result = {
+        result = Object.assign({}, {
           children: "childrenList",
           accordion: state.openOnly > 0,
           reserve: true
-        };
+        }, result);
         if (isTransform) {
           Reflect.deleteProperty(result, "children");
           Object.assign(result, {
@@ -157,17 +157,29 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           });
         }
       } else if (statusNumber == 2) {
-        result = {
+        result = Object.assign({}, {
           lazy: true,
           reserve: true,
           children: "childrenList",
           hasChild: "hasChildren",
           loadMethod: loadChildrenMethod,
           accordion: state.openOnly > 0
-        };
+        }, result);
       }
       return result;
     });
+    const keyboardConfig = computed(() => {
+      return {
+        editMethod({
+          row,
+          column
+        }) {
+          const $table = xGrid.value;
+          $table.setEditCell(row, column);
+        },
+        ...props.columnConfig.keyboardConfig || {}
+      };
+    });
     const hideAllWrap = (e) => {
       const path = e.path || e.composedPath && e.composedPath();
       const noWrap = (className) => {
@@ -2361,7 +2373,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           iconClose: "iconfont icon-a-xitongtubiaotianjia",
           ...unref(getAttr)("expand-config")
         },
-        "keyboard-config": _ctx.columnConfig.keyboardConfig || {},
+        "keyboard-config": unref(keyboardConfig),
         "edit-rules": _ctx.columnConfig.editRules || {},
         "menu-config": _ctx.menuConfig,
         onCellDblclick: rowdblclick,

package/es/components/big-table/src/components/edit-form/edit-select.js

@@ -35,6 +35,7 @@ var EditSelect = defineComponent({
       isShow
     } = useCommon(props, attrs, true);
     const state = reactive({
+      keyupValue: attrs.value,
       options: [],
       loading: false,
       keyword: "",
@@ -46,6 +47,9 @@ var EditSelect = defineComponent({
     const setOptions = async () => {
       if (props.col.options) {
         state.options = JSON.parse(JSON.stringify(props.col.options));
+        if (!state.keyupValue && state.options.length) {
+          state.keyupValue = state.options[0].value;
+        }
       } else {
         `${props.col.columnName}_options`;
         const obj = {
@@ -82,6 +86,30 @@ var EditSelect = defineComponent({
         selectSearch("");
       }
     };
+    function onKeyup(event) {
+      const {
+        key
+      } = event;
+      if (state.config.multiple || !["ArrowUp", "ArrowDown"].includes(key))
+        return;
+      let index = state.options.findIndex((item) => item.value === state.keyupValue);
+      if (!~index)
+        return;
+      const length = state.options.length;
+      if (key === "ArrowUp") {
+        index = index === 0 ? length - 1 : index - 1;
+      }
+      if (key === "ArrowDown") {
+        index = index === length - 1 ? 0 : index + 1;
+      }
+      state.keyupValue = state.options[index].value;
+      onUpdateValue(state.keyupValue);
+    }
+    function onBlur() {
+      var _a, _b;
+      if (!state.keyupValue)
+        onUpdateValue((_b = (_a = state.options) == null ? void 0 : _a[0]) == null ? void 0 : _b.value);
+    }
     init();
     return () => createVNode(NSelect, mergeProps({
       "ref": formRef,
@@ -94,7 +122,9 @@ var EditSelect = defineComponent({
       "filterable": true,
       "placeholder": props.col.placeholder || "\u8BF7\u9009\u62E9",
       "loading": state.loading,
-      "onUpdateValue": onUpdateValue
+      "onUpdateValue": onUpdateValue,
+      "onKeyup": onKeyup,
+      "onBlur": onBlur
     }), null);
   }
 });

package/es/components/big-table/src/hooks/useEvent.js

@@ -17,12 +17,11 @@ const useEvent = (props, state, emit, xGrid, anchorEvent) => {
     if (!activeRow && !isEdit)
       return;
     if (isEdit) {
-      const { row, $rowIndex, rowIndex, column } = xGridRef.getEditRecord() || {};
+      const data = xGridRef.getEditRecord() || xGridRef.getSelectedCell() || {};
       emit("keyboard", {
         key: $event.key,
-        index: $rowIndex != null ? $rowIndex : rowIndex,
-        row,
-        column
+        ...data,
+        index: data.rowIndex
       });
       return;
     }