financial_audit_console/src/pages/Schema/Base/index.tsx

/* eslint-disable react/no-unescaped-entities */
import { PageContainer } from '@ant-design/pro-layout'
import LeftMenu from './components/LeftMenu'
import { useState, useEffect } from 'react'
import { history, connect, Link } from '@umijs/max'
import type { ProjectModelState, SchemaBaseModelState } from '@umijs/max'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import {
  FormItem,
  Input,
  Switch,
  Select,
  FormGrid,
  FormLayout,
  Form,
  Radio,
  Checkbox,
  NumberPicker,
  Password,
  DatePicker,
  TimePicker,
  TreeSelect
} from '@formily/antd'
import 'antd/dist/antd.less'
import { projectSchema, institutionSchema, staffSchema } from '@/utils/schema'
import type { ConnectProps } from '@umijs/max'
import { Button } from 'antd'

export enum BaseMenuEnum {
  PROJECT = '1',
  COMPANY = '2',
  STAFF = '3'
}

// prettier 格式化有问题，故先这样写
export enum SchemaEnum {
  '1' = projectSchema,
  '2' = institutionSchema,
  '3' = staffSchema
}
export const menuOptions = [
  { label: '项目信息', value: BaseMenuEnum.PROJECT },
  { label: '企事业单位信息', value: BaseMenuEnum.COMPANY },
  { label: '人员信息', value: BaseMenuEnum.STAFF }
]
type BaseProps = ConnectProps & {
  base: SchemaBaseModelState
  pTypeList: { label: string; value: string }[]
}

const Index: React.FC<BaseProps> = ({ base, pTypeList, dispatch }) => {
  const [state, setState] = useState({
    activeKey: BaseMenuEnum.PROJECT
  })

  const currentSchema = base?.[state.activeKey]

  useEffect(() => {
    if (state.activeKey && !base[state.activeKey]) {
      dispatch({
        type: 'schemaBase/querySchema',
        payload: {
          columnType: state.activeKey
        }
      })
    }
    if (!pTypeList.length) {
      dispatch({
        type: 'project/queryProjectTypeList'
      })
    }
  }, [state.activeKey])

  const gotoDetail = columnType => {
    history.push(`/schema/base/${columnType}`)
  }

  const renderForm = () => {
    const normalForm = createForm({
      validateFirst: true,
      pattern: 'readOnly'
    })

    const SchemaField = createSchemaField({
      components: {
        FormLayout,
        FormItem,
        FormGrid,
        Input,
        Switch,
        Select,
        Radio,
        Checkbox,
        NumberPicker,
        Password,
        DatePicker,
        TimePicker,
        TreeSelect
      }
    })
    return (
      <Form form={normalForm} labelCol={4} wrapperCol={8}>
        <SchemaField schema={currentSchema} />
      </Form>
    )
  }

  return (
    <PageContainer title={false}>
      <div className="h-full w-full flex flex-row">
        <LeftMenu
          title="基础数据类别"
          options={menuOptions}
          value={state.activeKey}
          onChange={key => setState({ ...state, activeKey: key })}
        />
        <div className="w-6/7 ml-8 bg-white p-4 rounded-20px">
          <div className="flex flex-row-reverse mb-4 w-full">
            <Button type="primary" onClick={() => gotoDetail(state.activeKey)}>
              编辑
            </Button>
          </div>
          <div className="max-w-800px">{renderForm()}</div>
        </div>
      </div>
    </PageContainer>
  )
}

export default connect(
  ({ project, schemaBase }: { project: ProjectModelState; schemaBase: SchemaBaseModelState }) => ({
    pTypeList: project.projectTypeList.map(item => ({ label: item.name, value: item.ID })),
    base: schemaBase.base
  })
)(Index)