From 81e9f636c0348ca2ba896f066351f2741fd9497f Mon Sep 17 00:00:00 2001
From: eternallycyf <969475322@qq.com>
Date: Sun, 29 Oct 2023 23:39:47 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ims-view-pc):=20add=20CommonEd?=
 =?UTF-8?q?itTable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AccessBtn/index.tsx        |   4 +-
 .../src/components/AccessBtn/interface.ts     |   8 +-
 .../src/components/AudioPlayer/index.md       |   2 +-
 .../src/components/CommonCard/index.md        |   2 +-
 .../components/CommonEditTable/EditTable.tsx  | 358 ++++++++++++++++++
 .../src/components/CommonEditTable/Item.tsx   |   9 +
 .../src/components/CommonEditTable/README.md  |  12 +
 .../components/CommonEditTable/TableBtn.tsx   |  35 ++
 .../CommonEditTable/demo/config/columns.tsx   |  74 ++++
 .../components/CommonEditTable/demo/demo1.tsx | 162 ++++++++
 .../src/components/CommonEditTable/index.less |  49 +++
 .../src/components/CommonEditTable/index.tsx  |  42 ++
 .../components/CommonEditTable/interface.ts   | 212 +++++++++++
 .../src/components/CommonEditTable/utils.tsx  | 125 ++++++
 .../components/CustomForm/FormItem/simple.tsx |  47 +--
 .../src/components/CustomForm/index.md        |   2 +-
 .../src/components/VideoViewer/index.md       |   2 +-
 .../ims-view-pc/src/core/helpers/index.tsx    | 110 +++++-
 .../ims-view-pc/src/core/helpers/utils.tsx    |  68 +++-
 packages/ims-view-pc/src/index.tsx            |   2 +
 20 files changed, 1292 insertions(+), 33 deletions(-)
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/EditTable.tsx
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/Item.tsx
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/README.md
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/TableBtn.tsx
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/demo/config/columns.tsx
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/demo/demo1.tsx
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/index.less
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/index.tsx
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/interface.ts
 create mode 100644 packages/ims-view-pc/src/components/CommonEditTable/utils.tsx

diff --git a/packages/ims-view-pc/src/components/AccessBtn/index.tsx b/packages/ims-view-pc/src/components/AccessBtn/index.tsx
index f85bc39..bb7aa3c 100644
--- a/packages/ims-view-pc/src/components/AccessBtn/index.tsx
+++ b/packages/ims-view-pc/src/components/AccessBtn/index.tsx
@@ -19,7 +19,7 @@ const AccessBtn: React.FC<IAccessBtnProps> = (props) => {
     const accessCodeList = accessCollection.map((item) => item);
 
     const btnEleList = (btnList || []).map((btn, index) => {
-      const { type, code, buttonType, element, visible, itemProps } = btn;
+      const { type = 'default', code, buttonType, element, visible, itemProps } = btn;
       const buttonProps = (btn?.itemProps?.buttonProps as IButtonItemProps['buttonProps']) || {};
       const buttonGroupProps = btn?.itemProps?.buttonGroupProps || {};
       const popConfirmProps = btn?.itemProps?.popConfirmProps || {};
@@ -79,7 +79,7 @@ const AccessBtn: React.FC<IAccessBtnProps> = (props) => {
       return (
         <Button
           key={`access-${code || index}${getUUID()}`}
-          size={size || 'middle'}
+          size={size || 'small'}
           type={buttonType || 'primary'}
           {...buttonProps}
         >
diff --git a/packages/ims-view-pc/src/components/AccessBtn/interface.ts b/packages/ims-view-pc/src/components/AccessBtn/interface.ts
index aa71f73..0ada220 100644
--- a/packages/ims-view-pc/src/components/AccessBtn/interface.ts
+++ b/packages/ims-view-pc/src/components/AccessBtn/interface.ts
@@ -42,7 +42,7 @@ export interface IButtonItemProps extends IButtonDeleteProps, IButtonGroupProps
   popConfirmProps?: PopconfirmProps;
 }
 
-export interface IButtonProps {
+export interface IBaseButtonProps {
   element?: ReactNode;
   type?: IAccessBtnType;
   buttonType?: ButtonProps['type'];
@@ -51,9 +51,11 @@ export interface IButtonProps {
   itemProps?: IButtonItemProps;
 }
 
-export interface IAccessBtnProps {
+export type IButtonProps<Rest = Record<string, unknown>> = Rest & IBaseButtonProps;
+
+export interface IAccessBtnProps<Rest = Record<string, unknown>> {
   className?: string;
   accessCollection?: string[];
   children?: React.ReactNode;
-  btnList?: IButtonProps[];
+  btnList?: IButtonProps<Rest>[];
 }
diff --git a/packages/ims-view-pc/src/components/AudioPlayer/index.md b/packages/ims-view-pc/src/components/AudioPlayer/index.md
index 6f657d9..4c5f46b 100644
--- a/packages/ims-view-pc/src/components/AudioPlayer/index.md
+++ b/packages/ims-view-pc/src/components/AudioPlayer/index.md
@@ -4,7 +4,7 @@ description: 音频播放器： 提供音频文件的播放、控制等
 toc: content
 group:
   title: 文件
-  order: 2
+  order: 4
 demo:
   cols: 2
 ---
diff --git a/packages/ims-view-pc/src/components/CommonCard/index.md b/packages/ims-view-pc/src/components/CommonCard/index.md
index a92c7a2..9ebbcbb 100644
--- a/packages/ims-view-pc/src/components/CommonCard/index.md
+++ b/packages/ims-view-pc/src/components/CommonCard/index.md
@@ -4,7 +4,7 @@ description: 卡片布局
 toc: content
 group:
   title: 布局
-  order: 1
+  order: 3
 demo:
   cols: 2
 ---
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/EditTable.tsx b/packages/ims-view-pc/src/components/CommonEditTable/EditTable.tsx
new file mode 100644
index 0000000..8b2aa68
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/EditTable.tsx
@@ -0,0 +1,358 @@
+import { Col, Form, FormListFieldData, FormListOperation, Row } from 'antd';
+import {
+  ErrorBoundary,
+  IButtonProps,
+  ICommonEditTableColumnsType,
+  ICommonEditTableHandle,
+  ICommonEditTableProps,
+  IEditButtonProps,
+  IEditTableContext,
+  IGetColumns,
+  IRenderFnProps,
+  renderFormItem,
+} from 'ims-view-pc';
+import React, { Key, useImperativeHandle } from 'react';
+import { formatColumn } from '../../core/helpers';
+import { Table } from './';
+import './index.less';
+import TableBtn from './TableBtn';
+import {
+  addExtraIndexParams,
+  formatEditTableColumns,
+  getCurrentFieldValue,
+  handleExport,
+  removeExtraColumnsProps,
+} from './utils';
+
+const CommonEditTable: React.ForwardRefRenderFunction<
+  ICommonEditTableHandle,
+  ICommonEditTableProps
+> = (props, ref) => {
+  // #region
+  const {
+    form,
+    status = 'edit',
+    showIndex = true,
+    isVirtual = false,
+    isMultiple = true,
+    editableKeys = [],
+    itemButtonWidth,
+
+    beforeChildren,
+    afterChildren,
+
+    tableProps = {},
+    columns = [],
+    itemButton = [],
+    buttonLeft = [],
+    buttonRight = [],
+    buttonBottomLeft = [],
+    buttonBottomRight = [],
+
+    name: tableFormName = 'EditTable',
+    formListProps = {},
+    initialValues,
+    rules = [],
+  } = props;
+  const {} = tableProps;
+  const EditTableContextInitProps = {
+    form,
+    operation: {},
+    values: [],
+    status,
+  } as IEditTableContext;
+  const EditTableContext = React.createContext<IEditTableContext>(EditTableContextInitProps);
+
+  useImperativeHandle(ref, () => ({
+    form,
+    handleExport,
+    status,
+  }));
+
+  const EditTableContextProviderProps = {
+    form,
+    values: form?.getFieldValue(tableFormName) || [],
+    handleExport,
+    status,
+  };
+  //#endregion
+
+  // #region
+  const getDefaultColumns: IGetColumns = (operation, status) => {
+    const values = form?.getFieldValue(tableFormName) || [];
+
+    let newColumns = columns.map((item: ICommonEditTableColumnsType) => {
+      const {
+        dataIndex,
+        label,
+        formItemProps,
+        type = 'view',
+        editable = true,
+        onHeaderCell,
+        hasRequiredMark = false,
+        ...restTableProps
+      } = item;
+      const {
+        initialValue,
+        rules = [],
+        layout,
+        itemProps,
+        controlProps,
+        ...restItem
+      } = formItemProps || {};
+      return {
+        dataIndex,
+        ...restTableProps,
+        onHeaderCell: (columns: any) => {
+          const restOnHeaderCellProps = onHeaderCell ? onHeaderCell?.(columns) : {};
+          return {
+            ...restOnHeaderCellProps,
+            className: `${restOnHeaderCellProps?.className} ${hasRequiredMark && 'isRequired'}`,
+          };
+        },
+        render: (text: number, field: FormListFieldData, index: number) => {
+          const renderProps = getCurrentFieldValue(form, tableFormName, index);
+          const val = renderProps?.[0]?.[item?.dataIndex];
+          const currentValues = renderProps?.[0];
+          const allValues = renderProps?.[1];
+          const name = [field.name, dataIndex] as Key[];
+          const key = field.key;
+          const formProps = {
+            ...restItem,
+            controlProps: addExtraIndexParams(controlProps, index),
+            editable,
+            name,
+            type,
+          };
+
+          if (type == 'custom') {
+            return item.render?.(val, currentValues, index, allValues);
+          }
+
+          if (status == 'view' || !editable) {
+            if (item.transform) {
+              return item.transform?.(val, currentValues, index, allValues);
+            }
+            if (item.render) {
+              return item.render?.(val, currentValues, index, allValues);
+            }
+            return formatEditTableColumns(item, val);
+          }
+
+          const getContent = ({
+            form,
+            formProps,
+            index,
+            type,
+          }: {
+            form: any;
+            formProps: any;
+            index: number;
+            type: any;
+          }) => {
+            if (type == 'update') {
+              // FAQ: 可编辑表格使用 type == 'update'
+              // 为Form.Item.type == 'update' 注入 index
+              return (
+                <Row {...itemProps}>
+                  {renderFormItem({
+                    ...formProps,
+                    itemProps: addExtraIndexParams(itemProps, index),
+                  })}
+                </Row>
+              );
+            }
+            return (
+              <Form.Item
+                labelAlign="right"
+                label={label as string}
+                name={name}
+                key={key}
+                rules={rules || itemProps?.rules || []}
+                initialValue={initialValue}
+                {...layout}
+                {...itemProps}
+              >
+                {renderFormItem(formProps, index)}
+              </Form.Item>
+            );
+          };
+
+          if (isMultiple) return getContent({ type, formProps, index, form } as any);
+
+          return (
+            <Form.Item noStyle shouldUpdate={true}>
+              {(inLineForm) => {
+                const currentValue = inLineForm?.getFieldValue(tableFormName) || []?.[name as any];
+                if (!isMultiple && !editableKeys.includes(String(currentValue?.[index]?.key))) {
+                  if (item.transform) {
+                    return item.transform?.(val, currentValues, index, allValues);
+                  }
+                  if (item.render) {
+                    return item.render?.(val, currentValues, index, allValues);
+                  }
+                  return formatEditTableColumns(item, val);
+                }
+                return getContent({ type, formProps, index, form } as any);
+              }}
+            </Form.Item>
+          );
+        },
+      };
+    });
+    if (itemButton && itemButton?.length != 0 && status === 'edit') {
+      newColumns.push({
+        title: '操作',
+        align: 'center',
+        width: itemButtonWidth || (values && values?.length != 0) ? itemButton.length * 70 : 60,
+        dataIndex: 'operation',
+        render: (text: number, field: FormListFieldData, index: number) => {
+          const renderProps = getCurrentFieldValue(form, tableFormName, index);
+          return renderButtonRow(itemButton as any, [], operation, {
+            record: renderProps?.[0],
+            arr: renderProps?.[1],
+            index,
+          });
+        },
+        onHeaderCell: null as any,
+      });
+    }
+    if (showIndex) {
+      newColumns.unshift({
+        title: '序号',
+        align: 'center',
+        width: 60,
+        render: (text: number, field: FormListFieldData, index: number) =>
+          isVirtual ? field.key + 1 : index + 1,
+      } as any);
+    }
+
+    // 解除传递 formatNumber 等参数 控制台报错问题
+    return removeExtraColumnsProps(formatColumn(newColumns));
+  };
+
+  const renderButtonRow = (
+    buttonLeft: IEditButtonProps[] = [],
+    buttonRight: IEditButtonProps[] = [],
+    operation: FormListOperation,
+    renderProps?: IRenderFnProps<any> | undefined,
+  ) => {
+    if (!buttonLeft.length && !buttonRight.length) return null;
+
+    const getBtnProps = (button: IEditButtonProps[]) => {
+      return button.map((item) => {
+        if (typeof item === 'function') {
+          const params = item(renderProps, operation, status);
+          return {
+            ...params,
+            visible: params?.visible || true,
+          };
+        }
+
+        const onClick =
+          typeof item?.itemProps?.buttonProps?.onClick === 'function'
+            ? item.itemProps.buttonProps.onClick.bind(null, renderProps, operation, status)
+            : undefined;
+        const handleDeleteConfirm =
+          typeof item?.itemProps?.handleDeleteConfirm === 'function'
+            ? item.itemProps.handleDeleteConfirm.bind(null, renderProps, operation, status)
+            : undefined;
+        const handleGroupValueOnChange =
+          typeof item?.itemProps?.handleGroupValueOnChange === 'function'
+            ? item.itemProps.handleGroupValueOnChange.bind(
+                null,
+                item.itemProps.handleGroupValueOnChange,
+                renderProps,
+                operation,
+                status,
+              )
+            : undefined;
+
+        const btnProps: IButtonProps = {
+          ...item,
+          itemProps: {
+            ...item?.itemProps,
+            buttonProps: {
+              ...item?.itemProps?.buttonProps,
+              onClick,
+            },
+            handleDeleteConfirm,
+            handleGroupValueOnChange,
+          },
+          // FAQ: 当不是函数形式时 为了兼容tableBtn的visible 所以取函数形式
+          visible: () => {
+            if (item.visible == undefined) return true;
+            if (typeof item.visible === 'function')
+              return item.visible(renderProps, operation, status);
+            return item.visible;
+          },
+        };
+
+        return btnProps;
+      });
+    };
+
+    if (renderProps) {
+      return (
+        <TableBtn style={{ justifyContent: 'center' }} button={getBtnProps(buttonLeft) as any} />
+      );
+    }
+
+    return (
+      <Form.Item noStyle>
+        <Row justify="space-between" align="middle">
+          <Col>
+            <TableBtn button={getBtnProps(buttonLeft) as any} />
+          </Col>
+          <Col>
+            <TableBtn button={getBtnProps(buttonRight) as any} />
+          </Col>
+        </Row>
+      </Form.Item>
+    );
+  };
+  //#endregion
+
+  return (
+    <ErrorBoundary>
+      <Form.List name={tableFormName} initialValue={initialValues} rules={rules} {...formListProps}>
+        {(fields, operation, { errors }) => {
+          return (
+            <EditTableContext.Provider value={{ ...EditTableContextProviderProps, operation }}>
+              <Form.Item noStyle>
+                <EditTableContext.Consumer>
+                  {typeof beforeChildren === 'function' ? beforeChildren : () => null}
+                </EditTableContext.Consumer>
+              </Form.Item>
+              {renderButtonRow(buttonLeft, buttonRight, operation)}
+              <Form.Item className="EditTableContent">
+                <Table
+                  isVirtual={fields?.length >= 100 ? isVirtual : false}
+                  status={status}
+                  scroll={isVirtual ? { y: 800 } : false}
+                  onSearchOrReset={(scrollRef: any) =>
+                    scrollRef?.current?.dispatchEvent(new CustomEvent('scroll'))
+                  }
+                  dataSource={fields}
+                  columns={getDefaultColumns(operation, status)}
+                  rowKey={'key'}
+                  pagination={false}
+                  {...tableProps}
+                />
+              </Form.Item>
+              {renderButtonRow(buttonBottomLeft, buttonBottomRight, operation)}
+              <Form.Item noStyle>
+                <EditTableContext.Consumer>
+                  {typeof afterChildren === 'function' ? afterChildren : () => null}
+                </EditTableContext.Consumer>
+              </Form.Item>
+              <Form.ErrorList errors={errors} />
+            </EditTableContext.Provider>
+          );
+        }}
+      </Form.List>
+    </ErrorBoundary>
+  );
+};
+
+export default CommonEditTable;
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/Item.tsx b/packages/ims-view-pc/src/components/CommonEditTable/Item.tsx
new file mode 100644
index 0000000..9ffb098
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/Item.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface ICommonEditTableItemProps<T = any> {}
+
+function Item<Values = any>(props: ICommonEditTableItemProps<Values>): React.ReactElement {
+  return <span></span>;
+}
+
+export default Item;
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/README.md b/packages/ims-view-pc/src/components/CommonEditTable/README.md
new file mode 100644
index 0000000..ba431c6
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/README.md
@@ -0,0 +1,12 @@
+---
+title: CommonEditTable
+description: 单行多行动态编辑表格
+toc: content
+group:
+  title: 表格
+  order: 2
+demo:
+  cols: 2
+---
+
+<code src='./demo/demo1.tsx'>CommonEditTable<code>
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/TableBtn.tsx b/packages/ims-view-pc/src/components/CommonEditTable/TableBtn.tsx
new file mode 100644
index 0000000..51f4a50
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/TableBtn.tsx
@@ -0,0 +1,35 @@
+import cx from 'classnames';
+import { AccessBtn, IButtonProps } from 'ims-view-pc';
+import React, { Fragment } from 'react';
+import './index.less';
+
+export const renderBtn = (button: any) => {
+  if (!button || !button.length) return null;
+  const filterButton = button.filter((item: any) => {
+    return item.visible || (item.visible && typeof item.visible === 'function' && item.visible());
+  });
+
+  if (!filterButton.length) return null;
+  return (
+    <Fragment>
+      <AccessBtn btnList={filterButton} />
+    </Fragment>
+  );
+};
+interface ITableBtnProps {
+  button: IButtonProps[];
+  style?: React.CSSProperties;
+}
+
+class TableBtn extends React.PureComponent<ITableBtnProps, any> {
+  render() {
+    const { button, style } = this.props;
+    return button && button.length > 0 ? (
+      <div style={style} className="buttonRow">
+        {renderBtn(button)}
+      </div>
+    ) : null;
+  }
+}
+
+export default TableBtn;
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/demo/config/columns.tsx b/packages/ims-view-pc/src/components/CommonEditTable/demo/config/columns.tsx
new file mode 100644
index 0000000..ac6f0ae
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/demo/config/columns.tsx
@@ -0,0 +1,74 @@
+import { ICommonEditTableColumnsType } from 'ims-view-pc';
+import _ from 'lodash';
+// import './index.less';
+import { IColumnsExtraRecord, IRecord } from '../demo1';
+
+interface IGetColumnsParams {
+  handleGetCurrentRatio: () => void;
+  handleCheckIsRatioExceedExcessie: (_: any, val: number) => Promise<string>;
+}
+export const getColumns = (
+  params: IGetColumnsParams,
+): ICommonEditTableColumnsType<IRecord, IColumnsExtraRecord>[] => {
+  const { handleGetCurrentRatio, handleCheckIsRatioExceedExcessie } = params;
+  return [
+    {
+      dataIndex: 'userName',
+      title: '姓名',
+      type: 'input',
+      align: 'center',
+      ellipsis: true,
+      width: 100,
+      tooltip: 'sss',
+      formItemProps: {
+        controlProps: {},
+      },
+    },
+    {
+      dataIndex: 'time',
+      title: '时间',
+      type: 'date',
+      align: 'center',
+      formatTime: true,
+      width: 100,
+      formItemProps: {
+        controlProps: {
+          onChange: (e) => {
+            console.log(e);
+          },
+        },
+      },
+    },
+    {
+      dataIndex: 'ratio',
+      title: '比例',
+      hasRequiredMark: true,
+      type: 'inputNumber',
+      align: 'left',
+      formatNumber: true,
+      width: 140,
+      formatPercent: true,
+      formItemProps: {
+        controlProps: {
+          min: 0,
+          max: 100,
+          step: 1,
+          precision: 2,
+          addonAfter: '%',
+          style: { width: '100%' },
+          onChange: handleGetCurrentRatio,
+        },
+        itemProps: {
+          validateTrigger: ['onBlur', 'onSubmit'],
+        },
+        rules: [
+          {
+            required: true,
+            validator: handleCheckIsRatioExceedExcessie,
+            validateTrigger: 'onSubmit',
+          },
+        ],
+      },
+    },
+  ];
+};
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/demo/demo1.tsx b/packages/ims-view-pc/src/components/CommonEditTable/demo/demo1.tsx
new file mode 100644
index 0000000..83e2085
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/demo/demo1.tsx
@@ -0,0 +1,162 @@
+import {
+  PlusCircleOutlined,
+  VerticalAlignBottomOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Form } from 'antd';
+import dayjs from 'dayjs';
+import {
+  AccessBtn,
+  CommonEditTable,
+  ICommonEditTableHandle,
+  ICommonEditTableProps,
+} from 'ims-view-pc';
+import React, { useEffect } from 'react';
+import { getColumns } from './config/columns';
+
+export interface IRecord {
+  userName: string;
+  time?: dayjs.Dayjs;
+  ratio?: number;
+}
+
+export interface IFormValues {
+  EditTable?: IRecord[];
+}
+
+export interface IColumnsExtraRecord {}
+
+const Demo = () => {
+  const [form] = Form.useForm<IFormValues>();
+  const EditTableRef = React.useRef<ICommonEditTableHandle<IRecord, IFormValues>>(null!);
+  const [status, setStatus] = React.useState<ICommonEditTableProps['status']>('edit');
+
+  useEffect(() => {}, []);
+
+  const handleOnSubmit = () => {
+    const values = EditTableRef.current.form.getFieldsValue();
+    console.log(values);
+    form.validateFields();
+  };
+
+  const handleGetCurrentRatio = () => {};
+
+  const handleCheckIsRatioExceedExcessie = (_: any, val: number) => {
+    if (val == null) return Promise.reject('必填项');
+    if (val == 0) return Promise.reject('比例不能为0');
+    const tableValues = form.getFieldValue('EditTable') || [];
+    if (tableValues?.length == 0) return Promise.resolve('');
+    return Promise.resolve('');
+  };
+
+  const formItemProps = {
+    handleGetCurrentRatio,
+    handleCheckIsRatioExceedExcessie,
+  };
+
+  return (
+    <Card>
+      <Form form={form}>
+        <CommonEditTable<IRecord, IColumnsExtraRecord, IFormValues>
+          form={form}
+          status={status}
+          ref={EditTableRef}
+          // tableProps={{
+          //   virtual: true,
+          //   scroll: { x: 700, y: 1000 },
+          // }}
+          initialValues={Array.from({ length: 3 }).map((_, index) => ({
+            userName:
+              '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三',
+            key: index,
+          }))}
+          columns={getColumns(formItemProps)}
+          buttonLeft={[]}
+          buttonRight={[
+            {
+              type: 'default',
+              element: '添加到头部',
+              visible: (renderProps, operation, status) => status == 'edit',
+              itemProps: {
+                buttonProps: {
+                  onClick: (renderProps, operation, status) =>
+                    operation.add({ userName: '张三' }, 0),
+                },
+              },
+            },
+            (renderProps, operation, status) => ({
+              type: 'default',
+              element: '全部删除',
+              visible: status == 'edit',
+              itemProps: {
+                buttonProps: {
+                  danger: true,
+                  disabled: status == 'view',
+                  onClick: () => form.setFieldsValue({ EditTable: [] }),
+                  icon: <WarningOutlined />,
+                },
+              },
+            }),
+          ]}
+          itemButton={[
+            (values, operation) => {
+              return {
+                type: 'delete',
+                buttonType: 'default',
+                element: '删除',
+                itemProps: {
+                  deleteText: '确认删除嘛',
+                  handleDeleteConfirm: () => operation.remove(values.index),
+                },
+                onClick: () => operation.remove(values.index),
+              };
+            },
+          ]}
+          beforeChildren={(values) => {
+            return (
+              <AccessBtn
+                btnList={[
+                  {
+                    type: 'group',
+                    itemProps: {
+                      groupValue: status,
+                      handleGroupValueOnChange: (value: ICommonEditTableProps['status']) =>
+                        setStatus(value),
+                      groupDict: [
+                        { value: 'edit', label: '编辑视图' },
+                        { value: 'view', label: '展示视图' },
+                      ],
+                    },
+                  },
+                ]}
+              />
+            );
+          }}
+          afterChildren={(values) => {
+            if (status == 'view') return null;
+            return (
+              <div style={{ display: 'grid', placeContent: 'center' }}>
+                <Button
+                  type="link"
+                  icon={<PlusCircleOutlined />}
+                  onClick={() => {
+                    values.operation.add({ userName: '张三', time: dayjs() });
+                  }}
+                >
+                  添加
+                </Button>
+              </div>
+            );
+          }}
+        />
+        <Form.Item>
+          <Button type="primary" onClick={handleOnSubmit}>
+            提交
+          </Button>
+        </Form.Item>
+      </Form>
+    </Card>
+  );
+};
+
+export default React.memo(Demo);
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/index.less b/packages/ims-view-pc/src/components/CommonEditTable/index.less
new file mode 100644
index 0000000..f4180cb
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/index.less
@@ -0,0 +1,49 @@
+.row {
+  align-items: center;
+
+  &:extend(.flex);
+}
+
+.EditTableContent {
+  margin-bottom: 0;
+
+  tr .ant-table-cell div.ant-form-item {
+    margin-bottom: 0;
+  }
+
+  .isRequired {
+  }
+
+  .isRequired::after {
+    color: #e62c3b;
+    content: '*';
+    font-weight: 500;
+    font-size: 14px;
+  }
+}
+
+.buttonRow {
+  display: flex;
+  justify-content: flex-end;
+  margin: 8px 0;
+
+  &:extend(.row);
+
+  :global {
+    .ant-btn {
+      display: flex !important;
+      margin-right: 10px;
+      font-size: 12px;
+
+      &:nth-last-of-type(1) {
+        margin-right: 0;
+
+        &[disabled] {
+          border-color: #e5e5e5;
+          background-color: #f5f5f5;
+          color: rgba(0, 0, 0, 0.25);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/index.tsx b/packages/ims-view-pc/src/components/CommonEditTable/index.tsx
new file mode 100644
index 0000000..ae5e85a
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/index.tsx
@@ -0,0 +1,42 @@
+import { Table as AntdTable } from 'antd';
+import React, { FC } from 'react';
+import EditTable from './EditTable';
+import { ICommonEditTableHandle, ICommonEditTableProps } from './interface';
+import Item from './Item';
+
+export const Table: FC<{
+  isVirtual: boolean;
+  status?: ICommonEditTableProps['status'];
+  [props: string]: any;
+}> = (props) => {
+  const { isVirtual, status, ...restProps } = props;
+  // if (isVirtual) {
+  //   return <VirtualScrollTable {...restProps} />;
+  // }
+  if (status === 'edit') {
+    return <AntdTable {...restProps} />;
+  }
+  return <AntdTable {...(restProps as any)} />;
+};
+
+const CompoundedCommonEditTable = React.forwardRef<ICommonEditTableHandle, ICommonEditTableProps>(
+  EditTable,
+) as <
+  Values = Record<string, unknown>,
+  Rest = Record<string, unknown>,
+  FormItemsValues = Record<string, unknown>,
+>(
+  props: React.PropsWithChildren<ICommonEditTableProps<Values, Rest, FormItemsValues>> & {
+    ref?: React.Ref<ICommonEditTableHandle<Values, FormItemsValues>>;
+  },
+) => React.ReactElement;
+
+type CompoundedComponent = typeof CompoundedCommonEditTable & {
+  Item: typeof Item;
+};
+
+const CommonEditTable = CompoundedCommonEditTable as CompoundedComponent;
+
+CommonEditTable.Item = Item;
+
+export default CommonEditTable;
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/interface.ts b/packages/ims-view-pc/src/components/CommonEditTable/interface.ts
new file mode 100644
index 0000000..a64c43f
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/interface.ts
@@ -0,0 +1,212 @@
+import { Form, FormInstance, FormItemProps, TableProps } from 'antd';
+import { FormListProps } from 'antd/es/form';
+import {
+  Column,
+  FormControlType,
+  IBaseButtonProps,
+  IButtonItemProps,
+  ISearchesType,
+  Search,
+} from 'ims-view-pc';
+import React from 'react';
+import './index.less';
+import { IHandleExport } from './utils';
+
+// #region
+/**
+ * @typedef {Object} IEditTableContext context
+ * @property {FormInstance} form - form实例
+ * @property {FormListOperation<Values>} operation - formList的操作
+ * @property {Values[]} values - formList的值
+ * @template Values -
+ * @template FormItemsValues -
+ */
+export interface IEditTableContext<Values = any, FormItemsValues = any>
+  extends ICommonEditTableHandle<Values, FormItemsValues> {
+  operation: FormListOperation<Values>;
+  values: Values[] | [] | undefined;
+}
+
+/**
+ * 通用编辑表格
+ * @typedef {Object} ICommonEditTableProps
+ * @property {FormInstance} form - form实例
+ * @property {string} [status='edit'] - 编辑状态
+ * @property {boolean} [showIndex=true] - 是否显示序号
+ * @property {boolean} [isVirtual=false] - 是否是虚拟列表虚拟列表 必须传入 scroll.y 高度
+ * @property {boolean} [isMultiple=true] - 是否是实时保存类型 为false时 editable = true 才会可编辑
+ * @property {string[]} [editableKeys] - 可编辑的key
+ * @property {number} [itemButtonWidth=undefined] - 每一行的操作按钮的宽度 默认自适应
+ *
+ * @property {React.ReactNode | ((value: IEditTableContext) => React.ReactNode)} [beforeChildren] - 表格前面的内容
+ * @property {React.ReactNode | ((value: IEditTableContext) => React.ReactNode)} [afterChildren] - 表格后面的内容
+ *
+ * @property {TableProps} [tableProps] - table的props
+ * @property {IGetColumns} columns - table的columns
+ * @property {IEditTableButtonProps} [itemButton] - 每一行的操作按钮
+ * @property {IEditTableNotItemButtonProps} [buttonLeft] - 表格左边的按钮
+ * @property {IEditTableNotItemButtonProps} [buttonRight] - 表格右边的按钮
+ * @property {IEditTableNotItemButtonProps} [buttonBottomLeft] - 表格底部左边的按钮
+ * @property {IEditTableNotItemButtonProps} [buttonBottomRight] - 表格底部右边的按钮
+ *
+ * @property {string} [name='EditTable'] - formList的name
+ * @property {React.ComponentProps<typeof Form.List>} [formListProps] - formList的props
+ * @property {any[]} [initialValues] - formList的initialValues
+ * @property {React.ComponentProps<typeof Form.List>['rules']} [rules] - formList的rules
+ * @template Values - 表单name
+ * @template Rest - 其他自定义的参数 => (columnsType & Rest)[]
+ */
+export interface ICommonEditTableProps<
+  Values = Record<string, unknown>,
+  Rest = Record<string, unknown>,
+  FormItemsValues = Record<string, unknown>,
+> {
+  /**@name 基础配置 */
+  form: FormInstance<FormItemsValues>;
+  status?: 'view' | 'edit';
+  showIndex?: boolean;
+  isVirtual?: boolean;
+  isMultiple?: boolean;
+  editableKeys?: string[];
+  itemButtonWidth?: number;
+
+  /**@name 其他内容配置 */
+  beforeChildren?:
+    | React.ReactNode
+    | ((value: IEditTableContext<Values, FormItemsValues>) => React.ReactNode);
+  afterChildren?:
+    | React.ReactNode
+    | ((value: IEditTableContext<Values, FormItemsValues>) => React.ReactNode);
+
+  /**@name table配置 */
+  tableProps?: TableProps<Values>;
+  columns: ReturnType<IGetColumns<Values, Rest>>;
+  itemButton?: IEditButtonProps<Values, true>[];
+  buttonLeft?: IEditButtonProps<Values>[];
+  buttonRight?: IEditButtonProps<Values>[];
+  buttonBottomLeft?: IEditButtonProps<Values>[];
+  buttonBottomRight?: IEditButtonProps<Values>[];
+
+  /**@name formList 配置 */
+  name?: FormListProps['name'];
+  formListProps?: React.ComponentProps<typeof Form.List>;
+  initialValues?: Values[];
+  rules?: React.ComponentProps<typeof Form.List>['rules'];
+}
+
+/**
+ * @name 通用编辑表格ref获取的方法
+ */
+export type ICommonEditTableHandle<Values = any, FormItemsValues = any> = {
+  form: FormInstance<FormItemsValues>;
+  handleExport: IHandleExport<Values>;
+  status: ICommonEditTableProps['status'];
+};
+
+/**
+ * @name 通用编辑表格的列的额外参数
+ */
+export interface IColumnEditRestProps<Values> {
+  type?: FormControlType;
+  label?: ISearchesType[number]['label'];
+  name?: Values;
+}
+
+/**
+ * @name columns
+ * 只有 type === 'custom' || item.transform && status == 'view' 时 render 才会生效
+ * item.transform ? item.transform : item.render
+ */
+export type ICommonEditTableColumnsType<
+  Values = Record<string, unknown>,
+  Rest = Record<string, unknown>,
+> = Omit<Column<Values>, 'formItemProps' | 'render'> & {
+  /**@name 是否有必填标记 */
+  hasRequiredMark?: boolean;
+  formItemProps?: Omit<Search<Values>, 'name' | 'label' | 'type' | 'controlProps'> & {
+    rules?: FormItemProps<Values>['rules'];
+    controlProps?: Partial<Search['controlProps']>;
+  };
+  render?: (value: any, record: Values, index: number, allValues: Values[]) => React.ReactNode;
+  shouldUpdate?: FormItemProps<Values>['shouldUpdate'];
+  /**
+   * @name 自定义转换的方法
+   * @name status === 'view' | !editable 状态时 展示数据转换 和render一样 只不过为了使用formatCoumn的方法 用这个代替render
+   * @example <caption>自定义转换的方法</caption>
+   * transform: (text, record, index, allValues) => text + '元'
+   */
+  transform?: (text: any, record: Values, index: number, allValues: Values[]) => React.ReactNode;
+} & Rest &
+  IColumnEditRestProps<Values>;
+
+//#endregion
+
+// #region 内部 interface
+export interface FormListOperation<Values = any> {
+  add: (defaultValue?: Values, insertIndex?: number) => void;
+  remove: (index: number | number[]) => void;
+  move: (from: number, to: number) => void;
+}
+export interface IRenderFnProps<Values> {
+  record: Values;
+  arr: Values[];
+  index: number;
+}
+export type IEditButtonFunction<Values = Record<string, unknown>> = (
+  renderProps: IRenderFnProps<Values>,
+  operation: FormListOperation<Values>,
+  status: ICommonEditTableProps['status'],
+) => any;
+export interface IEditButtonItemProps<
+  Values = Record<string, unknown>,
+  IsItemBtn extends boolean = false,
+> extends Omit<
+    IButtonItemProps,
+    'buttonProps' | 'handleDeleteConfirm' | 'handleGroupValueOnChange'
+  > {
+  buttonProps?: Omit<IButtonItemProps['buttonProps'], 'onClick'> & {
+    /**
+     * @name 按钮的点击事件
+     * @param {IRenderFnProps<Values>} renderProps - 当前行的值
+     * @param {FormListOperation<Values>} operation - formList的操作
+     * @param {ICommonEditTableProps['status']} status - 当前编辑状态
+     */
+    onClick?: IsItemBtn extends true ? (e: any) => any : IEditButtonFunction<Values>;
+  };
+  handleDeleteConfirm?: IsItemBtn extends true ? (e: any) => any : IEditButtonFunction<Values>;
+  handleGroupValueOnChange?: IsItemBtn extends true
+    ? (value: Parameters<IButtonItemProps['handleGroupValueOnChange']>) => any
+    : (
+        value: Parameters<IButtonItemProps['handleGroupValueOnChange']>,
+        renderProps: IRenderFnProps<Values>,
+        operation: FormListOperation<Values>,
+        status: ICommonEditTableProps['status'],
+      ) => any;
+}
+export interface IBaseEditButtonProps<
+  Values = Record<string, unknown>,
+  IsItemBtn extends boolean = false,
+> extends Omit<IBaseButtonProps, 'visible' | 'itemProps'> {
+  visible?:
+    | boolean
+    | ((
+        renderProps: IsItemBtn extends true ? undefined : IRenderFnProps<Values>,
+        operation: IsItemBtn extends true ? undefined : FormListOperation<Values>,
+        status: ICommonEditTableProps['status'],
+      ) => boolean);
+  itemProps?: IEditButtonItemProps<Values, IsItemBtn>;
+}
+
+export type IEditButtonProps<Values = Record<string, unknown>, IsItemBtn extends boolean = false> =
+  | IBaseEditButtonProps<Values, IsItemBtn>
+  | ((
+      renderProps: IRenderFnProps<Values>,
+      operation: FormListOperation<Values>,
+      status: ICommonEditTableProps['status'],
+    ) => IBaseEditButtonProps<Values, IsItemBtn>);
+
+export type IGetColumns<Values = any, Rest = Record<string, unknown>> = (
+  operation: FormListOperation<Values>,
+  status: ICommonEditTableProps['status'],
+) => ICommonEditTableColumnsType<Values, Rest>[];
+//#endregion
diff --git a/packages/ims-view-pc/src/components/CommonEditTable/utils.tsx b/packages/ims-view-pc/src/components/CommonEditTable/utils.tsx
new file mode 100644
index 0000000..72846c1
--- /dev/null
+++ b/packages/ims-view-pc/src/components/CommonEditTable/utils.tsx
@@ -0,0 +1,125 @@
+import { Ellipsis, getFieldComp, Search } from 'ims-view-pc';
+
+import { FormInstance } from 'antd';
+import { FormListProps } from 'antd/es/form';
+import _ from 'lodash';
+import { formatNumber, formatPercent, formatTime, getDictMap } from '../../core/helpers/utils';
+import { ICommonEditTableColumnsType } from './interface';
+
+export type IHandleExport<Values = any> = (
+  title: string,
+  columns: any[],
+  dataSource: Values[],
+) => void;
+
+export const handleExport: IHandleExport = (title, columns = [], dataSource = []) => {
+  const getItem = (item: ICommonEditTableColumnsType) =>
+    (columns || [])?.find((ele) => ele?.dataIndex === item?.dataIndex);
+  // TODO: export
+  // downloadExcel({
+  //   filename: title,
+  //   sheets: [
+  //     {
+  //       sheetName: title,
+  //       columns: columns
+  //         .filter((item) => item.dataIndex !== 'operation' || item.key !== 'operate')
+  //         .map((item) => ({
+  //           ...item,
+  //           title: typeof item.title === 'string' ? item.title : getItem(item)?.title ?? item?.dataIndex,
+  //         })),
+  //       dataSource: dataSource,
+  //       header: title,
+  //     },
+  //   ],
+  // });
+};
+
+export const getCurrentFieldValue = (
+  form: FormInstance,
+  name: FormListProps['name'],
+  index: number,
+) => {
+  if (!form) return [undefined, undefined];
+  const record = (form.getFieldValue(name) || [])?.[index] || {};
+  const arr = form.getFieldValue(name) || [];
+  return [record, arr];
+};
+
+export const formatEditTableColumns = (defaultOptions: ICommonEditTableColumnsType, val: any) => {
+  const options = {
+    format: 'YYYY-MM-DD',
+    ellipsis: false,
+    ellipsisType: 'line',
+    rows: 1,
+    maxLength: 100,
+    ...defaultOptions,
+  };
+
+  const emptyStyle = { color: '#8E96A4' };
+  const emptyText = <span style={emptyStyle}>--</span>;
+
+  let text = val;
+  if (_.isNil(text)) return emptyText;
+  if (typeof text === 'string' && text.trim()?.length == 0) return emptyText;
+
+  if (options.dict) {
+    text = getDictMap(options.dict)[text];
+    text = _.isNil(text) ? '--' : text;
+  }
+
+  if (options.formatTime) {
+    text = formatTime(options, text);
+  }
+
+  if (options.formatPercent) {
+    text = formatPercent(text);
+  }
+
+  if (Number.isInteger(options.formatNumber) || options.formatNumber) {
+    text = formatNumber(options, text);
+  }
+
+  if (options.ellipsis) {
+    return options.ellipsisType === 'line' ? (
+      <Ellipsis lines={options.rows} style={text == '--' ? emptyStyle : {}}>
+        {text}
+      </Ellipsis>
+    ) : (
+      <Ellipsis length={options.maxLength} style={text == '--' ? emptyStyle : {}}>
+        {text}
+      </Ellipsis>
+    );
+  }
+
+  return text;
+};
+
+export const removeExtraColumnsProps = (
+  columns: ICommonEditTableColumnsType[] = [],
+): ICommonEditTableColumnsType[] => {
+  return columns.map((item) => {
+    const {
+      ellipsis,
+      format,
+      tooltip,
+      formatNumber,
+      formatPercent,
+      dict,
+      formatTime,
+      ...originProps
+    } = item;
+    return originProps;
+  });
+};
+
+export const addExtraIndexParams = (controlProps: any, index: number) => {
+  const newControlProps = { ...controlProps };
+  Object.keys(newControlProps).forEach((key) => {
+    if (typeof newControlProps[key] === 'function') {
+      newControlProps[key] = (...args: any[]) => {
+        return controlProps?.[key]?.(...args, index);
+      };
+    }
+  });
+  return newControlProps;
+};
diff --git a/packages/ims-view-pc/src/components/CustomForm/FormItem/simple.tsx b/packages/ims-view-pc/src/components/CustomForm/FormItem/simple.tsx
index df2124e..f4c4e56 100644
--- a/packages/ims-view-pc/src/components/CustomForm/FormItem/simple.tsx
+++ b/packages/ims-view-pc/src/components/CustomForm/FormItem/simple.tsx
@@ -37,25 +37,29 @@ const { MonthPicker, RangePicker, QuarterPicker } = DatePicker;
 
 dayjs.locale('zh-cn');
 
+type ISimpleBaseControlProps = Partial<
+  Pick<IBaseControlProps, 'Component' | 'dict' | 'renderItem'> &
+    DatePickerProps &
+    RangePickerProps &
+    TimePickerProps &
+    InputProps &
+    PasswordProps &
+    TextAreaProps &
+    InputNumberProps &
+    RateProps &
+    SwitchProps &
+    SliderBaseProps &
+    AutoCompleteProps &
+    CheckboxProps &
+    CheckboxGroupProps &
+    RadioProps &
+    RadioGroupProps
+>;
+
 export interface ISimpleControlProps<T = string> extends IBaseCustomFormItemProps {
-  controlProps: Partial<
-    Pick<IBaseControlProps, 'Component' | 'dict' | 'renderItem'> &
-      DatePickerProps &
-      RangePickerProps &
-      TimePickerProps &
-      InputProps &
-      PasswordProps &
-      TextAreaProps &
-      InputNumberProps &
-      RateProps &
-      SwitchProps &
-      SliderBaseProps &
-      AutoCompleteProps &
-      CheckboxProps &
-      CheckboxGroupProps &
-      RadioProps &
-      RadioGroupProps
-  >;
+  controlProps: ISimpleBaseControlProps & {
+    onChange?: any;
+  };
   defaultVal?: {
     year?: {
       locale: any;
@@ -144,18 +148,16 @@ const SimpleControl = React.forwardRef<any, ISimpleControlProps>((props, ref) =>
     dict,
     defaultVal,
     Component: CustomComponent,
-    value,
     checked = false,
-    onChange,
     controlProps: defaultControlProps = {},
+    ...restProps
   } = props;
 
   let Component: any;
   let controlProps: Partial<ISimpleControlProps['controlProps']> = {
-    value,
-    onChange,
     ...defaultVal[type],
     ...defaultControlProps,
+    ...restProps,
   };
 
   useImperativeHandle(ref, () => ({}));
@@ -259,6 +261,7 @@ const SimpleControl = React.forwardRef<any, ISimpleControlProps>((props, ref) =>
     if (type === 'switch') {
       controlProps = { ...controlProps, checked: !!checked };
     }
+
     return (
       <Component
         ref={ref}
diff --git a/packages/ims-view-pc/src/components/CustomForm/index.md b/packages/ims-view-pc/src/components/CustomForm/index.md
index 4f15d4a..f012984 100644
--- a/packages/ims-view-pc/src/components/CustomForm/index.md
+++ b/packages/ims-view-pc/src/components/CustomForm/index.md
@@ -4,7 +4,7 @@ description: CustomForm
 toc: content
 group:
   title: 表单
-  order: 0
+  order: 1
 demo:
   cols: 2
 ---
diff --git a/packages/ims-view-pc/src/components/VideoViewer/index.md b/packages/ims-view-pc/src/components/VideoViewer/index.md
index d03ebdc..5cc9fd7 100644
--- a/packages/ims-view-pc/src/components/VideoViewer/index.md
+++ b/packages/ims-view-pc/src/components/VideoViewer/index.md
@@ -4,7 +4,7 @@ description: 视频播放器 播放视频
 toc: content
 group:
   title: 文件
-  order: 2
+  order: 4
 demo:
   cols: 2
 ---
diff --git a/packages/ims-view-pc/src/core/helpers/index.tsx b/packages/ims-view-pc/src/core/helpers/index.tsx
index 884498c..e7cc58b 100644
--- a/packages/ims-view-pc/src/core/helpers/index.tsx
+++ b/packages/ims-view-pc/src/core/helpers/index.tsx
@@ -1,9 +1,10 @@
 import { Form } from 'antd';
 import dayjs from 'dayjs';
-import { AddIndexSignature, Search } from 'ims-view-pc';
+import { AddIndexSignature, Ellipsis, Search } from 'ims-view-pc';
 import _ from 'lodash';
 import React from 'react';
 import { FieldCompType } from '../../type/form';
+import { formatNumber, formatPercent, formatTime, getDictMap, renderTooltip } from './utils';
 
 const Simple = React.lazy(() => import('../../components/CustomForm/FormItem/simple'));
 const Editor = React.lazy(() => import('../../components/CustomForm/FormItem/editor'));
@@ -118,3 +119,110 @@ export const renderFormItem = (item: any, index?: number) => {
   }
   return getFieldComp(fieldProps);
 };
+
+/**
+ * 格式化表格 columns
+ * @param data
+ */
+export function formatColumn(columns: any[]) {
+  const defaultOptions = {
+    format: 'YYYY-MM-DD',
+    ellipsis: false,
+    ellipsisType: 'line',
+    rows: 1,
+    maxLength: 100,
+  };
+
+  const deepData = _.cloneDeep(columns);
+  const accessCollection = JSON.parse(sessionStorage.getItem('accessCollection') || '[]');
+
+  return deepData
+    .filter(({ acpCode }) => (acpCode ? accessCollection.includes(acpCode) : true))
+    .map((item, index, arr) => {
+      const options = {
+        ...defaultOptions,
+        ...item,
+      };
+
+      if (!item.render) {
+        item.render = (newText: any) => {
+          let text = newText;
+          return _.isNil(text) ? '--' : text;
+        };
+
+        if (item.dict) {
+          item.render = (newText: any) => {
+            let text = newText;
+            text = getDictMap(item.dict)[text];
+            return _.isNil(text) ? '--' : text;
+          };
+        }
+
+        if (item.formatTime) {
+          item.render = (text: any) => formatTime(options, text);
+        }
+
+        if (item.formatPercent) {
+          item.render = formatPercent;
+        }
+
+        if (Number.isInteger(item.formatNumber) || item.formatNumber) {
+          item.render = (text: number) => formatNumber(item, text);
+        }
+
+        if (item.ellipsis) {
+          item.ellipsis = {
+            ellipsis: options?.ellipsis,
+            isShowTitle: false,
+          };
+          item.render = (text: any) => {
+            if (_.isNil(text)) return '--';
+            let newText = text;
+            if (item.dict) {
+              const dictText = getDictMap(item.dict)[text];
+              newText = _.isNil(dictText) ? '--' : dictText;
+            }
+            if (item.formatTime) newText = formatTime(options, text);
+            if (item.formatPercent) newText = formatPercent(text);
+            if (item.formatNumber) newText = formatNumber(item, text);
+
+            return options.ellipsisType === 'line' ? (
+              <Ellipsis lines={options.rows}>{newText}</Ellipsis>
+            ) : (
+              <Ellipsis length={options.maxLength}>{newText}</Ellipsis>
+            );
+          };
+        }
+      }
+
+      if (item.tooltip) {
+        const { title } = item;
+        if (typeof item.tooltip === 'string') {
+          item.title = () => renderTooltip(title, item.tooltip);
+        } else if (typeof item.tooltip === 'function') {
+          item.title = () => renderTooltip(title, item.tooltip());
+        } else {
+          const text =
+            typeof item.tooltip.text === 'function'
+              ? item.tooltip.text() || ''
+              : item.tooltip.text || '';
+          const extraText =
+            item.tooltip.extraText === 'function'
+              ? item.tooltip.extraText() || ''
+              : item.tooltip.extraText || '';
+          item.title = () => renderTooltip(title, text, extraText);
+        }
+      }
+      item.className = `
+      ${item.className ?? ''}
+      ${(item.children && index !== arr?.length - 1) || arr[index + 1]?.children ? 'tableLine' : ''}
+      ${item.align || 'left'}
+      `;
+      item.width += 20;
+
+      if (item.children) {
+        item.children = formatColumn(item.children || []);
+      }
+      return item;
+    });
+}
diff --git a/packages/ims-view-pc/src/core/helpers/utils.tsx b/packages/ims-view-pc/src/core/helpers/utils.tsx
index db47793..37ba07a 100644
--- a/packages/ims-view-pc/src/core/helpers/utils.tsx
+++ b/packages/ims-view-pc/src/core/helpers/utils.tsx
@@ -1,4 +1,6 @@
-import Icon from '@ant-design/icons';
+import Icon, { QuestionCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import dayjs from 'dayjs';
 import _ from 'lodash';
 import { ForwardRefExoticComponent } from 'react';
 
@@ -93,6 +95,70 @@ export const getIcon = (icon: string, className?: string) => {
   return icon;
 };
 
+export const renderTooltip = (
+  title: string = '',
+  tooltip: React.ReactNode = '',
+  extraText: React.ReactNode = '',
+) => {
+  return (
+    <div>
+      <span style={{ marginRight: 4 }}>{title}</span>
+      <Tooltip title={tooltip}>
+        <QuestionCircleOutlined
+          style={{
+            marginLeft: 2,
+            fontSize: 12,
+            color: 'rgb(153,153,153)',
+          }}
+        />
+      </Tooltip>
+      {extraText}
+    </div>
+  );
+};
+
+export const formatNumber = (options: any, value: number) => {
+  let fractionDigits = typeof options.formatNumber === 'number' ? options.formatNumber : 2;
+  let number = value;
+  if (typeof options.formatNumber === 'function') {
+    const customOptions = options.formatNumber(Number(value));
+    if (Array.isArray(customOptions)) {
+      number = customOptions?.[0];
+      fractionDigits = customOptions?.[1];
+    } else {
+      number = customOptions;
+    }
+  }
+
+  if (_.isNil(value)) return '--';
+  if (isNaN(Number(value))) return value;
+  return Number(number).toLocaleString(undefined, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+};
+
+export const formatPercent = (value: number) => {
+  if (_.isNil(value)) return '--';
+  if (isNaN(Number(value))) return value;
+  return (value * 100)?.toFixed(2) + '%';
+};
+
+export const formatTime = (options: any, text: any) => {
+  if (_.isNil(text)) return '--';
+  if (typeof options.formatTime === 'object') {
+    const { format, type } = options.formatTime;
+    return dayjs(text, type).format(format);
+  }
+  return dayjs(text).format(options.format);
+};
+
+export function getDictMap(dict: any) {
+  const dictMap: any = {};
+  dict.forEach((item: any) => (dictMap[item.value] = item.text));
+  return dictMap;
+}
+
 export function mergeProps<A, B>(a: A, b: B): B & A;
 export function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
 export function mergeProps(...items: any[]) {
diff --git a/packages/ims-view-pc/src/index.tsx b/packages/ims-view-pc/src/index.tsx
index ff27c9e..1666f6c 100644
--- a/packages/ims-view-pc/src/index.tsx
+++ b/packages/ims-view-pc/src/index.tsx
@@ -6,6 +6,8 @@ export { default as CommonCard } from './components/CommonCard';
 export * from './components/CommonCard/interface';
 export { default as CommonDemo } from './components/CommonDemo';
 export * from './components/CommonDemo/interface';
+export { default as CommonEditTable } from './components/CommonEditTable';
+export * from './components/CommonEditTable/interface';
 export type { IEditorProps, ISimpleControlProps } from './components/CustomForm/interface';
 export { default as Ellipsis } from './components/Ellipsis';
 export { default as ErrorBoundary } from './components/ErrorBoundary';