Merge branch 'dev' of http://192.168.1.41:3000/outaozhen/cldV2react into dev

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,217 +1,294 @@
-import React from 'react'
-import { Input, Tabs } from 'antd'
+import React, { useState, useEffect, useRef } from 'react'
+import { Button, Col, Row, Tabs, Upload } from 'antd'
 import ProForm, {
-  ProFormDependency,
-  ProFormFieldSet,
+  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'
+import { UploadOutlined } from '@ant-design/icons'
+import { queryStaffOwner } from '@/services/user'
+import consts from '@/consts'
 
 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 }) => (
-//   <>
-//     <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: '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">
         <div className={styles.baseView}>
           <div className={styles.left}>
             <ProForm
-              layout="vertical"
+              {...layout}
+              formRef={baseRef}
               // onFinish={handleFinish}
               submitter={{
-                resetButtonProps: {
-                  style: {
-                    display: 'none'
-                  }
-                },
+                resetButtonProps: false,
                 submitButtonProps: {
-                  children: '更新基本信息'
+                  className: 'ml-120px'
                 }
               }}
-              // initialValues={{
-              //   ...currentUser,
-              //   phone: currentUser?.phone.split('-'),
-              // }}
-              hideRequiredMark
             >
+              <Row>
+                <Col span={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="telephone"
+                    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={12}>
+                  <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="户口所在地" placeholder="" />
+                </Col>
+                <Col span={12}>
+                  <ProFormSelect
+                    name="householdRegistrationType"
+                    label="户籍类型"
+                    options={householdRegistrationOptions}
+                    placeholder=""
+                  />
+                </Col>
+              </Row>
               <ProFormText
-                width="md"
-                name="email"
-                label="邮箱"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的邮箱!'
-                  }
-                ]}
+                name="living"
+                label="现居住地"
+                rules={[{ required: true, message: '请输入现居住地' }]}
               />
+              <Row>
+                <Col span={12}>
+                  <ProFormText
+                    name="nativePlace"
+                    label="籍贯"
+                    rules={[{ required: true, message: '请输入籍贯' }]}
+                  />
+                </Col>
+                <Col span={12}>
+                  <ProFormText
+                    name="emergencyContacts"
+                    label="紧急联系人"
+                    rules={[{ required: true, message: '请输入紧急联系人' }]}
+                  />
+                </Col>
+              </Row>
+            </ProForm>
+          </div>
+          <div className={styles.right}>
+            <AvatarView avatar={''} />
+          </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
-                width="md"
-                name="name"
-                label="昵称"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的昵称!'
-                  }
-                ]}
+                name="IDcardsValidity"
+                label="身份证有效期"
+                rules={[{ required: true, message: '请输入身份证有效期' }]}
               />
-              <ProFormTextArea
-                name="profile"
-                label="个人简介"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入个人简介!'
-                  }
-                ]}
-                placeholder="个人简介"
+              <ProFormUploadButton
+                name="IDcardsImgA"
+                label="正面(国徽)"
+                rules={[{ required: true, message: '请上传身份证正面(国徽)' }]}
               />
-              <ProFormSelect
-                width="sm"
-                name="country"
-                label="国家/地区"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的国家或地区!'
-                  }
-                ]}
-                options={[
-                  {
-                    label: '中国',
-                    value: 'China'
-                  }
-                ]}
+              <ProFormUploadButton
+                name="IDcardsImgB"
+                labelCol={{ span: 24 }}
+                label="反面(照片)"
+                rules={[{ required: true, message: '请上传身份证反面(照片)' }]}
               />
-
-              <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: '请输入您的街道地址!'
-                  }
-                ]}
+              <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="职称证书"
               />
-              <ProFormFieldSet
-                name="phone"
-                label="联系电话"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入您的联系电话!'
-                  },
-                  { validator: validatorPhone }
-                ]}
-              >
-                <Input className={styles.area_code} />
-                <Input className={styles.phone_number} />
-              </ProFormFieldSet>
             </ProForm>
           </div>
-          <div className={styles.right}>{/* <AvatarView avatar={getAvatarURL()} /> */}</div>
         </div>
       </TabPane>
-      <TabPane tab="证件信息" key="2">
-        Content of Tab Pane 2
-      </TabPane>
       <TabPane tab="财务信息" key="3">
-        Content of Tab Pane 3
+        <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

@@ -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,7 @@
   }
 
   .left {
-    min-width: 224px;
-    max-width: 448px;
+    flex: 2;
   }
   .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;

src/services/user.js

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