feat: 服务记录增加编辑删除功能

src/pages/Customer/Client/components/ClientDetail/AddRecord.jsx

@@ -1,17 +1,37 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Form, Radio, DatePicker, Switch, Modal } from 'antd'
 import { dayjsFormat } from '@/utils/utils'
 import dayjs from 'dayjs'
 import { ProFormTextArea } from '@ant-design/pro-form'
+import type { ModalProps } from 'antd'
 
-const AddRecord = props => {
+type AddRecordProps = {
+  defaultValues?: API.ServiceLogItem
+  onConfirm: () => Promise<void>
+} & ModalProps
+
+const options = [
+  { label: '上门服务', value: 1 },
+  { label: '电话拜访', value: 2 },
+  { label: '其他事项', value: 3 },
+  { label: '在线服务', value: 4 }
+]
+const AddRecord: React.FC<AddRecordProps> = ({ defaultValues, onConfirm, ...resetModalProps }) => {
   const [formRef] = Form.useForm()
-  const { onConfirm, ...resetModalProps } = props
   const [state, setState] = useState({
     showExtraItem: false,
     loading: false
   })
 
+  useEffect(() => {
+    if (defaultValues) {
+      if (Reflect.has(defaultValues, 'remindTime') || Reflect.has(defaultValues, 'remarks')) {
+        setState({ ...state, showExtraItem: true })
+      }
+      formRef?.setFieldsValue({ ...defaultValues })
+    }
+  }, [defaultValues])
+
   const onChange = value => {
     setState({ ...state, showExtraItem: value })
   }
@@ -45,23 +65,17 @@ const AddRecord = props => {
             setState({ ...state, loading: false })
           })
       }}
-      confirmLoading={state.loading}
-    >
+      confirmLoading={state.loading}>
       <Form layout="vertical" form={formRef}>
+        <Form.Item name="id" hidden />
         <Form.Item name="status" label="服务类型" rules={[{ required: true, message: '请选择类型' }]}>
-          <Radio.Group>
-            <Radio value={1}>上门服务</Radio>
-            <Radio value={2}>电话拜访</Radio>
-            <Radio value={3}>其他事项</Radio>
-            <Radio value={4}>在线服务</Radio>
-          </Radio.Group>
+          <Radio.Group options={options} />
         </Form.Item>
         <Form.Item
           name="date"
           label="服务日期"
           initialValue={dayjs(new Date())}
-          rules={[{ required: true, message: '请选择服务日期' }]}
-        >
+          rules={[{ required: true, message: '请选择服务日期' }]}>
           <DatePicker style={{ width: '100%' }} />
         </Form.Item>
         <ProFormTextArea name="mark" label="内容" rules={[{ required: true, message: '请输入服务内容' }]} />
@@ -75,8 +89,7 @@ const AddRecord = props => {
             <Form.Item
               name="remindTime"
               label="备忘日期"
-              rules={[{ required: true, message: '请选择备忘日期' }]}
-            >
+              rules={[{ required: true, message: '请选择备忘日期' }]}>
               <DatePicker style={{ width: '100%' }} disabledDate={disabledDate} />
             </Form.Item>
             <ProFormTextArea name="remarks" label="备忘内容" />

src/pages/Customer/Client/components/ClientDetail/LowerList.tsx

@@ -1,4 +1,4 @@
-import { Tabs } from 'antd'
+import { Button, Tabs } from 'antd'
 import React, { useMemo } from 'react'
 import { dayjsFormat } from '@/utils/utils'
 import classNames from 'classnames'
@@ -7,6 +7,9 @@ import { VList } from 'virtuallist-antd'
 import consts from '@/consts'
 import type { ProColumns } from '@ant-design/pro-table'
 import ProTable from '@ant-design/pro-table'
+import { updateCustomerService, delCustomerService } from '@/services/customer'
+import { useModal } from '@/components/ModalStore'
+import { useRequest } from 'umi'
 const { TabPane } = Tabs
 
 export enum Servicelog {
@@ -54,7 +57,27 @@ type ClientLowerListProps = {
   serviceList: API.ServiceLogItem[]
 }
 
-export const renderServiceLogItem = (item: API.ServiceLogItem) => {
+export const ServiceLogItem: React.FC<{ item: API.ServiceLogItem }> = ({ item }) => {
+  const dispatchModal = useModal()
+
+  const { run: truUpdate, loading: comfirmLoading } = useRequest(updateCustomerService, {
+    manual: true
+  })
+  const { run: truDel, loading: delLoading } = useRequest(delCustomerService, {
+    manual: true
+  })
+  const handleOnUpdateComfirm = async (serviceLog: API.ServiceLogItem) => {
+    const data = await truUpdate(serviceLog)
+    console.log(data)
+
+    return true
+  }
+  const handleOnDelComfirm = async (id: string) => {
+    truDel({ id })
+  }
+  const handleOnEdit = async (defaultValues: API.ServiceLogItem) => {
+    dispatchModal('M_RECORD_ADD', { defaultValues, onConfirm: handleOnUpdateComfirm })
+  }
   return (
     <div
       className={classNames(
@@ -77,7 +100,7 @@ export const renderServiceLogItem = (item: API.ServiceLogItem) => {
             />
             <div className="flex flex-col items-center ml-2">
               <div className="text-sm font-medium text-opacity-80 text-black">{item.staffName}</div>
-              <div className="text-xs text-opacity-40 text-black h-1rem">
+              <div className="text-xs text-opacity-40 text-black h-4">
                 {dayjsFormat(item.createTime, 'HH:mm:ss')}
               </div>
             </div>
@@ -99,6 +122,21 @@ export const renderServiceLogItem = (item: API.ServiceLogItem) => {
         <div className="bg-white bg-opacity-80 rounded-sm text-black text-opacity-60 text-sm mt-3 p-2">
           {item.mark}
         </div>
+        {item.isOperation ? (
+          <div className="mt-2">
+            <Button size="small" onClick={() => handleOnEdit(item)} loading={comfirmLoading}>
+              编辑
+            </Button>
+            <Button
+              size="small"
+              danger
+              loading={delLoading}
+              onClick={() => handleOnDelComfirm(item.id)}
+              className="ml-1">
+              删除
+            </Button>
+          </div>
+        ) : null}
       </div>
     </div>
   )
@@ -119,21 +157,6 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
       key: 'operatorName',
       ellipsis: true,
       width: 115
-      // render: (_, record) => (
-      //   <div className="flex items-center">
-      //     <div
-      //       className="rounded-1/2 w-5 h-5"
-      //       style={{
-      //         backgroundImage: `url(${
-      //           (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-      //           (record.avatar ?? consts.DEFAULT_AVATAR)
-      //         })`,
-      //         backgroundSize: 'cover'
-      //       }}
-      //     />
-      //     <div className="ml-1 text-opacity-80 text-sm leading-4">{record.operatorName}</div>
-      //   </div>
-      // )
     },
     {
       title: '操作',
@@ -165,7 +188,7 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
             <div className="sheet-panel-record">
               {serviceList.map(item => (
                 <div className="mb-3" key={item.id}>
-                  {renderServiceLogItem(item)}
+                  <ServiceLogItem item={item} />
                 </div>
               ))}
             </div>

src/pages/Customer/Company/components/CompanyDetail/LowerList.tsx

@@ -2,7 +2,10 @@ import { Tabs } from 'antd'
 import consts from '@/consts'
 import { isDevMode } from '@/utils/env'
 import TimeLineList from '@/components/TimeLineList'
-import { renderServiceLogItem } from '@/pages/Customer/Client/components/ClientDetail/LowerList'
+import {
+  renderServiceLogItem,
+  ServiceLogItem
+} from '@/pages/Customer/Client/components/ClientDetail/LowerList'
 import { useMemo } from 'react'
 import { VList } from 'virtuallist-antd'
 import type { ProColumns } from '@ant-design/pro-table'
@@ -74,7 +77,7 @@ const CompanyLowerList: React.FC<CompanyLowerListProps> = ({ logList: { log: log
             <div className="sheet-panel-record">
               {serviceList.map(item => (
                 <div className="mb-2" key={item.id}>
-                  {renderServiceLogItem(item)}
+                  <ServiceLogItem item={item} />
                 </div>
               ))}
             </div>

src/services/customer.js

@@ -279,3 +279,19 @@ export async function syncToClient(params) {
 export async function queryClientSourceList() {
   return request('/client/source')
 }
+
+/** 编辑客户服务日志 */
+export async function updateCustomerService(params: API.ServiceLogItem) {
+  return request('/customer/service/update', {
+    method: 'POST',
+    data: params
+  })
+}
+
+/** 删除客户服务日志 */
+export async function delCustomerService(params: { id: string }) {
+  return request('/customer/service/delete', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/typding.d.ts

@@ -43,6 +43,8 @@ declare namespace API {
     mark?: string
     staffName?: string
     status?: string
+    remindTime?: string
+    remarks?: string
   }
 
   type ServiceLogList = ServiceLogItem[]