import React from 'react'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import '../distribute/public.less'; import { Button, Input, Spin, Table, Select, Switch, message, DatePicker, Modal, Form, Tabs } from 'antd'; import { getProjectName, getTaskStatus, getBonusState, getLiquidationStatus, getJsyPaymentType } from '@/tools'; import JsBonuseDetail from './jsBonusDetail'; import { ChooseList } from "../../order/orderNew/chooseList"; const FormItem = Form.Item; const { TabPane } = Tabs const JsBonus = React.createClass({ departmentList() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: {}, success: function (data) { let thedata = data.data; let theArr = []; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { thedata.map(function (item, index) { theArr.push({ key: index, name: item.name, id: item.id }); }); } this.setState({ departmentArr: theArr }); }.bind(this) }).always( function () { this.setState({ loading: false }); }.bind(this) ); }, loadData(pageNo) { this.state.data = []; this.setState({ selectedRowKeys: [], selectedRowKey: [], page: pageNo, loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/bonus/technicianBonusStatistics", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, salesName: this.state.orderRefundSearch, //订单负责人 targetName: this.state.projectMenSearch, //项目负责人 departmentId: this.state.departmenttList, orderNo: this.state.orderNoSearch, startTime: this.state.releaseDate[0], endTime: this.state.releaseDate[1], grantStatus: this.state.grantStatus, startTime1: this.state.createDate[0], endTime1: this.state.createDate[1] }, success: function (data) { let theArr = []; if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, id: thisdata.id, tid: thisdata.tid, targetName: thisdata.targetName, orderNo: thisdata.orderNo, taskReceiver: thisdata.taskReceiver, taskStatus: thisdata.taskStatus, commodityQuantity: thisdata.commodityQuantity, projectStatus: thisdata.projectStatus, byName: thisdata.byName, commodityName: thisdata.commodityName, bonusSubject: thisdata.bonusSubject, grantStatus: thisdata.grantStatus, grantTime: thisdata.grantTime, targetName: thisdata.targetName, liquidationStatus: thisdata.liquidationStatus, licenceTime: thisdata.licenceTime, acceptTime: thisdata.acceptTime, reviewTime: thisdata.reviewTime }); } } 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 }); }.bind(this) }).always( function () { this.setState({ loading: false }); }.bind(this) ); }, getInitialState() { return { searchMore: true, releaseDate: [], createDate: [], RowData: {}, execState: false, selectedRowKeys: [], selectedRows: [], changeList: undefined, proofData: {}, loading: false, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; } }, columns: [ { title: "任务编号", dataIndex: "tid", key: "tid", // fixed: "left" }, { title: "订单编号", dataIndex: "orderNo", key: "orderNo" }, { title: "任务名称", dataIndex: "commodityName", key: "commodityName" }, { title: "任务负责人", dataIndex: "targetName", key: "targetName" }, { title: "任务状态", dataIndex: "taskStatus", key: "taskStatus", render: text => { return getTaskStatus(text); } }, { title: "任务数量", dataIndex: "commodityQuantity", key: "commodityQuantity" }, { title: "项目状态", dataIndex: "projectStatus", key: "projectStatus", render: text => { return getProjectName(text); } }, { title: "受理日期", dataIndex: "acceptTime", key: "acceptTime" }, { title: "评审日期", dataIndex: "reviewTime", key: "reviewTime" }, { title: "下证日期", dataIndex: "licenceTime", key: "licenceTime" }, { title: "订单结算状态", dataIndex: "liquidationStatus", key: "liquidationStatus", render: text => { return getLiquidationStatus(text); } }, { title: "发放类型", dataIndex: "bonusSubject", key: "bonusSubject", render: text => { return getJsyPaymentType(text); } }, { title: "发放状态", dataIndex: "grantStatus", key: "grantStatus", render: text => { return getBonusState(text); } }, { title: "操作", dataIndex: "state11", key: "state11", render: (text, recard) => { return ( <div> {!recard.grantStatus && ( <Button type="primary" style={{ margin: "0 10px", display: this.props.isLook ? "none" : "inline-block" }} onClick={e => { e.stopPropagation(), this.proofread(recard); }} > 发放 </Button> )} </div> ); } } ], dataSource: [], searchTime: [,] }; }, proofread(recard) { this.setState({ boHuiVisible: true, proofData: recard }); }, tableRowClick(record, index) { this.state.RowData = record; this.setState({ showDesc: true }); }, closeDesc(e, s) { this.state.RowData = {}; this.state.showDesc = e; if (s) { this.loadData(this.state.page); } }, componentWillMount() { this.loadData(); this.departmentList(); }, search() { this.loadData(); }, boHuiOk() { this.setState({ boHuiVisible: false }); this.loadData(this.state.page); }, boHuiCancel(e) { this.setState({ boHuiVisible: false }); }, //导出 exportExec() { let departmentName = "", depart = this.state.departmentArr || []; depart.map(item => { if (this.state.departmentId == item.id) { departmentName = item.name; return; } }); let data = { departmentId: this.state.departmentId, departmentName: departmentName, salesName: this.state.orderRefundSearch, //订单负责人 targetName: this.state.projectMenSearch, //项目负责人 startTime: this.state.releaseDate[0], endTime: this.state.releaseDate[1], grantStatus: this.state.grantStatus, startTime1: this.state.createDate[0], endTime1: this.state.createDate[1] }; window.location.href = globalConfig.context + "/api/admin/bonus/exportTechnicianBonusData?" + $.param(data); }, //保存发放状态 boHuiSubmit(e) { e.preventDefault(); this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/bonus/changeBonus", data: { id: this.state.proofData.id } }).done( function (data) { if (!data.error.length) { message.success("发放成功!"); this.boHuiOk(); } else { message.warning(data.error[0].message); } this.setState({ loading: false }); }.bind(this) ); }, reset() { this.state.orderRefundSearch = ""; this.state.projectMenSearch = ""; this.state.releaseDate = []; this.state.createDate = []; this.state.orderNoSearch = ""; this.state.grantStatus = undefined; this.state.departmenttList = undefined; this.loadData(); }, searchSwitch() { this.setState({ searchMore: !this.state.searchMore }); }, changeList(arr) { const newArr = []; this.state.columns.forEach(item => { arr.forEach(val => { if (val === item.title) { newArr.push(item); } }); }); this.setState({ changeList: newArr }); }, render() { const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); } }; const hasSelected = this.state.selectedRowKeys.length > 0; const { RangePicker } = DatePicker; let departmentArr = this.state.departmentArr || []; return ( <div className="user-content"> <div className="content-title" style={{ marginBottom: 10 }}> <span style={{ fontWeight: 900, fontSize: 16 }}>技术员奖金</span> </div> <div className="user-search"> <Tabs defaultActiveKey="1" onChange={this.callback} className="test"> <TabPane tab="搜索" key="1"> <Select placeholder="订单部门" style={{ width: 150, marginRight: 10, marginLeft: 10, marginBottom: 10 }} value={this.state.departmenttList} onChange={e => { this.setState({ departmenttList: e }); }} > {departmentArr.map(function (item) { return <Select.Option key={item.id}>{item.name}</Select.Option>; })} </Select> <Input placeholder="订单编号" value={this.state.orderNoSearch} style={{ width: 150, marginRight: 10 }} onChange={e => { this.setState({ orderNoSearch: e.target.value }); }} /> <Input placeholder="任务负责人" value={this.state.projectMenSearch} style={{ width: 150, marginRight: 10 }} onChange={e => { this.setState({ projectMenSearch: e.target.value }); }} /> <Select placeholder="发放状态" style={{ width: 150, marginRight: 10 }} value={this.state.grantStatus} onChange={e => { this.setState({ grantStatus: e }); }} > <Option value="0">未发放</Option> <Option value="1">已发放</Option> </Select> <Button type="primary" onClick={this.search} style={{ marginRight: 10 }}> 搜索 </Button> <Button onClick={this.reset} style={{ marginRight: 10 }}>重置</Button> <span> 更多搜索 <Switch defaultChecked={false} onChange={this.searchSwitch.bind(this)} /> </span> <div className="search-more" style={this.state.searchMore ? { display: "none" } : {}} > <span style={{ marginLeft: 10 }}>签单时间 :</span> <RangePicker format="YYYY-MM" 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> <RangePicker format="YYYY-MM-DD" value={[ this.state.createDate[0] ? moment(this.state.createDate[0]) : null, this.state.createDate[1] ? moment(this.state.createDate[1]) : null ]} onChange={(data, dataString) => { this.setState({ createDate: dataString }); }} /> </div> </TabPane> <TabPane tab="导出" key="2"> <Button onClick={this.exportExec} type="primary" style={{ margin: 10 }}> 导出excel </Button> </TabPane> <TabPane tab="更改表格数据" key="3"> <div style={{ margin: 10, marginBottom: 0 }}> <ChooseList columns={this.state.columns} changeFn={this.changeList} changeList={this.state.changeList} top={55} display={"inline-block"} /> </div> </TabPane> </Tabs> </div> <div className="patent-table" id="table"> <Spin spinning={this.state.loading}> <Table bordered columns={ this.state.changeList == undefined ? this.state.columns : this.state.changeList } dataSource={this.state.dataSource} scroll={{ x: 1500, y: 0 }} rowSelection={false} pagination={this.state.pagination} onRowClick={this.tableRowClick} bordered size="small" /> </Spin> </div> <JsBonuseDetail data={this.state.RowData} showDesc={this.state.showDesc} closeDesc={this.closeDesc.bind(this)} /> <Modal visible={this.state.boHuiVisible} width="400px" title="发放" footer="" onOk={this.boHuiOk} onCancel={this.boHuiCancel} > <Form layout="horizontal" onSubmit={this.boHuiSubmit}> <Spin spinning={this.state.loading}> <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 10 }} label="应收人" > <span>{this.state.proofData.targetName}</span> </FormItem> <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 10 }} label="发放人" > <span>{this.state.proofData.byName}</span> </FormItem> <FormItem wrapperCol={{ span: 12, offset: 8 }}> <Button type="primary" htmlType="submit" style={{ marginRight: 20 }} > 发放 </Button> <Button type="default" onClick={() => { this.boHuiCancel(); }} > 取消 </Button> </FormItem> </Spin> </Form> </Modal> </div> ); } }); export default JsBonus;