cldV2react/src/components/PopContactForm/index.jsx

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 [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)
    })
    return () => {
      window.removeEventListener('resize', () => {})
    }
  }, [])
  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)
  // }
  const residences = [
    {
      value: '广东省',
      label: '广东省',
      children: [
        {
          value: '珠海市',
          label: '珠海市',
          children: [
            {
              value: '香洲区',
              label: '香洲区'
            }
          ]
        }
      ]
    },
    {
      value: '安徽省',
      label: '安徽省',
      children: [
        {
          value: '合肥市',
          label: '合肥市',
          children: [
            {
              value: '庐阳区',
              label: '庐阳区'
            }
          ]
        }
      ]
    }
  ]
  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">
        <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 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}>
                    <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 pl-4">
                {/* <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 pl-4 pt-4">
                <Button type="primary" ghost>
                  <SvgIcon type="icon-link" /> 绑定加密锁
                </Button>
              </div>
              <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>
                          <List.Item.Meta
                            // avatar=
                            title={item.operation}
                            description={item.date}
                          />
                        </List.Item>
                      )}
                    />
                  </TabPane>
                </Tabs>
              </div>
            </Col>
          </Row>
        </Drawer>
      </div>
    </div>
  )
}

// export default Popcontactform
export default connect(({ journallist, loading }) => ({
  journalName: journallist,
  getlist: loading.effects['journallist/fetch']
}))(Popcontactform)