feat: 完善个人设置-表单项

src/pages/User/Account/Settings/components/BaseView.jsx

@@ -1,7 +1,6 @@
-import React from 'react'
-import { Col, Row, Tabs } from 'antd'
+import React, { useState, useEffect, useRef } from 'react'
+import { Button, Col, Row, Tabs, Upload } from 'antd'
 import ProForm, {
-  ProFormGroup,
   ProFormDatePicker,
   ProFormSelect,
   ProFormRadio,
@@ -15,6 +14,9 @@ import {
   householdRegistrationOptions,
   marriageOptions
 } from '@/components/EditableForm/src/useOptions'
+import { UploadOutlined } from '@ant-design/icons'
+import { queryStaffOwner } from '@/services/user'
+import consts from '@/consts'
 
 const { TabPane } = Tabs
 
@@ -28,31 +30,48 @@ const { TabPane } = Tabs
 //   callback()
 // }
 // 头像组件 方便以后独立，增加裁剪之类的功能
-// const AvatarView = ({ avatar }) => (
-//   <>
-//     <div className={styles.avatar_title}>头像</div>
-//     <div className={styles.avatar}>
-//       <img src={avatar} alt="avatar" />
-//     </div>
-//     <Upload showUploadList={false}>
-//       <div className={styles.button_view}>
-//         <Button>
-//           <UploadOutlined />
-//           更换头像
-//         </Button>
-//       </div>
-//     </Upload>
-//   </>
-// )
+const AvatarView = ({ avatar }) => (
+  <>
+    <div className={styles.avatar_title}>头像</div>
+    <div className={styles.avatar}>
+      <img src={avatar} alt="avatar" />
+    </div>
+    <Upload showUploadList={false}>
+      <div className={styles.button_view}>
+        <Button>
+          <UploadOutlined />
+          更换头像
+        </Button>
+      </div>
+    </Upload>
+  </>
+)
 
 const BaseView = () => {
+  const baseRef = useRef(null)
+  // const baseRef = useRef(null)
+  const financialRef = useRef(null)
+  const [staff, setStaff] = useState(null)
   const layout = {
     layout: 'horizontal',
-    labelCol: { flex: '100px' }
+    labelCol: { flex: '120px' }
   }
   const handleTabChange = key => {
     console.log(key)
+    if (key === '3') {
+      financialRef.current?.setFieldsValue({ ...staff })
+    }
   }
+  useEffect(() => {
+    async function initData() {
+      const { code = -1, data = {} } = await queryStaffOwner()
+      if (code === consts.RET_CODE.SUCCESS) {
+        setStaff(data?.staff || {})
+        baseRef.current?.setFieldsValue({ ...data?.staff })
+      }
+    }
+    initData()
+  }, [])
   return (
     <Tabs defaultActiveKey="1" onChange={handleTabChange}>
       <TabPane tab="基本信息" key="1">
@@ -60,135 +79,216 @@ const BaseView = () => {
           <div className={styles.left}>
             <ProForm
               {...layout}
+              formRef={baseRef}
               // onFinish={handleFinish}
               submitter={{
-                resetButtonProps: {
-                  style: {
-                    display: 'none'
-                  }
-                },
+                resetButtonProps: false,
                 submitButtonProps: {
-                  children: '更新基本信息'
+                  className: 'ml-120px'
                 }
               }}
-              // initialValues={{
-              //   ...currentUser,
-              //   phone: currentUser?.phone.split('-'),
-              // }}
             >
               <Row>
                 <Col span={12}>
-                  <ProFormText disabled name="jobNumber" label="工号" required />
-                  <ProFormText disabled name="departmentId" label="办事处/部门" required />
-                  <ProFormText disabled name="birthday" label="入职日期" required />
-                  <ProFormText name="qq" label="QQ" required />
-                  <ProFormText name="telephone" label="电话" required />
+                  <ProFormText disabled name="jobNumber" label="工号" placeholder="" />
+                  <ProFormText disabled name="departmentName" label="办事处/部门" placeholder="" />
+                  <ProFormText disabled name="birthday" label="入职日期" placeholder="" />
+                  <ProFormText
+                    name="qq"
+                    label="QQ"
+                    rules={[{ required: true, message: '请输入QQ号码' }]}
+                  />
+                  <ProFormText
+                    name="telephone"
+                    label="电话"
+                    rules={[{ required: true, message: '请输入电话号码' }]}
+                  />
 
-                  <ProFormRadio.Group options={['男', '女']} name="gender" label="性别" required />
-                  <ProFormText name="nation" label="民族" />
-                  <ProFormText name="graduateInstitutions" label="毕业院校" />
-                  <ProFormSelect name="education" label="毕业学历" options={educationOptions} />
+                  <ProFormRadio.Group
+                    options={['男', '女']}
+                    name="gender"
+                    label="性别"
+                    rules={[{ required: true, message: '请选择性别' }]}
+                  />
+                  <ProFormText name="nation" label="民族" placeholder="" />
+                  <ProFormText name="graduateInstitutions" label="毕业院校" placeholder="" />
+                  <ProFormSelect
+                    name="education"
+                    label="毕业学历"
+                    options={educationOptions}
+                    placeholder=""
+                  />
                   <ProFormSelect
                     name="qualifications"
                     label="最高学历"
                     options={educationOptions}
-                    required
+                    rules={[{ required: true, message: '请选择最高学历' }]}
                   />
                 </Col>
                 <Col span={12}>
-                  <ProFormText disabled name="username" label="姓名" required />
-                  <ProFormText disabled name="position" label="岗位" required />
-                  <ProFormText name="phone" label="手机" required />
-                  <ProFormText name="wecat" label="微信" required />
-                  <ProFormText name="email" label="邮箱" required />
-                  <ProFormDatePicker name="birthday" label="出生日期" />
-                  <ProFormSelect name="marriage" options={marriageOptions} label="婚姻状况" />
-                  <ProFormText name="major" label="所学专业" />
-                  <ProFormDatePicker name="graduationTime" label="毕业时间" />
+                  <ProFormText disabled name="username" label="姓名" />
+                  <ProFormText disabled name="position" label="岗位" />
+                  <ProFormText name="phone" label="手机" />
+                  <ProFormText name="wecat" label="微信" placeholder="" />
+                  <ProFormText name="email" label="邮箱" placeholder="" />
+                  <ProFormDatePicker
+                    name="birthday"
+                    label="出生日期"
+                    rules={[{ required: true, message: '请输入出生日期' }]}
+                  />
+                  <ProFormSelect
+                    name="marriage"
+                    options={marriageOptions}
+                    label="婚姻状况"
+                    rules={[{ required: true, message: '请选择婚姻状况' }]}
+                  />
+                  <ProFormText name="major" label="所学专业" placeholder="" />
+                  <ProFormDatePicker name="graduationTime" label="毕业时间" placeholder="" />
                 </Col>
               </Row>
               <Row>
                 <Col span={12}>
-                  <ProFormText name="registeredResidence" label="户口所在地" required />
+                  <ProFormText name="registeredResidence" label="户口所在地" placeholder="" />
                 </Col>
                 <Col span={12}>
                   <ProFormSelect
                     name="householdRegistrationType"
                     label="户籍类型"
-                    required
                     options={householdRegistrationOptions}
+                    placeholder=""
                   />
                 </Col>
               </Row>
-              <ProFormText name="living" label="现居住地" required />
+              <ProFormText
+                name="living"
+                label="现居住地"
+                rules={[{ required: true, message: '请输入现居住地' }]}
+              />
               <Row>
                 <Col span={12}>
-                  <ProFormText name="nativePlace" label="籍贯" required />
+                  <ProFormText
+                    name="nativePlace"
+                    label="籍贯"
+                    rules={[{ required: true, message: '请输入籍贯' }]}
+                  />
                 </Col>
                 <Col span={12}>
-                  <ProFormText name="emergencyContacts" label="紧急联系人" required />
+                  <ProFormText
+                    name="emergencyContacts"
+                    label="紧急联系人"
+                    rules={[{ required: true, message: '请输入紧急联系人' }]}
+                  />
                 </Col>
               </Row>
             </ProForm>
           </div>
-          <div className={styles.right}>{/* <AvatarView avatar={getAvatarURL()} /> */}</div>
+          <div className={styles.right}>
+            <AvatarView avatar={''} />
+          </div>
         </div>
       </TabPane>
       <TabPane tab="证件信息" key="2">
-        <ProForm {...layout}>
-          <ProFormText name="IDcards" label="身份证号码" required />
-          <ProFormText name="IDcardsValidity" label="身份证有效期" required />
-          <ProFormUploadButton name="IDcardsImgA" label="正面(国徽)" required />
-          <ProFormUploadButton
-            name="IDcardsImgB"
-            labelCol={{ span: 24 }}
-            label="反面(照片)"
-            required
-          />
-          <ProFormUploadDragger
-            name="certificate"
-            labelCol={{ span: 24 }}
-            label="毕业证书"
-            required
-          />
-          <ProFormUploadDragger name="diploma" labelCol={{ span: 24 }} label="学历证书" />
-          <ProFormUploadDragger name="professionalTitle" labelCol={{ span: 24 }} label="职称证书" />
-        </ProForm>
+        <div className={styles.baseView}>
+          <div className="w-1/2">
+            <ProForm
+              {...layout}
+              submitter={{
+                resetButtonProps: false
+              }}
+            >
+              <ProFormText name="IDcards" label="身份证号码" required />
+              <ProFormText
+                name="IDcardsValidity"
+                label="身份证有效期"
+                rules={[{ required: true, message: '请输入身份证有效期' }]}
+              />
+              <ProFormUploadButton
+                name="IDcardsImgA"
+                label="正面(国徽)"
+                rules={[{ required: true, message: '请上传身份证正面(国徽)' }]}
+              />
+              <ProFormUploadButton
+                name="IDcardsImgB"
+                labelCol={{ span: 24 }}
+                label="反面(照片)"
+                rules={[{ required: true, message: '请上传身份证反面(照片)' }]}
+              />
+              <ProFormUploadDragger
+                name="certificate"
+                labelCol={{ span: 24 }}
+                label="毕业证书"
+                rules={[{ required: true, message: '请上传毕业证书' }]}
+              />
+              <ProFormUploadDragger name="diploma" labelCol={{ span: 24 }} label="学历证书" />
+              <ProFormUploadDragger
+                name="professionalTitle"
+                labelCol={{ span: 24 }}
+                label="职称证书"
+              />
+            </ProForm>
+          </div>
+        </div>
       </TabPane>
       <TabPane tab="财务信息" key="3">
-        <ProForm layout="horizontal" labelCol={{ flex: '150px' }}>
-          <ProFormGroup title="报销收款帐号">
-            <Row>
-              <Col span={12}>
-                <ProFormText name="remittanceName" label="收款人户名" required />
-                <ProFormText name="bankName" label="收款开户银行名称" required />
-              </Col>
-              <Col span={12}>
-                <ProFormText
-                  name="coupletNumber"
-                  label="联行号"
-                  tooltip={
-                    <div>
-                      <p>1.如果不是公司广发，务必填上银行联行号</p>
-                      <p>2.如不清楚银行联行号请咨询报销查款专用 QQ：2870766094</p>
-                    </div>
-                  }
-                />
-                <ProFormText name="bankNumber" label="收款帐号" required />
-              </Col>
-            </Row>
-          </ProFormGroup>
-          <ProFormGroup title="工资卡">
-            <Row>
-              <Col span={12}>
-                <ProFormText name="salaryCard" label="银行卡号" required />
-              </Col>
-              <Col span={12}>
-                <ProFormText name="salaryBankName" label="开户行" required />
-              </Col>
-            </Row>
-          </ProFormGroup>
-        </ProForm>
+        <div className={styles.baseView}>
+          <div className="w-3/4">
+            <ProForm layout="horizontal" labelCol={{ flex: '150px' }} formRef={financialRef}>
+              {/* <ProFormGroup title="报销收款帐号"> */}
+              <h4 className="mb-4 font-bold">报销收款帐号</h4>
+              <Row>
+                <Col span={12}>
+                  <ProFormText
+                    name="remittanceName"
+                    label="收款人户名"
+                    rules={[{ required: true, message: '请输入收款人户名' }]}
+                  />
+                  <ProFormText
+                    name="bankName"
+                    label="收款开户银行名称"
+                    rules={[{ required: true, message: '请输入收款开户银行名称' }]}
+                  />
+                </Col>
+                <Col span={12}>
+                  <ProFormText
+                    name="coupletNumber"
+                    label="联行号"
+                    tooltip={
+                      <div>
+                        <p>1.如果不是公司广发，务必填上银行联行号</p>
+                        <p>2.如不清楚银行联行号请咨询报销查款专用 QQ：2870766094</p>
+                      </div>
+                    }
+                  />
+                  <ProFormText
+                    name="bankNumber"
+                    label="收款帐号"
+                    rules={[{ required: true, message: '请输入收款账号' }]}
+                  />
+                </Col>
+              </Row>
+              {/* </ProFormGroup> */}
+              <h4 className="mb-4 font-bold">工资卡</h4>
+              {/* <ProFormGroup title="工资卡"> */}
+              <Row>
+                <Col span={12}>
+                  <ProFormText
+                    name="salaryCard"
+                    label="银行卡号"
+                    rules={[{ required: true, message: '请输入银行卡号' }]}
+                  />
+                </Col>
+                <Col span={12}>
+                  <ProFormText
+                    name="salaryBankName"
+                    label="开户行"
+                    rules={[{ required: true, message: '请输入开户行' }]}
+                  />
+                </Col>
+              </Row>
+              {/* </ProFormGroup>  */}
+            </ProForm>
+          </div>
+        </div>
       </TabPane>
     </Tabs>
   )

src/pages/User/Account/Settings/components/BaseView.less

@@ -11,8 +11,7 @@
   }
 
   .left {
-    min-width: 250px;
-    max-width: 600px;
+    flex: 2;
   }
   .right {
     flex: 1;

src/services/user.js

@@ -18,3 +18,8 @@ export async function queryPermData(params) {
     params
   })
 }
+
+/** 获取员工基本信息 */
+export async function queryStaffOwner() {
+  return request('/staff/own')
+}