@hw-component/table 1.2.6 → 1.2.7

package/lib/render/TagsComponent.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js/object/define-property');
+var _Symbol$toPrimitive = require('@babel/runtime-corejs3/core-js/symbol/to-primitive');
+var _typeof = require('@babel/runtime-corejs3/helpers/typeof');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('core-js/modules/es.number.constructor.js');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.regexp.to-string.js');
+var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/slice');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/map');
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+var React = require('react');
+
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[_Symbol$toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getTooltipProps = function getTooltipProps(title, tooltip) {
+  if (!tooltip) {
+    return {
+      title: null
+    };
+  }
+  if (tooltip === true) {
+    return {
+      title: title
+    };
+  }
+  return _objectSpread(_objectSpread({}, tooltip), {}, {
+    title: title
+  });
+};
+var TagsComponent = function TagsComponent(props) {
+  var data = props.data,
+    closable = props.closable,
+    _onClose = props.onClose,
+    color = props.color,
+    icon = props.icon,
+    _props$fieldNames = props.fieldNames,
+    fieldNames = _props$fieldNames === void 0 ? {} : _props$fieldNames,
+    tooltip = props.tooltip,
+    tableInstance = props.tableInstance,
+    maxLen = props.maxLen;
+  var _fieldNames$label = fieldNames.label,
+    label = _fieldNames$label === void 0 ? "label" : _fieldNames$label,
+    _fieldNames$value = fieldNames.value,
+    value = _fieldNames$value === void 0 ? "value" : _fieldNames$value;
+  var _useMemo = React.useMemo(function () {
+      if (!maxLen || !data) {
+        return {
+          tagData: data
+        };
+      }
+      var tagData = _sliceInstanceProperty(data).call(data, 0, maxLen);
+      var moreTag = _sliceInstanceProperty(data).call(data, maxLen);
+      return {
+        tagData: tagData,
+        moreTag: moreTag
+      };
+    }, [data, maxLen]),
+    tagData = _useMemo.tagData,
+    moreTag = _useMemo.moreTag;
+  var moreLen = moreTag === null || moreTag === void 0 ? void 0 : moreTag.length;
+  return jsxRuntime.jsxs(antd.Row, {
+    gutter: [8, 8],
+    children: [tagData === null || tagData === void 0 ? void 0 : _mapInstanceProperty(tagData).call(tagData, function (tagItem, index) {
+      var _context;
+      var tagProps = {
+        closable: closable,
+        onClose: _onClose,
+        color: color,
+        icon: icon
+      };
+      var indexKey = index.toString();
+      if (typeof tagItem === "string") {
+        var _tooltipProps = getTooltipProps(tagItem, tooltip);
+        return jsxRuntime.jsx(antd.Tooltip, _objectSpread(_objectSpread({}, _tooltipProps), {}, {
+          children: jsxRuntime.jsx(antd.Tag, _objectSpread(_objectSpread({}, tagProps), {}, {
+            onClose: function onClose(e) {
+              e.preventDefault();
+              _onClose === null || _onClose === void 0 || _onClose(indexKey, tableInstance);
+            },
+            children: tagItem
+          }), indexKey)
+        }));
+      }
+      var tagLabel = tagItem[label],
+        tagValue = tagItem[value],
+        props = _objectWithoutProperties(tagItem, _mapInstanceProperty(_context = [label, value]).call(_context, _toPropertyKey));
+      var tooltipProps = getTooltipProps(tagLabel, tooltip);
+      var cuTagProps = _objectSpread(_objectSpread({}, tagProps), props);
+      var cuKey = tagValue || indexKey;
+      return jsxRuntime.jsx(antd.Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+        children: jsxRuntime.jsx(antd.Tag, _objectSpread(_objectSpread({}, cuTagProps), {}, {
+          onClose: function onClose(e) {
+            e.preventDefault();
+            cuTagProps === null || cuTagProps === void 0 || cuTagProps.onClose(cuKey, tableInstance);
+          },
+          children: tagLabel
+        }), cuKey)
+      }));
+    }), !moreLen ? null : jsxRuntime.jsx(antd.Popover, {
+      content: jsxRuntime.jsx(TagsComponent, _objectSpread(_objectSpread({}, props), {}, {
+        maxLen: null
+      })),
+      children: jsxRuntime.jsxs(antd.Tag, {
+        children: ["...\u7B49", data.length, "\u4E2A"]
+      })
+    })]
+  });
+};
+
+exports.default = TagsComponent;
+// powered by h

package/lib/render/config.d.ts

@@ -0,0 +1,9 @@
+import { ConfigItemModal, HTableInstance } from "@/components/modal";
+declare const _default: {
+    date: (config: ConfigItemModal, itemData: any) => string;
+    tags: (config: ConfigItemModal, itemData: any, index: number, tableInstance: HTableInstance) => "-" | JSX.Element;
+    copy: (config: ConfigItemModal, itemData: any) => "-" | JSX.Element;
+    link: (config: ConfigItemModal, itemData: any) => JSX.Element;
+    text: (config: ConfigItemModal, itemData: any) => JSX.Element;
+};
+export default _default;

package/lib/render/config.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var jsxRuntime = require('react/jsx-runtime');
+var moment = require('moment');
+var TagsComponent = require('./TagsComponent.js');
+var copy = require('copy-to-clipboard');
+var antd = require('antd');
+
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Link = antd.Typography.Link,
+  Paragraph = antd.Typography.Paragraph;
+var getTableVal = function getTableVal(config, itemData) {
+  var dataIndex = config.dataIndex;
+  var tableDataIndex = dataIndex;
+  return itemData[tableDataIndex];
+};
+var dateRender = function dateRender(config, itemData) {
+  var _config$valueTypeProp = config.valueTypeProps,
+    valueTypeProps = _config$valueTypeProp === void 0 ? {} : _config$valueTypeProp;
+  var tableVal = getTableVal(config, itemData);
+  var _valueTypeProps$forma = valueTypeProps.format,
+    format = _valueTypeProps$forma === void 0 ? "YYYY-MM-DD HH:mm:ss" : _valueTypeProps$forma,
+    _valueTypeProps$timeS = valueTypeProps.timeStampType,
+    timeStampType = _valueTypeProps$timeS === void 0 ? "X" : _valueTypeProps$timeS;
+  if (!tableVal) {
+    return "-";
+  }
+  var time = moment(tableVal, timeStampType);
+  return time.format(format);
+};
+var tagsRender = function tagsRender(config, itemData, index, tableInstance) {
+  var _config$valueTypeProp2 = config.valueTypeProps,
+    valueTypeProps = _config$valueTypeProp2 === void 0 ? {} : _config$valueTypeProp2;
+  var tableVal = getTableVal(config, itemData);
+  if (!tableVal) {
+    return "-";
+  }
+  return jsxRuntime.jsx(TagsComponent.default, _objectSpread(_objectSpread({
+    data: tableVal
+  }, valueTypeProps), {}, {
+    tableInstance: tableInstance
+  }));
+};
+var copyRender = function copyRender(config, itemData) {
+  var _config$valueTypeProp3 = config.valueTypeProps,
+    valueTypeProps = _config$valueTypeProp3 === void 0 ? {} : _config$valueTypeProp3,
+    title = config.title,
+    titleStr = config.titleStr;
+  var successMsg = valueTypeProps.successMsg,
+    text = valueTypeProps.text;
+  var msg = successMsg || "\u590D\u5236".concat(title || titleStr, "\u6210\u529F!");
+  var tableVal = getTableVal(config, itemData);
+  if (!tableVal) {
+    return "-";
+  }
+  var cpText = text;
+  if (typeof text === "function") {
+    cpText = text(itemData);
+  }
+  return jsxRuntime.jsx(Link, {
+    onClick: function onClick() {
+      copy(cpText || tableVal);
+      antd.message.success(msg);
+    },
+    children: tableVal
+  });
+};
+var linkRender = function linkRender(config, itemData) {
+  var _config$valueTypeProp4 = config.valueTypeProps,
+    valueTypeProps = _config$valueTypeProp4 === void 0 ? {} : _config$valueTypeProp4;
+  var href = valueTypeProps.href,
+    _valueTypeProps$targe = valueTypeProps.target,
+    target = _valueTypeProps$targe === void 0 ? "_blank" : _valueTypeProps$targe;
+  var tableVal = getTableVal(config, itemData);
+  var hrefUrl = href;
+  if (typeof href === "function") {
+    hrefUrl = href(itemData);
+  }
+  return jsxRuntime.jsx(Link, {
+    href: hrefUrl || tableVal,
+    target: target,
+    children: tableVal
+  });
+};
+var textRender = function textRender(config, itemData) {
+  var _config$valueTypeProp5 = config.valueTypeProps,
+    valueTypeProps = _config$valueTypeProp5 === void 0 ? {} : _config$valueTypeProp5;
+  var addonBefore = valueTypeProps.addonBefore,
+    addonAfter = valueTypeProps.addonAfter,
+    type = valueTypeProps.type,
+    ellipsis = valueTypeProps.ellipsis;
+  var tableVal = getTableVal(config, itemData);
+  return jsxRuntime.jsxs(Paragraph, {
+    type: type,
+    ellipsis: ellipsis,
+    children: [addonBefore, tableVal, addonAfter]
+  });
+};
+var config = {
+  date: dateRender,
+  tags: tagsRender,
+  copy: copyRender,
+  link: linkRender,
+  text: textRender
+};
+
+exports.default = config;
+// powered by h

package/lib/render/index.d.ts

@@ -0,0 +1,5 @@
+import { ConfigItemModal, HTableInstance } from "@/components/modal";
+import React from "react";
+import { ValueTypeConfigModal } from '../modal';
+declare const _default: (item: ConfigItemModal, tableInstance: HTableInstance, valueTypeConfig: ValueTypeConfigModal) => (dom: React.ReactNode, itemData: any, index: number) => any;
+export default _default;

package/lib/render/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var config = require('./config.js');
+
+var configRender = (function (item, tableInstance, valueTypeConfig) {
+  var render = item.render,
+    _item$valueType = item.valueType,
+    valueType = _item$valueType === void 0 ? "" : _item$valueType;
+  return function (dom, itemData, index) {
+    var valType = valueType;
+    if (render) {
+      return render(dom, itemData, index, tableInstance);
+    }
+    if (valueTypeConfig[valType]) {
+      return valueTypeConfig[valType](item, itemData, index, tableInstance);
+    }
+    if (config.default[valType]) {
+      return config.default[valType](item, itemData, index, tableInstance);
+    }
+    return dom;
+  };
+});
+
+exports.default = configRender;
+// powered by h

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"
@@ -34,6 +34,7 @@
     "@hw-component/form": "1.5.2",
     "ahooks": "2.10.9",
     "antd": "4.20.7",
+    "copy-to-clipboard": "3.3.1",
     "core-js": "3",
     "react": "17.0.0",
     "react-dom": "17.0.2",

package/src/components/HTableBody/hooks.tsx

@@ -12,6 +12,8 @@ import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
 import { mkChangeValue, outColSetting } from "./utils";
+import configRender from "../render";
+import {useHTableConfigContext} from "@/components/TableConfig";
 const rowSelectionCol = (rowSelection?: HRowSelection) => {
   const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
   return {
@@ -39,6 +41,7 @@ const rowSelectionCol = (rowSelection?: HRowSelection) => {
 };
 export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
   const [cols, setCols] = useState<ConfigDataModal>([]);
+  const {valueTypeConfig}=useHTableConfigContext({});
   const changeConfigData = (data: ConfigDataModal) => {
     const colsArray = data.filter((item) => {
       return !item.hideInTable;
@@ -47,15 +50,9 @@ export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
       colsArray.splice(0, 0, rowSelectionCol(rowSelection) as any);
     }
     return colsArray.map((item) => {
-      const { render } = item;
       return {
         ...item,
-        render: (dom: React.ReactNode, itemData: any, index: number) => {
-          if (!render) {
-            return dom;
-          }
-          return render(dom, itemData, index, table as HTableInstance);
-        },
+        render:configRender(item,(table as HTableInstance),valueTypeConfig)
       };
     });
   };

package/src/components/Table.tsx

@@ -8,7 +8,7 @@ import type { HTableProps } from "./modal";
 import useReq from "./hooks/useReq";
 import useDispatch from "./hooks/useDispatch";
 import { useState } from "react";
-import {useClassName} from "@/components/hooks";
+import {useClassName} from "./hooks";
 export default ({
   request,
   configData,

package/src/components/TableConfig.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import type { HTableInstance } from "src/components/modal";
+import type { HTableInstance ,ValueTypeConfigModal} from "./modal";
 
 interface HTableConfigContextModal {
   emptyRender?: (table: HTableInstance) => React.ReactNode;
@@ -7,6 +7,7 @@ interface HTableConfigContextModal {
   headerStyle?:React.CSSProperties;
   tableStyle?:React.CSSProperties;
   paginationStyle?:React.CSSProperties;
+  valueTypeConfig?:ValueTypeConfigModal;
 }
 export const HTableConfigContext =
   React.createContext<HTableConfigContextModal | null>(null);
@@ -16,10 +17,10 @@ export const useHTableConfigContext = ({
   emptyRender,
   errorRender,
   headerStyle,
-                                         tableStyle,
+  tableStyle,
   paginationStyle
 }: HTableConfigContextModal) => {
-  const { errorRender: configErrorRender, emptyRender: configEmptyRender,headerStyle:configHeaderStyle,tableStyle:configTableStyle,paginationStyle:configPaginationStyle } =
+  const { errorRender: configErrorRender, emptyRender: configEmptyRender,headerStyle:configHeaderStyle,tableStyle:configTableStyle,paginationStyle:configPaginationStyle,valueTypeConfig={} } =
     useContext(HTableConfigContext) || {};
 
   return {
@@ -27,7 +28,8 @@ export const useHTableConfigContext = ({
     emptyRender: emptyRender || configEmptyRender,
     headerStyle:headerStyle||configHeaderStyle,
     tableStyle:tableStyle||configTableStyle,
-    paginationStyle:paginationStyle||configPaginationStyle
+    paginationStyle:paginationStyle||configPaginationStyle,
+    valueTypeConfig
   };
 };
 const Index: React.FC<HTableConfigContextModal> = ({ children, ...props }) => {

package/src/components/modal.ts

@@ -10,6 +10,7 @@ import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
 import type { OptionModal } from "./HTableBody";
+import {GetRowKey} from "rc-table/lib/interface";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -43,6 +44,7 @@ interface HColumns extends Omit<ProColumns, "render" | "title"> {
   ) => React.ReactNode;
   rowSelectionTitle?: boolean;
   title?: string | React.ReactNode;
+  valueTypeProps?:Record<string, any>
 }
 interface BcItemModal {
   childrenDataIndex?: ConfigItemModal[] | string[];
@@ -66,7 +68,6 @@ export type actionFn = (...arg) => void;
 export interface RowSelectionOuter {
   allPageCheck?: boolean;
 }
-type RowKeyFn=(data:any,index:number)=>string;
 export type HRowSelection = RowSelectionOuter &
   (TableProps<any>["rowSelection"] & {
     alwaysShowAlert?: boolean;
@@ -74,7 +75,7 @@ export type HRowSelection = RowSelectionOuter &
 export interface HTableProps
   extends Omit<
     ProTableProps<any, any>,
-    "request" | "dataSource" | "rowKey" | "rowSelection"
+    "request" | "dataSource"| "rowSelection"
   > {
   request?: (params: ParamsModal) => Promise<ResultModal>;
   configData: ConfigDataModal;
@@ -97,7 +98,6 @@ export interface HTableProps
   manual?: boolean;
   dataSource?: ResultModal;
   paginationStyle?: React.CSSProperties;
-  rowKey?: string|RowKeyFn;
   allPageCheck?: boolean;
   rowSelection?: HRowSelection | false;
   affixProps?: AffixProps | false;
@@ -153,3 +153,6 @@ export interface ModalTableProps extends ModalProps {
   configData?: HTableProps["configData"];
   request?: HTableProps["request"];
 }
+
+export type ValueTypeConfigRenderFn=(config:ConfigItemModal,itemData:any,index:number,tableInstance:HTableInstance)=>React.ReactNode;
+export type ValueTypeConfigModal=Record<string, ValueTypeConfigRenderFn>;

package/src/components/render/TagsComponent.tsx

@@ -0,0 +1,91 @@
+import {Row, Tag,Tooltip,Popover} from "antd";
+import React, {useMemo} from "react";
+import {TooltipProps} from "antd/lib/tooltip";
+import {HTableInstance} from "@/components/modal";
+type CloseFn=(key:string,tableInstance?:HTableInstance)=>void;
+interface IProps {
+    data:any[];
+    closable?:boolean;
+    onClose?:CloseFn;
+    color?:string;
+    icon?:React.ReactNode;
+    tooltip?:boolean|TooltipProps;
+    fieldNames?:{label?:string,value?:string};
+    tableInstance?:HTableInstance;
+    maxLen?:number|null;
+}
+const getTooltipProps=(title:string,tooltip?:boolean|TooltipProps):TooltipProps=>{
+    if (!tooltip){
+        return {
+            title:null
+        };
+    }
+    if (tooltip===true){
+        return {
+            title
+        }
+    }
+    return  {
+        ...tooltip,
+        title,
+    }
+}
+const TagsComponent=(props:IProps)=>{
+    const {data,closable,onClose,color,icon,fieldNames={},tooltip,tableInstance,maxLen}=props;
+    const {label="label",value="value"}=fieldNames;
+    const {tagData,moreTag}=useMemo(()=>{
+         if (!maxLen||!data){
+             return {
+                 tagData:data
+             };
+         }
+         const tagData=data.slice(0,maxLen);
+         const moreTag=data.slice(maxLen);
+         return  {
+             tagData,
+             moreTag
+         }
+    },[data,maxLen]);
+    const moreLen=moreTag?.length;
+
+    return <Row gutter={[8,8]}>
+            {tagData?.map((tagItem, index)=>{
+                const tagProps={
+                    closable,
+                    onClose,
+                    color,
+                    icon
+                }
+                const indexKey=index.toString();
+                if (typeof tagItem==="string"){
+                    const tooltipProps=getTooltipProps(tagItem,tooltip);
+                    return <Tooltip {...tooltipProps}>
+                        <Tag key={indexKey} {...tagProps} onClose={(e)=>{
+                            e.preventDefault();
+                            onClose?.(indexKey,tableInstance);
+                        }}>{tagItem}</Tag>
+                    </Tooltip>
+                }
+                const {[label]:tagLabel,[value]:tagValue,...props}=tagItem;
+                const tooltipProps=getTooltipProps(tagLabel,tooltip);
+                const cuTagProps={
+                    ...tagProps,
+                    ...props
+                }
+                const cuKey=tagValue||indexKey;
+                return <Tooltip {...tooltipProps}>
+                    <Tag key={cuKey} {...cuTagProps} onClose={(e)=>{
+                        e.preventDefault();
+                        cuTagProps?.onClose(cuKey,tableInstance);
+                    }}>{tagLabel}</Tag>
+                </Tooltip>
+            })}
+            {!moreLen?null:
+                <Popover content={<TagsComponent {...props} maxLen={null} />}>
+                <Tag>...等{data.length}个</Tag>
+               </Popover>
+            }
+        </Row>
+}
+
+export default TagsComponent;

package/src/components/render/config.tsx

@@ -0,0 +1,75 @@
+import moment from 'moment'
+import {ConfigItemModal, HTableInstance} from "@/components/modal";
+import TagsComponent from "./TagsComponent";
+import copy from 'copy-to-clipboard';
+import {message, Space, Typography} from 'antd';
+const {Link,Paragraph}=Typography;
+const getTableVal=(config:ConfigItemModal,itemData:any)=>{
+    const {dataIndex} = config;
+    const tableDataIndex=(dataIndex as string);
+    return itemData[tableDataIndex];
+}
+const dateRender=(config:ConfigItemModal,itemData:any)=>{
+   const {valueTypeProps={}}=config;
+    const tableVal=getTableVal(config,itemData);
+    const {format="YYYY-MM-DD HH:mm:ss",timeStampType="X"}=valueTypeProps;
+   if (!tableVal){
+       return  "-"
+   }
+   const time=moment(tableVal,timeStampType);
+   return time.format(format);
+}
+const tagsRender=(config:ConfigItemModal,itemData:any,index:number,tableInstance:HTableInstance)=>{
+    const {valueTypeProps={}}=config;
+    const tableVal=getTableVal(config,itemData);
+    if (!tableVal){
+        return  "-"
+    }
+    return <TagsComponent data={tableVal} {...valueTypeProps} tableInstance={tableInstance}/>
+}
+const copyRender=(config:ConfigItemModal,itemData:any)=>{
+    const {valueTypeProps={},title,titleStr}=config;
+    const {successMsg,text}=valueTypeProps;
+    const msg=successMsg||`复制${title||titleStr}成功!`;
+    const tableVal=getTableVal(config,itemData);
+    if (!tableVal){
+        return  "-"
+    }
+    let cpText=text;
+    if (typeof text==="function"){
+        cpText=text(itemData);
+    }
+    return  <Link onClick={()=>{
+        copy(cpText||tableVal);
+        message.success(msg);
+    }}>
+        {tableVal}
+    </Link>
+}
+const linkRender=(config:ConfigItemModal,itemData:any)=>{
+    const {valueTypeProps={},}=config;
+    const {href,target="_blank"}=valueTypeProps;
+    const tableVal=getTableVal(config,itemData);
+    let hrefUrl=href;
+    if (typeof href==="function"){
+        hrefUrl=href(itemData);
+    }
+    return <Link href={hrefUrl||tableVal} target={target}>
+        {tableVal}
+    </Link>
+}
+const textRender=(config:ConfigItemModal,itemData:any)=>{
+    const {valueTypeProps={},}=config;
+    const {addonBefore,addonAfter,type,ellipsis}=valueTypeProps;
+    const tableVal=getTableVal(config,itemData);
+    return <Paragraph type={type} ellipsis={ellipsis}>
+        {addonBefore}{tableVal}{addonAfter}
+    </Paragraph>
+}
+export default {
+    date:dateRender,
+    tags:tagsRender,
+    copy:copyRender,
+    link:linkRender,
+    text:textRender
+}

package/src/components/render/index.tsx

@@ -0,0 +1,20 @@
+import { ConfigItemModal, HTableInstance} from "@/components/modal";
+import React from "react";
+import config from './config';
+import {ValueTypeConfigModal} from '../modal'
+export default (item:ConfigItemModal,tableInstance:HTableInstance,valueTypeConfig:ValueTypeConfigModal)=>{
+    const { render ,valueType=""} = item;
+    return (dom: React.ReactNode, itemData: any, index: number)=>{
+        const valType=(valueType as string);
+        if (render){
+            return render(dom, itemData, index, tableInstance);
+        }
+        if (valueTypeConfig[valType]){
+            return  valueTypeConfig[valType](item,itemData,index,tableInstance);
+        }
+        if (config[valType]){
+          return  config[valType](item,itemData,index,tableInstance);
+        }
+        return dom;
+     }
+}