plain-design 1.0.0-beta.131 → 1.0.0-beta.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.131",
+  "version": "1.0.0-beta.133",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/AutoTable/auto-table.scss

@@ -38,6 +38,21 @@
       }
     }
 
+    @include comp(table) {
+      &.table-border {
+        margin: $margin 0;
+      }
+    }
+
+    @include comp(auto-table-tips) {
+
+      & + .#{componentName(table)} {
+        &.table-border {
+          margin-top: 0;
+        }
+      }
+    }
+
     & + .#{componentName(auto-table)}, & + .#{componentName(tab-group)} {
       margin-top: $margin;
     }
@@ -146,6 +161,12 @@
       }
     }
 
+    &[data-no-clear=true] {
+      .auto-table-tips-label {
+        padding-right: 4px
+      }
+    }
+
     /*    & + .#{componentName(button)} {
           @include comp(icon) {
             position: relative;

package/src/packages/components/AutoTable/filter/useTableOption.filter.state.ts

@@ -84,9 +84,10 @@ export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks,
    * @author  韦胜健
    * @date    2023.1.3 21:29
    */
-  const clearAll = (reload?: boolean) => {
+  const clearAll = async (reload?: boolean) => {
+    await hooks.onClearFilter.exec(undefined);
     state.filters.forEach(i => i.clear());
-    reload !== false && methods.pageMethods.reload();
+    reload !== false && await methods.pageMethods.reload();
   };
 
   /**

package/src/packages/components/AutoTable/use/useTableOption.column.popper.tsx

@@ -233,7 +233,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
 
     const open = async (plc: tPlc) => {
       popperHandler.close();
-      const wrapperStyles = { width: '400px' };
+      const wrapperStyles = { width: '700px' };
       const field = plc.props.searchField || plc.props.field;
       if (!field) {return;}
       const excludeCode = nextPlcExcludeCode();

package/src/packages/components/AutoTable/use/useTableOption.fill.tsx

@@ -80,7 +80,7 @@ export const useTableOptionFill = AutoModule.createRegistration((
         };
       })();
 
-      await delay(73)
+      await delay(73);
       /**
        * 计算可以用来渲染行的高度
        * parent.top+parent.height可以得到父节点底边界的top值；
@@ -105,7 +105,7 @@ export const useTableOptionFill = AutoModule.createRegistration((
       const showRows = Math.floor(availableHeight / bodyRowHeight);
 
       /*更新分页查询信息*/
-      pagination.state.size = showRows;
+      pagination.state.size = config.pageSize || showRows;
       pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (pagination.state.pageSizeOptions.unshift(showRows));
       state.showRows = showRows;
       state.init = true;

package/src/packages/components/AutoTable/use/useTableOption.hooks.tsx

@@ -53,6 +53,7 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     onCollectSortData: createSyncHooks<(sortData: iTableSortData[]) => void>(true),    // 收集排序数据
     onQueryParam: createSyncHooks<(queryParam: iFilterHandlerQueryParam | null) => void>(),   // 收集筛选参数
     onTips: createSyncHooks<(tips: TableOptionSpace.iTableOptionTipMeta[]) => void>(true),              // 渲染提示
+    onClearFilter: createHooks<() => void>(),                               // 清空筛选动作
 
     /*---------------------------------------触发动作-------------------------------------------*/
     // 触发新建动作
@@ -63,8 +64,9 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     /*---------------------------------------table事件-------------------------------------------*/
     onClickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
     onDblclickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onClickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onDblclickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
+    onClickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
+    onDblclickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
+    onContextmenuCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
     onClickHead: createHooks<(data: { plc: tPlcType, e: iMouseEvent }) => void>(),
 
     /*---------------------------------------load-------------------------------------------*/

package/src/packages/components/AutoTable/use/useTableOption.pagination.tsx

@@ -30,7 +30,7 @@ export const useTableOptionPagination = AutoModule.createRegistration((
     createInitialData: (): iAutoTablePageData => {
       return {
         page: 1,
-        size: config.showRows,
+        size: config.pageSize || config.showRows,
         hasNext: true,
         total: null as null | number,
       };

package/src/packages/components/AutoTable/use/useTableOption.table.tsx

@@ -1,6 +1,6 @@
 import {Table} from "../../Table";
 import {iTableNode} from "../../Table/table/utils/table.utils";
-import {tPlcType} from "../../Table/plc/utils/plc.utils";
+import {tPlc, tPlcType} from "../../Table/plc/utils/plc.utils";
 import {PlainObject} from "@peryl/utils/event";
 import '../utils/TableOption.space';
 import {PlcIndex} from "../../Table/standard/PlcIndex";
@@ -35,8 +35,9 @@ export const useTableOptionTable = AutoModule.createRegistration((
   const handler = {
     onClickRow: (node: iTableNode, e: iMouseEvent) => {hooks.onClickRow.exec({ node, e });},
     onDblclickRow: (node: iTableNode, e: iMouseEvent) => {hooks.onDblclickRow.exec({ node, e });},
-    onClickCell: (node: iTableNode, e: iMouseEvent) => {hooks.onClickCell.exec({ node, e });},
-    onDblclickCell: (node: iTableNode, e: iMouseEvent) => {hooks.onDblclickCell.exec({ node, e });},
+    onClickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => {hooks.onClickCell.exec({ node, e, plc });},
+    onDblclickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => {hooks.onDblclickCell.exec({ node, e, plc });},
+    onContextmenuCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => {hooks.onContextmenuCell.exec({ node, e, plc });},
     onClickHead: (plc: tPlcType, e: iMouseEvent) => {hooks.onClickHead.exec({ plc, e });},
     onCurrentChange: (data: PlainObject | null) => {hooks.onCurrentChange.exec(data);},
     onCollectPlcData: hooks.onCollectPlcData.exec,
@@ -73,6 +74,7 @@ export const useTableOptionTable = AutoModule.createRegistration((
             config: cache.tablePropsConfig,
             headRowHeight: config.headRowHeight,
             bodyRowHeight: config.bodyRowHeight,
+            ...config.tableProps,
             ...handler,
           })}
           v-slots={{ default: () => hooks.onRenderColumns.exec(), }}

package/src/packages/components/AutoTable/use/useTableOption.tips.tsx

@@ -77,10 +77,10 @@ export const RenderTableOptionTipItem = designComponent({
       }),
     });
     return () => (
-      <div onClick={props.tip.onClick} className="auto-table-tips-item">
+      <div onClick={props.tip.onClick} className="auto-table-tips-item" data-no-clear={!props.tip.onClear || props.tip.noClear}>
         <span className="auto-table-tips-label" ref={onRef.el}>{props.tip.display()}</span>
         <div className="auto-table-tips-separator"/>
-        {!!props.tip.onClear && <Icon className="auto-table-tips-close" icon="pi-close" onClick={props.tip.onClear}/>}
+        {!!props.tip.onClear && !props.tip.noClear && <Icon className="auto-table-tips-close" icon="pi-close" onClick={props.tip.onClear}/>}
       </div>
     );
   },

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -12,7 +12,7 @@ import {FilterFormSingle} from "../../FilterFormSingle";
 import {Pagination} from "../../Pagination";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
 import {iEffects} from '@peryl/utils/createEffects';
-import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
+import {iTableNode, iTablePropsType, iTableSortData} from "../../Table/table/utils/table.utils";
 import {eTableOptionEditType} from "./TableOption.utils";
 
 export namespace TableOptionSpace {
@@ -36,6 +36,7 @@ export namespace TableOptionSpace {
     loadOnStart?: boolean,                                              // 是否页面初始化的时候就加载数据
     copyDefaultExcludeKeys: string[],                                   // 复制一行的时候，不复制的属性
     showRows: number,                                                   // 显示的行数（自动计算表格的高度）
+    pageSize?: number,                                                  // 查询的行数
     showRowsMode: 'fixed' | 'auto',                                     // 显示行数的模式，自动根据 加载的数据展示还是固定行数
     sort?: iTableOptionSortParam | iTableOptionSortParam[],             // 排序方式
     getCache: (key: string) => iTableOptionCacheData | undefined,       // 获取缓存配置信息
@@ -68,7 +69,8 @@ export namespace TableOptionSpace {
     paginationAttrs?: Partial<typeof Pagination.use.props>,             // 给分页组件传递的属性设置
     parentOption?: Record<string, any>,                                 // 父表的option
     parentMap?: Record<string, any>,                                    // 父表的字段映射
-    minShowRows?: number,                                              // BaseTable的minShowRows
+    minShowRows?: number,                                               // BaseTable的minShowRows
+    tableProps?: Partial<iTablePropsType>,                              // 传递给table的控制属性
     // todo
     noHead?: boolean,                                                   // 不显示表头
   }
@@ -146,6 +148,7 @@ export namespace TableOptionSpace {
     display: () => RenderNode,
     onClear?: (e: iMouseEvent) => void,
     onClick: () => void,
+    noClear?: boolean,
   }
 
   /**

package/src/packages/components/Dropdown/index.tsx

@@ -11,6 +11,8 @@ import {DropdownGroup} from "../DropdownGroup";
 import {unit} from "@peryl/utils/unit";
 import {Popup} from "../Popup";
 import {ePopupTrigger, iPopupAnimation, iPopupPlacement, iPopupTrigger} from "../usePopup/utils/popup.utils";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {removeUnit} from "@peryl/utils/removeUnit";
 
 export const Dropdown = designComponent({
   name: '-dropdown',
@@ -30,6 +32,7 @@ export const Dropdown = designComponent({
 
     id: { type: String },                                                                 // 调试plain-popper标识
     optionWidth: {},                                                                      // option选项宽度
+    scrollHeight: { type: Number },                                                       // 选项过多时自定义滚动高度
   },
   emits: {
     onUpdateModelValue: (val?: boolean) => true,
@@ -46,6 +49,8 @@ export const Dropdown = designComponent({
   },
   setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
 
+    const configuration = ApplicationConfigurationProvider.inject();
+
     const { styleComputed } = useStyle();
 
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
@@ -58,6 +63,14 @@ export const Dropdown = designComponent({
 
     const dropdownContentWidth = computed(() => !props.optionWidth ? undefined : unit(props.optionWidth as any)!);
 
+    const scrollHeight = computed((): number => {
+      if (props.scrollHeight != null) {return props.scrollHeight;}
+      const fontSize = Number(removeUnit(configuration.value.theme.vars[`font-size-${styleComputed.value.size}`]));
+      const paddingY = Number(removeUnit(configuration.value.theme.vars[`dropdown-size-${styleComputed.value.size}-padding-y`]));
+      const itemHeight = fontSize + paddingY * 2 + 6 + 2;
+      return itemHeight * 6;
+    });
+
     const handler: iDropdownContext["handler"] = {
       onClickOption: (optionContext) => {
         if (optionContext.hasChildren.value) {
@@ -110,7 +123,7 @@ export const Dropdown = designComponent({
       } else {
         return renderDropdownPanel({
           ...publicDropdownPanelParams,
-          attrs: { style: { height: '200px', width: dropdownContentWidth.value, }, key },
+          attrs: { style: { height: scrollHeight.value + 'px', width: dropdownContentWidth.value, }, key },
           content: <>
             <Scroll>
               {children}

package/src/packages/components/Form/form.scss

@@ -33,6 +33,10 @@
     box-sizing: border-box;
     position: relative;
     vertical-align: top;
+    .form-item-cell-tip {
+      color: plv(text-3);
+      vertical-align: -0.15em;
+    }
     .form-item-label {
       vertical-align: top;
       display: inline-block;

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -71,6 +71,7 @@ export const FormItemLayoutPropsOption = {
   colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
   validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
   negativeInnerMarginTop: { type: Boolean },                                          // inner节点启用负的marginTop值
+  tip: { type: [String, Function] as PropType<string | (() => any)> },                // 提示说明
 } as const;
 
 /**

package/src/packages/components/FormItem/index.tsx

@@ -5,6 +5,9 @@ import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
 import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
 import {FormItemValidateMessage} from "./FormItemValidateMessage";
+import Tooltip from "../Tooltip";
+import {getFunctionValue} from "@peryl/utils/getFunctionValue";
+import Icon from "../Icon";
 
 export const FormItem = designComponent({
   name: '-form-item',
@@ -104,6 +107,10 @@ export const FormItem = designComponent({
               {slots.labelSlot(props.label)}
               {slots.labelAppend()}
               {formItemLayout.colon.value && <i> :</i>}
+              {!!props.tip && <Tooltip v-slots={{
+                default: () => <Icon icon="pi-info-circle" className="form-item-cell-tip"/>,
+                popper: () => getFunctionValue(props.tip)
+              }}/>}
             </div>
           )}
           <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>

package/src/packages/components/Input/useSuggestionInput.tsx

@@ -136,9 +136,10 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
           searchText,
           props: {
             scrollNum: 6,
-            scrollHeight: 150,
+            scrollHeight: 200,
           },
           onRefScroll: innerOnRef.scroll,
+          scrollHeight: { value: 200 }
         });
         matchOptionPropsList = _matchOptionPropsList;
         return (

package/src/packages/components/ListOption/index.tsx

@@ -0,0 +1,20 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+
+export const ListOption = designComponent({
+  name: 'list-option',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    label: { type: String }
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClassCache(() => [getComponentCls('list-option')]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default(props.label)}
+      </div>
+    );
+  },
+});

package/src/packages/components/ListPanel/index.tsx

@@ -0,0 +1,30 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './list-panel.scss';
+
+export const ListPanel = designComponent({
+  name: 'list-panel',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    ...StyleProps,
+    ...EditProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    useEdit();
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('list-panel'),
+      `list-panel-size-${styleComputed.value.size}`
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

package/src/packages/components/ListPanel/list-panel.scss

@@ -0,0 +1,20 @@
+@include comp(list-panel) {
+
+  padding: 0 2px;
+
+  @include sizeMixin(list-panel, ()) {
+
+    @include comp(list-option) {
+      font-size: $font-size;
+      padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
+      border-radius: $border-radius;
+      margin: 2px 0;
+      cursor: pointer;
+      transition: all ease 300ms;
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+
+  }
+}

package/src/packages/components/Select/createPublicSelectRender.tsx

@@ -22,6 +22,7 @@ export function createPublicSelectRender(
     slots,
     editComputed,
     styleComputed,
+    scrollHeight,
   }: iSelectCompositionParams,
   {
     isActivated,
@@ -123,7 +124,7 @@ export function createPublicSelectRender(
   const hover = createSelectHover({
     defaultCurrent,
     refs,
-    scrollHeight: () => props.scrollHeight,
+    scrollHeight: () => scrollHeight.value,
     getMatchOptionsLength: () => optionListHandler.getMatchOptionPropsList().length
   });
 
@@ -236,7 +237,7 @@ export function createPublicSelectRender(
           const render = () => {
             /*如果显示的选项大于6个，则使用虚拟滚动显示，否则直接显示*/
             return (matchOptionPropsList.length > props.scrollNum ?
-              (<div style={{ height: unit(props.scrollHeight)! }}>
+              (<div style={{ height: unit(scrollHeight.value)! }}>
                 <VirtualList data={matchOptionPropsList} size={(() => {
                   const { virtualRowSize } = props;
                   return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
@@ -260,6 +261,7 @@ export function createPublicSelectRender(
             props,
             onRefScroll: onRef.scroll,
             innerState,
+            scrollHeight,
           });
           optionPropsList = ret.optionPropsList;
           matchOptionPropsList = ret.matchOptionPropsList;

package/src/packages/components/Select/decodeSelectRenderNode.tsx

@@ -12,6 +12,7 @@ export function decodeSelectRenderNode(
     props,
     onRefScroll,
     innerState,
+    scrollHeight,
   }: {
     renderNode: RenderNode,
     searchText: string,
@@ -22,7 +23,8 @@ export function decodeSelectRenderNode(
       scrollHeight: number,
     },
     onRefScroll: (scroll: any) => void,
-    innerState?: { renderKey: string }
+    innerState?: { renderKey: string },
+    scrollHeight: { value: number },
   }) {
   const selectOptionDecoder = createSelectOptionDecoder();
   renderNode = deepCloneRenderNode(renderNode);
@@ -40,7 +42,7 @@ export function decodeSelectRenderNode(
     }
     /*如果显示的选项大于6个，则使用Scroll滚动显示，否则直接显示*/
     return (matchOptionPropsList.length > props.scrollNum ?
-      (<div style={{ height: unit(props.scrollHeight)! }}>
+      (<div style={{ height: unit(scrollHeight.value)! }}>
         <Scroll ref={onRefScroll}>
           {renderNode}
         </Scroll>

package/src/packages/components/Select/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, reactive, useClasses} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, reactive, useClasses} from "@peryl/react-compose";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {createSingleSelectRender} from "./createSingleSelectRender";
 import {createMultipleSelectRender} from "./createMultipleSelectRender";
@@ -10,6 +10,8 @@ import {createIsMatch} from "../../utils/isObjectCommonMatch";
 import Input from "../Input";
 import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {removeUnit} from "@peryl/utils/removeUnit";
 
 export const Select = designComponent({
   name: '-select',
@@ -21,6 +23,7 @@ export const Select = designComponent({
   setup({ props, slots, scopeSlots, event: { emit } }) {
 
     const parentPopupId = useParentPopupId();
+    const configuration = ApplicationConfigurationProvider.inject();
 
     const { editComputed } = useEdit();
     const { styleComputed } = useStyle();
@@ -53,6 +56,14 @@ export const Select = designComponent({
       }
     ]);
 
+    const scrollHeight = computed((): number => {
+      if (props.scrollHeight != null) {return props.scrollHeight;}
+      const fontSize = Number(removeUnit(configuration.value.theme.vars[`font-size-${styleComputed.value.size}`]));
+      const paddingY = Number(removeUnit(configuration.value.theme.vars[`dropdown-size-${styleComputed.value.size}-padding-y`]));
+      const itemHeight = fontSize + paddingY * 2 + 6 + 2;
+      return itemHeight * 6;
+    });
+
     const selectCompositionParams: iSelectCompositionParams = {
       props,
       classes,
@@ -64,6 +75,7 @@ export const Select = designComponent({
       styleComputed,
       isMatch: createIsMatch(props),
       getPublicPopperAttrs,
+      scrollHeight,
     };
 
     const methods = {

package/src/packages/components/Select/select.utils.tsx

@@ -53,7 +53,7 @@ export const SelectPropOptions = {
   handleFilterChange: { type: Function as PropType<(text: string) => void> },// 手动处理搜索值变化
 
   scrollNum: { type: Number, default: 6 },  // 最多显示的下拉个数，超过这个数就会滚动展示
-  scrollHeight: { type: Number, default: 150 },// 滚动展示下拉选项的时候的高度
+  scrollHeight: { type: Number, default: null },// 滚动展示下拉选项的时候的高度
 
   virtualData: { type: Array as PropType<iSelectOptionProps[]> },
   virtualRowSize: { type: Number },// 虚拟滚动的时候的行高
@@ -135,7 +135,8 @@ export type iSelectCompositionParams = {
   scopeSlots: tScopeSlotsType<typeof SelectScopeSlotsOption>,
   editComputed: tEditComputed,
   styleComputed: { value: { size: typeof ThemeSize.TYPE } },
-  classes: { value: any, }
+  classes: { value: any, },
+  scrollHeight: { value: number }
 }
 
 /**

package/src/packages/components/Table/plc/use/useTableAutoSpan.tsx

@@ -0,0 +1,112 @@
+import {computed, inject, provide} from "@peryl/react-compose";
+import {Table} from "../../index";
+
+export function useTableAutoSpan(getConfig: () => { data: Record<string, any>[] }) {
+
+  const table = Table.use.inject(null);
+
+  const spans = computed(() => {
+    const { data } = getConfig();
+    const bodyPlcList = table?.bodyPlcList.value;
+    if (!bodyPlcList) {return null;}
+    const rowSpanFields = Array.from(new Set(bodyPlcList.filter(i => i.props.autoRowSpan && !!i.props.field).map(i => i.props.field!)));
+    const colSpanFields = Array.from(new Set(bodyPlcList.filter(i => i.props.autoColSpan && !!i.props.field).map(i => i.props.field!)));
+    // console.log({ data, rowSpanFields, colSpanFields, });
+    const spans = calcSpans(data, { rowSpanFields, colSpanFields });
+    // console.log(spans);
+    return { spans, data };
+  });
+
+  provide('@@TABLE_AUTO_SPAN', spans);
+
+  return spans;
+}
+
+export function injectTableAutoSpan() {
+  return inject('@@TABLE_AUTO_SPAN') as ReturnType<typeof useTableAutoSpan>;
+}
+
+export const calcRowSpans = (data: Record<string, any>[], fields: string[]) => {
+
+  /*结果数组，每行数据都记录下每个字段的span值*/
+  const resultSpanMap: Record<string, number>[] = [];
+
+  /*遍历每一行数据的时候，记录下要合并的字段，如果字段值变了则记录下这条数据的rowIndex到prevIndex[field]，也就是 prevIndex[field] = rowIndex*/
+  const prevIndex: any = fields.reduce((prev, field) => (prev[field] = 0, prev), {} as Record<string, number>);
+
+  /*遍历每一行数据时，先初始化一个rowSpanMap，以这个为原始模板*/
+  const templateRowMap = fields.reduce((prev, field) => (prev[field] = 1, prev), {} as Record<string, number>);
+
+  data.forEach((row, rowIndex) => {
+
+    const rowSpanMap = { ...templateRowMap };
+
+    /*第一条数据任何字段的span都不可能为0，从第二条数据开始，字段值相同的field才会设置span为0实现合并单元格的功能*/
+    if (rowIndex === 0) {
+      resultSpanMap.push(rowSpanMap);
+      return;
+    }
+
+    /*遍历每一个要合并的字段*/
+    fields.forEach((field, fieldIndex) => {
+      if (
+        /*字段值，与上一条数据字段的值相同，并且*/
+        row[field] === data[prevIndex[field]][field] && (
+          /*是第一个合并的字段，或者上一个合并的字段是合并状态*/
+          fieldIndex == 0 || (rowSpanMap[fields[fieldIndex - 1]] === 0)
+        )
+      ) {
+        /*当前字段应该合并*/
+        resultSpanMap[prevIndex[field]][field]++;
+        rowSpanMap[field] = 0;
+      } else {
+        /*字段值不一样，标记新的记录下这个新的rowIndex，后续合并字段都操作这个rowIndex来实现*/
+        prevIndex[field] = rowIndex;
+      }
+    });
+
+    resultSpanMap.push(rowSpanMap);
+  });
+
+  return data.map((_, rowIndex) => resultSpanMap[rowIndex]);
+};
+
+export const calcColSpans = (data: Record<string, any>[], fields: string[]) => {
+  const resultSpanMap: Record<string, any>[] = [];
+
+  data.forEach((row) => {
+    const colSpanMap: Record<string, number> = {};
+    let prevField: any = null;
+    fields.forEach((field, fieldIndex) => {
+
+      /*第一个字段的colSpan不可能为0*/
+      if (fieldIndex === 0) {
+        prevField = field;
+        colSpanMap[field] = 1;
+        return;
+      }
+
+      if (
+        /*当前字段的值与上一个字段的值相等，则当前字段应该合并*/
+        row[prevField] === row[field]
+      ) {
+        colSpanMap[field] = 0;
+        colSpanMap[prevField]++;
+      } else {
+        /*当前字段与上一个字段值不相等，则标记当前字段为新的起始位置*/
+        colSpanMap[field] = 1;
+        prevField = field;
+      }
+
+    });
+    resultSpanMap.push(colSpanMap);
+  });
+
+  return data.map((_, rowIndex) => resultSpanMap[rowIndex]);
+};
+
+export const calcSpans = (data: Record<string, any>[], config: { rowSpanFields?: string[], colSpanFields?: string[] }) => {
+  const rowSpans = !config.rowSpanFields?.length ? null : calcRowSpans(data, config.rowSpanFields);
+  const colSpans = !config.colSpanFields?.length ? null : calcColSpans(data, config.colSpanFields);
+  return data.map((_, rowIndex) => ({ row: rowSpans?.[rowIndex], col: colSpans?.[rowIndex] }));
+};

package/src/packages/components/Table/plc/utils/plc.utils.ts

@@ -36,6 +36,7 @@ export const PlcGroupPropsOptions = {
   noPadding: { type: Boolean },                                             // 是否不兼容表格的虚拟滚动功能
   colDraggable: { type: Boolean, default: null },                           // 列是否可以拖拽排序
   link: { type: Boolean },                                                  // 超链接样式
+  tip: { type: [String, Function] as PropType<string | (() => any)> },      // 提示说明
 
   hide: { type: Boolean },                                                  // 是否隐藏
   order: { type: [String, Number] },                                        // 列排序
@@ -71,6 +72,8 @@ export const PlcPropsOptions = {
   hideInForm: { type: Boolean },                                            // 是否再表单编辑中显示
   formLabel: { type: String },                                              // 在表单编辑中的label文本
   overflowTooltip: { type: Boolean },                                       // 是否在内容文本溢出之后使用tooltip显示
+  autoRowSpan: { type: Boolean },                                           // 字段值相同则自动合并行
+  autoColSpan: { type: Boolean },                                           // 字段值相同则自动合并列
 
   // 编辑相关
   ...PlcValidatePropsOption,                                                // 校验属性

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx

@@ -222,12 +222,12 @@ export const PlcOperation = designComponent({
           }
         });
         const width = maxWidth + state.cellPaddingX * 2;
-        console.warn({ width });
+        // console.warn({ width });
         if (!state.plcOperationWidth || width > state.plcOperationWidth) {
-          console.log({
+          /*console.log({
             'plcOperationWidth.value': plcOperationWidth.value,
             'width + 4': width + 4,
-          });
+          });*/
           if (width + 4 > plcOperationWidth.value) {
             state.plcOperationWidth = width + 4;
           }