'fix'
This commit is contained in:
梁朝伟
parent
28949787bc
commit
4966fc319d
|
|
@ -1,4 +1,6 @@
|
|||
import React from 'react';
|
||||
import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
|
||||
|
||||
import {
|
||||
Table,
|
||||
Input,
|
||||
|
|
@ -6,13 +8,14 @@ import {
|
|||
DatePicker,
|
||||
Button,
|
||||
Avatar,
|
||||
MessagePlugin,
|
||||
Tag,
|
||||
} from 'tdesign-react';
|
||||
|
||||
export default function render() {
|
||||
const { users = [], oakLoading } = this.state;
|
||||
console.log(this.tableRef);
|
||||
|
||||
// 当前示例包含：输入框、单选、多选、日期 等场景
|
||||
const { users = [], oakLoading, editableRowKeys = [], } = this.state;
|
||||
const { relations, entity, entityId } = this.props;
|
||||
const relationArr = relations && JSON.parse(relations);
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
|
|
@ -29,33 +32,114 @@ export default function render() {
|
|||
resizable
|
||||
bordered={false}
|
||||
ref={this.tableRef}
|
||||
rowKey="index"
|
||||
rowKey="id"
|
||||
editableRowKeys={editableRowKeys}
|
||||
onRowEdit={(params) => this.onRowEdit(params)}
|
||||
onRowValidate={(params) => this.onRowValidate(params)}
|
||||
columns={[
|
||||
{
|
||||
colKey: 'avatar',
|
||||
title: '头像',
|
||||
cell: ({ row, rowIndex, col, colIndex }) => {
|
||||
return (
|
||||
const { avatar } = row;
|
||||
return avatar ? (
|
||||
<Avatar
|
||||
hideOnLoadFailed={false}
|
||||
image="https://tdesign.gtimg.com/site/avatar.jpg"
|
||||
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 }) => row?.relations?.join('、'),
|
||||
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: this.t && this.t(entity + ':r.' + ele) || ele})),
|
||||
}
|
||||
},
|
||||
showEditIcon: false,
|
||||
rules: [
|
||||
{ required: true, message: '请至少选择一个权限' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
colKey: 'operate',
|
||||
cell: ({ row }) => {
|
||||
console.log(row);
|
||||
const editable = editableRowKeys.includes(row.id);
|
||||
return (
|
||||
<div className="table-operations">
|
||||
{!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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}
|
||||
]}
|
||||
data={users}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
|
||||
import { composeFileUrl } from '../../../../src/utils/extraFile';
|
||||
import React from '../../../utils/react';
|
||||
import MessagePlugin from '../../../utils/message';
|
||||
export default OakPage(
|
||||
{
|
||||
path: 'userRelation:list',
|
||||
|
|
@ -80,9 +81,10 @@ export default OakPage(
|
|||
const filter = await this.getFilterByName('name');
|
||||
return {
|
||||
users: users?.map((ele: any) => {
|
||||
const { mobile$user, extraFile$entity, [`user${entityStr}$user`]: userEntities } =
|
||||
const { mobile$user, extraFile$entity } =
|
||||
ele || {};
|
||||
const mobile = mobile$user && mobile$user[0]?.mobile;
|
||||
const relations = ele[`user${entityStr}$user`]?.map(ele => ele.relation);
|
||||
const avatar =
|
||||
extraFile$entity &&
|
||||
extraFile$entity[0] &&
|
||||
|
|
@ -90,8 +92,7 @@ export default OakPage(
|
|||
const user2 = Object.assign({}, ele, {
|
||||
mobile,
|
||||
avatar,
|
||||
relations: userEntities,
|
||||
hasRelation: userEntities.length > 0,
|
||||
relations,
|
||||
});
|
||||
return user2;
|
||||
}),
|
||||
|
|
@ -107,11 +108,14 @@ export default OakPage(
|
|||
show: false,
|
||||
searchValue: '',
|
||||
deleteIndex: '',
|
||||
editableRowKeys: [],
|
||||
},
|
||||
lifetimes: {
|
||||
created() {
|
||||
if (process.env.OAK_PLATFORM === 'web') {
|
||||
this.tableRef = React.createRef();
|
||||
this.editMap = {};
|
||||
this.currentSaveId = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -173,6 +177,83 @@ export default OakPage(
|
|||
async searchConfirm() {
|
||||
this.refresh();
|
||||
},
|
||||
//web table methods
|
||||
onEdit(e) {
|
||||
const { editableRowKeys } = this.state;
|
||||
|
||||
const { id } = e.currentTarget.dataset;
|
||||
if (!editableRowKeys.includes(id)) {
|
||||
this.setState({
|
||||
editableRowKeys: editableRowKeys.concat(id)
|
||||
})
|
||||
}
|
||||
},
|
||||
updateEditRowKey(id) {
|
||||
const { editableRowKeys } = this.state;
|
||||
const index = editableRowKeys.findIndex((t) => t === id);
|
||||
editableRowKeys.splice(index, 1);
|
||||
this.setState({
|
||||
editableRowKeys: [...editableRowKeys],
|
||||
})
|
||||
},
|
||||
onSave(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
this.currentSaveId = id;
|
||||
// 触发内部校验，而后在 onRowValidate 中接收异步校验结果
|
||||
this.tableRef.current.validateRowData(id);
|
||||
},
|
||||
onCancel(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
this.updateEditRowKey(id);
|
||||
this.tableRef.current.clearValidateData();
|
||||
},
|
||||
onRowValidate(params) {
|
||||
if (params.result.length) {
|
||||
const r = params.result[0];
|
||||
MessagePlugin.error(`${r.col.title} ${r.errorList[0].message}`);
|
||||
return;
|
||||
}
|
||||
// 如果是 table 的父组件主动触发校验
|
||||
if (params.trigger === 'parent' && !params.result.length) {
|
||||
const { users } = this.state;
|
||||
const { entity, entityId } = this.props;
|
||||
const entityStr = firstLetterUpperCase(entity!);
|
||||
|
||||
const current = this.editMap[this.currentSaveId];
|
||||
if (current) {
|
||||
Object.keys(current.editedRow).forEach(ele => {
|
||||
if (ele === 'relations') {
|
||||
const userRelations = users[current.rowIndex].relations;
|
||||
userRelations.forEach(ele2 => {
|
||||
if (!current.editedRow[ele].includes(ele2)) {
|
||||
this.toggleNode({relation: ele2, [`${entity}Id`]: entityId}, false, `${current.rowIndex}.user${entityStr}$user`)
|
||||
}
|
||||
})
|
||||
current.editedRow[ele].forEach(ele2 => {
|
||||
if (!userRelations.includes(ele2)) {
|
||||
this.toggleNode({relation: ele2, [`${entity}Id`]: entityId}, true, `${current.rowIndex}.user${entityStr}$user`)
|
||||
}
|
||||
})
|
||||
this.execute('grant');
|
||||
}
|
||||
else {
|
||||
this.setUpdateData(`${0}.${ele}`, current.editedRow[ele])
|
||||
this.execute('update')
|
||||
}
|
||||
})
|
||||
console.log(current);
|
||||
MessagePlugin.success('保存成功');
|
||||
}
|
||||
this.updateEditRowKey(this.currentSaveId);
|
||||
}
|
||||
},
|
||||
onRowEdit(params) {
|
||||
const { row, col, value } = params;
|
||||
this.editMap[row.id] = {
|
||||
...params,
|
||||
editedRow: { [col.colKey]: value },
|
||||
};
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue