cnhis-design-vue 3.1.22-beta.0 → 3.1.22-beta.10

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

@@ -329,6 +329,14 @@ declare const BigTable: SFCWithInstall<import("vue").DefineComponent<{
             showInsertStatus?: boolean | undefined;
             showAsterisk?: boolean | undefined;
             autoClear?: boolean | undefined;
+            beforeEditMethod?: ((params: {
+                row: any;
+                rowIndex: number;
+                column: import("vxe-table").VxeTableDefines.ColumnInfo;
+                columnIndex: number;
+                $table: import("vxe-table").VxeTableConstructor & import("vxe-table").VxeTablePrivateMethods;
+                $grid: import("vxe-table").VxeGridConstructor | null | undefined;
+            }) => boolean) | undefined;
             activeMethod?: ((params: {
                 row: any;
                 rowIndex: number;

package/es/components/big-table/index2.js

@@ -1,6 +1,5 @@
 import { COMPONENT_NAMESPACE } from '../../shared/global/variable2.js';
 import { safeComponentRegister } from '../../shared/utils/index2.js';
-import { loadVxeTable } from '../../shared/utils/loadVxe2.js';
 import { expandXEUtils } from '../../shared/utils/utilExpand.js';
 import '../index2.js';
 import script from './src/BigTable.js';
@@ -12,7 +11,6 @@ const BigTable = script;
 BigTable.install = function(app) {
   safeComponentRegister(app, BigTable, COMPONENT_NAMESPACE + "BigTable");
   safeComponentRegister(app, Grid, COMPONENT_NAMESPACE + "Grid");
-  loadVxeTable(app);
   return expandXEUtils();
 };
 

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

@@ -327,6 +327,14 @@ declare const _default: import("vue").DefineComponent<{
             showInsertStatus?: boolean | undefined;
             showAsterisk?: boolean | undefined;
             autoClear?: boolean | undefined;
+            beforeEditMethod?: ((params: {
+                row: any;
+                rowIndex: number;
+                column: import("vxe-table").VxeTableDefines.ColumnInfo;
+                columnIndex: number;
+                $table: import("vxe-table").VxeTableConstructor & import("vxe-table").VxeTablePrivateMethods;
+                $grid: import("vxe-table").VxeGridConstructor | null | undefined;
+            }) => boolean) | undefined;
             activeMethod?: ((params: {
                 row: any;
                 rowIndex: number;

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

@@ -14,8 +14,7 @@ import { useAnnotation } from './hooks/useAnnotation.js';
 import { useSeparateRow, useSeparateMap } from './hooks/useSeparateRow2.js';
 import { SettingsSharp, CaretDown, CaretForward, CopyOutline, SyncOutline } from '@vicons/ionicons5';
 import NoData from './components/NoData.js';
-import script from '../../../shared/components/TextOverTooltip/TextOverTooltip.js';
-import script$1 from '../../../shared/components/SvgIcon/SvgIcon.js';
+import script from '../../../shared/components/SvgIcon/SvgIcon.js';
 import { useMessage, NIcon, NTooltip, NCheckbox, NCheckboxGroup, NGrid, NGi, NSpace, NButton, NPopconfirm, NProgress, NDropdown, NSwitch, NPopover, NTabs, NTabPane } from 'naive-ui';
 import Grid from '../../grid/index2.js';
 import XEUtils from 'xe-utils';
@@ -291,11 +290,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           selectTableDisable: false
         };
       });
-      await table.loadData(await separate(formatList, data));
+      if (props.columnConfig.isEdit) {
+        await table.loadData(data);
+      } else {
+        await table.loadData(await separate(formatList, data));
+      }
       table.setCurrentRow({});
       setCurrentPageRowChecked();
       setGroupTreeExpand();
-      resetTableInlineEditStatus();
     };
     separateHandle.clear();
     separateHandle.add(() => loadData(props.data));
@@ -430,7 +432,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         };
       }
       const currentColumns = fieldList.map((item, index) => {
-        var _a2, _b2, _c2, _d, _e, _f, _g;
+        var _a2, _b2, _c2, _d, _e, _f, _g, _h;
         let filterField = false;
         let filterItems = [];
         try {
@@ -445,6 +447,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         let sortable = props.isNestTable ? false : !filterField && item.isSort == 1 && notParticipatingSort != 1 && item.isMerge != 1;
         let treeNode = props.isNestTable ? false : state.isTree != 0 ? index === 0 : false;
         let type = index === 0 && props.showNestTable ? "expand" : "";
+        const isShow = item.isShow == 1 && ((_e = item == null ? void 0 : item.settingObj) == null ? void 0 : _e.isHide) != 1;
         if (isScanMultiTable2) {
           fixed = "";
           sortable = false;
@@ -452,15 +455,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           type = "";
         }
         const col = Object.assign(item, {
-          visible: item.columnName == "operatorColumn" ? showButtonTop == 0 : item.isShow == 1,
+          visible: item.columnName == "operatorColumn" ? showButtonTop == 0 : isShow,
           field: item.columnName,
           title: handleName(item, "title"),
           minWidth: item.colWidth,
           fixed,
           sortable,
           headerClassName: "mycolumn",
-          resizable: (_e = item.resizable) != null ? _e : true,
-          showOverflow: (_f = item.showOverflow) != null ? _f : "title",
+          resizable: (_f = item.resizable) != null ? _f : true,
+          showOverflow: (_g = item.showOverflow) != null ? _g : "title",
           treeNode,
           type,
           slots: {
@@ -475,7 +478,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         if (filterField && !props.isNestTable && !isScanMultiTable2) {
           state.filterFields[item.columnName] = Object.assign({}, XEUtils.clone({
             ...item,
-            setting: item.settingObj
+            setting: item.settingObj || {}
           }, true), {
             visible: false,
             left: "initial",
@@ -497,7 +500,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         if (!isScanMultiTable2 && !isFunction(attr.footerMethod) && !isFunction(attr["footer-method"])) {
           col.slots.footer = "tooltip_footer";
         }
-        if (props.showNestTable && state.isTree == 0 && ((_g = props.curNestColumnConfig) == null ? void 0 : _g.isTree) == 0) {
+        if (props.showNestTable && state.isTree == 0 && ((_h = props.curNestColumnConfig) == null ? void 0 : _h.isTree) == 0) {
           col.slots.content = "nest_table_content";
         }
         return col;
@@ -544,7 +547,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         },
         editTrigger: state.editConfig.trigger
       };
-      if (formType === "date" || formType === "time") {
+      if (["date", "time"].includes(formType)) {
         propsData.formattedValue = row[col.columnName];
       } else if (formatMap) {
         propsData.value = row[formatMap.value];
@@ -967,33 +970,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const toolTipTitle = (item, type) => {
       var _a;
       let name = item.formTitle || item.alias || item.title;
-      let tooltipTitle = item.alias;
-      let isAlias = false;
+      item.alias;
       if (((_a = props.tableOptions) == null ? void 0 : _a.dataSourceType) == "guage") {
-        tooltipTitle = item.alias || item.title;
-      }
-      if (name && tooltipTitle && name !== tooltipTitle) {
-        isAlias = !!tooltipTitle;
+        item.alias || item.title;
       }
       if (isFunction(item.headerSlotFn))
         return () => item.headerSlotFn(item);
       if (type === "format")
-        return [createVNode(script, {
-          "tooltipTitle": tooltipTitle,
-          "content": name,
-          "isAlias": isAlias
-        }, null), renderAnnotation(item)];
+        return [createVNode("span", {
+          "class": "header-title-span"
+        }, [name]), renderAnnotation(item)];
       return () => {
-        return [createVNode(script, {
-          "tooltipTitle": tooltipTitle,
-          "content": name,
-          "isAlias": isAlias
-        }, {
-          default: () => [item.treeNode && state.isTree == 1 ? createVNode(NIcon, {
-            "component": state.isExpand && state.total < 1001 ? CaretDown : CaretForward,
-            "onClick": (e) => triggerExpand(e, state.isExpand)
-          }, null) : ""]
-        }), renderAnnotation(item)];
+        return [item.treeNode && state.isTree == 1 ? createVNode(NIcon, {
+          "component": state.isExpand && state.total < 1001 ? CaretDown : CaretForward,
+          "onClick": (e) => triggerExpand(e, state.isExpand)
+        }, null) : "", createVNode("span", {
+          "class": "header-title-span"
+        }, [name]), renderAnnotation(item)];
       };
     };
     const triggerExpand = (e, isExpand) => {
@@ -1630,7 +1623,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         "onPositiveClick": () => confirmScanMulti(params)
       }, {
         trigger() {
-          return createVNode(script$1, {
+          return createVNode(script, {
             "class": "scan-multi-delete",
             "iconClass": "shanchu"
           }, null);
@@ -1847,7 +1840,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }, [createVNode("img", {
         "class": "bigTable-qr-img",
         "src": src
-      }, null), createVNode("span", null, [createVNode(script$1, {
+      }, null), createVNode("span", null, [createVNode(script, {
         "iconClass": "fangda"
       }, null)])])];
     };
@@ -1931,7 +1924,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           }, null);
         } else {
           icon = createVNode(NTooltip, null, {
-            trigger: () => createVNode(script$1, {
+            trigger: () => createVNode(script, {
               "iconClass": btn.icon,
               "style": {
                 marginRight: mr
@@ -1941,7 +1934,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           });
         }
       } else if (btn.iconSetting) {
-        icon = createVNode(script$1, {
+        icon = createVNode(script, {
           "iconClass": JSON.parse(btn.iconSetting).icon,
           "style": {
             marginRight: mr

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

@@ -1,7 +1,7 @@
-import { defineComponent, computed, createVNode, mergeProps } from 'vue';
+import { defineComponent, ref, computed, watch, createVNode, mergeProps } from 'vue';
 import { generateTimeFormat } from '../../../../../shared/utils/index2.js';
-import { isFunction } from 'lodash-es';
-import { NDatePicker } from 'naive-ui';
+import { isFunction, isNaN } from 'lodash-es';
+import { NDatePicker, NPopover, NInput } from 'naive-ui';
 import { useCommon } from './useCommon2.js';
 
 var EditDate = defineComponent({
@@ -33,7 +33,9 @@ var EditDate = defineComponent({
       formRef,
       isShow
     } = useCommon(props, attrs);
+    const __value = ref(attrs.formattedValue);
     const onConfirm = (value) => {
+      __value.value = value;
       emit("formChange", {
         value,
         row: props.row,
@@ -107,6 +109,45 @@ var EditDate = defineComponent({
         return customDateDisabled(ts, props.row);
       };
     }
+    function getFormatDate(str) {
+      if (!str)
+        return "";
+      const d = new Date(str);
+      const month = `00${d.getMonth() + 1}`.slice(-2);
+      const day = `00${d.getDate()}`.slice(-2);
+      const valueFormat = formatConfig.value.valueFormat;
+      const format = valueFormat.includes("/") ? "/" : valueFormat.includes(".") ? "." : "-";
+      let date = `${d.getFullYear()}${format}${month}${format}${day}`;
+      const dTime = d.getTime();
+      const connectFieldTime = new Date(props.row[connectField]).getTime();
+      if (props.row[connectField] && (isStartDate && dTime > connectFieldTime || isEndDate && dTime < connectFieldTime)) {
+        date = "";
+      }
+      return date;
+    }
+    function onBlur() {
+      let date = __value.value;
+      if (isNaN(new Date(date).getTime())) {
+        if (/^\d{8}$/.test(date)) {
+          const dateNew = `${date.slice(0, 4)} ${date.slice(4, 6)} ${date.slice(6)}`;
+          date = "";
+          if (!isNaN(new Date(dateNew).getTime())) {
+            date = getFormatDate(dateNew);
+          }
+        } else {
+          date = "";
+        }
+      } else {
+        date = getFormatDate(date);
+      }
+      __value.value = date || void 0;
+      emit("formChange", {
+        value: __value.value,
+        row: props.row,
+        column: props.col,
+        index: props.index
+      });
+    }
     const formatConfig = computed(() => {
       var _a;
       const valueFormat = ((_a = props.col.componentProps) == null ? void 0 : _a.valueFormat) || props.col.valueFormat || "yyyy-MM-dd HH:mm:ss";
@@ -130,13 +171,43 @@ var EditDate = defineComponent({
     if (config.type.includes("time")) {
       config.isTimeDisabled = customDateDisabledDecorator(props.col.isTimeDisabled) || isTimeDisabled;
     }
-    return () => createVNode(NDatePicker, mergeProps({
-      "ref": formRef,
-      "show": isShow.value,
-      "onUpdate:show": ($event) => isShow.value = $event
-    }, attrs, config, {
-      "onUpdateFormattedValue": onConfirm
-    }), null);
+    watch(() => attrs.formattedValue, (value) => {
+      __value.value = value;
+    });
+    return () => {
+      var _a;
+      return ((_a = props.col.componentProps) == null ? void 0 : _a.isPopover) ? createVNode(NPopover, mergeProps({
+        "show": isShow.value,
+        "trigger": "click",
+        "showArrow": false,
+        "placement": "bottom-start",
+        "style": "padding: 0"
+      }, props.col.componentProps || {}, {
+        "onClickoutside": () => isShow.value = false
+      }), {
+        trigger: () => createVNode(NInput, {
+          "ref": formRef,
+          "clearable": true,
+          "value": __value.value,
+          "onUpdate:value": ($event) => __value.value = $event,
+          "onBlur": onBlur,
+          "onClick": () => isShow.value = true
+        }, null),
+        default: () => createVNode(NDatePicker, mergeProps({
+          "panel": true,
+          "show": isShow.value,
+          "onUpdate:show": ($event) => isShow.value = $event
+        }, attrs, config, {
+          "onUpdateFormattedValue": onConfirm
+        }), null)
+      }) : createVNode(NDatePicker, mergeProps({
+        "ref": formRef,
+        "show": isShow.value,
+        "onUpdate:show": ($event) => isShow.value = $event
+      }, attrs, config, {
+        "onUpdateFormattedValue": onConfirm
+      }), null);
+    };
   }
 });
 

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

@@ -54,6 +54,7 @@ var EditInput = defineComponent({
       });
     }
     const config = {
+      clearable: true,
       placeholder: props.col.placeholder || "\u8BF7\u8F93\u5165",
       ...props.col.componentProps || {}
     };

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

@@ -65,7 +65,7 @@ const useEdit = (props, state, emit, xGrid) => {
   }) => {
     var _a, _b;
     let oldValue = row[column.columnName];
-    if (((column == null ? void 0 : column.formType) === "input" || (column == null ? void 0 : column.formType) === "number") && ((_a = props.columnConfig) == null ? void 0 : _a.formValidate)) {
+    if (["input", "number"].includes(column == null ? void 0 : column.formType) && ((_a = props.columnConfig) == null ? void 0 : _a.formValidate)) {
       row[column.columnName] = (_b = props.columnConfig) == null ? void 0 : _b.formValidate({
         row,
         column,
@@ -82,7 +82,7 @@ const useEdit = (props, state, emit, xGrid) => {
     } else {
       row[column.columnName] = value;
     }
-    if (((column == null ? void 0 : column.formType) === "date" || (column == null ? void 0 : column.formType) === "time") && !value) {
+    if (["date", "time"].includes(column == null ? void 0 : column.formType) && !value) {
       row[column.columnName] = void 0;
     }
     emit("formChange", { value, row, column, index, oldValue, ...type ? { type } : {} });