feat: 报时报修

src/layout/index.tsx

@@ -11,8 +11,6 @@ const { Header, Content, Sider } = Layout
 // 路由渲染
 const reallyRoutes = routes.map(item => item.children ? [item, ...item.children] : item).flat()
 
-console.log(reallyRoutes)
-
 const AdminLayout: any = (props: any) => {
   const [currentKeys, setCurrentKeys]: any = useState(["/admin/role"])
 

src/router/config.tsx

@@ -84,6 +84,14 @@ const UserRoles = lazy(() => import('../views/User/roles'))
 // 用户
 const UserList = lazy(() => import('../views/User/account'))
 
+
+// 报时报修相关
+const FixType = lazy(() => import('../views/Fix/type'))
+const FixOnlineForm = lazy(() => import('../views/Fix/online-form'))
+const FixReturnVisit = lazy(() => import('../views/Fix/return-visit'))
+const FixTodo = lazy(() => import('../views/Fix/to-do'))
+const FixOrderDetail = lazy(() => import('../views/Fix/order-detail'))
+
 export const Wrapper = (Component) => (props) => {
   return (
     <Suspense fallback={() => {}}>
@@ -115,12 +123,6 @@ export const routes: any = [
         exact: true,
         component: Wrapper(OwnerExamine)
       },
-      // {
-      //   title: '住户车辆审核',
-      //   path: '/admin/examine/car',
-      //   exact: true,
-      //   component: Wrapper(OwnerList)
-      // },
     ]
   },
   {
@@ -379,6 +381,39 @@ export const routes: any = [
     title: '报事报修',
     path: '/admin/fix',
     exact: true,
+    children: [
+      {
+        title: '报修类型',
+        path: '/admin/fix/type',
+        exact: true,
+        component: Wrapper(FixType)
+      },
+      {
+        title: '在线报修',
+        path: '/admin/fix/online',
+        exact: true,
+        component: Wrapper(FixOnlineForm)
+      },
+      {
+        title: '报修订单详情',
+        path: '/admin/fix/order-detail',
+        exact: true,
+        component: Wrapper(FixOrderDetail),
+        hideInMenu: true
+      },
+      // {
+      //   title: '报修待办',
+      //   path: '/admin/fix/dealt',
+      //   exact: true,
+      //   component: Wrapper(FixTodo)
+      // },
+      // {
+      //   title: '报修回访',
+      //   path: '/admin/fix/return-visit',
+      //   exact: true,
+      //   component: Wrapper(FixReturnVisit)
+      // }
+    ]
   },
   {
     title: '房屋租售',

src/views/Complaint/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const CustomerService: React.FC = () => {
+  return (
+    <div>
+      Im客服
+    </div>
+  )
+}
+
+export default CustomerService

src/views/Fix/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const CustomerService: React.FC = () => {
+  return (
+    <div>
+      Im客服
+    </div>
+  )
+}
+
+export default CustomerService

src/views/Fix/online-form.tsx

@@ -0,0 +1,227 @@
+import React from 'react'
+import type { ActionType } from '@ant-design/pro-table'
+import ProTable from '@ant-design/pro-table'
+import {Button, Modal, Form, Radio, Input, message, Select, DatePicker, Upload} from 'antd'
+import { withRouter } from 'react-router-dom'
+import { User } from '../../services/user'
+import './index.scss'
+import {PlusOutlined} from "@ant-design/icons";
+
+const FixOnlineForm: React.FC = (props: any) => {
+  const columns: any = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      search: false
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '联系地址',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '报修人',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '联系电话',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '预约时间',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '报修内容',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '报修时间',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '状态',
+      dataIndex: 'phone',
+      search: false,
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      search: false,
+      render: (_, row, index, action) => {
+        return [
+          <Button
+            className="mr-1.5"
+            onClick={() => {
+              form.setFieldsValue(row)
+              setState(prevState => ({
+                ...prevState,
+                visible: true,
+                editId: row.id
+              }))
+            }}
+          >编辑</Button>,
+          <Button
+            className="mr-1.5"
+            onClick={() => {
+              setState(prevState => ({
+                ...prevState,
+                orderVisible: true
+              }))
+            }}
+          >派单</Button>,
+          <Button
+            className="mr-1.5"
+            onClick={() => {
+              props.history.push('/admin/fix/order-detail')
+            }}
+          >详情</Button>,
+          <Button onClick={() => {
+            Modal.confirm({
+              title: '删除记录',
+              content: '你确定删除这条记录吗？',
+              onOk: async () => {
+                await User({ method: 'delete', id: row.id })
+                message.success('操作成功！')
+                actionRef.current.reload()
+              }
+            })
+          }}>删除</Button>
+        ]
+      }
+    }
+  ]
+
+  const [pic, setPic]: any = React.useState([])
+
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>上传图片</div>
+    </div>
+  )
+  const [state, setState] = React.useState({
+    visible: false,
+    orderVisible: false,
+    editId: null
+  })
+
+  const actionRef: any = React.useRef<ActionType>()
+  const [form] = Form.useForm()
+  const [orderForm] = Form.useForm()
+
+  const onSubmit = () => {
+    form.validateFields().then(async values => {
+      await User({
+        method: 'post',
+        ...values,
+        group_id: 11,
+        department_id: 0
+      })
+      message.success('操作成功！')
+      form.resetFields()
+      actionRef.current?.reloadAndRest()
+      setState(prevState => ({ ...prevState, visible: false }))
+    })
+  }
+
+  return (
+    <React.Fragment>
+      <ProTable
+        headerTitle="报事报修/在线报修"
+        actionRef={actionRef}
+        rowKey="key"
+        search={false}
+        request={User}
+        toolBarRender={() => [
+          <Button
+            type="primary"
+            key="primary"
+            onClick={() => {
+              setState(preState => ({ ...preState, visible: true }))
+            }}
+          >添加</Button>
+        ]}
+        columns={columns}
+      />
+      <Modal
+        title='派单'
+        visible={state.orderVisible}
+        onOk={onSubmit}
+        onCancel={() => setState(pre => ({ ...pre, orderVisible: false }))}
+      >
+        <Form
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          form={orderForm}
+        >
+          <Form.Item label='部门' name="group_id" rules={[{ required: true }]}>
+            <Select placeholder='请选择' options={[]} />
+          </Form.Item>
+          <Form.Item label='报修师傅' name="group_id" rules={[{ required: true }]}>
+            <Select placeholder='请选择' options={[]} />
+          </Form.Item>
+          <Form.Item label='处理意见' name="group_id" rules={[{ required: true }]}>
+            <Input.TextArea placeholder="多行输入" rows={4} />
+          </Form.Item>
+        </Form>
+      </Modal>
+      <Modal
+        title='添加报修'
+        visible={state.visible}
+        onOk={onSubmit}
+        onCancel={() => setState(pre => ({ ...pre, visible: false }))}
+      >
+        <Form
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          form={form}
+        >
+          <Form.Item label='报修分类' name="group_id" rules={[{ required: true }]}>
+            <Select placeholder='请选择' options={[]} />
+          </Form.Item>
+          <Form.Item label='报修人' name="user_name" rules={[{ required: true }]}>
+            <Input placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label='联系方式' name="user_name" rules={[{ required: true }]}>
+            <Input placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label='预约时间' rules={[{ required: true }]}>
+            <DatePicker placeholder="选择时间" format="YYYY-MM-DD" />
+          </Form.Item>
+          <Form.Item label='报修内容' name="user_name" rules={[{ required: true }]}>
+            <Input.TextArea placeholder="多行输入" rows={4} />
+          </Form.Item>
+          <Form.Item label='报修图片' name="user_name" rules={[{ required: true }]}>
+            <Upload
+              action="http://localhost:3000/api/v1/upload"
+              listType="picture-card"
+              fileList={pic}
+              onChange={(({ fileList }) => setPic(fileList))}
+            >
+              { uploadButton }
+            </Upload>
+          </Form.Item>
+          <Form.Item label='分类状态' name="user_name" rules={[{ required: true }]}>
+            <Radio.Group>
+              <Radio value={true}>开启</Radio>
+              <Radio value={false}>关闭</Radio>
+            </Radio.Group>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </React.Fragment>
+  )
+}
+
+export default withRouter(FixOnlineForm)

src/views/Fix/order-detail.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Button, Card, Divider, Form, Table, Col, Row, Image } from "antd"
+import { useHistory } from "react-router"
+
+const columns = [
+  {
+    title: 'ID',
+    dataIndex: ''
+  },
+  {
+    title: '处理人',
+    dataIndex: ''
+  },
+  {
+    title: '状态',
+    dataIndex: ''
+  },
+  {
+    title: '处理时间',
+    dataIndex: ''
+  },
+  {
+    title: '意见',
+    dataIndex: ''
+  },
+]
+const infoKeys = [
+  { label: '分类名称', key: '' },
+  { label: '联系地址', key: '' },
+  { label: '报修人', key: '' },
+  { label: '联系方式', key: '' },
+  { label: '预约时间', key: '' },
+  { label: '报修时间', key: '' },
+  { label: '报修内容', key: '' },
+  { label: '报修图片', key: '', col: 24, type: 'picture' },
+]
+
+const OrderDetail: React.FC = () => {
+
+  const history = useHistory()
+
+  return (
+    <React.Fragment>
+      <div className="flex justify-between items-center pb-3" style={{ fontSize: '18px' }}>
+        报事报修/在线报修
+        <div>
+          <Button className="mr-1.5" type="primary">打印</Button>
+          <Button onClick={() => history.goBack()}>返回</Button>
+        </div>
+      </div>
+      <Card title="工单详情">
+        <Form>
+          <Row>
+            {
+              infoKeys.map(item => (
+                <Col span={item.col || 8}>
+                  <Form.Item label={item.label}>
+                    { item.type === 'picture' ? (
+                      <Image className="mr-1.5" width={120} src="https://hbimg.huabanimg.com/683615e8e5dd8c4660efbdf1fbc3c26f1da40cae2a7a7-fcKebd_fw658/format/webp" />
+                    ) : item.label }
+                  </Form.Item>
+                </Col>
+              ))
+            }
+          </Row>
+        </Form>
+      </Card>
+      <Divider />
+      <Card title="工单流转">
+        <Table columns={columns} bordered />
+      </Card>
+      <Divider />
+      <Card title="回访/业主评价">
+        <Form>
+          <Form.Item label="满意度">xxxxxx</Form.Item>
+          <Form.Item label="业主评价">xxxxxxxxxxxxxxxxxx</Form.Item>
+        </Form>
+      </Card>
+    </React.Fragment>
+
+  )
+}
+
+export default OrderDetail

src/views/Fix/return-visit.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Card } from "antd";
+
+const CustomerService: React.FC = () => {
+  return (
+    <Card>
+      Im客服
+    </Card>
+  )
+}
+
+export default CustomerService

src/views/Fix/to-do.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const CustomerService: React.FC = () => {
+  return (
+    <div>
+      Im客服
+    </div>
+  )
+}
+
+export default CustomerService

src/views/Fix/type.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import type { ActionType } from '@ant-design/pro-table'
+import ProTable from '@ant-design/pro-table'
+import { Button, Modal, Form, Radio, Input, message } from 'antd'
+import { withRouter } from 'react-router-dom'
+import { User } from '../../services/user'
+import './index.scss'
+
+const FixTypes: React.FC = (props: any) => {
+  const columns: any = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      search: false
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'user_name',
+      search: true,
+    },
+    {
+      title: '状态',
+      dataIndex: 'phone',
+      search: false,
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      search: false,
+      render: (_, row, index, action) => {
+        return [
+          <Button
+            className="mr-1.5"
+            onClick={() => {
+              form.setFieldsValue(row)
+              setState(prevState => ({
+                ...prevState,
+                visible: true,
+                editId: row.id
+              }))
+            }}
+          >编辑</Button>,
+          <Button onClick={() => {
+            Modal.confirm({
+              title: '删除记录',
+              content: '你确定删除这条记录吗？',
+              onOk: async () => {
+                await User({ method: 'delete', id: row.id })
+                message.success('操作成功！')
+                actionRef.current.reload()
+              }
+            })
+          }}>删除</Button>
+        ]
+      }
+    }
+  ]
+  const [state, setState] = React.useState({
+    visible: false,
+    editId: null
+  })
+
+  const actionRef: any = React.useRef<ActionType>()
+  const [form] = Form.useForm()
+  const onSubmit = () => {
+    form.validateFields().then(async values => {
+      await User({
+        method: 'post',
+        ...values,
+        group_id: 11,
+        department_id: 0
+      })
+      message.success('操作成功！')
+      form.resetFields()
+      actionRef.current?.reloadAndRest()
+      setState(prevState => ({ ...prevState, visible: false }))
+    })
+  }
+
+  return (
+    <React.Fragment>
+      <ProTable
+        headerTitle="报事报修/报修类型"
+        actionRef={actionRef}
+        rowKey="key"
+        search={false}
+        request={User}
+        toolBarRender={() => [
+          <Button
+            type="primary"
+            key="primary"
+            onClick={() => {
+              setState(preState => ({ ...preState, visible: true }))
+            }}
+          >添加</Button>
+        ]}
+        columns={columns}
+      />
+      <Modal
+        title='添加分类'
+        visible={state.visible}
+        onOk={onSubmit}
+        onCancel={() => setState(pre => ({ ...pre, visible: false }))}
+      >
+        <Form
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          form={form}
+        >
+          <Form.Item label='分类名称' name="user_name" rules={[{ required: true }]}>
+            <Input placeholder="请输入" />
+          </Form.Item>
+          <Form.Item label='分类状态' name="user_name" rules={[{ required: true }]}>
+            <Radio.Group>
+              <Radio value={true}>开启</Radio>
+              <Radio value={false}>关闭</Radio>
+            </Radio.Group>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </React.Fragment>
+  )
+}
+
+export default withRouter(FixTypes)