194 lines
7.4 KiB
TypeScript
194 lines
7.4 KiB
TypeScript
import React from 'react';
|
||
|
||
import {
|
||
Table,
|
||
Input,
|
||
Select,
|
||
Button,
|
||
Avatar,
|
||
Space,
|
||
Tag
|
||
} from 'tdesign-react';
|
||
|
||
export default function render() {
|
||
const { t } = this;
|
||
const { users = [], oakLoading, editableRowKeys = [] } = this.state;
|
||
const { relations, entity, entityId } = this.props;
|
||
const relationArr =
|
||
typeof relations === 'object'
|
||
? relations
|
||
: relations && JSON.parse(relations);
|
||
return (
|
||
<div>
|
||
<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}
|
||
resizable
|
||
bordered={false}
|
||
ref={this.tableRef}
|
||
rowKey="id"
|
||
editableRowKeys={editableRowKeys}
|
||
onRowEdit={(params) => this.onRowEdit(params)}
|
||
onRowValidate={(params) => this.onRowValidate(params)}
|
||
columns={[
|
||
{
|
||
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, index) => (
|
||
<Tag key={index}>
|
||
{t(entity + ':r.' + ele)}
|
||
</Tag>
|
||
))}
|
||
</Space>
|
||
);
|
||
},
|
||
|
||
edit: {
|
||
component: Select,
|
||
// props, 透传全部属性到 Select 组件
|
||
// props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动
|
||
props: ({ editedRow }) => {
|
||
return {
|
||
multiple: true,
|
||
minCollapsedNum: 1,
|
||
autoWidth: true,
|
||
options:
|
||
relationArr &&
|
||
relationArr.map((ele, index) => ({
|
||
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}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|