|
@@ -6,21 +6,226 @@
|
|
|
|
|
|
import React from 'react';
|
|
|
import './contacts.less';
|
|
|
-import{ Row ,Col,Button,Card,Input} from 'antd';
|
|
|
+import { Row, Col, Button, Card, Input, Form, message, Spin } from 'antd';
|
|
|
+import ajax from 'jquery/src/ajax/xhr.js';
|
|
|
+import $ from 'jquery/src/ajax';
|
|
|
+const FormItem = Form.Item;
|
|
|
|
|
|
-class Contancts extends React.Component{
|
|
|
- constructor(props){
|
|
|
- super(props);
|
|
|
- this.state={
|
|
|
- loading:false
|
|
|
- }
|
|
|
- }
|
|
|
- //添加联系人
|
|
|
- addContact(){
|
|
|
-
|
|
|
- }
|
|
|
- render(){
|
|
|
- const formItemLayout = {
|
|
|
+class Contancts extends React.Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ loading: false,
|
|
|
+ contactData: [
|
|
|
+ {
|
|
|
+ id: '12',
|
|
|
+ edit: false,
|
|
|
+ name: '李霆1',
|
|
|
+ department: '平台事业发展',
|
|
|
+ post: '前端',
|
|
|
+ photo: '18320746285',
|
|
|
+ telPhoto: '5551456',
|
|
|
+ qq: '265478954',
|
|
|
+ email: '125468@qq.com',
|
|
|
+ remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '123',
|
|
|
+ edit: false,
|
|
|
+ name: '李霆2',
|
|
|
+ department: '平台事业发展',
|
|
|
+ post: '前端',
|
|
|
+ photo: '18320746285',
|
|
|
+ telPhoto: '5551456',
|
|
|
+ qq: '265478954',
|
|
|
+ email: '125468@qq.com',
|
|
|
+ remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ oldData: [
|
|
|
+ {
|
|
|
+ id: '12',
|
|
|
+ edit: false,
|
|
|
+ name: '李霆1',
|
|
|
+ department: '平台事业发展',
|
|
|
+ post: '前端',
|
|
|
+ photo: '18320746285',
|
|
|
+ telPhoto: '5551456',
|
|
|
+ qq: '265478954',
|
|
|
+ email: '125468@qq.com',
|
|
|
+ remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '123',
|
|
|
+ edit: false,
|
|
|
+ name: '李霆2',
|
|
|
+ department: '平台事业发展',
|
|
|
+ post: '前端',
|
|
|
+ photo: '18320746285',
|
|
|
+ telPhoto: '5551456',
|
|
|
+ qq: '265478954',
|
|
|
+ email: '125468@qq.com',
|
|
|
+ remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ loadData() {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: 'post',
|
|
|
+ dataType: 'json',
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + '/api/admin/customer/shuju',
|
|
|
+ data: {},
|
|
|
+ success: function(data) {
|
|
|
+ if (data.error.length || data.data == '') {
|
|
|
+ if (data.error && data.error.length) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ contactData: data.data,
|
|
|
+ oldData: data.data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }.bind(this)
|
|
|
+ }).always(
|
|
|
+ function() {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ //添加联系人
|
|
|
+ addContact() {
|
|
|
+ let contactData = this.state.contactData;
|
|
|
+ contactData.push({
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ edit: true,
|
|
|
+ department: '',
|
|
|
+ post: '',
|
|
|
+ photo: '',
|
|
|
+ telPhoto: '',
|
|
|
+ qq: '',
|
|
|
+ email: '',
|
|
|
+ remarks: ''
|
|
|
+ });
|
|
|
+ this.setState({ contactData });
|
|
|
+ }
|
|
|
+ //保存函数
|
|
|
+ saveFun(item, index) {
|
|
|
+ console.log(item,index)
|
|
|
+ let contactData = this.state.contactData;
|
|
|
+ if(!item.name||!item.photo){
|
|
|
+ message.warning('请填写带 * 号项!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (item.id) {
|
|
|
+ this.state.oldData[index].id = item.id;
|
|
|
+ this.state.oldData[index].name = item.name;
|
|
|
+ this.state.oldData[index].department = item.department;
|
|
|
+ this.state.oldData[index].post = item.post;
|
|
|
+ this.state.oldData[index].photo = item.photo;
|
|
|
+ this.state.oldData[index].telPhoto = item.telPhoto;
|
|
|
+ this.state.oldData[index].qq = item.qq;
|
|
|
+ this.state.oldData[index].email = item.email;
|
|
|
+ this.state.oldData[index].remarks = item.remarks;
|
|
|
+ } else {
|
|
|
+ this.state.oldData.push({
|
|
|
+ id: '',
|
|
|
+ name: item.name,
|
|
|
+ department: item.department,
|
|
|
+ post: item.post,
|
|
|
+ photo: item.photo,
|
|
|
+ telPhoto: item.telPhoto,
|
|
|
+ qq: item.qq,
|
|
|
+ email: item.email,
|
|
|
+ remarks: item.remarks
|
|
|
+ });
|
|
|
+ }
|
|
|
+ console.log(this.state.oldData)
|
|
|
+ return;
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: 'post',
|
|
|
+ dataType: 'json',
|
|
|
+ url: globalConfig.context + '/api/admin/customer/updatePersonalCustomer',
|
|
|
+ data: {
|
|
|
+ contactData: JSON.stringify(this.state.oldData)
|
|
|
+ }
|
|
|
+ }).done(
|
|
|
+ function(data) {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ if (!data.error.length) {
|
|
|
+ message.success('保存成功!');
|
|
|
+ this.loadData();
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ //删除
|
|
|
+ delFun(item, index) {
|
|
|
+ let contactData = this.state.contactData;
|
|
|
+ if (!item.id) {
|
|
|
+ contactData.splice(index, 1);
|
|
|
+ this.setState(contactData);
|
|
|
+ message.success('删除成功');
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: 'post',
|
|
|
+ dataType: 'json',
|
|
|
+ url: globalConfig.context + '/api/admin/customer/del',
|
|
|
+ data: {
|
|
|
+ uid: item.id
|
|
|
+ }
|
|
|
+ }).done(
|
|
|
+ function(data) {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ if (!data.error.length) {
|
|
|
+ message.success('删除成功!');
|
|
|
+ this.loadData();
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //编辑时
|
|
|
+ editFun(item, index) {
|
|
|
+ this.state.oldData[index].edit = true;
|
|
|
+ this.setState({
|
|
|
+ contactData: this.state.oldData
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //取消编辑
|
|
|
+ cancelFun(item,index){
|
|
|
+ this.state.oldData[index].edit = false;
|
|
|
+ this.setState({
|
|
|
+ contactData:this.state.oldData
|
|
|
+ })
|
|
|
+ }
|
|
|
+ componentWillMount() {
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ const formItemLayout = {
|
|
|
labelCol: {
|
|
|
span: 6
|
|
|
},
|
|
@@ -28,41 +233,225 @@ class Contancts extends React.Component{
|
|
|
span: 14
|
|
|
}
|
|
|
};
|
|
|
- return (
|
|
|
- <div className="contact-wrap">
|
|
|
- <Row>
|
|
|
- <Col span={4} offset={1}>
|
|
|
- <h4>联系人</h4>
|
|
|
- </Col>
|
|
|
- <Col span={6} offset={8}>
|
|
|
- <Button size="large" type="primary" onClick={this.addContact.bind(this)}>添加常用联系人</Button>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row className="card">
|
|
|
- <Card>
|
|
|
- <Row>
|
|
|
- <Col span={6}>
|
|
|
- <FormItem {...formItemLayout} label="姓名">
|
|
|
- <Input
|
|
|
- style={{ width: '90%' }}
|
|
|
- placeholder="联系人姓名"
|
|
|
- value={this.state.name}
|
|
|
- onChange={(e) => {
|
|
|
- this.setState({ name: e.target.value });
|
|
|
- }}
|
|
|
- />
|
|
|
- <span className="color-red"> * </span>
|
|
|
- </FormItem>
|
|
|
- </Col>
|
|
|
- <Col span={6}>2</Col>
|
|
|
- <Col span={6}>3</Col>
|
|
|
- <Col span={6}>4</Col>
|
|
|
- </Row>
|
|
|
- </Card>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
+ return (
|
|
|
+ <div className="contact-wrap">
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ <Row>
|
|
|
+ <Col span={4} offset={1}>
|
|
|
+ <h4>常用联系人</h4>
|
|
|
+ </Col>
|
|
|
+ <Col span={6} offset={8}>
|
|
|
+ <Button size="large" type="primary" onClick={this.addContact.bind(this)}>
|
|
|
+ 添加常用联系人
|
|
|
+ </Button>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ {this.state.contactData.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <Row className="card" key={index}>
|
|
|
+ <Card>
|
|
|
+ <Row>
|
|
|
+ <Col span={6}>
|
|
|
+ <FormItem {...formItemLayout} label="姓名">
|
|
|
+ {item.edit && (
|
|
|
+ <Input
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ placeholder="联系人姓名"
|
|
|
+ value={item.name}
|
|
|
+ onChange={(e) => {
|
|
|
+ (item.name = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ {item.edit ? (
|
|
|
+ <span className="color-red"> * </span>
|
|
|
+ ) : (
|
|
|
+ <span>{item.name}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <FormItem {...formItemLayout} label="部门">
|
|
|
+ {item.edit ? (
|
|
|
+ <Input
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ placeholder="联系人部门"
|
|
|
+ value={item.department}
|
|
|
+ onChange={(e) => {
|
|
|
+ (item.department = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span>{item.department}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <FormItem {...formItemLayout} label="职务">
|
|
|
+ {item.edit ? (
|
|
|
+ <Input
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ placeholder="联系人职务"
|
|
|
+ value={item.post}
|
|
|
+ onChange={(e) => {
|
|
|
+ (item.post = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span>{item.post}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <FormItem {...formItemLayout} label="手机号码">
|
|
|
+ {item.edit && (
|
|
|
+ <Input
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ placeholder="联系人手机"
|
|
|
+ value={item.photo}
|
|
|
+ onChange={(e) => {
|
|
|
+ (item.photo = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ {item.edit ? (
|
|
|
+ <span className="color-red"> * </span>
|
|
|
+ ) : (
|
|
|
+ <span>{item.photo}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row>
|
|
|
+ <Col span={6}>
|
|
|
+ <FormItem {...formItemLayout} label="固定电话">
|
|
|
+ {item.edit ? (
|
|
|
+ <Input
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ placeholder="联系人固定电话"
|
|
|
+ value={item.telPhoto}
|
|
|
+ onChange={(e) => {
|
|
|
+ (item.telPhoto = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span>{item.telPhoto}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <FormItem {...formItemLayout} label="QQ">
|
|
|
+ {item.edit ? (
|
|
|
+ <Input
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ placeholder="联系人QQ"
|
|
|
+ value={item.qq}
|
|
|
+ onChange={(e) => {
|
|
|
+ (item.qq = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span>{item.qq}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <FormItem {...formItemLayout} label="邮箱">
|
|
|
+ {item.edit ? (
|
|
|
+ <Input
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ placeholder="联系人电子邮箱"
|
|
|
+ value={item.email}
|
|
|
+ onChange={(e) => {
|
|
|
+ (item.email = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span>{item.email}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row>
|
|
|
+ <Col span={18}>
|
|
|
+ <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 20 }} label="备注">
|
|
|
+ {item.edit ? (
|
|
|
+ <Input
|
|
|
+ type="textarea"
|
|
|
+ placeholder="输入备注"
|
|
|
+ rows={4}
|
|
|
+ value={item.remarks}
|
|
|
+ onChange={(e, pre) => {
|
|
|
+ (item.remarks = e.target.value),
|
|
|
+ this.setState({ contactData: this.state.contactData });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span>{item.remarks}</span>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ {!item.edit ? (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ icon="edit"
|
|
|
+ size="large"
|
|
|
+ style={{ marginRight: 20 }}
|
|
|
+ onClick={() => {
|
|
|
+ this.editFun(item, index);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ size="large"
|
|
|
+ style={{ marginRight: 20 }}
|
|
|
+ onClick={() => {
|
|
|
+ this.saveFun(item, index);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 保存
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ {item.edit &&
|
|
|
+ item.id && (
|
|
|
+ <Button
|
|
|
+ size="large"
|
|
|
+ style={{ marginRight: 20 }}
|
|
|
+ onClick={() => {
|
|
|
+ this.cancelFun(item, index);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 暂存
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ <Button
|
|
|
+ type="danger"
|
|
|
+ size="large"
|
|
|
+ onClick={() => {
|
|
|
+ this.delFun(item, index);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Card>
|
|
|
+ </Row>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </Spin>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-export default Contancts;
|
|
|
+export default Contancts;
|