Просмотр исходного кода

feat: 增加editForm对TreeSelect、Select的支持

lanjianrong 5 лет назад
Родитель
Сommit
63565d301f

+ 46 - 12
src/components/EditableForm/src/editableFormItem.jsx

@@ -9,6 +9,8 @@ import useOptions from './useOptions'
 import ChangeSelect from '@/pages/customer/Company/components/ChangeSelect'
 import ChangeTreeSelect from '@/pages/staff/Employee/components/ChangeTreeSelect'
 
+const extraValArr = ['cascader', 'select', 'treeSelect'] // 需要设置ExtraVal的类型
+
 const EditableFormItem = ({
   type,
   label,
@@ -31,7 +33,11 @@ const EditableFormItem = ({
   })
 
   useEffect(() => {
-    setState({ ...state, val: '', extraVal: '' })
+    setState({
+      ...state,
+      val: '',
+      extraVal: ''
+    })
   }, [])
   useEffect(() => {
     // 处于编辑状态自动聚焦, 级联有问题暂无解决办法
@@ -55,14 +61,45 @@ const EditableFormItem = ({
     }
     // 当val为空时,需要设置默认值
     if (!state.val) {
-      // setVal(record)
       setState({ ...state, val: '' })
     }
   }, [record, editing, iRef])
 
   // 单独设置一个依赖,防止dataId变化
   useEffect(() => {
-    setState({ ...state, val: record })
+    function findTreeNode(tree, v) {
+      let node = null
+      tree?.some(n => {
+        if (n.value === v) {
+          node = n
+          return true
+        }
+        return findTreeNode(n.children, v)
+      })
+      return node
+    }
+    function reduceExtralVal(v) {
+      if (editCellType === 'cascader') {
+        // 针对级联,拿到显示用名称
+        return dataSource.districtName
+      }
+      if (extraValArr.includes(editCellType)) {
+        if (Array.isArray(v)) {
+          return record?.reduce((prev, curr) => {
+            return `${prev}${prev ? ',' : ''}${
+              options?.find(item => item.value === curr)?.label || ''
+            }`
+          }, '')
+        }
+        return findTreeNode(options, v)?.label
+      }
+      return options?.find(item => item.value === record)?.label || ''
+    }
+    setState({
+      ...state,
+      val: record,
+      extraVal: reduceExtralVal(record)
+    })
   }, [dataId])
 
   const toggleEdit = () => {
@@ -102,7 +139,6 @@ const EditableFormItem = ({
   }
 
   let cell = null
-
   // 是否是自定义cell
   if (editCellType === 'custom') {
     cell = customCell
@@ -114,7 +150,7 @@ const EditableFormItem = ({
             ref={iRef}
             defaultValue={state.val}
             allowClear={false}
-            className="zh-width-100P"
+            className="w-full"
             autoFocus={true}
             onChange={(value, local) => save({ currentTarget: { value, local } })}
             popupVisible={true}
@@ -133,7 +169,7 @@ const EditableFormItem = ({
           />
         )
         break
-      case 'treeselect':
+      case 'treeSelect':
         cell = (
           <ChangeTreeSelect
             ref={iRef}
@@ -169,12 +205,10 @@ const EditableFormItem = ({
     }
   } else {
     let content = state.val
-    if (editCellType === 'cascader') {
-      content = state.extraVal || dataSource.local
-    }
-    if (editCellType === 'select') {
-      content = state.extraVal || dataSource.gender
+    if (extraValArr.includes(editCellType)) {
+      content = state.extraVal
     }
+
     cell = (
       <div className="editable-cell-value-wrap" onClick={toggleEdit}>
         {content}
@@ -185,7 +219,7 @@ const EditableFormItem = ({
   return (
     <Col span={span}>
       <Row wrap={false} className="zh-border-top-1 zh-pd-top-8 zh-pd-bottom-8">
-        <Col flex="100px" className="zh-text-right">
+        <Col flex="100px" className="text-right">
           <span className="zh-lh-32 zh-mg-right-10">{label}:</span>
         </Col>
         <Col flex="auto">{cell}</Col>

+ 3 - 3
src/components/EditableForm/src/useOptions.js

@@ -8,7 +8,7 @@ const genderOptions = [
 const typeEnum = {
   NATUREIDS: 'natureIds',
   GENDER: 'gender',
-  DEPARTMENTS: 'category'
+  DEPARTMENTID: 'departmentId'
 }
 
 export default function useOptions(type) {
@@ -23,7 +23,7 @@ export default function useOptions(type) {
         })
       }
     }
-    if (type === typeEnum.DEPARTMENTS) {
+    if (type === typeEnum.DEPARTMENTID) {
       if (!store.getState().staff.departments.length) {
         dispatch({
           type: 'staff/fetchDepartments'
@@ -37,7 +37,7 @@ export default function useOptions(type) {
   if (type === typeEnum.NATUREIDS) {
     return store.getState().customer.natures
   }
-  if (type === typeEnum.DEPARTMENTS) {
+  if (type === typeEnum.DEPARTMENTID) {
     return store.getState().staff.departments
   }
   return null

+ 2 - 2
src/global.less

@@ -105,7 +105,7 @@ input:-webkit-autofill:active {
   box-shadow: 0 0 13px 0 rgba(74, 53, 107, 8%);
 }
 
-.ant-pro-top-nav-header-logo h1{
-  font-size: 18px;
+.ant-pro-top-nav-header-logo h1 {
   font-weight: 600;
+  font-size: 18px;
 }

+ 1 - 1
src/pages/Customer/Contact/components/ContactDetail/ContanctForm.jsx

@@ -34,7 +34,7 @@ const ContanctForm = props => {
       span: 24
     },
     {
-      dataIndex: 'district',
+      dataIndex: 'districtIds',
       label: '联系人地区',
       editCellType: 'cascader',
       span: 24

+ 2 - 2
src/pages/Customer/Contact/index.jsx

@@ -228,8 +228,8 @@ const Contact = props => {
     },
     {
       title: '地区',
-      dataIndex: 'local',
-      key: 'local',
+      dataIndex: 'districtName',
+      key: 'districtName',
       width: 75,
       search: false
     },

+ 2 - 2
src/pages/Staff/Employee/components/EmployeeDetail/EmployeeForm.jsx

@@ -16,10 +16,10 @@ const EmployeeForm = props => {
       span: 12
     },
     {
-      dataIndex: 'category',
+      dataIndex: 'departmentId',
       label: '办事处',
       span: 12,
-      editCellType: 'treeselect'
+      editCellType: 'treeSelect'
     },
     {
       dataIndex: 'departmentName',

+ 2 - 2
src/pages/user/login/index.jsx

@@ -72,14 +72,14 @@ const Login = props => {
           /> */}
         </Tabs>
 
-        {status && status !== consts.RET_CODE.SUCCESS && !submitting && (
+        {status && status !== consts.RET_CODE.SUCCESS && !submitting ? (
           <LoginMessage
             content={intl.formatMessage({
               id: 'pages.login.accountLogin.errorMessage',
               defaultMessage: '账户或密码错误'
             })}
           />
-        )}
+        ) : null}
         {type === 'account' && (
           <>
             <ProFormText

+ 1 - 1
src/settings/encryptionSetting.ts

@@ -1,7 +1,7 @@
 import { isDevMode } from '@/utils/env'
 
 // System default cache time, in seconds
-export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7
+export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7 * 1000
 
 // aes encryption key
 export const cacheCipher = {