修改构建脚本

config/routes/authConfig.ts

@@ -17,7 +17,8 @@ export default {
       path: '/authConfig/memberSystem/memberDetail',
       name: 'memberDetail',
       component: '@/pages/authConfig/memberSystem/memberDetail',
-      hideInMenu: true
+      hideInMenu: true,
+      hidePageHeader: true
     },
     {
       path: '/authConfig/userSystem',

config/theme.config.ts

 const MAIN_COLOR = '#00B37A'
+const MAIN_FONT_BOLD_COLOR = '#172B4D'
+const MAIN_FONT_TINY_COLOR = '#6B778C'
 
 /**
  * 定制antd主题样式
@@ -7,6 +9,12 @@ const MAIN_COLOR = '#00B37A'
 export default {
   "layout-header-background": "#38414A",
   'primary-color': MAIN_COLOR,
+  // tabs
+  'tabs-card-active-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-highlight-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-hover-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-active-color': MAIN_FONT_BOLD_COLOR,
+  'tabs-card-head-background': '#fff',
   // 'link-color': MAIN_COLOR,
   // 'link-hover-color': MAIN_COLOR,
   // 'link-active-color': MAIN_COLOR,

package.json

@@ -4,6 +4,7 @@
     "api": "god-ytt",
     "start:analyze": "ANALYZE=1 umi dev",
     "scripts:build": "node scripts/run",
+    "scripts:build-yxc": "node scripts/run http://yxc-web-demo.shushangyun.com/api",
     "start": "yarn api && yarn scripts:build && umi dev",
     "build": "yarn api && yarn scripts:build && umi build",
     "build:dev": "pm2 start scripts/devServer.js",
@@ -50,8 +51,9 @@
     "express": "^4.17.1",
     "god-yapi2ts": "^1.6.0",
     "gulp": "^4.0.2",
+    "http-proxy-middleware": "^1.0.5",
     "json2ts": "^0.0.7",
     "ora": "^4.0.4",
-    "http-proxy-middleware": "^1.0.5"
+    "typescript": "^3.9.7"
   }
 }

scripts/services/index.js

@@ -17,8 +17,10 @@ const demoFetch = require('../../demo').fetchConfig
 
 const isDemo = true
 
+const remoteUrl = process.argv[2] || 'http://10.0.0.25:8100'
+
 const axios = Axios.create({
-  baseURL: 'http://10.0.0.25:8100',
+  baseURL: remoteUrl,
   responseType: 'json',
 })
 
@@ -33,8 +35,6 @@ const serviceConfig = {
       url: '/member/menu/register/detail',
       method: 'get'
     },
-
-
   },
   //初始化会员支付策略配置
   payConfig:{
@@ -55,8 +55,13 @@ async function batchAxiosHttps() {
   for (const item in serviceConfig) {
     if(JSON.stringify(item) !== '{}'){
      for (const subItem in serviceConfig[item]) {
+        try {
           const data = await axios(serviceConfig[item][subItem])
           asyncHttpQueue[item][subItem] = data.data.data
+        } catch(err) {
+          console.log(serviceConfig[item][subItem].url)
+          console.log(err.response.data)
+        }
       }
     }
 

src/components/ModalTable/index.tsx

+import React, { ReactText } from 'react'
+import {StandardTable} from 'god'
+import { IStandardTableProps } from 'god/dist/src/standard-table'
+import { Row, Col, Modal } from 'antd'
+
+export interface ModalTableProps extends IStandardTableProps<any> {
+  width?: number,
+  modalTitle?: ReactText,
+  confirm?(),
+  cancel?(),
+  visible?: boolean
+}
+
+const ModalTable:React.FC<ModalTableProps> = (props) => {
+  const { width = 704,modalTitle, confirm, cancel, visible, ...resetTable } = props
+  return (
+    <Modal
+      width={width}
+      title={modalTitle}
+      onOk={confirm}
+      onCancel={cancel}
+      visible={visible}
+    >
+      <StandardTable
+        tableType='small'
+        formRender={(child, ps) => <Row justify='space-between'>
+          <Col>{child}</Col>
+          <Col style={{marginTop: 4}}>{ps}</Col>
+        </Row>}
+        {...resetTable}
+      >
+      </StandardTable>
+    </Modal>
+  )
+}
+
+ModalTable.defaultProps = {}
+
+export default ModalTable
\ No newline at end of file

src/components/NiceForm/components/TableTagList.tsx

+import React, { useState } from 'react'
+import { Tag, Row } from 'antd'
+import { useFormEffects } from '@formily/antd'
+
+const TableTagList = (props) => {
+  const { value = [], mutators } = props
+  const { extra = null, callback = null } = props.props['x-component-props'] ? props.props['x-component-props'] : {}
+
+  const handleClose = (id) => {
+    callback && callback(id)
+    mutators.remove(value.findIndex(v => v.id === id))
+  }
+  return (
+    <div className="table-tag-list" style={{width: '100%'}}>
+      <Row style={{flexWrap: 'wrap'}}>
+        {
+          value.map(v => <Tag closable onClose={() => handleClose(v.id)} color="#4279DF" key={v.id} style={{marginBottom: 8}}>{v.roleName}</Tag>)
+        }
+      </Row>
+      {extra}
+    </div>
+  )
+}
+
+TableTagList.defaultProps = {}
+
+TableTagList.isFieldComponent = true;
+
+export default TableTagList
\ No newline at end of file

src/components/NiceForm/index.tsx

@@ -17,8 +17,8 @@ import CustomRegistryPhone from './components/CustomRegistryPhone';
 import CustomRelevance from './components/CustomRelevance';
 import Children from './components/Children';
 import CircleBox from './components/CircleBox';
+import TableTagList from './components/TableTagList';
 import './index.less'
-import { Input } from '@formily/antd-components';
 
 export interface NiceFormProps extends IAntdSchemaFormProps {}
 
@@ -91,7 +91,8 @@ const NiceForm: React.FC<NiceFormProps> = props => {
     Children,
     CircleBox,
     SchemaFormButtonGroup,
-    FlexBox
+    FlexBox,
+    TableTagList
   };
 
   const defineComponents = Object.assign(customComponents, components);

src/global.less

@@ -15,12 +15,33 @@ body,
   min-height: 100vh !important;
 }
 
+.wrapper-white {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
+}
+
+
+.connectBtn {
+  width: 80px;
+  height: 32px;
+  line-height: 32px;
+  background: #6B778C;
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+}
 // 内嵌页公共wrapper
 .common-wrapper {
   background-color: #fff;
   padding: 32px 24px;
   border-radius: 5px;
 }
+.common-wrapper-gray {
+  background-color: #F5F6FA;
+  padding: 32px 24px;
+  border-radius: 5px;
+}
 
 // 公共显示隐藏处理
 .commonShowBlock {

src/hooks/useRowSelectionTable.ts

@@ -54,6 +54,12 @@ export const useRowSelectionTable = (options: useRowSelectionOptions = {}): [Tab
     type,
     // 为解决分页情况下， 保存多选的数据
     onSelect: (record, selects, selectedRows, nativeEvent) => {
+      if (type === 'radio') {
+        // 单选情况下
+        setSelectedRowKeys([record.id])
+        setSelectRow([record])
+        return ;
+      }
       const findIds = selectedRowKeys.indexOf(record.id)
       if (findIds === -1) {
         mergeRowKeys(record.id)

src/layouts/index.less

@@ -38,6 +38,8 @@
 }
 
 .lx-page-header {
+  display: flex;
+  justify-content: space-between;
   background: #fff;
   padding: 0 24px;
   height: 64px;
@@ -52,6 +54,7 @@
   min-height: calc(100vh - 200px);
 
   &.noHeader {
+    padding: 0;
     min-height: calc(100vh - 156px);
   }
 }

src/locales/zh-CN/menu.ts

@@ -52,6 +52,7 @@ export default {
   'menu.authConfig': '平台权限',
   'menu.authConfig.organ': '组织机构',
   'menu.authConfig.memberSystem': '角色管理',
+  'menu.authConfig.memberDetail': '角色详情',
   'menu.authConfig.userSystem': '用户管理',
   // 会员能力
   'menu.memberAbility': '会员管理',

src/pages/authConfig/memberSystem/index.tsx

@@ -32,7 +32,7 @@ const MemberSystem: React.FC<{}> = () => {
   }
 
   const updateItem = (record) => {
-    history.push(`/authorityManage/roleManage/addRole?id=${record.id}&preview=0`)
+    history.push(`/authConfig/memberSystem/memberDetail?id=${record.id}&preview=0`)
   }
 
   const handleStatus = async (record) => {
@@ -94,7 +94,7 @@ const MemberSystem: React.FC<{}> = () => {
     }
   ];
 
-  return (<div className="common-wrapper">
+  return (<div className="common-wrapper-gray">
       <StandardTable
         columns={columns}
         currentRef={ref}
@@ -106,7 +106,7 @@ const MemberSystem: React.FC<{}> = () => {
           layouts: {
             order: 2
           },
-          children: <Button style={{width: 140}} icon={<PlusOutlined/>} onClick={() => history.push('/authorityManage/roleManage/addRole')} type='primary'>新建</Button>
+          children: <Button style={{width: 140}} icon={<PlusOutlined/>} onClick={() => history.push('/authConfig/memberSystem/memberDetail')} type='primary'>新建</Button>
         }}
         formilyProps={{
           layouts: {

src/pages/authConfig/memberSystem/memberDetail.tsx

@@ -66,7 +66,7 @@ const MemberDetail: React.FC<{}> = () => {
   // 编辑和预览模式下需回显数据
   const fetchRoleMenuDetail = async (id) => {
     // 10秒缓存
-    const res = await PublicApi.getMemberRoleAuthTreeCheck({
+    const res = await PublicApi.getMemberRoleGet({
       memberRoleId: id
     }, { useCache: true, ttl: 10 * 1000 })
     return res
@@ -161,12 +161,12 @@ const MemberDetail: React.FC<{}> = () => {
                 schema={{
                   type: 'object',
                   properties: {
-                    name: {
+                    roleName: {
                       type: 'string',
                       title: '角色名称',
                       required: true
                     },
-                    described: {
+                    remark: {
                       type: 'textarea',
                       title: '备注',
                       "x-component-props": {

src/pages/authConfig/userSystem/index.less

+.user-system {
+  .ant-input-group-addon {
+    padding: 0;
+    border: none;
+  }
+}

src/pages/authConfig/userSystem/index.tsx

@@ -15,10 +15,6 @@ import { PublicApi } from '@/services/api';
 import EyePreview from '@/components/EyePreview';
 import StatusSwitch from '@/components/StatusSwitch';
 
-const setInformation = (props:string) => {
-  history.push(`/authorityManage/userManage/addUser?id=${props}&preview=0`)
-}
-
 // 模拟请求
 const fetchData = async (params) => {
   const { data } = await PublicApi.getMemberUserPage(params)
@@ -29,24 +25,24 @@ const UserSystem: React.FC<{}> = () => {
   const ref = useRef<any>({})
 
   const addItem = () => {
-    history.push('/authorityManage/userManage/addUser?preview=0')
+    history.push('/authConfig/userSystem/userDetail?preview=0')
   }
   const deleteItem = (record) => {
     // 删除该项
     PublicApi.postMemberUserDelete({
-      userId: record.id
+      userId: record.userId
     }).then(() => {
       ref.current.reload()
     })
   }
 
   const updateItem = (record) => {
-    history.push(`/authorityManage/userManage/addUser?id=${record.id}&preview=0`)
+    history.push(`/authConfig/userSystem/userDetail?id=${record.userId}&preview=0`)
   }
 
   const handleStatus = (record) => {
     PublicApi.postMemberUserUpdatestatus({
-      userId: record.id,
+      userId: record.userId,
       status: record.status === 1 ? 0 : 1
     }).then(res => {
       ref.current.reload()
@@ -59,7 +55,7 @@ const UserSystem: React.FC<{}> = () => {
       align: 'center',
       key: 'account',
       className: 'commonPickColor',
-      render: (text, record) => <EyePreview url={`/authConfig/userSystem/userDetail?id=${record.id}&preview=1`}>{text}</EyePreview>
+      render: (text, record) => <EyePreview url={`/authConfig/userSystem/userDetail?id=${record.userId}&preview=1`}>{text}</EyePreview>
     },
     {
       title: '用户姓名',

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

+import { ISchema } from '@formily/antd';
+
+export const UserDetailSchema:ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT: {
+      type: 'object',
+      "x-component": 'mega-layout',
+      "x-component-props": {
+        labelCol: 6,
+        labelAlign: 'left',
+        full: true,
+        wrapperCol: 12
+      },
+      properties: {
+        account: {
+          type: 'string',
+          title: '登录账号',
+          required: true
+        },
+        password: {
+          type: 'password',
+          title: '登录密码',
+          required: true
+        },
+        name: {
+          type: 'string',
+          title: '姓名',
+          required: true
+        },
+        countryCode: {
+          type: 'string',
+          title: '国家代码(手机号前缀)',
+          required: true
+        },
+        phone: {
+          type: 'number',
+          title: '手机号',
+          required: true
+        },
+        idCardNo: {
+          type: 'string',
+          title: '身份证号'
+        },
+        email: {
+          type: 'string',
+          title: '邮箱'
+        },
+        jobTitle: {
+          type: 'string',
+          title: '职位'
+        },
+        orgId: {
+          type: 'string',
+          title: '所属组织机构',
+          required: true,
+          'x-component-props': {
+            disabled: true,
+            addonAfter: "{{connectCategory}}"
+          },
+        },
+        memberRoleIds: {
+          required: true,
+          type: 'array:string',
+          "x-component": 'tableTagList',
+          "x-component-props": {
+            extra: "{{addRoles}}",
+            callback: "{{callback}}"
+          },
+          title: '关联角色'
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/authConfig/userSystem/userDetail.tsx

@@ -2,28 +2,20 @@ import React, { useRef, useState, useEffect } from 'react';
 import { Button, Modal, Tag, Row, Col } from 'antd';
 import { Form, FormItem, createFormActions } from '@formily/antd'
 import { Input } from '@formily/antd-components'
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, LinkOutlined } from '@ant-design/icons';
 import {StandardTable} from 'god'
 import {ColumnType} from 'antd/lib/table/interface';
 import { PublicApi } from '@/services/api';
 import { history } from 'umi';
 import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
 import DetailPage from '@/components/DetailPage';
+import NiceForm from '@/components/NiceForm';
+import { UserDetailSchema } from './schema';
+import './index.less'
+import ModalTable from '@/components/ModalTable';
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
+import { findItemAndDelete } from '@/utils';
 
-const layout = {
-  labelCol: {
-    span: 6,
-  },
-  wrapperCol: {
-    span: 12,
-  },
-};
-const tailLayout = {
-  wrapperCol: {
-    offset: 6,
-    span: 18,
-  },
-};
 // 定义选择的行数据的类型
 type Item = any
 
@@ -34,16 +26,16 @@ const titleRender = (title) => {
   return ''
 }
 
-const form = createFormActions()
+const userActions = createFormActions()
 
 const AddUser: React.FC<{}> = () => {
   const checkBoxRef = useRef<any[]>([])
   const [roleVisible, setRoleVisible] = useState(false)
-  const [selectRow, setSelectRow] = useState<Item[]>([]) // 模态框选择的行数据
   const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
   const ref = useRef<any>({})
   const [formData, setFormData] = useState<any>(null)
   const { id, pageStatus } = usePageStatus()
+  const [roleSelection, roleSelectCtl] = useRowSelectionTable()
   useEffect(() => {
     if (id) {
       // PublicApi.getMiddlegroundUserDetailsById({
@@ -59,7 +51,7 @@ const AddUser: React.FC<{}> = () => {
     if (values.roles) {
       delete values.roles
     }
-    let value = { ...values,  'roleIds': selectRow.map(v => v.id) }
+    let value = { ...values }
     const fn = id ? PublicApi.postMemberUserUpdate : PublicApi.postMemberUserAdd
     const params = id ? {
       ...value,
@@ -69,17 +61,18 @@ const AddUser: React.FC<{}> = () => {
     history.goBack(-1)
   };
 
-  const handleSelectOk = () => {
+  // 角色确认弹窗
+  const roleConfirm = () => {
     setRoleVisible(false)
-    setSelectRow(checkBoxRef.current)
+    userActions.setFieldValue('memberRoleIds', roleSelectCtl.selectRow)
   }
   const handleSelectCancel = () => {
     setRoleVisible(false)
   }
 
 // 模拟请求
-  const fetchData = async (params:any) => {
-    const data = await PublicApi.getMemberOrgTree(params)
+  const fetchUserList = async (params:any) => {
+    const data = await PublicApi.getMemberRolePage(params)
     return data.data
   }
 
@@ -92,147 +85,73 @@ const AddUser: React.FC<{}> = () => {
     },
     {
       title: '角色名称',
-      dataIndex: 'name',
+      dataIndex: 'roleName',
       align: 'center',
-      key: 'name',
+      key: 'roleName',
     },
     {
       title: '描述',
       align: 'center',
-      dataIndex: 'described',
-      key: 'described',
+      dataIndex: 'remark',
+      key: 'remark',
     }
   ]
 
-  console.log(selectedRowKeys)
-  const rowSelection = {
-    selectedRowKeys: selectedRowKeys,
-    onChange: (selectedRowKeys: any, selectedRows: any) => {
-      checkBoxRef.current = selectedRows
-      setSelectedRowKeys(selectedRowKeys);
-      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-    }
-  };
-
   const handleCloseTag = (removedTag: any) => {
-    const selectRows = selectRow.filter((tag:any) => tag.id !== removedTag.id);
-    setSelectRow(selectRows);
-    console.log(selectRows, 'selectRows');
   };
 
   const handleAddRole = () => {
     setRoleVisible(true);
-    setSelectedRowKeys(selectRow.map(v => v.id))
-    checkBoxRef.current = selectRow
   }
 
-  useEffect(()=>{
-    console.log(selectRow,'change')
-  }, [selectRow])
-
+  const connectCategory = <div className='connectBtn' ><LinkOutlined style={{marginRight: 4}}/>关联</div>
+  const addRoles = <Button block onClick={() => setRoleVisible(true)}>添加角色</Button>
   return (
     <DetailPage title={titleRender(pageStatus)}>
-      <div className="common-wrapper">
-        <Form {...layout} actions={form} initialValues={formData} editable={pageStatus !== PageStatus.PREVIEW} name="control-hooks" onSubmit={onFinish} >
-          <FormItem
-            name="account"
-            label="登录账号"
-            component={Input}
-            rules={[
-              {
-                required: true,
-                message: '登录账号为必填！'
-              },
-            ]}
-          />
-          <FormItem
-            name="password"
-            label="初始密码"
-            component={Input}
-            rules={[
-              {
-                required: true,
-                message: '初始密码为必填！'
-              },
-            ]}
-          />
-          <FormItem
-            name="name"
-            label="用户姓名"
-            rules={[
-              {
-                required: true,
-                message: '用户姓名为必填！'
-              },
-            ]}
-            component={Input}
+      <div className="common-wrapper user-system">
+        <NiceForm
+          schema={UserDetailSchema}
+          actions={userActions}
+          expressionScope={{
+            connectCategory,
+            addRoles,
+            callback: (id) => {
+              roleSelectCtl.setSelectRow(findItemAndDelete(roleSelectCtl.selectRow, id))
+              roleSelectCtl.setSelectedRowKeys(findItemAndDelete(roleSelectCtl.selectedRowKeys, id))
+            }
+          }}
         />
-          <FormItem
-            name="tel"
-            label="手机号码"
-            rules={[
-              {
-                required: true,
-                message: '手机号码为必填！'
+        <ModalTable
+          modalTitle='选择角色'
+          visible={roleVisible}
+          confirm={roleConfirm}
+          cancel={handleSelectCancel}
+          columns={columns}
+          rowSelection={roleSelection}
+          currentRef={ref}
+          fetchTableData={(params:any) => fetchUserList(params)}
+            tableProps={{ rowKey: 'id' }}
+            formilyProps={{
+              layouts: {
+                order: 3
               },
-            ]}
-            component={Input}
-          />
-          <FormItem
-            name="identityCard"
-            label="身份证号码"
-            component={Input}
-          />
-          <FormItem
-            name="email"
-            label="Email"
-            component={Input}
-          />
-          <FormItem
-            name="post"
-            label="职位"
-            component={Input}
-          />
-          <FormItem
-            name="roleIds"
-            label="关联角色"
-          >
-            <>
-              {
-                selectRow.length>0 && selectRow.map((tag, index) => {
-                  return (
-                    <Tag
-                      style={{marginBottom:12}}
-                      color="cyan"
-                      className="edit-tag"
-                      key={index}
-                      closable={pageStatus !== PageStatus.PREVIEW}
-                      onClose={() => handleCloseTag(tag)}
-                    >
-                      {tag.name}
-                    </Tag>
-                  );
-                })
+              ctx: {
+                schema: {
+                  type: 'object',
+                  properties: {
+                    name: {
+                      type: 'Search',
+                      "x-component-props": {
+                        placeholder: '请输入角色名称'
+                      }
+                    }
                   }
-              { pageStatus !== PageStatus.PREVIEW && <Button onClick={handleAddRole} style={{width:'100%'}} icon={<PlusOutlined />}>添加角色</Button> }
-            </>
-          </FormItem>
-            <Row>
-            {
-              pageStatus !== PageStatus.PREVIEW
-                &&
-                  <Col {...tailLayout.wrapperCol}>
-                    <Button type="primary" onClick={() => form.submit()}>
-                      提交
-                    </Button>
-                    <Button className="ml-20">
-                      取消
-                    </Button>
-                  </Col>
                 }
-            </Row>
-        </Form>
-        <Modal
+              }
+            }
+          }
+        />
+        {/* <Modal
           title="选择角色"
           visible={roleVisible}
           onOk={handleSelectOk}
@@ -244,7 +163,7 @@ const AddUser: React.FC<{}> = () => {
             columns={columns}
             currentRef={ref}
             rowSelection={rowSelection}
-            fetchTableData={(params:any) => fetchData(params)}
+            fetchTableData={(params:any) => fetchUserList(params)}
             tableProps={{ rowKey: 'id' }}
             formilyProps={{
               layouts: {
@@ -263,10 +182,9 @@ const AddUser: React.FC<{}> = () => {
                   }
                 }
               }
-              }
-            }
+            }}
           />
-        </Modal>
+        </Modal> */}
       </div>
     </DetailPage>
     

src/utils/request.ts

@@ -37,20 +37,6 @@ const errorMessage: httpStatus = {
   504: "网关超时。",
 };
 
-const errorHandler = (error: ResponseError): IRequestError => {
-  const { response } = error
-  // http状态码非200的错误处理
-  const messageText = errorMessage[response.status]
-  if (response) {
-    message.error('http请求错误: ' + response.status + '->' + messageText, 3)
-  }
-  // throw可令响应promise走catch, 如需走resolve需直接return
-  throw {
-    message: messageText,
-    ...error
-  }
-}
-
 const defaultHeaders = {
   'Content-Type': 'Application/json',
   'source': '99'
@@ -68,7 +54,6 @@ const baseRequest = extend({
 
 // 请求拦截器
 baseRequest.interceptors.request.use((url: string, options: RequestOptionsInit): { url: string, options: RequestOptionsInit } => {
-
   // 判断是否有权限
   const loginAfterHeaders = getAuth()
   const headers = {