|
|
@@ -1,11 +1,33 @@
|
|
|
-import { Button, Drawer, Form, Input,Row, Col, Tabs, Cascader, Select, Tag, List, Typography, Icon } from 'antd'
|
|
|
+import {
|
|
|
+ Button,
|
|
|
+ Drawer,
|
|
|
+ Form,
|
|
|
+ Input,
|
|
|
+ Row,
|
|
|
+ Col,
|
|
|
+ Tabs,
|
|
|
+ Cascader,
|
|
|
+ Select,
|
|
|
+ Tag,
|
|
|
+ List,
|
|
|
+ Typography
|
|
|
+} from 'antd'
|
|
|
import React, { useState, useEffect } from 'react'
|
|
|
+import { connect } from 'dva'
|
|
|
+import SvgIcon from '@/components/SvgIcon'
|
|
|
import styles from './index.less'
|
|
|
|
|
|
-const Popcontactform = props => {
|
|
|
+const Popcontactform = (props) => {
|
|
|
// 浏览器实际宽度
|
|
|
const [ clientWidth, setClientWidth ] = useState(document.body.clientWidth * 0.75)
|
|
|
useEffect(() => {
|
|
|
+ const journallistData = () => {
|
|
|
+ const { dispatch } = props
|
|
|
+ dispatch({
|
|
|
+ type: 'journallist/fetch'
|
|
|
+ })// 派发出这个action就会调用contact中的fetch函数,然后就会请求数据
|
|
|
+ }
|
|
|
+ journallistData()
|
|
|
window.addEventListener('resize', () => {
|
|
|
setClientWidth(document.body.clientWidth * 0.7)
|
|
|
})
|
|
|
@@ -13,12 +35,19 @@ const Popcontactform = props => {
|
|
|
window.removeEventListener('resize')
|
|
|
}
|
|
|
}, [])
|
|
|
- const { visible, onClose, onCreate } = props
|
|
|
+ const {
|
|
|
+ visible,
|
|
|
+ onClose,
|
|
|
+ onCreate,
|
|
|
+ journalName: { list }
|
|
|
+ } = props
|
|
|
+ const journallist = [ ...list ]
|
|
|
+ console.log(journallist)
|
|
|
const [ form ] = Form.useForm()
|
|
|
const { TabPane } = Tabs
|
|
|
- function callback(key) {
|
|
|
- console.log(key)
|
|
|
- }
|
|
|
+ // function callback(key) {
|
|
|
+ // console.log(key)
|
|
|
+ // }
|
|
|
const residences = [
|
|
|
{
|
|
|
value: '广东省',
|
|
|
@@ -53,13 +82,20 @@ const Popcontactform = props => {
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
- const listdata = [
|
|
|
- 'Racing car sprays burning fuel into crowd.',
|
|
|
- 'Japanese princess to wed commoner.',
|
|
|
- 'Australian walks 100km after outback crash.',
|
|
|
- 'Man charged over missing wedding girl.',
|
|
|
- 'Los Angeles battles huge wildfires.'
|
|
|
+ const servicedata = [
|
|
|
+ '1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。',
|
|
|
+ '1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。',
|
|
|
+ '1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。',
|
|
|
+ '1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。'
|
|
|
+ // '1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。'
|
|
|
]
|
|
|
+ // const journallist = [
|
|
|
+ // 'Racing car sprays burning fuel into crowd.',
|
|
|
+ // 'Japanese princess to wed commoner.',
|
|
|
+ // 'Australian walks 100km after outback crash.',
|
|
|
+ // 'Man charged over missing wedding girl.',
|
|
|
+ // 'Los Angeles battles huge wildfires.'
|
|
|
+ // ]
|
|
|
return (
|
|
|
<div>
|
|
|
<div className="sheet-box">
|
|
|
@@ -75,222 +111,230 @@ const Popcontactform = props => {
|
|
|
<Row>
|
|
|
<Col span={12} className="sheet-box-left">
|
|
|
<div className="sheet-left-panel pr-4">
|
|
|
- <Row>
|
|
|
- <Col span={12}><h2>刘泽富</h2></Col>
|
|
|
- <Col span={12} className={[ "text-right",styles.textMuted ]}>陈特 创建于 2019年5月6日 14:55</Col>
|
|
|
- </Row>
|
|
|
- <Form layout="vertical" form={form}>
|
|
|
- <Form.Item
|
|
|
- label="姓名"
|
|
|
- name="clientname"
|
|
|
- rules={[ { required: false, message: '姓名' } ]}
|
|
|
- >
|
|
|
- <Input value="刘泽富" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- label="联系人地区"
|
|
|
- name="local"
|
|
|
- rules={[ { required: false, message: '地区' } ]}
|
|
|
- >
|
|
|
- <Cascader options={residences} />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- label="客户名称"
|
|
|
- name="companyname"
|
|
|
- rules={[ { required: false, message: '客户名称' } ]}
|
|
|
- >
|
|
|
- <Input value="刘泽富" />
|
|
|
- </Form.Item>
|
|
|
- <Row gutter={16}>
|
|
|
+ <Row>
|
|
|
<Col span={12}>
|
|
|
- <Form.Item
|
|
|
- label="性别"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '性别' } ]}
|
|
|
- >
|
|
|
- <Select>
|
|
|
- <Select.Option value="男">男</Select.Option>
|
|
|
- <Select.Option value="女">女</Select.Option>
|
|
|
- </Select>
|
|
|
- </Form.Item>
|
|
|
+ <h2>刘泽富</h2>
|
|
|
</Col>
|
|
|
- <Col span={12}>
|
|
|
- <Form.Item
|
|
|
- label="昵称"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '昵称' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
+ <Col span={12} className={[ 'text-right', styles.textMuted ]}>
|
|
|
+ 陈特 创建于 2019年5月6日 14:55
|
|
|
</Col>
|
|
|
</Row>
|
|
|
- <Row gutter={16}>
|
|
|
- <Col span={12}>
|
|
|
- <Form.Item
|
|
|
- label="手机"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '手机' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- </Col>
|
|
|
- <Col span={12}>
|
|
|
+ <Form layout="vertical" form={form}>
|
|
|
<Form.Item
|
|
|
- label="QQ"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: 'QQ' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row gutter={16}>
|
|
|
- <Col span={12}>
|
|
|
- <Form.Item
|
|
|
- label="电话"
|
|
|
+ label="姓名"
|
|
|
+ name="clientname"
|
|
|
+ rules={[ { required: false, message: '姓名' } ]}>
|
|
|
+ <Input value="刘泽富" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="联系人地区"
|
|
|
+ name="local"
|
|
|
+ rules={[ { required: false, message: '地区' } ]}>
|
|
|
+ <Cascader options={residences} />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="客户名称"
|
|
|
+ name="companyname"
|
|
|
+ rules={[ { required: false, message: '客户名称' } ]}>
|
|
|
+ <Input value="刘泽富" />
|
|
|
+ </Form.Item>
|
|
|
+ <Row gutter={16}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="性别"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '性别' } ]}>
|
|
|
+ <Select>
|
|
|
+ <Select.Option value="男">男</Select.Option>
|
|
|
+ <Select.Option value="女">女</Select.Option>
|
|
|
+ </Select>
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="昵称"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '昵称' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row gutter={16}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="手机"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '手机' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item label="QQ" name="" rules={[ { required: false, message: 'QQ' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row gutter={16}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="电话"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '电话' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="邮箱"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '邮箱' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row gutter={16}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="传真"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '传真' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12} />
|
|
|
+ </Row>
|
|
|
+ <Row gutter={16}>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="部门"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '部门' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Form.Item
|
|
|
+ label="职务"
|
|
|
+ name=""
|
|
|
+ rules={[ { required: false, message: '职务' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Form.Item
|
|
|
+ label="办公室"
|
|
|
name=""
|
|
|
- rules={[ { required: false, message: '电话' } ]}
|
|
|
- >
|
|
|
+ rules={[ { required: false, message: '办公室' } ]}>
|
|
|
<Input value="" />
|
|
|
- </Form.Item>
|
|
|
- </Col>
|
|
|
- <Col span={12}>
|
|
|
+ </Form.Item>
|
|
|
<Form.Item
|
|
|
- label="邮箱"
|
|
|
+ label="联系人地址"
|
|
|
name=""
|
|
|
- rules={[ { required: false, message: '邮箱' } ]}
|
|
|
- >
|
|
|
+ rules={[ { required: false, message: '联系人地址' } ]}>
|
|
|
<Input value="" />
|
|
|
- </Form.Item>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row gutter={16}>
|
|
|
- <Col span={12}>
|
|
|
- <Form.Item
|
|
|
- label="传真"
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="联系人乘车"
|
|
|
name=""
|
|
|
- rules={[ { required: false, message: '传真' } ]}
|
|
|
- >
|
|
|
+ rules={[ { required: false, message: '联系人乘车' } ]}>
|
|
|
<Input value="" />
|
|
|
- </Form.Item>
|
|
|
- </Col>
|
|
|
- <Col span={12}/>
|
|
|
- </Row>
|
|
|
- <Row gutter={16}>
|
|
|
- <Col span={12}>
|
|
|
- <Form.Item
|
|
|
- label="部门"
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="联系人地标"
|
|
|
name=""
|
|
|
- rules={[ { required: false, message: '部门' } ]}
|
|
|
- >
|
|
|
+ rules={[ { required: false, message: '联系人地标' } ]}>
|
|
|
<Input value="" />
|
|
|
- </Form.Item>
|
|
|
- </Col>
|
|
|
- <Col span={12}>
|
|
|
+ </Form.Item>
|
|
|
<Form.Item
|
|
|
- label="职务"
|
|
|
+ label="联系人住宿"
|
|
|
name=""
|
|
|
- rules={[ { required: false, message: '职务' } ]}
|
|
|
- >
|
|
|
+ rules={[ { required: false, message: '联系人住宿' } ]}>
|
|
|
<Input value="" />
|
|
|
- </Form.Item>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Form.Item
|
|
|
- label="办公室"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '办公室' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- label="联系人地址"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '联系人地址' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- label="联系人乘车"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '联系人乘车' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- label="联系人地标"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '联系人地标' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- label="联系人住宿"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '联系人住宿' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- label="备注"
|
|
|
- name=""
|
|
|
- rules={[ { required: false, message: '备注' } ]}
|
|
|
- >
|
|
|
- <Input value="" />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item label="个人标签">
|
|
|
- <span className="ant-form-text"><Tag color="#16A085">标签</Tag><Tag color="#2980B9">特别关注</Tag></span>
|
|
|
- </Form.Item>
|
|
|
- <Form.Item label="协作标签">
|
|
|
- <span className="ant-form-text"><Tag color="#F8AC59">协作标签1</Tag><Tag color="#FF69B4">协作标签2</Tag></span>
|
|
|
- </Form.Item>
|
|
|
- </Form>
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- className="ant-btn ant-btn-primary"
|
|
|
- onClick={() => {
|
|
|
- form
|
|
|
- .validateFields()
|
|
|
- .then(values => {
|
|
|
- onCreate(values)
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- }}>
|
|
|
- 确定
|
|
|
- </Button>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="备注" name="" rules={[ { required: false, message: '备注' } ]}>
|
|
|
+ <Input value="" />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="个人标签">
|
|
|
+ <span className="ant-form-text">
|
|
|
+ <Tag color="#16A085">标签</Tag>
|
|
|
+ <Tag color="#2980B9">特别关注</Tag>
|
|
|
+ </span>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="协作标签">
|
|
|
+ <span className="ant-form-text">
|
|
|
+ <Tag color="#F8AC59">协作标签1</Tag>
|
|
|
+ <Tag color="#FF69B4">协作标签2</Tag>
|
|
|
+ </span>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ className="ant-btn ant-btn-primary"
|
|
|
+ onClick={() => {
|
|
|
+ form
|
|
|
+ .validateFields()
|
|
|
+ .then(values => {
|
|
|
+ onCreate(values)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }}>
|
|
|
+ 确定
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col span={12}>
|
|
|
<div className="sheet-right-panel pl-4">
|
|
|
- <Tabs onChange={callback} type="card">
|
|
|
- <TabPane tab="养护云造价" key="1">
|
|
|
+ {/* <Tabs onChange={callback} type="card"> */}
|
|
|
+ <Tabs type="card">
|
|
|
+ <TabPane tab="养护云造价" key="养护云造价">
|
|
|
Content of Tab Pane 1
|
|
|
</TabPane>
|
|
|
- <TabPane tab="大司空云计价" key="2">
|
|
|
+ <TabPane tab="大司空云计价" key="大司空云计价">
|
|
|
Content of Tab Pane 2
|
|
|
</TabPane>
|
|
|
- <TabPane tab="软件锁" key="3">
|
|
|
+ <TabPane tab="软件锁" key="软件锁">
|
|
|
Content of Tab Pane 3
|
|
|
</TabPane>
|
|
|
- <TabPane tab="通行账号" key="4">
|
|
|
+ <TabPane tab="通行账号" key="通行账号">
|
|
|
Content of Tab Pane 3
|
|
|
</TabPane>
|
|
|
</Tabs>
|
|
|
</div>
|
|
|
- <div className="sheet-btns">
|
|
|
- <a><Icon type="icon-plus1" /> 绑定加密锁</a>
|
|
|
+ <div className="sheet-btns pl-4 pt-4">
|
|
|
+ <Button type="primary" ghost>
|
|
|
+ <SvgIcon type="icon-link" /> 绑定加密锁
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
- <div className="sheet-panel-record">
|
|
|
- <List
|
|
|
- dataSource={listdata}
|
|
|
- renderItem={item => (
|
|
|
- <List.Item>
|
|
|
- <Typography.Text mark>[ITEM]</Typography.Text> {item}
|
|
|
- </List.Item>
|
|
|
- )}
|
|
|
- />
|
|
|
+ <div className="sheet-panel-record pl-4">
|
|
|
+ <Tabs type="card">
|
|
|
+ <TabPane tab="服务记录" key="服务记录">
|
|
|
+ <List
|
|
|
+ dataSource={servicedata}
|
|
|
+ split={false}
|
|
|
+ renderItem={item => (
|
|
|
+ <List.Item>
|
|
|
+ <Typography.Text mark />
|
|
|
+ {item}
|
|
|
+ </List.Item>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </TabPane>
|
|
|
+ <TabPane tab="日志" key="日志">
|
|
|
+ <List
|
|
|
+ // dataSource={listdata}
|
|
|
+ dataSource={journallist}
|
|
|
+ split={false}
|
|
|
+ renderItem={item => (
|
|
|
+ <List.Item>
|
|
|
+ <Typography.Text mark />
|
|
|
+ {item}
|
|
|
+ </List.Item>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </TabPane>
|
|
|
+ </Tabs>
|
|
|
</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
@@ -300,4 +344,8 @@ const Popcontactform = props => {
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-export default Popcontactform
|
|
|
+// export default Popcontactform
|
|
|
+export default connect(({ journallist, loading }) => ({
|
|
|
+ journalName: journallist,
|
|
|
+ getlist: loading.effects['journallist/fetch']
|
|
|
+}))(Popcontactform)
|