kede-client/js/component/manageCenter/project/summary/projecCount.jsx

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,
        }
        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.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));
    }

    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({
                                            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: [],
                                            projectType: e,
                                            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}
                            </div>
                        )}
                    />
                </Modal> : null}
            </div>
        )
    }
}

export default ProjecCount;