feat: 事项列表选中事项自动填写分类名称

src/pages/Business/Matter/hooks/useRowScript.tsx

@@ -16,9 +16,14 @@ const MatterTitleEnum = {
   [MatterType.CATEGORY]: '分类名称',
   [MatterType.MATTER]: '事项名称'
 }
+interface IState {
+  rowKeys?: string
+  record?: Nullable<API.MatterTreeItem>
+}
 
 export function useRowScript(modal: ModalAction, dataID: string) {
-  const [rowKeys, setRowKeys] = useState<string[]>([])
+  // const [rowKeys, setRowKeys] = useState<string[]>([])
+  const [state, setState] = useState<IState>({})
   const {
     data,
     run: query,
@@ -32,18 +37,26 @@ export function useRowScript(modal: ModalAction, dataID: string) {
     {
       manual: true,
       onSuccess(data) {
-        setRowKeys(flatMapDeep(data, (item: API.MatterTreeItem) => [item.ID]))
+        setState({
+          ...state,
+          rowKeys: flatMapDeep(data, (item: API.MatterTreeItem) => [item.ID]) || [],
+          record: null
+        })
+        // setRowKeys(flatMapDeep(data, (item: API.MatterTreeItem) => [item.ID]))
       }
     }
   )
 
+  const handleRowClick = (record: API.MatterTreeItem) => setState({ ...state, record })
+
   /** 新建 */
-  const add = (mode: MatterType.CATEGORY | MatterType.MATTER) => {
+  const add = (mode: MatterType.CATEGORY | MatterType.MATTER, record) => {
     const text = mode === MatterType.CATEGORY ? '新建分类' : '新建事项'
     modal.open({
       title: text,
       okText: '确定',
       cancelText: '取消',
+      initialValues: { parentID: record?.parentID || record?.ID },
       type: 'form',
       children: (
         <ProForm submitter={false} layout="horizontal" labelCol={{ span: 5 }} isKeyPressSubmit>
@@ -160,7 +173,9 @@ export function useRowScript(modal: ModalAction, dataID: string) {
     query,
     loading,
     treeList: data as API.MatterTreeItem[],
-    rowKeys,
+    rowKeys: state.rowKeys,
+    record: state.record,
+    rowClick: handleRowClick,
     add,
     edit,
     del,

src/pages/Business/Matter/index.tsx

@@ -15,7 +15,11 @@ const Matter: React.FC = () => {
   const [activeKey, setActivekey] = useState<Nullable<string>>(null)
   const [drawer, DrawerDom] = useDrawer()
   const [modal, ModalDOM] = useModal()
-  const { query, loading, treeList, add, edit, del, rowKeys, onExpand } = useRowScript(modal, activeKey)
+  const { query, loading, treeList, add, edit, del, rowKeys, onExpand, record, rowClick } = useRowScript(
+    modal,
+    activeKey
+  )
+
   const event$ = useEventEmitter()
   event$.useSubscription(EmitterType.BUSINESS_MATTER_REFRESH, () => {
     query()
@@ -106,7 +110,7 @@ const Matter: React.FC = () => {
                   <Button size="small" type="primary" ghost onClick={() => add(MatterType.CATEGORY)}>
                     新建分类
                   </Button>
-                  <Button size="small" type="primary" ghost onClick={() => add(MatterType.MATTER)}>
+                  <Button size="small" type="primary" ghost onClick={() => add(MatterType.MATTER, record)}>
                     新建事项
                   </Button>
                 </div>
@@ -117,6 +121,10 @@ const Matter: React.FC = () => {
             dataSource={treeList}
             bordered
             size="small"
+            onRow={record => ({
+              onClick: () => rowClick(record)
+            })}
+            rowClassName={row => (row.ID === record?.ID ? 'ant-table-row-selected' : '')}
           />
         </div>
       </div>