| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590 | import React,{Component} from 'react';import {    AutoComplete,    Button,    Cascader,    DatePicker,    Icon,    Input,    message,    Modal,    Select,    Spin,    Table,    Tabs,    Tag} from "antd";import { citySelect, provinceList } from '@/NewDicProvinceList';import {getSocialAttribute, ShowModal} from "@/tools.js";import ShowModalDiv from "@/showModal.jsx";import moment from "moment";import $ from "jquery/src/ajax";import IntentionDetail from "../../NEW/intentionCustomer/intentionDetail/intentionDetail";import {ChooseList} from "../../../order/orderNew/chooseList";const {TabPane} = Tabs;const { RangePicker } = DatePicker;class CustomerFollow extends Component{    constructor(props) {        super(props);        this.state={            nameSearch: '',            provinceSearch: undefined,            addressSearch: '',            level: undefined,            releaseDate: [],            selectedRowKeys: [],            sortType: 0,            filteredInfo: null,            sortedInfo: null,            columns : [                {                    title: "客户名称",                    dataIndex: "name",                    key: "name",                },                {                    title: "地区",                    dataIndex: "locationProvince",                    key: "locationProvince",                },                {                    title: "联系人",                    dataIndex: "contacts",                    key: "contacts",                },                {                    title: "联系电话",                    dataIndex: "contactMobile",                    key: "contactMobile",                },                {                    title: "社会性质",                    dataIndex: "societyTag",                    key: "societyTag",                    render: (text) => {                        return getSocialAttribute(text);                    },                },                {                    title: "客户初始时间",                    dataIndex: "transferTime",                    key: "transferTime",                },                {                    title: "剩余私有天数",                    dataIndex: "surplusFollowTime",                    key: "surplusFollowTime",                },                {                    title: "剩余签单天数",                    dataIndex: "surplusSignTime",                    key: "surplusSignTime",                },                {                    title: "最新跟进时间",                    dataIndex: "lastFollowTime",                    key: "lastFollowTime",                    //0无 1转换倒序 2转换正序                    sorter: true,                    sortOrder: (this.sortedInfo || {}).columnKey === 'lastFollowTime' && (this.sortedInfo || {}).order,                    filteredValue: (this.filteredInfo || {}).lastFollowTime || null,                },                {                    title: "客户等级",                    dataIndex: "level",                    key: "level",                    render: (text) => {                        if(text === 0) {                            return <Tag color="#87d068">一般客户</Tag>;                        }else if(text === 1) {                            return <Tag color="#D2691E">意向客户</Tag>;                        }else if(text === 2) {                            return <Tag color="#FF0000">重点客户</Tag>;                        }else {                            return "";                        }                    },                },                {                    title: "跟进人",                    dataIndex: "aName",                    key: "aName",                },                {                    title: "跟进操作",                    dataIndex: "abc",                    key: "abc",                    render: (text, record, index) => {                        return (                            <div>                                <Button                                    onClick={(e) => {                                        e.stopPropagation();                                        this.setState({                                            tabsKey:"4",                                        },()=>{                                            this.tableRowClick(record)                                        })                                    }}                                    type="primary"                                >                                    {this.props.isEditGuidanceLv ? '指导' : '查看指导'}                                </Button>                            </div>                        );                    },                },            ],            provinces: [],            dataSource: [],            categoryArr: [],            modalName: '',            modalVisible: false,            basicState: false,            contactState: false,            rowData: {},            pagination: {                defaultCurrent: 1,                defaultPageSize: 10,                showQuickJumper: true,                pageSize: 10,                onChange: function (page) {                    this.loadData(page);                }.bind(this),                showTotal: function (total) {                    return "共" + total + "条数据";                },            },            loading: false,            ispage: 1,            guidance: '',            tabsKey:'',        };        this.callback = this.callback.bind(this);        this.loadData = this.loadData.bind(this);        this.reset = this.reset.bind(this);        this.tableRowClick = this.tableRowClick.bind(this);        this.closeDesc = this.closeDesc.bind(this);        this.releaseGuidance = this.releaseGuidance.bind(this);        this.changeList = this.changeList.bind(this);    }    componentDidMount() {        this.loadData();        this.category();        //城市        let Province = [];        provinceList.map(function (item) {            let id = String(item.id);            Province.push(                <Select.Option value={id} key={item.name}>                    {item.name}                </Select.Option>            );        });        this.setState({            provinces: Province        })    }    callback(){    }    loadData(pageNo) {        this.setState({            loading: true,        });        let api = '/api/admin/customer/listFollowManagement';        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + api,            data: {                pageNo: pageNo || 1,                pageSize: this.state.pagination.pageSize,                level: this.state.level ? this.state.level : undefined,                name: this.state.nameSearch,                province: !this.state.addressSearch.length                    ? this.state.provinceSearch                    : this.state.addressSearch[0],                city: !this.state.addressSearch.length                    ? ""                    : this.state.addressSearch[1],                startDate: this.state.releaseDate[0],                endDate: this.state.releaseDate[1],                sortType:this.state.sortType,            },            success: function (data) {                ShowModal(this);                let theArr = [];                if (data.error.length !== 0) {                    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];                        let diqu =                            (thisdata.province == null ? "" : thisdata.province) +                            (thisdata.city == null ? "" : "-" + thisdata.city) +                            (thisdata.area == null ? "" : "-" + thisdata.area);                        thisdata.key = i;                        thisdata.id = thisdata.uid;                        thisdata.lastFollowTime = thisdata.lastFollowTime && thisdata.lastFollowTime.split(" ")[0];                        thisdata.transferTime= thisdata.transferTime && thisdata.transferTime.split(" ")[0];                        thisdata.surplusFollowTime= thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];                        thisdata.surplusSignTime= thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];                        thisdata.locationProvince= diqu;                        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({                        ispage: data.data.pageNo,                        dataSource: theArr,                        pagination: this.state.pagination,                    });                }            }.bind(this),        }).always(            function () {                this.setState({                    loading: false,                });            }.bind(this)        );    };    reset(){        this.setState({            nameSearch: '',            provinceSearch: undefined,            addressSearch: '',            level: undefined,            releaseDate: [],            selectedRowKeys: [],            sortType: 0,            filteredInfo: null,            sortedInfo: null,        },()=>{            this.loadData();        });    };    //品类数据获取    category() {        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/Varieties/getSuperList",            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({                            value: item.id,                            key: item.cname,                        });                    });                }                this.setState({                    categoryArr: theArr,                });            }.bind(this),        });    }    tableRowClick(record){      //key 控制弹窗初始显示第几级        this.setState({            selectedRowKeys: [],            modalVisible: true,            basicState: true,            contactState: true,            modalName: record.name,            rowData: record,        });    };    closeDesc(e, s) {        this.setState({            basicState: e,            visitModul: e,            modalVisible: e,            showDesc: e,            tabsKey: '',        })        if (s) {            this.loadData(this.state.ispage);        }    }    //发布指导意见    releaseGuidance(){        if(!this.state.guidance){            message.info('指导意见不能为空')            return;        }        this.setState({            loading: true,        });        let _this = this;        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/customer/pushReleaseUser",            data: {                guidance: this.state.guidance,            },            success: function (data) {                let thedata = data.data;                if (!thedata) {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    }                }else {                    message.success("发布成功");                    _this.loadData(this.state.ispage);                }            }.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        });    }    render() {        let { sortedInfo, filteredInfo,columns } = this.state;        return(            <div className="user-content">                <ShowModalDiv ShowModal={this.state.showModal} />                <div className="content-title">                    <span>指导意见</span>                </div>                <Tabs defaultActiveKey="1" className="test">                    <TabPane tab="搜索" key="1">                        <div className="user-search">                            <Input                                placeholder="客户名称"                                value={this.state.nameSearch}                                style={{ width: 150, marginRight: 10, marginLeft: 10 }}                                onChange={(e) => {                                    this.setState({ nameSearch: e.target.value });                                }}                            />                            <Select                                placeholder="选择地区"                                style={{ width: 80 }}                                value={this.state.provinceSearch}                                onChange={(e) => {                                    this.setState({ provinceSearch: e });                                }}                            >                                {this.state.provinces}                            </Select>                            <span style={{ marginRight: "10px" }}>                              <Cascader                                  options={citySelect()}                                  value={this.state.addressSearch}                                  placeholder="选择城市"                                  onChange={(e, pre) => {                                      this.setState({ addressSearch: e });                                  }}                              />                            </span>                            <Select                                style={{ width: 120 }}                                value={this.state.level}                                onChange={(e) => {                                    this.setState({ level: e });                                }}                                placeholder="选择客户等级"                            >                                <Select.Option value="0">一般客户</Select.Option>                                <Select.Option value="1">意向客户</Select.Option>                                <Select.Option value="2">重点客户</Select.Option>                            </Select>                            <RangePicker                                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 });                                }}                            />                            <Button                                type="primary"                                style={{ marginLeft: "10px", marginRight: 10 }}                                onClick={()=>{                                    this.loadData();                                }}                            >                                搜索                            </Button>                            <Button onClick={this.reset}>重置</Button>                        </div>                    </TabPane>                    <TabPane tab="更改表格显示数据" key="2">                        <div style={{ marginLeft: 10 }}>                            <ChooseList                                columns={columns}                                changeFn={this.changeList}                                changeList={this.state.changeList}                                top={55}                                margin={11}                            />                        </div>                    </TabPane>                </Tabs>                <div className="patent-table">                    <Spin spinning={this.state.loading}>                        <Table                            columns={                                this.state.changeList                                    ? this.state.changeList                                    : columns                            }                            dataSource={this.state.dataSource}                            pagination={this.state.pagination}                            onRowClick={this.tableRowClick}                            onChange={(pagination, filters, sorter)=>{                                //0 正序 1倒序                                if(sorter.order === 'ascend'){              //倒序                                    this.setState({                                        sortType: 1                                    },()=>{                                        this.loadData(pagination.current)                                    });                                }else if (sorter.order === 'descend'){      //正序                                    this.setState({                                        sortType: 0                                    },()=>{                                        this.loadData(pagination.current)                                    });                                }else if (typeof sorter.order === 'undefined'){       //正常                                    this.setState({                                        sortType: 0                                    },()=>{                                        this.loadData(pagination.current)                                    });                                }                                this.setState({                                    filteredInfo: filters,                                    sortedInfo: sorter,                                });                            }                            }                        />                    </Spin>                </div>                <IntentionDetail                    isGuidanceLv={this.props.isGuidanceLv}                    isEditGuidanceLv={this.props.isEditGuidanceLv}                    categoryArr={this.state.categoryArr}                    detailApi={this.props.detailApi}                    IntentionData={this.state.rowData}                    modalVisible={this.state.modalVisible}                    tabsKey={this.state.tabsKey}                    name={this.state.modalName}                    closeDesc={this.closeDesc}                    basicState={this.state.basicState}                    contactState={this.state.contactState}                />                <Modal                    className="customeDetails"                    title="指导意见"                    width='500px'                    visible={this.state.guidanceVisible}                    onOk={()=>{                        this.setState({                            guidanceVisible: false,                            guidance: '',                        },()=>{                            this.loadData(this.state.ispage);                        })                    }}                    onCancel={()=>{                        this.setState({                            guidanceVisible: false,                            guidance: '',                        },()=>{                            this.loadData(this.state.ispage);                        })                    }}                    footer=''                >                    <Spin spinning={this.state.loading}>                        <div style={{                            display:'flex',                            flexFlow:'column',                        }}>                            <Input                                style={{ width: '400px',height:'50px' }}                                placeholder="请输入指导意见"                                type={'textarea'}                                onChange={(e)=>{                                    this.setState({                                        guidance: e.target.value,                                    })                                }}                            />                            <Button                                type="primary"                                style={{ marginTop: "10px", marginBottom: '10px' }}                                onClick={()=>{                                    this.releaseGuidance();                                }}                            >                                确定                            </Button>                        </div>                    </Spin>                </Modal>            </div>        )    }}export default CustomerFollow;
 |