feat: ✨ 添加表单组件与文档结构调整

anyone-yuren · Dec 9, 2023 · d449f6f · d449f6f
1 parent acd017f
commit d449f6f
Show file tree

Hide file tree

Showing 16 changed files with 848 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "turbo": "^1.11.0"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.2.6",
     "antd": "^5.12.1",
     "antd-style": "^3.6.1"
   }

diff --git a/packages/gbeata/src/GAction/g-action.d.ts b/packages/gbeata/src/GAction/g-action.d.ts
@@ -0,0 +1,13 @@
+import { AnyKeyProps } from '../types/AnyKeyProps';
+
+export interface GActionProps {
+  /** 子元素 */
+  children: ReactNode;
+  /** 是否只在表格扩展显示 */
+  tableFooterExtraOnly?: boolean;
+  action?: 'add' | 'update' | 'delete' | 'batch-delete' | 'view' | string;
+  record?: AnyKeyProps;
+  inFinish?: (res: any) => void;
+  params?: AnyKeyProps;
+  [key: string]: any;
+}
diff --git a/packages/gbeata/src/GAction/index.d.ts b/packages/gbeata/src/GAction/index.d.ts
@@ -0,0 +1,23 @@
+import { AnyKeyProps } from '../types/AnyKeyProps';
+import { GActionProps } from './g-action';
+
+// 自定义指令
+export declare function registerAction(
+  /** 指令名称 */
+  actionName: string,
+  /** 指令内容 */
+  action: (
+    /** 当前对象属性 */
+    props: AnyKeyProps,
+    /** 当前行数据 */
+    record: AnyKeyProps,
+    /** searchTable 对象 */
+    searchTable: AnyKeyProps,
+  ) => AnyKeyProps,
+): void;
+
+declare const GAction: React.ForwardRefExoticComponent<
+  GActionProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export default GAction;
diff --git a/packages/gbeata/src/GAction/index.tsx b/packages/gbeata/src/GAction/index.tsx
@@ -0,0 +1,347 @@
+// import React, { useContext, useState } from 'react'
+// import MwButton from '../MwButton'
+// import { MwSearchTableContext } from '../MwSearchTable/context'
+// import { success, info } from '../MwMessage'
+// import { Modal } from 'antd'
+// import { MwActionProps } from './g-action'
+// import { AnyKeyProps } from '../types/AnyKeyProps'
+// import { EditableContext } from '../MwTable/context'
+// import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
+// import locale from '../locale'
+// import { getKey, getRowKey } from '../utils'
+
+// export const actionMap: AnyKeyProps = {}
+
+// /**
+//  * 注册一个 action
+//  */
+// export const registerAction = function(
+//   actionName: string,
+//   action: (props: AnyKeyProps, record: AnyKeyProps, searchTable: AnyKeyProps, form?: AnyKeyProps) => AnyKeyProps
+// ) {
+//   actionMap[actionName] = action
+// }
+
+// /**
+//  * 注册【新增】事件
+//  */
+// registerAction('add', (props, record, searchTable) => {
+//   return {
+//     type: 'primary',
+//     icon: <PlusOutlined />,
+//     onClick: () => {
+//       if (props.onOpen) {
+//         let result = props.onOpen(record)
+//         if (result === false) {
+//           return
+//         }
+//       }
+//       searchTable.formRef?.current?.add(
+//         { ...props.params, ...record },
+//         {
+//           onSuccess: (res: any) => {
+//             success(props.successMsg || props.children + locale.action.success)
+//             searchTable.tableRef.current.refresh()
+//             // 请求完成回调
+//             if (props.onFinish) {
+//               props.onFinish(res)
+//             }
+//           },
+//           ...props.dialogformextend
+//         }
+//       )
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【修改】事件
+//  */
+// registerAction('update', (props, record, searchTable) => {
+//   const [loading, setLoading] = useState(false)
+//   return {
+//     onClick: () => {
+//       if (props.onOpen) {
+//         let result = props.onOpen(record)
+//         if (result === false) {
+//           return
+//         }
+//       }
+//       let extraParams = {
+//         onSuccess: (res: any) => {
+//           success(props.successMsg || props.children + locale.action.success)
+//           searchTable.tableRef.current.refresh()
+//           // 请求完成回调
+//           if (props.onFinish) {
+//             props.onFinish(res)
+//           }
+//         },
+//         ...props.dialogformextend
+//       }
+//       if (props.detailApi) {
+//         setLoading(true)
+//         props
+//           .detailApi(props.detailParams)
+//           .then((res: AnyKeyProps) => {
+//             searchTable.formRef?.current?.update(
+//               props.detailApiFilter ? props.detailApiFilter(res) : res.data,
+//               extraParams
+//             )
+//           })
+//           .finally(() => {
+//             setLoading(false)
+//           })
+//       } else {
+//         searchTable.formRef?.current?.update({ ...props.params, ...record }, extraParams)
+//       }
+//     },
+//     loading,
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【详情】事件
+//  */
+// registerAction('view', (props, record, searchTable) => {
+//   const [loading, setLoading] = useState(false)
+//   return {
+//     onClick: () => {
+//       if (props.onOpen) {
+//         let result = props.onOpen(record)
+//         if (result === false) {
+//           return
+//         }
+//       }
+//       if (props.detailApi) {
+//         setLoading(true)
+//         props
+//           .detailApi(props.detailParams)
+//           .then((res: AnyKeyProps) => {
+//             searchTable.formRef?.current?.view(props.detailApiFilter ? props.detailApiFilter(res) : res.data)
+//           })
+//           .finally(() => {
+//             setLoading(false)
+//           })
+//       } else {
+//         searchTable.formRef?.current?.view({ ...props.params, ...record })
+//       }
+//     },
+//     loading,
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【删除】事件
+//  */
+// registerAction('delete', (props, record, searchTable) => {
+//   return {
+//     confirm: true,
+//     confirmMsg: locale.action.deleteConfirm,
+//     onConfirm: () => {
+//       if (searchTable?.deleteApi && record) {
+//         const params = [getKey(record, searchTable?.rowKey)]
+//         searchTable?.deleteApi(params).then((data: any) => {
+//           success(props.successMsg || locale.action.deleteSuccess)
+//           searchTable?.tableRef.current.refresh()
+//           // 请求完成回调
+//           if (props.onFinish) {
+//             props.onFinish({ data, params })
+//           }
+//         })
+//       }
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【批量删除】事件
+//  */
+// registerAction('batch-delete', (props, _record, searchTable) => {
+//   return {
+//     icon: <DeleteOutlined />,
+//     tableFooterExtraOnly: true,
+//     onClick: () => {
+//       let selection = searchTable?.selection || []
+//       if (!selection.length) {
+//         info(locale.action.noSelection)
+//         return
+//       }
+//       if (searchTable?.deleteApi) {
+//         Modal.confirm({
+//           title: locale.action.deleteConfirmTitle,
+//           content: `${locale.action.deleteConfirmBefore} ${selection.length} ${locale.action.deleteConfirmAfter}`,
+//           icon: <ExclamationCircleOutlined />,
+//           onOk: () => {
+//             let params: Array<string> = selection.map((row: any) => getKey(row, searchTable?.rowKey))
+//             searchTable?.deleteApi(params).then((data: any) => {
+//               success(props.successMsg || locale.action.deleteConfirmBatchSuccess)
+//               searchTable?.clearSelection()
+//               searchTable?.tableRef.current.refresh()
+//               // 请求完成回调
+//               if (props.onFinish) {
+//                 props.onFinish({ data, params })
+//               }
+//             })
+//           }
+//         })
+//       }
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【可编辑表格】【编辑】事件
+//  */
+// registerAction('editable-update', (props, record, searchTable) => {
+//   return {
+//     onClick: () => {
+//       if (record) {
+//         // 将表单数据与行数据合并
+//         const newRow = { ...record, editing: true }
+//         // @ts-ignore 重新构建数组
+//         const newTableData = [...searchTable.tableRef.current.getTableData()]
+//         // 寻找到对应行
+//         const index = newTableData.findIndex(
+//           row => getKey(row, searchTable?.rowKey) === getKey(newRow, searchTable?.rowKey)
+//         )
+//         // 替换行
+//         newTableData.splice(index, 1, newRow)
+//         // 替换表格数据
+//         searchTable.tableRef.current.setTableData(newTableData)
+//       }
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【可编辑表格】【确定】事件
+//  */
+// registerAction('editable-confirm', (props, record, searchTable, form) => {
+//   return {
+//     onClick: async () => {
+//       debugger
+//       if (record && form) {
+//         // 获取表单数据
+//         const values = await form.validateFields()
+//         // 将表单数据与行数据合并
+//         const newRow = { ...record, ...values }
+//         // 取消编辑模式
+//         delete newRow.editing
+//         // 删除新增标识
+//         delete newRow._isNew
+//         // @ts-ignore 重新构建数组
+//         const newTableData = [...searchTable.tableRef.current.getTableData()]
+//         // 寻找到对应行
+//         const index = newTableData.findIndex(
+//           row => getKey(row, searchTable?.rowKey) === getKey(newRow, searchTable?.rowKey)
+//         )
+//         // 替换行
+//         newTableData.splice(index, 1, newRow)
+//         // 替换表格数据
+//         searchTable.tableRef.current.setTableData(newTableData)
+//       }
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【可编辑表格】【取消】事件
+//  */
+// registerAction('editable-cancel', (props, record, searchTable) => {
+//   return {
+//     onClick: () => {
+//       if (record) {
+//         // 将表单数据与行数据合并
+//         let newRow = { ...record, editing: false }
+//         // @ts-ignore 重新构建数组
+//         const newTableData = [...searchTable.tableRef.current.getTableData()]
+//         // 寻找到对应行
+//         const index = newTableData.findIndex(
+//           row => getKey(row, searchTable?.rowKey) === getKey(newRow, searchTable?.rowKey)
+//         )
+//         if (record._isNew) {
+//           // 删除新增行
+//           newTableData.splice(index, 1)
+//         } else {
+//           // 替换行
+//           newTableData.splice(index, 1, newRow)
+//         }
+//         // 替换表格数据
+//         searchTable.tableRef.current.setTableData(newTableData)
+//       }
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【可编辑表格】【删除】事件
+//  */
+// registerAction('editable-delete', (props, record, searchTable) => {
+//   return {
+//     confirm: true,
+//     confirmMsg: locale.action.deleteConfirm,
+//     onConfirm: () => {
+//       const key = getKey(record, searchTable?.rowKey)
+//       searchTable.tableRef.current.deleteRowByKey(key)
+//       props.callback && props.callback(key)
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 注册【可编辑表格】【新增】事件
+//  */
+// registerAction('editable-add', (props, _record, searchTable) => {
+//   return {
+//     icon: <PlusOutlined />,
+//     type: 'dashed',
+//     block: true,
+//     style: {
+//       marginTop: 8,
+//       marginBottom: 8
+//     },
+//     onClick: () => {
+//       searchTable.tableRef.current.addRow({
+//         [getRowKey({}, searchTable?.rowKey)]: Date.now(),
+//         // 正在编辑
+//         editing: true,
+//         // 新增标识
+//         _isNew: true
+//       })
+//     },
+//     ...props
+//   }
+// })
+
+// /**
+//  * 获得转换后 action props
+//  * @param props 当前 props
+//  * @param searchTable searchTable 对象
+//  */
+// export const getActionProps = (props: MwActionProps, searchTable: any, form?: AnyKeyProps) => {
+//   const { action, record } = props
+//   let targetAction = actionMap[action || '']
+//   if (targetAction) {
+//     let actionProps: AnyKeyProps = targetAction(props, record, searchTable, form)
+//     return actionProps
+//   }
+//   return props
+// }
+
+// export default function MwAction(props: MwActionProps) {
+//   const searchTable: any = useContext(MwSearchTableContext)
+//   const form = useContext(EditableContext)
+//   const actionProps = getActionProps(props, searchTable, form)
+//   return <MwButton {...actionProps} />
+// }
+
+// MwAction.componentName = 'MwAction'