feats

config/routes.js

@@ -23,7 +23,7 @@ export default [
     name: '工作台',
     icon: 'DashboardOutlined',
     component: './dashboard',
-  },  
+  },
   {
     path: '/',
     redirect: '/dashboard',
@@ -136,6 +136,13 @@ export default [
     icon: 'SettingOutlined',
     component: '@/pages/BasicParameters',
   },
+  {
+    path: '/reconciliation',
+    name: '账单对账',
+    access:'admin',
+    icon: 'AccountBookOutlined',
+    component: '@/pages/reconciliation',
+  },
   {
     path: '/',
     redirect: '/welcome',

src/pages/reconciliation/Detail.jsx

@@ -0,0 +1,89 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { Button, DatePicker, Modal } from 'antd'
+import PageTable from '@/components/PageTable'
+import { getAccountLogList, generateAccountLog } from '@/services/account'
+
+export default (props) => {
+
+  const [visible, setVisible] = useState(false)
+  const [tradeDate, setTradeDate] = useState()
+
+  const columns = [
+    {
+      title: '交易日期',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      search: false
+    },
+    {
+      title: '交易日',
+      dataIndex: 'dailyId',
+      key: 'dailyId',
+      renderFormItem: (item, fProps, form) => {
+        return <DatePicker />
+      },
+      hideInTable: true,
+    },
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      search: true,
+    },
+    {
+      title: '交易类型',
+      dataIndex: 'chargeType',
+      key: 'chargeType',
+      search: false,
+      render: t => t == -1 ? '退费' : '-'
+    },
+    {
+      title: '金额/元',
+      dataIndex: 'charges',
+      key: 'charges',
+      search: false,
+      render: t => Number(t / 100).toFixed(2)
+    },
+    {
+      title: '手续费/元',
+      dataIndex: 'poundage',
+      key: 'poundage',
+      search: false,
+      render: t => Number(t / 100).toFixed(2)
+    },
+  ]
+
+  const handleOk = () => {
+    const theDay = tradeDate.format('YYYY-MM-DD')
+    generateAccountLog(theDay)
+    setTradeDate()
+    setVisible(false)
+  }
+
+  const handleCancel = () => {
+    setVisible(false)
+    setTradeDate()
+  }
+
+  const actions = useMemo(() => ([
+    <Button key="primary" type="primary" onClick={() => setVisible(true)}>
+      拉取账单
+    </Button>,
+  ]), [])
+
+  return (
+    <div>
+      <PageTable
+        toolbar={{ actions }}
+        columns={columns}
+        params={{ monthId: props.monthId }}
+        request={getAccountLogList}
+        options={false}
+        rowKey="serialNo"
+      />
+      <Modal title="交易日" visible={visible} onOk={handleOk} onCancel={handleCancel}>
+        <DatePicker onChange={val => setTradeDate(val)} style={{ width: '240px' }} />
+      </Modal>
+    </div>
+  )
+}

src/pages/reconciliation/Month.jsx

@@ -0,0 +1,120 @@
+import React, { useMemo, useState } from 'react'
+import moment from 'moment'
+import { Button, DatePicker, Modal, message } from 'antd'
+import PageTable from '@/components/PageTable'
+import { getAccountMonthList, createMonthInfo, updateMonthInfo } from '@/services/account'
+
+const { confirm } = Modal;
+
+export default (props) => {
+
+  const [visible, setVisible] = useState(false)
+  const [tradeDate, setTradeDate] = useState()
+
+  const handleEdit = row => {
+    if (row.status === 1) {
+      message.warning('当前月份已对账');
+    }
+
+    confirm({
+      title: '确认对账',
+      content: '当前操作不可逆, 请确认金额无误',
+      onOk() {
+        updateMonthInfo({ ...row, status: 1 }).then(() => {
+          message.success('操作成功')
+        })
+      },
+    });    
+  }
+
+  const handleDetail = row => {
+    props.onSwitch(row.monthId)
+  }
+
+  const columns = [
+    {
+      title: '月份',
+      dataIndex: 'monthId',
+      key: 'monthId',
+      renderFormItem: (item, fProps, form) => {
+        return <DatePicker picker="month" />
+      },
+    },
+    {
+      title: '金额/元',
+      dataIndex: 'totalCharge',
+      key: 'totalCharge',
+      search: false,
+      render: t => Number(t / 100).toFixed(2)
+    },
+    {
+      title: '金额/元',
+      dataIndex: 'totalCharge',
+      key: 'totalCharge',
+      search: false,
+      render: t => Number(t / 100).toFixed(2)
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      search: false,
+      render: t => t == 1 ? '已结' : '-'
+    },
+    {
+      title: '操作',
+      key: 'option',
+      width: 120,
+      valueType: 'option',
+      render: (_, row, index, action) => [
+        row.status != 1 && 
+        <a
+          key="a"
+          onClick={() => handleEdit(row)}
+        >
+          对账
+        </a>,
+        <a
+          key="b"
+          onClick={() => handleDetail(row)}
+        >
+          详情
+        </a>,
+      ].filter(Boolean),
+    },
+  ]
+
+  const handleOk = () => {
+    const theMonth = tradeDate.format('YYYY-MM')
+    createMonthInfo(theMonth)
+    setTradeDate()
+    setVisible(false)
+  }
+
+  const handleCancel = () => {
+    setVisible(false)
+    setTradeDate()
+  }
+
+  const actions = useMemo(() => ([
+    <Button key="primary" type="primary" onClick={() => setVisible(true)}>
+      生成账单
+    </Button>,
+  ]), [])
+
+  return (
+    <div>
+      <PageTable
+        toolbar={{ actions }}
+        columns={columns}
+        request={getAccountMonthList}
+        options={false}
+        beforeSearchSubmit={x => ({ ...x, monthId: x.monthId ? moment(x.monthId).format('YYYY-MM') : undefined })}
+        rowKey="monthId"
+      />
+      <Modal title="对账月份" visible={visible} onOk={handleOk} onCancel={handleCancel}>
+        <DatePicker picker="month" onChange={val => setTradeDate(val)} style={{ width: '240px' }} />
+      </Modal>
+    </div>
+  )
+}

src/pages/reconciliation/index.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Tabs, Card } from 'antd';
+import Month from './Month';
+import Detail from './Detail';
+
+const { TabPane } = Tabs;
+
+export default (props) => {
+  const [active, setActive] = useState("1")
+  const [monthId, setMonthId] = useState()
+
+  const handleSwitch = (key, month) => {
+    setActive(key)
+    setMonthId(month)
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <Tabs activeKey={active} onTabClick={k => handleSwitch(k)}>
+          <TabPane tab="月度账单" key="1">
+            <Month onSwitch={m => handleSwitch('2', m)} />
+          </TabPane>
+          <TabPane tab="账单明细" key="2">
+            <Detail monthId={monthId} />
+          </TabPane>
+        </Tabs>
+      </Card>
+    </PageHeaderWrapper>
+  )
+}

src/services/account.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request';
+
+/**
+ * 获取明细
+ * @param {*} data
+ * @returns
+ */
+export const getAccountLogList = (params) => request(`/account-log`, { method: 'get', params });
+
+/**
+ * 生成对账明细
+ * @param {*} dailyId 
+ * @returns 
+ */
+export const generateAccountLog = (dailyId) => request(`/account-log`, { method: 'post', params: { dailyId } });
+
+/**
+ * 获取月度列表
+ * @param {*} data
+ * @returns
+ */
+ export const getAccountMonthList = (params) => request(`/account-log/month`, { method: 'get', params });
+
+ /**
+  * 生成月度账单
+  * @param {*} monthId 
+  * @returns 
+  */
+ export const createMonthInfo = (monthId) => request(`/account-log/month`, { method: 'post', params: { monthId } });
+ 
+ /**
+  * 更新月度账单
+  * @param {*} monthId 
+  * @returns 
+  */
+ export const updateMonthInfo = (data) => request(`/account-log/month`, { method: 'put', data });