|
|
@@ -1,357 +0,0 @@
|
|
|
-import {
|
|
|
- Button,
|
|
|
- Drawer,
|
|
|
- Form,
|
|
|
- Input,
|
|
|
- Row,
|
|
|
- Col,
|
|
|
- Tabs,
|
|
|
- Cascader,
|
|
|
- Select,
|
|
|
- Tag,
|
|
|
- List,
|
|
|
- Table
|
|
|
-} from 'antd'
|
|
|
-import React, { useState, useEffect } from 'react'
|
|
|
-import { connect } from 'dva'
|
|
|
-import SvgIcon from '@/components/SvgIcon'
|
|
|
-import './index.scss'
|
|
|
-
|
|
|
-const Popcontent = props => {
|
|
|
- // 浏览器实际宽度
|
|
|
- const [ clientWidth, setClientWidth ] = useState(document.body.clientWidth * 0.75)
|
|
|
- useEffect(() => {
|
|
|
- const journallistData = () => {
|
|
|
- const { dispatch } = props
|
|
|
- dispatch({
|
|
|
- type: 'journallist/fetch'
|
|
|
- }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
|
|
|
- }
|
|
|
- journallistData()
|
|
|
- const servicelisData = () => {
|
|
|
- const { dispatch } = props
|
|
|
- dispatch({
|
|
|
- type: 'servicelist/fetch'
|
|
|
- }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
|
|
|
- }
|
|
|
- servicelisData()
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- setClientWidth(document.body.clientWidth * 0.7)
|
|
|
- })
|
|
|
- return () => {
|
|
|
- window.removeEventListener('resize', () => {})
|
|
|
- }
|
|
|
- }, [])
|
|
|
- const {
|
|
|
- visible,
|
|
|
- onClose,
|
|
|
- onCreate,
|
|
|
- journalName,
|
|
|
- servicelistName
|
|
|
- } = props
|
|
|
- const journallist = [ ...journalName.list ]
|
|
|
- const servicelist = [ ...servicelistName.lists ]
|
|
|
- // console.log(servicelist)
|
|
|
- const [ form ] = Form.useForm()
|
|
|
- const { TabPane } = Tabs
|
|
|
- // function callback(key) {
|
|
|
- // console.log(key)
|
|
|
- // }
|
|
|
- const residences = [
|
|
|
- {
|
|
|
- value: '广东省',
|
|
|
- label: '广东省',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: '珠海市',
|
|
|
- label: '珠海市',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: '香洲区',
|
|
|
- label: '香洲区'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- value: '安徽省',
|
|
|
- label: '安徽省',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: '合肥市',
|
|
|
- label: '合肥市',
|
|
|
- children: [
|
|
|
- {
|
|
|
- value: '庐阳区',
|
|
|
- label: '庐阳区'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- const servicecolumns = [
|
|
|
- {
|
|
|
- title: '类型/时间',
|
|
|
- dataIndex: 'typedate',
|
|
|
- key: 'typedate'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '服务内容',
|
|
|
- dataIndex: 'servicecont',
|
|
|
- key: 'servicecont'
|
|
|
- }
|
|
|
- ]
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <div className="sheet-box">
|
|
|
- <Drawer
|
|
|
- title="联系人"
|
|
|
- placement="right"
|
|
|
- width={clientWidth}
|
|
|
- closable
|
|
|
- onClose={onClose}
|
|
|
- visible={visible}
|
|
|
- // mask={false}
|
|
|
- >
|
|
|
- <Row>
|
|
|
- <Col span={12} className="sheet-box-left">
|
|
|
- <div className="sheet-left-panel zh-pd-right-15">
|
|
|
- <Row>
|
|
|
- <Col span={12}>
|
|
|
- <h2>刘泽富</h2>
|
|
|
- </Col>
|
|
|
- {/* className={[ 'text-right', styles.textMuted ]} */}
|
|
|
- <Col span={12} className="zh-text-right zh-gray">
|
|
|
- 陈特 创建于 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}>
|
|
|
- <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: '办公室' } ]}>
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col span={12}>
|
|
|
- <div className="sheet-right-panel zh-pd-left-15">
|
|
|
- {/* <Tabs onChange={callback} type="card"> */}
|
|
|
- <Tabs type="card">
|
|
|
- <TabPane tab="养护云造价" key="养护云造价">
|
|
|
- Content of Tab Pane 1
|
|
|
- </TabPane>
|
|
|
- <TabPane tab="大司空云计价" key="大司空云计价">
|
|
|
- Content of Tab Pane 2
|
|
|
- </TabPane>
|
|
|
- <TabPane tab="软件锁" key="软件锁">
|
|
|
- Content of Tab Pane 3
|
|
|
- </TabPane>
|
|
|
- <TabPane tab="通行账号" key="通行账号">
|
|
|
- Content of Tab Pane 3
|
|
|
- </TabPane>
|
|
|
- </Tabs>
|
|
|
- </div>
|
|
|
- <div className="sheet-btns zh-pd-left-15 zh-pd-top-15">
|
|
|
- <Button type="primary" ghost>
|
|
|
- <SvgIcon type="icon-link" /> 绑定加密锁
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- <div className="sheet-panel-record zh-pd-left-15">
|
|
|
- <Tabs type="card">
|
|
|
- <TabPane tab="服务记录" key="服务记录">
|
|
|
- <Table
|
|
|
- columns={servicecolumns}
|
|
|
- dataSource={servicelist}
|
|
|
- pagination={false}
|
|
|
- />
|
|
|
- </TabPane>
|
|
|
- <TabPane tab="日志" key="日志">
|
|
|
- <List
|
|
|
- dataSource={journallist}
|
|
|
- split={false}
|
|
|
- renderItem={item => (
|
|
|
- <List.Item>
|
|
|
- <List.Item.Meta
|
|
|
- // avatar=
|
|
|
- title={item.operation}
|
|
|
- description={item.date}
|
|
|
- />
|
|
|
- </List.Item>
|
|
|
- )}
|
|
|
- />
|
|
|
- </TabPane>
|
|
|
- </Tabs>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </Drawer>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
-}
|
|
|
-
|
|
|
-// export default Popcontent
|
|
|
-export default connect(({ journallist, servicelist, loading }) => ({
|
|
|
- journalName: journallist,
|
|
|
- servicelistName:servicelist,
|
|
|
- getlist: loading.effects['journallist/fetch']
|
|
|
-}))(Popcontent)
|
