From 31d84d500c54dbc1de50da98b8be941060031a01 Mon Sep 17 00:00:00 2001 From: wkj <278599135@qq.com> Date: Tue, 25 Oct 2022 11:33:25 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/userRelation/list/index.ts | 40 +-- src/pages/userRelation/list/web.pc.tsx | 397 +++++++++++------------ src/pages/userRelation/manage/index.ts | 143 ++++---- src/pages/userRelation/onEntity/index.ts | 98 +++--- src/pages/userRelation/onUser/index.ts | 6 +- src/pages/userRelation/upsert/index.ts | 192 +++++------ src/pages/userRelation/upsert/web.pc.tsx | 270 +++++++-------- src/pages/userRelation/upsert/web.tsx | 248 +++++++------- 8 files changed, 666 insertions(+), 728 deletions(-) diff --git a/src/pages/userRelation/list/index.ts b/src/pages/userRelation/list/index.ts index ea770302e..7bae0bd0e 100644 --- a/src/pages/userRelation/list/index.ts +++ b/src/pages/userRelation/list/index.ts @@ -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') { diff --git a/src/pages/userRelation/list/web.pc.tsx b/src/pages/userRelation/list/web.pc.tsx index 186724a85..25f798541 100644 --- a/src/pages/userRelation/list/web.pc.tsx +++ b/src/pages/userRelation/list/web.pc.tsx @@ -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 (
- - - - - - - 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 ? ( - - ) : ( - 未设置 - ); - }, - }, - { - 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 ( - - {row.relations?.map( - (ele: string, index: number) => ( - - {t(entity + ':r.' + ele)} - - ) - )} - - ); - }, - - 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 ( - - - {!editable && ( - - )} - {editable && ( - - )} - {editable && ( - - )} - - ); - }, - }, - ]} - data={users} - pagination={{ - total, - pageSize, - current: currentPage, - onPageSizeChange: (ps: number) => { - this.setPageSize(ps); - }, - onCurrentChange: (current) => { - this.setCurrentPage(current); - }, - }} - /> + + + + +
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 ? ( + + ) : ( + 未设置 + ); + }, + }, + { + 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 ( + + {record.relations?.map( + (ele: string, index: number) => ( + + {t(entity + ':r.' + ele)} + + ) + )} + + ); + }, + + // 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 ( + + + {!editable && ( + + )} + {editable && ( + + )} + {editable && ( + + )} + + ); + }, + }, + ]} + data={users} + pagination={{ + total, + pageSize, + current: currentPage, + onShowSizeChange: (current: number, size: number) => { + this.setPageSize(current); + }, + onChange: (page: number, pageSize: number) => { + this.setCurrentPage(page); + }, + }} + /> ); diff --git a/src/pages/userRelation/manage/index.ts b/src/pages/userRelation/manage/index.ts index 4770321f1..b1149ebcb 100644 --- a/src/pages/userRelation/manage/index.ts +++ b/src/pages/userRelation/manage/index.ts @@ -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>> = []; - const userRelations: Array = []; - //构建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; - 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>> = []; + const userRelations: Array = []; + //构建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; + 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, + }); }, - } -); + }, +}); diff --git a/src/pages/userRelation/onEntity/index.ts b/src/pages/userRelation/onEntity/index.ts index 5c97ee65a..d2230b935 100644 --- a/src/pages/userRelation/onEntity/index.ts +++ b/src/pages/userRelation/onEntity/index.ts @@ -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(); + }, + }, +}); diff --git a/src/pages/userRelation/onUser/index.ts b/src/pages/userRelation/onUser/index.ts index 03daabe53..2d3757d11 100644 --- a/src/pages/userRelation/onUser/index.ts +++ b/src/pages/userRelation/onUser/index.ts @@ -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) => { diff --git a/src/pages/userRelation/upsert/index.ts b/src/pages/userRelation/upsert/index.ts index 23f49e18d..f4df9dab0 100644 --- a/src/pages/userRelation/upsert/index.ts +++ b/src/pages/userRelation/upsert/index.ts @@ -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(); - }, - }, - } -); + }, +}); diff --git a/src/pages/userRelation/upsert/web.pc.tsx b/src/pages/userRelation/upsert/web.pc.tsx index 7cb17e687..8dbf36374 100644 --- a/src/pages/userRelation/upsert/web.pc.tsx +++ b/src/pages/userRelation/upsert/web.pc.tsx @@ -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 (
-
- -
- + + <> + { + this.setUpdateData('name', e.target.value); + }} + value={name} + placeholder="请输入姓名" + /> + + + + <> + { + const strValue = e.target.value; + this.setUpdateData( + 'mobile$user.0.mobile', + strValue.replace(/[^\d\-\d]/g, '') + ); + }} + placeholder="请输入手机号码" + type="tel" + /> + + + + <> + { + this.setUpdateData( + 'password', + e.target.value + ); + }} + placeholder="不少于八位" + /> + + + + <> + { + this.setRelationValue(value); + }} + options={relationArr2.map((ele) => ({ + value: ele, + label: + (this.t && + this.t(entity + ':r.' + ele)) || + ele, + }))} + > + + + + + - - - - - - + 提交 + + + + + ); diff --git a/src/pages/userRelation/upsert/web.tsx b/src/pages/userRelation/upsert/web.tsx index 776e88c27..15a282604 100644 --- a/src/pages/userRelation/upsert/web.tsx +++ b/src/pages/userRelation/upsert/web.tsx @@ -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 (
- -
- - + + <> + { + this.setUpdateData('name', e.target.value); + }} + value={name} + placeholder="请输入姓名" + /> + + + + <> + { + const strValue = e.target.value; + this.setUpdateData( + 'mobile$user.0.mobile', + strValue.replace(/[^\d\-\d]/g, '') + ); + }} + placeholder="请输入手机号码" + type="tel" + /> + + + + <> + { + this.setUpdateData('password', e.target.value); + }} + placeholder="不少于八位" + /> + + + + <> + { + this.setRelationValue(value); + }} + options={relationArr2.map((ele) => ({ + value: ele, + label: + (this.t && this.t(entity + ':r.' + ele)) || + ele, + }))} + > + + + + + - - - - - + 提交 + + + + + ); }