Commit b1b6904d authored by XieZhiXiong's avatar XieZhiXiong

feat: 添加Table头部拖拽

parent 1f0acb9f
......@@ -9,7 +9,7 @@ const intl = getIntl();
export const tableListSchema: any = () => {
const res = getPurchaseOrderSelectOption()
if(res) {
if (res) {
const {
orderTypes: OrderType,
innerStatus: PurchaseOrderInsideWorkStateTexts,
......@@ -19,46 +19,59 @@ export const tableListSchema: any = () => {
return {
type: 'object',
properties: {
mageLayout: {
topLayout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
},
properties: {
topLayout: {
ctl: {
type: 'object',
'x-component': 'mega-layout',
'x-component': 'Children',
'x-component-props': {
grid: true,
children: '{{controllerBtns}}',
},
properties: {
ctl: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{controllerBtns}}',
},
},
FLEX_END_LAYOUT: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
justifyContent: 'flex-end',
},
colStyle: {
marginLeft: 16,
},
},
properties: {
orderNo: {
type: 'string',
type: 'object',
"x-component": 'Search',
'x-component-props': {
placeholder: intl.formatMessage({ id: 'purchaseOrder.readyAddOrder.orderNo' }),
align: 'flex-end',
},
}
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
columnsConfigure: {
type: 'object',
'x-component': 'EnhanceCustomColumnsConfigure',
},
},
},
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
},
},
properties: {
digest: {
type: 'string',
......@@ -107,7 +120,7 @@ export const tableListSchema: any = () => {
// "x-component": 'DateRangePickerUnix',
'x-component-props': {
// showTime: true,
placeholder: [intl.formatMessage({ id: 'purchaseRequisition.kaishishijian' }),intl.formatMessage({ id: 'purchaseRequisition.jieshushijian' })],
placeholder: [intl.formatMessage({ id: 'purchaseRequisition.kaishishijian' }), intl.formatMessage({ id: 'purchaseRequisition.jieshushijian' })],
},
},
submit: {
......@@ -116,8 +129,8 @@ export const tableListSchema: any = () => {
children: intl.formatMessage({ id: 'purchaseRequisition.chaxun' }),
},
},
},}}
},
},
}
}
}
}
......@@ -128,10 +141,10 @@ export const tableListSchema: any = () => {
* 销售订单高级筛选 销售订单查询
*/
export const saleTableListSchema: any = () => {
export const saleTableListSchema: any = () => {
const res = getSaleOrderSelectOption()
if(res) {
if (res) {
const {
orderTypes: OrderType,
innerStatus: SaleOrderInsideWorkStateTexts,
......@@ -141,45 +154,59 @@ export const tableListSchema: any = () => {
return {
type: 'object',
properties: {
mageLayout: {
topLayout: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
},
properties: {
topLayout: {
ctl: {
type: 'object',
'x-component': 'mega-layout',
'x-component': 'Children',
'x-component-props': {
grid: true,
children: '{{controllerBtns}}',
},
properties: {
ctl: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{controllerBtns}}',
},
},
FLEX_END_LAYOUT: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
justifyContent: 'flex-end',
},
colStyle: {
marginLeft: 16,
},
},
properties: {
orderNo: {
type: 'string',
type: 'object',
"x-component": 'Search',
'x-component-props': {
placeholder: intl.formatMessage({ id: 'purchaseOrder.readyAddOrder.orderNo' }),
align: 'flex-end',
},
}
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
columnsConfigure: {
type: 'object',
'x-component': 'EnhanceCustomColumnsConfigure',
},
},
},
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
},
colStyle: {
marginLeft: 20,
},
},
properties: {
"digest": {
......@@ -228,7 +255,7 @@ export const tableListSchema: any = () => {
type: 'daterange',
// "x-component": 'DateRangePickerUnix',
'x-component-props': {
placeholder: [intl.formatMessage({ id: 'purchaseRequisition.kaishishijian' }),intl.formatMessage({ id: 'purchaseRequisition.jieshushijian' })],
placeholder: [intl.formatMessage({ id: 'purchaseRequisition.kaishishijian' }), intl.formatMessage({ id: 'purchaseRequisition.jieshushijian' })],
},
},
submit: {
......@@ -237,8 +264,8 @@ export const tableListSchema: any = () => {
children: intl.formatMessage({ id: 'purchaseRequisition.chaxun' }),
},
},
},}}
},
},
}
}
}
}
......
import { history, useIntl } from 'umi'
import { Tooltip } from 'antd'
import { formatTimeString } from '@/utils'
import StatusColors from '../components/statusColors'
import EyePreview from '@/components/EyePreview'
import { ORDER_TYPE_CHANNEL_POINTS, ORDER_TYPE_POINTS } from '@/constants/order'
import { COLUMNS_NORMAL_WIDTH, COLUMNS_LARGE_WIDTH } from '@/constants/table'
export const baseOrderListColumns: any = () => {
const intl = useIntl()
......@@ -10,7 +12,6 @@ export const baseOrderListColumns: any = () => {
return [
{
title: intl.formatMessage({ id: 'purchaseOrder.dingdanhao', defaultMessage: '订单号' }),
align: 'center',
dataIndex: 'orderNo',
key: 'orderNo',
render: (text, record) => {
......@@ -20,47 +21,46 @@ export const baseOrderListColumns: any = () => {
</EyePreview>
)
},
ellipsis: true,
fixed: 'left',
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'purchaseOrder.gongyinghuiyuan', defaultMessage: '供应会员' }),
align: 'center',
dataIndex: 'vendorMemberName',
key: 'vendorMemberName',
ellipsis: true,
render: (t, r) => t ? t : r.memberName,
fixed: 'left',
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'purchaseOrder.xiadanshijian', defaultMessage: '下单时间' }),
align: 'center',
dataIndex: 'createTime',
key: 'createTime',
render: (text) => formatTimeString(text),
fixed: 'left',
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'purchaseOrder.dingdanzonge', defaultMessage: '订单总额' }),
align: 'center',
dataIndex: 'amount',
key: 'amount',
ellipsis: true,
render: (t, r) => (r.orderType === ORDER_TYPE_POINTS || r.orderType === ORDER_TYPE_CHANNEL_POINTS) ? t : `${intl.formatMessage({ id: 'commodity.products.directChannel.columns.currency'})}${t}`,
fixed: 'left',
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'purchaseRequisition.dingdanzhaiyao', defaultMessage: '订单摘要' }),
align: 'center',
dataIndex: 'digest',
key: 'digest',
ellipsis: true,
width: COLUMNS_LARGE_WIDTH,
render: (text) => (
<Tooltip title={text}>
{text}
</Tooltip>
),
},
{
title: intl.formatMessage({ id: 'purchaseOrder.dingdanleixing', defaultMessage: '订单类型' }),
align: 'center',
dataIndex: 'orderTypeName',
key: 'orderTypeName',
width: COLUMNS_NORMAL_WIDTH,
},
// {
// title: '送货地址',
......@@ -71,17 +71,17 @@ export const baseOrderListColumns: any = () => {
// },
{
title: intl.formatMessage({ id: 'purchaseOrder.waibuzhuangtai', defaultMessage: '外部状态' }),
align: 'center',
dataIndex: 'outerStatusName',
key: 'outerStatusName',
render: (text, record) => <StatusColors status={text} type='out' text={record['outerStatusName']} />,
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'purchaseOrder.neibuzhuangtai', defaultMessage: '内部状态' }),
align: 'center',
dataIndex: 'innerStatusName',
key: 'innerStatusName',
render: (text, record) => <StatusColors status={text} type='inside' text={record['innerStatusName']} />,
width: COLUMNS_NORMAL_WIDTH,
}
]
}
import React, { useState, useRef, useCallback } from 'react'
import { Card, Button, Modal, message } from 'antd'
import { Card, Button, Modal, message, Tooltip } from 'antd'
import StandardTable from '@/components/StandardTable';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { baseOrderListColumns } from './constant'
......@@ -18,9 +18,19 @@ import TableOperation from '@/components/TableOperation'
import { ORDER_TYPE_POINTS } from '@/constants/order'
import { getAuth } from '@/utils/auth'
import moment from 'moment'
import { getOrderBuyerGetDeliveryTime, getOrderBuyerPage, postOrderBuyerCancel, postOrderBuyerPageDelete, postOrderBuyerRefund, postOrderBuyerUpdateDeliveryTime } from '@/services/OrderNewV2Api'
import {
getOrderBuyerGetDeliveryTime,
getOrderBuyerPage,
GetOrderBuyerPageResponseDetail,
postOrderBuyerCancel,
postOrderBuyerPageDelete,
postOrderBuyerRefund,
postOrderBuyerUpdateDeliveryTime,
} from '@/services/OrderNewV2Api'
import SaleAfter from './components/saleAfter'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { COLUMNS_LARGE_WIDTH, COLUMNS_ACTION_WIDTH } from '@/constants/table';
import SortableTableHeader, { useSortableColumns, CustomColumnsConfigure, CustomColumnsConfigureRef } from '@/components/SortableTableHeader';
// 订单查询
......@@ -50,7 +60,40 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
{ id: 2, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName2' })},
{ id: 3, name: intl.formatMessage({ id: 'purchaseOrder.showDataSourceName3' })},
])
const secondColumns = () => {
const alreadyColumns = baseOrderListColumns()
if(alreadyColumns) {
alreadyColumns.splice(6, 0, {
title: intl.formatMessage({id:'purchaseOrder.addressTitle'}),
dataIndex: 'deliverAddress',
key: 'deliverAddress',
ellipsis: true,
width: COLUMNS_LARGE_WIDTH,
render: (text) => (
<Tooltip title={text}>
{text}
</Tooltip>
),
});
return alreadyColumns.concat([
{
title: intl.formatMessage({id:'purchaseOrder.operation'}),
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
render: (text, record) => renderOptionButton(record),
fixed: 'right',
width: COLUMNS_ACTION_WIDTH,
}
])
}
}
const [columns, setColumns] = useSortableColumns<GetOrderBuyerPageResponseDetail>(secondColumns());
const fetchParams = useRef<any>({})
const customColumnsConfigureRef = useRef<CustomColumnsConfigureRef | null>(null)
const { token } = (getAuth() || {})
const loadingTableData = (params) => {
......@@ -178,28 +221,6 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
)
}
const secondColumns = () => {
const alreadyColumns = baseOrderListColumns()
if(alreadyColumns) {
alreadyColumns.splice(6, 0, {
title: intl.formatMessage({id:'purchaseOrder.addressTitle'}),
dataIndex: 'deliverAddress',
key: 'deliverAddress',
width: 164,
ellipsis: true,
});
return alreadyColumns.concat([
{
title: intl.formatMessage({id:'purchaseOrder.operation'}),
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
render: (text, record) => renderOptionButton(record)
}
])
}
}
const handleExport = async () => {
const p = {...fetchParams.current}
delete p.current
......@@ -278,11 +299,19 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
const controllerBtns = <Button style={{width: 140}} onClick={handleExport} type='default'>{intl.formatMessage({ id: 'purchaseOrder.export' })}</Button>
const EnhanceCustomColumnsConfigure = useCallback(() => (
<CustomColumnsConfigure
defaultColumns={columns}
onConfirm={(newColumns) => setColumns(newColumns)}
ref={customColumnsConfigureRef}
/>
), [])
return <PageHeaderWrapper>
<Card>
<StandardTable
fetchTableData={params => loadingTableData(params)}
columns={secondColumns()}
columns={columns}
currentRef={ref}
controlRender={
<NiceForm
......@@ -302,12 +331,25 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
schema={tableListSchema()}
components={{
DateRangePickerUnix,
Submit
Submit,
EnhanceCustomColumnsConfigure,
}}
/>
}
tableProps={{
rowKey: 'orderNo',
scroll: { x: 1200 },
components: {
header: {
row: SortableTableHeader.DraggableHeaderRow,
cell: SortableTableHeader.DraggableHeaderCell,
},
},
onHeaderRow: (_, index) => ({
columns,
index,
setColumns,
}),
}}
/>
</Card>
......
......@@ -7,8 +7,9 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
import { getSaleOrderAuditPageSelectOption } from '@/pages/transaction/effect';
import { ISchemaFormActions, ISchemaFormAsyncActions } from '@formily/antd'
import { useModalTable } from '../../purchaseOrder/orderCollectB2b/model/useModalTable'
import { Button } from 'antd'
import { Button, Tooltip } from 'antd'
import { ORDER_TYPE_CHANNEL_POINTS, ORDER_TYPE_POINTS } from '@/constants/order'
import { COLUMNS_NORMAL_WIDTH, COLUMNS_LARGE_WIDTH } from '@/constants/table'
/** 订单审核各个页面 只有订单类型查询的Schema */
export const tableListSchema: any = (align?: String, colStyle?: Object) => {
......@@ -95,35 +96,46 @@ export const baseOrderListColumns: any = () => {
{text}
</EyePreview>
)
}
},
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'saleOrder.dingdanzhaiyao', defaultMessage: '订单摘要' }),
dataIndex: 'digest',
key: 'digest',
width: COLUMNS_LARGE_WIDTH,
render: (text) => (
<Tooltip title={text}>
{text}
</Tooltip>
),
},
{
title: intl.formatMessage({ id: 'saleOrder.caigouhuiyuan', defaultMessage: '采购会员' }),
dataIndex: 'memberName',
key: 'memberName',
render: (t, r) => r.memberName ? t : r.buyerMemberName
render: (t, r) => r.memberName ? t : r.buyerMemberName,
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'saleOrder.xiadanshijian', defaultMessage: '下单时间' }),
dataIndex: 'createTime',
key: 'createTime',
render: (text) => formatTimeString(text)
render: (text) => formatTimeString(text),
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'saleOrder.dingdanzonge', defaultMessage: '订单总额' }),
dataIndex: 'amount',
key: 'amount',
render: (t, r) => (r.orderType === ORDER_TYPE_POINTS || r.orderType === ORDER_TYPE_CHANNEL_POINTS) ? t : `${intl.formatMessage({ id: 'common.money' })}${t}`
render: (t, r) => (r.orderType === ORDER_TYPE_POINTS || r.orderType === ORDER_TYPE_CHANNEL_POINTS) ? t : `${intl.formatMessage({ id: 'common.money' })}${t}`,
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'saleOrder.dingdanleixing', defaultMessage: '订单类型' }),
dataIndex: 'orderTypeName',
key: 'orderTypeName',
width: COLUMNS_NORMAL_WIDTH,
},
// {
// title: '送货地址',
......@@ -135,19 +147,22 @@ export const baseOrderListColumns: any = () => {
{
title: intl.formatMessage({ id: 'saleOrder.zhuandandingdanhao', defaultMessage: '转单订单号' }),
dataIndex: 'relationNo',
key: 'relationNo'
key: 'relationNo',
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'saleOrder.waibuzhuangtai', defaultMessage: '外部状态' }),
dataIndex: 'outerStatusName',
key: 'outerStatusName',
render: (text, record) => <StatusColors status={text} type='out' text={record['outerStatusName']} />,
width: COLUMNS_NORMAL_WIDTH,
},
{
title: intl.formatMessage({ id: 'saleOrder.neibuzhuangtai', defaultMessage: '内部状态' }),
dataIndex: 'innerStatusName',
key: 'innerStatusName',
render: (text, record) => <StatusColors status={text} type='saleInside' text={record['innerStatusName']} />,
width: COLUMNS_NORMAL_WIDTH,
},
]
}
......
import React, { useEffect, useRef, useState } from 'react'
import { Card, Button, Space, message, Modal, Form, Row, Col, Input, Spin, Radio } from 'antd'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Card, Button, Space, message, Modal, Form, Row, Col, Input, Spin, Radio, Tooltip } from 'antd'
import StandardTable from '@/components/StandardTable';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { baseOrderListColumns, useTransformOrderTable } from './constant'
......@@ -18,12 +18,24 @@ import { getAuth } from '@/utils/auth'
import styles from './index.less'
import QRCode from 'qrcode'
import { MEMBER_ROLE_TYPE_SERVICE_CONSUMER } from '@/constants/member'
import { getOrderVendorDetail, getOrderVendorGeneratePayLink, getOrderVendorMiniAppCode, getOrderVendorPage, postOrderVendorCancel, postOrderVendorTerminate, postOrderVendorTransfer, postOrderVendorTransferPreview } from '@/services/OrderNewV2Api'
import {
getOrderVendorDetail,
getOrderVendorGeneratePayLink,
getOrderVendorMiniAppCode,
getOrderVendorPage,
GetOrderVendorPageResponseDetail,
postOrderVendorCancel,
postOrderVendorTerminate,
postOrderVendorTransfer,
postOrderVendorTransferPreview,
} from '@/services/OrderNewV2Api'
import appImg from '@/assets/icons/app.png'
import miniappImg from '@/assets/icons/miniapp.png'
import scanImg from '@/assets/icons/scan.png'
import { h5PageAddressByScan } from '@/constants/order';
import useAgentInfo from '../saleOrder/agentPurchaseOrder/hooks/useAgentInfo'
import { COLUMNS_LARGE_WIDTH, COLUMNS_ACTION_WIDTH } from '@/constants/table';
import SortableTableHeader, { useSortableColumns, CustomColumnsConfigure, CustomColumnsConfigureRef } from '@/components/SortableTableHeader';
// 销售订单查询
......@@ -70,11 +82,46 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
const { run, loading } = useHttpRequest(postOrderVendorCancel)
const { run: runPause, loading: loadingEnd } = useHttpRequest(postOrderVendorTerminate)
const { transformRef, orderColumns } = useTransformOrderTable(transformActions)
const secondColumns = () => {
const alreadyColumns = baseOrderListColumns()
if(alreadyColumns) {
alreadyColumns.splice(6, 0, {
title: intl.formatMessage({ id: 'saleOrder.songhuodizhi', defaultMessage: '送货地址' }),
dataIndex: 'deliverAddress',
key: 'deliverAddress',
ellipsis: true,
width: COLUMNS_LARGE_WIDTH,
render: (text) => (
<Tooltip title={text}>
{text}
</Tooltip>
),
})
return alreadyColumns.concat([
{
title: intl.formatMessage({ id: 'saleOrder.caozuo', defaultMessage: '操作' }),
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
render: (text, record) => renderOptionButton(record),
fixed: 'right',
width: COLUMNS_ACTION_WIDTH,
}
])
}
}
const [columns, setColumns] = useSortableColumns<GetOrderVendorPageResponseDetail>(secondColumns());
const { roles } = getAuth() || {}
const serversRoles = roles.filter(item => item['roleType'] === MEMBER_ROLE_TYPE_SERVICE_CONSUMER)
const { token } = (getAuth() || {})
const fetchParams = useRef<any>({})
const cancelId = useRef()
const customColumnsConfigureRef = useRef<CustomColumnsConfigureRef | null>(null);
const { dispatch, dispatchByOrder } = useAgentInfo()
const loadingTableData = (params) => {
......@@ -314,29 +361,6 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
)
}
const secondColumns = () => {
const alreadyColumns = baseOrderListColumns()
if(alreadyColumns) {
alreadyColumns.splice(6, 0, {
title: intl.formatMessage({ id: 'saleOrder.songhuodizhi', defaultMessage: '送货地址' }),
dataIndex: 'deliverAddress',
key: 'deliverAddress',
width: 164,
ellipsis: true,
})
return alreadyColumns.concat([
{
title: intl.formatMessage({ id: 'saleOrder.caozuo', defaultMessage: '操作' }),
align: 'center',
dataIndex: 'ctl',
key: 'ctl',
width: 200,
render: (text, record) => renderOptionButton(record)
}
])
}
}
const handleExport = async () => {
const p = {...fetchParams.current}
delete p.current
......@@ -365,12 +389,20 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
return <p>{intl.formatMessage({ id: 'saleOrder.dangqiangouyunle', defaultMessage: '当前勾运了' })}<b> { props['x-component-props'].number } </b>{intl.formatMessage({ id: 'saleOrder.zhangdingdanjinhang', defaultMessage: '张订单进行转单,转单后生成的采购订单可通过会员角色' })}<b> {props['x-component-props'].roleName || serversRoles[0]['memberRoleName']} </b>{intl.formatMessage({ id: 'saleOrder.jinhangzhakan', defaultMessage: '进行查看' })}</p>
})
const EnhanceCustomColumnsConfigure = useCallback(() => (
<CustomColumnsConfigure
defaultColumns={columns}
onConfirm={(newColumns) => setColumns(newColumns)}
ref={customColumnsConfigureRef}
/>
), [])
return <PageHeaderWrapper>
<Spin spinning={pageLoading}>
<Card>
<StandardTable
fetchTableData={params => loadingTableData(params)}
columns={secondColumns()}
columns={columns}
rowSelection={rowSelection}
currentRef={ref}
rowKey="orderId"
......@@ -392,10 +424,25 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
schema={tableListSchema()}
components={{
DateRangePickerUnix,
Submit
Submit,
EnhanceCustomColumnsConfigure,
}}
/>
}
tableProps={{
scroll: { x: 1200 },
components: {
header: {
row: SortableTableHeader.DraggableHeaderRow,
cell: SortableTableHeader.DraggableHeaderCell,
},
},
onHeaderRow: (_, index) => ({
columns,
index,
setColumns,
}),
}}
/>
</Card>
{/* 取消原因 */}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment