用户管理对接

src/components/NiceForm/index.less

@@ -23,4 +23,27 @@
     box-shadow: none;
     border-bottom: 1px solid #DFE1E6;
   }
+}
+
+.flex-layout-label-required {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 32px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  &::before {
+    display: inline-block;
+    margin-right: 4px;
+    color: #ff4d4f;
+    font-size: 14px;
+    font-family: SimSun, sans-serif;
+    line-height: 1;
+    content: '*';
+  }
 }
\ No newline at end of file

src/components/NiceForm/index.tsx

 import React from 'react';
 import SchemaForm, {
-  IAntdSchemaFormProps, createVirtualBox, registerVirtualBox, Schema, SchemaField, FormButtonGroup, Reset, createControllerBox,
+  IAntdSchemaFormProps, createVirtualBox, registerVirtualBox, Schema, SchemaField, FormButtonGroup, Reset, createControllerBox, FormItem,
 } from '@formily/antd';
 import { Button, Space, Row, Col } from 'antd';
 import styled from 'styled-components'
@@ -19,7 +19,7 @@ import Children from './components/Children';
 import CircleBox from './components/CircleBox';
 import TableTagList from './components/TableTagList';
 import './index.less'
-
+import cx from 'classnames'
 export interface NiceFormProps extends IAntdSchemaFormProps {}
 
 const RowLayout = styled(props => <Row justify='end' {...props}/>)`
@@ -74,6 +74,28 @@ const schemaLayout = createControllerBox("schemaLayout", (_props) => {
     </NiceForm>
   );
 });
+const renderCol = (schema, isLast) => {
+  const { flexcol = {} } = schema['x-component-props']
+  return <Col style={isLast ? {} : {marginRight: 24}} {...flexcol} key={schema.path}>
+    <SchemaField schema={schema.toJSON()} path={schema.path}/>
+  </Col>
+}
+
+registerVirtualBox('flex-box', props => {
+  const childProperties = props.schema.getOrderProperties()
+  const { title, required } = props.props
+  const {labelcol, wrappercol} = props.schema.getExtendsComponentProps()
+  return <Row>
+      { title && <Col span={labelcol} className={cx(required ? 'flex-layout-label-required' : '')}>{title}</Col>}
+      <Col span={wrappercol}>
+        <Row>
+          {
+            childProperties.map((v, i, arr) => renderCol(v.schema, arr.length - 1 === i))
+          }
+        </Row>
+      </Col>
+  </Row>
+})
 const NiceForm: React.FC<NiceFormProps> = props => {
   const { children, components, ...reset } = props;
   const customComponents = {

src/pages/authConfig/userSystem/index.tsx

@@ -67,26 +67,26 @@ const UserSystem: React.FC<{}> = () => {
     {
       title: '绑定手机号码',
       align: 'center',
-      dataIndex: 'tel',
-      key: 'tel',
+      dataIndex: 'phone',
+      key: 'phone',
     },
     {
       title: '所属角色',
       align: 'center',
-      dataIndex: 'roleNames',
-      key: 'roleNames',
+      dataIndex: 'roleName',
+      key: 'roleName',
     },
     {
       title: '最后登录时间',
       align: 'center',
-      dataIndex: 'updateTime',
-      key: 'updateTime',
+      dataIndex: 'lastLoginTime',
+      key: 'lastLoginTime',
     },
     {
       title: '外部状态',
       align: 'center',
-      dataIndex: 'state',
-      key: 'state',
+      dataIndex: 'status',
+      key: 'status',
       render: (text: any, record:any) => <StatusSwitch handleConfirm={() => handleStatus(record)} record={record}/>
     },
     {

src/pages/authConfig/userSystem/schema/index.ts

@@ -35,21 +35,49 @@ export const UserDetailSchema:ISchema = {
           title: '姓名',
           required: true
         },
-        countryCode: {
-          type: 'string',
-          title: '国家代码(手机号前缀)',
-          required: true
-        },
-        phone: {
-          type: 'number',
+        phoneLayout: {
+          type: 'object',
+          "x-component": 'flex-box',
           title: '手机号',
-          "x-rules": [
-            {
-              pattern: PATTERN_MAPS.phone,
-              message: '请输入正确的手机号'
+          "x-component-props": {
+            labelcol: 6,
+            wrappercol: 12
+          },
+          required: true,
+          properties: {
+            countryCode: {
+              required: true,
+              type: 'string',
+              enum: ['+86'],
+              "x-mega-props": {
+                wrapperCol: 24
+              },
+              "x-component-props": {
+                flexcol: {
+                  span: 6
+                }
+              }
+            },
+            phone: {
+              type: 'number',
+              required: true,
+              "x-mega-props": {
+                wrapperCol: 24,
+                full: true
+              },
+              "x-rules": [
+                {
+                  pattern: PATTERN_MAPS.phone,
+                  message: '请输入正确的手机号'
+                }
+              ],
+              "x-component-props": {
+                flexcol: {
+                  flex: 1
+                }
+              }
             }
-          ],
-          required: true
+          }
         },
         idCardNo: {
           type: 'string',
@@ -91,7 +119,8 @@ export const UserDetailSchema:ISchema = {
             callback: "{{callback}}"
           },
           title: '关联角色'
-        }
+        },
+        
       }
     }
   }

src/pages/authConfig/userSystem/userDetail.tsx

@@ -14,7 +14,7 @@ import { UserDetailSchema } from './schema';
 import './index.less'
 import ModalTable from '@/components/ModalTable';
 import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
-import { findItemAndDelete, omit } from '@/utils';
+import { findItemAndDelete, omit, getParentTreeTitles } from '@/utils';
 import TabTree, { useTreeActions } from '@/components/TabTree';
 import { useTreeTabs } from '@/hooks/useTreeTabs';
 import { useHttpRequest } from '@/hooks/useHttpRequest';
@@ -30,7 +30,7 @@ const titleRender = (title) => {
 }
 
 const fetchOriginTreeData = async (params?) => { // 平台后台树
-  const res = await PublicApi.getMemberOrgTree()
+  const res = await PublicApi.getMemberOrgTree({}, { ttl: 10, useCache: true })
   return res
 }
 
@@ -59,7 +59,14 @@ const AddUser: React.FC<{}> = () => {
         userId: id
       }).then(async res => {
         const { data } = res
-        setFormData(data)
+        fetchOriginTreeData().then(({data: dataSource}) => {
+          setFormData({...data, orgName: getParentTreeTitles(dataSource, data.orgId), memberRoleIds: data.memberRoleIds.map((v,i) => {
+            return {
+              id: v,
+              roleName: data.memberRoleNames[i]
+            }
+          })})          
+        })
       })
     }
   }, [])
@@ -72,7 +79,9 @@ const AddUser: React.FC<{}> = () => {
       userId: Number(id)
     } : omitValue
     await run(params)
-    history.goBack(-1)
+    setTimeout(() => {
+      history.goBack(-1)
+    }, 300)
   };
 
   // 角色确认弹窗
@@ -84,6 +93,13 @@ const AddUser: React.FC<{}> = () => {
     setRoleVisible(false)
   }
 
+  const handleRoleBtn = () => {
+    setRoleVisible(true)
+    const selectRoles = userActions.getFieldValue('memberRoleIds')
+    roleSelectCtl.setSelectRow(selectRoles)
+    roleSelectCtl.setSelectedRowKeys(selectRoles.map(v => v.id))
+  }
+
 // 模拟请求
   const fetchUserList = async (params:any) => {
     const data = await PublicApi.getMemberRolePage(params)
@@ -111,8 +127,6 @@ const AddUser: React.FC<{}> = () => {
     }
   ]
 
-  const handleCloseTag = (removedTag: any) => {
-  };
   const handleOrigin = () => {
     setOriginVisible(false)
     if(originSelectNode?.id){
@@ -134,7 +148,7 @@ const AddUser: React.FC<{}> = () => {
   }
 
   const connectCategory = <div className='connectBtn' onClick={openOriginTree}><LinkOutlined style={{marginRight: 4}}/>关联</div>
-  const addRoles = <Button block onClick={() => setRoleVisible(true)}>添加角色</Button>
+  const addRoles = <Button block onClick={handleRoleBtn}>添加角色</Button>
   return (
     <DetailPage title={titleRender(pageStatus)}>
       <div className="common-wrapper user-system">