客户相关内容

src/components/LazyCascader/index.jsx

@@ -34,7 +34,7 @@ const LazyCascader = props => {
       options={options}
       onChange={handleOnChange}
       loadData={loadData}
-      allowClear={false}
+      // allowClear={false}
       fieldNames={{ label: 'name', value: 'id' }}
       changeOnSelect
       defaultValue={['省', '市', '区']}

src/components/PopContent/Companys/CompanyForm.jsx

@@ -0,0 +1,78 @@
+import React,{ useEffect } from 'react'
+import { Row, Col } from 'antd'
+import EditableForm from '@/components/EditableForm'
+
+const CompanyForm = props => {
+  const { customer } = props
+  const columns =[
+    {
+      dataIndex: 'companyName',
+      label: '公司全称',
+      span: 24
+    },
+    {
+      dataIndex: 'local',
+      label: '公司地区',
+      span: 24
+    },
+    {
+      dataIndex: 'nature',
+      label: '公司性质',
+      span: 24
+    },
+    {
+      dataIndex: 'address',
+      label: '公司地址',
+      span: 24
+    },
+    {
+      dataIndex: 'fax',
+      label: '公司传真',
+      span: 24
+    },
+    {
+      dataIndex: 'webservice',
+      label: '网址',
+      span: 24
+    },
+    {
+      dataIndex: 'ride',
+      label: '乘车路线',
+      span: 24
+    },
+    {
+      dataIndex: 'landmarks',
+      label: '地标建筑',
+      span: 24
+    },
+    {
+      dataIndex: 'stay',
+      label: '参考住宿',
+      span: 24
+    },
+    {
+      dataIndex: 'remarks',
+      label: '备注',
+      span: 24
+    }
+  ]
+  useEffect(() => {
+    // console.log(client)
+    // form.setFieldsValue(client)
+  }, [customer])
+  return (
+    <div>
+      <Row>
+        <Col span={12}>
+          <h2>{customer.companyName}</h2>
+        </Col>
+        <Col span={12} className="zh-text-right zh-gray">
+        {customer.staffName} 创建于 {customer.createTime}
+        </Col>
+      </Row>
+      <EditableForm dataSource={customer} columns={columns} />
+    </div>
+  )
+}
+
+export default CompanyForm

src/components/PopContent/Companys/CompanyLowerList.jsx

@@ -0,0 +1,39 @@
+import { Tabs, List } from 'antd'
+import useAutoTable from '@/hooks/useAutoTable'
+import { dayjsFormat } from '@/utils/utils'
+
+const CompanyLowerList = props => {
+  const { collapsed,log } = props
+  const { TabPane } = Tabs
+  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 // 需要被裁掉的高度
+  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
+  return (
+    <div>
+      <div className="zh-pd-left-15">
+      <Tabs type="card">
+          <TabPane tab="日志" key="日志">
+            <div className="sheet-panel-record" style={{ height:y-250,overflowY:'auto' }}>
+              <List
+                dataSource={log}
+                split={false}
+                renderItem={item => (
+                  <List.Item>
+                    <a>@{item.clientName}</a>{item.content}
+                    <List.Item.Meta
+                      // avatar=
+                      // title=
+                      // description={ dayjsFormat(item.createTime, 'YYYY-MM-DD')}
+                      description={ dayjsFormat(item.createTime)}
+                    />
+                  </List.Item>
+                )}
+              />
+            </div>
+          </TabPane>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
+export default CompanyLowerList

src/components/PopContent/Companys/CompanyTabList.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Tabs, Button } from 'antd'
+import SvgIcon from '@/components/SvgIcon'
+
+const CompanyTabList = () => {
+  const { TabPane } = Tabs
+  return (
+    <div>
+      <div className="zh-pd-left-15">
+        <Tabs type="card">
+          <TabPane tab="联系人" key="联系人">
+            <div className="sheet-right-panel">
+              联系人
+              {/* <Table columns={curingcolumns} dataSource={curinglist} pagination={false} /> */}
+            </div>
+          </TabPane>
+          <TabPane tab="软件锁" key="软件锁">
+            <div className="sheet-right-panel">软件锁</div>
+          </TabPane>
+        </Tabs>
+      </div>
+      <div className="sheet-btns zh-pd-left-15 zh-pd-top-15">
+        {/* <Button type="primary" ghost>
+          <SvgIcon type="icon-link" /> 绑定加密锁
+        </Button> */}
+        <Button
+          type="primary"
+          ghost
+          size="small"
+          // onClick={() => setAddService({ ...setAddService, visible: true })}
+        >
+          <SvgIcon type="icon-plus" /> 添加联系人
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default CompanyTabList

src/components/PopContent/Companys/index.jsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react'
+import { Drawer, Row, Col } from 'antd'
+import useAutoTable from '@/hooks/useAutoTable'
+import consts from '@/consts'
+import { apiCompanyDetail } from '@/services/company'
+import CompanyForm from '@/components/PopContent/Companys/CompanyForm'
+import CompanyLowerList from '@/components/PopContent/Companys/CompanyLowerList'
+import CompanyTabList from '@/components/PopContent/Companys/CompanyTabList'
+
+const index = props => {
+  const { visible, onClose,collapsed, id = '' } = props
+  const needSubtractHeight = 55 // 需要被裁掉的高度
+  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+  const [x,y] = useAutoTable(collapsed, needSubtractHeight)
+  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
+  const [state, setState] = useState({
+    customer: {},
+    log:[]
+  })
+  const initData = async () => {
+    const {
+      data: { customer = {}, log = [] },
+      code = -1
+    } = await apiCompanyDetail(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, customer, log })
+    }
+  }
+  useEffect(() => {
+    if (visible) {
+      initData()
+    }
+    window.addEventListener('resize', () => {
+      setClientWidth(document.body.clientWidth * 0.7)
+    })
+    return () => {
+      window.removeEventListener('resize', () => {})
+    }
+  }, [visible])
+  return (
+    <div>
+      <div className='sheet-box'>
+        <Drawer
+            title="公司"
+            placement="right"
+            bodyStyle={{
+              height:y,
+              overflowY:'hidden'
+            }}
+            width={clientWidth}
+            closable
+            onClose={onClose}
+            visible={visible}
+            // mask={false}
+          >
+          <Row>
+            <Col span={12} className="sheet-box-left" style={{ height:y-25,overflowY:'auto' }}>
+              <div className="sheet-left-panel zh-pd-right-15">
+                <CompanyForm customer={state.customer}/>
+              </div>
+            </Col>
+            <Col span={12}>
+              <CompanyTabList />
+              <CompanyLowerList log={state.log} />
+            </Col>
+          </Row>
+        </Drawer>
+      </div>
+    </div>
+  )
+}
+
+export default index

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -1,7 +1,6 @@
-import { Row, Col, Cascader, Select } from 'antd'
+import { Row, Col } from 'antd'
 import React, { useEffect } from 'react'
 import EditableForm from '@/components/EditableForm'
-// eslint-disable-next-line import/no-unresolved
 // import '../Contacts/index.scss'
 
 const ContanctForm = props => {

src/models/company.js

@@ -0,0 +1,35 @@
+import consts from '@/consts'
+import { queryCompany } from '@/services/company'
+
+export default {
+  namespace: 'company',
+  state: {
+    data: [],
+    total: 0
+  },
+  // 用于处理异步操作和业务逻辑，由action触发，但不能修改state
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryCompany, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'show',
+          payload: response.data
+        })
+
+      }
+      // console.log(response)
+    }
+  },
+  // reducers:用于处理同步操作，由action触发，可修改state
+  reducers: {
+    // action:是由reducers及effects的触发器，一般是第一个对象，如：{type:'add',payload:todo}
+    show(state, action) {
+      return {
+        ...state,
+        data: action.payload.customer,
+        total: action.payload.total
+      }
+    }
+  }
+}

src/pages/Customer/Company/AddCompany/index.jsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { Form, Input, Modal, Row, Col, Select } from 'antd'
+import LazyCascader from '@/components/LazyCascader'
+import { useForm } from 'antd/lib/form/Form'
+
+const index =  props => {
+  const [form] = useForm()
+  const { visible, onCancel, onConfirm, loading } = props
+  const { Option } = Select
+  const layout = {
+    labelCol: { flex: "100px" }
+  }
+  return (
+    <div>
+      <Modal
+        title="添加客户"
+        width={800}
+        onCancel={onCancel}
+        visible={visible}
+        confirmLoading={loading}
+        onOk={() => {
+          form.validateFields().then(values => {
+            form.resetFields()
+            onConfirm(values)
+          })
+        }}
+        >
+        <Form {...layout} form={form} name="basic">
+          <Row>
+            <Col span={24}>
+              <Form.Item
+                label="公司全称"
+                name="companyName"
+                rules={[{ required: true, message: '公司全称' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="公司地区" name="" rules={[{ message: '公司地区' }]}>
+                <LazyCascader key="LazyCascader" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="公司性质" name="gender" rules={[{ message: '公司性质' }]}>
+                <Select>
+                  <Option key="设计" value="设计">设计</Option>
+                  <Option key="咨询" value="咨询">咨询</Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label="公司地址"
+                name="address"
+                rules={[{ message: '公司地址' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="公司传真"
+                name="fax"
+                rules={[{ message: '公司传真' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="网址"
+                name="webservice"
+                rules={[{ message: '网址' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label="乘车路线"
+                name="ride"
+                rules={[{ message: '乘车路线' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label="地标建筑"
+                name="landmarks"
+                rules={[{ message: '地标建筑' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label="参考住宿"
+                name="stay"
+                rules={[{ message: '参考住宿' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                label="备注"
+                name="remarks"
+                rules={[{ message: '备注' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
+    </div>
+  )
+}
+
+export default index

src/pages/Customer/Company/index.jsx

@@ -1,9 +1,227 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import ProTable from '@ant-design/pro-table'
+import useAutoTable from '@/hooks/useAutoTable'
+import SvgIcon from '@/components/SvgIcon'
+import { Button } from 'antd'
+import consts from '@/consts'
+import { queryCompany } from '@/services/company'
+import LazyCascader from '@/components/LazyCascader'
+import Companys from '@/components/PopContent/Companys'
+import AddCompany from '@/pages/Customer/Company/AddCompany'
+
+const Company = props => {
+  const { collapsed } = props
+  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
+  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+
+  const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
+
+  const [state, setState] = useState({
+    data: [],
+    total: 0,
+    id: '',
+    visible: false
+  })
+  const [addClient, setAddClient] = useState({
+    visible: false,
+    loading: false
+  })
+  // const handleAddCompany = async values => {
+  //   setAddCompany({ ...addCompany, loading: true })
+  //   const { code = -1 } = await apiAddCompany(values)
+  //   if (code === consts.RET_CODE.SUCCESS) {
+  //     message.success('新增成功')
+  //     setState({ ...state, data: values })
+  //   }
+  //   // 请求完了
+  //   setAddCompany({ ...addCompany, loading: false, visible: false })
+  //   await initData()
+  // }
+  const initData = async payload => {
+    const {
+      code = -1,
+      data: { customer = [], total = 0 } = { customer: [], total: 0 }
+    } = await queryCompany(payload)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, data: customer, total })
+    }
+  }
+  useEffect(() => {
+    // props.getlist();
+    initData()
+  }, [])
+
+  const handleSearch = value => {
+    initData({ search: value })
+  }
+  const handleOnselect = payload => {
+    initData({ ...payload })
+  }
+
+  // 展示drawer
+  const showDrawer = id => {
+    // console.log(id);
+    setState({ ...state, id, visible: true })
+  }
+
+  // 隐藏drawer
+  const hideDrawer = () => {
+    setState({ ...state, visible: false, id: '' })
+  }
+
+  const onCreate = values => {
+    console.log(values)
+  }
+  const columns = [
+    {
+      title: '客户名称',
+      dataIndex: 'companyName',
+      key: 'companyName',
+      width: 320,
+      render: (companyName, record) => <a onClick={() => showDrawer(record.id)}>{companyName}</a>
+    },
+    {
+      title: '地区',
+      dataIndex: 'local',
+      key: 'local',
+      width: 150
+    },
+    {
+      title: '个人标签',
+      dataIndex: 'biaoqian',
+      key: 'biaoqian',
+      width: 80
+    },
+    {
+      title: '协作标签',
+      dataIndex: 'biaoqian1',
+      key: 'biaoqian1',
+      width: 80
+    },
+    {
+      title: '联系人',
+      dataIndex: 'clientTotal',
+      key: 'clientTotal',
+      width: 80
+    },
+    {
+      title: '公司性质',
+      dataIndex: 'nature',
+      key: 'nature',
+      width: 80
+    },
+    {
+      title: '公司地址',
+      dataIndex: 'address',
+      key: 'address',
+      width: 80
+    },
+    {
+      title: '公司传真',
+      dataIndex: 'fax',
+      key: 'fax',
+      width: 80
+    },
+    {
+      title: '网址',
+      dataIndex: 'webservice',
+      key: 'webservice',
+      width: 80
+    },
+    {
+      title: '乘车路线',
+      dataIndex: 'ride',
+      key: 'ride',
+      width: 80
+    },
+    {
+      title: '地标建筑',
+      dataIndex: 'landmarks',
+      key: 'landmarks',
+      width: 80
+    },
+    {
+      title: '参考住宿',
+      dataIndex: 'stay',
+      key: 'stay',
+      width: 80
+    },
+    {
+      title: '备注',
+      dataIndex: 'remarks',
+      key: 'remarks',
+      width: 80
+    }
+  ]
+  const [columnsStateMap, setColumnsStateMap] = useState({
+    address: {
+      show: false
+    },
+    nature: {
+      show: false
+    },
+    fax: {
+      show: false
+    },
+    webservice: {
+      show: false
+    },
+    ride: {
+      show: false
+    },
+    stay: {
+      show: false
+    },
+    landmarks: {
+      show: false
+    },
+    remarks: {
+      show: false
+    }
+  })
+
 
-const Company = () => {
   return (
     <div>
-      casda
+      <ProTable
+        rowKey={record => record.id}
+        search={false}
+        headerTitle="客户"
+        bordered
+        toolbar={{
+          search: {
+            onSearch: handleSearch
+          },
+          actions: [
+            <LazyCascader onSelect={handleOnselect} key="LazyCascader" />,
+            <Button
+              key="button"
+              type="primary"
+              onClick={() => setAddClient({ ...addClient, visible: true })}
+            >
+              <SvgIcon type="icon-plus" />
+              客户
+            </Button>
+          ]
+        }}
+        scroll={{ x, y }}
+        columnsStateMap={columnsStateMap}
+        onColumnsStateChange={map => setColumnsStateMap(map)}
+        columns={columns}
+        dataSource={state.data}
+        pagination={{
+          pageSize: consts.PAGE_SIZE,
+          total: state.total,
+          onChange: (page, size) => initData({ page, size })
+        }}
+      />
+      <AddCompany
+        // onConfirm={handleAddCompany}
+        loading={addClient.loading}
+        visible={addClient.visible}
+        onCancel={() => setAddClient({ ...addClient, visible: false })}
+      />
+      <Companys onClose={hideDrawer} visible={state.visible} onCreate={onCreate} id={state.id} />
     </div>
   )
 }

src/services/company.js

@@ -0,0 +1,43 @@
+import request from '@/basic/utils/request'
+import consts from '@/consts'
+
+/**
+ * 请求客户列表
+ * @param {*} payload 载荷
+ */
+export async function queryCompany(payload) {
+  const params = { page: 1, size: consts.PAGE_SIZE, ...payload }
+  const data = await request('/api/customer/list', {
+    params: { ...params }
+  })
+  return data
+}
+
+/**
+ * 获取客户详情
+ * @param {string} id 联系人记录id
+ */
+export async function apiCompanyDetail(id) {
+  const params = { id }
+  const data = await request('/api/customer/detail', { params })
+  return data
+}
+
+/**
+ * 新增客户
+ * @param {string} id 联系人记录id
+ */
+export async function apiAddCompany(id) {
+  const params = { id }
+  const data = await request('/api/customer/add', { params })
+  return data
+}
+
+/**
+ * 更新客户
+ * @param {*} payload 载荷
+ */
+export async function apiUpdateCompany(payload) {
+  const data = await request.post('/api/customer/update', { data: { ...payload } })
+  return data
+}