123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806 |
- import React, { Component } from "react";
- import {
- AutoComplete,
- Button,
- Cascader,
- Input,
- message,
- Modal,
- Popconfirm,
- Select,
- Spin,
- Table,
- Tag,
- Tooltip
- } from "antd";
- import { areaSelect, getProvince } from '@/NewDicProvinceList';
- import { industry, natureList } from '@/dataDic.js'
- import { getIndustry, getNatureType } from '@/tools.js'
- import $ from "jquery/src/ajax";
- import TextArea from "antd/es/input/TextArea";
- const Option = Select.Option;
- class InforChange extends Component {
- constructor(props) {
- super(props);
- let nature = [];
- if (props.data.nature !== undefined || props.data.nature !== null) {
- nature.push(props.data.nature);
- }
- if (props.data.enterpriseNature !== undefined || props.data.enterpriseNature !== null) {
- nature.push(props.data.enterpriseNature);
- }
- if (props.data.listedNature !== undefined || props.data.listedNature !== null) {
- nature.push(props.data.listedNature);
- }
- this.state = {
- visible: false,
- changeType: 0,
- colunmn: [
- {
- title: "操作人名称",
- dataIndex: "adminName",
- key: "adminName",
- },
- {
- title: "客户名称",
- dataIndex: "name",
- key: "name",
- render: (text) => {
- return (
- <Tooltip title={text}>
- <div
- // style={{
- // maxWidth: '150px',
- // overflow: 'hidden',
- // textOverflow: "ellipsis",
- // whiteSpace: 'nowrap',
- // }}
- >{text}</div>
- </Tooltip>
- )
- }
- },
- {
- title: "操作时间",
- dataIndex: "createTimes",
- key: "createTimes",
- },
- ],
- dataSource: [],
- inputVisible: false,
- inputValue: '',
- dataArrar: [],
- cooperationProjects: [],
- orgCode: props.data.orgCode,
- locationProvince: props.data.locationProvince,
- businessScope: props.data.businessScope,
- intendedProject: props.data.intendedProject,
- industryName: props.data.industry,
- nature: nature,
- natureText: "",
- natureOther: props.data.natureOther,
- natureOptions: [{
- value: 1,
- label: "政府机构"
- }, {
- value: 2,
- label: "科研院所"
- }, {
- value: 3,
- label: "高等院校"
- }, {
- value: 4,
- label: "社会团体"
- }, {
- value: 5,
- label: "企业",
- children: [{
- value: 1,
- label: "国企",
- children: [{
- value: 1,
- label: "上市公司",
- }, {
- value: 0,
- label: "非上市公司",
- }]
- }, {
- value: 2,
- label: "央企",
- children: [{
- value: 1,
- label: "上市公司",
- }, {
- value: 0,
- label: "非上市公司",
- }]
- }, {
- value: 3,
- label: "私企",
- children: [{
- value: 1,
- label: "上市公司",
- }, {
- value: 0,
- label: "非上市公司",
- }]
- }, {
- value: 4,
- label: "合资企业(含港澳台)",
- children: [{
- value: 1,
- label: "上市公司",
- }, {
- value: 0,
- label: "非上市公司",
- }]
- }, {
- value: 5,
- label: "外资控股",
- children: [{
- value: 1,
- label: "上市公司",
- }, {
- value: 0,
- label: "非上市公司",
- }]
- }]
- }, {
- value: 0,
- label: "其他组织"
- }]
- }
- this.onChange = this.onChange.bind(this);
- this.onCancel = this.onCancel.bind(this);
- this.loadData = this.loadData.bind(this);
- this.onOk = this.onOk.bind(this);
- this.showInput = this.showInput.bind(this);
- this.handleInputConfirm = this.handleInputConfirm.bind(this);
- this.handleClose = this.handleClose.bind(this);
- this.handleCloseCooperation = this.handleCloseCooperation.bind(this);
- this.supervisor = this.supervisor.bind(this);
- this.onSelect = this.onSelect.bind(this);
- }
- componentDidMount() {
- let natureText = this.getNatureText(this.state.nature);
- this.setState({ natureText });
- }
- onChange(type) {
- if (!this.props.data.level && this.props.data.level != 0) {
- Modal.warning({
- title: '系统提示',
- content: (
- <div>
- <p>请先设置客户类型。操作位置:</p>
- <p>1.勾选客户名称</p>
- <p>2.点击切换至“操作”项</p>
- <p>3.选择相应的客户类型即可。</p>
- </div>
- ),
- });
- return
- }
- this.setState({
- visible: true,
- changeType: type,
- })
- }
- onCancel() {
- this.setState({
- visible: false,
- loading: false,
- changeType: 0,
- dataArrar: []
- })
- }
- loadData() {
- this.setState({
- loading: true
- });
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/customer/listUserName",
- data: {
- uid: this.props.enterpriseId,
- },
- success: function (data) {
- if (data.error.length || data.data.list == "") {
- if (data.error && data.error.length) {
- message.warning(data.error[0].message);
- }
- } else {
- this.setState({
- initialName: data.data[0] ? data.data[0].name : ''
- })
- data.data.splice(0, 1);
- this.setState({
- dataSource: data.data,
- });
- }
- }.bind(this),
- }).always(
- function () {
- this.setState({
- loading: false,
- });
- }.bind(this)
- );
- }
- onOk() {
- const { dataArrar } = this.state;
- if (this.state.changeType === 3 && !/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(dataArrar)) {
- message.warning('请输入正确的统一社会信用代码')
- return
- }
- if (this.state.changeType === 0 && dataArrar.length === 0) {
- message.warning('请输入省-市-区');
- return;
- }
- if (this.state.changeType === 1 && dataArrar.length === 0) {
- message.warning('请输入企业主管产品/服务');
- return;
- }
- if (this.state.changeType === 2 && dataArrar.length === 0) {
- message.warning('请输入意向合作项目');
- return;
- }
- if (this.state.changeType === 4 && dataArrar.length === 0) {
- message.warning('请选择企业行业');
- return
- }
- if (this.state.changeType === 5 && dataArrar.length === 0) {
- message.warning('请选择客户性质');
- return
- }
- this.setState({
- loading: true
- });
- let data = {
- uid: this.props.enterpriseId,
- }
- if (this.state.changeType === 0) {
- data.province = dataArrar[0] || undefined;
- data.city = dataArrar[1] || undefined;
- data.area = dataArrar[2] || undefined;
- }
- if (this.state.changeType === 1) {
- data.businessScope = dataArrar.join(',')
- }
- if (this.state.changeType === 2) {
- let arr = [];
- for (let i of dataArrar) {
- arr.push(i.label)
- }
- data.intendedProject = arr.join(',')
- }
- if (this.state.changeType === 3) {
- data.orgCode = dataArrar
- // this.props.onCancel();
- }
- if (this.state.changeType === 4) {
- data.industry = dataArrar
- }
- if (this.state.changeType === 5) {
- let enterpriseNature = undefined; // 企业性质 0=其他,1=国企,2=央企,3=私企,4=合资企业(含港澳台),5=外资控股
- let listedNature = undefined; // 上市 0=否,1=是
- if (dataArrar.length >= 2) {
- enterpriseNature = dataArrar[1];
- }
- if (dataArrar.length >= 3) {
- listedNature = dataArrar[2];
- }
- data.nature = dataArrar[0];
- data.enterpriseNature = enterpriseNature;
- data.listedNature = listedNature;
- data.natureOther = this.state.natureOther;
- }
- $.ajax({
- url: globalConfig.context + "/api/admin/customer/updateUserDate",
- method: "post",
- data: data
- }).done(
- function (data) {
- this.setState({
- loading: false
- });
- if (data.error.length === 0) {
- message.success("恭喜您,更改成功!");
- if (this.state.changeType === 0) {
- this.setState({
- locationProvince: getProvince(dataArrar[0], dataArrar[1], dataArrar[2])
- })
- }
- if (this.state.changeType === 1) {
- this.setState({
- businessScope: dataArrar.join(',')
- })
- }
- if (this.state.changeType === 2) {
- let arr = [];
- for (let i of dataArrar) {
- arr.push(i.label)
- }
- this.setState({
- intendedProject: arr.join(',')
- })
- }
- if (this.state.changeType === 3) {
- this.setState({
- orgCode: dataArrar
- })
- this.props.onCancel();
- }
- if (this.state.changeType === 4) {
- this.setState({
- industryName: getIndustry(dataArrar)
- })
- }
- if (this.state.changeType === 5) {
- this.setState({
- natureText: this.getNatureText(dataArrar)
- })
- }
- this.onCancel();
-
- } else {
- message.warning(data.error[0].message);
- }
- }.bind(this)
- )
- }
- /**
- * 转译客户性质
- * @param {*} value
- * @returns
- */
- getNatureText(value) {
- if (value.length === 1 && value[0] === 0) {
- // 其他
- return `其他(${this.state.natureOther})`;
- } else {
- let text = [];
- let level = 0;
- const loopData = (data) => {
- for (let i=0; i<data.length; i++) {
- let item = data[i];
- if (item.value === value[level]) {
- text.push(item.label);
- if (item.children) {
- level += 1;
- loopData(item.children)
- }
- break;
- }
- }
- }
-
-
- loopData(this.state.natureOptions);
-
- return text.join("/");
- }
- }
- showInput() {
- let str = this.state.dataArrar.join('/')
- this.setState({
- inputVisible: true,
- inputValue: str
- });
- }
- handleInputConfirm() {
- let inputValue = this.state.inputValue;
- let arr = inputValue.split('/');
- let lv = true;
- for (let i of arr) {
- if (i.length > 16) {
- message.warning('单个标签字数不能超过16个字符')
- lv = false;
- return;
- }
- }
- if (lv) {
- arr = Array.from(new Set(arr));
- arr = arr.filter(v => v);
- this.setState({
- dataArrar: arr,
- inputVisible: false,
- inputValue: '',
- });
- }
- }
- handleClose(removedTag) {
- let dataArrar = this.state.dataArrar.filter(tag => { return tag !== removedTag });
- this.setState({ dataArrar });
- }
- handleCloseCooperation(removedTag) {
- let dataArrar = this.state.dataArrar.filter(tag => { return tag.value !== removedTag.value });
- this.setState({ dataArrar });
- }
- supervisor(value) {
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
- data: {
- businessName: value
- },
- success: function (data) {
- let thedata = data.data;
- if (data.error.length === 0) {
- this.setState({
- cooperationProjects: thedata,
- });
- } else {
- message.warning(data.error[0].message);
- }
- }.bind(this),
- }).always(
- function () {
- }.bind(this)
- );
- }
- onSelect(value) {
- let arr = this.state.cooperationProjects.filter(v => v.id === value);
- let arr1 = this.state.dataArrar.filter(v => v.value === value);
- if (arr.length > 0) {
- if (arr1.length > 0) {
- message.warning('选项已存在');
- } else {
- this.state.dataArrar.push({
- label: arr[0].bname,
- value: arr[0].id,
- })
- this.setState({
- dataArrar: this.state.dataArrar
- })
- }
- }
- }
- render() {
- return (
- <div style={{
- fontSize: 14,
- fontWeight: "bold",
- marginTop: 20,
- }}>
- <div style={{
- display: 'flex',
- alignItems: 'center',
- paddingBottom: '5px'
- }}>
- <div style={{ width: '123px', color: "#58A3FF" }}>统一社会信用代码:</div>
- <div style={{ color: "#58A3FF" }}>
- {
- !this.state.orgCode ? "待补充" : this.state.orgCode
- }
- </div>
- {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(3) }}>修改</Button>}
- {this.props.type === 'modify' && <span style={{ color: "red", marginLeft: 20 }}>如,科德集团则填写91430105670766451M</span>}
- </div>
- <div style={{
- display: 'flex',
- alignItems: 'center',
- paddingBottom: '5px'
- }}>
- <div style={{ width: '123px' }}>省-市-区:</div>
- <div>
- {
- this.state.locationProvince
- }
- </div>
- {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(0) }}>修改</Button>}
- </div>
- <div style={{
- display: 'flex',
- alignItems: 'center',
- paddingBottom: '5px'
- }}>
- <div style={{ width: '123px' }}>企业主营产品/服务:</div>
- <div>
- {
- this.state.businessScope
- }
- </div>
- {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(1) }}>修改</Button>}
- </div>
- <div style={{
- display: 'flex',
- alignItems: 'center',
- paddingBottom: '5px'
- }}>
- <div style={{ width: '123px' }}>意向合作项目:</div>
- <div>
- {
- this.state.intendedProject
- }
- </div>
- {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(2) }}>修改</Button>}
- </div>
- <div style={{
- display: 'flex',
- alignItems: 'center',
- paddingBottom: '5px'
- }}>
- <div style={{ width: '123px' }}>企业行业:</div>
- <div>
- {
- this.state.industryName
- }
- </div>
- {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(4) }}>修改</Button>}
- </div>
- <div style={{
- display: 'flex',
- alignItems: 'center',
- paddingBottom: '5px'
- }}>
- <div style={{ width: '123px' }}>客户性质:</div>
- <div>
- {
- this.state.natureText
- }
- </div>
- {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(5) }}>修改</Button>}
- </div>
- <Modal
- footer={null}
- maskClosable={false}
- width={this.props.type === 'journal' ? '1200px' : this.props.type === 'modify' ? '400px' : '800px'}
- title={this.props.type === 'journal' ? '操作日志' : this.props.type === 'modify' ? '信息修改' : ''}
- visible={this.state.visible}
- onCancel={this.onCancel}>
- <div>
- {this.props.type === 'modify' ?
- <div className='enterpriseNameContent'>
- <div className='enterpriseNameItem'>
- <div className='enterpriseNameTitle'>
- {
- this.state.changeType === 0 ? '省-市-区' :
- this.state.changeType === 1 ? '企业主管产品/服务' :
- this.state.changeType === 2 ? '意向合作项目' :
- this.state.changeType === 3 ? '统一社会信用代码' :
- this.state.changeType === 4 ? '企业行业' :
- this.state.changeType === 5 ? '客户性质' : ''
- }
- :
- </div>
- <div className='enterpriseNameValue'>
- {
- this.state.changeType === 0 ? this.state.locationProvince :
- this.state.changeType === 1 ? this.state.businessScope :
- this.state.changeType === 2 ? this.state.intendedProject :
- this.state.changeType === 3 ? this.state.orgCode :
- this.state.changeType === 4 ? this.state.industryName :
- this.state.changeType === 5 ? this.state.natureText : ''
- }
- </div>
- </div>
- <div className='enterpriseNameItem'>
- <div className='enterpriseNameTitle'>更改:</div>
- <div className='enterpriseNameValue'>
- {
- this.state.changeType === 0 ? <Cascader
- options={areaSelect()}
- placeholder="选择城市"
- onChange={(e, pre) => {
- this.setState({
- dataArrar: e
- })
- }}
- /> :
- this.state.changeType === 1 ?
- <div>
- <div>
- {this.state.dataArrar.map((tag) => {
- const isLongTag = tag.length > 20;
- const tagElem = (
- <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
- {isLongTag ? `${tag.slice(0, 20)}...` : tag}
- </Tag>
- );
- return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
- })}
- {
- !this.state.inputVisible &&
- <Button
- size="small"
- type="primary"
- onClick={this.showInput}>
- + 新增主营产品
- </Button>
- }
- </div>
- {this.state.inputVisible && (<div>
- <TextArea
- style={{ width: '300px', height: '100px' }}
- value={this.state.inputValue}
- onChange={(e) => {
- this.setState({
- inputValue: e.target.value
- })
- }} />
- <div style={{ color: '#f00' }}>提示:请用 / 符号隔开关键字</div>
- <div>
- <Button
- size="small"
- type="primary"
- onClick={this.handleInputConfirm}>
- 确定
- </Button>
- <Button
- size="small"
- style={{ marginLeft: '5px' }}
- onClick={() => {
- this.setState({
- inputVisible: false,
- inputValue: ''
- })
- }}>
- 取消
- </Button>
- </div>
- </div>)}
- </div>
- :
- this.state.changeType === 2 ?
- <div>
- <div style={{ paddingBottom: this.state.dataArrar.length === 0 ? 0 : '10px' }}>
- {this.state.dataArrar.map((tag, index) => {
- const isLongTag = tag.label.length > 20;
- const tagElem = (
- <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
- {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
- </Tag>
- );
- return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
- })}
- </div>
- <div>
- <AutoComplete
- style={{ width: 200 }}
- onSearch={this.supervisor}
- onSelect={this.onSelect}
- placeholder="请输入关键字"
- >
- {
- this.state.cooperationProjects.map(function (item) {
- return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
- })
- }
- </AutoComplete>
- </div>
- </div>
- :
- this.state.changeType === 3 ?
- <div>
- <div>
- <Input
- style={{ width: 200 }}
- placeholder="请输入统一社会信用代码"
- onChange={(e) => {
- this.setState({
- dataArrar: e.target.value
- })
- }}
- />
- </div>
- <div style={{ color: "red", position: "absolute" }}>如,科德集团则填写91430105670766451M</div>
- </div>
- : this.state.changeType === 4 ?
- <div>
- <Select
- style={{ width: 200 }}
- placeholder="请选择行业"
- onChange={e => {
- this.setState({
- dataArrar: e
- })
- }}
- >
- {
- industry.map(function (item) {
- return <Option key={item.value} value={item.value}>{item.key}</Option>
- })
- }
- </Select>
- </div>
- : this.state.changeType === 5 ?
- <div>
- <div>
- {/* <Select
- style={{ width: 200 }}
- placeholder="请选择客户性质"
- onChange={e => {
- this.setState({
- dataArrar: e
- })
- }}
- >
- {
- natureList.map(function (item) {
- return <Option key={item.value} value={item.value}>{item.key}</Option>
- })
- }
- </Select> */}
- <Cascader
- options={this.state.natureOptions}
- placeholder="请选择客户性质"
- onChange={e => { this.setState({ dataArrar: e }) }}
- />
- </div>
- {
- !!this.state.dataArrar && this.state.dataArrar[0] == 0 &&
- <div>
- <TextArea
- style={{ width: '300px', height: '100px' }}
- placeholder='其他说明'
- value={this.state.natureOther}
- onChange={(e) => {
- this.setState({
- natureOther: e.target.value
- })
- }} />
- </div>
- }
- </div>
- : ''
- }
- </div>
- </div>
- </div> : this.props.type === 'journal' ?
- <div>
- <Spin spinning={this.state.loading} >
- <Table
- columns={this.state.colunmn}
- dataSource={this.state.dataSource}
- pagination={false}
- scroll={{ x: "max-content", y: 0 }}
- bordered
- size="small"
- />
- </Spin>
- </div> : null
- }
- {
- this.props.type === 'modify' ?
- <Popconfirm placement="top" title="确定要修改吗?" onConfirm={(e) => {
- e.stopPropagation();
- this.onOk();
- }} okText="确定" cancelText="取消">
- <Button type='primary'>
- 确定修改
- </Button>
- </Popconfirm> : null
- }
- </div>
- </Modal >
- </div >
- )
- }
- }
- export default InforChange;
|