import React, { Component } from "react"; import { AutoComplete, Button, DatePicker, Input, message, Modal, Select, Spin, Table, Tabs, } from "antd"; import { ShowModal, getNewDiccityArr } from "@/tools"; import { citySelect } from "../../../NewDicProvinceList"; import { ChooseList } from "../../order/orderNew/chooseList"; import $ from "jquery/src/ajax"; import moment from "moment"; import { highTechColumns, invention, utilityModel, softWriting, otherTrademarks, currency, } from "./projecCountConfig"; import HighTech from "./highTech"; import "./index.less"; const { TabPane } = Tabs; const { RangePicker } = DatePicker; const { Option } = Select; class ProjecCount extends Component { constructor(props) { super(props); this.state = { loading: false, changeList: [], columns: currency((v, screen) => { this.openProjectSummary(v, screen); }), pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; }, }, dataSource: [], taberReleaseDate: [], taberProjectType: "", taberCommodityName: "", releaseDate: [], searchOrderNo: "", searchContractNo: "", searchEnterpriseName: "", declarationBatch: "", projectType: "", projectStatus: "", province: "", depId: "", departmentArr: [], contactsOption: [], contactsOptionData: [], customerArr: [], commodityName: "", kid: "", status: 0, searchValues: this.props.searchConfig || {}, }; this.loadData = this.loadData.bind(this); this.resetAll = this.resetAll.bind(this); this.changeList = this.changeList.bind(this); this.departmentList = this.departmentList.bind(this); this.exportPending = this.exportPending.bind(this); this.exportExcel = this.exportExcel.bind(this); this.selectSuperId = this.selectSuperId.bind(this); this.supervisorCui = this.supervisorCui.bind(this); this.httpChangeCui = this.httpChangeCui.bind(this); this.selectAuto = this.selectAuto.bind(this); this.openProjectSummary = this.openProjectSummary.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({ page: pageNo, loading: true, taberReleaseDate: this.state.releaseDate, taberProjectType: this.state.projectType, taberCommodityName: this.state.commodityName, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/statistis/selectProvincialStatistics", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0] : undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1] : undefined, //结束时间 province: this.state.province || undefined, projectStatus: this.state.projectStatus || undefined, //项目类别 projectType: typeof this.state.projectType === "number" ? this.state.projectType : undefined, //项目分类 status: this.state.status, thchDepId: this.state.depId || undefined, projectId: this.state.kid || undefined, }, 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({ dataSource: theArr, pagination: this.state.pagination, }); }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } //部门 departmentList() { $.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), }); } resetAll() { this.setState( { releaseDate: [], searchOrderNo: "", searchContractNo: "", searchEnterpriseName: "", declarationBatch: "", province: "", depId: "", projectType: "", projectStatus: "", columns: currency((v, screen) => { this.openProjectSummary(v, screen); }), commodityName: "", kid: "", status: 0, taberReleaseDate: [], taberProjectType: "", taberCommodityName: "", }, () => { this.loadData(); } ); } exportPending() { message.config({ duration: 20, }); let loading = message.loading("下载中..."); this.setState({ exportPendingLoading: true, }); let url = `/api/admin/statistis/exporProvincialList?status=${this.state.status}`; let dep = this.state.departmentArr.filter((e) => e.id === this.state.depId); //责任部门名称 let option = this.state.contactsOptionData.filter( (e) => e.id === this.state.projectStatus ); //项目类别名称 if (dep.length > 0) { url = url + `&thchDepName=${dep[0].name}`; } if (option.length > 0) { url = url + `&projectStatusName=${option[0].cname}`; } if (typeof this.state.projectType === "number") { url = url + `&projectTypeName=${ this.state.projectType === 0 ? "通用" : this.state.projectType === 1 ? "专利" : this.state.projectType === 2 ? "软著" : this.state.projectType === 3 ? "审计" : this.state.projectType === 4 ? "双软" : this.state.projectType === 5 ? "高新" : this.state.projectType === 6 ? "商标" : "" }`; } if (this.state.commodityName) { url = url + `&projectName=${this.state.commodityName}`; } if (this.state.province) { url = url + `&provinceName=${getNewDiccityArr(this.state.province)}`; } let data = { startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0] : undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1] : undefined, //结束时间 thchDepId: this.state.depId || undefined, //责任部门ID projectStatus: this.state.projectStatus || undefined, //项目类别 projectType: typeof this.state.projectType === "number" ? this.state.projectType : undefined, //项目分类 province: this.state.province || undefined, projectId: this.state.kid || undefined, }; for (let key in data) { if (data[key]) { url = url + `&${key}=${data[key]}`; } } $.ajax({ method: "get", dataType: "json", crossDomain: false, url: url, 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) ); } exportExcel() { let dep = this.state.departmentArr.filter( (v) => v.id === this.state.taberdepId )[0].name; //责任部门名称 let option = this.state.contactsOptionData.filter( (v) => v.id === this.state.taberProjectStatus )[0].cname; //项目类别名称 let data = { pageNo: this.state.pageNo || 1, pageSize: 9999, startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0] : undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1] : undefined, //结束时间 projectType: this.state.projectType.toString(), //项目分类 // typeof this.state.projectType === "number" // ? this.state.projectType // : undefined, thchDepName: dep || undefined, //咨询师部门名称 projectTypeName: this.state.projectType === 0 ? "通用" : this.state.projectType === 1 ? "专利" : this.state.projectType === 2 ? "软著" : this.state.projectType === 3 ? "审计" : this.state.projectType === 4 ? "双软" : this.state.projectType === 5 ? "高新" : this.state.projectType === 6 ? "商标" : "", //项目分类(中文) projectStatusName: option || undefined, //项目品类(中文) provinceName: getNewDiccityArr(this.state.taberProvince) || undefined, //省份(中文) projectId: this.state.kid || undefined, province: this.state.taberProvince || undefined, projectStatus: this.state.taberProjectStatus || undefined, //项目类别 thchDepId: this.state.taberdepId || undefined, status: this.state.projectType === 4 ? 2 : this.state.projectType === 2 ? 3 : this.state.projectType === 1 ? 4 : this.state.projectType === 5 ? 1 : this.state.contactsOptionData.filter( (v) => v.id === this.state.taberProjectStatus ).length > 0 ? this.state.contactsOptionData.filter( (v) => v.id === this.state.taberProjectStatus )[0].cname === "高新" ? 1 : 0 : 0, screen: this.state.screen.toString(), //筛选项 0库存 1派单 2完成 3立项 4抽查 5未通过 6受理 7完结 8授权 9驳回 10下证 11申请 12公示数 }; for (let key in data) { if (!data[key]) { delete data[key]; } } window.location.href = globalConfig.context + "/api/admin/statistis/exporTaskList?" + $.param(data); } download(fileName) { window.location.href = globalConfig.context + "/open/download?fileName=" + fileName; } //项目类别 selectSuperId() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/ProjectSize/getAllCname", data: { flag: 0, }, success: function (data) { let theArr = []; 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> ); } this.setState({ contactsOption: theArr, contactsOptionData: data.data, }); }.bind(this), }).always(); } supervisorCui(e) { //客户名称与服务名称自动补全 let api = "/api/admin/order/getBusinessProjectByName"; $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + api, data: { businessName: 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 () { this.setState({ loading: false, }); }.bind(this) ); } httpChangeCui(e) { if (e.length >= 1) { this.supervisorCui(e, false); } this.setState({ commodityName: e, }); } //上级主管输入框失去焦点是判断客户是否存在 selectAuto(value) { let kid = []; let fwList = this.state.customerArr; fwList.map(function (item) { if (value === item.bname) { kid = item.id; } }); this.setState({ kid: kid, commodityName: value, }); } componentWillMount() { this.loadData(); this.departmentList(); this.selectSuperId(); } openProjectSummary(record, screen) { this.setState({ projectSummary: true, taberProvince: record.province, taberProjectStatus: record.bpId, //项目类别 taberdepId: record.thchDepId, screen: screen, }); } render() { const dataSources = this.state.customerArr || []; const options = dataSources.map((group, index) => ( <Select.Option key={index} value={group.bname}> {group.bname} </Select.Option> )); return ( <div className="user-content"> <div className="content-title"> <span> 项目统计 ( {this.state.status === 2 ? "专利" : this.state.status === 4 ? "软著" : this.state.status === 1 ? "高新" : this.state.status === 5 ? "商标" : "通用"} ) </span> </div> <Tabs defaultActiveKey="1" className="test"> <TabPane tab="搜索" key="1"> <div className="user-search" style={{ marginTop: "10px", marginLeft: "10px", marginRight: "10px", }} > <span style={{ display: "inline-block", marginRight: "10px", marginBottom: "10px", }} > <span>项目名称:</span> <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} dropdownStyle={{ width: 200 }} style={{ width: 100, marginLeft: "10px" }} dataSource={options} placeholder="输入服务名称" value={this.state.commodityName} onChange={this.httpChangeCui} filterOption={true} onSelect={this.selectAuto} > <Input /> </AutoComplete> </span> <span style={{ display: "inline-block" }}> <span style={{ marginRight: "10px", marginBottom: "10px" }}> 项目类别 : </span> <Select value={this.state.projectStatus || undefined} placeholder="请选择项目类别" notFoundContent="未获取到上级品类列表" style={{ width: 100, marginRight: "10px", marginBottom: "10px", }} onChange={(e) => { let infor = this.state.contactsOptionData.filter( (v) => v.id === e ); this.setState( { projectStatus: e, } // () => { // if ( // infor.length && // infor[0].cname === "高新" && // typeof this.state.projectType !== "number" // ) { // this.setState( // { // columns: highTechColumns((v, screen) => { // this.openProjectSummary(v, screen); // }), // changeList: [], // status: 1, // }, // () => { // this.loadData(); // } // ); // } else if (typeof this.state.projectType !== "number") { // this.setState( // { // columns: currency((v, screen) => { // this.openProjectSummary(v, screen); // }), // 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: 100, marginRight: "10px", marginBottom: "10px", }} onChange={(e) => { this.setState( { projectType: e, columns: e === 0 ? currency((v, screen) => { this.openProjectSummary(v, screen); }) : e === 1 ? invention((v, screen) => { this.openProjectSummary(v, screen); }) : e === 2 ? softWriting((v, screen) => { this.openProjectSummary(v, screen); }) : e === 3 ? currency((v, screen) => { this.openProjectSummary(v, screen); }) : e === 4 ? currency((v, screen) => { this.openProjectSummary(v, screen); }) : e === 5 ? highTechColumns((v, screen) => { this.openProjectSummary(v, screen); }) : e === 6 ? otherTrademarks((v, screen) => { this.openProjectSummary(v, screen); }) : [], changeList: [], status: e === 1 ? 2 : e === 2 ? 4 : e === 5 ? 1 : e === 6 ? 5 : 0, // 0通用 1高新 2发明专利 3实用新型 4软著 5商标 } // () => { // 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> </Select> </span> <span style={{ display: "inline-block", marginRight: "10px", marginBottom: "10px", }} > <span>派单省份:</span> <Select placeholder="请选择省份" style={{ width: 100, marginRight: "10px", marginLeft: "10px", marginBottom: "10px", }} value={getNewDiccityArr(this.state.province)} onChange={(e) => { this.setState({ province: e }); }} > {citySelect().map(function (item) { return ( <Select.Option key={item.value} value={item.value}> {item.label} </Select.Option> ); })} </Select> </span> <span style={{ display: "inline-block", marginRight: "10px", marginBottom: "10px", }} > <span>负责部门:</span> <Select placeholder="请选择部门" style={{ width: 200, marginRight: "10px", marginLeft: "10px", marginBottom: "10px", }} value={this.state.depId || undefined} onChange={(e) => { this.setState({ depId: e }); }} > {this.state.departmentArr.map(function (item) { return ( <Select.Option key={item.id} value={item.id}> {item.name} </Select.Option> ); })} </Select> </span> <span style={{ display: "inline-block" }}> <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> <Button type="primary" onClick={() => { if (this.state.commodityName.length === 0) { this.setState( { kid: "", }, () => { this.loadData(); } ); } else { 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="导出EXCEL" key="3"> <Button type="primary" style={{ margin: "10px" }} loading={this.state.exportPendingLoading} onClick={this.exportPending} > 导出 </Button> </TabPane> </Tabs> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table bordered size="middle" scroll={{ x: 800, y: 0 }} columns={ this.state.changeList.length > 0 ? this.state.changeList : this.state.columns } dataSource={this.state.dataSource} pagination={this.state.pagination} /> </Spin> </div> {this.state.projectSummary ? ( <Modal maskClosable={false} className="customeDetails" footer="" title="" width="1800px" visible={this.state.projectSummary} onOk={() => { this.setState({ projectSummary: false, }); }} onCancel={() => { this.setState({ projectSummary: false, }); }} > <HighTech searchData={{ startDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[0] : undefined, //开始时间 endDate: this.state.releaseDate.length > 0 ? this.state.releaseDate[1] : undefined, //结束时间 projectType: typeof this.state.projectType === "number" ? this.state.projectType : undefined, //项目分类 projectId: this.state.kid || undefined, province: this.state.taberProvince || undefined, projectStatus: this.state.taberProjectStatus || undefined, //项目类别 thchDepId: this.state.taberdepId || undefined, status: this.state.projectType === 4 ? 2 : this.state.projectType === 2 ? 3 : this.state.projectType === 1 ? 4 : this.state.projectType === 5 ? 1 : this.state.contactsOptionData.filter( (v) => v.id === this.state.taberProjectStatus ).length > 0 ? this.state.contactsOptionData.filter( (v) => v.id === this.state.taberProjectStatus )[0].cname === "高新" ? 1 : 0 : 0, screen: this.state.screen, //筛选项 0库存 1派单 2完成 3立项 4抽查 5未通过 6受理 7完结 8授权 9驳回 10下证 11申请 12公示数 }} introduce={() => ( <div className="user-search" style={{ marginTop: "10px", marginLeft: "10px", marginRight: "10px", }} > {this.state.taberProvince ? ( <span style={{ display: "inline-block", marginRight: "20px", marginBottom: "10px", }} > <span>派单省份:</span> <span style={{ width: 100, marginLeft: "10px" }}> {getNewDiccityArr(this.state.taberProvince)} </span> </span> ) : null} {this.state.taberProjectStatus ? ( <span style={{ display: "inline-block", marginRight: "20px", marginBottom: "10px", }} > <span>项目类别 :</span> <span style={{ width: 100, marginLeft: "10px" }}> { this.state.contactsOptionData.filter( (v) => v.id === this.state.taberProjectStatus )[0].cname } </span> </span> ) : null} {this.state.taberdepId ? ( <span style={{ display: "inline-block", marginRight: "20px", marginBottom: "10px", }} > <span>负责部门:</span> <span style={{ width: 200, marginLeft: "10px" }}> { this.state.departmentArr.filter( (v) => v.id === this.state.taberdepId )[0].name } </span> </span> ) : null} {this.state.taberCommodityName ? ( <span style={{ display: "inline-block", marginRight: "20px", marginBottom: "10px", }} > <span>项目名称:</span> <span style={{ width: 100, marginLeft: "10px" }}> {this.state.taberCommodityName} </span> </span> ) : null} {typeof this.state.taberProjectType === "number" ? ( <span style={{ display: "inline-block", marginRight: "20px", marginBottom: "10px", }} > <span>项目分类 :</span> <span style={{ width: 100, marginRight: "10px" }}> {this.state.taberProjectType === 0 ? "通用" : this.state.taberProjectType === 1 ? "专利" : this.state.taberProjectType === 2 ? "软著" : this.state.taberProjectType === 3 ? "审计" : this.state.taberProjectType === 4 ? "双软" : this.state.taberProjectType === 5 ? "高新" : this.state.taberProjectType === 6 ? "商标" : ""} </span> </span> ) : null} {this.state.taberReleaseDate.length > 0 ? ( <span style={{ display: "inline-block", marginRight: "20px", marginBottom: "10px", }} > <span>派单时间 :</span> <span style={{ width: 100, marginRight: "10px" }}> {this.state.taberReleaseDate[0] + "~" + this.state.taberReleaseDate[1]} </span> </span> ) : null} <Button type="primary" onClick={this.exportExcel}> 导出EXCEL </Button> </div> )} /> </Modal> ) : null} </div> ); } } export default ProjecCount;