服务日记

src/components/PopContent/Contacts/AddRecord.jsx

@@ -1,15 +1,22 @@
 import React from 'react'
-import { Modal, Form, Input, Select } from 'antd'
+import { Modal, Form, Input, Select, Radio, DatePicker, Switch } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
 
 const AddRecord = props => {
   const [form] = useForm()
   const { Option, OptGroup } = Select
+  const { TextArea } = Input
   const { visible, onCancel, onConfirm, loading } = props
+  const [value, setValue] = React.useState(1)
+  const onChange = e => {
+    console.log('radio checked', e.target.value)
+    setValue(e.target.value)
+  }
 
   return (
     <div>
       <Modal
+        title="添加服务记录"
         visible={visible}
         confirmLoading={loading}
         onOk={() => {
@@ -19,18 +26,45 @@ const AddRecord = props => {
           })
         }}
         onCancel={onCancel}
+        width={500}
       >
-        <Form>
+        <Form
+          form={form}
+          layout="vertical"
+        >
           <Form.Item name="note" label="联系人">
             <Select>
               <OptGroup label="部门1">
-                <Option value="张三">张三</Option>
+                <Option key="张三" value="张三">张三</Option>
               </OptGroup>
               <OptGroup label="部门2">
-                <Option value="李四">李四</Option>
+                <Option key="李四" value="李四">李四</Option>
               </OptGroup>
             </Select>
           </Form.Item>
+          <Form.Item>
+            <Radio.Group onChange={onChange} value={value}>
+              <Radio value={1}>上门服务</Radio>
+              <Radio value={2}>电话拜访</Radio>
+              <Radio value={3}>在线服务</Radio>
+              <Radio value={4}>其他事项</Radio>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item name="time" label="时间">
+            <DatePicker style={{ width: '100%' }}/>
+          </Form.Item>
+          <Form.Item name="con" label="内容">
+            <TextArea rows={3}/>
+          </Form.Item>
+          <Form.Item name="con1" label="">
+            <Switch/> <span>添加提醒</span>
+          </Form.Item>
+          <Form.Item name="deadline" label="提醒限期">
+            <DatePicker style={{ width: '100%' }}/>
+          </Form.Item>
+          <Form.Item name="remark" label="备注">
+            <TextArea rows={2}/>
+          </Form.Item>
         </Form>
       </Modal>
     </div>

src/components/PopContent/Contacts/ContanctLowerList.jsx

@@ -1,4 +1,4 @@
-import { Tabs, Table, List } from 'antd'
+import { Tabs, Table, List, Row, Col } from 'antd'
 import React, { useEffect } from 'react'
 import { connect } from 'umi'
 import useAutoTable from '@/hooks/useAutoTable'
@@ -23,29 +23,32 @@ const ContanctLowerList = props => {
 
   const [x, y] = useAutoTable(collapsed, needSubtractHeight)
   // const servicelist = [...servicelistName.lists]
-  const servicecolumns = [
-    {
-      title: '类型/时间',
-      dataIndex: 'staffName',
-      key: 'staffName'
-    },
-    {
-      title: '服务内容',
-      dataIndex: 'mark',
-      key: 'mark'
-    }
-  ]
   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' }}>
-              <Table
-              rowKey={record => record.id}
-              columns={servicecolumns}
-              dataSource={servicelist}
-              pagination={false}
+              <Row>
+                <Col span="8">类型/时间</Col>
+                <Col span="16">服务内容</Col>
+              </Row>
+              <List
+                dataSource={servicelist}
+                split={false}
+                renderItem={item => (
+                  <List.Item>
+                    <Row>
+                      <Col span="8">
+                        <a>@{item.staffName}</a> {item.status}上门服务
+                        <List.Item.Meta
+                          description={ dayjsFormat(item.date, 'MM-DD HH:mm:ss')}
+                        />
+                      </Col>
+                      <Col span="16">{item.remarks}</Col>
+                    </Row>
+                  </List.Item>
+                )}
               />
             </div>
           </TabPane>

src/components/PopContent/Contacts/ContanctTabList.jsx

@@ -1,13 +1,31 @@
-import { Tabs, Button, Table } from 'antd'
-import React, { useEffect,useState  } from 'react'
+import { message, Tabs, Button, Table } from 'antd'
+import React, { useEffect, useState  } from 'react'
+import consts from '@/consts'
 import SvgIcon from '@/components/SvgIcon'
+import { apiAddService } from '@/services/contact'
+import AddRecord from '@/components/PopContent/Contacts/AddRecord'
 // import { connect } from 'umi'
 
 const ContanctTabList = props => {
+  const [state, setState] = useState({
+    visible: false
+  })
   const [addService, setAddService] = useState({
     visible: false,
     loading: false
   })
+
+  const handleAddService = async values => {
+    setAddService({ ...addService, loading: true })
+    const { code = -1 } = await apiAddService(values)
+    if (code === consts.RET_CODE.SUCCESS) {
+      message.success('新增成功')
+      setState({ ...state, data: values })
+    }
+    // 请求完了
+    setAddService({ ...addService, loading: false, visible: false })
+    await initData()
+  }
   useEffect(() => {
     // const curinglisData = () => {
     //   const { dispatch } = props
@@ -59,10 +77,20 @@ const ContanctTabList = props => {
         {/* <Button type="primary" ghost>
           <SvgIcon type="icon-link" /> 绑定加密锁
         </Button> */}
-        <Button type="primary" ghost onClick={() => setAddService({ ...addService, visible: true })}>
+        <Button
+          type="primary"
+          ghost
+          onClick={() => setAddService({ ...setAddService, visible: true })}
+        >
           <SvgIcon type="icon-plus" /> 添加服务记录
         </Button>
       </div>
+      <AddRecord
+        onConfirm={handleAddService}
+        loading={addService.loading}
+        visible={addService.visible}
+        onCancel={() => setAddService({ ...addService, visible: false })}
+      />
     </div>
   )
 }

src/services/contact.js

@@ -40,3 +40,12 @@ export async function apiAddClient(payload) {
   const data = await request.post('/api/client/add',{ data:{ ...payload } })
   return data
 }
+
+/**
+ * 新增服务日志
+ * @param {*} payload 载荷
+ */
+export async function apiAddService(payload) {
+  const data = await request.post('/api/servicelog/add',{ data:{ ...payload } })
+  return data
+}