62 lines
2.7 KiB
JavaScript
62 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import { List, Tag, Avatar, FloatingBubble } from 'antd-mobile';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import FilterPanel from 'oak-frontend-base/es/components/filterPanel';
|
|
import Style from './mobile.module.less';
|
|
export default function render(props) {
|
|
const { userArr, isRoot, oakFullpath } = props.data;
|
|
const { onCellClicked, t, gotoCreateUser } = props.methods;
|
|
return (<div className={Style.container}>
|
|
<div className={Style.filter}>
|
|
<FilterPanel entity="user" oakPath={oakFullpath} columns={[
|
|
{
|
|
attr: 'nickname',
|
|
op: '$includes',
|
|
},
|
|
{
|
|
attr: 'name',
|
|
op: '$includes',
|
|
},
|
|
{
|
|
attr: 'userState',
|
|
},
|
|
]}/>
|
|
</div>
|
|
<List>
|
|
{userArr?.map((ele, index) => {
|
|
return (<List.Item key={index} onClick={() => onCellClicked(ele.id)} prefix={<Avatar className={Style.avatar} src={ele.avatar}/>} title={<div>{ele.name || '--'}</div>} description={<div className={Style.description}>
|
|
<div className={Style.row}>
|
|
<span className={Style.label}>
|
|
{t('user:attr.nickname')}:
|
|
</span>
|
|
<span className={Style.value}>
|
|
{ele.nickname || '--'}
|
|
</span>
|
|
</div>
|
|
<div className={Style.row}>
|
|
<span className={Style.label}>
|
|
{t('mobile:name')}:
|
|
</span>
|
|
<span className={Style.value}>
|
|
{ele.mobile || '--'}
|
|
</span>
|
|
</div>
|
|
<Tag color={ele.userStateColor}>
|
|
{ele.userStateStr}
|
|
</Tag>
|
|
</div>}></List.Item>);
|
|
})}
|
|
</List>
|
|
|
|
{isRoot && (<FloatingBubble axis="x" magnetic="x" style={{
|
|
'--initial-position-bottom': '24px',
|
|
'--initial-position-right': '24px',
|
|
'--edge-distance': '24px',
|
|
}} onClick={() => {
|
|
gotoCreateUser();
|
|
}}>
|
|
<PlusOutlined />
|
|
</FloatingBubble>)}
|
|
</div>);
|
|
}
|