import React, { Component } from "react"; import { Button, DatePicker, Input, message, Select, Spin, Table, Tabs, Cascader, AutoComplete, } from "antd"; import { ShowModal } from "@/tools"; import { ChooseList } from "../../order/orderNew/chooseList"; import $ from "jquery/src/ajax"; import moment from "moment"; import { member, highTechColumns, doubleSoft, softWriting, patent, audit, currency, } from "./highTechConfig"; import { projectStatusList } from "@/dataDic"; import ProjectDetails from "./projectDetails"; import Cascaders from "../../../common/cascaders"; const { TabPane } = Tabs; const { RangePicker } = DatePicker; const { Option } = Select; class HighTech extends Component { constructor(props) { super(props); this.state = { tbaindex: 1, loading: false, changeList: undefined, columns: currency, status: 0, page: 1, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; }, }, dataSource: [], releaseDate: [], searchOrderNo: "", searchContractNo: "", searchEnterpriseName: "", declarationBatch: "", projectSituation: "", projectAmount: "", deps: "", thchDeps: "", projectType: "", projectStatus: "", departmentArr: [], contactsOption: [], contactsOptionData: [], visible: false, }; this.resetAll = this.resetAll.bind(this); this.changeList = this.changeList.bind(this); this.loadData = this.loadData.bind(this); this.selectSuperId = this.selectSuperId.bind(this); this.supervisor = this.supervisor.bind(this); this.httpChange = this.httpChange.bind(this); this.selectAuto = this.selectAuto.bind(this); this.blurChange = this.blurChange.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/statistis/selectTaskList", data: this.props.searchData ? Object.assign( { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize || 10, }, this.props.searchData ) : { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize || 10, startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0] : undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1] : undefined, //结束时间 deps: this.state.deps || undefined, //部门ID thchDeps: this.state.thchDeps || undefined, //责任部门ID projectStatus: this.state.projectStatus || undefined, //项目类别 projectType: !this.state.projectType ? undefined : this.state.projectType, //项目分类 orderNo: this.state.searchOrderNo || undefined, //订单编号 contractNo: this.state.searchContractNo || undefined, //合同编号 userName: this.state.searchEnterpriseName || undefined, //企业名称 declarationBatch: this.state.declarationBatch || undefined, //申报批次 projectSituation: typeof this.state.projectSituation === "number" ? this.state.projectSituation : undefined, //项目分类 projectAmount: this.state.projectAmount || undefined, //项目金额 status: this.state.status, thchId: this.state.thchId || undefined, //咨询师/咨询经理id taskProjectStatus: this.state.taskProjectStatus || undefined,//项目状态 sdStatus: this.state.sdStatus,//满意度 }, success: function (data) { ShowModal(this); 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]; 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({ pagination: this.state.pagination, page: pageNo, dataSource: theArr, }); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } resetAll() { this.setState( { newArray: [], releaseDate: [], searchOrderNo: "", searchContractNo: "", searchEnterpriseName: "", declarationBatch: "", projectSituation: "", projectAmount: "", projectType: "", deps: "", thchDeps: "", projectStatus: "", columns: currency, status: 0, thchId: "", auto: "", taskProjectStatus: "", sdStatus: undefined, }, () => { this.Cascaders1.empty(); this.Cascaders2.empty(); this.defaultcolumns(); this.loadData(); } ); } //项目类别 selectSuperId() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/ProjectSize/getAllCname", data: { flag: 0, }, success: function (data) { let theArr = []; let newTheArr = [] let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } for (let i = 0; i < data.data.length; i++) { let theData = data.data[i]; theArr.push( <Select.Option value={theData.id} key={theData.cname}> {theData.cname} </Select.Option> ); let newChildren = [] for (let j = 0; j < theData.typeList.length; j++) { newChildren.push({ label: theData.typeList[j].name, value: theData.typeList[j].id, }) } newTheArr.push({ label: theData.cname, value: theData.id, children: newChildren }) } this.setState({ contactsOption: theArr, contactsOptionData: newTheArr, // contactsOptionData: data.data, }); }.bind(this), }).always(); } // 设置默认table(用来默认不显示某列数据 isNoD:true) defaultcolumns() { const newArr = []; this.state.columns.forEach((item) => { if (item.isNoD) { return } else { newArr.push(item); } }); this.setState({ changeList: newArr, }, () => { this.loadData(); }); } // 导出excel exportExec() { message.config({ duration: 20, }); let loading = message.loading("下载中..."); this.setState({ exportPendingLoading: true, }); let data = { startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0] : undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1] : undefined, //结束时间 deps: this.state.deps || undefined, //部门ID thchDeps: this.state.thchDeps || undefined, //责任部门ID projectStatus: this.state.projectStatus || undefined, //项目类别 projectType: !this.state.projectType ? undefined : this.state.projectType, //项目分类 status: this.state.status, orderNo: this.state.searchOrderNo || undefined, //订单编号 contractNo: this.state.searchContractNo || undefined, //合同编号 userName: this.state.searchEnterpriseName || undefined, //企业名称 declarationBatch: this.state.declarationBatch || undefined, //申报批次 projectAmount: this.state.projectAmount || undefined, //项目金额 thchId: this.state.thchId || undefined, //咨询师/咨询经理id taskProjectStatus: this.state.taskProjectStatus || undefined,//项目状态 sdStatus: this.state.sdStatus,//满意度 }; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: "/api/admin/statistis/exporTaskList", data, success: function (data) { if (data.error.length === 0) { this.download(data.data); } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { loading(); this.setState({ exportPendingLoading: false, }); }.bind(this) ); } // 下载 download(fileName) { window.location.href = globalConfig.context + "/open/download?fileName=" + fileName; } // 查询用户 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) { let thchId = "" let contactLists = this.state.customerArr || []; if (value) { contactLists.map(function (item) { if (item.name == value.toString()) { thchId = item.id; } }); } this.setState({ auto: value, thchId: thchId, }); } // 失去焦点 blurChange(e) { let thchId = "" let contactLists = this.state.customerArr || []; if (e) { contactLists.map(function (item) { if (item.name == e.toString()) { thchId = item.id; } }); } this.setState({ thchId: thchId, }); } componentWillMount() { // if (!this.props.introduce) { this.defaultcolumns(); this.selectSuperId(); } if (this.props.searchData) { let e = this.props.searchData.projectType; this.setState({ columns: e == "0" ? currency : e == "1" ? patent : e == "2" ? softWriting : e == "3" ? audit : e == "4" ? doubleSoft : e == "5" ? highTechColumns : e == "6" ? currency : e == "7" ? member : currency, }, () => { this.defaultcolumns(); }); } } // 暂停项目 颜色 suspendColor(record) { if (record.projectStatus == 29) { return 'light' } else { return 'dark' } } 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"> {this.props.introduce ? ( this.props.introduce() ) : ( <div> <div className="content-title" style={{ marginBottom: 10 }}> <span style={{ fontWeight: 900, fontSize: 16 }}> 项目汇总表 ( {this.state.status === 1 ? "高新" : this.state.status === 2 ? "双软" : this.state.status === 3 ? "软著" : this.state.status === 4 ? "专利" : this.state.status === 5 ? "会员" : this.state.status === 6 ? "审计" : "通用"} ) </span> </div> <Tabs defaultActiveKey="1" className="test" onChange={e => { this.setState({ tbaindex: e }) }} > <TabPane tab="搜索" key="1"> <div className="user-search" style={{ marginTop: "10px", marginLeft: "10px", marginRight: "10px", }} > <Input placeholder="订单编号" style={{ width: 220, marginRight: "10px", }} value={this.state.searchOrderNo} onChange={(e) => { this.setState({ searchOrderNo: e.target.value }); }} /> <Input placeholder="合同编号" style={{ width: 220, marginRight: "10px", }} value={this.state.searchContractNo} onChange={(e) => { this.setState({ searchContractNo: e.target.value }); }} /> <Input placeholder="企业名称" style={{ width: 220, marginRight: "10px", }} value={this.state.searchEnterpriseName} onChange={(e) => { this.setState({ searchEnterpriseName: e.target.value }); }} /> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px" }}>项目分类:</span> <Cascader options={this.state.contactsOptionData} value={this.state.newArray} placeholder="请选择" style={{ width: 150, marginRight: 10 }} onChange={(e, pre) => { let first = e[0]; let two = e[1]; this.setState({ newArray: e, projectStatus: first, projectType: two, changeList: undefined, dataSource: [], status: two == "4" ? 2 : two == "3" ? 6 : two == "2" ? 3 : two == "1" ? 4 : two == "5" ? 1 : two == "7" ? 5 : 0, columns: two == "0" ? currency : two == "1" ? patent : two == "2" ? softWriting : two == "3" ? audit : two == "4" ? doubleSoft : two == "5" ? highTechColumns : two == "6" ? currency : two == "7" ? member : currency, }, () => { this.defaultcolumns() }) }} /> </span> {/* <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px" }}> 项目类别 : </span> <Select value={this.state.projectStatus || undefined} placeholder="请选择项目类别" notFoundContent="未获取到上级品类列表" style={{ width: 150, marginRight: "10px", }} onChange={(e) => { let infor = this.state.contactsOptionData.filter( (v) => v.id === e ); this.setState( { projectStatus: e, }, // () => { // if (infor[0].cname === '高新会员服务' && typeof this.state.projectType !== 'number') { // this.setState({ // columns: highTechColumns, // dataSource: [], // changeList: [], // status: 1, // }, () => { // this.loadData(); // }) // } else if (typeof this.state.projectType !== 'number') { // this.setState({ // columns: currency, // dataSource: [], // changeList: [], // status: 0, // }, () => { // this.loadData(); // }) // } else { // this.loadData(); // } // } ); }} > {this.state.contactsOption} </Select> </span> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px", marginBottom: "10px" }}> 项目分类 : </span> <Select value={ typeof this.state.projectType === "number" ? this.state.projectType : undefined } placeholder="请选择项目分类" style={{ width: 150, marginRight: "10px", }} onChange={(e) => { this.setState( { columns: e === 0 ? currency : e === 1 ? patent : e === 2 ? softWriting : e === 3 ? currency : e === 4 ? doubleSoft : e === 5 ? highTechColumns : e === 6 ? currency : currency, changeList: [], projectType: e, status: e === 4 ? 2 : e === 2 ? 3 : e === 1 ? 4 : e === 5 ? 1 : 0, dataSource: [], }, () => { this.defaultcolumns(); this.loadData(); } ); }} > <Option value={0}>通用</Option> <Option value={1}>专利</Option> <Option value={2}>软著</Option> <Option value={3}>审计</Option> <Option value={4}>双软</Option> <Option value={5}>高新</Option> <Option value={6}>商标</Option> <Option value={7}>会员</Option> </Select> </span> */} <span style={{ display: "inline-block", }} > <span style={{ marginBottom: "10px" }}>订单部门:</span> <Cascaders ref={ref => this.Cascaders1 = ref} placeholder="请选择订单部门" height={28} width={150} onSel={(e) => { this.setState({ deps: JSON.stringify(e) }) }} /> </span> <span style={{ display: "inline-block", }} > <span style={{ marginBottom: "10px" }}>负责部门:</span> <Cascaders ref={ref => this.Cascaders2 = ref} placeholder="请选择负责部门" height={28} width={150} onSel={(e) => { this.setState({ thchDeps: JSON.stringify(e) }) }} /> </span> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px", marginBottom: "10px" }}> 咨询师/经理: </span> <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} style={{ width: 130 }} dataSource={options} placeholder='请输入姓名' value={this.state.auto} onChange={this.httpChange} filterOption={true} onBlur={this.blurChange} onSelect={this.selectAuto} > <Input /> </AutoComplete> </span> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px", marginBottom: "10px" }}> 申报批次: </span> <Select value={this.state.declarationBatch || undefined} placeholder="请选择批次" style={{ width: 150, marginRight: "10px", }} onChange={(e) => { this.setState({ declarationBatch: e, }); }} > <Option value={1}>第一批</Option> <Option value={2}>第二批</Option> <Option value={3}>第三批</Option> <Option value={4}>第四批</Option> </Select> </span> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px" }}> 项目金额: </span> <Select value={this.state.projectAmount || undefined} placeholder="请选择项目金额" style={{ width: 150, marginRight: "10px", }} onChange={(e) => { this.setState({ projectAmount: e, }); }} > <Option value={1}>0~0.5万</Option> <Option value={2}>0.5~1万</Option> <Option value={3}>1~2万</Option> <Option value={4}>2~5万</Option> <Option value={5}>5~10万</Option> <Option value={6}>10~30万</Option> <Option value={7}>30~50万</Option> <Option value={8}>50~80万</Option> <Option value={9}>80万上</Option> </Select> </span> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px" }}> 项目状态: </span> <Select value={this.state.taskProjectStatus || undefined} placeholder="请选择项目状态" style={{ width: 150, marginRight: "10px", }} onChange={(e) => { this.setState({ taskProjectStatus: e, }); }} > { projectStatusList.map((item) => <Option value={item.value} key={item.value}>{item.label}</Option> ) } </Select> </span> {/* <span style={{display:"inline-block"}}>*/} {/* <span style={{marginRight:'10px',marginBottom:'10px'}}>项目情况 :</span>*/} {/* <Select*/} {/* value={typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined}*/} {/* placeholder="请选择项目情况"*/} {/* style={{ width: 200,marginRight:'10px',marginBottom:'10px' }}*/} {/* onChange={(e) => {*/} {/* this.setState({*/} {/* projectSituation: e,*/} {/* });*/} {/* }}*/} {/* >*/} {/* <Option value={0}>未开始</Option>*/} {/* <Option value={1}>进行中</Option>*/} {/* <Option value={2}>已暂停</Option>*/} {/* <Option value={3}>已驳回(专利、软著项目编写)</Option>*/} {/* <Option value={4}>已完成</Option>*/} {/* <Option value={5}>项目已完成 已退单</Option>*/} {/* <Option value={6}>项目未完成 已退单</Option>*/} {/* </Select>*/} {/*</span>*/} <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px" }}> 满 意 度: </span> <Select value={this.state.sdStatus} placeholder="请选择满意度" style={{ width: 150, marginRight: "10px", }} onChange={(e) => { this.setState({ sdStatus: e, }); }} > <Option value={0}>未发放</Option> <Option value={1}>已发放</Option> <Option value={2}>已回收(非常满意)</Option> <Option value={3}>已回收(满意)</Option> <Option value={4}>已回收(一般)</Option> <Option value={5}>已回收(不满意)</Option> </Select> </span> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px" }}> 派单时间: </span> <RangePicker allowClear={false} style={{ marginRight: "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> <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"> { this.state.tbaindex == 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="导出EXCEL" key="3"> <Button type="primary" style={{ margin: "10px" }} onClick={this.exportExec.bind(this)} > 导出excel </Button> </TabPane> </Tabs> </div> )} <div className="patent-table"> <Spin spinning={this.state.loading}> <Table bordered size="middle" scroll={{ x: this.state.status === 4 || this.state.status === 3 ? 1800 : 1000, y: 0, }} columns={ (this.state.changeList && this.state.changeList.length != 0) ? this.state.changeList : this.state.columns } dataSource={this.state.dataSource} pagination={this.state.pagination} style={{ cursor: "pointer", }} rowClassName={this.suspendColor} onRowClick={(record) => { this.setState({ projectdetailsId: record.id, projectdetailsOrderNo: record.orderNo, pname: record.pname, visible: true, }); }} /> </Spin> </div> {this.state.visible ? ( <ProjectDetails visible={this.state.visible} id={this.state.projectdetailsId} orderNo={this.state.projectdetailsOrderNo} taskName={this.state.pname} visitOk={() => { this.setState({ visible: false, }); }} visitCancel={() => { this.loadData(this.state.page); this.setState({ visible: false, }); }} /> ) : null} </div> ); } } export default HighTech;