// 私有渠道列表 import React, { Component } from "react"; import { Form, Button, message, Spin, Input, DatePicker, Select, Tabs, Table, Modal, AutoComplete, } from "antd"; import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList"; import { provinceList } from "../../../NewDicProvinceList"; import $ from "jquery/src/ajax"; import { ShowModal } from "@/tools"; import moment from "moment"; import AddChannel from "./addchannel"; //新增渠道 import ChannelLog from "./channellog"; //转交日志 import ChangeLog from "./changelog"; //更名日志 import ChannelDetail from "./channeldetail"; //渠道详情 import FollowDetail from "../../../../component/manageCenter/customer/NEW/intentionCustomer/followDetail";//新增渠道跟进 import ShowModalDiv from "@/showModal.jsx"; const { TabPane } = Tabs; const FormItem = Form.Item; const Option = Select.Option; const { RangePicker } = DatePicker; class ChannelUnit extends Component { constructor(props) { super(props); this.state = { query: { type: 1 }, changeList: undefined, selectedRowKeys: [], selectedRows: [],//列表多选 columns: [ { title: "渠道名称", dataIndex: "name", key: "name", }, { title: "地区", dataIndex: "province", key: "province", width: 250, render: (text, record) => { return (record.province || "") + (!record.city ? "" : "-") + (record.city || "") + (!record.area ? "" : "-") + (record.area || ""); }, }, { title: "渠道类别", dataIndex: "type", key: "type", width: 120, render: (text) => [ "", "其他", "民主党派", "园区", "民间组织", "战略合作单位", ][text], }, { title: "初始时间", dataIndex: "transferTime", key: "transferTime", width: 160, }, { title: "跟进人", dataIndex: "aName", key: "aName", }, { title: "剩余天数", dataIndex: "remainingDays", key: "remainingDays", width: 80, }, { title: "跟进操作", dataIndex: "op", key: "op", render: (text, record) => ( record.type != 1 && <Button type="primary" onClick={(e) => { e.stopPropagation(); this.setState({ followData: record, visitModuls: true, }); }} > 渠道跟进 </Button > ), }, ], dataSource: [], pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; }, }, channeOb: [ { name: "民主党派", val: 2 }, { name: "园区", val: 3 }, { name: "民间组织", val: 4 }, { name: "战略合作单位", val: 5 }, { name: "其他", val: 1 }, ], fjlist: [], // 查询到的更进人列表 loading: false, cityList: [], areaList: [], searchInfor: {}, // 查询条件 mvisible: "", //控制弹窗变量 customerArr: [], //查询到的转交人列表 rowdata: {}, //双击行数据 categoryArr: [], visitModuls: false, }; this.tabelContentRef = null; this.autoCompleteSearchRef = {}; } componentWillMount() { this.loadData(); this.category(); } // getVal(arr, val) { if (!val || arr.length == 0) { return undefined; } else { for (const items of arr) { if (items.id == val) { return items.name; } } } } changeList(arr) { const newArr = []; this.state.columns.forEach((item) => { arr.forEach((val) => { if (val === item.title) { newArr.push(item); } }); }); this.setState({ changeList: newArr, }); } // 重置 resetAll() { this.setState( { searchInfor: JSON.parse(JSON.stringify({})), selectedRowKeys: [], selectedRows: [], cityList: [], areaList: [], auto: "", }, () => { this.loadData(); } ); } // 列表接口 loadData(pageNo) { const { searchInfor, pagination } = this.state; this.setState({ loading: true, }); let datas = Object.assign(searchInfor, { pageNo: pageNo || 1, pageSize: pagination.pageSize, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/channelUserList", data: datas, success: function (data) { ShowModal(this); this.setState({ loading: false, }); if (data.error && data.error.length === 0) { if (data.data.list) { pagination.current = data.data.pageNo; pagination.total = data.data.totalCount; if (data.data && data.data.list && !data.data.list.length) { pagination.current = 0; pagination.total = 0; } this.setState({ dataSource: data.data.list, pagination: this.state.pagination, pageNo: data.data.pageNo, }); } else { this.setState({ dataSource: data.data, pagination: false, }); } } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } //值改变时请求客户名称 httpChange(e) { if (e.length >= 1) { this.supervisor(e); } this.setState({ auto: e, }); } // 指定转交人自动补全 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 () { this.setState({ loading: false, }); }.bind(this) ); } // 失去焦点 blurChange(e) { let theType = ""; let contactLists = this.state.customerArr || []; if (e) { contactLists.map(function (item) { if (item.name == e.toString()) { theType = item.id; } }); } this.setState({ theTypes: theType, }); } // 选择行 onSelectChange(selectedRowKeys, selectedRows) { this.setState({ selectedRowKeys, selectedRows }); } // addClick() { this.setState({ mvisible: "add", }); } // 关闭弹窗 closeDesc() { this.setState({ mvisible: "", }); this.loadData(this.state.pageNo); } // 转交提示 showConfirm() { const { selectedRows } = this.state; if (!this.state.theTypes) { message.warning("请输入转交人姓名"); return; } let _this = this; Modal.confirm({ title: "提示", content: ( <span style={{ color: "red" }}> 确定要转交以下渠道吗? { selectedRows.map((item, index) => <div key={index} style={{ marginTop: "5px", color: "#000" }}> {item.name} </div> ) } </span> ), onOk() { _this.setState({ informationTransferVisible: true, }); }, onCancel() { }, }); } //转交 changeAssigner(infor) { const { selectedRows } = this.state; if (this.state.theTypes) { this.setState({ informationTransferVisible: false, }); let changeIds = ""; let oldAid = ""; for (let idx = 0; idx < selectedRows.length; idx++) { let rowItem = selectedRows[idx]; if (rowItem.id) { oldAid = rowItem.aid; changeIds = selectedRows.length - 1 === idx ? changeIds + rowItem.id : changeIds + rowItem.id + ","; } } let loading = message.loading("加载中..."); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/transferToOther", data: { uid: changeIds, //这一行数据的ID aid: this.state.theTypes, //指定转交人的ID oldAid: oldAid, //原跟进人ID operatorType: 5, data: infor, // 资料是否一并转交 0否 1是 }, }).done( function (data) { loading(); if (!data.error.length) { message.success("转交成功!"); this.setState({ auto: "", loading: false, selectedRowKeys: [], selectedRows: [], }); } else { message.warning(data.error[0].message); } this.loadData( Math.min( this.state.pageNo == undefined ? 1 : this.state.pageNo, Math.ceil((this.state.pagination.total - 1) / 10) ) ); }.bind(this) ); } else { message.warning("请输入转交人姓名"); } } // 移出渠道 remove() { const { dataSource, selectedRows, pageNo } = this.state; const _this = this Modal.confirm({ title: "您确定将以下渠道移至公共渠道吗??", content: ( <span style={{ color: "red" }}> 移除后,以下客户将被别人领取! { selectedRows.map((item, index) => <div key={index} style={{ marginTop: "5px", color: "#000" }}> {item.name} </div> ) } </span> ), onOk() { let deletedIds = ""; for (var idx = 0; idx < selectedRows.length; idx++) { let rowItem = selectedRows[idx]; if (rowItem.id) { deletedIds = selectedRows.length - 1 === idx ? deletedIds + rowItem.id : deletedIds + rowItem.id + ","; } } $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/pushReleaseUser", data: { id: deletedIds, }, success: function (data) { _this.setState({ selectedRowKeys: [], selectedRows: [], }); let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thedata = {}; } else { message.success("移除成功"); } _this.loadData( dataSource.length === 1 ? pageNo === 1 ? 1 : pageNo - 1 : pageNo ) }.bind(this), }).always( function () { _this.setState({ loading: false, }); }.bind(this) ); }, onCancel() { }, }); } selectAuto(value, options) { this.setState({ auto: value, }); } // 跟进人查询 followUp(e) { const { searchInfor } = this.state; this.setState({ searchInfor: Object.assign(searchInfor, { aname: 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({ fjlist: thedata, }); }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } // 选中跟进人 selectF(value) { const { searchInfor, fjlist } = this.state; const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist; this.setState({ searchInfor: Object.assign(searchInfor, { aid: newdataSources.find((item) => item.name == value).id, }), }); } //品类数据获取 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); } thedata = {}; } else { thedata.map(function (item, index) { theArr.push({ value: item.id, key: item.cname, }); }); } this.setState({ categoryArr: theArr, }); }.bind(this), }); } //查看跟进记录列表 loadVisit(pageNo) { this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/listFollowHistory", data: { pageNo: pageNo || 1, pageSize: this.state.paginations.pageSize, uid: this.props.data.id, //名称1 }, success: function (data) { let theArr = []; if (data.error.length || data.data.list == "") { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push(thisdata); } this.state.paginations.current = data.data.pageNo; this.state.paginations.total = data.data.totalCount; this.setState({ pageNo: data.data.pageNo, }); } if (data.data.list && !data.data.list.length) { this.state.paginations.current = 0; this.state.paginations.total = 0; } this.setState({ visitArrList: theArr, paginations: this.state.paginations, }); }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } close() { this.setState({ visitModuls: false, }); this.loadData(this.state.pageNo); } render() { const { columns, selectedRowKeys, cityList, areaList, changeList, searchInfor, channeOb, dataSource, } = this.state; const rowSelection = { hideDefaultSelections: true, selectedRowKeys, onChange: this.onSelectChange.bind(this), }; const hasSelected = this.state.selectedRowKeys.length > 0; const dataSources = this.state.customerArr || []; const options = dataSources.map((group) => ( <Select.Option key={group.id} value={group.name}> {group.name} </Select.Option> )); const newdataSources = JSON.stringify(this.state.fjlist) == "{}" ? [] : this.state.fjlist; const newoptions = newdataSources.map((group) => ( <Select.Option key={group.id} value={group.name}> {group.name} </Select.Option> )); return ( <div className="user-content"> <ShowModalDiv ShowModal={this.state.showModal} /> <div className="content-title" style={{ marginBottom: 10 }}> <span style={{ fontWeight: 900, fontSize: 16 }}>私有渠道列表</span> </div> <Tabs defaultActiveKey="1" onChange={() => { this.setState({ searchInfor: {} }) }} > <TabPane tab="搜索" key="1"> <div> <Form layout="inline"> <FormItem> <Input placeholder={"请输入渠道名称"} value={searchInfor.name || undefined} onChange={(e) => { this.setState({ searchInfor: Object.assign(searchInfor, { name: e.target.value, }), }); }} /> </FormItem> <FormItem> <Select placeholder={"选择省份"} style={{ width: 100 }} value={this.getVal(provinceList, searchInfor.province)} onChange={(e) => { for (const items of provinceList) { if (items.id == e) { this.setState({ cityList: items.cityList, areaList: [], searchInfor: Object.assign(searchInfor, { province: items.id, city: undefined, area: undefined, }), }); } } }} > {provinceList.map((item, index) => ( <Option key={item.id}>{item.name}</Option> ))} </Select> </FormItem> <FormItem> <Select placeholder={"选择城市"} style={{ width: 100 }} value={this.getVal(cityList, searchInfor.city)} onChange={(e) => { for (const items of cityList) { if (items.id == e) { this.setState({ areaList: items.areaList, searchInfor: Object.assign(searchInfor, { city: items.id, area: undefined, }), }); } } }} > {cityList.map((cit, cin) => ( <Option key={cit.id}>{cit.name}</Option> ))} </Select> </FormItem> <FormItem> <Select placeholder={"选择地区"} style={{ width: 100 }} value={this.getVal(areaList, searchInfor.area)} onChange={(e) => { for (const items of areaList) { if (items.id == e) { this.setState({ searchInfor: Object.assign(searchInfor, { area: items.id, }), }); } } }} > {areaList.map((cit, cin) => ( <Option key={cit.id}>{cit.name}</Option> ))} </Select> </FormItem> <FormItem> <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} style={{ width: "120px" }} dataSource={newoptions} placeholder="跟进人" value={searchInfor.aname || undefined} onChange={this.followUp.bind(this)} filterOption={true} onSelect={this.selectF.bind(this)} > <Input /> </AutoComplete> </FormItem> <FormItem> <Select placeholder={"渠道类型"} style={{ width: 130 }} value={searchInfor.type || undefined} onChange={(e) => { this.setState({ searchInfor: Object.assign(searchInfor, { type: e, }), }); }} > {channeOb.map((it, ins) => ( <Option key={it.val}>{it.name}</Option> ))} </Select> </FormItem> <FormItem> <RangePicker value={[ searchInfor.startDate ? moment(searchInfor.startDate) : null, searchInfor.endDate ? moment(searchInfor.endDate) : null, ]} onChange={(data, dataString) => { this.setState({ searchInfor: Object.assign(searchInfor, { startDate: dataString[0], endDate: dataString[1], }), }); }} /> </FormItem> <Button type="primary" onClick={() => { this.loadData(); }} style={{ marginRight: "10px" }} > 搜索 </Button> <Button onClick={this.resetAll.bind(this)} style={{ marginRight: "10px" }} > 重置 </Button> <Button type="primary" onClick={this.addClick.bind(this)} style={{ display: "float", float: "right" }} > 新增渠道 </Button> </Form> </div> </TabPane> <TabPane tab="操作" key="2"> <div style={{ marginLeft: 10, paddingBottom: 10, display: "flex", }} > <div style={{ flex: 1 }}> <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} style={{ width: "120px" }} dataSource={options} placeholder="输入转交人姓名" value={this.state.auto} onChange={this.httpChange.bind(this)} filterOption={true} onBlur={this.blurChange.bind(this)} onSelect={this.selectAuto.bind(this)} disabled={!hasSelected} > <Input /> </AutoComplete> <Button type="primary" onClick={this.showConfirm.bind(this)} style={{ marginLeft: 10 }} disabled={!hasSelected} > 转交 </Button> <Button type="primary" onClick={() => { this.setState({ mvisible: "channellog", }); }} style={{ marginLeft: "10px" }} disabled={this.state.selectedRowKeys.length !== 1} > 渠道日志 </Button> <Button type="primary" onClick={this.remove.bind(this)} style={{ marginLeft: "10px" }} disabled={!hasSelected} > 移出渠道 </Button> <Button type="primary" onClick={() => { this.setState({ mvisible: "changelog", }); }} style={{ marginLeft: "10px" }} disabled={this.state.selectedRowKeys.length !== 1} > 更改日志 </Button> </div> <Button type="primary" onClick={this.addClick.bind(this)} style={{ marginLeft: "10px" }} > 新增渠道 </Button> </div> </TabPane> <TabPane tab="更改表格显示数据" key="3"> <div style={{ marginLeft: 10 }}> <ChooseList columns={columns} changeFn={this.changeList.bind(this)} changeList={changeList} top={55} margin={11} /> </div> </TabPane> </Tabs> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table bordered size="middle" columns={changeList ? changeList : columns} onRowDoubleClick={(e) => { this.setState({ mvisible: "detail", rowdata: e, }); }} dataSource={this.state.dataSource} pagination={this.state.pagination} rowSelection={rowSelection} /> </Spin> </div> {this.state.informationTransferVisible && ( <Modal visible={this.state.informationTransferVisible} title="提醒" onCancel={() => { this.setState({ informationTransferVisible: false, }); }} footer={[ <Button key="1" size="large" type={"primary"} onClick={() => { this.changeAssigner(1); }} > 需要 </Button>, <Button key="2" size="large" type={"danger"} onClick={() => { this.changeAssigner(0); }} > 不需要 </Button>, ]} > 请确定,是否将客户资料一并转交!选择“需要”,系统将全部客户资料一并转交!选择“不需要”,原客户资料保存您的客户资料中,请注意客户资料的更新维护,谢谢 </Modal> )} {this.state.mvisible == "add" && ( <AddChannel showDesc={this.state.mvisible} closeDesc={this.closeDesc.bind(this)} /> )} {this.state.mvisible == "channellog" && ( <ChannelLog cancel={this.closeDesc.bind(this)} visible={this.state.mvisible} id={dataSource[selectedRowKeys[0]].id} /> )} {this.state.mvisible == "changelog" && ( <ChangeLog cancel={this.closeDesc.bind(this)} visible={this.state.mvisible} id={dataSource[selectedRowKeys[0]].id} /> )} {this.state.mvisible == "detail" && ( <ChannelDetail cancel={this.closeDesc.bind(this)} visible={this.state.mvisible} IntentionData={this.state.rowdata} categoryArr={this.state.categoryArr} /> )} <FollowDetail categoryArr={this.state.categoryArr} followData={this.state.followData} visitModul={this.state.visitModuls} closeDesc={this.close.bind(this)} loadData={this.loadVisit.bind(this)} /> </div> ); } } export default ChannelUnit;