plain-design 1.0.0-beta.130 → 1.0.0-beta.132

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/useTablePlc.tsx

@@ -47,7 +47,7 @@ export function useTablePlc(
     getPlcTypeArr: null as null | (() => tPlcType[]),
   });
 
-  onBeforeUnmount(()=>{state.getTableEl = null})
+  onBeforeUnmount(() => {state.getTableEl = null;});
 
   hooks.onPlcTypes.use(list => {state.getPlcTypeArr = () => list;});
 
@@ -109,6 +109,7 @@ export function useTablePlc(
   const virtualFlatPlcList = (() => {
     const state = reactive({ scrollLeft: 0 });
     const setScrollLeft = throttle((scrollLeft: number) => {state.scrollLeft !== scrollLeft && (state.scrollLeft = scrollLeft);}, 50);
+    onBeforeUnmount(() => {setScrollLeft.dispose();});
     hooks.onScroll.use((e) => {setScrollLeft(e.target.scrollLeft);});
     return computed((): tPlc[] => {
       if (!plcData.value) {return [];}

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;
           }

package/src/packages/components/Table/table/Table.tsx

@@ -245,14 +245,18 @@ export const Table = designComponent({
       ),
     });
 
-    hooks.onClickCell.use(({ e, node }) => {
-      event.emit.onClickCell(node, e);
-      hooks.onClickRow.exec({ e, node });
+    hooks.onClickCell.use((val) => {
+      event.emit.onClickCell(val.node, val.e, val.plc);
+      hooks.onClickRow.exec({ e: val.e, node: val.node });
     });
 
-    hooks.onDblclickCell.use(({ e, node }) => {
-      event.emit.onDblclickCell(node, e);
-      hooks.onDblclickRow.exec({ e, node });
+    hooks.onDblclickCell.use((val) => {
+      event.emit.onDblclickCell(val.node, val.e, val.plc);
+      hooks.onDblclickRow.exec({ e: val.e, node: val.node });
+    });
+
+    hooks.onContextmenuCell.use((val) => {
+      event.emit.onContextmenuCell(val.node, val.e, val.plc);
     });
 
     hooks.onClickHeadCell.use(({ e, plc }) => {!plc.props.disableAutoEmitClickTitle && event.emit.onClickHead(plc, e);});

package/src/packages/components/Table/table/body/cell.tsx

@@ -10,6 +10,7 @@ import {useCellValue} from "./useCellValue";
 import {createTooltip} from "../../../useTooltip";
 import {createEffects} from "@peryl/utils/createEffects";
 import {usePopup} from "../../../usePopup";
+import {injectTableAutoSpan} from "../../plc/use/useTableAutoSpan";
 
 export const PltCell = designComponent({
   name: 'plt-cell',
@@ -23,6 +24,9 @@ export const PltCell = designComponent({
     const { refs, onRef } = useRefs({ el: iHTMLElement });
 
     const popup = usePopup();
+
+    const tableAutoSpan = injectTableAutoSpan();
+
     /**
      * 单元格校验
      * @author  韦胜健
@@ -51,6 +55,11 @@ export const PltCell = designComponent({
       props.table.hooks.onDblclickCell.exec({ e, node: props.node, plc: props.plc });
     };
 
+    const onContextmenu = (e: iMouseEvent) => {
+      // if (bodyCell.value().editable) {return;}
+      props.table.hooks.onContextmenuCell.exec({ e, node: props.node, plc: props.plc });
+    };
+
     /**
      * 鼠标进入单元格
      * @author  韦胜健
@@ -70,7 +79,9 @@ export const PltCell = designComponent({
      * @author  韦胜健
      * @date    2022/12/5 20:35
      */
-    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false });
+    const { effects: cellValueEffects } = createEffects();
+    onBeforeUnmount(() => cellValueEffects.clear());
+    const { bodyCell } = useCellValue({ optionGetter: () => ({ node: props.node, plc: props.plc }), formEdit: false, effects: cellValueEffects });
 
     /**
      * 单元格样式类名
@@ -143,7 +154,7 @@ export const PltCell = designComponent({
              * 则不显示overflowTooltip
              */
             if (!props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable) {
-              return emptyOverflowTooltipOption
+              return emptyOverflowTooltipOption;
             } else {
               return {
                 reference: !props.plc.props.overflowTooltip || !bodyCell || bodyCell.editable ? null : refs.el,
@@ -182,14 +193,32 @@ export const PltCell = designComponent({
       return { update };
     })();
 
+    /*每次渲染都记录上一次的span，某次渲染在offsetData中找不到自己的offsetIndex时，就用上一次的span*/
+    let prevSpan = { rowspan: 1, colspan: 1 };
+
     return {
       render: () => {
         const { node, plc } = props;
         const { body, editable } = bodyCell.value();
-        const span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
+        let span = !!props.table.props.spanMethod ? props.table.props.spanMethod({ node, plc }) : { rowspan: 1, colspan: 1 };
         if (plc.props.editColSpan != null && node.state.edit) {
           span.colspan = typeof plc.props.editColSpan === "function" ? plc.props.editColSpan(node) : plc.props.editColSpan;
         }
+        if (!!tableAutoSpan.value && (plc.props.autoRowSpan || plc.props.autoColSpan)) {
+          const { spans, data: offsetData } = tableAutoSpan.value;
+          /*要用offsetIndex，而不是props.node.state.index,这个是行数据在所有数据中的真实索引，而不是在虚拟列表数据中的索引*/
+          /*计算的spans仅含有虚拟数据的合并结果*/
+          const offsetIndex = offsetData.indexOf(props.node.data);
+          if (offsetIndex > -1) {
+            const rowSpan = !plc.props.field ? null : spans[offsetIndex].row?.[plc.props.field];
+            if (rowSpan != null) {span.rowspan = rowSpan;}
+            const colSpan = !plc.props.field ? null : spans[offsetIndex].col?.[plc.props.field];
+            if (colSpan != null) {span.colspan = colSpan;}
+          } else {
+            span = prevSpan;
+          }
+        }
+        prevSpan = span;
         if (span.rowspan === 0 || span.colspan === 0) {
           /*rowspan为0时，不会正确合并单元格，如果要合并单元格则不渲染这个td*/
           return null;
@@ -201,6 +230,7 @@ export const PltCell = designComponent({
         // console.log('cell', props.plc.props.title);
         return (
           <td
+            data-span={String(span.rowspan != 1 || span.colspan != 1)}
             ref={onRef.el}
             rowSpan={span.rowspan}
             colSpan={span.colspan}
@@ -208,6 +238,7 @@ export const PltCell = designComponent({
             style={styles.value}
             onClick={onClick}
             onDoubleClick={onDblclick}
+            onContextMenu={onContextmenu}
             onMouseEnter={onEnter}
             onMouseLeave={onLeave}
           >

package/src/packages/components/Table/table/body/useCellValue.tsx

@@ -1,11 +1,13 @@
 import {iTableNode} from "../utils/table.utils";
 import {tPlc} from "../../plc/utils/plc.utils";
-import {computed, reactive, toRaw} from "@peryl/react-compose";
+import {globalComputed, reactive, toRaw} from "@peryl/react-compose";
 import {PlainObject} from "@peryl/utils/event";
 import {LoadingText} from "../../../../utils/LoadingText";
 import {AsyncFormatter} from "../../../AsyncFormatter";
 import {Formatter} from "../../../Formatter";
 import {renderBodyCell} from "../../plc/utils/plc.render";
+import {iEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
 
 /**
  * 计算cell渲染所需要的内容
@@ -16,9 +18,11 @@ export function useCellValue(
   {
     optionGetter,
     formEdit,
+    effects,
   }: {
     optionGetter: () => { node: iTableNode, plc: tPlc },
     formEdit: boolean,
+    effects: iEffects,
   }
 ) {
   /**
@@ -26,20 +30,22 @@ export function useCellValue(
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const row = computed(() => {
+  const row = globalComputed(() => {
     const { node } = optionGetter();
     return node.state.edit ? node.state.editRow : node.data;
   });
+  effects.push(() => row.effect.stop());
 
   /**
    * 当前单元格的目标数据
    * @author  韦胜健
    * @date    2022.12.3 10:50
    */
-  const sourceValue = computed(() => {
+  const sourceValue = globalComputed(() => {
     const { plc } = optionGetter();
     return !!plc.props.field ? row.value[plc.props.field] : null;
   });
+  effects.push(() => sourceValue.effect.stop());
 
   /**
    * 异步格式化的状态
@@ -58,8 +64,9 @@ export function useCellValue(
       loading: boolean,
     }
   });
+  effects.push(() => delay().then(() => {asyncState.asyncValue = null;}));
 
-  const targetValue = computed(() => {
+  const targetValue = globalComputed(() => {
     const { plc, node } = optionGetter();
     const { formatter, asyncFormatter, formatterOptions } = plc.props;
     const cellRenderScope = { plc: plc, node: node, row: row.value };
@@ -125,12 +132,14 @@ export function useCellValue(
       return sourceValue.value;
     }
   });
+  effects.push(() => targetValue.effect.stop());
 
-  const bodyCell = computed(() => {
+  const bodyCell = globalComputed(() => {
     const { node, plc } = optionGetter();
     const bc = renderBodyCell({ node, plc, formEdit, targetValue: targetValue.value });
     return () => bc;
   });
+  effects.push(() => bodyCell.effect.stop());
 
   return { bodyCell, targetValue };
 }

package/src/packages/components/Table/table/head/head-cell.tsx

@@ -7,6 +7,8 @@ import {PlainScroll} from "../../../Scroll";
 import {Icon} from "../../../Icon";
 import {renderHeadCell} from "../../plc/utils/plc.render";
 import {useTooltip} from "../../../useTooltip";
+import Tooltip from "../../../Tooltip";
+import {getFunctionValue} from '@peryl/utils/getFunctionValue';
 
 export const PltHeadCell = designComponent({
   name: 'plt-head-cell',
@@ -77,6 +79,10 @@ export const PltHeadCell = designComponent({
             onMouseLeave={handler.onLeave}
           >
             {content}
+            {!!props.tablePlc.props.tip && <Tooltip v-slots={{
+              default: () => <Icon icon="pi-info-circle" className="plt-head-cell-tip"/>,
+              popper: () => getFunctionValue(props.tablePlc.props.tip)
+            }}/>}
             <span className="plt-head-cell-indicator" onMouseDown={resizeHandler.mousedown}/>
             {sort.value != null && (
               <div className={`plt-head-cell-sorter plt-head-cell-sorter-${sort.value ? 'desc' : 'asc'}`}>

package/src/packages/components/Table/table/table.scss

@@ -24,6 +24,10 @@
       font-weight: 500;
       letter-spacing: 1px;
 
+      .plt-head-cell-tip {
+        color: plv(text-3);
+      }
+
       .plt-head-cell-indicator {
         position: absolute;
         top: 0;

package/src/packages/components/Table/table/use/useTableFormEditor.tsx

@@ -53,10 +53,13 @@ export function useTableFormEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
+    cellBodyArrayEffects.clear();
     if (!state.optionGetter) {return [];}
     const { node } = state.optionGetter();
-    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true }));
+    return showPlcArray.value.map(plc => useCellValue({ optionGetter: () => ({ plc, node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
@@ -136,6 +139,7 @@ export function useTableFormEditor(
                         required={plc.props.required}
                         rules={plc.props.rules}
                         validator={plc.props.validator}
+                        tip={plc.props.tip}
                         disabled={!editable}
                         {...validateAttrs}
                       >

package/src/packages/components/Table/table/use/useTableModifyEditor.tsx

@@ -3,7 +3,7 @@ import {iTableHooks} from "../utils/createTableHooks";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
 import {createEffects} from "@peryl/utils/createEffects";
 import {PlainObject} from "@peryl/utils/event";
-import {computed, reactive, RenderNode, useRefs} from "@peryl/react-compose";
+import {computed, onBeforeUnmount, reactive, RenderNode, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../../../Dialog";
 import {delay} from "@peryl/utils/delay";
 import {Table} from "../Table";
@@ -64,11 +64,13 @@ export function useTableModifyEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
     if (!state.optionGetter) {return [];}
     const { node } = state;
     if (!node) {return [];}
-    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true }));
+    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
@@ -124,6 +126,7 @@ export function useTableModifyEditor(
                   required={plc.props.required}
                   rules={plc.props.rules}
                   validator={plc.props.validator}
+                  tip={plc.props.tip}
                   disabled={!editable}
                   {...validateAttrs}
                 >
@@ -142,6 +145,7 @@ export function useTableModifyEditor(
     initialize: (() => {
       let hasInitialized = false;
       return () => {
+        /*已经初始化过就不用再初始化了*/
         if (hasInitialized) {return;}
         hasInitialized = true;
         effects.push(hooks.onRender.use(
@@ -187,6 +191,8 @@ export function useTableModifyEditor(
     },
   };
 
+  onBeforeUnmount(() => effects.clear());
+
   return { methods, state };
 }
 

package/src/packages/components/Table/table/utils/createTableHooks.ts

@@ -1,5 +1,5 @@
 import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "@peryl/react-compose";
-import {tPlcType} from "../../plc/utils/plc.utils";
+import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
 import {iTableMessyData, iTableNode} from "./table.utils";
 import {PlainObject} from "@peryl/utils/event";
 import {VirtualTable} from "../../../VirtualTable";
@@ -25,9 +25,11 @@ export const createTableHooks = () => {
     /*双击行动作*/
     onDblclickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
     /*单击单元格动作*/
-    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*双击单元格动作*/
-    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
+    /*右击单元格动作*/
+    onContextmenuCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*鼠标进入单元格*/
     onEnterCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
     /*鼠标离开单元格*/

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

@@ -93,8 +93,9 @@ export const TableEmitsOptions = {
 
   onClickRow: (node: iTableNode, e: iMouseEvent) => true,
   onDblclickRow: (node: iTableNode, e: iMouseEvent) => true,
-  onClickCell: (node: iTableNode, e: iMouseEvent) => true,
-  onDblclickCell: (node: iTableNode, e: iMouseEvent) => true,
+  onClickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onDblclickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onContextmenuCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
   onClickHead: (plc: tPlcType, e: iMouseEvent) => true,
 
   onConfigPlc: (data: { plcList: tPlcType[], stateData: tPlcCacheStateData }) => true,

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

@@ -7,6 +7,8 @@ import './virtual-table.scss';
 import i18n from "../i18n";
 import {doNothing} from "@peryl/utils/doNothing";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {useTableAutoSpan} from "../Table/plc/use/useTableAutoSpan";
+import {iTableNode} from "../Table/table/utils/table.utils";
 
 export const VirtualTable = designComponent({
   name: 'virtual-table',
@@ -55,6 +57,8 @@ export const VirtualTable = designComponent({
     /*虚拟滚动时让出顶部距离显示表头*/
     const { virtual } = useVirtualList({ dataModel, props, refs: refs as any, emit, transform: false });
 
+    const tableAutoSpan = useTableAutoSpan(() => ({ data: virtual.offsetData.value.list.map(i => (i.item as iTableNode).data) }));
+
     /*---------------------------------------computed-------------------------------------------*/
     const styles = useStyles(style => {
       style.height = unit(props.height);
@@ -154,6 +158,8 @@ export const VirtualTable = designComponent({
       },
       render: () => {
         const { list } = virtual.offsetData.value;
+        /*触发响应式计算*/
+        doNothing(tableAutoSpan.value?.spans);
         return (
           <div style={styles.value} className={classes.value}>
             <Scroll

package/src/packages/components/VirtualTable/virtual-table.scss

@@ -81,19 +81,19 @@ $scrollbarSize: 12px;
       }
 
       &:hover {
-        td {
+        td:not([data-span=true]) {
           background-color: plv(table-row-hover-color);
         }
       }
 
       &.plt-row-current {
-        td {
+        td:not([data-span=true]) {
           background-color: plv(table-row-current-color);
         }
       }
 
       &.plt-row-checked {
-        td {
+        td:not([data-span=true]) {
           background-color: plv(primary-light-1);
           border-bottom-color: plv(primary-light-2);
         }

package/src/packages/components/createSimpleDate/index.ts

@@ -0,0 +1,49 @@
+export function createSimpleDate(_date?: Date) {
+  const date = _date || new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+
+  const YYYY = String(year);
+  const MM = String(month).padStart(2, '0');
+  const DD = String(day).padStart(2, '0');
+  const HH = String(hour).padStart(2, '0');
+  const mm = String(minute).padStart(2, '0');
+  const ss = String(second).padStart(2, '0');
+
+  return {
+    'YYYY-MM-DD HH:mm:ss': `${YYYY}-${MM}-${DD} ${HH}:${mm}:${ss}`,
+    'YYYY-MM-DD': `${YYYY}-${MM}-${DD}`,
+    'HH:mm:ss': `${HH}:${mm}:${ss}`,
+    YMDHms: Number(`${YYYY}${MM}${DD}${HH}${mm}${ss}`),
+    YMD: Number(`${YYYY}${MM}${DD}`),
+  };
+}
+
+export const parseDateString = (dateString: string): Date | null => {
+  const match = /(\d\d\d\d)-(\d\d)-(\d\d)/.exec(dateString);
+  if (!match) {return null;}
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const date = Number(match[3]);
+  return new Date(year, month - 1, date);
+};
+
+export const parseDatetimeString = (datetimeString: string) => {
+  const match = /(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)/.exec(datetimeString);
+  if (!match) {return null;}
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const date = Number(match[3]);
+  const hour = Number(match[4]);
+  const minute = Number(match[5]);
+  const second = Number(match[6]);
+  return new Date(year, month - 1, date, hour, minute, second);
+};
+
+export const nowDate = () => createSimpleDate()['YYYY-MM-DD'];
+export const nowTime = () => createSimpleDate()['HH:mm:ss'];
+export const nowDatetime = () => createSimpleDate()['YYYY-MM-DD HH:mm:ss'];

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

@@ -0,0 +1,40 @@
+import {usePopup} from "../usePopup";
+import {ListPanel} from "../ListPanel";
+import {ListOption} from "../ListOption";
+import {iMouseEvent} from "@peryl/react-compose";
+import {getFunctionValue} from "@peryl/utils/getFunctionValue";
+
+export const useContextmenuOptions = () => {
+
+  const { $popup } = usePopup();
+
+  const open = ({ x, y ,options}: { x: number, y: number, options: iContextmenuOption[]}) => {
+    const pop = $popup.absolute({
+      x, y,
+      noArrow: true,
+      noPadding: true,
+      type: 'contextmenu-option',
+      placement: 'bottom-start',
+      trigger: 'contextmenu',
+      render: () => (
+        <ListPanel>
+          {options.map((option, index) => (
+            <ListOption key={index} label="管理该类型" onClick={async (e) => {
+              const flag = await option.handler(e);
+              if (flag != false) {pop.hide();}
+            }}>
+              {getFunctionValue(option.label)}
+            </ListOption>
+          ))}
+        </ListPanel>
+      )
+    });
+  };
+
+  return { open };
+};
+
+export interface iContextmenuOption {
+  label: string | (() => any);
+  handler: (e: iMouseEvent) => void | boolean | Promise<void | boolean>,
+}