import React, { Component } from 'react'; import { AutoComplete, Button, DatePicker, Input, message, Select, Spin, Table, Tabs } from "antd"; import { ShowModal, } from "@/tools"; import { ChooseList } from "../../order/orderNew/chooseList"; import $ from "jquery/src/ajax"; import './index.less'; import moment from "moment"; import DetailedList from './detailedList'; import { object } from "prop-types"; const { TabPane } = Tabs; const { RangePicker } = DatePicker; class ProjecCount extends Component { constructor(props) { super(props); this.state = { pageNo: 1, loading: false, changeList: undefined, columns: [ { title: "编号", dataIndex: "key", key: "key", }, { title: "公出人员", dataIndex: "name", key: "name", }, { title: "公出次数", dataIndex: "tg", key: "tg", className: 'projectTable', onCellClick: (record, event) => { event.stopPropagation(); this.setState({ status: 2, visible: true, aid: record.aid, title: '公出次数', aName: record.name, }) } }, { title: "总时长(时)", dataIndex: "duration", key: "duration", className: 'projectTable', onCellClick: (record, event) => { event.stopPropagation(); this.setState({ status: 2, visible: true, aid: record.aid, title: '总时长(时)', aName: record.name, }) } }, { title: "未审核次数", dataIndex: "wsh", key: "wsh", className: 'projectTable', onCellClick: (record, event) => { event.stopPropagation(); this.setState({ status: 1, visible: true, aid: record.aid, title: '未审核次数', aName: record.name, }) } }, { title: "驳回次数", dataIndex: "bh", key: "bh", className: 'projectTable', onCellClick: (record, event) => { event.stopPropagation(); this.setState({ status: 0, visible: true, aid: record.aid, title: '驳回次数', aName: record.name, }) } }, { title: "已打卡次数", dataIndex: "dk", key: "dk", className: 'projectTable', onCellClick: (record, event) => { event.stopPropagation(); this.setState({ status: undefined, clockIn: 1, visible: true, aid: record.aid, title: '已打卡次数', aName: record.name, }) } }, ], pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; } }, dataSource: [], releaseDate: [], createReleaseDate: [], superId: undefined, clockIn: 0, } this.loadData = this.loadData.bind(this); this.resetAll = this.resetAll.bind(this); this.changeList = this.changeList.bind(this); this.selectSuperId = this.selectSuperId.bind(this); this.supervisor = this.supervisor.bind(this); this.httpChange = this.httpChange.bind(this); this.blurChange = this.blurChange.bind(this); this.selectAuto = this.selectAuto.bind(this); this.exportExec = this.exportExec.bind(this); } //获取上级组织 selectSuperId() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: {}, success: function (data) { let theArr = []; if (data.error && data.error.length === 0) { for (let i = 0; i < data.data.length; i++) { let theData = data.data[i]; theArr.push( <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option> ); }; this.setState({ contactsOption: theArr, }); } else { message.warning(data.error[0].message); } }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); } changeList(arr) { const newArr = []; this.state.columns.forEach(item => { arr.forEach(val => { if (val === item.title) { newArr.push(item); } }); }); this.setState({ changeList: newArr }); } loadData(pageNo) { this.setState({ loading: true }) $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/release/publicReleaseStatistics", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, clockStart: this.state.releaseDate[0] || undefined, clockEnd: this.state.releaseDate[1] || undefined, createStart: this.state.createReleaseDate[0] || undefined, createEnd: this.state.createReleaseDate[1] || undefined, depId: this.state.superId || undefined, aid: this.state.theTypes }, success: function (data) { ShowModal(this); this.setState({ loading: false }) let theArr = []; if (data.error && data.error.length === 0) { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; thisdata.key = (data.data.pageNo - 1) * data.data.pageSize + i + 1; theArr.push(thisdata); } this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; if (data.data && data.data.list && !data.data.list.length) { this.state.pagination.current = 0; this.state.pagination.total = 0; } this.setState({ dataSource: theArr, pagination: this.state.pagination, pageNo: data.data.pageNo }); } else { message.warning(data.error[0].message); } }.bind(this) }).always( function () { this.setState({ loading: false }); }.bind(this) ); } resetAll() { this.setState({ releaseDate: [], createReleaseDate: [], superId: undefined, theTypes: undefined, auto: '' }, () => { this.loadData(); }) } supervisor(e) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/listAdminByName", data: { adminName: e, }, success: function (data) { let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thedata = {}; } this.setState({ customerArr: thedata, }); }.bind(this), }).always( function () { }.bind(this) ); } httpChange(e) { if (e.length >= 1) { this.supervisor(e); } this.setState({ auto: e, }); } selectAuto(value, options) { this.setState({ auto: value, }); } blurChange(e) { let theType = ""; let contactLists = this.state.customerArr || []; if (e) { contactLists.map(function (item) { if (item.name == e.toString()) { theType = item.id; } }); } this.setState({ theTypes: theType, }); } componentWillMount() { this.loadData(); this.selectSuperId(); } // 导出 exportExec() { //debugger let data = { clockStart: this.state.releaseDate[0], clockEnd: this.state.releaseDate[1], createStart: this.state.createReleaseDate[0], createEnd: this.state.createReleaseDate[1], depId: this.state.superId, aid: this.state.theTypes }; for (let i of Object.keys(data)) { if (!data[i]) { delete data[i] } } window.location.href = globalConfig.context + "/api/admin/release/publicReleaseStatistics/export?" + $.param(data); } render() { const dataSources = this.state.customerArr || []; const options = dataSources.map((group) => ( <Select.Option key={group.id} value={group.name}> {group.name} </Select.Option> )); return ( <div className="user-content"> <div className="content-title"> <span> 公出统计 </span> </div> <Tabs defaultActiveKey="1" className="test"> <TabPane tab="搜索" key="1"> <div className="user-search" style={{ marginTop: '10px', marginLeft: '10px', marginRight: '10px' }}> <span style={{ marginRight: "10px" }}> <Select placeholder="请选择部门" style={{ width: 200, marginLeft: 10 }} value={this.state.superId} onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表"> {this.state.contactsOption} </Select> </span> <span style={{ marginRight: "10px" }}> <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} style={{ width: "120px" }} dataSource={options} placeholder='输入公出申请人' value={this.state.auto} onChange={this.httpChange} filterOption={true} onBlur={this.blurChange} onSelect={this.selectAuto} > <Input /> </AutoComplete> </span> <span style={{ marginRight: "10px" }}> <span style={{ marginRight: '10px', marginBottom: '10px' }}>打卡时间 :</span> <RangePicker style={{ marginRight: '10px', marginBottom: '10px' }} value={[ this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null, this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null, ]} onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} /> </span> <span style={{ marginRight: "10px" }}> <span style={{ marginRight: '10px', marginBottom: '10px' }}>创建时间 :</span> <RangePicker style={{ marginRight: '10px', marginBottom: '10px' }} value={[ this.state.createReleaseDate[0] ? moment(this.state.createReleaseDate[0]) : null, this.state.createReleaseDate[1] ? moment(this.state.createReleaseDate[1]) : null, ]} onChange={(data, dataString) => { this.setState({ createReleaseDate: dataString }); }} /> </span> <Button type="primary" onClick={() => { this.loadData(); }} style={{ marginRight: '10px', marginBottom: '10px' }}>搜索</Button> <Button onClick={this.resetAll} style={{ marginRight: '10px', marginBottom: '10px' }}>重置</Button> </div> </TabPane> <TabPane tab="更改表格显示数据" key="2"> <div style={{ marginLeft: 10 }}> <ChooseList columns={this.state.columns} changeFn={this.changeList} changeList={this.state.changeList} top={55} margin={11} /> </div> </TabPane> <TabPane tab="导出" key="3"> <div style={{ float: "left" }}> <Button onClick={this.exportExec} style={{ margin: 10 }}>导出excel</Button> </div> </TabPane> </Tabs> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table bordered size="middle" scroll={{ x: 800, y: 0 }} columns={ this.state.changeList ? this.state.changeList : this.state.columns } dataSource={this.state.dataSource} pagination={this.state.pagination} /> </Spin> </div> {this.state.visible && <DetailedList status={this.state.status} title={this.state.title} aid={this.state.aid} aName={this.state.aName} depId={this.state.depId} createReleaseDate={this.state.createReleaseDate} releaseDate={this.state.releaseDate} clockIn={this.state.clockIn || undefined} visible={this.state.visible} onCancel={() => { this.setState({ visible: false, clockIn: 0, }) }} /> } </div> ) } } export default ProjecCount;