personnelAll.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import "@/manageCenter/financialManage/distribute/public.less";
  4. import { ChooseList } from "../../order/orderNew/chooseList";
  5. import "./personnelList.less"
  6. import {
  7. Button,
  8. Form,
  9. Input,
  10. Select,
  11. Spin,
  12. Table,
  13. message,
  14. Modal,
  15. Tabs,
  16. Tag,
  17. RangePicker,
  18. DatePicker,
  19. Radio,
  20. } from "antd";
  21. import {} from "@/tools";
  22. const FormItem = Form.Item;
  23. const { TabPane } = Tabs;
  24. const { TextArea } = Input;
  25. const PersonnelAll = React.createClass({
  26. loadData(pageNo) {
  27. this.state.data = [];
  28. this.setState({
  29. page: pageNo,
  30. loading: true,
  31. });
  32. $.ajax({
  33. method: "get",
  34. dataType: "json",
  35. crossDomain: false,
  36. url: globalConfig.context + "/api/admin/orderProject/orderTaskList",
  37. data: {
  38. pageNo: pageNo || 1,
  39. pageSize: this.state.pagination.pageSize,
  40. specially: 1, //经理
  41. name: this.state.nameSearch, //客户名称
  42. orderNo: this.state.orderNoSearch, //订单编号
  43. taskId: this.state.taskNoSearch, //任务编号
  44. depId: this.state.departmenttSearch, //订单部门
  45. taskStatus: this.state.taskStatus, //任务状态
  46. adminName: this.state.adminName, //任务受理人
  47. outsource: 1,
  48. },
  49. success: function (data) {
  50. let theArr = [];
  51. if (!data.data || !data.data.list) {
  52. if (data.error && data.error.length) {
  53. message.warning(data.error[0].message);
  54. }
  55. } else {
  56. for (let i = 0; i < data.data.list.length; i++) {
  57. let thisdata = data.data.list[i];
  58. if (thisdata.splitList) {
  59. thisdata.splitList.forEach((item) => {
  60. item.key = item.id;
  61. });
  62. }
  63. theArr.push({
  64. key: thisdata.id,
  65. orderNo: thisdata.orderNo, //订单编号
  66. id: thisdata.id, //任务ID
  67. taskName: thisdata.taskName, //名称
  68. cname: thisdata.cname, //项目品类
  69. receiverName: thisdata.receiverName, //受理人
  70. projectStatus: thisdata.projectStatus, //项目状态
  71. taskStatus: thisdata.taskStatus, //任务状态
  72. taskDate: thisdata.taskDate, //分配时间
  73. commodityQuantity: thisdata.commodityQuantity, //数量
  74. userName: thisdata.userName, //用户名
  75. depName: thisdata.depName, //部门名称
  76. splitStatus: thisdata.splitStatus, //拆分状态
  77. splitList: thisdata.splitList,
  78. });
  79. }
  80. }
  81. this.state.pagination.current = data.data.pageNo;
  82. this.state.pagination.total = data.data.totalCount;
  83. if (data.data && data.data.list && !data.data.list.length) {
  84. this.state.pagination.current = 0;
  85. this.state.pagination.total = 0;
  86. }
  87. this.setState({
  88. dataSource: theArr,
  89. pagination: this.state.pagination,
  90. });
  91. }.bind(this),
  92. }).always(
  93. function () {
  94. this.setState({
  95. loading: false,
  96. });
  97. }.bind(this)
  98. );
  99. },
  100. getInitialState() {
  101. return {
  102. peoVisible: false,
  103. isAddPeo: false,
  104. searchMore: true,
  105. assignVisible: false,
  106. releaseDate: [],
  107. roleName: "",
  108. shouKuanDate: [],
  109. boHuivisible: false,
  110. departmentArr: [],
  111. selectedRowKeys: [],
  112. selectedRows: [],
  113. paginations: false,
  114. loading: false,
  115. pagination: {
  116. defaultCurrent: 1,
  117. defaultPageSize: 10,
  118. showQuickJumper: true,
  119. pageSize: 10,
  120. onChange: function (page) {
  121. this.loadData(page);
  122. }.bind(this),
  123. showTotal: function (total) {
  124. return "共" + total + "条数据";
  125. },
  126. },
  127. columns: [
  128. {
  129. title: "员工编号",
  130. dataIndex: "id",
  131. key: "id",
  132. },
  133. {
  134. title: "员工姓名",
  135. dataIndex: "name",
  136. key: "name",
  137. },
  138. ],
  139. dataSource: [],
  140. resVisible: false,
  141. };
  142. },
  143. /* 分派 */
  144. evaluate(record, nub) {
  145. this.state.assignData = record;
  146. this.setState(
  147. {
  148. nub,
  149. },
  150. () => {
  151. this.setState({
  152. assignVisible: true,
  153. });
  154. }
  155. );
  156. },
  157. componentWillMount() {
  158. this.loadData();
  159. },
  160. changeList(arr) {
  161. const newArr = [];
  162. this.state.columns.forEach((item) => {
  163. arr.forEach((val) => {
  164. if (val === item.title) {
  165. newArr.push(item);
  166. }
  167. });
  168. });
  169. this.setState({
  170. changeList: newArr,
  171. });
  172. },
  173. addPeo() {
  174. this.setState({
  175. peoVisible: true,
  176. isAddPeo: true
  177. })
  178. },
  179. addPeoCancel() {
  180. this.setState({
  181. peoVisible: false,
  182. isAddPeo: false
  183. })
  184. },
  185. render() {
  186. const rowSelection = {
  187. selectedRowKeys: this.state.selectedRowKeys,
  188. onChange: (selectedRowKeys, selectedRows) => {
  189. this.setState({
  190. selectedRows: selectedRows.slice(-1),
  191. selectedRowKeys: selectedRowKeys.slice(-1),
  192. });
  193. },
  194. };
  195. const { RangePicker } = DatePicker;
  196. const formItemLayout = {
  197. labelCol: { span: 8 },
  198. wrapperCol: { span: 14 },
  199. };
  200. let departmentArr = this.state.departmentArr || [];
  201. return (
  202. <div className="user-content">
  203. <div className="content-title" style={{ marginBottom: 10 }}>
  204. <span style={{ fontWeight: 900, fontSize: 16 }}>人事档案统计</span>
  205. </div>
  206. <Tabs defaultActiveKey="2" onChange={this.callback} className="test">
  207. <TabPane tab="更改表格显示数据" key="1">
  208. <div style={{ marginLeft: 10 }}>
  209. <ChooseList
  210. columns={this.state.columns}
  211. changeFn={this.changeList}
  212. changeList={this.state.changeList}
  213. top={55}
  214. margin={11}
  215. />
  216. </div>
  217. </TabPane>
  218. <TabPane tab="搜索" key="2">
  219. <div className="user-search" style={{ marginLeft: 10 }}>
  220. <Input
  221. placeholder="订单编号"
  222. value={this.state.orderNoSearch}
  223. onChange={(e) => {
  224. this.setState({ orderNoSearch: e.target.value });
  225. }}
  226. />
  227. <Input
  228. placeholder="客户名称"
  229. value={this.state.nameSearch}
  230. onChange={(e) => {
  231. this.setState({ nameSearch: e.target.value });
  232. }}
  233. />
  234. <Select
  235. placeholder="订单部门"
  236. style={{ width: 120, marginRight: 10 }}
  237. value={this.state.departmenttList}
  238. onChange={(e) => {
  239. this.setState({ departmenttList: e });
  240. }}
  241. >
  242. {departmentArr.map(function (item) {
  243. return (
  244. <Select.Option key={item.id}>{item.name}</Select.Option>
  245. );
  246. })}
  247. </Select>
  248. <Input
  249. placeholder="合同编号"
  250. value={this.state.contractNoSearch}
  251. onChange={(e) => {
  252. this.setState({
  253. contractNoSearch: e.target.value,
  254. });
  255. }}
  256. />
  257. <Select
  258. placeholder="流程状态"
  259. onChange={(e) => {
  260. this.setState({ processStatusSearch: e });
  261. }}
  262. style={{ width: 120, marginRight: 5 }}
  263. value={this.state.processStatusSearch}
  264. >
  265. <Option value="3">未分配</Option>
  266. <Option value="4">已分配</Option>
  267. <Option value="9">已驳回</Option>
  268. </Select>
  269. <Select
  270. placeholder="结算状态"
  271. onChange={(e) => {
  272. this.setState({ liquidationStatus: e });
  273. }}
  274. style={{ width: 120, marginRight: 5 }}
  275. value={this.state.liquidationStatus}
  276. >
  277. <Option value="0">首付待付清</Option>
  278. <Option value="1">尾款待付清</Option>
  279. <Option value="2">已付清</Option>
  280. </Select>
  281. <Select
  282. style={{ width: 120 }}
  283. placeholder="签单金额"
  284. value={this.state.amountStatus}
  285. onChange={(e) => {
  286. this.setState({
  287. amountStatus: e,
  288. });
  289. }}
  290. >
  291. <Option value="0">10万元以下</Option>
  292. <Option value="1">10~20万元</Option>
  293. <Option value="2">20~30万元</Option>
  294. <Option value="3">30~40万元</Option>
  295. <Option value="4">40万元以上</Option>
  296. </Select>
  297. <span style={{}}>下单日期:</span>
  298. <RangePicker
  299. value={[
  300. this.state.releaseDate[0]
  301. ? moment(this.state.releaseDate[0])
  302. : null,
  303. this.state.releaseDate[1]
  304. ? moment(this.state.releaseDate[1])
  305. : null,
  306. ]}
  307. onChange={(data, dataString) => {
  308. this.setState({ releaseDate: dataString });
  309. }}
  310. />
  311. <span style={{}}>最近收款:</span>
  312. <RangePicker
  313. value={[
  314. this.state.shouKuanDate[0]
  315. ? moment(this.state.shouKuanDate[0])
  316. : null,
  317. this.state.shouKuanDate[1]
  318. ? moment(this.state.shouKuanDate[1])
  319. : null,
  320. ]}
  321. onChange={(data, dataString) => {
  322. this.setState({ shouKuanDate: dataString });
  323. }}
  324. />
  325. <Button
  326. type="primary"
  327. onClick={this.search}
  328. style={{ marginLeft: 10 }}
  329. >
  330. 搜索
  331. </Button>
  332. <Button onClick={this.reset}>重置</Button>
  333. </div>
  334. </TabPane>
  335. <TabPane tab="新增员工档案" key="3">
  336. <Button
  337. type="primary"
  338. onClick={this.addPeo}
  339. style={{ margin: "11px 0px 10px 10px" }}
  340. >
  341. 新增员工档案
  342. </Button>
  343. </TabPane>
  344. <TabPane tab="导出Excel" key="4">
  345. <Button type="primary" style={{ margin: "11px 0px 10px 10px" }}>
  346. 导出当前列表
  347. </Button>
  348. </TabPane>
  349. <TabPane tab="查看" key="5">
  350. <Button
  351. type="primary"
  352. style={{ margin: "11px 0px 10px 10px" }}
  353. onClick={() => {}}
  354. >
  355. 详情收款流水
  356. </Button>
  357. </TabPane>
  358. </Tabs>
  359. <div className="patent-table">
  360. <Spin spinning={this.state.loading}>
  361. <Table
  362. bordered
  363. columns={
  364. this.state.changeList == undefined
  365. ? this.state.columns
  366. : this.state.changeList
  367. }
  368. dataSource={this.state.dataSource}
  369. scroll={{ x: "max-content", y: 0 }}
  370. pagination={this.state.pagination}
  371. size="small"
  372. />
  373. </Spin>
  374. </div>
  375. <Modal
  376. visible={this.state.peoVisible}
  377. onOk={this.checkOk}
  378. width={800}
  379. okText={"保存"}
  380. onCancel={() => {
  381. this.loadData();
  382. this.addPeoCancel();
  383. }}
  384. >
  385. <Spin spinning={this.state.loading}>
  386. <h2
  387. style={{
  388. textAlign: "center",
  389. paddingBottom: 10,
  390. marginBottom: 10,
  391. }}
  392. >
  393. {this.state.isAddPeo ? "新增人事档案" : "修改人事档案"}
  394. </h2>
  395. <div className="clearfix">
  396. <FormItem
  397. className="half-item"
  398. {...formItemLayout}
  399. label="员工编号"
  400. >
  401. <Input
  402. placeholder=""
  403. style={{ width: 200 }}
  404. value={this.state.contractNoSearch}
  405. onChange={(e) => {
  406. this.setState({
  407. contractNoSearch: e.target.value,
  408. });
  409. }}
  410. />
  411. </FormItem>
  412. <FormItem
  413. className="half-item"
  414. {...formItemLayout}
  415. label="门禁编号"
  416. >
  417. <Input
  418. style={{ width: 200 }}
  419. placeholder="请输入门禁编号"
  420. value={this.state.contractNoSearch}
  421. onChange={(e) => {
  422. this.setState({
  423. contractNoSearch: e.target.value,
  424. });
  425. }}
  426. />
  427. </FormItem>
  428. </div>
  429. <div className="clearfix">
  430. <FormItem className="half-item" {...formItemLayout} label="姓名">
  431. <Input
  432. placeholder=""
  433. style={{ width: 200 }}
  434. value={this.state.contractNoSearch}
  435. onChange={(e) => {
  436. this.setState({
  437. contractNoSearch: e.target.value,
  438. });
  439. }}
  440. />
  441. </FormItem>
  442. <FormItem
  443. className="half-item"
  444. {...formItemLayout}
  445. label="出生日期"
  446. >
  447. <RangePicker
  448. value={[
  449. this.state.shouKuanDate[0]
  450. ? moment(this.state.shouKuanDate[0])
  451. : null,
  452. this.state.shouKuanDate[1]
  453. ? moment(this.state.shouKuanDate[1])
  454. : null,
  455. ]}
  456. onChange={(data, dataString) => {
  457. this.setState({ shouKuanDate: dataString });
  458. }}
  459. />
  460. </FormItem>
  461. </div>
  462. <div className="clearfix">
  463. <FormItem className="half-item" {...formItemLayout} label="性别">
  464. <Radio.Group
  465. onChange={(e) => {
  466. this.setState({ sex: e.target.value });
  467. }}
  468. value={this.state.sex}
  469. >
  470. <Radio value={1}>男</Radio>
  471. <Radio value={2}>女</Radio>
  472. </Radio.Group>
  473. </FormItem>
  474. <FormItem className="half-item" {...formItemLayout} label="民族">
  475. <Input
  476. placeholder="输入民族(例:汉族)"
  477. style={{ width: 200 }}
  478. value={this.state.contractNoSearch}
  479. onChange={(e) => {
  480. this.setState({
  481. contractNoSearch: e.target.value,
  482. });
  483. }}
  484. />
  485. </FormItem>
  486. </div>
  487. </Spin>
  488. </Modal>
  489. </div>
  490. );
  491. },
  492. });
  493. export default PersonnelAll;