* 新需求

config/routes.js

@@ -39,6 +39,30 @@ export default [
             hideInMenu: true,
             component: './channel/edit',
           },
+          {
+            path: '/contact',
+            name: '联系人管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/contact/contact/list',
+                name: '联系人',
+                component: './contact/contact/list',
+              },
+              {
+                path: '/contact/contact/add',
+                name: '新增',
+                hideInMenu: true,
+                component: './contact/contact/add',
+              },
+              {
+                path: '/contact/contact/detail',
+                name: '详情',
+                hideInMenu: true,
+                component: './contact/contact/detail',
+              },
+            ],
+          },
           {
             path: '/sample',
             name: 'H5样例管理',

src/pages/contact/contact/add.jsx

@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Modal, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import router from 'umi/router';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import moment from 'moment';
+
+
+
+const header = props => {
+
+    const [data, setData] = useState({})
+
+    const [datas, setDatas] = useState([])//表格数据
+    const [visible, setVisible] = useState()
+    const [formsdate, setFormsDate] = useState({})
+    //   const [page, changePage] = useState({})
+    useEffect(() => {
+
+        setVisible(false)
+
+    }, [])
+    const ModalData = props => {
+
+        const data = [];
+        return (
+            <>
+                <div>
+                </div>
+            </>
+        )
+    }
+
+    const onSelectBusiness = (e) => {
+        console.log('11111')
+
+    }
+
+    const fields = [
+        {
+            label: '姓名',
+            name: 'contactName',
+            type: FieldTypes.Text,
+            value: data.contactName,
+            rules: [
+                { required: true, message: '请输入通知标题' },
+                { max: 6, message: '通知标题名称不超过6个字符' }
+            ]
+        },
+        {
+            label: '性别',
+            name: 'sex',
+            type: FieldTypes.Select,
+            value: data.sex,
+            dict: [{
+                name: '男',
+                value: '1',
+            },
+            {
+                name: '女',
+                value: '2',
+            }],
+            rules: [
+                { required: false, message: '请选择性别' }
+            ]
+        },
+        {
+            label: '头像',
+            name: 'avatar',
+            type: FieldTypes.ImageUploader,
+            value: data.avatar,
+            rules: [
+                { required: false, message: '请选择头像' },
+            ],
+            help: '建议尺寸：Npx*Npx，比例：1:1，格式：jpg，大小：不超过300KB，用于客户查看',
+        },
+        {
+            label: '对外头衔',
+            name: 'appellation',
+            type: FieldTypes.Text,
+            value: data.appellation,
+            rules: [
+                { required: false, message: '请输入对外头衔' },
+                { max: 20, message: '对外头衔不能超过20个字符' }
+            ]
+        },
+        {
+            label: '固话',
+            name: 'telephone',
+            type: FieldTypes.Text,
+            value: data.telephone,
+            rules: [
+                { required: false, message: '请输入固话' },
+                { max: 20, message: '固话内容不能超过20个字符' }
+            ]
+        },
+        {
+            label: '手机号',
+            name: 'phone',
+            type: FieldTypes.Text,
+            value: data.phone,
+            rules: [
+                { required: true, message: '请输入手机号' },
+                // { max: 20, message: '' }
+            ]
+        },
+        {
+            label: '微信号',
+            name: 'wxCardImg',
+            type: FieldTypes.ImageUploader,
+            value: data.wxCardImg,
+            rules: [
+                { required: false, message: '请上传微信号' },
+            ],
+            help: '联系人的微信二维码名片，请到手机端微信-我-顶部微信号中保存后上传',
+        },
+        {
+            label: '邮箱',
+            name: 'mail',
+            type: FieldTypes.Text,
+            value: data.mail,
+            rules: [
+                { required: false, message: '请输入邮箱' },
+                { max: 20, message: '邮箱不能超过20个字符' }
+            ]
+        },
+        {
+            label: '联系地址*',
+            name: 'address',
+            type: FieldTypes.Text,
+            value: data.address,
+            rules: [
+                { required: false, message: '请输入联系地址' },
+                { max: 40, message: '邮箱不能超过40个字符' }
+            ]
+        },
+        {
+            label: '内部岗位*',
+            name: 'job',
+            type: FieldTypes.Text,
+            value: data.job,
+            rules: [
+                { required: false, message: '请输入内部岗位' },
+                { max: 20, message: '内部岗位不能超过20个字符' }
+            ]
+        },
+        {
+            label: '权重',
+            name: 'orderNo',
+            type: FieldTypes.Number,
+            value: data.orderNo,
+
+            help: '用于列表排序，越大越靠前'
+        },
+    ]
+
+    const handleSubmit = (values) => {
+        console.log | ("开始提交 联系人")
+        let submitValues = values;
+        props.form.validateFields((err, values) => {
+            console.log(values)
+            if (!err) {
+                request({ ...apis.contact.taContactAdd, data: { ...submitValues }, }).then((data) => {
+                    //   message.info("保存成功,请上传房源")
+                    router.push({
+                        pathname: '/contact/contact/list',
+                        query: {
+                            //   salesBatchId: data.salesBatchId,
+                            //   buildingId: data.buildingId,
+                        },
+                    });
+                }).catch((err) => {
+                    message.info(err.msg || err.message)
+                })
+            }
+        });
+    }
+    //model
+    const handleShowModel = val => {
+        setVisible(true);
+    }
+
+    const handleCancel = val => {
+        setVisible(false);
+    }
+
+    const cancelPage = () => {
+        router.push({
+            pathname: '/contact/pathname',
+        });
+    }
+
+    return (
+        <>
+            <div>
+                <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
+            </div>
+        </>
+    )
+}
+
+const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
+export default WrappedNormalLoginForm

src/pages/contact/contact/detail.jsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Modal, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import router from 'umi/router';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import moment from 'moment';
+
+
+
+const header = props => {
+    const [data, setData] = useState({})
+    const contactId = props.location.query.id
+    if (contactId) {
+        useEffect(() => {
+            getData(contactId);
+        }, [])
+
+        // 查询列表
+        const getData = (contactId) => {
+            request({
+                ...apis.contact.taContactGet,
+                urlData: { id: contactId }
+            }).then((data) => {
+                setData(data)
+            }).catch((err) => {
+                message.error(err.msg || err.message)
+            })
+        }
+    }
+
+    const [datas, setDatas] = useState([])//表格数据
+    const [visible, setVisible] = useState()
+    const [formsdate, setFormsDate] = useState({})
+    //   const [page, changePage] = useState({})
+    useEffect(() => {
+
+        setVisible(false)
+
+    }, [])
+    const ModalData = props => {
+
+        const data = [];
+        return (
+            <>
+                <div>
+                </div>
+            </>
+        )
+    }
+
+    const onSelectBusiness = (e) => {
+        console.log('11111')
+
+    }
+
+    const fields = [
+        {
+            label: '姓名',
+            name: 'contactName',
+            type: FieldTypes.Text,
+            value: data.contactName,
+            rules: [
+                { required: true, message: '请输入通知标题' },
+                { max: 6, message: '通知标题名称不超过6个字符' }
+            ]
+        },
+        {
+            label: '性别',
+            name: 'sex',
+            type: FieldTypes.Select,
+            value: data.sex === 1 ? '男' : '女',
+            dict: [{
+                name: '男',
+                value: '1',
+            },
+            {
+                name: '女',
+                value: '2',
+            }],
+            rules: [
+                { required: false, message: '请选择性别' }
+            ]
+        },
+        {
+            label: '头像',
+            name: 'avatar',
+            type: FieldTypes.ImageUploader,
+            value: data.avatar,
+            rules: [
+                { required: false, message: '请选择头像' },
+            ],
+            help: '建议尺寸：Npx*Npx，比例：1:1，格式：jpg，大小：不超过300KB，用于客户查看',
+        },
+        {
+            label: '对外头衔',
+            name: 'appellation',
+            type: FieldTypes.Text,
+            value: data.appellation,
+            rules: [
+                { required: false, message: '请输入对外头衔' },
+                { max: 20, message: '对外头衔不能超过20个字符' }
+            ]
+        },
+        {
+            label: '固话',
+            name: 'telephone',
+            type: FieldTypes.Text,
+            value: data.telephone,
+            rules: [
+                { required: false, message: '请输入固话' },
+                { max: 20, message: '固话内容不能超过20个字符' }
+            ]
+        },
+        {
+            label: '手机号',
+            name: 'phone',
+            type: FieldTypes.Text,
+            value: data.phone,
+            rules: [
+                { required: true, message: '请输入手机号' },
+                // { max: 20, message: '' }
+            ]
+        },
+        {
+            label: '微信号',
+            name: 'wxCardImg',
+            type: FieldTypes.ImageUploader,
+            value: data.wxCardImg,
+            rules: [
+                { required: false, message: '请上传微信号' },
+            ],
+            help: '联系人的微信二维码名片，请到手机端微信-我-顶部微信号中保存后上传',
+        },
+        {
+            label: '邮箱',
+            name: 'mail',
+            type: FieldTypes.Text,
+            value: data.mail,
+            rules: [
+                { required: false, message: '请输入邮箱' },
+                { max: 20, message: '邮箱不能超过20个字符' }
+            ]
+        },
+        {
+            label: '联系地址*',
+            name: 'address',
+            type: FieldTypes.Text,
+            value: data.address,
+            rules: [
+                { required: false, message: '请输入联系地址' },
+                { max: 40, message: '邮箱不能超过40个字符' }
+            ]
+        },
+        {
+            label: '内部岗位*',
+            name: 'job',
+            type: FieldTypes.Text,
+            value: data.job,
+            rules: [
+                { required: false, message: '请输入内部岗位' },
+                { max: 20, message: '内部岗位不能超过20个字符' }
+            ]
+        },
+        {
+            label: '权重',
+            name: 'orderNo',
+            type: FieldTypes.Number,
+            value: data.orderNo,
+
+            help: '用于列表排序，越大越靠前'
+        },
+    ]
+
+    const handleSubmit = (values) => {
+        if (contactId) {
+            values.contactId = contactId
+            request({ ...apis.contact.taContactUpdate, urlData: { id: contactId }, data: { ...values } }).then((data) => {
+                cancelPage();
+            }).catch((err) => {
+                message.error(err.msg || err.message)
+            })
+        }
+    }
+    //model
+    const handleShowModel = val => {
+        setVisible(true);
+    }
+
+    const handleCancel = val => {
+        setVisible(false);
+    }
+
+    const cancelPage = () => {
+        router.push({
+            pathname: '/contact/contact/list',
+        });
+    }
+
+    return (
+        <>
+            <div>
+                <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
+            </div>
+        </>
+    )
+}
+
+const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
+export default WrappedNormalLoginForm

src/pages/contact/contact/list.jsx

@@ -0,0 +1,220 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import styles from './style.less';
+import { fetch, apis } from '../../../utils/request';
+import request from '../../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+function header(props) {
+
+    const [data, setData] = useState([])
+    const [contactList, setContactList] = useState([])
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+    // 查询列表
+    const getList = params => {
+        request({ ...apis.contact.listContactByCondition, params: { ...params } }).then(data => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+    const toAdd = (id) => () => {
+        router.push({
+            pathname: '/contact/contact/add',
+            //   query: {
+            //     id
+            //   },
+        });
+    }
+
+    const toEdit = (id) => () => {
+        router.push({
+            pathname: '/contact/contact/detail',
+            query: {
+                id
+            },
+        });
+    }
+
+    const handleSubmit = (e, props) => {
+        console.log(e)
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                getList({ pageNum: 1, pageSize: 10, ...values })
+            }
+        });
+    }
+
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 });
+    }
+
+    const toDel = rowData => () => {
+        if (contactList.length < 1) {
+            openNotificationWithIcon('error', '请先选择需要删除的联系人')
+            return
+        }
+
+        Modal.confirm({
+            title: '确定联系人信息吗',
+            okText: '确定',
+            cancelText: '取消',
+            onOk() {
+                request({ ...apis.contact.batchDeleteContact, data: contactList, }).then((data) => {
+                    message.info("操作成功")
+                    getList({ pageNum: 1, pageSize: 10 });
+                }).catch((err) => {
+                    
+                })
+            },
+        });
+    }
+
+    const rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
+            setContactList(selectedRows)
+        },
+    };
+
+    const changePageNum = pageNumber => {
+        getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
+    }
+
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'contactName',
+            key: 'contactName',
+            align: 'center',
+
+        },
+        {
+            title: '性别',
+            dataIndex: 'sex',
+            key: 'sex',
+            align: 'center',
+            render: (sex) => <span>{sex === 1 ? '男' : '女'}</span>,
+        },
+        {
+            title: '头像',
+            dataIndex: 'avatar',
+            key: 'avatar',
+            align: 'center',
+            render: (text, record) => <img src={record.avatar} className={styles.touxiang} />,
+        },
+        {
+            title: '固话',
+            dataIndex: 'telephone',
+            key: 'telephone',
+            align: 'center',
+        },
+        {
+            title: '手机号',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '内部岗位',
+            dataIndex: 'job',
+            key: 'job',
+            align: 'center',
+
+        },
+        {
+            title: '权重',
+            dataIndex: 'orderNo',
+            key: 'orderNo',
+            align: 'center',
+        },
+        {
+            title: '操作',
+            dataIndex: 'handle',
+            key: 'handle',
+            align: 'center',
+            render: (x, row) => (
+                <>
+                    <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEdit(row.contactId)}>
+                        编辑<Icon type="form" className={styles.edit} />
+                    </span>
+                </>
+            ),
+        },
+    ];
+
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <div>
+                <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+                    <Form.Item>
+                        {getFieldDecorator('contactName')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="姓名"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('telephone')(
+                            <Input style={{ width: '180px' }} placeholder="固话">
+
+                            </Input>,
+                        )}
+                    </Form.Item>
+
+                    <Form.Item>
+                        {getFieldDecorator('phone')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="手机号"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('job')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="内部岗位"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+
+                        <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                            搜索
+              </Button>
+                        {/*  */}
+                        <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                            重置
+            </Button>
+                    </Form.Item>
+                </Form>
+
+                <Button type="danger" className={styles.addBtn} onClick={toAdd()}>新增</Button>
+
+                <Button type="primary" className={styles.addBtn} onClick={toDel()} style={{ marginLeft: '30px' }} >删除</Button>
+
+                <Table rowSelection={rowSelection} rowKey="goodsList" dataSource={data.records} columns={columns} pagination={false} />
+
+                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+                    {<Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e)} current={data.current} />}
+                </div>
+            </div>
+        </>
+    )
+}
+
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/contact/contact/style.less

@@ -0,0 +1,48 @@
+.addBtn {
+    padding: 0 40px;
+    height: 36px;
+    margin: 30px 0;
+  }
+  
+  .touxiang {
+    width: 93px;
+    height: 93px;
+  }
+  
+  .imgPerfect {
+    width: 120px;
+    height: 40px;
+  }
+  
+  .imgIndex {
+    width: 150px;
+    height: 92.7px;
+  }
+  
+  .imgSmall {
+    width: 128px;
+    height: 192px;
+  }
+  
+  .propaganda {
+    width: 240px;
+    height: 60px;
+  }
+  
+  .ant-table-column-title {
+    font-weight: 600;
+  }
+  
+  .shoppingCart {
+    // color: #dcdcdc;
+    color: #bebebe;
+    margin-left: 6px;
+    font-size: 16px;
+  }
+  
+  .edit {
+    // color: #dcdcdc;
+    color: #bebebe;
+    margin-left: 6px;
+    font-size: 15px;
+  }

src/services/apis.js

@@ -76,7 +76,33 @@ const apis = {
       action: 'center',
     },
   },
-  
+  contact:{
+    listContactByCondition: {
+      url: `${prefix}/listContactByCondition`,
+      method: 'GET',
+      action: 'center',
+    },
+    taContactAdd: {
+      url: `${prefix}/taContact`,
+      method: 'POST',
+      action: 'center',
+    },
+    batchDeleteContact: {
+      url: `${prefix}/taContact/batchDelete`,
+      method: 'PUT',
+      action: 'center',
+    },
+    taContactGet: {
+      url: `${prefix}/taContact/:id`,
+      method: 'GET',
+      action: 'center',
+    },
+    taContactUpdate: {
+      url: `${prefix}/taContact/:id`,
+      method: 'PUT',
+      action: 'center',
+    },
+  }
   
 }