userProfile.jsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. import React,{Component} from "react";
  2. import {Button, Cascader, DatePicker, Form, Input, message, Modal, Radio, Select, Spin, Checkbox} from "antd";
  3. import { areaSelect, Birthplace } from "@/areaList";
  4. import { getProvinceList } from "@/addressList";
  5. import moment from "moment";
  6. import $ from "jquery/src/ajax";
  7. import UserProcessing from './userProcessing';
  8. const FormItem = Form.Item;
  9. const formItemLayout = {
  10. labelCol: { span: 6 },
  11. wrapperCol: { span: 16 },
  12. };
  13. class UserProfile extends Component{
  14. constructor(props) {
  15. super(props);
  16. this.state={
  17. loading: false,
  18. doorId:'',
  19. employeeId:'',
  20. name:'',
  21. establish: props.aid ? true : false,
  22. aid:props.aid,
  23. }
  24. this.verifyDoor = this.verifyDoor.bind(this);
  25. this.verifyId = this.verifyId.bind(this);
  26. this.addOk = this.addOk.bind(this);
  27. this.editOk = this.editOk.bind(this);
  28. this.editPeo = this.editPeo.bind(this);
  29. }
  30. componentDidMount() {
  31. let areaArr = getProvinceList();
  32. let Area = areaSelect(areaArr);
  33. let Birthplaces = Birthplace(areaArr);
  34. this.setState({
  35. Area,
  36. Birthplaces: Birthplaces,
  37. });
  38. if(this.props.ModalData && !this.state.isAddPeo){
  39. this.editPeo();
  40. }
  41. }
  42. verifyDoor() {
  43. this.setState({
  44. loading: true,
  45. });
  46. $.ajax({
  47. method: "get",
  48. dataType: "json",
  49. crossDomain: false,
  50. url: globalConfig.context + "/api/admin/personnel/checkDoorId",
  51. data: {
  52. doorId: this.state.doorId,
  53. id: this.props.id,
  54. },
  55. success: function (data) {
  56. if (data.error && data.error.length) {
  57. message.warning(data.error[0].message);
  58. } else {
  59. message.success("此编号未被占用");
  60. }
  61. }.bind(this),
  62. }).always(
  63. function () {
  64. this.setState({
  65. loading: false,
  66. });
  67. }.bind(this)
  68. );
  69. }
  70. verifyId() {
  71. this.setState({
  72. loading: true,
  73. });
  74. $.ajax({
  75. method: "get",
  76. dataType: "json",
  77. crossDomain: false,
  78. url: globalConfig.context + "/api/admin/personnel/checkEmployeeId",
  79. data: {
  80. employeeId: this.state.employeeId,
  81. id: this.props.id
  82. },
  83. success: function (data) {
  84. if (data.error && data.error.length) {
  85. message.warning(data.error[0].message);
  86. } else {
  87. message.success("此编号未被占用");
  88. }
  89. }.bind(this),
  90. }).always(
  91. function () {
  92. this.setState({
  93. loading: false,
  94. });
  95. }.bind(this)
  96. );
  97. }
  98. inspect(fn) {
  99. if(!this.state.name){
  100. message.warning('请输入姓名');
  101. return;
  102. }
  103. if(!this.state.employeeId){
  104. message.warning('请输入员工编号');
  105. return;
  106. }
  107. if(!this.state.doorId){
  108. message.warning('请输入门禁编号');
  109. return;
  110. }
  111. if(isNaN(parseInt(this.state.sex))){
  112. message.warning('请选择性别');
  113. return;
  114. }
  115. if(!this.state.nation){
  116. message.warning('请输入民族');
  117. return;
  118. }
  119. if(!(this.state.residence) || this.state.residence.length === 0){
  120. message.warning('请选择户籍地址');
  121. return;
  122. }
  123. if((!this.state.nativePlace) || this.state.nativePlace.length === 0){
  124. message.warning('请选择籍贯');
  125. return;
  126. }
  127. if((!this.state.now) || this.state.now.length === 0){
  128. message.warning('请选择现住地址');
  129. return;
  130. }
  131. fn();
  132. }
  133. addOk(aid) {
  134. this.setState({
  135. loading: true,
  136. aid,
  137. });
  138. $.ajax({
  139. method: "post",
  140. dataType: "json",
  141. crossDomain: false,
  142. url: globalConfig.context + "/api/admin/personnel/add",
  143. data: {
  144. name: this.state.name,
  145. doorId: this.state.doorId,
  146. aid,
  147. sex: this.state.sex,
  148. nation: this.state.nation,
  149. residenceProvince: this.state.residence[0],
  150. residenceCity: this.state.residence[1],
  151. residenceArea: this.state.residence[2],
  152. residenceAddress: this.state.residenceAddress,
  153. nativePlaceProvince: this.state.nativePlace[0],
  154. nativePlaceCity: this.state.nativePlace[1],
  155. nowProvince: this.state.now[0],
  156. nowCity: this.state.now[1],
  157. nowArea: this.state.now[2],
  158. nowAddress: this.state.nowAddress,
  159. idCard: this.state.idCard,
  160. certificationAuthority: this.state.certificationAuthority,
  161. marriage: this.state.marriage,
  162. politicalOutlook: this.state.politicalOutlook,
  163. son: this.state.son,
  164. girl: this.state.girl,
  165. birthdays: this.state.birthdays,
  166. employeeId: this.state.employeeId,
  167. },
  168. success: function (data) {
  169. if (data.error && data.error.length) {
  170. message.warning(data.error[0].message);
  171. } else {
  172. message.success("添加成功!");
  173. this.props.setNowAid(aid);
  174. this.props.onCancel();
  175. }
  176. }.bind(this),
  177. }).always(
  178. function () {
  179. this.setState({
  180. loading: false,
  181. });
  182. }.bind(this)
  183. );
  184. }
  185. editOk(aid) {
  186. this.setState({
  187. loading: true,
  188. aid,
  189. });
  190. $.ajax({
  191. method: "post",
  192. dataType: "json",
  193. crossDomain: false,
  194. url: globalConfig.context + "/api/admin/personnel/update",
  195. data: {
  196. aid,
  197. id: this.props.id,
  198. name: this.state.name,
  199. doorId: this.state.doorId,
  200. sex: this.state.sex,
  201. nation: this.state.nation,
  202. residenceProvince: this.state.residence[0],
  203. residenceCity: this.state.residence[1],
  204. residenceArea: this.state.residence[2],
  205. residenceAddress: this.state.residenceAddress,
  206. nativePlaceProvince: this.state.nativePlace[0],
  207. nativePlaceCity: this.state.nativePlace[1],
  208. nowProvince: this.state.now[0],
  209. nowCity: this.state.now[1],
  210. nowArea: this.state.now[2],
  211. nowAddress: this.state.nowAddress,
  212. idCard: this.state.idCard,
  213. certificationAuthority: this.state.certificationAuthority,
  214. marriage: this.state.marriage,
  215. politicalOutlook: this.state.politicalOutlook,
  216. son: this.state.son,
  217. girl: this.state.girl,
  218. birthdays: this.state.birthdays,
  219. employeeId: this.state.employeeId,
  220. },
  221. success: function (data) {
  222. if (data.error && data.error.length) {
  223. message.warning(data.error[0].message);
  224. } else {
  225. message.success("修改成功!");
  226. this.props.setNowAid(aid);
  227. this.props.onCancel();
  228. }
  229. }.bind(this),
  230. }).always(
  231. function () {
  232. this.setState({
  233. loading: false,
  234. });
  235. }.bind(this)
  236. );
  237. }
  238. editPeo() {
  239. let residence = [];
  240. residence[0] = this.props.ModalData.residenceProvince;
  241. residence[1] = this.props.ModalData.residenceCity;
  242. residence[2] = this.props.ModalData.residenceArea;
  243. let nativePlace = [];
  244. nativePlace[0] = this.props.ModalData.nativePlaceProvince;
  245. nativePlace[1] = this.props.ModalData.nativePlaceCity;
  246. let now = [];
  247. now[0] = this.props.ModalData.nowProvince;
  248. now[1] = this.props.ModalData.nowCity;
  249. now[2] = this.props.ModalData.nowArea;
  250. this.setState({
  251. id: this.props.ModalData.id,
  252. doorId: this.props.ModalData.doorId,
  253. name: this.props.ModalData.name,
  254. birthdays: this.props.ModalData.birthdays,
  255. sex: this.props.ModalData.sex,
  256. nation: this.props.ModalData.nation,
  257. residence: residence ? residence : [],
  258. residenceAddress: this.props.ModalData.residenceAddress,
  259. now: now ? now : [],
  260. nowAddress: this.props.ModalData.nowAddress,
  261. nativePlace: nativePlace ? nativePlace : [],
  262. idCard: this.props.ModalData.idCard,
  263. certificationAuthority: this.props.ModalData.certificationAuthority,
  264. marriage: this.props.ModalData.marriage,
  265. son: this.props.ModalData.son,
  266. girl: this.props.ModalData.girl,
  267. politicalOutlook: this.props.ModalData.politicalOutlook || this.props.ModalData.politicalOutlook == 0
  268. ? this.props.ModalData.politicalOutlook
  269. : undefined,
  270. employeeId: this.props.ModalData.employeeId,
  271. });
  272. }
  273. render() {
  274. return (
  275. <Modal
  276. maskClosable={false}
  277. visible={this.props.visible}
  278. footer={null}
  279. width={800}
  280. style={{ position: "relative", zIndex: 9999 }}
  281. onCancel={this.props.onCancel}
  282. >
  283. <Spin spinning={this.state.loading}>
  284. <h2
  285. style={{
  286. textAlign: "center",
  287. paddingBottom: 10,
  288. marginBottom: 10,
  289. }}
  290. >
  291. {this.props.isAddPeo ? "新增人事档案" : "修改人事档案"}
  292. </h2>
  293. <div className="clearfix">
  294. <FormItem
  295. className="half-item"
  296. {...formItemLayout}
  297. label="员工编号"
  298. >
  299. <Input
  300. placeholder="请输入员工编号"
  301. style={{ width: 200 }}
  302. value={this.state.employeeId}
  303. onChange={(e) => {
  304. this.setState({
  305. employeeId: e.target.value,
  306. });
  307. }}
  308. />
  309. <Button
  310. disabled={!(this.state.employeeId || this.state.employeeId == 0)}
  311. style={{ position: "absolute" }}
  312. type={"primary"}
  313. onClick={this.verifyId}
  314. >
  315. 验证重复
  316. </Button>
  317. </FormItem>
  318. <FormItem
  319. className="half-item"
  320. {...formItemLayout}
  321. label="门禁编号"
  322. >
  323. <Input
  324. style={{ width: 200 }}
  325. placeholder="请输入门禁编号"
  326. value={this.state.doorId}
  327. onChange={(e) => {
  328. this.setState({
  329. doorId: e.target.value,
  330. });
  331. }}
  332. />
  333. <Button
  334. disabled={!(this.state.doorId || this.state.doorId == 0)}
  335. style={{ position: "absolute" }}
  336. type={"primary"}
  337. onClick={this.verifyDoor}
  338. >
  339. 验证重复
  340. </Button>
  341. </FormItem>
  342. </div>
  343. <div className="clearfix">
  344. <FormItem className="half-item" {...formItemLayout} label="姓名">
  345. <Input
  346. placeholder="请输入姓名"
  347. style={{ width: 200 }}
  348. value={this.state.name}
  349. onChange={(e) => {
  350. this.setState({
  351. name: e.target.value,
  352. });
  353. }}
  354. />
  355. </FormItem>
  356. <FormItem
  357. className="half-item"
  358. {...formItemLayout}
  359. label="出生日期"
  360. >
  361. <DatePicker
  362. value={
  363. this.state.birthdays ? moment(this.state.birthdays) : null
  364. }
  365. onChange={(e, t) => {
  366. this.setState({
  367. birthdays: t,
  368. });
  369. }}
  370. />
  371. </FormItem>
  372. </div>
  373. <div className="clearfix">
  374. <FormItem className="half-item" {...formItemLayout} label="性别">
  375. <Radio.Group
  376. onChange={(e) => {
  377. this.setState({ sex: e.target.value });
  378. }}
  379. value={this.state.sex}
  380. >
  381. <Radio value={0}>男</Radio>
  382. <Radio value={1}>女</Radio>
  383. </Radio.Group>
  384. </FormItem>
  385. <FormItem className="half-item" {...formItemLayout} label="民族">
  386. <Input
  387. placeholder="输入民族(例:汉族)"
  388. style={{ width: 200 }}
  389. value={this.state.nation}
  390. onChange={(e) => {
  391. this.setState({
  392. nation: e.target.value,
  393. });
  394. }}
  395. />
  396. </FormItem>
  397. </div>
  398. <div className="clearfix">
  399. <FormItem
  400. className="half-item"
  401. {...formItemLayout}
  402. label="户籍地址"
  403. >
  404. <Cascader
  405. options={this.state.Area}
  406. value={this.state.residence}
  407. placeholder="选择城市"
  408. style={{ width: "200px" }}
  409. onChange={(e, pre) => {
  410. this.setState({ residence: e });
  411. }}
  412. />
  413. </FormItem>
  414. <FormItem
  415. className="half-item"
  416. {...formItemLayout}
  417. label="户籍街道地址"
  418. >
  419. <Input
  420. placeholder="输入街道地址"
  421. style={{ width: 200 }}
  422. value={this.state.residenceAddress}
  423. onChange={(e) => {
  424. this.setState({
  425. residenceAddress: e.target.value,
  426. });
  427. }}
  428. />
  429. </FormItem>
  430. </div>
  431. <div className="clearfix">
  432. <FormItem
  433. className="half-item"
  434. {...formItemLayout}
  435. label="现住地址"
  436. >
  437. <Cascader
  438. options={this.state.Area}
  439. value={this.state.now}
  440. placeholder="选择城市"
  441. style={{ width: "200px" }}
  442. onChange={(e, pre) => {
  443. this.setState({ now: e });
  444. }}
  445. />
  446. </FormItem>
  447. <FormItem
  448. className="half-item"
  449. {...formItemLayout}
  450. label="现住街道地址"
  451. >
  452. <Input
  453. placeholder="输入街道地址"
  454. style={{ width: 200 }}
  455. value={this.state.nowAddress}
  456. onChange={(e) => {
  457. this.setState({
  458. nowAddress: e.target.value,
  459. });
  460. }}
  461. />
  462. </FormItem>
  463. </div>
  464. <div className="clearfix">
  465. <FormItem className="half-item" {...formItemLayout} label="籍贯">
  466. <Cascader
  467. options={this.state.Birthplaces}
  468. value={this.state.nativePlace}
  469. placeholder="选择籍贯"
  470. style={{ width: "200px" }}
  471. onChange={(e, pre) => {
  472. this.setState({ nativePlace: e });
  473. }}
  474. />
  475. </FormItem>
  476. <FormItem
  477. className="half-item"
  478. {...formItemLayout}
  479. label="身份证"
  480. >
  481. <Input
  482. placeholder="输入身份证信息"
  483. style={{ width: 200 }}
  484. value={this.state.idCard}
  485. onChange={(e) => {
  486. this.setState({
  487. idCard: e.target.value,
  488. });
  489. }}
  490. />
  491. </FormItem>
  492. </div>
  493. <div className="clearfix">
  494. <FormItem
  495. className="half-item"
  496. {...formItemLayout}
  497. label="身份证领证机关"
  498. >
  499. <Input
  500. placeholder="输入机关名称"
  501. style={{ width: 200 }}
  502. value={this.state.certificationAuthority}
  503. onChange={(e) => {
  504. // let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  505. this.setState({
  506. certificationAuthority: e.target.value,
  507. });
  508. }}
  509. />
  510. {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
  511. </FormItem>
  512. <FormItem
  513. className="half-item"
  514. {...formItemLayout}
  515. label="婚姻状态"
  516. >
  517. <Radio.Group
  518. onChange={(e) => {
  519. this.setState({ marriage: e.target.value });
  520. }}
  521. value={this.state.marriage}
  522. >
  523. <Radio value={0}>未婚</Radio>
  524. <Radio value={1}>已婚</Radio>
  525. <Radio value={2}>离异</Radio>
  526. </Radio.Group>
  527. </FormItem>
  528. </div>
  529. <div className="clearfix">
  530. <FormItem
  531. className="half-item"
  532. labelCol={{ span: 6 }}
  533. wrapperCol={{ span: 30 }}
  534. label="子女数量"
  535. >
  536. <span>儿子:</span>
  537. <Input
  538. placeholder="输入数量"
  539. style={{ width: 80 }}
  540. type={"number"}
  541. value={this.state.son}
  542. onChange={(e) => {
  543. this.setState({
  544. son: e.target.value,
  545. });
  546. }}
  547. />
  548. <span style={{ marginLeft: 10 }}>女儿:</span>
  549. <Input
  550. placeholder="输入数量"
  551. style={{ width: 80 }}
  552. type={"number"}
  553. value={this.state.girl}
  554. onChange={(e) => {
  555. this.setState({
  556. girl: e.target.value,
  557. });
  558. }}
  559. />
  560. </FormItem>
  561. <FormItem
  562. className="half-item"
  563. {...formItemLayout}
  564. label="政治面貌"
  565. >
  566. <Select
  567. placeholder="请选择政治面貌"
  568. style={{ width: 200 }}
  569. onChange={(e) => {
  570. this.setState({ politicalOutlook: e });
  571. }}
  572. value={this.state.politicalOutlook}
  573. >
  574. <Select.Option value={0}>群众</Select.Option>
  575. <Select.Option value={1}>中共预备党员</Select.Option>
  576. <Select.Option value={2}>中共党员</Select.Option>
  577. <Select.Option value={3}>致公党党员</Select.Option>
  578. </Select>
  579. </FormItem>
  580. </div>
  581. <Checkbox
  582. style={{
  583. paddingLeft: '34px',
  584. paddingTop: '10px',
  585. }}
  586. checked={this.state.establish}
  587. onChange={
  588. (e) => {
  589. this.setState({
  590. establish: e.target.checked
  591. });
  592. }}>
  593. 是否同步创建系统账户
  594. </Checkbox>
  595. {!this.state.establish ? <Button
  596. type="primary"
  597. shape="round"
  598. size="large"
  599. style={{
  600. position: "relative",
  601. left: "24%",
  602. top: '10px',
  603. transform: "translateX(-50%)",
  604. }}
  605. onClick={this.props.isAddPeo ? ()=>{this.inspect(this.addOk)} : ()=>{this.inspect(this.editOk)}}
  606. >
  607. 保存
  608. </Button> : null}
  609. {this.state.establish ? <div>
  610. <div>----------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
  611. <UserProcessing
  612. userDetaile={this.state.aid ? true : false}
  613. name={this.state.name}
  614. aid={this.state.aid}
  615. inspect={(v)=>{this.inspect(v)}}
  616. onPreservation={(aid)=>{
  617. if(this.props.isAddPeo){
  618. this.addOk(aid);
  619. }else{
  620. this.editOk(aid);
  621. }
  622. }}
  623. />
  624. </div> : null}
  625. </Spin>
  626. </Modal>
  627. )
  628. }
  629. }
  630. export default UserProfile;