feat: 数据模型页面

config/routes.ts

@@ -74,6 +74,12 @@
             component: './Institutions/Company/List'
           },
           {
+            path: 'add',
+            name: 'add',
+            hideInMenu: true,
+            component: './Institutions/Company/Add'
+          },
+          {
             path: 'detail',
             name: 'detail',
             hideInMenu: true,

src/locales/zh-CN/menu.ts

@@ -22,6 +22,7 @@ export default {
   'menu.institutions.company': '单位管理',
   'menu.institutions.staff': '人员管理',
   'menu.institutions.company.list': '单位列表',
+  'menu.institutions.company.add': '新增单位',
   'menu.institutions.company.detail': '单位详情',
   'menu.work-setting': '业务设置',
   'menu.work-setting.schema': '基础数据设置',

src/pages/Institutions/Company/Add/index.tsx

@@ -0,0 +1,27 @@
+import { BaseMenuEnum } from '@/pages/Schema/Base'
+import { connect } from 'umi'
+import FormRender, { useForm } from 'form-render'
+import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
+import type { ConnectProps } from 'umi'
+
+type CompanyAddProps = ConnectProps & {
+  schema?: Record<string, any> | null
+}
+const CompanyAdd: React.FC<CompanyAddProps> = ({ dispatch, schema }) => {
+  useEffect(() => {
+    if (!schema) {
+      dispatch({
+        type: 'schemaBase/querySchema',
+        payload: {
+          columnType: BaseMenuEnum.COMPANY
+        }
+      })
+    }
+  }, [])
+  const form = useForm()
+  return <div>{schema && <FormRender form={form} schema={schema} />}</div>
+}
+
+export default connect(({ schemaBase }: { schemaBase: SchemaBaseModelState }) => ({
+  schema: schemaBase.base[BaseMenuEnum.COMPANY]?.schema
+}))(CompanyAdd)

src/pages/Schema/Base/detail.tsx

@@ -1,37 +1,51 @@
-import { querySchemas } from '@/services/api/schema'
-import { useRequest } from 'umi'
 import Generator from 'fr-generator'
-import React, { useState } from 'react'
-import type { RouteComponentProps } from 'react-router'
+import React, { useRef } from 'react'
 import { PageContainer } from '@ant-design/pro-layout'
+import { connect, useRequest } from 'umi'
+import type { RouteComponentProps } from 'react-router'
+import type { SchemaBaseModelState } from './model'
+import { updateSchema } from '@/services/api/schema'
+import { message } from 'antd'
+
 type DetailProps = RouteComponentProps
-const Detail: React.FC<DetailProps> = ({ location }) => {
-  const { columnType } = location.query
-  const [schema, setSchema] = useState(null)
-  useRequest(() => querySchemas({ columnType }), {
-    onSuccess: result => {
-      if (result?.[0]) {
-        setSchema(JSON.parse(result?.[0]))
-      }
+
+const Detail: React.FC<DetailProps> = ({ base, location }) => {
+  const genRef = useRef(null)
+  const {
+    query: { columnType },
+    state: { ID }
+  } = location
+  console.log(columnType)
+
+  const { run: tryUpdateSchema } = useRequest(updateSchema, {
+    manual: true,
+    onSuccess: () => {
+      message.success('更新成功')
     }
   })
+
   return (
     <PageContainer title={false}>
       <div className="bg-white shadow-card p-4" style={{ height: 'calc(100vh - 146px)' }}>
         <Generator
-          defaultValue={schema}
-          onSchemaChange={target => setSchema(target)}
-          controlButtons={[false, true]}
+          ref={genRef}
+          defaultValue={base?.[columnType]?.schema || {}}
+          controlButtons={[true, true]}
           extraButtons={[
-            false,
-            false,
-            false,
-            false,
+            true,
+            true,
+            true,
+            true,
             {
               text: '提交',
               type: 'primary',
-              onClick: e => {
-                console.log(schema)
+              onClick: () => {
+                // console.log(schema)
+                tryUpdateSchema({
+                  ID,
+                  columnType,
+                  schema: JSON.stringify(genRef.current?.getValue())
+                })
               }
             }
           ]}
@@ -41,4 +55,6 @@ const Detail: React.FC<DetailProps> = ({ location }) => {
   )
 }
 
-export default Detail
+export default connect(({ schemaBase }: { schemaBase: SchemaBaseModelState }) => ({
+  base: schemaBase.base
+}))(Detail)

src/pages/Schema/Base/index.tsx

@@ -1,52 +1,53 @@
 import { PageContainer } from '@ant-design/pro-layout'
 import LeftMenu from './components/LeftMenu'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import FormRender, { useForm } from 'form-render'
 import { Button } from 'antd'
-import { history } from 'umi'
+import { history, connect } from 'umi'
+import type { ConnectProps } from 'umi'
+import type { SchemaBaseModelState } from './model'
 export enum BaseMenuEnum {
-  PROJECT = 1,
-  COMPANY = 2,
-  STAFF = 3
+  PROJECT = '1',
+  COMPANY = '2',
+  STAFF = '3'
 }
 
-const schema = {
-  type: 'object',
-  properties: {
-    input1: {
-      title: '简单输入框',
-      type: 'string',
-      required: true
-    },
-    select1: {
-      title: '单选',
-      type: 'string',
-      enum: ['a', 'b', 'c'],
-      enumNames: ['早', '中', '晚']
-    }
-  }
+type BaseProps = ConnectProps & {
+  base: SchemaBaseModelState
 }
 
-const Index = () => {
+const Index: React.FC<BaseProps> = ({ base, dispatch }) => {
   const form = useForm()
   const [state, setState] = useState({
     activeKey: BaseMenuEnum.PROJECT,
-    schema: {}
+    schema: base?.[BaseMenuEnum.PROJECT]?.schema
   })
+  const currentSchema = base?.[state.activeKey]
+
+  useEffect(() => {
+    if (state.activeKey && !base[state.activeKey]) {
+      dispatch({
+        type: 'schemaBase/querySchema',
+        payload: {
+          columnType: state.activeKey
+        }
+      })
+    }
+  }, [state.activeKey])
   const menuOptions = [
     { label: '项目信息', value: BaseMenuEnum.PROJECT },
     { label: '企事业单位信息', value: BaseMenuEnum.COMPANY },
     { label: '人员信息', value: BaseMenuEnum.STAFF }
   ]
 
-  const gotoDetail = key => {
+  const gotoDetail = (columnType, ID) => {
     history.push({
       pathname: '/work-setting/schema/detail',
-      query: {
-        columnType: key
-      }
+      query: { columnType },
+      state: { ID }
     })
   }
+
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
@@ -58,15 +59,15 @@ const Index = () => {
         />
         <div className="w-max-3/4 ml-8 bg-white p-4 shadow-card relative ">
           <div className="text-right">
-            <Button onClick={() => gotoDetail(state.activeKey)}>编辑</Button>
-          </div>
-          <div>
-            <FormRender form={form} schema={schema} />
+            <Button onClick={() => gotoDetail(state.activeKey, currentSchema?.ID)}>编辑</Button>
           </div>
+          <div>{state.schema && <FormRender form={form} schema={state.schema} />}</div>
         </div>
       </div>
     </PageContainer>
   )
 }
 
-export default Index
+export default connect(({ schemaBase }: { schemaBase: SchemaBaseModelState }) => ({
+  base: schemaBase.base
+}))(Index)

src/pages/Schema/Base/model.ts

@@ -0,0 +1,64 @@
+import { getSchemaByColmunType } from '@/services/api/schema'
+import consts from '@/utils/consts'
+import type { Effect, Reducer } from 'umi'
+
+export interface SchemaBaseModelState {
+  base: Record<
+    string,
+    {
+      ID: string
+      columnType: number
+      schema: string
+    }
+  >
+}
+
+export interface SchemaBaseType {
+  namespace: 'schemaBase'
+  state: SchemaBaseModelState
+  effects: {
+    querySchema: Effect
+  }
+  reducers: {
+    save: Reducer<SchemaBaseModelState>
+    // 启用 immer 之后
+    // save: ImmerReducer<ProjectModelState>;
+  }
+}
+
+const SchemaBaseModel: SchemaBaseType = {
+  namespace: 'schemaBase',
+
+  state: {
+    base: {}
+  },
+
+  effects: {
+    *querySchema({ payload }, { call, put }) {
+      const response = yield call(getSchemaByColmunType, payload)
+      if (response?.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'save',
+          payload: {
+            ...response.data?.[0]
+          }
+        })
+      }
+    }
+  },
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        base: { ...state?.base, [action.payload.columnType]: action.payload }
+      }
+    }
+
+    // 启用 immer 之后
+    // save(state, action) {
+    //   state.name = action.payload;
+    // },
+  }
+}
+
+export default SchemaBaseModel

src/services/api/schema.ts

@@ -1,9 +1,16 @@
 import { request } from 'umi'
 
-/** 获取所有的基础schema */
-export async function querySchemas(params: API.SchemasParams) {
+/** 获取对应类型的的schema */
+export async function getSchemaByColmunType(params: API.SchemaParams) {
   return request('/BasicConfig/list', {
     method: 'GET',
     params
   })
 }
+/** 更新schema */
+export async function updateSchema(params) {
+  return request('/BasicConfig/save', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/api/typings.d.ts

@@ -167,13 +167,14 @@ declare namespace API {
 
   type OrganizationalStructureDelParams = {
     ID: string
+  }
   type Schema = {
     ID: string
     columnType: number
     schema: string
   }
 
-  type SchemasParams = {
+  type SchemaParams = {
     columnType: number
   }
 }