CmsUserEdit.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. import React, { PureComponent } from 'react';
  2. import { Card, Form, Table, Input, Button, Radio, Icon, Switch } from 'antd';
  3. import { connect } from 'dva';
  4. import { routerRedux } from 'dva/router';
  5. import FooterToolbar from '../../../components/FooterToolbar';
  6. import {renderAvatar, renderGender, renderStatus, boolToStatus, statusToBool} from '../../../utils/utils';
  7. import styles from './CmsUserCreate.less';
  8. const genders = [{
  9. title: '男',
  10. value: 'MALE',
  11. }, {
  12. title: '女',
  13. value: 'FEMALE',
  14. }];
  15. const fieldLabels = {
  16. nickName: '用户昵称',
  17. gender: '用户性别',
  18. birthday: '出生日期',
  19. mobile: '电话',
  20. mail: '邮箱',
  21. qq: 'QQ号码',
  22. weChat: '微信号码',
  23. password: '用户密码',
  24. confirm: '确认密码',
  25. status: '账号状态',
  26. };
  27. const formItemLayout = {
  28. labelCol: {
  29. xs: { span: 24 },
  30. sm: { span: 6 },
  31. },
  32. wrapperCol: {
  33. xs: { span: 24 },
  34. sm: { span: 14 },
  35. md: { span: 12 },
  36. },
  37. };
  38. function cmsUserDataFormatter(item) {
  39. const {
  40. qq,
  41. name,
  42. mail,
  43. weChat,
  44. mobile,
  45. status,
  46. gender,
  47. avatar,
  48. birthday,
  49. nickName,
  50. merchantName,
  51. } = item;
  52. return [{
  53. key: 1,
  54. field: '用户头像',
  55. text: renderAvatar(avatar, nickName),
  56. }, {
  57. key: 2,
  58. field: '用户名称',
  59. text: name,
  60. }, {
  61. key: 3,
  62. field: '用户昵称',
  63. text: nickName,
  64. }, {
  65. key: 4,
  66. field: '出生日期',
  67. text: birthday,
  68. }, {
  69. key: 5,
  70. field: '用户性别',
  71. text: renderGender(gender),
  72. }, {
  73. key: 6,
  74. field: '所属商户',
  75. text: merchantName,
  76. }, {
  77. key: 7,
  78. field: '联系电话',
  79. text: mobile,
  80. }, {
  81. key: 8,
  82. field: 'QQ号码',
  83. text: qq,
  84. }, {
  85. key: 9,
  86. field: '微信',
  87. text: weChat,
  88. }, {
  89. key: 10,
  90. field: '邮箱',
  91. text: mail,
  92. }, {
  93. key: 11,
  94. field: '账号状态',
  95. text: renderStatus(status),
  96. }];
  97. }
  98. @Form.create()
  99. @connect(({ loading, cmsUser }) => ({
  100. cmsUser,
  101. submitting: loading.models.cmsUser,
  102. }))
  103. export default class CmsUserEditPage extends PureComponent {
  104. state = {
  105. currentItem: {},
  106. passwordEdit: false,
  107. };
  108. componentWillMount() {
  109. this.setState({
  110. currentItem: this.props.location.state.currentItem,
  111. });
  112. }
  113. checkPassword = (rule, value, callback) => {
  114. if (value && value !== this.props.form.getFieldValue('password')) {
  115. callback('两次输入的密码不一致');
  116. } else if (!value) {
  117. callback('请再次输入密码进行确认');
  118. } else {
  119. callback();
  120. }
  121. };
  122. handlePasswordEdit = () => {
  123. this.setState({
  124. passwordEdit: true,
  125. });
  126. };
  127. handlePasswordSave = () => {
  128. this.props.form.validateFieldsAndScroll((error) => {
  129. if (!error) {
  130. this.setState({
  131. passwordEdit: false,
  132. });
  133. }
  134. });
  135. };
  136. handlePageSubmit = () => {
  137. this.props.form.validateFieldsAndScroll((error, values) => {
  138. const { currentItem, passwordEdit } = this.state;
  139. const { id } = currentItem;
  140. const { status, ...restProps } = values;
  141. restProps.status = boolToStatus(status);
  142. restProps.id = id;
  143. if (!error && !passwordEdit) {
  144. this.props.dispatch({
  145. type: 'cmsUser/updateCmsUserItem',
  146. payload: restProps,
  147. states: this.props.location.state,
  148. });
  149. }
  150. });
  151. };
  152. handlePageBack = () => {
  153. this.props.dispatch(routerRedux.push({
  154. pathname: '/system/cms-user/list',
  155. state: this.props.location.state,
  156. }));
  157. };
  158. render() {
  159. const { form, submitting } = this.props;
  160. const { currentItem, passwordEdit } = this.state;
  161. const { getFieldDecorator } = form;
  162. const {
  163. qq,
  164. mail,
  165. gender,
  166. weChat,
  167. status,
  168. birthday,
  169. nickName,
  170. mobile,
  171. } = currentItem;
  172. const campusColumns = [{
  173. title: '字段名',
  174. key: 1,
  175. dataIndex: 'field',
  176. width: '15%',
  177. }, {
  178. title: '字段值',
  179. key: 2,
  180. dataIndex: 'text',
  181. width: '85%',
  182. }];
  183. return (
  184. <div>
  185. <Card title="用户详情" style={{ marginBottom: 16 }}>
  186. <Form>
  187. <Form.Item wrapperCol={{ span: 13, offset: 5 }}>
  188. <Table
  189. bordered
  190. size="small"
  191. showHeader={false}
  192. pagination={false}
  193. className={styles.infoTable}
  194. columns={campusColumns}
  195. dataSource={cmsUserDataFormatter(currentItem)}
  196. />
  197. </Form.Item>
  198. </Form>
  199. </Card>
  200. <Card title="修改信息" style={{ marginBottom: 70 }}>
  201. <Form hideRequiredMark>
  202. <Form.Item label={fieldLabels.nickName} {...formItemLayout}>
  203. {getFieldDecorator('nickName', {
  204. initialValue: nickName,
  205. })(
  206. <Input placeholder="请输入" />
  207. )}
  208. </Form.Item>
  209. <Form.Item label={fieldLabels.password} {...formItemLayout}>
  210. {getFieldDecorator('password', {
  211. rules: [
  212. {
  213. pattern: /^[a-zA-Z0-9|-]+$/ig, message: '密码格式错误!',
  214. }],
  215. })(
  216. <Input
  217. type="password"
  218. placeholder="请输入"
  219. disabled={!passwordEdit}
  220. addonBefore={<Icon type="lock" />}
  221. addonAfter={
  222. passwordEdit ? (
  223. <Icon type="save" onClick={this.handlePasswordSave} />
  224. ) : (
  225. <Icon type="edit" onClick={this.handlePasswordEdit} />
  226. )
  227. }
  228. />
  229. )}
  230. </Form.Item>
  231. {passwordEdit && (
  232. <Form.Item label={fieldLabels.confirm} {...formItemLayout}>
  233. {getFieldDecorator('confirm', {
  234. rules: [
  235. {
  236. validator: this.checkPassword,
  237. }],
  238. })(
  239. <Input
  240. type="password"
  241. placeholder="请输入"
  242. addonBefore={<Icon type="lock" />}
  243. />
  244. )}
  245. </Form.Item>
  246. )}
  247. <Form.Item label={fieldLabels.birthday} {...formItemLayout}>
  248. {getFieldDecorator('birthday', {
  249. initialValue: birthday,
  250. })(
  251. <Input placeholder="请输入" />
  252. )}
  253. </Form.Item>
  254. <Form.Item label={fieldLabels.mobile} {...formItemLayout}>
  255. {getFieldDecorator('mobile', {
  256. rules: [{
  257. pattern: /^[1][34578][0-9]{9}$/g, message: '请输入11位有效手机号!',
  258. }],
  259. initialValue: mobile,
  260. })(
  261. <Input placeholder="请输入" />
  262. )}
  263. </Form.Item>
  264. <Form.Item label={fieldLabels.mail} {...formItemLayout}>
  265. {getFieldDecorator('mail', {
  266. initialValue: mail,
  267. })(
  268. <Input placeholder="请输入" />
  269. )}
  270. </Form.Item>
  271. <Form.Item label={fieldLabels.qq} {...formItemLayout}>
  272. {getFieldDecorator('qq', {
  273. initialValue: qq,
  274. })(
  275. <Input placeholder="请输入" />
  276. )}
  277. </Form.Item>
  278. <Form.Item label={fieldLabels.weChat} {...formItemLayout}>
  279. {getFieldDecorator('weChat', {
  280. initialValue: weChat,
  281. })(
  282. <Input placeholder="请输入" />
  283. )}
  284. </Form.Item>
  285. <Form.Item label={fieldLabels.gender} {...formItemLayout}>
  286. {getFieldDecorator('gender', {
  287. initialValue: gender,
  288. })(
  289. <Radio.Group className={styles.radio}>
  290. {
  291. genders.map(item =>
  292. (
  293. <Radio.Button
  294. key={item.value}
  295. value={item.value}
  296. >{item.title}
  297. </Radio.Button>
  298. )
  299. )
  300. }
  301. </Radio.Group>
  302. )}
  303. </Form.Item>
  304. <Form.Item label={fieldLabels.status} {...formItemLayout}>
  305. {getFieldDecorator('status', {
  306. valuePropName: 'checked',
  307. initialValue: statusToBool(status),
  308. })(
  309. <Switch
  310. checkedChildren="启用"
  311. unCheckedChildren="禁用"
  312. />
  313. )}
  314. </Form.Item>
  315. </Form>
  316. </Card>
  317. <FooterToolbar style={{ width: '100%' }}>
  318. <Button
  319. onClick={this.handlePageBack}
  320. style={{ marginRight: 10 }}
  321. >取消
  322. </Button>
  323. <Button
  324. type="primary"
  325. loading={submitting}
  326. onClick={this.handlePageSubmit}
  327. >提交
  328. </Button>
  329. </FooterToolbar>
  330. </div>
  331. );
  332. }
  333. }