组件调整
This commit is contained in:
parent
a5a511b9c0
commit
31d84d500c
|
|
@ -2,7 +2,7 @@ import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
|
|||
import { composeFileUrl } from '../../../utils/extraFile';
|
||||
import React from '../../../utils/react';
|
||||
|
||||
export default OakPage({
|
||||
export default OakComponent({
|
||||
entity: 'user',
|
||||
projection: async ({ props }) => {
|
||||
const { entity, entityId } = props;
|
||||
|
|
@ -53,7 +53,7 @@ export default OakPage({
|
|||
filters: [
|
||||
// 由调用者注入oakFilter
|
||||
{
|
||||
filter: async ({ features, props, onLoadOptions }) => {
|
||||
filter: async ({ features, props }) => {
|
||||
const { entityId, entity } = props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
return {
|
||||
|
|
@ -73,14 +73,14 @@ export default OakPage({
|
|||
},
|
||||
],
|
||||
isList: true,
|
||||
async formData ({ data: users, props, features }) {
|
||||
async formData({ data: users, props, features }) {
|
||||
const { entity, entityId } = props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
const filter = this.state.oakFullpath && await this.getFilterByName('name') as any;
|
||||
const pagination = this.state.oakFullpath && this.getPagination();
|
||||
const filter = await this.getFilterByName('name');
|
||||
const pagination = this.getPagination();
|
||||
return {
|
||||
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 relations = ele[`user${entityStr}$user`]
|
||||
?.filter((rt: any) => rt[`${entity}Id`] === entityId)
|
||||
|
|
@ -112,7 +112,6 @@ export default OakPage({
|
|||
data: {
|
||||
show: false,
|
||||
searchValue: '',
|
||||
deleteIndex: '',
|
||||
editableRowKeys: [] as string[],
|
||||
btnItems: [
|
||||
{
|
||||
|
|
@ -144,18 +143,17 @@ export default OakPage({
|
|||
}
|
||||
},
|
||||
goUpsert() {
|
||||
const { entity, entityId, relations } = this.props;
|
||||
this.navigateTo(
|
||||
{
|
||||
url: '/userRelation/upsert',
|
||||
entity,
|
||||
entityId,
|
||||
relations,
|
||||
},
|
||||
{
|
||||
relations,
|
||||
}
|
||||
);
|
||||
const { entity, entityId, relations } = this.props;
|
||||
this.navigateTo(
|
||||
{
|
||||
url: '/userRelation/upsert',
|
||||
entity,
|
||||
entityId,
|
||||
},
|
||||
{
|
||||
relations,
|
||||
}
|
||||
);
|
||||
},
|
||||
goUserEntityGrantWithGrant() {
|
||||
const { entity, entityId, relations } = this.props;
|
||||
|
|
@ -275,7 +273,9 @@ export default OakPage({
|
|||
const { entity, entityId } = this.props;
|
||||
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) {
|
||||
Object.keys(current.editedRow).forEach((ele) => {
|
||||
if (ele === 'relations') {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
|
||||
import {
|
||||
Table,
|
||||
Input,
|
||||
|
|
@ -7,8 +8,8 @@ import {
|
|||
Button,
|
||||
Avatar,
|
||||
Space,
|
||||
Tag
|
||||
} from 'tdesign-react';
|
||||
Tag,
|
||||
} from 'antd';
|
||||
import PageHeader from '../../../components/common/pageHeader';
|
||||
import Style from './web.module.less';
|
||||
|
||||
|
|
@ -24,217 +25,189 @@ export default function render(this: any) {
|
|||
return (
|
||||
<PageHeader title="人员列表">
|
||||
<div className={Style.container}>
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Button
|
||||
shape="rectangle"
|
||||
size="medium"
|
||||
type="button"
|
||||
variant="base"
|
||||
onClick={() => this.goUpsert()}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<Button
|
||||
shape="rectangle"
|
||||
size="medium"
|
||||
type="button"
|
||||
variant="base"
|
||||
onClick={() => this.goUserEntityGrantWithGrant()}
|
||||
>
|
||||
二维码分享
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
<Table
|
||||
loading={oakLoading}
|
||||
ref={this.tableRef}
|
||||
rowKey="id"
|
||||
editableRowKeys={editableRowKeys}
|
||||
onRowEdit={(params) => this.onRowEdit(params)}
|
||||
onRowValidate={(params) => this.onRowValidate(params)}
|
||||
columns={[
|
||||
{
|
||||
width: 100,
|
||||
colKey: 'index',
|
||||
title: '序号',
|
||||
cell: ({ rowIndex }) => rowIndex + 1,
|
||||
},
|
||||
{
|
||||
colKey: 'avatar',
|
||||
title: '头像',
|
||||
cell: ({ row, rowIndex, col, colIndex }) => {
|
||||
const { avatar } = row;
|
||||
return avatar ? (
|
||||
<Avatar
|
||||
hideOnLoadFailed={false}
|
||||
image={avatar}
|
||||
shape="circle"
|
||||
/>
|
||||
) : (
|
||||
<span>未设置</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
colKey: 'name',
|
||||
title: '姓名',
|
||||
edit: {
|
||||
component: Input,
|
||||
props: {
|
||||
clearable: true,
|
||||
autofocus: true,
|
||||
autoWidth: true,
|
||||
},
|
||||
rules: [
|
||||
{ required: true, message: '不能为空' },
|
||||
],
|
||||
showEditIcon: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
colKey: 'nickname',
|
||||
title: '昵称',
|
||||
edit: {
|
||||
component: Input,
|
||||
props: {
|
||||
clearable: true,
|
||||
autofocus: true,
|
||||
autoWidth: true,
|
||||
},
|
||||
rules: [
|
||||
{ required: true, message: '不能为空' },
|
||||
],
|
||||
showEditIcon: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
colKey: 'mobile',
|
||||
title: '手机号',
|
||||
},
|
||||
{
|
||||
colKey: 'relations',
|
||||
title: '权限',
|
||||
cell: ({ row, rowIndex, col, colIndex }) => {
|
||||
return (
|
||||
<Space>
|
||||
{row.relations?.map(
|
||||
(ele: string, index: number) => (
|
||||
<Tag key={index}>
|
||||
{t(entity + ':r.' + ele)}
|
||||
</Tag>
|
||||
)
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
|
||||
edit: {
|
||||
component: Select,
|
||||
// props, 透传全部属性到 Select 组件
|
||||
// props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动
|
||||
props: () => {
|
||||
return {
|
||||
multiple: true,
|
||||
minCollapsedNum: 1,
|
||||
autoWidth: true,
|
||||
options:
|
||||
relationArr &&
|
||||
relationArr.map(
|
||||
(
|
||||
ele: any,
|
||||
index: number
|
||||
) => ({
|
||||
value: ele,
|
||||
label: t(
|
||||
entity + ':r.' + ele
|
||||
),
|
||||
})
|
||||
),
|
||||
};
|
||||
},
|
||||
showEditIcon: false,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请至少选择一个权限',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
colKey: 'operate',
|
||||
cell: ({ row }) => {
|
||||
const editable = editableRowKeys.includes(
|
||||
row.id
|
||||
);
|
||||
return (
|
||||
<Space>
|
||||
<Button
|
||||
theme="primary"
|
||||
variant="text"
|
||||
onClick={(e) =>
|
||||
this.goDetail(row.id)
|
||||
}
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
{!editable && (
|
||||
<Button
|
||||
theme="primary"
|
||||
variant="text"
|
||||
data-id={row.id}
|
||||
onClick={(e) =>
|
||||
this.onEdit(e)
|
||||
}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
)}
|
||||
{editable && (
|
||||
<Button
|
||||
theme="primary"
|
||||
variant="text"
|
||||
data-id={row.id}
|
||||
onClick={(e) =>
|
||||
this.onSave(e)
|
||||
}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
)}
|
||||
{editable && (
|
||||
<Button
|
||||
theme="primary"
|
||||
variant="text"
|
||||
data-id={row.id}
|
||||
onClick={(e) =>
|
||||
this.onCancel(e)
|
||||
}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
data={users}
|
||||
pagination={{
|
||||
total,
|
||||
pageSize,
|
||||
current: currentPage,
|
||||
onPageSizeChange: (ps: number) => {
|
||||
this.setPageSize(ps);
|
||||
},
|
||||
onCurrentChange: (current) => {
|
||||
this.setCurrentPage(current);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => this.goUpsert()}>
|
||||
添加
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => this.goUserEntityGrantWithGrant()}
|
||||
>
|
||||
二维码分享
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
<Table
|
||||
loading={oakLoading}
|
||||
ref={this.tableRef}
|
||||
rowKey="id"
|
||||
editableRowKeys={editableRowKeys}
|
||||
onRowEdit={(params) => this.onRowEdit(params)}
|
||||
onRowValidate={(params) => this.onRowValidate(params)}
|
||||
columns={[
|
||||
{
|
||||
width: 100,
|
||||
dataIndex: 'index',
|
||||
title: '序号',
|
||||
render: (value, record, index) => index + 1,
|
||||
},
|
||||
{
|
||||
dataIndex: 'avatar',
|
||||
title: '头像',
|
||||
render: (value, record, index) => {
|
||||
return value ? (
|
||||
<Avatar src={value} shape="circle" />
|
||||
) : (
|
||||
<span>未设置</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '姓名',
|
||||
// edit: {
|
||||
// component: Input,
|
||||
// props: {
|
||||
// clearable: true,
|
||||
// autofocus: true,
|
||||
// autoWidth: true,
|
||||
// },
|
||||
// rules: [
|
||||
// { required: true, message: '不能为空' },
|
||||
// ],
|
||||
// showEditIcon: false,
|
||||
// },
|
||||
},
|
||||
{
|
||||
dataIndex: 'nickname',
|
||||
title: '昵称',
|
||||
// edit: {
|
||||
// component: Input,
|
||||
// props: {
|
||||
// clearable: true,
|
||||
// autofocus: true,
|
||||
// autoWidth: true,
|
||||
// },
|
||||
// rules: [
|
||||
// { required: true, message: '不能为空' },
|
||||
// ],
|
||||
// showEditIcon: false,
|
||||
// },
|
||||
},
|
||||
{
|
||||
dataIndex: 'mobile',
|
||||
title: '手机号',
|
||||
},
|
||||
{
|
||||
dataIndex: 'relations',
|
||||
title: '权限',
|
||||
render: (value, record, index) => {
|
||||
return (
|
||||
<Space>
|
||||
{record.relations?.map(
|
||||
(ele: string, index: number) => (
|
||||
<Tag key={index}>
|
||||
{t(entity + ':r.' + ele)}
|
||||
</Tag>
|
||||
)
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
|
||||
// edit: {
|
||||
// component: Select,
|
||||
// // props, 透传全部属性到 Select 组件
|
||||
// // props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动
|
||||
// props: () => {
|
||||
// return {
|
||||
// multiple: true,
|
||||
// minCollapsedNum: 1,
|
||||
// autoWidth: true,
|
||||
// options:
|
||||
// relationArr &&
|
||||
// relationArr.map(
|
||||
// (
|
||||
// ele: any,
|
||||
// index: number
|
||||
// ) => ({
|
||||
// value: ele,
|
||||
// label: t(
|
||||
// entity + ':r.' + ele
|
||||
// ),
|
||||
// })
|
||||
// ),
|
||||
// };
|
||||
// },
|
||||
// showEditIcon: false,
|
||||
// rules: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请至少选择一个权限',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
render: (value, record, index) => {
|
||||
const editable = editableRowKeys.includes(
|
||||
record.id
|
||||
);
|
||||
return (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={(e) =>
|
||||
this.goDetail(record.id)
|
||||
}
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
{!editable && (
|
||||
<Button
|
||||
type="link"
|
||||
onClick={(e) => this.onEdit(e)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
)}
|
||||
{editable && (
|
||||
<Button
|
||||
type="link"
|
||||
variant="text"
|
||||
onClick={(e) => this.onSave(e)}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
)}
|
||||
{editable && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={(e) => this.onCancel(e)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
data={users}
|
||||
pagination={{
|
||||
total,
|
||||
pageSize,
|
||||
current: currentPage,
|
||||
onShowSizeChange: (current: number, size: number) => {
|
||||
this.setPageSize(current);
|
||||
},
|
||||
onChange: (page: number, pageSize: number) => {
|
||||
this.setCurrentPage(page);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</PageHeader>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,78 +1,75 @@
|
|||
import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
|
||||
|
||||
export default OakPage(
|
||||
{
|
||||
entity: 'user',
|
||||
projection: async ({ props }) => {
|
||||
const { entity } = props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
return {
|
||||
id: 1,
|
||||
[`user${entityStr}$user`]: {
|
||||
$entity: `user${entityStr}`,
|
||||
data: {
|
||||
id: 1,
|
||||
userId: 1,
|
||||
[`${entity}Id`]: 1,
|
||||
relation: 1,
|
||||
},
|
||||
filter: {
|
||||
[`${entity}Id`]: props.entityId!,
|
||||
}
|
||||
export default OakComponent({
|
||||
entity: 'user',
|
||||
projection: async ({ props }) => {
|
||||
const { entity } = props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
return {
|
||||
id: 1,
|
||||
[`user${entityStr}$user`]: {
|
||||
$entity: `user${entityStr}`,
|
||||
data: {
|
||||
id: 1,
|
||||
userId: 1,
|
||||
[`${entity}Id`]: 1,
|
||||
relation: 1,
|
||||
},
|
||||
filter: {
|
||||
[`${entity}Id`]: props.entityId!,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: [
|
||||
// 由调用者注入oakFilter
|
||||
],
|
||||
isList: true,
|
||||
formData: async function ({ data: users, props, features }) {
|
||||
const { entity, relations } = props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
const relationMap = new Map();
|
||||
const relationArr: Array<Array<string | Array<string>>> = [];
|
||||
const userRelations: Array<any> = [];
|
||||
//构建map对象
|
||||
relations?.forEach((ele: string) => {
|
||||
relationMap.set(ele, []);
|
||||
});
|
||||
users?.forEach((ele: any) => {
|
||||
userRelations.push(...ele[`user${entityStr}$user`]);
|
||||
});
|
||||
userRelations.forEach(ele => {
|
||||
const userIds = relationMap.get(ele.relation) as Array<string>;
|
||||
userIds.push(ele.userId);
|
||||
})
|
||||
relationMap.forEach((value, key) => {
|
||||
relationArr.push([key, value])
|
||||
})
|
||||
return {
|
||||
relationArr,
|
||||
relationMap
|
||||
};
|
||||
},
|
||||
properties: {
|
||||
entity: String,
|
||||
entityId: String,
|
||||
relations: Array,
|
||||
},
|
||||
data: {
|
||||
show: false,
|
||||
},
|
||||
lifetimes: {},
|
||||
methods: {
|
||||
handleClick(e: any) {
|
||||
const { entity, entityId } = this.props;
|
||||
const { ids, relation } = e.currentTarget.dataset;
|
||||
this.navigateTo({
|
||||
url: '/userRelation/list',
|
||||
entity,
|
||||
userIds: ids,
|
||||
relation,
|
||||
entityId,
|
||||
})
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
filters: [
|
||||
// 由调用者注入oakFilter
|
||||
],
|
||||
isList: true,
|
||||
formData: async function ({ data: users, props, features }) {
|
||||
const { entity, relations } = props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
const relationMap = new Map();
|
||||
const relationArr: Array<Array<string | Array<string>>> = [];
|
||||
const userRelations: Array<any> = [];
|
||||
//构建map对象
|
||||
relations?.forEach((ele: string) => {
|
||||
relationMap.set(ele, []);
|
||||
});
|
||||
users?.forEach((ele: any) => {
|
||||
userRelations.push(...ele[`user${entityStr}$user`]);
|
||||
});
|
||||
userRelations.forEach((ele) => {
|
||||
const userIds = relationMap.get(ele.relation) as Array<string>;
|
||||
userIds.push(ele.userId);
|
||||
});
|
||||
relationMap.forEach((value, key) => {
|
||||
relationArr.push([key, value]);
|
||||
});
|
||||
return {
|
||||
relationArr,
|
||||
relationMap,
|
||||
};
|
||||
},
|
||||
properties: {
|
||||
entity: String,
|
||||
entityId: String,
|
||||
relations: Array,
|
||||
},
|
||||
data: {
|
||||
show: false,
|
||||
},
|
||||
lifetimes: {},
|
||||
methods: {
|
||||
handleClick(e: any) {
|
||||
const { entity, entityId } = this.props;
|
||||
const { ids, relation } = e.currentTarget.dataset;
|
||||
this.navigateTo({
|
||||
url: '/userRelation/list',
|
||||
entity,
|
||||
userIds: ids,
|
||||
relation,
|
||||
entityId,
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,53 +1,63 @@
|
|||
import { firstLetterUpperCase } from "oak-domain/lib/utils/string";
|
||||
|
||||
export default OakPage(
|
||||
{
|
||||
isList: true,
|
||||
formData: async function ({ data, props }) {
|
||||
const { nameProperty } = props;
|
||||
const { oakEntity } = this.props;
|
||||
const entityStr = firstLetterUpperCase(oakEntity);
|
||||
export default OakComponent({
|
||||
isList: true,
|
||||
formData: async function ({ data, props }) {
|
||||
const { nameProperty } = props;
|
||||
const { oakEntity } = this.props;
|
||||
const entityStr = firstLetterUpperCase(oakEntity);
|
||||
|
||||
const rows = data?.map(
|
||||
(ele) => {
|
||||
const { id, [nameProperty!]: name, [`user${entityStr}$${oakEntity}`]: userEntity } = ele as any;
|
||||
const relations = userEntity?.map((ele: any) => ele.relation);
|
||||
const hasRelation: boolean[] = props.relations!.map(ele2 => relations.includes(ele2));
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
hasRelation,
|
||||
};
|
||||
}
|
||||
const rows = data?.map((ele) => {
|
||||
const {
|
||||
id,
|
||||
[nameProperty!]: name,
|
||||
[`user${entityStr}$${oakEntity}`]: userEntity,
|
||||
} = ele as any;
|
||||
const relations = userEntity?.map((ele: any) => ele.relation);
|
||||
const hasRelation: boolean[] = props.relations!.map((ele2) =>
|
||||
relations.includes(ele2)
|
||||
);
|
||||
return {
|
||||
rows,
|
||||
id,
|
||||
name,
|
||||
hasRelation,
|
||||
};
|
||||
},
|
||||
properties: {
|
||||
nameProperty: String,
|
||||
user: Object,
|
||||
relations: Array,
|
||||
},
|
||||
methods: {
|
||||
onChange(input: any) {
|
||||
const { dataset, checked } = this.resolveInput(input, ['checked']);
|
||||
const { id: entityId, relation, index } = dataset as {
|
||||
id: string,
|
||||
relation: string,
|
||||
index: number;
|
||||
};
|
||||
const { oakEntity, user } = this.props;
|
||||
const entityStr = firstLetterUpperCase(oakEntity!);
|
||||
this.toggleNode({
|
||||
});
|
||||
return {
|
||||
rows,
|
||||
};
|
||||
},
|
||||
properties: {
|
||||
nameProperty: String,
|
||||
user: Object,
|
||||
relations: Array,
|
||||
},
|
||||
methods: {
|
||||
onChange(input: any) {
|
||||
const { dataset, checked } = this.resolveInput(input, ['checked']);
|
||||
const {
|
||||
id: entityId,
|
||||
relation,
|
||||
index,
|
||||
} = dataset as {
|
||||
id: string;
|
||||
relation: string;
|
||||
index: number;
|
||||
};
|
||||
const { oakEntity, user } = this.props;
|
||||
const entityStr = firstLetterUpperCase(oakEntity!);
|
||||
this.toggleNode(
|
||||
{
|
||||
relation,
|
||||
userId: user.id,
|
||||
}, checked, `${index}.user${entityStr}$${oakEntity}`)
|
||||
},
|
||||
async confirm() {
|
||||
await this.execute('create');
|
||||
await this.navigateBack();
|
||||
}
|
||||
},
|
||||
checked,
|
||||
`${index}.user${entityStr}$${oakEntity}`
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
async confirm() {
|
||||
await this.execute('create');
|
||||
await this.navigateBack();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
|
||||
import { composeFileUrl } from '../../../utils/extraFile';
|
||||
|
||||
export default OakPage({
|
||||
export default OakComponent({
|
||||
entity: 'user',
|
||||
projection: async ({ props }) => {
|
||||
const { entity, relations, entityId } = props;
|
||||
|
|
@ -62,7 +62,9 @@ export default OakPage({
|
|||
formData: async function ({ data: users, props, features }) {
|
||||
const { entity } = props;
|
||||
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 {
|
||||
users: users?.map((ele: any) => {
|
||||
|
|
|
|||
|
|
@ -1,101 +1,101 @@
|
|||
import { firstLetterUpperCase } from "oak-domain/lib/utils/string";
|
||||
|
||||
export default OakPage(
|
||||
{
|
||||
entity: 'user',
|
||||
projection: async ({ props }) => {
|
||||
const { entity, entityId } = props;
|
||||
export default OakComponent({
|
||||
entity: 'user',
|
||||
projection: async ({ props }) => {
|
||||
const { entity, entityId } = props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
return {
|
||||
id: 1,
|
||||
name: 1,
|
||||
password: 1,
|
||||
mobile$user: {
|
||||
$entity: 'mobile',
|
||||
data: {
|
||||
id: 1,
|
||||
userId: 1,
|
||||
mobile: 1,
|
||||
},
|
||||
},
|
||||
[`user${entityStr}$user`]: {
|
||||
$entity: `user${entityStr}`,
|
||||
data: {
|
||||
id: 1,
|
||||
userId: 1,
|
||||
[`${entity}Id`]: 1,
|
||||
relation: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
isList: false,
|
||||
formData: async ({ data: user, props }) => {
|
||||
const { entity, relations } = props;
|
||||
const { name, mobile$user, password } = user || {};
|
||||
const mobile = mobile$user && mobile$user[0]?.mobile;
|
||||
return {
|
||||
name,
|
||||
password,
|
||||
mobile,
|
||||
};
|
||||
},
|
||||
properties: {
|
||||
entity: String,
|
||||
entityId: String,
|
||||
relations: Array,
|
||||
},
|
||||
data: {
|
||||
mobile: '',
|
||||
relationArr: [] as string[],
|
||||
},
|
||||
lifetimes: {
|
||||
ready() {
|
||||
if (!this.props.oakId) {
|
||||
this.setUpdateData('password', '12345678');
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setValue(input: any) {
|
||||
const { dataset, value, Context } = this.resolveInput(input);
|
||||
this.setUpdateData(dataset!.attr, value);
|
||||
},
|
||||
onMobileChange(event: any) {
|
||||
const { value } = event.detail;
|
||||
this.setState({
|
||||
mobile: value,
|
||||
});
|
||||
this.setUpdateData('mobile$user.0.mobile', value);
|
||||
},
|
||||
onCheckBoxChange(event: any) {
|
||||
const { value } = event.detail as { value: string[] };
|
||||
this.setRelationValue(value);
|
||||
},
|
||||
setRelationValue(value: string[]) {
|
||||
const { entity, entityId, relations } = this.props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
return {
|
||||
id: 1,
|
||||
name: 1,
|
||||
password: 1,
|
||||
mobile$user: {
|
||||
$entity: 'mobile',
|
||||
data: {
|
||||
id: 1,
|
||||
userId: 1,
|
||||
mobile: 1,
|
||||
},
|
||||
},
|
||||
[`user${entityStr}$user`]: {
|
||||
$entity: `user${entityStr}`,
|
||||
data: {
|
||||
id: 1,
|
||||
userId: 1,
|
||||
[`${entity}Id`]: 1,
|
||||
relation: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
const { relationArr } = this.state;
|
||||
// 由于是根据index 进行删除, 所以将之前设置的node从头开始删除
|
||||
relationArr.forEach((ele, index) => {
|
||||
this.removeNode(`user${entityStr}$user`, '0');
|
||||
});
|
||||
value.forEach((ele, index) => {
|
||||
this.setUpdateData(
|
||||
`user${entityStr}$user.${index}.${entity}Id`,
|
||||
entityId
|
||||
);
|
||||
this.setUpdateData(
|
||||
`user${entityStr}$user.${index}.relation`,
|
||||
ele
|
||||
);
|
||||
});
|
||||
this.setState({
|
||||
relationArr: value,
|
||||
});
|
||||
},
|
||||
isList: false,
|
||||
formData: async ({ data: user, props }) => {
|
||||
const { entity, relations } = props;
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
mobile$user,
|
||||
password,
|
||||
} = user || {};
|
||||
const mobile = mobile$user && mobile$user[0]?.mobile;
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
mobile,
|
||||
password,
|
||||
};
|
||||
async onConfirm() {
|
||||
await this.execute();
|
||||
this.navigateBack();
|
||||
},
|
||||
properties: {
|
||||
entity: String,
|
||||
entityId: String,
|
||||
relations: Array,
|
||||
},
|
||||
data: {
|
||||
mobile: '',
|
||||
relationArr: [] as string[],
|
||||
},
|
||||
methods: {
|
||||
async onLoad() {
|
||||
if (!this.props.oakId) {
|
||||
this.setUpdateData('password', '12345678');
|
||||
}
|
||||
},
|
||||
setValue(input: any) {
|
||||
const { dataset, value, Context } = this.resolveInput(input);
|
||||
this.setUpdateData(dataset!.attr, value);
|
||||
},
|
||||
onMobileChange(event: any) {
|
||||
const { value } = event.detail;
|
||||
this.setState({
|
||||
mobile: value,
|
||||
})
|
||||
this.setUpdateData('mobile$user.0.mobile', value);
|
||||
},
|
||||
onCheckBoxChange(event: any) {
|
||||
const { value } = event.detail as { value: string[] };
|
||||
this.setRelationValue(value);
|
||||
},
|
||||
setRelationValue(value: string[]) {
|
||||
const { entity, entityId, relations } = this.props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
const { relationArr } = this.state;
|
||||
// 由于是根据index 进行删除, 所以将之前设置的node从头开始删除
|
||||
relationArr.forEach((ele, index) => {
|
||||
this.removeNode(`user${entityStr}$user`, '0');
|
||||
})
|
||||
value.forEach((ele, index) => {
|
||||
this.setUpdateData(`user${entityStr}$user.${index}.${entity}Id`, entityId);
|
||||
this.setUpdateData(`user${entityStr}$user.${index}.relation`, ele);
|
||||
})
|
||||
this.setState({
|
||||
relationArr: value,
|
||||
})
|
||||
},
|
||||
async onConfirm() {
|
||||
await this.execute('create');
|
||||
this.navigateBack();
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,15 +1,7 @@
|
|||
import React, { ReactElement } from 'react';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Row,
|
||||
Col,
|
||||
Checkbox,
|
||||
Button,
|
||||
} from 'tdesign-react';
|
||||
import React from 'react';
|
||||
import { Form, Input, Checkbox, Button, Space } from 'antd';
|
||||
import PageHeader from '../../../components/common/pageHeader';
|
||||
import Style from './web.module.less';
|
||||
const { FormItem } = Form;
|
||||
|
||||
export default function render(this: any) {
|
||||
const { relations, entity } = this.props;
|
||||
|
|
@ -21,147 +13,125 @@ export default function render(this: any) {
|
|||
return (
|
||||
<PageHeader showBack={true} title="添加权限">
|
||||
<div className={Style.container}>
|
||||
<div className={Style.formContainer}>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Form
|
||||
colon={false}
|
||||
labelAlign="right"
|
||||
labelWidth="100px"
|
||||
layout="vertical"
|
||||
preventSubmitDefault
|
||||
resetType="empty"
|
||||
showErrorMessage
|
||||
submitWithWarningMessage={false}
|
||||
<Form colon labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
|
||||
<Form.Item
|
||||
label="姓名"
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '姓名不能为空',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
onChange={(e) => {
|
||||
this.setUpdateData('name', e.target.value);
|
||||
}}
|
||||
value={name}
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="手机号码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '手机号不能为空',
|
||||
},
|
||||
{
|
||||
min: 11,
|
||||
message: '请输入11位手机号',
|
||||
},
|
||||
{
|
||||
max: 11,
|
||||
message: '请输入11位手机号',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
maxLength={11}
|
||||
value={mobile}
|
||||
onChange={(e) => {
|
||||
const strValue = e.target.value;
|
||||
this.setUpdateData(
|
||||
'mobile$user.0.mobile',
|
||||
strValue.replace(/[^\d\-\d]/g, '')
|
||||
);
|
||||
}}
|
||||
placeholder="请输入手机号码"
|
||||
type="tel"
|
||||
/>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="密码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '密码不能为空',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
this.setUpdateData(
|
||||
'password',
|
||||
e.target.value
|
||||
);
|
||||
}}
|
||||
placeholder="不少于八位"
|
||||
/>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="权限"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请至少选择一个权限',
|
||||
},
|
||||
]}
|
||||
name="relation"
|
||||
>
|
||||
<>
|
||||
<Checkbox.Group
|
||||
value={relationArr}
|
||||
onChange={(value) => {
|
||||
this.setRelationValue(value);
|
||||
}}
|
||||
options={relationArr2.map((ele) => ({
|
||||
value: ele,
|
||||
label:
|
||||
(this.t &&
|
||||
this.t(entity + ':r.' + ele)) ||
|
||||
ele,
|
||||
}))}
|
||||
></Checkbox.Group>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ offset: 4 }}>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
onClick={() => {
|
||||
this.onConfirm();
|
||||
}}
|
||||
>
|
||||
<FormItem
|
||||
label="姓名"
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '姓名不能为空',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
onChange={(value, context) => {
|
||||
this.setUpdateData('name', value);
|
||||
}}
|
||||
value={name}
|
||||
align="left"
|
||||
placeholder="请输入内容"
|
||||
type="text"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="手机号码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '手机号不能为空',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
min: 11,
|
||||
message: '请输入11位手机号',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
max: 11,
|
||||
message: '请输入11位手机号',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
maxlength={11}
|
||||
value={mobile}
|
||||
onChange={(value, context) => {
|
||||
const strValue = String(value);
|
||||
this.setUpdateData(
|
||||
'mobile$user.0.mobile',
|
||||
strValue.replace(/[^\d\-\d]/g, '')
|
||||
);
|
||||
}}
|
||||
align="left"
|
||||
placeholder="请输入内容"
|
||||
size="medium"
|
||||
type="tel"
|
||||
/>
|
||||
</>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
initialData="12345678"
|
||||
label="密码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '密码不能为空',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
value={password}
|
||||
onChange={(value) => {
|
||||
this.setUpdateData('password', value);
|
||||
}}
|
||||
align="left"
|
||||
placeholder="不少于八位"
|
||||
showClearIconOnEmpty={false}
|
||||
size="medium"
|
||||
status="default"
|
||||
type="text"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="权限"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请至少选择一个权限',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Checkbox.Group
|
||||
value={relationArr}
|
||||
onChange={(value) => {
|
||||
this.setRelationValue(value);
|
||||
}}
|
||||
options={relationArr2.map((ele) => ({
|
||||
value: ele,
|
||||
label:
|
||||
(this.t &&
|
||||
this.t(entity + ':r.' + ele)) ||
|
||||
ele,
|
||||
}))}
|
||||
></Checkbox.Group>
|
||||
</FormItem>
|
||||
<FormItem style={{ marginLeft: 100 }}>
|
||||
<Button
|
||||
theme="primary"
|
||||
type="submit"
|
||||
style={{ marginRight: 10 }}
|
||||
onClick={() => {
|
||||
this.onConfirm();
|
||||
}}
|
||||
>
|
||||
提交
|
||||
</Button>
|
||||
<Button theme="default" type="reset">
|
||||
重置
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
提交
|
||||
</Button>
|
||||
<Button htmlType="reset">重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</PageHeader>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,145 +1,131 @@
|
|||
import React from 'react';
|
||||
import { Form, Input, Row, Col, Checkbox, Button } from 'tdesign-react';
|
||||
const { FormItem } = Form;
|
||||
import Style from './mobile.module.less';
|
||||
import { Form, Input, Checkbox, Button, Space } from 'antd';
|
||||
import Style from './web.module.less';
|
||||
|
||||
export default function render(this: any) {
|
||||
const { t } = this;
|
||||
const { relations, entity } = this.props;
|
||||
const { name, mobile, password, relationArr } = this.state;
|
||||
const relations2 =
|
||||
const relationArr2: string[] =
|
||||
typeof relations === 'object'
|
||||
? relations
|
||||
: relations && JSON.parse(relations);
|
||||
return (
|
||||
<div className={Style.container}>
|
||||
<Row gutter={16}>
|
||||
<Col xs={12} sm={4}>
|
||||
<Form
|
||||
colon={false}
|
||||
labelAlign="right"
|
||||
labelWidth="100px"
|
||||
layout="vertical"
|
||||
preventSubmitDefault
|
||||
resetType="empty"
|
||||
showErrorMessage
|
||||
submitWithWarningMessage={false}
|
||||
>
|
||||
<FormItem
|
||||
label="姓名"
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '姓名不能为空',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
<Form colon labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
|
||||
<Form.Item
|
||||
label="姓名"
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '姓名不能为空',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
onChange={(e) => {
|
||||
this.setUpdateData('name', e.target.value);
|
||||
}}
|
||||
value={name}
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="手机号码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '手机号不能为空',
|
||||
},
|
||||
{
|
||||
min: 11,
|
||||
message: '请输入11位手机号',
|
||||
},
|
||||
{
|
||||
max: 11,
|
||||
message: '请输入11位手机号',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
maxLength={11}
|
||||
value={mobile}
|
||||
onChange={(e) => {
|
||||
const strValue = e.target.value;
|
||||
this.setUpdateData(
|
||||
'mobile$user.0.mobile',
|
||||
strValue.replace(/[^\d\-\d]/g, '')
|
||||
);
|
||||
}}
|
||||
placeholder="请输入手机号码"
|
||||
type="tel"
|
||||
/>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="密码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '密码不能为空',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
this.setUpdateData('password', e.target.value);
|
||||
}}
|
||||
placeholder="不少于八位"
|
||||
/>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="权限"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请至少选择一个权限',
|
||||
},
|
||||
]}
|
||||
name="relation"
|
||||
>
|
||||
<>
|
||||
<Checkbox.Group
|
||||
value={relationArr}
|
||||
onChange={(value) => {
|
||||
this.setRelationValue(value);
|
||||
}}
|
||||
options={relationArr2.map((ele) => ({
|
||||
value: ele,
|
||||
label:
|
||||
(this.t && this.t(entity + ':r.' + ele)) ||
|
||||
ele,
|
||||
}))}
|
||||
></Checkbox.Group>
|
||||
</>
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ offset: 4 }}>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
onClick={() => {
|
||||
this.onConfirm();
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
onChange={(value, context) => {
|
||||
this.setUpdateData('name', value);
|
||||
}}
|
||||
value={name}
|
||||
align="left"
|
||||
placeholder="请输入内容"
|
||||
type="text"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="手机号码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '手机号不能为空',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
min: 11,
|
||||
message: '请输入11位手机号',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
max: 11,
|
||||
message: '请输入11位手机号',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
onChange={(value, context) => {
|
||||
this.setUpdateData(
|
||||
'mobile$user.0.mobile',
|
||||
value
|
||||
);
|
||||
}}
|
||||
value={mobile}
|
||||
align="left"
|
||||
placeholder="请输入内容"
|
||||
size="medium"
|
||||
type="text"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
initialData="123456"
|
||||
label="密码"
|
||||
name="mobile"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '密码不能为空',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
value={password}
|
||||
align="left"
|
||||
placeholder="请输入内容"
|
||||
showClearIconOnEmpty={false}
|
||||
size="medium"
|
||||
status="default"
|
||||
type="text"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="权限"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请至少选择一个权限',
|
||||
type: 'error',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Checkbox.Group
|
||||
value={relationArr}
|
||||
onChange={(value) => {
|
||||
this.setRelationValue(value);
|
||||
}}
|
||||
options={relations2.map((ele: string) => ({
|
||||
value: ele,
|
||||
label: t(entity + ':r.' + ele),
|
||||
}))}
|
||||
></Checkbox.Group>
|
||||
</FormItem>
|
||||
<FormItem style={{ marginLeft: 100 }}>
|
||||
<Button
|
||||
theme="primary"
|
||||
type="submit"
|
||||
style={{ marginRight: 10 }}
|
||||
onClick={() => {
|
||||
this.onConfirm();
|
||||
}}
|
||||
>
|
||||
提交
|
||||
</Button>
|
||||
<Button type="reset">重置</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
提交
|
||||
</Button>
|
||||
<Button htmlType="reset">重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue