index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. import React,{Component} from "react";
  2. import {AutoComplete, Button, DatePicker, Input, message, Select, Spin, Table, Tabs} from "antd";
  3. import {
  4. ShowModal,
  5. } from "@/tools";
  6. import {ChooseList} from "../../manageCenter/order/orderNew/chooseList";
  7. import $ from "jquery/src/ajax";
  8. import moment from "moment";
  9. const {TabPane} = Tabs;
  10. const { RangePicker } = DatePicker;
  11. class TabelContent extends Component{
  12. constructor(props) {
  13. super(props);
  14. this.state={
  15. changeList:[],
  16. dataSource:[],
  17. pagination: {
  18. defaultCurrent: 1,
  19. defaultPageSize: 10,
  20. showQuickJumper: true,
  21. pageSize: 10,
  22. onChange: function(page) {
  23. this.loadData(page);
  24. }.bind(this),
  25. showTotal: function(total) {
  26. return "共" + total + "条数据";
  27. }
  28. },
  29. searchValues:{},
  30. contactsOption:[]
  31. }
  32. this.loadData= this.loadData.bind(this);
  33. this.exportExec= this.exportExec.bind(this);
  34. this.selectSuperId= this.selectSuperId.bind(this);
  35. }
  36. loadData(pageNo) {
  37. this.setState({
  38. loading:true
  39. })
  40. $.ajax({
  41. method: "get",
  42. dataType: "json",
  43. crossDomain: false,
  44. url: globalConfig.context + this.props.tabelApi,
  45. data: {
  46. pageNo: pageNo || 1,
  47. pageSize: this.state.pagination.pageSize,
  48. },
  49. success: function(data) {
  50. ShowModal(this);
  51. this.setState({
  52. loading:false
  53. })
  54. if (data.error && data.error.length === 0) {
  55. this.state.pagination.current = data.data.pageNo;
  56. this.state.pagination.total = data.data.totalCount;
  57. if (data.data && data.data.list && !data.data.list.length) {
  58. this.state.pagination.current = 0;
  59. this.state.pagination.total = 0;
  60. }
  61. this.setState({
  62. dataSource: this.props.dataProcessing ? this.props.dataProcessing(data) : data.data.list,
  63. pagination: this.state.pagination,
  64. pageNo:data.data.pageNo
  65. });
  66. }else{
  67. message.warning(data.error[0].message);
  68. }
  69. }.bind(this)
  70. }).always(
  71. function() {
  72. this.setState({
  73. loading: false
  74. });
  75. }.bind(this)
  76. );
  77. }
  78. exportExec(){
  79. let data = {
  80. clockStart:this.state.releaseDate[0],
  81. clockEnd:this.state.releaseDate[1],
  82. createStart:this.state.createReleaseDate[0],
  83. createEnd:this.state.createReleaseDate[1],
  84. depId:this.state.superId,
  85. aid:this.state.theTypes
  86. };
  87. for(let i of Object.keys(data)){
  88. if(!data[i]){
  89. delete data[i]
  90. }
  91. }
  92. window.location.href =
  93. globalConfig.context +
  94. this.props.exportApi + "?" +
  95. $.param(data);
  96. }
  97. //获取上级组织
  98. selectSuperId() {
  99. this.setState({
  100. departmentLoading: true
  101. });
  102. $.ajax({
  103. method: "get",
  104. dataType: "json",
  105. crossDomain: false,
  106. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  107. data:{},
  108. success: function (data) {
  109. let theArr = [];
  110. if (data.error && data.error.length === 0) {
  111. for(let i=0;i<data.data.length;i++){
  112. let theData = data.data[i];
  113. theArr.push(
  114. {
  115. value:theData.id,
  116. label:theData.name
  117. }
  118. );
  119. };
  120. this.setState({
  121. contactsOption: theArr,
  122. });
  123. }else{
  124. message.warning(data.error[0].message);
  125. }
  126. }.bind(this),
  127. }).always(function () {
  128. this.setState({
  129. departmentLoading: false
  130. });
  131. }.bind(this));
  132. }
  133. componentDidMount() {
  134. this.loadData();
  135. if(this.props.searchList){
  136. let arr = this.props.searchList.filter(v=>v.type === 'departmentSelect')
  137. let arr1 = this.props.searchList.filter(v=>v.defaultValue)
  138. if(arr.length > 0){
  139. this.selectSuperId();
  140. }
  141. if(arr1.length > 0){
  142. for(let i of arr1){
  143. this.state.searchValues[i.dataKey] = i.defaultValue
  144. }
  145. }
  146. }
  147. }
  148. render() {
  149. const { searchValues } = this.state;
  150. return (
  151. <div>
  152. <Tabs defaultActiveKey="1" className="test">
  153. <TabPane tab="搜索" key="1">
  154. <div className="user-search" style={{
  155. marginTop:'10px',
  156. marginLeft:'10px',
  157. marginRight:'10px',
  158. display:'flex',
  159. alignItems:'center'
  160. }}>
  161. {
  162. (this.props.searchList || []).map((v,k)=>(
  163. v.type === 'text' ?
  164. <span>
  165. <Input
  166. key={k}
  167. placeholder={v.placeholder}
  168. value={v.value ? v.value : (v.defaultValue || undefined)}
  169. style={v.style ? v.style : { width: 150, marginRight: 10}}
  170. onChange={(e) => {
  171. searchValues[v.dataKey] = e.target.value
  172. this.setState({
  173. searchValues: searchValues
  174. });
  175. }}
  176. />
  177. </span> :
  178. v.type === 'select' || v.type === 'departmentSelect' ?
  179. <span style={{paddingBottom:'9px'}}>
  180. <Spin spinning={this.state.departmentLoading}>
  181. {
  182. <Select
  183. key={k}
  184. placeholder={v.placeholder}
  185. style={v.style ? v.style : { width:200,marginRight: 10}}
  186. value={searchValues[v.dataKey] ? searchValues[v.dataKey] : (v.defaultValue || undefined)}
  187. onChange={(e) => {
  188. searchValues[v.dataKey] = String(e);
  189. this.setState({
  190. searchValues: searchValues
  191. });
  192. }}>
  193. {
  194. v.selectOptionList ?
  195. v.selectOptionList:
  196. (
  197. v.type === 'departmentSelect' ?
  198. this.state.contactsOption :
  199. (v.selectList || [])
  200. ).map((v)=>(
  201. <Select.Option
  202. key={v.value}
  203. value={v.value}
  204. >
  205. {v.label}
  206. </Select.Option>
  207. ))
  208. }
  209. </Select>
  210. }
  211. </Spin>
  212. </span>: v.type === 'times' ?
  213. <span style={{display:'flex'}}>
  214. <div style={{marginRight:'10px',marginBottom:'10px'}}>{v.title}</div>
  215. <span>
  216. <RangePicker
  217. style={{marginRight:'10px',marginBottom:'10px'}}
  218. value={[
  219. searchValues[v.dataKey[0]]
  220. ? moment(searchValues[v.dataKey[0]])
  221. : null,
  222. searchValues[v.dataKey[1]]
  223. ? moment(searchValues[v.dataKey[1]])
  224. : null,
  225. ]}
  226. onChange={(data, dataString) => {
  227. searchValues[v.dataKey[0]] = String(dataString[0]);
  228. searchValues[v.dataKey[1]] = String(dataString[1]);
  229. this.setState({
  230. searchValues: searchValues
  231. });
  232. }}
  233. />
  234. </span>
  235. </span>:
  236. null
  237. ))
  238. }
  239. <Button type="primary" onClick={()=>{
  240. this.loadData();
  241. }} style={{marginRight:'10px',marginBottom:'10px'}}>搜索</Button>
  242. <Button onClick={this.resetAll} style={{marginRight:'10px',marginBottom:'10px'}}>重置</Button>
  243. </div>
  244. </TabPane>
  245. <TabPane tab="更改表格显示数据" key="2">
  246. <div style={{ marginLeft: 10 }}>
  247. <ChooseList
  248. columns={this.props.columns}
  249. changeFn={this.changeList}
  250. changeList={this.state.changeList}
  251. top={55}
  252. margin={11}
  253. />
  254. </div>
  255. </TabPane>
  256. {this.props.exportApi && <TabPane tab="导出" key="3">
  257. <div style={{ float: "left" }}>
  258. <Button onClick={this.exportExec} style={{ margin: 10 }}>导出excel</Button>
  259. </div>
  260. </TabPane>}
  261. </Tabs>
  262. <div className="patent-table">
  263. <Spin spinning={this.state.loading}>
  264. <Table
  265. bordered
  266. size="middle"
  267. scroll={{ x: 800, y: 0 }}
  268. columns={
  269. this.state.changeList.length > 0
  270. ? this.state.changeList
  271. : this.props.columns
  272. }
  273. dataSource={this.state.dataSource}
  274. pagination={this.state.pagination}
  275. />
  276. </Spin>
  277. </div>
  278. </div>
  279. )
  280. }
  281. }
  282. export default TabelContent;