|
|
@@ -1,30 +1,101 @@
|
|
|
-import React, { useState } from 'react'
|
|
|
-import { DatePicker, TimePicker, Select, Space } from 'antd'
|
|
|
+import BasicTable from '@/components/Table'
|
|
|
+import consts from '@/consts'
|
|
|
+import React, { useRef, useState } from 'react'
|
|
|
+import { DatePicker, Select, Space } from 'antd'
|
|
|
import dayjs from 'dayjs'
|
|
|
import { dayjsFormat } from '@/utils/utils'
|
|
|
-
|
|
|
-const { Option } = Select
|
|
|
-
|
|
|
-function PickerWithType({ type, onChange }) {
|
|
|
- if (type === 'time') return <TimePicker onChange={onChange} />
|
|
|
- if (type === 'date') return <DatePicker onChange={onChange} />
|
|
|
- return <DatePicker picker={type} onChange={onChange} />
|
|
|
-}
|
|
|
+import OptionSelect from '../../components/OptionSelect'
|
|
|
+import { queryCustomerAdditionList } from '@/services/statistic'
|
|
|
|
|
|
const CustomerAdditions = () => {
|
|
|
- const [type, setType] = useState('time')
|
|
|
+ const [state, setState] = useState({
|
|
|
+ params: {
|
|
|
+ optionType: 'singleStaff',
|
|
|
+ dataIds: [],
|
|
|
+ startMonth: [dayjs(new Date()), dayjs(new Date())],
|
|
|
+ dateType: 'month'
|
|
|
+ },
|
|
|
+ list: []
|
|
|
+ })
|
|
|
+ const { Option } = Select
|
|
|
+ const { RangePicker } = DatePicker
|
|
|
+ const [type, setType] = useState('month')
|
|
|
+ const tRef = useRef(null)
|
|
|
+ const optionChange = (type, ids) =>
|
|
|
+ setState({ ...state, params: { ...state.params, optionType: type, dataIds: ids } })
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ dataIndex: 'name',
|
|
|
+ title: '名称',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataIndex: 'client',
|
|
|
+ title: '客户',
|
|
|
+ align: 'center',
|
|
|
+ render: text => <div className="text-right">{text}</div>
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataIndex: 'company',
|
|
|
+ title: '单位',
|
|
|
+ align: 'center',
|
|
|
+ render: text => <div className="text-right">{text}</div>
|
|
|
+ }
|
|
|
+ ]
|
|
|
return (
|
|
|
- <Space>
|
|
|
- <Select value={type} onChange={setType}>
|
|
|
- <Option value="time">Time</Option>
|
|
|
- <Option value="date">Date</Option>
|
|
|
- <Option value="week">Week</Option>
|
|
|
- <Option value="month">Month</Option>
|
|
|
- <Option value="quarter">Quarter</Option>
|
|
|
- <Option value="year">Year</Option>
|
|
|
- </Select>
|
|
|
- <PickerWithType type={type} onChange={value => console.log(dayjsFormat(value))} />
|
|
|
- </Space>
|
|
|
+ <div className="flex flex-col">
|
|
|
+ <div className="flex flex-row justify-between mb-4">
|
|
|
+ <div className="card-transition bg-white w-full">
|
|
|
+ aa
|
|
|
+ {/* {state.list?.length ? <Column {...columnConfig} /> : null} */}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <BasicTable
|
|
|
+ // manualRequest
|
|
|
+ search={false}
|
|
|
+ columns={columns}
|
|
|
+ actionRef={tRef}
|
|
|
+ rowkey="id"
|
|
|
+ params={state.params}
|
|
|
+ pagination={false}
|
|
|
+ bordered
|
|
|
+ toolbar={{
|
|
|
+ title: [<OptionSelect onChange={optionChange} type="CustomerAdditions" key="op" multiple={false} />],
|
|
|
+ actions: [
|
|
|
+ <Space key="id">
|
|
|
+ <Select value={type} onChange={setType}>
|
|
|
+ <Option value="month">月</Option>
|
|
|
+ <Option value="week">周</Option>
|
|
|
+ <Option value="date">日</Option>
|
|
|
+ </Select>
|
|
|
+ <RangePicker
|
|
|
+ picker={type}
|
|
|
+ allowClear={false}
|
|
|
+ value={state.params.startMonth}
|
|
|
+ // onChange={val => console.log(dayjs(val).format())}
|
|
|
+ onChange={val => setState({ ...state, params: { ...state.params, startMonth: val, dateType: type } })}
|
|
|
+ />
|
|
|
+ </Space>
|
|
|
+ ]
|
|
|
+ }}
|
|
|
+ request={async (params, sort, filter) => {
|
|
|
+ const {
|
|
|
+ code = -1,
|
|
|
+ data: { list, chart }
|
|
|
+ } = await queryCustomerAdditionList({
|
|
|
+ ...params,
|
|
|
+ ...sort,
|
|
|
+ ...filter
|
|
|
+ })
|
|
|
+ setState({ ...state, chart })
|
|
|
+ return {
|
|
|
+ data: list,
|
|
|
+ success: code === consts.RET_CODE.SUCCESS,
|
|
|
+ total: list?.length || 0
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
)
|
|
|
}
|
|
|
|