Skip to content

M
merchant-manage-ui
Commit 651d3bf1 authored by FE-安焕焕's avatar FE-安焕焕 👣
Browse files
Options

Merge branch 'optimize' into 'master' 

Optimize

See merge request !1
parents 870a14a2 05c40ec0
Show whitespace changes
Inline Side-by-side
Showing with 398 additions and 221 deletions
.eslintrc.js
View file @ 651d3bf1
......@@ -7,5 +7,6 @@ module.exports = {
},
rules: {
'max-len': ['error', { code: 200 }],
'@typescript-eslint/camelcase': ['off'],
},
};
config/config.js
View file @ 651d3bf1
import slash from 'slash2';
import defaultSettings from './defaultSettings'; // https://umijs.org/config/
import slash from 'slash2';
import webpackPlugin from './plugin.config';
const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
......@@ -91,6 +92,11 @@ export default {
name: 'pendingDeliveryOrder',
component: './orderManage/pendingDeliveryOrder',
},
{
path: '/orderManage/deliveryOrder',
name: 'deliveryOrder',
component: './orderManage/deliveryOrder',
},
{
component: './404',
},
......
config/env.config.js
View file @ 651d3bf1
......@@ -4,7 +4,7 @@ let envAPi = {
api: '//backstms-vcc2.liangkebang.net',
// kdspApi: '//yapi.quantgroups.com/mock/351',
// kdspApi: '//192.168.28.66:80',
kdspApi: 'https://kdsp-op-vcc2.liangkebang.net'
kdspApi: 'https://kdsp-op-vcc2.liangkebang.net',
};
let prodApi = {
......
src/pages/orderManage/deliveryOrder/index.jsx 0 → 100644
View file @ 651d3bf1
import React from 'react';
import DeliverOrder from '../pendingDeliveryOrder';
// 已发货type:2;待发货type: 1
const TableList = () => <DeliverOrder type={2} />;
export default TableList;
src/pages/orderManage/pendingDeliveryOrder/components/LogisticsForm.jsx
View file @ 651d3bf1
......@@ -8,14 +8,14 @@ const { Option } = Select;
const LogisticsForm = props => {
const { modalVisible, onCancel, companys = [], skuList, onSubmit } = props;
const { getFieldDecorator, resetFields } = props.form;
const [result, setResult] = useState([{}]);
const { getFieldDecorator } = props.form;
const [result, setResult] = useState(() => props.value);
const formData = async (formDataList, fieldsValue, suffixes) => {
// 数据聚合
suffixes.forEach(suffixe => {
const formObj = {};
for(let key in fieldsValue) {
// eslint-disable-next-line no-restricted-syntax
for (const key in fieldsValue) {
if (key.startsWith(suffixe)) {
formObj[key.split('-')[1]] = fieldsValue[key];
}
......@@ -24,61 +24,59 @@ const LogisticsForm = props => {
});
// 参数整合
const result = [];
const resultData = [];
formDataList.forEach(data => {
data.selectedGoods.forEach(orderSkuId => {
result.push({
orderSkuId: orderSkuId,
resultData.push({
orderSkuId,
expressCompanyCode: data.selectedCompany.split('-')[0],
expressCompanyName: data.selectedCompany.split('-')[1],
deliveryNo: data.orderNum,
})
})
})
});
});
});
// 校验重复商品
let orderSkuIds = [];
formDataList.forEach(data => {
orderSkuIds = [...orderSkuIds, ...data.selectedGoods];
});
if (orderSkuIds.length !== Array.from(new Set(orderSkuIds)).length) {
notification.open({ message: '商品选择重复！' });
notification.error({ message: '商品选择重复！' });
return;
}
if (skuList.length !== orderSkuIds.length) {
notification.open({ message: '该订单下的所有商品必须设置物流信息！' });
notification.error({ message: '该订单下的所有商品必须设置物流信息！' });
return;
}
console.log(result);
await updateExpress(result);
await updateExpress(resultData);
onSubmit();
}
};
const handleSubmit = () => {
props.form.validateFields((err, fieldsValue) => {
let suffixes = [], formDataList = [];
const suffixes = [];
const formDataList = [];
if (err) return;
for(const key in fieldsValue) {
Object.keys(fieldsValue).forEach(key => {
const suffixe = key.split('-')[0];
if(!suffixes.includes(suffixe)) suffixes.push(suffixe);
}
if (!suffixes.includes(suffixe)) suffixes.push(suffixe);
});
formData(formDataList, fieldsValue, suffixes);
});
}
};
const addForm = () => {
setResult([...result, {}])
}
setResult([...result, {}]);
};
const rmForm = () => {
if (result.length === 1) return;
setResult(result.slice(0, result.length - 1))
}
const reset = () => {
setResult([{}]);
}
setResult(result.slice(0, result.length - 1));
};
useEffect(() => {
setResult(props.value);
}, props.value);
return (
<Modal
......@@ -90,11 +88,14 @@ const LogisticsForm = props => {
afterClose={() => setResult([{}])}
>
<Form>
{result && result.length &&
{result &&
result.length &&
result.map((v, i) => (
// eslint-disable-next-line react/no-array-index-key
<Card key={i}>
<FormItem>
{getFieldDecorator(`${i}-selectedGoods`, {
initialValue: v.selectedGoods,
rules: [
{
required: true,
......@@ -102,10 +103,7 @@ const LogisticsForm = props => {
},
],
})(
<Select
mode="multiple"
placeholder="请选择该订单下的商品"
>
<Select mode="multiple" placeholder="请选择该订单下的商品">
{skuList.map(item => (
<Option value={item.orderSkuId} key={item.orderSkuId}>
{item.skuName + (item.skuAttr || '')}
......@@ -116,6 +114,7 @@ const LogisticsForm = props => {
</FormItem>
<FormItem>
{getFieldDecorator(`${i}-selectedCompany`, {
initialValue: v.selectedCompany,
rules: [
{
required: true,
......@@ -123,12 +122,12 @@ const LogisticsForm = props => {
},
],
})(
<Select
showSearch
placeholder="请选择物流公司"
>
<Select showSearch placeholder="请选择物流公司">
{companys.map(item => (
<Option value={item.expressCompanyCode + '-' + item.expressCompanyName} key={item.expressCompanyCode}>
<Option
value={`${item.expressCompanyCode}-${item.expressCompanyName}`}
key={item.expressCompanyCode}
>
{item.expressCompanyName}
</Option>
))}
......@@ -137,6 +136,7 @@ const LogisticsForm = props => {
</FormItem>
<FormItem>
{getFieldDecorator(`${i}-orderNum`, {
initialValue: v.orderNum,
rules: [
{
required: true,
......@@ -145,8 +145,8 @@ const LogisticsForm = props => {
],
})(<Input placeholder="请填写物流单号" />)}
</FormItem>
</Card>)
)}
</Card>
))}
<div className={style.logistics}>
<Icon className={style.logisticsIcon} onClick={addForm} type="plus-circle" />
<Icon className={style.logisticsIcon} onClick={rmForm} type="minus-circle" />
......
src/pages/orderManage/pendingDeliveryOrder/components/OrderDetail.jsx deleted 100644 → 0
View file @ 870a14a2
import React from 'react';
import { Modal, Form, Select, Input, Table } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const LogisticsForm = props => {
const { modalVisible, onCancel, value } = props;
const columns = [
{
title: '商品名称',
dataIndex: 'skuName',
key: 'skuName',
width: 250,
},
{
title: '商品属性',
dataIndex: 'skuAttr',
key: 'skuAttr',
width: 200,
},
{
title: '商品件数（件）',
dataIndex: 'count',
key: 'count',
width: 150
},
{
title: '物流公司',
dataIndex: 'expressCompanyName',
key: 'expressCompanyName',
width: 150
},
{
title: '物流单号',
dataIndex: 'deliveryNo',
key: 'deliveryNo',
width: 150
}
];
const style = {
width: '900px'
};
return (
<Modal
title="订单详情"
visible={modalVisible}
onCancel={() => onCancel()}
onOk={() => onCancel()}
bodyStyle={style}
width={900}
>
<Table columns={columns} dataSource={value} />
</Modal>
);
};
export default Form.create()(LogisticsForm);
src/pages/orderManage/pendingDeliveryOrder/index.jsx
View file @ 651d3bf1
import { Button, Divider, Dropdown, Icon, Menu, message, Table } from 'antd';
import { Button, Upload, notification } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { FormInstance } from 'antd/lib/form';
import LogisticsForm from './components/LogisticsForm';
import OrderDetail from './components/OrderDetail';
import { queryToSend, queryExpress, getGoods } from './service';
import style from './styles.less';
import {
queryToSend,
queryExpress,
getGoods,
uploadFile,
getLogistics,
downTemplate,
downOrder,
} from './service';
const TableList = () => {
const TableList = props => {
const [companys, setCompanys] = useState([]);
const [LogisticsModalVisible, handleModalVisible] = useState(false);
const [detailModalVisible, handleDetailModalVisible] = useState(false);
const [skuList, setSkuList] = useState([]);
const [LogisticsData, setLogisticsData] = useState([{}]);
const [ShowUpdateBtn] = useState([2, 5]);
const actionRef = useRef();
const ref = useRef(FormInstance);
const renderContent = (record, key) =>
record.mchOrderSkuVoList.map((item, index) => (
<p
className={[
'tableContent',
index < record?.mchOrderSkuVoList?.length - 1 ? 'border' : null,
].join(' ')}
>
{item[key]}
</p>
));
const columns = [
{
title: '订单ID',
dataIndex: 'orderNo',
key: 'orderNo',
order: 6,
width: 250,
fixed: 'left',
},
{
title: '商品渠道',
dataIndex: 'skuSource.desc',
key: 'skuSource.desc',
hideInSearch: true,
title: '商品名称',
dataIndex: 'skuName',
key: 'skuName',
order: 6,
hideInTable: true,
},
{
title: '交易时间',
dataIndex: 'orderTime',
key: 'orderTime',
hideInSearch: true,
width: 200,
},
{
title: '收货人手机',
dataIndex: 'receiverPhone',
key: 'receiverPhone',
order: 4,
width: 150,
},
{
title: '收货人姓名',
dataIndex: 'receiverName',
key: 'receiverName',
order: 3,
width: 120,
},
{
title: '收货地址',
dataIndex: 'fullAddress',
key: 'fullAddress',
hideInSearch: true,
width: 160,
width: 350,
},
{
title: '物流状态',
dataIndex: 'logisticsStatus',
key: 'logisticsStatus',
filters: false,
title: '商品自编码',
dataIndex: 'thirdSpuNo',
key: 'thirdSpuNo',
width: 120,
hideInSearch: true,
className: 'colStyle',
render: (_, record) => renderContent(record, 'thirdSpuNo'),
},
{
title: '商品名称',
dataIndex: 'skuName',
key: 'skuName',
width: 400,
className: 'colStyle',
hideInSearch: true,
render: (_, record) => renderContent(record, 'skuName'),
},
{
title: '商品规格',
dataIndex: 'skuAttr',
key: 'skuAttr',
width: 200,
className: 'colStyle',
hideInSearch: true,
render: (_, record) => renderContent(record, 'skuAttr'),
},
{
title: '商品数量',
dataIndex: 'count',
key: 'count',
width: 100,
className: 'colStyle',
hideInSearch: true,
render: (_, record) => renderContent(record, 'count'),
},
{
title: '物流公司',
dataIndex: 'expressCompanyName',
key: 'expressCompanyName',
width: 100,
className: 'colStyle',
hideInSearch: true,
render: (_, record) => renderContent(record, 'expressCompanyName'),
},
{
title: '物流单号',
dataIndex: 'deliveryNo',
key: 'deliveryNo',
width: 180,
className: 'colStyle',
hideInSearch: true,
render: (_, record) => renderContent(record, 'deliveryNo'),
},
{
title: '订单状态',
dataIndex: 'orderStatus',
key: 'orderStatus',
width: 120,
hideInSearch: true,
valueEnum: {
'_3': '全部',
'_1': '未发货',
'_2': '已发货',
12: '待发货',
13: '待收货',
21: '订单完成',
},
order: 5,
},
{
title: '订单开始时间',
......@@ -81,43 +164,42 @@ const TableList = () => {
dataIndex: 'option',
key: 'option',
valueType: 'option',
width: 120,
width: 150,
fixed: 'right',
render: (_, record) => (
<React.Fragment>
{
record.skuSource.value !== 2 && record.logisticsStatus === '_1' ? (
{ShowUpdateBtn.includes(record?.skuSource?.value) ? null : (
<Button
type="primary"
style={
{
style={{
marginBottom: '10px',
}
}
}}
onClick={async () => {
const skuList = await getGoods(record.orderId);
setSkuList(skuList);
const skuListData = await getGoods(record?.orderId);
let logisticsData = [{}];
setSkuList(skuListData);
const data = await getLogistics(record?.orderId);
logisticsData = data.map(item => ({
selectedGoods: item?.skus?.map(sku => sku?.orderSkuId),
selectedCompany: item.expressCompanyCode
? `${item?.expressCompanyCode}-${item?.expressCompanyName}`
: null,
orderNum: item?.deliveryNo,
}));
setLogisticsData(logisticsData);
handleModalVisible(true);
}}
>
更新物流信息
{props.type === 2 ? '更新物流信息' : '填写物流信息'}
</Button>
) : null
}
<Button
type="primary"
onClick={async () => {
const skuList = await getGoods(record.orderId);
console.log('skuList', skuList);
setSkuList(skuList);
handleDetailModalVisible(true);
}}>查看订单详情</Button>
)}
</React.Fragment>
),
},
];
const reload = () => {
handleModalVisible(false)
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
......@@ -130,19 +212,110 @@ const TableList = () => {
};
getCompanys();
}, []);
const uploadProps = {
name: 'file',
async customRequest(info) {
const result = await uploadFile(info.file);
if (result.businessCode === '0000') {
notification.success({ message: '导入成功' });
}
},
accept: '.xlsx',
showUploadList: false,
};
const queryToSendFn = params => {
const transformedParam = {
...params,
logisticsStatus: props.type || 1,
startTime: params.beginTime,
pageNo: params.current,
pageSize: params.pageSize || 20,
};
return queryToSend(transformedParam);
};
const searchRender = ({ searchText, resetText }, { form }) => {
const exportBtn = [
<Upload {...uploadProps}>
<Button type="primary" style={{ marginRight: '10px' }} key="export">
导入
</Button>
</Upload>,
<Button
type="primary"
key="exportTemplate"
onClick={downTemplate}
style={{ marginRight: '10px' }}
>
导入模板下载
</Button>,
];
return [
<Button
key="search"
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
// eslint-disable-next-line no-unused-expressions
form?.submit();
}}
>
{searchText}
</Button>,
<Button
key="rest"
style={{ marginRight: '10px' }}
onClick={() => {
// eslint-disable-next-line no-unused-expressions
form?.resetFields();
}}
>
{resetText}
</Button>,
props.type === 2 ? null : [...exportBtn],
];
};
const toolBarRenderFn = () => [
<Button
type="primary"
onClick={() => {
if (ref.current) {
const obj = { ...ref.current.getFieldsValue(), logisticsStatus: props.type || 1 };
downOrder(obj);
}
}}
>
导出数据
</Button>,
];
return (
<PageHeaderWrapper>
<ProTable
className={style.protable}
actionRef={actionRef}
request={(params, sorter, filter) => queryToSend({ ...params })}
request={params => queryToSendFn({ ...params })}
columns={columns}
search={{ collapsed: false, collapseRender: () => null }}
rowKey={r => r.orderId}
formRef={ref}
toolBarRender={toolBarRenderFn}
search={{
collapsed: false,
optionRender: searchRender,
}}
bordered
scroll={{ x: 1500 }}
/>
<LogisticsForm
onSubmit={reload}
skuList={skuList}
companys={companys}
onCancel={() => handleModalVisible(false)}
modalVisible={LogisticsModalVisible}
value={LogisticsData}
/>
<LogisticsForm onSubmit={reload} skuList={skuList} companys={companys} onCancel={() => handleModalVisible(false)} modalVisible={LogisticsModalVisible} />
<OrderDetail value={skuList} onCancel={() => handleDetailModalVisible(false)} modalVisible={detailModalVisible} />
</PageHeaderWrapper>
)
);
};
export default TableList;
src/pages/orderManage/pendingDeliveryOrder/service.js
View file @ 651d3bf1
import { stringify } from 'querystring';
import _ from 'lodash';
import request from '@/utils/request';
import { saveAs } from 'file-saver';
import { format } from 'date-fns';
import config from '../../../../config/env.config';
// 待发货订单
export async function queryToSend(params) {
const transformedParam = {
...params,
logisticsStatus: params.logisticsStatus ? params.logisticsStatus.slice(1) : '',
startTime: params.beginTime,
pageNo: params.current,
pageSize: params.pageSize || 20,
};
const { data: { current, records, total, size } } = await request.post('/api/kdsp/op/mch-order/list', {
const {
data: { current, records, total, size },
} = await request.post('/api/kdsp/op/mch-order/list-v2', {
prefix: config.kdspApi,
data: stringify(_.omitBy(transformedParam, v => !v)),
data: stringify(_.omitBy(params, v => !v)),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
},
});
return {
current: current,
data: records.map(v => ({...v, logisticsStatus: `_${v.logisticsStatus}`})),
total: total,
pageSize: size
}
current,
data: records.map(v => ({ ...v, logisticsStatus: `_${v.logisticsStatus}` })),
total,
pageSize: size,
};
}
// 快递公司
......@@ -39,7 +35,7 @@ export async function queryExpress() {
export async function updateExpress(params) {
return request.post('/api/kdsp/op/mch-order/update-express-info', {
prefix: config.kdspApi,
data: params
data: params,
});
}
......@@ -49,3 +45,34 @@ export async function getGoods(orderId) {
});
return data;
}
export async function getLogistics(orderId) {
const { data } = await request.get(`/api/kdsp/op/mch-order/logistics-skus?orderId=${orderId}`, {
prefix: config.kdspApi,
});
return data;
}
export async function uploadFile(file) {
const params = new FormData();
params.append('file', file);
const data = await request.post('/api/kdsp/op/mch-order/order-logistics-batch-import', {
data: params,
prefix: config.kdspApi,
});
return data;
}
export function downTemplate() {
window.location.href =
'https://kdspstatic.q-gp.com/%E8%AE%A2%E5%8D%95%E7%89%A9%E6%B5%81%E4%BF%A1%E6%81%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF-v1.xlsx';
}
export async function downOrder(params) {
const data = await request.post('/api/kdsp/op/mch-order/order-export', {
data: stringify(_.omitBy(params, v => !v)),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
prefix: config.kdspApi,
responseType: 'arrayBuffer',
});
const blob = new Blob([data]);
saveAs(blob, `商户订单列表-${format(new Date(), 'yyyyMMddHHmmss')}.xlsx`);
}
src/pages/orderManage/pendingDeliveryOrder/styles.less 0 → 100644
View file @ 651d3bf1
.protable {
:global {
.tableContent {
display: flex;
align-items: flex-end;
height: 60px;
padding: 16px;
}
.border {
border-bottom: 1px solid #e8e8e8;
}
tbody .colStyle {
padding: 0;
}
}
}
src/utils/request.js
View file @ 651d3bf1
......@@ -84,7 +84,7 @@ request.interceptors.request.use(async (url, options) => {
const header = {
...headers,
'Access-Token': token,
'Content-Type': headers['Content-Type'] ? headers['Content-Type'] : 'application/json',
// 'Content-Type': headers['Content-Type'] ? headers['Content-Type'] : 'application/json',
};
return {
url,
......@@ -116,6 +116,11 @@ request.interceptors.response.use(async (response, options) => {
});
window.location.href = loginPath;
}
if (data.businessCode && data.businessCode !== '0000') {
notification.warning({
message: data.detail || data.msg || '操作失败',
});
}
return response;
});
......
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