|
@@ -1,11 +1,216 @@
|
|
|
import React from 'react'
|
|
|
+import type { ActionType } from '@ant-design/pro-table'
|
|
|
+import ProTable from '@ant-design/pro-table'
|
|
|
+import { Button, Modal, Form, Input, message, Select, Upload } from 'antd'
|
|
|
+import { withRouter } from 'react-router-dom'
|
|
|
+import { FixApi, FixOrderSend, FixOrderRefund, FixOrderFinish } from '../../services/fix'
|
|
|
+import './index.scss'
|
|
|
+import { PlusOutlined } from "@ant-design/icons"
|
|
|
+import { useUser } from "../User/hooks"
|
|
|
|
|
|
-const CustomerService: React.FC = () => {
|
|
|
- return (
|
|
|
+const FixTodo: React.FC = (props: any) => {
|
|
|
+ const columns: any = [
|
|
|
+ {
|
|
|
+ title: 'ID',
|
|
|
+ dataIndex: 'id',
|
|
|
+ search: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '分类名称',
|
|
|
+ dataIndex: 'class_name',
|
|
|
+ search: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '联系地址',
|
|
|
+ dataIndex: 'house_name',
|
|
|
+ search: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报修人',
|
|
|
+ dataIndex: 'apply_people',
|
|
|
+ search: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '联系电话',
|
|
|
+ dataIndex: 'apply_people_phone',
|
|
|
+ search: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '预约时间',
|
|
|
+ dataIndex: 'appointment',
|
|
|
+ search: false,
|
|
|
+ valueType: 'dateTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报修内容',
|
|
|
+ dataIndex: 'apply_content',
|
|
|
+ search: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报修时间',
|
|
|
+ dataIndex: 'created_at',
|
|
|
+ search: false,
|
|
|
+ valueType: 'dateTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ search: false,
|
|
|
+ valueEnum: {
|
|
|
+ 1: { text: '未派单' },
|
|
|
+ 2: { text: '已派单' },
|
|
|
+ 3: { text: '已完结' },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'option',
|
|
|
+ search: false,
|
|
|
+ render: (_, row, index, action) => {
|
|
|
+ return [
|
|
|
+ <Button
|
|
|
+ className="mr-1.5"
|
|
|
+ onClick={() => {
|
|
|
+ orderForm.setFieldsValue(row)
|
|
|
+ setState(prevState => ({
|
|
|
+ ...prevState,
|
|
|
+ formMode: 'send',
|
|
|
+ orderVisible: true,
|
|
|
+ editId: row.id
|
|
|
+ }))
|
|
|
+ }}
|
|
|
+ >转单</Button>,
|
|
|
+ <Button
|
|
|
+ className="mr-1.5"
|
|
|
+ onClick={() => {
|
|
|
+ setState(prevState => ({
|
|
|
+ ...prevState,
|
|
|
+ formMode: 'return',
|
|
|
+ orderVisible: true
|
|
|
+ }))
|
|
|
+ }}
|
|
|
+ >退单</Button>,
|
|
|
+ <Button
|
|
|
+ className="mr-1.5"
|
|
|
+ onClick={() => {
|
|
|
+ props.history.push('/admin/fix/order-detail')
|
|
|
+ }}
|
|
|
+ >详情</Button>,
|
|
|
+ <Button onClick={() => {
|
|
|
+ setState(prevState => ({
|
|
|
+ ...prevState,
|
|
|
+ formMode: 'finish',
|
|
|
+ orderVisible: true
|
|
|
+ }))
|
|
|
+ }}>办结</Button>
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ const [pic, setPic]: any = React.useState([])
|
|
|
+ const [cUsers, setUsers]: any = useUser()
|
|
|
+
|
|
|
+ React.useEffect(() => {
|
|
|
+ setUsers()
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ const uploadButton = (
|
|
|
<div>
|
|
|
- Im客服
|
|
|
+ <PlusOutlined />
|
|
|
+ <div style={{ marginTop: 8 }}>上传图片</div>
|
|
|
</div>
|
|
|
)
|
|
|
+ const [state, setState] = React.useState({
|
|
|
+ visible: false,
|
|
|
+ orderVisible: false,
|
|
|
+ editId: null,
|
|
|
+ formMode: 'send'
|
|
|
+ })
|
|
|
+
|
|
|
+ const FinishForm = <React.Fragment>
|
|
|
+ <Form.Item label='处理意见' name="feedback" rules={[{ required: true }]}>
|
|
|
+ <Input.TextArea placeholder="多行输入" rows={4} />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label='维修后照片' name="repair_pic" rules={[{ required: true }]}>
|
|
|
+ <Upload
|
|
|
+ action="http://localhost:3000/api/v1/upload"
|
|
|
+ listType="picture-card"
|
|
|
+ fileList={pic}
|
|
|
+ onChange={(({ fileList }) => setPic(fileList))}
|
|
|
+ >{ uploadButton }</Upload>
|
|
|
+ </Form.Item>
|
|
|
+ </React.Fragment>
|
|
|
+
|
|
|
+ // 报修退单
|
|
|
+ const ChargeBackForm = <React.Fragment>
|
|
|
+ {/*<Form.Item label='上级处理人' name="feedback" rules={[{ required: true }]}>*/}
|
|
|
+ {/* <Input placeholder="单行输入"/>*/}
|
|
|
+ {/*</Form.Item>*/}
|
|
|
+ <Form.Item label='处理意见' name="feedback" rules={[{ required: true }]}>
|
|
|
+ <Input.TextArea placeholder="多行输入" rows={4} />
|
|
|
+ </Form.Item>
|
|
|
+ </React.Fragment>
|
|
|
+
|
|
|
+ const SendForm = <React.Fragment>
|
|
|
+ <Form.Item label='报修师傅' name="current_uid" rules={[{ required: true }]}>
|
|
|
+ <Select placeholder='请选择' options={cUsers} />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label='处理意见' name="feedback" rules={[{ required: true }]}>
|
|
|
+ <Input.TextArea placeholder="多行输入" rows={4} />
|
|
|
+ </Form.Item>
|
|
|
+ </React.Fragment>
|
|
|
+
|
|
|
+ const Forms = {
|
|
|
+ return: ChargeBackForm,
|
|
|
+ finish: FinishForm,
|
|
|
+ send: SendForm
|
|
|
+ }
|
|
|
+
|
|
|
+ const actionRef: any = React.useRef<ActionType>()
|
|
|
+ const [orderForm] = Form.useForm()
|
|
|
+
|
|
|
+ const onSubmit = () => {
|
|
|
+ const _Api = {
|
|
|
+ send: FixOrderSend,
|
|
|
+ refund: FixOrderRefund,
|
|
|
+ finish: FixOrderFinish
|
|
|
+ }
|
|
|
+ orderForm.validateFields().then(async values => {
|
|
|
+ await _Api[state.formMode]({ ...values, id: state.editId })
|
|
|
+ message.success('操作成功!')
|
|
|
+ orderForm.resetFields()
|
|
|
+ actionRef.current?.reloadAndRest()
|
|
|
+ setState(prevState => ({ ...prevState, orderVisible: false, editId: null }))
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <React.Fragment>
|
|
|
+ <ProTable
|
|
|
+ headerTitle="报事报修/在线报修"
|
|
|
+ actionRef={actionRef}
|
|
|
+ rowKey="key"
|
|
|
+ request={FixApi}
|
|
|
+ params={{ status: 2 }}
|
|
|
+ columns={columns}
|
|
|
+ />
|
|
|
+ <Modal
|
|
|
+ title='转单'
|
|
|
+ visible={state.orderVisible}
|
|
|
+ onOk={onSubmit}
|
|
|
+ onCancel={() => setState(pre => ({ ...pre, orderVisible: false }))}
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
+ wrapperCol={{ span: 15 }}
|
|
|
+ form={orderForm}
|
|
|
+ >
|
|
|
+ { Forms[state.formMode] }
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </React.Fragment>
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-export default CustomerService
|
|
|
+export default withRouter(FixTodo)
|