Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

组件调整

This commit is contained in:
Wang Kejun 2022-10-25 11:33:25 +08:00
parent a5a511b9c0
commit 31d84d500c
8 changed files with 666 additions and 728 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/userRelation/list/index.ts
View File

@ -2,7 +2,7 @@ import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
import { composeFileUrl } from '../../../utils/extraFile'; import { composeFileUrl } from '../../../utils/extraFile';
import React from '../../../utils/react'; import React from '../../../utils/react';
export default OakPage({ export default OakComponent({
entity: 'user', entity: 'user',
projection: async ({ props }) => { projection: async ({ props }) => {
const { entity, entityId } = props; const { entity, entityId } = props;
@ -53,7 +53,7 @@ export default OakPage({
filters: [ filters: [
// 由调用者注入oakFilter // 由调用者注入oakFilter
{ {
filter: async ({ features, props, onLoadOptions }) => { filter: async ({ features, props }) => {
const { entityId, entity } = props; const { entityId, entity } = props;
const entityStr = firstLetterUpperCase(entity!); const entityStr = firstLetterUpperCase(entity!);
return { return {
@ -76,11 +76,11 @@ export default OakPage({
async formData({ data: users, props, features }) { async formData({ data: users, props, features }) {
const { entity, entityId } = props; const { entity, entityId } = props;
const entityStr = firstLetterUpperCase(entity!); const entityStr = firstLetterUpperCase(entity!);
const filter = this.state.oakFullpath && await this.getFilterByName('name') as any; const filter = await this.getFilterByName('name');
const pagination = this.state.oakFullpath && this.getPagination(); const pagination = this.getPagination();
return { return {
users: users?.map((ele: any) => { users: users?.map((ele: any) => {
const { mobile$user, extraFile$entity } = ele || {}; const { mobile$user, extraFile$entity } = ele;
const mobile = mobile$user && mobile$user[0]?.mobile; const mobile = mobile$user && mobile$user[0]?.mobile;
const relations = ele[`user${entityStr}$user`] const relations = ele[`user${entityStr}$user`]
?.filter((rt: any) => rt[`${entity}Id`] === entityId) ?.filter((rt: any) => rt[`${entity}Id`] === entityId)
@ -112,7 +112,6 @@ export default OakPage({
data: { data: {
show: false, show: false,
searchValue: '', searchValue: '',
deleteIndex: '',
editableRowKeys: [] as string[], editableRowKeys: [] as string[],
btnItems: [ btnItems: [
{ {
@ -150,7 +149,6 @@ export default OakPage({
url: '/userRelation/upsert', url: '/userRelation/upsert',
entity, entity,
entityId, entityId,
relations,
}, },
{ {
relations, relations,
@ -275,7 +273,9 @@ export default OakPage({
const { entity, entityId } = this.props; const { entity, entityId } = this.props;
const entityStr = firstLetterUpperCase(entity!); const entityStr = firstLetterUpperCase(entity!);
const current = (this as any).editMap[(this as any).currentSaveId]; const current = (this as any).editMap[
(this as any).currentSaveId
];
if (current) { if (current) {
Object.keys(current.editedRow).forEach((ele) => { Object.keys(current.editedRow).forEach((ele) => {
if (ele === 'relations') { if (ele === 'relations') {

203
src/pages/userRelation/list/web.pc.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { import {
Table, Table,
Input, Input,
@ -7,8 +8,8 @@ import {
Button, Button,
Avatar, Avatar,
Space, Space,
Tag Tag,
} from 'tdesign-react'; } from 'antd';
import PageHeader from '../../../components/common/pageHeader'; import PageHeader from '../../../components/common/pageHeader';
import Style from './web.module.less'; import Style from './web.module.less';
@ -24,22 +25,12 @@ export default function render(this: any) {
return ( return (
<PageHeader title="人员列表"> <PageHeader title="人员列表">
<div className={Style.container}> <div className={Style.container}>
<Space direction="vertical">
<Space> <Space>
<Button <Button type="primary" onClick={() => this.goUpsert()}>
shape="rectangle"
size="medium"
type="button"
variant="base"
onClick={() => this.goUpsert()}
>
添加 添加
</Button> </Button>
<Button <Button
shape="rectangle" type="primary"
size="medium"
type="button"
variant="base"
onClick={() => this.goUserEntityGrantWithGrant()} onClick={() => this.goUserEntityGrantWithGrant()}
> >
二维码分享 二维码分享
@ -56,69 +47,64 @@ export default function render(this: any) {
columns={[ columns={[
{ {
width: 100, width: 100,
colKey: 'index', dataIndex: 'index',
title: '序号', title: '序号',
cell: ({ rowIndex }) => rowIndex + 1, render: (value, record, index) => index + 1,
}, },
{ {
colKey: 'avatar', dataIndex: 'avatar',
title: '头像', title: '头像',
cell: ({ row, rowIndex, col, colIndex }) => { render: (value, record, index) => {
const { avatar } = row; return value ? (
return avatar ? ( <Avatar src={value} shape="circle" />
<Avatar
hideOnLoadFailed={false}
image={avatar}
shape="circle"
/>
) : ( ) : (
<span>未设置</span> <span>未设置</span>
); );
}, },
}, },
{ {
colKey: 'name', dataIndex: 'name',
title: '姓名', title: '姓名',
edit: { // edit: {
component: Input, // component: Input,
props: { // props: {
clearable: true, // clearable: true,
autofocus: true, // autofocus: true,
autoWidth: true, // autoWidth: true,
}, // },
rules: [ // rules: [
{ required: true, message: '不能为空' }, // { required: true, message: '不能为空' },
], // ],
showEditIcon: false, // showEditIcon: false,
}, // },
}, },
{ {
colKey: 'nickname', dataIndex: 'nickname',
title: '昵称', title: '昵称',
edit: { // edit: {
component: Input, // component: Input,
props: { // props: {
clearable: true, // clearable: true,
autofocus: true, // autofocus: true,
autoWidth: true, // autoWidth: true,
}, // },
rules: [ // rules: [
{ required: true, message: '不能为空' }, // { required: true, message: '不能为空' },
], // ],
showEditIcon: false, // showEditIcon: false,
}, // },
}, },
{ {
colKey: 'mobile', dataIndex: 'mobile',
title: '手机号', title: '手机号',
}, },
{ {
colKey: 'relations', dataIndex: 'relations',
title: '权限', title: '权限',
cell: ({ row, rowIndex, col, colIndex }) => { render: (value, record, index) => {
return ( return (
<Space> <Space>
{row.relations?.map( {record.relations?.map(
(ele: string, index: number) => ( (ele: string, index: number) => (
<Tag key={index}> <Tag key={index}>
{t(entity + ':r.' + ele)} {t(entity + ':r.' + ele)}
@ -129,89 +115,77 @@ export default function render(this: any) {
); );
}, },
edit: { // edit: {
component: Select, // component: Select,
// props, 透传全部属性到 Select 组件 // // props, 透传全部属性到 Select 组件
// props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动 // // props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动
props: () => { // props: () => {
return { // return {
multiple: true, // multiple: true,
minCollapsedNum: 1, // minCollapsedNum: 1,
autoWidth: true, // autoWidth: true,
options: // options:
relationArr && // relationArr &&
relationArr.map( // relationArr.map(
( // (
ele: any, // ele: any,
index: number // index: number
) => ({ // ) => ({
value: ele, // value: ele,
label: t( // label: t(
entity + ':r.' + ele // entity + ':r.' + ele
), // ),
}) // })
), // ),
}; // };
}, // },
showEditIcon: false, // showEditIcon: false,
rules: [ // rules: [
{ // {
required: true, // required: true,
message: '请至少选择一个权限', // message: '请至少选择一个权限',
}, // },
], // ],
}, // },
}, },
{ {
title: '操作', title: '操作',
colKey: 'operate', dataIndex: 'operate',
cell: ({ row }) => { render: (value, record, index) => {
const editable = editableRowKeys.includes( const editable = editableRowKeys.includes(
row.id record.id
); );
return ( return (
<Space> <Space>
<Button <Button
theme="primary" type="link"
variant="text"
onClick={(e) => onClick={(e) =>
this.goDetail(row.id) this.goDetail(record.id)
} }
> >
详情 详情
</Button> </Button>
{!editable && ( {!editable && (
<Button <Button
theme="primary" type="link"
variant="text" onClick={(e) => this.onEdit(e)}
data-id={row.id}
onClick={(e) =>
this.onEdit(e)
}
> >
编辑 编辑
</Button> </Button>
)} )}
{editable && ( {editable && (
<Button <Button
theme="primary" type="link"
variant="text" variant="text"
data-id={row.id} onClick={(e) => this.onSave(e)}
onClick={(e) =>
this.onSave(e)
}
> >
保存 保存
</Button> </Button>
)} )}
{editable && ( {editable && (
<Button <Button
theme="primary" type="primary"
variant="text" onClick={(e) => this.onCancel(e)}
data-id={row.id}
onClick={(e) =>
this.onCancel(e)
}
> >
取消 取消
</Button> </Button>
@ -226,15 +200,14 @@ export default function render(this: any) {
total, total,
pageSize, pageSize,
current: currentPage, current: currentPage,
onPageSizeChange: (ps: number) => { onShowSizeChange: (current: number, size: number) => {
this.setPageSize(ps); this.setPageSize(current);
}, },
onCurrentChange: (current) => { onChange: (page: number, pageSize: number) => {
this.setCurrentPage(current); this.setCurrentPage(page);
}, },
}} }}
/> />
</Space>
</div> </div>
</PageHeader> </PageHeader>
); );

21
src/pages/userRelation/manage/index.ts
View File

@ -1,7 +1,6 @@
import { firstLetterUpperCase } from 'oak-domain/lib/utils/string'; import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
export default OakPage( export default OakComponent({
{
entity: 'user', entity: 'user',
projection: async ({ props }) => { projection: async ({ props }) => {
const { entity } = props; const { entity } = props;
@ -18,7 +17,7 @@ export default OakPage(
}, },
filter: { filter: {
[`${entity}Id`]: props.entityId!, [`${entity}Id`]: props.entityId!,
} },
}, },
}; };
}, },
@ -39,16 +38,16 @@ export default OakPage(
users?.forEach((ele: any) => { users?.forEach((ele: any) => {
userRelations.push(...ele[`user${entityStr}$user`]); userRelations.push(...ele[`user${entityStr}$user`]);
}); });
userRelations.forEach(ele => { userRelations.forEach((ele) => {
const userIds = relationMap.get(ele.relation) as Array<string>; const userIds = relationMap.get(ele.relation) as Array<string>;
userIds.push(ele.userId); userIds.push(ele.userId);
}) });
relationMap.forEach((value, key) => { relationMap.forEach((value, key) => {
relationArr.push([key, value]) relationArr.push([key, value]);
}) });
return { return {
relationArr, relationArr,
relationMap relationMap,
}; };
}, },
properties: { properties: {
@ -70,9 +69,7 @@ export default OakPage(
userIds: ids, userIds: ids,
relation, relation,
entityId, entityId,
}) });
}, },
}, },
} });
);

42
src/pages/userRelation/onEntity/index.ts
View File

@ -1,25 +1,28 @@
import { firstLetterUpperCase } from "oak-domain/lib/utils/string"; import { firstLetterUpperCase } from "oak-domain/lib/utils/string";
export default OakPage( export default OakComponent({
{
isList: true, isList: true,
formData: async function ({ data, props }) { formData: async function ({ data, props }) {
const { nameProperty } = props; const { nameProperty } = props;
const { oakEntity } = this.props; const { oakEntity } = this.props;
const entityStr = firstLetterUpperCase(oakEntity); const entityStr = firstLetterUpperCase(oakEntity);
const rows = data?.map( const rows = data?.map((ele) => {
(ele) => { const {
const { id, [nameProperty!]: name, [`user${entityStr}$${oakEntity}`]: userEntity } = ele as any; id,
[nameProperty!]: name,
[`user${entityStr}$${oakEntity}`]: userEntity,
} = ele as any;
const relations = userEntity?.map((ele: any) => ele.relation); const relations = userEntity?.map((ele: any) => ele.relation);
const hasRelation: boolean[] = props.relations!.map(ele2 => relations.includes(ele2)); const hasRelation: boolean[] = props.relations!.map((ele2) =>
relations.includes(ele2)
);
return { return {
id, id,
name, name,
hasRelation, hasRelation,
}; };
} });
);
return { return {
rows, rows,
}; };
@ -32,22 +35,29 @@ export default OakPage(
methods: { methods: {
onChange(input: any) { onChange(input: any) {
const { dataset, checked } = this.resolveInput(input, ['checked']); const { dataset, checked } = this.resolveInput(input, ['checked']);
const { id: entityId, relation, index } = dataset as { const {
id: string, id: entityId,
relation: string, relation,
index,
} = dataset as {
id: string;
relation: string;
index: number; index: number;
}; };
const { oakEntity, user } = this.props; const { oakEntity, user } = this.props;
const entityStr = firstLetterUpperCase(oakEntity!); const entityStr = firstLetterUpperCase(oakEntity!);
this.toggleNode({ this.toggleNode(
{
relation, relation,
userId: user.id, userId: user.id,
}, checked, `${index}.user${entityStr}$${oakEntity}`) },
checked,
`${index}.user${entityStr}$${oakEntity}`
);
}, },
async confirm() { async confirm() {
await this.execute('create'); await this.execute('create');
await this.navigateBack(); await this.navigateBack();
}
}, },
} },
); });

6
src/pages/userRelation/onUser/index.ts
View File

@ -1,7 +1,7 @@
import { firstLetterUpperCase } from 'oak-domain/lib/utils/string'; import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
import { composeFileUrl } from '../../../utils/extraFile'; import { composeFileUrl } from '../../../utils/extraFile';
export default OakPage({ export default OakComponent({
entity: 'user', entity: 'user',
projection: async ({ props }) => { projection: async ({ props }) => {
const { entity, relations, entityId } = props; const { entity, relations, entityId } = props;
@ -62,7 +62,9 @@ export default OakPage({
formData: async function ({ data: users, props, features }) { formData: async function ({ data: users, props, features }) {
const { entity } = props; const { entity } = props;
const entityStr = firstLetterUpperCase(entity!); const entityStr = firstLetterUpperCase(entity!);
const filter = this.state.oakFullpath && await this.getFilterByName('name') as any; const filter =
this.state.oakFullpath &&
((await this.getFilterByName('name')) as any);
return { return {
users: users?.map((ele: any) => { users: users?.map((ele: any) => {

42
src/pages/userRelation/upsert/index.ts
View File

@ -1,7 +1,6 @@
import { firstLetterUpperCase } from "oak-domain/lib/utils/string"; import { firstLetterUpperCase } from "oak-domain/lib/utils/string";
export default OakPage( export default OakComponent({
{
entity: 'user', entity: 'user',
projection: async ({ props }) => { projection: async ({ props }) => {
const { entity, entityId } = props; const { entity, entityId } = props;
@ -32,18 +31,12 @@ export default OakPage(
isList: false, isList: false,
formData: async ({ data: user, props }) => { formData: async ({ data: user, props }) => {
const { entity, relations } = props; const { entity, relations } = props;
const { const { name, mobile$user, password } = user || {};
id,
name,
mobile$user,
password,
} = user || {};
const mobile = mobile$user && mobile$user[0]?.mobile; const mobile = mobile$user && mobile$user[0]?.mobile;
return { return {
id,
name, name,
mobile,
password, password,
mobile,
}; };
}, },
properties: { properties: {
@ -55,12 +48,14 @@ export default OakPage(
mobile: '', mobile: '',
relationArr: [] as string[], relationArr: [] as string[],
}, },
methods: { lifetimes: {
async onLoad() { ready() {
if (!this.props.oakId) { if (!this.props.oakId) {
this.setUpdateData('password', '12345678'); this.setUpdateData('password', '12345678');
} }
}, },
},
methods: {
setValue(input: any) { setValue(input: any) {
const { dataset, value, Context } = this.resolveInput(input); const { dataset, value, Context } = this.resolveInput(input);
this.setUpdateData(dataset!.attr, value); this.setUpdateData(dataset!.attr, value);
@ -69,7 +64,7 @@ export default OakPage(
const { value } = event.detail; const { value } = event.detail;
this.setState({ this.setState({
mobile: value, mobile: value,
}) });
this.setUpdateData('mobile$user.0.mobile', value); this.setUpdateData('mobile$user.0.mobile', value);
}, },
onCheckBoxChange(event: any) { onCheckBoxChange(event: any) {
@ -83,19 +78,24 @@ export default OakPage(
// 由于是根据index 进行删除, 所以将之前设置的node从头开始删除 // 由于是根据index 进行删除, 所以将之前设置的node从头开始删除
relationArr.forEach((ele, index) => { relationArr.forEach((ele, index) => {
this.removeNode(`user${entityStr}$user`, '0'); this.removeNode(`user${entityStr}$user`, '0');
}) });
value.forEach((ele, index) => { value.forEach((ele, index) => {
this.setUpdateData(`user${entityStr}$user.${index}.${entity}Id`, entityId); this.setUpdateData(
this.setUpdateData(`user${entityStr}$user.${index}.relation`, ele); `user${entityStr}$user.${index}.${entity}Id`,
}) entityId
);
this.setUpdateData(
`user${entityStr}$user.${index}.relation`,
ele
);
});
this.setState({ this.setState({
relationArr: value, relationArr: value,
}) });
}, },
async onConfirm() { async onConfirm() {
await this.execute('create'); await this.execute();
this.navigateBack(); this.navigateBack();
}, },
}, },
} });
);

104
src/pages/userRelation/upsert/web.pc.tsx
View File

@ -1,15 +1,7 @@
import React, { ReactElement } from 'react'; import React from 'react';
import { import { Form, Input, Checkbox, Button, Space } from 'antd';
Form,
Input,
Row,
Col,
Checkbox,
Button,
} from 'tdesign-react';
import PageHeader from '../../../components/common/pageHeader'; import PageHeader from '../../../components/common/pageHeader';
import Style from './web.module.less'; import Style from './web.module.less';
const { FormItem } = Form;
export default function render(this: any) { export default function render(this: any) {
const { relations, entity } = this.props; const { relations, entity } = this.props;
@ -21,114 +13,95 @@ export default function render(this: any) {
return ( return (
<PageHeader showBack={true} title="添加权限"> <PageHeader showBack={true} title="添加权限">
<div className={Style.container}> <div className={Style.container}>
<div className={Style.formContainer}> <Form colon labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
<Row gutter={16}> <Form.Item
<Col span={8}>
<Form
colon={false}
labelAlign="right"
labelWidth="100px"
layout="vertical"
preventSubmitDefault
resetType="empty"
showErrorMessage
submitWithWarningMessage={false}
>
<FormItem
label="姓名" label="姓名"
name="name" name="name"
rules={[ rules={[
{ {
required: true, required: true,
message: '姓名不能为空', message: '姓名不能为空',
type: 'error',
}, },
]} ]}
> >
<>
<Input <Input
onChange={(value, context) => { onChange={(e) => {
this.setUpdateData('name', value); this.setUpdateData('name', e.target.value);
}} }}
value={name} value={name}
align="left" placeholder="请输入姓名"
placeholder="请输入内容"
type="text"
/> />
</FormItem> </>
<FormItem </Form.Item>
<Form.Item
label="手机号码" label="手机号码"
name="mobile" name="mobile"
rules={[ rules={[
{ {
required: true, required: true,
message: '手机号不能为空', message: '手机号不能为空',
type: 'error',
}, },
{ {
min: 11, min: 11,
message: '请输入11位手机号', message: '请输入11位手机号',
type: 'error',
}, },
{ {
max: 11, max: 11,
message: '请输入11位手机号', message: '请输入11位手机号',
type: 'error',
}, },
]} ]}
> >
<> <>
<Input <Input
maxlength={11} maxLength={11}
value={mobile} value={mobile}
onChange={(value, context) => { onChange={(e) => {
const strValue = String(value); const strValue = e.target.value;
this.setUpdateData( this.setUpdateData(
'mobile$user.0.mobile', 'mobile$user.0.mobile',
strValue.replace(/[^\d\-\d]/g, '') strValue.replace(/[^\d\-\d]/g, '')
); );
}} }}
align="left" placeholder="请输入手机号码"
placeholder="请输入内容"
size="medium"
type="tel" type="tel"
/> />
</> </>
</FormItem> </Form.Item>
<FormItem <Form.Item
initialData="12345678"
label="密码" label="密码"
name="mobile" name="mobile"
rules={[ rules={[
{ {
required: true, required: true,
message: '密码不能为空', message: '密码不能为空',
type: 'error',
}, },
]} ]}
> >
<>
<Input <Input
value={password} value={password}
onChange={(value) => { onChange={(e) => {
this.setUpdateData('password', value); this.setUpdateData(
'password',
e.target.value
);
}} }}
align="left"
placeholder="不少于八位" placeholder="不少于八位"
showClearIconOnEmpty={false}
size="medium"
status="default"
type="text"
/> />
</FormItem> </>
<FormItem </Form.Item>
<Form.Item
label="权限" label="权限"
rules={[ rules={[
{ {
required: true, required: true,
message: '请至少选择一个权限', message: '请至少选择一个权限',
type: 'error',
}, },
]} ]}
name="relation"
> >
<>
<Checkbox.Group <Checkbox.Group
value={relationArr} value={relationArr}
onChange={(value) => { onChange={(value) => {
@ -142,26 +115,23 @@ export default function render(this: any) {
ele, ele,
}))} }))}
></Checkbox.Group> ></Checkbox.Group>
</FormItem> </>
<FormItem style={{ marginLeft: 100 }}> </Form.Item>
<Form.Item wrapperCol={{ offset: 4 }}>
<Space>
<Button <Button
theme="primary" type="primary"
type="submit" htmlType="submit"
style={{ marginRight: 10 }}
onClick={() => { onClick={() => {
this.onConfirm(); this.onConfirm();
}} }}
> >
提交 提交
</Button> </Button>
<Button theme="default" type="reset"> <Button htmlType="reset">重置</Button>
重置 </Space>
</Button> </Form.Item>
</FormItem>
</Form> </Form>
</Col>
</Row>
</div>
</div> </div>
</PageHeader> </PageHeader>
); );

106
src/pages/userRelation/upsert/web.tsx
View File

@ -1,145 +1,131 @@
import React from 'react'; import React from 'react';
import { Form, Input, Row, Col, Checkbox, Button } from 'tdesign-react'; import { Form, Input, Checkbox, Button, Space } from 'antd';
const { FormItem } = Form; import Style from './web.module.less';
import Style from './mobile.module.less';
export default function render(this: any) { export default function render(this: any) {
const { t } = this;
const { relations, entity } = this.props; const { relations, entity } = this.props;
const { name, mobile, password, relationArr } = this.state; const { name, mobile, password, relationArr } = this.state;
const relations2 = const relationArr2: string[] =
typeof relations === 'object' typeof relations === 'object'
? relations ? relations
: relations && JSON.parse(relations); : relations && JSON.parse(relations);
return ( return (
<div className={Style.container}> <div className={Style.container}>
<Row gutter={16}> <Form colon labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
<Col xs={12} sm={4}> <Form.Item
<Form
colon={false}
labelAlign="right"
labelWidth="100px"
layout="vertical"
preventSubmitDefault
resetType="empty"
showErrorMessage
submitWithWarningMessage={false}
>
<FormItem
label="姓名" label="姓名"
name="name" name="name"
rules={[ rules={[
{ {
required: true, required: true,
message: '姓名不能为空', message: '姓名不能为空',
type: 'error',
}, },
]} ]}
> >
<>
<Input <Input
onChange={(value, context) => { onChange={(e) => {
this.setUpdateData('name', value); this.setUpdateData('name', e.target.value);
}} }}
value={name} value={name}
align="left" placeholder="请输入姓名"
placeholder="请输入内容"
type="text"
/> />
</FormItem> </>
<FormItem </Form.Item>
<Form.Item
label="手机号码" label="手机号码"
name="mobile" name="mobile"
rules={[ rules={[
{ {
required: true, required: true,
message: '手机号不能为空', message: '手机号不能为空',
type: 'error',
}, },
{ {
min: 11, min: 11,
message: '请输入11位手机号', message: '请输入11位手机号',
type: 'error',
}, },
{ {
max: 11, max: 11,
message: '请输入11位手机号', message: '请输入11位手机号',
type: 'error',
}, },
]} ]}
> >
<>
<Input <Input
onChange={(value, context) => { maxLength={11}
value={mobile}
onChange={(e) => {
const strValue = e.target.value;
this.setUpdateData( this.setUpdateData(
'mobile$user.0.mobile', 'mobile$user.0.mobile',
value strValue.replace(/[^\d\-\d]/g, '')
); );
}} }}
value={mobile} placeholder="请输入手机号码"
align="left" type="tel"
placeholder="请输入内容"
size="medium"
type="text"
/> />
</FormItem> </>
<FormItem </Form.Item>
initialData="123456" <Form.Item
label="密码" label="密码"
name="mobile" name="mobile"
rules={[ rules={[
{ {
required: true, required: true,
message: '密码不能为空', message: '密码不能为空',
type: 'error',
}, },
]} ]}
> >
<>
<Input <Input
value={password} value={password}
align="left" onChange={(e) => {
placeholder="请输入内容" this.setUpdateData('password', e.target.value);
showClearIconOnEmpty={false} }}
size="medium" placeholder="不少于八位"
status="default"
type="text"
/> />
</FormItem> </>
<FormItem </Form.Item>
<Form.Item
label="权限" label="权限"
rules={[ rules={[
{ {
required: true, required: true,
message: '请至少选择一个权限', message: '请至少选择一个权限',
type: 'error',
}, },
]} ]}
name="relation"
> >
<>
<Checkbox.Group <Checkbox.Group
value={relationArr} value={relationArr}
onChange={(value) => { onChange={(value) => {
this.setRelationValue(value); this.setRelationValue(value);
}} }}
options={relations2.map((ele: string) => ({ options={relationArr2.map((ele) => ({
value: ele, value: ele,
label: t(entity + ':r.' + ele), label:
(this.t && this.t(entity + ':r.' + ele)) ||
ele,
}))} }))}
></Checkbox.Group> ></Checkbox.Group>
</FormItem> </>
<FormItem style={{ marginLeft: 100 }}> </Form.Item>
<Form.Item wrapperCol={{ offset: 4 }}>
<Space>
<Button <Button
theme="primary" type="primary"
type="submit" htmlType="submit"
style={{ marginRight: 10 }}
onClick={() => { onClick={() => {
this.onConfirm(); this.onConfirm();
}} }}
> >
提交 提交
</Button> </Button>
<Button type="reset">重置</Button> <Button htmlType="reset">重置</Button>
</FormItem> </Space>
</Form.Item>
</Form> </Form>
</Col>
</Row>
</div> </div>
); );
} }