Browse Source

常用联系人完成界面

liting2017 6 years ago
parent
commit
b84698584b

+ 254 - 0
js/component/manageCenter/index/contacts/index.jsx

@@ -0,0 +1,254 @@
+import React from 'react';
+import ajax from 'jquery/src/ajax/xhr.js';
+import $ from 'jquery/src/ajax';
+import moment from 'moment';
+import '@/manageCenter/financialManage/distribute/public.less';
+import {  Button, Input, Spin, Table, Select, message } from 'antd';
+import SelContact from './selContact';
+
+const Contact = React.createClass({
+    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));
+	},
+    loadData(pageNo) {
+        this.state.data = [];
+        this.setState({
+            page:pageNo,
+            loading: true
+        });
+        $.ajax({
+            method: "post",
+            dataType: "json",
+            crossDomain: false,
+            url: globalConfig.context + "/api/admin/order/listAllSettlement",
+            data: {
+                pageNo: pageNo || 1,
+                pageSize: this.state.pagination.pageSize,
+                name: this.state.name,
+                departmentId:this.state.departmenttList,
+            },
+            success: function (data) {
+                let theArr = [];
+                if (!data.data || !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({
+                            key: i,
+                            id:thisdata.id,
+		                    name: thisdata.name,
+                            departmentName:thisdata.departmentName,
+                            position:thisdata.position,
+                            mobile:thisdata.mobile
+                        });
+                    };
+                }
+                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
+                });
+            }.bind(this),
+        }).always(function () {
+            this.setState({
+                loading: false
+            });
+        }.bind(this));
+    },
+    getInitialState() {
+        return {
+            searchMore: true,
+            RowData:{},
+            selectedRowKeys: [],
+            selectedRows: [],
+            loading: false,
+            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: 'departmentName',
+                    key: 'departmentName'
+                }, {
+                    title: '职务',
+                    dataIndex: 'position',
+                    key: 'position'
+                },{
+                    title: '联系手机',
+                    dataIndex: 'mobile',
+                    key: 'mobile'
+                }
+            ],
+            dataSource: [],
+        }
+    },
+    componentWillMount() {
+        this.loadData();
+        this.departmentList()
+    },
+
+    closeDesc(e, s) {
+        this.state.RowData={};
+        this.state.showDesc = e;
+        if (s) {
+            this.loadData(this.state.page);
+        };
+    },
+    search() {
+        this.loadData();
+    },
+    reset() {
+        this.state.name='';
+        this.state.departmenttList = [];
+        this.loadData();
+    },
+    //删除
+    del(){
+        let deletedIds =[];
+        let rowItem = this.state.selectedRowKeys[0];
+        let data = this.state.dataSource ||[];
+        if (data.length) {
+            deletedIds.push(data[rowItem].id);
+        }
+        this.setState({
+            selectedRowKeys: [],
+            loading: deletedIds.length > 0
+        });
+        $.ajax({
+            method: "POST",
+            dataType: "json",
+            crossDomain: false,
+            url: globalConfig.context + "/api/user/achievement/delete",
+            data: {
+                ids: deletedIds
+            }
+        }).done(function (data) {
+            if (!data.error.length) {
+                message.success('删除成功!');
+            } else {
+                message.warning(data.error[0].message);
+            };
+            this.setState({
+                loading: false
+            });
+        }.bind(this));
+    },
+    //新增
+    add(){
+        this.setState({
+            showDesc:true 
+        });
+    },
+    render() { 
+        const rowSelection = {
+            selectedRowKeys: this.state.selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+                this.setState({
+                    selectedRows: selectedRows.slice(-1),
+                    selectedRowKeys: selectedRowKeys.slice(-1)
+                });
+            }
+        };
+        const hasSelected = this.state.selectedRowKeys.length > 0;
+        let departmentArr = this.state.departmentArr || [];
+        return ( <div className="user-content">
+            <div className="content-title">
+                <span>常用联系人</span>
+                </div>
+                <div className="user-search">
+                    <Input placeholder="联系人姓名"
+                        value={this.state.name}
+                        onChange={(e) => { this.setState({ name: e.target.value }); }} /> 
+                    <Select placeholder="所属部门"
+                            style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
+                            value={this.state.departmenttList}
+                            onChange={(e) => { this.setState({ departmenttList: e }) }}>
+                            {
+                                departmentArr.map(function (item) {
+                                        return <Select.Option key={item.id} >{item.name}</Select.Option>
+                                })
+                            }
+                    </Select>
+                    <Button type="primary" onClick={this.search}>搜索</Button>
+                    <Button onClick={this.reset}>重置</Button>
+                    <Button type="danger" disabled={!hasSelected} onClick={this.del}>删除</Button>
+                    <Button type="primary" onClick={this.add} style={{float:'right'}}>新增常用联系人</Button>
+                </div>
+                <div className="patent-table">
+                    <Spin spinning={this.state.loading}>
+                        <Table columns={this.state.columns}
+                            dataSource={this.state.dataSource}
+                            rowSelection={rowSelection}
+                            pagination={this.state.pagination}
+                             />
+                    </Spin>
+                </div>
+                <SelContact
+                    departmentArr={departmentArr}
+                    data={this.state.RowData}
+                    showDesc={this.state.showDesc}
+                    closeDesc={this.closeDesc.bind(this)}
+                />
+        </div> )
+    }
+})
+ 
+export default Contact;

+ 220 - 0
js/component/manageCenter/index/contacts/selContact.jsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import ajax from 'jquery/src/ajax/xhr.js';
+import $ from 'jquery/src/ajax';
+import { Form,Radio, Button, Input, Select, Spin, Table, message, Modal ,Popconfirm} from 'antd';
+
+const Assign=React.createClass({
+    
+    getInitialState() {
+        return {
+            contact:0,
+            selectedRows: [],
+            distributionList:[],
+            searchMore: true,
+            loading: false,
+            visible:false,
+            showDesc:false,
+            pagination: {
+                defaultCurrent: 1,
+                defaultPageSize: 10,
+                showQuickJumper: true,
+                pageSize: 4,
+                onChange: function (page) {
+                    this.loadData(page);
+                }.bind(this),
+                showTotal: function (total) {
+                    return '共' + total + '条数据';
+                }
+            },
+            userList:[
+            	{
+                    title: '用户姓名',
+                    dataIndex: 'name',
+                    key: 'name'
+                },{
+                    title: '部门机构',
+                    dataIndex: 'departmentName',
+                    key: 'departmentName'
+                }, {
+                    title: '职务',
+                    dataIndex: 'position',
+                    key: 'position'
+                },{
+                    title: '联系手机',
+                    dataIndex: 'mobile',
+                    key: 'mobile'
+                }
+            ],
+            dataSource: [],
+        };
+    },
+    //操作分配
+    confirmDelet(index){
+    	this.setState({
+    		orderNos:index.orderNo,
+    	});
+    },
+    onCancel(){
+    	this.setState({
+    		visible:false
+        })
+        this.props.closeDesc(false,false);
+    },
+    onShow() {
+		this.setState({
+			visible: false,
+		});
+		this.props.closeDesc(false, true);
+	},
+    //分配对象列表
+    contactList(){
+        $.ajax({
+            method: "get",
+            dataType: "json",
+            crossDomain: false,
+            url: globalConfig.context + '/api/admin/superviser/adminList',
+            data: {
+                pageNo: 1,
+                pageSize:999,
+                departmentId:this.state.departmenttList,
+                name:this.state.financeNameSearch,
+            },
+            success: function (data) {
+                let theArr = [];
+                if (!data.data) {
+                    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({
+                             key: i,
+	                         id: thisdata.id,
+	                         userNo: thisdata.userNo,
+	                         name:thisdata.name,
+	                         departmentName:thisdata.departmentName,
+	                         departmentId:thisdata.departmentId,
+	                         position:thisdata.position,
+	                         mobile:thisdata.mobile,
+                        });
+                    };
+                };
+                this.setState({
+                    distributionList: theArr,
+                });
+            }.bind(this),
+        }).always(function () {
+            this.setState({
+                loading: false
+            });
+        }.bind(this));
+    },
+    //选定对象
+    handleSubmit(e){
+        e.preventDefault();
+        let selectedRows = this.state.selectedRows,idArr = [];
+        selectedRows.map(item=>{
+            idArr.push(item.id);
+        })
+    	this.setState({
+            loading: true
+        });
+        $.ajax({
+            method: "post",
+            dataType: "json",
+            crossDomain: false,
+            url: globalConfig.context +'/api/admin/addContact',
+            data: {
+            	id:JSON.stringify(idArr)
+            }
+        }).done(function (data) {
+            if (!data.error.length) {
+                message.success('添加成功');
+                this.onShow();
+            } else {
+                message.warning(data.error[0].message);
+            };
+            this.setState({
+                loading: false,
+            });
+        }.bind(this));
+    },
+    searchOrder(){
+    	this.contactList();
+    },
+    resetOrder(){
+    	this.state.departmenttList=undefined;
+    	this.state.financeNameSearch='';
+    	this.setState({
+    		distributionList:[]
+    	});
+    },
+    componentWillMount() {
+       
+    },
+    componentWillReceiveProps(nextProps) {
+        this.state.visible=nextProps.showDesc;
+    },
+    render() {
+        const rowSelection = {
+            selectedRowKeys: this.state.selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+                this.setState({
+                    selectedRows: selectedRows,
+                    selectedRowKeys: selectedRowKeys
+                });
+            }
+        };
+        let departmentArr = this.props.departmentArr || [],
+            nub = this.state.distributionList.length;
+        return (
+            <div className="user-content" >
+	            <Modal maskClosable={false} visible={this.state.visible}
+                        onOk={this.onShow} onCancel={this.onCancel}
+                        width='800px'
+                        title='常用联系人选择'                     
+                        footer=''
+                        className="admin-desc-content">
+			            <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} >
+			                <Spin spinning={this.state.loading}>
+			                	<div>
+			                		<Select placeholder="订单部门"
+				                            style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
+				                            value={this.state.departmenttList}
+				                            onChange={(e) => { this.setState({ departmenttList: e }) }}>
+				                            {
+			                                    departmentArr.map(function (item) {
+			                                            return <Select.Option key={item.id} >{item.name}</Select.Option>
+			                                    })
+			                                }
+				                    </Select>
+				                    <Input placeholder="姓名" style={{width:'150px',marginLeft:'10px'}}
+				                        value={this.state.financeNameSearch}
+				                        onChange={(e) => { this.setState({ financeNameSearch: e.target.value }); }} />  
+				                    <Button type="primary" onClick={this.searchOrder} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
+	                    			<Button onClick={this.resetOrder}>重置</Button>
+			                	</div>
+			                	 <div className="patent-table" style={{marginTop:'10px'}}>
+				                    <Spin spinning={this.state.loading}>
+				                        <Table columns={this.state.userList}
+                                            dataSource={this.state.distributionList}
+                                            rowSelection={rowSelection}
+                                            pagination={false}
+                                            scroll={{ y:400}}
+				                            />
+				                    </Spin>
+				                </div>
+                                {nub?<div style={{textAlign:'center',marginTop:15}}>
+                                        <Button type="primary" onClick={(e)=>{this.handleSubmit(e)}}  style={{marginRight:20}}>选定</Button>
+                                        <Button type="default" onClick={()=>{this.onCancel()}}>取消</Button>
+                                </div>:''}
+			                </Spin>
+			            </Form>
+			    </Modal>
+            </div>
+        );
+    }
+});
+
+export default Assign;

+ 38 - 3
js/component/manageCenter/index/content.jsx

@@ -376,17 +376,52 @@ const MessageModal = React.createClass({
 const Content = React.createClass({
     getInitialState() {
         return {
-            loading: false
+            loading: false,
+            component:'<div></div>'
         };
     },
+    getKey(key){
+        switch(key){
+            case 'normal':
+                require.ensure([], () => {
+                    this.setState({
+                        component: <MessageModal />,
+                    });
+                });
+            break;
+            case "contacts":
+              let Module = require('./contacts/index').default;
+                require.ensure([], () => {
+                    this.setState({
+                        component: <Module />,
+                    });
+                });    
+            break;
+            default:
+            require.ensure([], () => {
+                let Module = require('../module').default;
+                this.setState({
+                    component:<Module />	    
+                	});
+            }); 
+        }
+        window.location.hash=key;
+    }, 
+    componentWillMount() {
+        if (window.location.hash) {
+            this.getKey((window.location.hash).slice(1));
+        } else {
+            this.getKey('normal');
+        };
+    },    
     render() {
         return (
             <div className="manage-content">
-                <LeftTab handlekey={this.handlekey} />
+                <LeftTab handlekey={this.getKey} />
                 <div className="content-right">
                     <Spin spinning={this.state.loading} className='spin-box'>
                         <div className="index-content">
-                            <MessageModal />
+                            {this.state.component}
                         </div>
                     </Spin>
                 </div>

+ 3 - 0
js/component/manageCenter/index/leftTab.jsx

@@ -30,6 +30,9 @@ const LeftTab = React.createClass({
                 <Menu.Item key="normal">
                     常用功能
                 </Menu.Item>
+                <Menu.Item key="contacts">
+                    常用联系人
+                </Menu.Item>
             </Menu>
         );
     },