detailedList.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. import React,{ Component } from 'react';
  2. import {AutoComplete, Button, DatePicker, Input, message, Modal, Select, Spin, Table, Tabs, Tag} from "antd";
  3. import {ShowModal,} from "@/tools";
  4. import {ChooseList} from "../../order/orderNew/chooseList";
  5. import $ from "jquery/src/ajax";
  6. import './index.less';
  7. import moment from "moment";
  8. const {TabPane} = Tabs;
  9. const { RangePicker } = DatePicker;
  10. class DetailedList extends Component{
  11. constructor(props) {
  12. super(props);
  13. this.state={
  14. pageNo:1,
  15. loading:false,
  16. changeList:[],
  17. columns: [
  18. {
  19. title: "编号",
  20. dataIndex: "key",
  21. key: "key",
  22. },
  23. {
  24. title: "客户名称",
  25. dataIndex: "nickname",
  26. key: "nickname",
  27. },
  28. {
  29. title: "公出申请人",
  30. dataIndex: "aname",
  31. key: "aname",
  32. },
  33. {
  34. title: "公出时间",
  35. dataIndex: "releaseStarts",
  36. key: "releaseStarts",
  37. render: (text, record) => (
  38. text+'至'+record.releaseEnds
  39. )
  40. },
  41. {
  42. title: "公出时长(时)",
  43. dataIndex: "duration",
  44. key: "duration",
  45. },
  46. {
  47. title: "审核状态",
  48. dataIndex: "status",
  49. key: "status",
  50. render: (text) => (
  51. text === '0' ? <Tag color="#F00">驳回</Tag> :
  52. text === '1' ? <Tag color="#58a3ff">审核中</Tag> :
  53. text === '2' ? <Tag color="#87d068">通过</Tag> : null
  54. )
  55. },
  56. ],
  57. pagination: {
  58. defaultCurrent: 1,
  59. defaultPageSize: 10,
  60. showQuickJumper: true,
  61. pageSize: 10,
  62. onChange: function(page) {
  63. this.loadData(page);
  64. }.bind(this),
  65. showTotal: function(total) {
  66. return "共" + total + "条数据";
  67. }
  68. },
  69. dataSource: [],
  70. releaseDate:[],
  71. status:props.status,
  72. theTypes:props.aid,
  73. theCustomerTypes:undefined,
  74. }
  75. this.loadData = this.loadData.bind(this);
  76. this.resetAll = this.resetAll.bind(this);
  77. this.changeList = this.changeList.bind(this);
  78. this.selectSuperId = this.selectSuperId.bind(this);
  79. this.supervisor = this.supervisor.bind(this);
  80. this.httpChange = this.httpChange.bind(this);
  81. this.blurChange = this.blurChange.bind(this);
  82. this.selectAuto = this.selectAuto.bind(this);
  83. this.getCustomer = this.getCustomer.bind(this);
  84. this.selectCustomerAuto = this.selectCustomerAuto.bind(this);
  85. this.httpCustomerChange = this.httpCustomerChange.bind(this);
  86. this.blurCustomerChange = this.blurCustomerChange.bind(this);
  87. }
  88. //获取上级组织
  89. selectSuperId() {
  90. $.ajax({
  91. method: "get",
  92. dataType: "json",
  93. crossDomain: false,
  94. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  95. data:{},
  96. success: function (data) {
  97. let theArr = [];
  98. if (data.error && data.error.length === 0) {
  99. for(let i=0;i<data.data.length;i++){
  100. let theData = data.data[i];
  101. theArr.push(
  102. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  103. );
  104. };
  105. this.setState({
  106. contactsOption: theArr,
  107. });
  108. }else{
  109. message.warning(data.error[0].message);
  110. }
  111. }.bind(this),
  112. }).always(function () {
  113. this.setState({
  114. loading: false
  115. });
  116. }.bind(this));
  117. }
  118. changeList(arr) {
  119. const newArr = [];
  120. this.state.columns.forEach(item => {
  121. arr.forEach(val => {
  122. if (val === item.title) {
  123. newArr.push(item);
  124. }
  125. });
  126. });
  127. this.setState({
  128. changeList: newArr
  129. });
  130. }
  131. loadData(pageNo) {
  132. $.ajax({
  133. method: "get",
  134. dataType: "json",
  135. crossDomain: false,
  136. url: globalConfig.context + "/api/admin/release//publicReleaseDtails",
  137. data: {
  138. pageNo: pageNo || 1,
  139. pageSize: this.state.pagination.pageSize,
  140. releaseStart:this.state.releaseDate[0] || undefined,
  141. releaseEnd:this.state.releaseDate[1] || undefined,
  142. aid:this.state.theTypes,
  143. uid:this.state.theCustomerTypes,
  144. status:this.state.status
  145. },
  146. success: function(data) {
  147. ShowModal(this);
  148. let theArr = [];
  149. if (data.error && data.error.length === 0) {
  150. for (let i = 0; i < data.data.list.length; i++) {
  151. let thisdata = data.data.list[i];
  152. thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
  153. theArr.push(thisdata);
  154. }
  155. this.state.pagination.current = data.data.pageNo;
  156. this.state.pagination.total = data.data.totalCount;
  157. if (data.data && data.data.list && !data.data.list.length) {
  158. this.state.pagination.current = 0;
  159. this.state.pagination.total = 0;
  160. }
  161. this.setState({
  162. dataSource: theArr,
  163. pagination: this.state.pagination,
  164. pageNo:data.data.pageNo
  165. });
  166. }else{
  167. message.warning(data.error[0].message);
  168. }
  169. }.bind(this)
  170. }).always(
  171. function() {
  172. this.setState({
  173. loading: false
  174. });
  175. }.bind(this)
  176. );
  177. }
  178. resetAll() {
  179. this.setState({
  180. releaseDate:[],
  181. theTypes:undefined,
  182. theCustomerTypes:undefined,
  183. status:this.props.status,
  184. auto:'',
  185. customer:''
  186. },()=>{
  187. this.loadData();
  188. })
  189. }
  190. supervisor(e) {
  191. $.ajax({
  192. method: "get",
  193. dataType: "json",
  194. crossDomain: false,
  195. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  196. data: {
  197. adminName: e,
  198. },
  199. success: function (data) {
  200. if (data.error && data.error.length === 0) {
  201. this.setState({
  202. customerArr: data.data,
  203. });
  204. }else{
  205. message.warning(data.error[0].message);
  206. }
  207. }.bind(this),
  208. }).always(
  209. function () {
  210. }.bind(this)
  211. );
  212. }
  213. httpChange(e) {
  214. if (e.length >= 1) {
  215. this.supervisor(e);
  216. }
  217. this.setState({
  218. auto: e,
  219. });
  220. }
  221. selectAuto(value, options) {
  222. this.setState({
  223. auto: value,
  224. });
  225. }
  226. httpCustomerChange(e) {
  227. if (e.length >= 1) {
  228. this.getCustomer(e);
  229. }
  230. this.setState({
  231. customer: e,
  232. });
  233. }
  234. selectCustomerAuto(value, options) {
  235. this.setState({
  236. customer: value,
  237. });
  238. }
  239. getCustomer(e) {
  240. $.ajax({
  241. method: "get",
  242. dataType: "json",
  243. crossDomain: false,
  244. url: globalConfig.context + "/api/admin/customer/getUserByName",
  245. data: {
  246. name: e,
  247. },
  248. success: function (data) {
  249. if (data.error && data.error.length === 0) {
  250. this.setState({
  251. customerList: data.data,
  252. });
  253. }else{
  254. message.warning(data.error[0].message);
  255. }
  256. }.bind(this),
  257. }).always(
  258. function () {
  259. }.bind(this)
  260. );
  261. }
  262. blurCustomerChange(e) {
  263. let theType = "";
  264. let contactLists = this.state.customerList || [];
  265. if (e) {
  266. contactLists.map(function (item) {
  267. if (item.name == e.toString()) {
  268. theType = item.id;
  269. }
  270. });
  271. }
  272. this.setState({
  273. theCustomerTypes: theType,
  274. });
  275. }
  276. blurChange(e) {
  277. let theType = "";
  278. let contactLists = this.state.customerArr || [];
  279. if (e) {
  280. contactLists.map(function (item) {
  281. if (item.name == e.toString()) {
  282. theType = item.id;
  283. }
  284. });
  285. }
  286. this.setState({
  287. theTypes: theType,
  288. });
  289. }
  290. componentWillMount() {
  291. this.loadData();
  292. this.selectSuperId();
  293. }
  294. render() {
  295. const dataSources = this.state.customerArr || [];
  296. const options = dataSources.map((group) => (
  297. <Select.Option key={group.id} value={group.name}>
  298. {group.name}
  299. </Select.Option>
  300. ));
  301. const customerList = this.state.customerList || [];
  302. const customerOptions = customerList.map((group) => (
  303. <Select.Option key={group.id} value={group.name}>
  304. {group.name}
  305. </Select.Option>
  306. ));
  307. return (
  308. <Modal
  309. maskClosable={false}
  310. visible={this.props.visible}
  311. onOk={this.props.onCancel}
  312. onCancel={this.props.onCancel}
  313. width='1200px'
  314. title='公出详细列表'
  315. footer=''
  316. className="admin-desc-content">
  317. <div className="user-content">
  318. <Tabs defaultActiveKey="1" className="test">
  319. <TabPane tab="搜索" key="1">
  320. <div className="user-search" style={{
  321. marginTop:'10px',
  322. marginLeft:'10px',
  323. marginRight:'10px'
  324. }}>
  325. <span style={{ marginRight: "10px" }}>
  326. <AutoComplete
  327. className="certain-category-search"
  328. dropdownClassName="certain-category-search-dropdown"
  329. dropdownMatchSelectWidth={false}
  330. dropdownStyle={{ width: 120 }}
  331. style={{ width: "120px" }}
  332. dataSource={customerOptions}
  333. placeholder='输入客户名称'
  334. value={this.state.customer}
  335. onChange={this.httpCustomerChange}
  336. filterOption={true}
  337. onBlur={this.blurCustomerChange}
  338. onSelect={this.selectCustomerAuto}
  339. >
  340. <Input />
  341. </AutoComplete>
  342. </span>
  343. <span style={{ marginRight: "10px" }}>
  344. <Select
  345. placeholder="请选择审核状态"
  346. style={{ width:200,marginLeft:10}}
  347. value={this.state.status}
  348. onChange={(e) => { this.setState({ status: e }) }}>
  349. <Select.Option value={0} >驳回</Select.Option>
  350. <Select.Option value={1} >发起</Select.Option>
  351. <Select.Option value={2} >通过</Select.Option>
  352. </Select>
  353. </span>
  354. <span style={{ marginRight: "10px" }}>
  355. <AutoComplete
  356. className="certain-category-search"
  357. dropdownClassName="certain-category-search-dropdown"
  358. dropdownMatchSelectWidth={false}
  359. dropdownStyle={{ width: 120 }}
  360. style={{ width: "120px" }}
  361. dataSource={options}
  362. placeholder='输入公出申请人'
  363. value={this.state.auto}
  364. onChange={this.httpChange}
  365. filterOption={true}
  366. onBlur={this.blurChange}
  367. onSelect={this.selectAuto}
  368. >
  369. <Input />
  370. </AutoComplete>
  371. </span>
  372. <span style={{ marginRight: "10px" }}>
  373. <span style={{marginRight:'10px',marginBottom:'10px'}}>公出时间 :</span>
  374. <RangePicker
  375. style={{marginRight:'10px',marginBottom:'10px'}}
  376. value={[
  377. this.state.releaseDate[0]
  378. ? moment(this.state.releaseDate[0])
  379. : null,
  380. this.state.releaseDate[1]
  381. ? moment(this.state.releaseDate[1])
  382. : null,
  383. ]}
  384. onChange={(data, dataString) => {
  385. this.setState({ releaseDate: dataString });
  386. }}
  387. />
  388. </span>
  389. <Button type="primary" onClick={()=>{
  390. this.loadData();
  391. }} style={{marginRight:'10px',marginBottom:'10px'}}>搜索</Button>
  392. <Button onClick={this.resetAll} style={{marginRight:'10px',marginBottom:'10px'}}>重置</Button>
  393. </div>
  394. </TabPane>
  395. <TabPane tab="更改表格显示数据" key="2">
  396. <div style={{ marginLeft: 10 }}>
  397. <ChooseList
  398. columns={this.state.columns}
  399. changeFn={this.changeList}
  400. changeList={this.state.changeList}
  401. top={55}
  402. margin={11}
  403. />
  404. </div>
  405. </TabPane>
  406. </Tabs>
  407. <div className="patent-table">
  408. <Spin spinning={this.state.loading}>
  409. <Table
  410. bordered
  411. size="middle"
  412. scroll={{ x: 800, y: 0 }}
  413. columns={
  414. this.state.changeList.length > 0
  415. ? this.state.changeList
  416. : this.state.columns
  417. }
  418. dataSource={this.state.dataSource}
  419. pagination={this.state.pagination}
  420. />
  421. </Spin>
  422. </div>
  423. </div>
  424. </Modal>
  425. )
  426. }
  427. }
  428. export default DetailedList;