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

import React, { useState, useEffect, useRef } from 'react'
import { Col, message, Row, Tabs } from 'antd'
import ProForm, { ProFormDatePicker, ProFormSelect, ProFormRadio, ProFormText } from '@ant-design/pro-form'
import styles from './BaseView.less'
import {
  educationOptions,
  householdRegistrationOptions,
  marriageOptions
} from '@/components/EditableForm/src/useOptions'
import { queryStaffOwner, updateBaseStaff, updateFinanceStaff } from '@/services/user'
import consts from '@/consts'
import AvatarView from './AvatarView'
import { isDevMode } from '@/utils/env'
import dayjs from 'dayjs'
import { Button } from 'antd'
import { Affix } from 'antd'

const { TabPane } = Tabs

// const validatorPhone = (rule, value, callback) => {
//   if (!value[0]) {
//     callback('Please input your area code!')
//   }
//   if (!value[1]) {
//     callback('Please input your phone number!')
//   }
//   callback()
// }

const BaseView = () => {
  const baseRef = useRef(null)
  const [staff, setStaff] = useState(null)
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '120px' }
  }

  useEffect(() => {
    async function initData() {
      const { code = -1, data = {} } = await queryStaffOwner()
      if (code === consts.RET_CODE.SUCCESS) {
        const staffData = data?.staff || {}
        setStaff(staffData)
        baseRef.current?.setFieldsValue({
          ...staffData,
          graduationTime: staffData.graduationTime ? staffData.graduationTime : dayjs(new Date()),
          birthday: staffData.birthday ? staffData.birthday : dayjs(new Date())
        })
      }
    }
    initData()
  }, [])
  const avatar =
    (isDevMode() ? 'http://cld2qa.com' : 'http://127.0.0.1') +
    (staff?.avatar ?? '/resource/avatar/avtra_2.jpg')
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="基本信息" key="1">
        <div className={styles.baseView}>
          <div className={styles.left}>
            <ProForm
              {...layout}
              formRef={baseRef}
              onFinish={async values => {
                const { code = -1 } = await updateBaseStaff(values)
                if (code === consts.RET_CODE.SUCCESS) {
                  message.success('更新成功')
                }
                return true
              }}
              submitter={{
                resetButtonProps: false,
                // submitButtonProps: {
                //   className: 'ml-120px'
                // }
                render: props => {
                  return [
                    <Affix key="affix" offsetBottom={50}>
                      <Button
                        type="primary"
                        key="submit"
                        className="ml-120px"
                        onClick={() => props.form?.submit?.()}>
                        提交
                      </Button>
                    </Affix>
                  ]
                }
              }}>
              <ProFormText name="avatar" hidden />
              <Row>
                <Col span={24} xl={12}>
                  <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="phone"
                    label="电话"
                    rules={[{ required: true, message: '请输入电话号码' }]}
                  />

                  <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}
                    rules={[{ required: true, message: '请选择最高学历' }]}
                  />
                </Col>
                <Col span={24} xl={12}>
                  <ProFormText disabled name="username" label="姓名" />
                  <ProFormText disabled name="position" label="岗位" />
                  <ProFormText name="telephone" label="手机" />
                  <ProFormText name="wecat" label="微信" placeholder="" />
                  <ProFormText name="email" label="邮箱" placeholder="" />
                  <ProFormDatePicker
                    name="birthday"
                    label="出生日期"
                    initialValue={dayjs(new Date())}
                    rules={[{ required: true, message: '请输入出生日期' }]}
                  />
                  <ProFormSelect
                    name="marriage"
                    options={marriageOptions}
                    label="婚姻状况"
                    rules={[{ required: true, message: '请选择婚姻状况' }]}
                  />
                  <ProFormText name="major" label="所学专业" placeholder="" />
                  <ProFormDatePicker
                    name="graduationTime"
                    label="毕业时间"
                    placeholder=""
                    rules={[{ required: true, message: '请输入毕业时间' }]}
                  />
                </Col>
              </Row>
              <Row>
                <Col span={24} xl={12}>
                  <ProFormText name="registeredResidence" label="户口所在地" placeholder="" />
                </Col>
                <Col span={24} xl={12}>
                  <ProFormSelect
                    name="householdRegistrationType"
                    label="户籍类型"
                    options={householdRegistrationOptions}
                    placeholder=""
                  />
                </Col>
              </Row>
              <ProFormText
                name="living"
                label="现居住地"
                rules={[{ required: true, message: '请输入现居住地' }]}
              />
              <Row>
                <Col span={24} xl={12}>
                  <ProFormText
                    name="nativePlace"
                    label="籍贯"
                    rules={[{ required: true, message: '请输入籍贯' }]}
                  />
                </Col>
                <Col span={24} xl={12}>
                  <ProFormText
                    name="emergencyContacts"
                    label="紧急联系人"
                    rules={[{ required: true, message: '请输入紧急联系人' }]}
                  />
                </Col>
              </Row>
            </ProForm>
          </div>
          <div className={styles.right}>
            <AvatarView
              avatar={avatar}
              setAvatar={avatar2 => baseRef?.current.setFieldsValue({ avatar: avatar2 })}
            />
          </div>
        </div>
      </TabPane>
      {/* <TabPane tab="证件信息" key="2">
        <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">
        <div className={styles.baseView}>
          <div className="w-3/4">
            <ProForm
              layout="horizontal"
              labelCol={{ flex: '150px' }}
              onFinish={async values => {
                const { code = -1 } = await updateFinanceStaff(values)
                if (code === consts.RET_CODE.SUCCESS) {
                  message.success('更新成功')
                }
                return true
              }}
              submitter={{
                resetButtonProps: false,
                submitButtonProps: {
                  className: 'ml-150px'
                }
              }}
              initialValues={{ ...staff }}>
              {/* <ProFormGroup title="报销收款帐号"> */}
              <h4 className="mb-4 font-bold">报销收款帐号</h4>
              <Row>
                <Col span={24} xl={12}>
                  <ProFormText
                    name="remittanceName"
                    label="收款人户名"
                    rules={[{ required: true, message: '请输入收款人户名' }]}
                  />
                  <ProFormText
                    name="bankName"
                    label="收款开户银行名称"
                    rules={[{ required: true, message: '请输入收款开户银行名称' }]}
                  />
                </Col>
                <Col span={24} xl={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={24} xl={12}>
                  <ProFormText
                    name="salaryCard"
                    label="银行卡号"
                    rules={[{ required: true, message: '请输入银行卡号' }]}
                  />
                </Col>
                <Col span={24} xl={12}>
                  <ProFormText
                    name="salaryBankName"
                    label="开户行"
                    rules={[{ required: true, message: '请输入开户行' }]}
                  />
                </Col>
              </Row>
              {/* </ProFormGroup>  */}
            </ProForm>
          </div>
        </div>
      </TabPane>
    </Tabs>
  )
}

export default BaseView