app-base-web
Version:
web development common base package.
653 lines (646 loc) • 18 kB
JavaScript
import React from 'react';
import { Layout, Table, Form, Row, Col, Button, Input, DatePicker, message } from 'antd';
import UtilModal from '../../../library/util-modal';
import UtilDic from '../../../library/util-dic';
import UtilDate from '../../../library/util-date';
import UtilString from '../../../library/util-string';
import api from '../../../library/util-axios';
import Moment from '../../../library/moment';
import Dic from '../../../library/dic';
import Select from '../../../library/select';
// 系统管理-个人信息
const title = "个人信息";
const url = "SysUser/";
class SysUserList extends React.Component {
constructor(props) {
super(props);
this.state = {
params: {
type: 1,
departmentId: "",
departmentName: ""
},
data: [],
pagination: {},
loading: false,
selected: [],//Table checked
//显藏控制
showView: false,
showEdit: false,
//values
values: {}
};
this.columns = [{
title: "序号",
width: 50,
fixed: "left",
render: (text, record, index) => { return index + 1 }
},
{
title: "状态",
dataIndex: "state",
width: 70,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{UtilDic.json("app", "会员状态")[text]}</a>)
}, {
title: "账号",
dataIndex: "code",
width: 120,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "姓名",
dataIndex: "name",
width: 120,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "部门",
dataIndex: "departmentName",
width: 150
},
{
title: "会员类型",
dataIndex: "type",
width: 80,
render: (text, record) => {
return UtilDic.json("system", "会员类型")[text]
}
},
{
title: "职务",
dataIndex: "position",
width: 100
},
{
title: "手机",
dataIndex: "tel",
width: 120
},
{
title: "邮箱",
dataIndex: "email",
width: 160
},
{
title: "性别",
dataIndex: "sex",
width: 50,
render: (text, record) => {
return UtilDic.json("system", "性别")[text]
}
}];
}
componentDidMount() {
this.onLoad(this.state.params);
}
/*** Table ***/
async onLoad(params) {
this.setState({ loading: true });
let rs = await api.get(url + "getList", params);
let pagination = {
pageSizeOptions: ["20", "100", "200", "500", "1000"],
pageSize: params.pageSize || 20,
defaultPageSize: params.pageSize || 20,
showSizeChanger: true,
showQuickJumper: true,
total: rs.total,
showTotal: (total) => { return `总记录 ${total} ` }
};
this.setState({
loading: false,
showEdit: false,
params,
data: rs.data,
pagination,
});
}
onChange = (pagination, filters, sorter) => {
let params = this.state.params;
params.pageSize = pagination.pageSize;
params.pageIndex = pagination.current;
this.onLoad(params);
}
onSearch = (value) => {
let params = this.state.params;
params.name = value;
this.onLoad(params);
}
onAdd = () => {
let values = {};
Object.keys(this.state.values).forEach(key => values[key] = undefined);
this.setState({
showView: false,
showEdit: true,
values
});
}
onView = (values) => {
this.setState({
showView: true,
loading: false,
values
});
}
onEdit = (values) => {
let me = this;
api.get(url + "getModel?id=" + values.id, {}, function (rs) {
me.setState({
showEdit: true,
showView: false,
values: rs.data
});
});
}
onSave = (values) => {
this.onLoad(this.state.params);
}
onDel = () => {
let me = this;
if (me.state.selected.length == 0) {
message.error('请选择记录！');
return;
}
UtilModal.confirm({
content: '确定删除？',
onOk: function () {
api.delete(url + "delete?id=" + me.state.selected).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.onLoad(me.state.params || {});
} else { message.error(rs.msg); }
});
}
})
}
onAudit = (state) => {
let me = this;
let values = {
state,
id: JSON.stringify(this.state.selected)
}
api.post(url + "audit", values).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.onLoad(me.state.params);
} else { message.error(rs.msg); }
});
}
render() {
var tableCfg = {
scroll: { y: this.props.height - 210 },
size: "middle",
rowKey: "id",
columns: this.columns,
rowSelection: {
selectedRowKeys: this.state.selected,
onChange: (selectedRowKeys, selectedRows) => {
this.setState({
selected: selectedRowKeys
});
}
},
rowClassName: (record) => { return record.id === this.state.selectedRowId ? 'row-selected' : ''; },//实现行选择
onRow: (record) => {
return {
onClick: event => {
this.props.onSetUserId(record.id);
this.setState({ selectedRowId: record.id });//实现行选择
}
}
},
dataSource: this.state.data,
pagination: this.state.pagination,
loading: this.state.loading,
onChange: this.onChange
}
return <div className="app-admin" style={{ paddingRight: "20px" }}>
<div className={this.state.showView || this.state.showEdit ? "hide" : ""}>
<Row>
<Col className="main-title" ><i className="iconfont icon-title"></i>{title}</Col>
</Row>
<Row className="main-toolbar">
<Col className="text-left" xs={16}>
<Button className="btn-add" onClick={this.onAdd}><i className="iconfont icon-add"></i>录入</Button>
<Button className="btn-del" onClick={this.onDel}><i className="iconfont icon-del"></i>删除</Button>
<Button className="btn-active" onClick={() => this.onAudit(1)}><i className="iconfont icon-del"></i>激活</Button>
<Button className="btn-notPass" onClick={() => this.onAudit(2)}><i className="iconfont icon-del"></i>冻结</Button>
</Col>
{/* <Col className="text-right" xs={6} style={{ paddingRight: "10px" }}>
<Tree placeholder="请选择部门名称" value={this.state.params.departmentId} onChange={(value, label) => { let params = this.state.params; params.departmentId = value; params.departmentName = label; this.setState({ params }); this.onLoad(params); }} placeholder="请选择" url="SysDepartment/listTreeSelect" />
</Col> */}
<Col className="text-right" xs={8}>
<Input.Search placeholder="请输入名称" onSearch={value => this.onSearch(value)} enterButton />
</Col>
</Row>
<Table {...tableCfg} />
</div>
{this.state.showView ? <FormView
height={this.props.height - 140}
values={this.state.values}
onEdit={this.onEdit}
onReturn={() => { this.setState({ showView: false }) }}
/> : ""}
{this.state.showEdit ? <FormEdit
height={this.props.height - 140}
values={this.state.values}
onSave={this.onSave}
onCancel={() => { this.setState({ showEdit: false }) }}
onEditReturn={() => { this.setState({ showEdit: false, showView: true }) }}
/> : ""}
</div>;
}
}
class FormView extends React.Component {
constructor(props) {
super(props);
this.state = {
...props.values
};
}
componentDidMount() {
let me = this;
api.get(url + "getModel?id=" + this.state.id, {}, function (rs) {
me.setState({
...rs.data
})
});
}
render() {
return (
<Form className="form-view">
<div className="form-title">
<i>{title} - 详情</i>
<span><Button className="btn-edit" onClick={(e) => { this.props.onEdit(this.state) }}><i className="iconfont icon-edit"></i>编辑</Button></span>
</div>
<div className="form-content" style={{ height: this.props.height }}>
<Row>
<Col xs={12}><label>账号</label><span>{this.state.code}</span></Col>
<Col xs={12}><label>姓名</label><span>{this.state.name}</span></Col>
</Row>
<Row>
<Col xs={12}><label>密码</label><span>{this.state.password}</span></Col>
<Col xs={12}><label>部门</label><span>{this.state.departmentName}</span></Col>
</Row>
{/* <Row>
<Col xs={24}><label>会员头像</label><span><File fileList={this.state.headFile} hide="true" /></span></Col>
</Row> */}
<Row>
<Col xs={12}><label>会员类型</label><span>{UtilDic.json("system", "会员类型")[this.state.type]}</span></Col>
<Col xs={12}><label>职务</label><span>{this.state.position}</span></Col>
</Row>
<Row>
<Col xs={12}><label>手机</label><span>{this.state.tel}</span></Col>
<Col xs={12}><label>邮箱</label><span>{this.state.email}</span></Col>
</Row>
<Row>
<Col xs={12}><label>性别</label><span>{UtilDic.json("system", "性别")[this.state.sex]}</span></Col>
<Col xs={12}><label>生日</label><span>{UtilDate.getDate(this.state.birthday)}</span></Col>
</Row>
<Row>
<Col xs={12}><label>状态</label><span>{UtilDic.json("app", "会员状态")[this.state.sex]}</span></Col>
</Row>
</div>
<div className="form-toolbar">
<Button className="btn-return" onClick={this.props.onReturn}><i className="iconfont icon-return"></i>返回</Button>
</div>
</Form>
);
}
}
class FormEdit extends React.Component {
constructor(props) {
super(props);
this.state = {
...props.values
};
this.formRef = React.createRef();
}
onSave = (values) => {
let me = this;
values.id = this.state.id;
if (!values.id) {//新增
if(values.password.length>30){
message.error("密码长度不能超过30位");
return;
}
}
if(values.password.length<=30){
values.password = UtilString.md5(values.password)
}
api.post(url + "save", values).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.props.onSave(values);
} else { message.error(rs.msg); }
});
}
render() {
return (
<Form ref={this.formRef} className="form-edit" layout="vertical" onFinish={this.onSave}>
<div className="form-title">
<i> {title} - {this.state.id ? "编辑" : "录入"}</i>
{this.state.id ? <span><Button className="btn-return" onClick={this.props.onEditReturn}><i className="iconfont icon-return"></i>返回</Button></span> : ""}
</div>
<div className="form-content" style={{ height: this.props.height }}>
<Row>
<Col xs={12}>
<Form.Item
name="code"
label="账号"
initialValue={this.state.code}
rules={[{
required: true,
message: '请输入账号'
}]} >
<Input />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="name"
label="姓名"
initialValue={this.state.name}
rules={[{
required: true,
message: '请输入姓名'
}]} >
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={12}>
<Form.Item
name="password"
label="密码"
initialValue={this.state.password}
rules={[{
required: true,
message: '请输入密码'
}]} >
<Input />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="departmentId"
label="部门"
initialValue={String(this.state.departmentId || "")}
>
<Select url="SysDepartment/options" params={{}} onChange={(value, option) => { this.setState({ departmentId: value, departmentName: option.props.children }); }} />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={12}>
<Form.Item
name="type"
label="会员类型"
initialValue={String(this.state.type || "")}
rules={[{
required: true,
message: '请输入会员类型'
}]} >
<Dic params={{ app: "system", type: "会员类型" }} />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="position"
label="职务"
initialValue={this.state.position}
>
<Input />
</Form.Item>
</Col>
</Row>
{/* <Row>
<Col xs={24}>
<Form.Item
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
name="headFile"
label="会员头像"
initialValue={this.state.headFile}
>
<File valuePropName="fileList" onChange={(fileList) => { this.setState({ headFileFast: fileList }); }} serverPath={api.serverPath} />
</Form.Item>
</Col>
</Row> */}
<Row>
<Col xs={12}>
<Form.Item
name="tel"
label="手机"
initialValue={this.state.tel}
>
<Input />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="email"
label="邮箱"
initialValue={this.state.email}
>
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={12}>
<Form.Item
name="sex"
label="性别"
initialValue={this.state.sex}
>
<Dic params={{ app: "system", type: "性别" }} />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="birthday"
label="生日"
initialValue={Moment(this.state.birthday)}
>
<DatePicker format="YYYY-MM-DD" />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={12}>
<Form.Item
name="state"
label="状态"
initialValue={this.state.state}
>
<Dic params={{ app: "app", type: "会员状态" }} />
</Form.Item>
</Col>
</Row>
</div>
<div className="form-toolbar">
<Button className="btn-cancel" onClick={this.props.onCancel}><i className="iconfont icon-cancel"></i>取消</Button>
<Button className="btn-submit" htmlType="submit"><i className="iconfont icon-submit"></i>提交</Button>
</div>
</Form >
);
}
}
class SysRoleList extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "用户角色",
url: "SysUserRole/",
params: {
userId: this.props.userId || ""
},
data: [],
pagination: {},
loading: false,
selected: []
};
}
componentDidMount() {
this.onLoad(this.state.params);
}
/*** Table ***/
async onLoad(params) {
this.setState({ loading: true });
let rs = await api.post(this.state.url + "listSysUserRole", params);
let pagination = {
pageSizeOptions: ["20", "100", "200", "500", "1000"],
pageSize: params.pageSize || 20,
defaultPageSize: params.pageSize || 20,
showSizeChanger: true,
showQuickJumper: true,
total: rs.total,
showTotal: (total) => { return `总记录 ${total} ` }
};
let selected = [];
for (let i = 0; i < rs.data.length; i++) {
let map = rs.data[i];
if (map._id1) {
selected.push(map._id1);
}
}
this.setState({
loading: false,
data: rs.data,
pagination,
selected
});
}
onChange = (pagination, filters, sorter) => {
let params = this.state.params;
params.pageSize = pagination.pageSize;
params.pageIndex = pagination.current;
this.onLoad(params);
}
onSelect = (selectedRowKeys) => {
if (this.props.userId.length == 0) {
message.error("请选择一条用户记录!");
return false;
}
this.setState({
selected: selectedRowKeys
});
let params = {
userId: this.props.userId,
roleId: JSON.stringify(selectedRowKeys)
}
api.post("SysUserRole/saveByUser", params).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
} else { message.error(rs.msg); }
});
}
onSearch = (value) => {
let params = this.state.params;
params.name = value;
this.onLoad(params);
}
/*** ****/
render() {
var tableCfg = {
"size": "middle",
"bordered": false,
"rowKey": "id",
"scroll": { "x": "100%" },
columns: [{
title: "角色名称",
dataIndex: "name"
},
{
title: "顺序号",
dataIndex: "ord",
width: 100
}],
rowSelection: {
selectedRowKeys: this.state.selected,
onChange: (selectedRowKeys, selectedRows) => {
this.onSelect(selectedRowKeys);
this.setState({
selected: selectedRowKeys
});
}
},
rowClassName: (record) => { return record.id === this.state.selectedRowId ? 'row-selected' : ''; },
onRow: (record) => {
return {
onClick: event => {
this.setState({ selectedRowId: record.id });
}
}
},
dataSource: this.state.data,
pagination: this.state.pagination,
loading: this.state.loading,
onChange: this.onChange
}
return (
<div className="app-admin">
<div className={this.state.showView || this.state.showEdit ? "hide" : ""}>
<Row>
<Col className="main-title" ><i className="iconfont icon-title"></i>{this.state.title}</Col>
</Row>
<Row className="main-toolbar">
<Col className="text-left" xs={12}>
<Button onClick={() => { this.onSearch("") }}><span className="iconfont icon-Refresh"></span><i>刷新</i></Button>
</Col>
<Col className="text-right" xs={12}>
<Input.Search placeholder="请输入名称" onSearch={value => this.onSearch(value)} enterButton />
</Col>
</Row>
<Table {...tableCfg} />
</div>
</div>
);
}
}
export default class SysUserRole extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: "",
roleKey: UtilString.uuid()
};
}
onSetUserId = (userId) => {
this.setState({
userId,
roleKey: UtilString.uuid()
});
}
render() {
return <Layout style={{ background: "#f0f2f5", height: "100%" }}>
<Layout.Sider theme="light" width="61.8%" style={{ marginRight: "10px", paddingRight: "10px" }}>
<SysUserList onSetUserId={this.onSetUserId} />
</Layout.Sider>
<Layout.Content style={{ background: "#fff", paddingLeft: "20px" }}>
<SysRoleList key={this.state.roleKey} userId={this.state.userId} />
</Layout.Content>
</Layout>
}
}