management/src/pages/Management/Info/index.tsx

import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import consts from '@/utils/consts'
import { dayjsFomrat } from '@/utils/util'
import { Button, Form, Input, message } from 'antd'
import React, { useEffect, useState } from 'react'
import { apiProjectInfo, apiSaveProjectInfo } from './api'
import styles from './index.module.scss'
interface iProjectInfo {
  projectName: string;
  code: string;
  createTime: number;
  mobile: string;
  name: string;
}
export default function Info() {
  const [ form ] = Form.useForm()
const [ loading, setLoading ] = useState<boolean>(false)
  const [ projectInfo, setProjectInfo ] = useState<iProjectInfo>({
    projectName: "",
    code: "",
    createTime: 0,
    mobile: "",
    name: ""
  })
  useEffect(() => {
    initData()
  }, [])
  useEffect(() => {
    form.setFieldsValue(
      { ...projectInfo,
        createTime: dayjsFomrat(projectInfo.createTime, "YYYY-MM-DD"),
        mobile: projectInfo.mobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") +  `  (${projectInfo.name})`
      })
  }, [ projectInfo ])
  const initData = async () => {
    const { code = -1, data = {} } = await apiProjectInfo()
    if (code === consts.RET_CODE.SUCCESS) {
      setProjectInfo(data)
    }
  }
  const saveProjectName = async () => {
    setLoading(true)
    const newName = form.getFieldValue("projectName")
    if (newName !== projectInfo.projectName) {
      const { code = -1 } = await apiSaveProjectInfo(newName)
      if (code === consts.RET_CODE.SUCCESS) {
        message.success("更新成功!")
        initData()
      }
    }
    setLoading(false)
  }
  return (
    <div className="wrap-contaniner">
      <Header title="项目信息">
        <Slot position="right">
          <Button type="primary" size="small" loading={loading} onClick={() => saveProjectName()}>保存修改</Button>
        </Slot>
      </Header>
      <div className={styles.projectInfo}>
        <Form form={form} className={styles.formContent} layout="vertical" size="small">
          <Form.Item name="code" label="项目编号">
            <Input disabled></Input>
          </Form.Item>
          <Form.Item name="projectName" label="项目名称">
            <Input></Input>
          </Form.Item>
          <Form.Item name="mobile" label="管理员">
            <Input disabled></Input>
          </Form.Item>
          <Form.Item name="createTime" label="创建时间">
            <Input disabled></Input>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}