feat: 增加个人设置ui相关

src/components/EditableForm/src/useOptions.js

@@ -6,11 +6,22 @@ const genderOptions = [
   { label: '女', value: '女' }
 ]
 
-const marriageOptions = [
+export const marriageOptions = [
   { label: '未婚', value: '0' },
   { label: '已婚', value: '1' }
 ]
 
+export const educationOptions = [
+  { label: '初中', value: '初中' },
+  { label: '高中', value: '高中' },
+  { label: '大专', value: '大专' },
+  { label: '本科', value: '本科' },
+  { label: '硕士', value: '硕士' }
+]
+export const householdRegistrationOptions = [
+  { label: '农村户口', value: '农村户口' },
+  { label: '城镇户口', value: '城镇户口' }
+]
 // 优先级选择
 export const priorityOptions = [
   { label: '1', value: '1' },

src/pages/Customer/Company/components/CompanyDetail/TabList.jsx

@@ -100,7 +100,8 @@ const CompanyTabList = ({
         if (key !== defaultSelectedKey) {
           changePriority(key, id)
         }
-      }}>
+      }}
+    >
       <Menu.Item key="1">1</Menu.Item>
       <Menu.Item key="2">2</Menu.Item>
       <Menu.Item key="3">3</Menu.Item>
@@ -114,12 +115,13 @@ const CompanyTabList = ({
       title: '优先级',
       dataIndex: 'priority',
       width: '17%',
-      sorter: true,
+      sorter: (a, b) => a.priority - b.priority,
       render: (text, record) => (
         <Dropdown
           overlay={priorityMenu(text, record.id)}
           trigger="click"
-          className="hover:cursor-pointer">
+          className="hover:cursor-pointer"
+        >
           <span>
             {text} <DownOutlined />
           </span>
@@ -183,7 +185,8 @@ const CompanyTabList = ({
       render: (clientName, record) => (
         <span
           onClick={() => showLongleDrawer(record.id)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {clientName}
         </span>
       )
@@ -226,7 +229,8 @@ const CompanyTabList = ({
       render: (text, record) => (
         <span
           onClick={() => showDrawerBusiness(record.id)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {text}
         </span>
       )

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

@@ -1,25 +1,32 @@
 import React from 'react'
-import { Input, Tabs } from 'antd'
+import { Col, Row, Tabs } from 'antd'
 import ProForm, {
-  ProFormDependency,
-  ProFormFieldSet,
+  ProFormGroup,
+  ProFormDatePicker,
   ProFormSelect,
-  ProFormText,
-  ProFormTextArea
+  ProFormRadio,
+  ProFormUploadDragger,
+  ProFormUploadButton,
+  ProFormText
 } from '@ant-design/pro-form'
 import styles from './BaseView.less'
+import {
+  educationOptions,
+  householdRegistrationOptions,
+  marriageOptions
+} from '@/components/EditableForm/src/useOptions'
 
 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 validatorPhone = (rule, value, callback) => {
+//   if (!value[0]) {
+//     callback('Please input your area code!')
+//   }
+//   if (!value[1]) {
+//     callback('Please input your phone number!')
+//   }
+//   callback()
+// }
 // 头像组件 方便以后独立，增加裁剪之类的功能
 // const AvatarView = ({ avatar }) => (
 //   <>
@@ -39,6 +46,10 @@ const validatorPhone = (rule, value, callback) => {
 // )
 
 const BaseView = () => {
+  const layout = {
+    layout: 'horizontal',
+    labelCol: { flex: '100px' }
+  }
   const handleTabChange = key => {
     console.log(key)
   }
@@ -48,7 +59,7 @@ const BaseView = () => {
         <div className={styles.baseView}>
           <div className={styles.left}>
             <ProForm
-              layout="vertical"
+              {...layout}
               // onFinish={handleFinish}
               submitter={{
                 resetButtonProps: {
@@ -64,154 +75,120 @@ const BaseView = () => {
               //   ...currentUser,
               //   phone: currentUser?.phone.split('-'),
               // }}
-              hideRequiredMark
             >
-              <ProFormText
-                width="md"
-                name="email"
-                label="邮箱"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的邮箱!'
-                  }
-                ]}
-              />
-              <ProFormText
-                width="md"
-                name="name"
-                label="昵称"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的昵称!'
-                  }
-                ]}
-              />
-              <ProFormTextArea
-                name="profile"
-                label="个人简介"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入个人简介!'
-                  }
-                ]}
-                placeholder="个人简介"
-              />
-              <ProFormSelect
-                width="sm"
-                name="country"
-                label="国家/地区"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的国家或地区!'
-                  }
-                ]}
-                options={[
-                  {
-                    label: '中国',
-                    value: 'China'
-                  }
-                ]}
-              />
+              <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 />
 
-              <ProForm.Group title="所在省市" size={8}>
-                <ProFormSelect
-                  rules={[
-                    {
-                      required: true,
-                      message: '请输入您的所在省!'
-                    }
-                  ]}
-                  width="sm"
-                  fieldProps={{
-                    labelInValue: true
-                  }}
-                  name="province"
-                  className={styles.item}
-                  request={async () => {
-                    return queryProvince().then(({ data }) => {
-                      return data.map(item => {
-                        return {
-                          label: item.name,
-                          value: item.id
-                        }
-                      })
-                    })
-                  }}
-                />
-                <ProFormDependency name={['province']}>
-                  {({ province }) => {
-                    return (
-                      <ProFormSelect
-                        params={{
-                          key: province?.value
-                        }}
-                        name="city"
-                        width="sm"
-                        rules={[
-                          {
-                            required: true,
-                            message: '请输入您的所在城市!'
-                          }
-                        ]}
-                        disabled={!province}
-                        className={styles.item}
-                        request={async () => {
-                          if (!province?.key) {
-                            return []
-                          }
-                          return queryCity(province.key || '').then(({ data }) => {
-                            return data.map(item => {
-                              return {
-                                label: item.name,
-                                value: item.id
-                              }
-                            })
-                          })
-                        }}
-                      />
-                    )
-                  }}
-                </ProFormDependency>
-              </ProForm.Group>
-              <ProFormText
-                width="md"
-                name="address"
-                label="街道地址"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的街道地址!'
-                  }
-                ]}
-              />
-              <ProFormFieldSet
-                name="phone"
-                label="联系电话"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的联系电话!'
-                  },
-                  { validator: validatorPhone }
-                ]}
-              >
-                <Input className={styles.area_code} />
-                <Input className={styles.phone_number} />
-              </ProFormFieldSet>
+                  <ProFormRadio.Group options={['男', '女']} name="gender" label="性别" required />
+                  <ProFormText name="nation" label="民族" />
+                  <ProFormText name="graduateInstitutions" label="毕业院校" />
+                  <ProFormSelect name="education" label="毕业学历" options={educationOptions} />
+                  <ProFormSelect
+                    name="qualifications"
+                    label="最高学历"
+                    options={educationOptions}
+                    required
+                  />
+                </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="毕业时间" />
+                </Col>
+              </Row>
+              <Row>
+                <Col span={12}>
+                  <ProFormText name="registeredResidence" label="户口所在地" required />
+                </Col>
+                <Col span={12}>
+                  <ProFormSelect
+                    name="householdRegistrationType"
+                    label="户籍类型"
+                    required
+                    options={householdRegistrationOptions}
+                  />
+                </Col>
+              </Row>
+              <ProFormText name="living" label="现居住地" required />
+              <Row>
+                <Col span={12}>
+                  <ProFormText name="nativePlace" label="籍贯" required />
+                </Col>
+                <Col span={12}>
+                  <ProFormText name="emergencyContacts" label="紧急联系人" required />
+                </Col>
+              </Row>
             </ProForm>
           </div>
           <div className={styles.right}>{/* <AvatarView avatar={getAvatarURL()} /> */}</div>
         </div>
       </TabPane>
       <TabPane tab="证件信息" key="2">
-        Content of Tab Pane 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>
       </TabPane>
       <TabPane tab="财务信息" key="3">
-        Content of Tab Pane 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>
       </TabPane>
     </Tabs>
   )

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

@@ -2,7 +2,8 @@
 
 .baseView {
   display: flex;
-  height: calc(100vh - 48px - 48px - 46px - 32px);
+  height: calc(100vh - 48px - 48px - 32px - 16px - 62px);
+  overflow-y: auto;
   :global {
     .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
       width: 100%;
@@ -10,8 +11,8 @@
   }
 
   .left {
-    min-width: 224px;
-    max-width: 448px;
+    min-width: 250px;
+    max-width: 600px;
   }
   .right {
     flex: 1;

src/pages/User/Account/Settings/style.less

@@ -4,8 +4,8 @@
   display: flex;
   width: 100%;
   height: 100%;
-  // padding-top: 16px;
-  // padding-bottom: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
   background-color: @menu-bg;
   .leftMenu {
     width: 224px;