import React from 'react'; import { Button,Cascader,Input, Select, Spin, Table,Tabs, message, Form ,AutoComplete} from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import {ShowModal} from '../../../../tools.js' import { citySelect, provinceList } from '@/NewDicProvinceList'; import ShowModalDiv from "@/showModal.jsx"; import ZhuanjiaoDetail from "@/zhuanjiaoDetail.jsx"; import Detaile from './detail.jsx'; import {ChooseList} from "../../../order/orderNew/chooseList"; const {TabPane} =Tabs const QueryCustomer = React.createClass({ loadData(pageNo, apiUrl) { this.setState({ visitModul: false, loading: true, ispage: pageNo, modalVisible: false, }); let api = apiUrl ? apiUrl : this.props.ApiUrl; $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + api, data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, name: this.state.nameSearch, departmentId: this.state.departmenttSearch, aid: this.state.theTypes, }, success: function (data) { ShowModal(this); 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]; 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.createTime = thisdata.createTime && thisdata.createTime.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({ dataSource: theArr, pagination: this.state.pagination, selectedRowKeys: [], }); }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, //部门 departmentList() { this.setState({ loading: true, }); $.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); } thedata = {}; } else { thedata.map(function (item, index) { theArr.push({ key: index, name: item.name, id: item.id, }); }); } this.setState({ departmentArr: theArr, }); }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, getInitialState() { return { addressSearch: [], dataSource: [], zhuanjiaoVisible: false, zhuanjiaoData: [], loading: false, departmentArr: [], selectedRowKeys: [], selectedRowKey: [], selectedRows: [], pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; }, }, columns: [ { title: "客户名称", dataIndex: "name", key: "name", }, { title: "地区", dataIndex: "locationProvince", key: "locationProvince", }, { title: "创建时间", dataIndex: "createTime", key: "createTime", }, { title: "客户所属人", dataIndex: "adminName", key: "adminName", }, { title: "资料所属人", dataIndex: "informationMaintainer", key: "informationMaintainer", }, { title: "操作", dataIndex: "abc", key: "abc", render: (text, record, index) => { return ( <div> <Button disabled={record.signBills === 0} onClick={(e) => { e.stopPropagation(), this.seeDetail(record); }} type="primary" style={{ marginRight: 10 }} > {record.signBills === 0 ? '暂未签单' : '查看签单详情'} </Button> <Button onClick={(e) => { e.stopPropagation(), this.zhuanjiaoLog(record); }} type="primary" > 查看转交记录 </Button> </div> ); }, }, ], }; }, zhuanjiaoDetailCancel() { this.setState({ zhuanjiaoVisible: false, }); }, zhuanjiaoLog(record) { this.setState({ zhuanjiaoVisible: true, zhuanjiaoId: record.id, }); }, seeDetail(record) { this.setState({ data: record, visitModul: true, }); }, closeDesc(e) { this.state.visitModul = e; }, search() { this.loadData(); }, reset() { this.state.nameSearch = ""; this.state.departmenttSearch = undefined; this.state.theTypes = ""; this.state.auto = ""; this.state.provinceSearch = undefined; this.state.addressSearch = []; this.loadData(); }, componentWillReceiveProps(nextProps) { if (nextProps.ApiUrl != this.props.ApiUrl) { this.state.nameSearch = ""; this.state.provinceSearch = undefined; this.state.addressSearch = []; this.loadData(null, nextProps.ApiUrl); } }, componentWillMount() { this.departmentList(); //城市 let Province = []; provinceList.map(function (item) { var id = String(item.id); Province.push( <Select.Option value={id} key={item.name}> {item.name} </Select.Option> ); }); this.state.Provinces = Province; this.loadData(); }, //指定转交人自动补全 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) ); }, //输入转交人输入框失去焦点是判断客户是否存在 selectAuto(value, options) { this.setState({ auto: value, }); }, 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, }); }, //值改变时请求客户名称 httpChange(e) { if (e.length >= 1) { this.supervisor(e); } this.setState({ auto: e, }); }, 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 departmentArr = this.state.departmentArr || []; const intentionState = this.props.intentionState; const FormItem = Form.Item; const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ modalVisible: false, selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1), }); }, onSelect: (recordt, selected, selectedRows) => { this.setState({ modalVisible: false, recordt: recordt.id, }); }, }; const dataSources = this.state.customerArr || []; const options = dataSources.map((group) => ( <Select.Option key={group.id} value={group.name}> {group.name} </Select.Option> )); const hasSelected = this.state.selectedRowKeys.length > 0; return ( <div className="user-content"> <ShowModalDiv ShowModal={this.state.showModal} /> <div className="content-title"> <span>{!intentionState ? "单位客户查询" : "个人客户查询"}</span> </div> <Tabs defaultActiveKey="1" onChange={this.callback} className="test"> <TabPane tab="搜索" key="1"> <div className="user-search"> <Input placeholder="请输入精确客户全称" value={this.state.nameSearch} onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} /> {/* <Select placeholder="选择部门" style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}} value={this.state.departmenttSearch} onChange={(e) => { this.setState({ departmenttSearch: e }) }}> { departmentArr.map(function (item) { return <Select.Option key={item.id} >{item.name}</Select.Option> }) } </Select> */} {/* <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} dropdownStyle={{ width: 120 }} style={{ width: '120px'}} dataSource={options} placeholder="客户所有人姓名" value={this.state.auto} onChange={this.httpChange} filterOption={true} onBlur={this.blurChange} onSelect={this.selectAuto} > <Input /> </AutoComplete> */} <Button type="primary" onClick={this.search}> 搜索 </Button> <Button onClick={this.reset}>重置</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> </Tabs> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table size="middle" columns={ this.state.changeList ? this.state.changeList : this.state.columns } dataSource={this.state.dataSource} rowSelection={rowSelection} pagination={this.state.pagination} /> </Spin> </div> <Detaile visitModul={this.state.visitModul} data={this.state.data} detailApi={this.props.detailApi} closeDesc={this.closeDesc} /> {this.state.zhuanjiaoVisible ? ( <ZhuanjiaoDetail cancel={this.zhuanjiaoDetailCancel} visible={this.state.zhuanjiaoVisible} id={this.state.zhuanjiaoId} /> ) : ( "" )} </div> ); }, }); export default QueryCustomer;