Skip to content

J
jinfa-platform
Commit d3be51ee authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

refactor: 重构评价表单组件

parent 938db756
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 959 deletions
src/pages/transaction/purchaserEvaluation/common/effects/index.tsx deleted 100644 → 0
View file @ 938db756
/*
* @Author: XieZhiXiong
* @Date: 2021-07-16 17:13:23
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-07-16 17:13:24
* @Description:
*/
import { useBusinessEffects } from './useBusinessEffects';
export const createEffects = (context, actions) => {
useBusinessEffects(context, actions);
};
\ No newline at end of file
src/pages/transaction/purchaserEvaluation/common/effects/useBusinessEffects.tsx deleted 100644 → 0
View file @ 938db756
/*
* @Author: XieZhiXiong
* @Date: 2021-07-16 17:13:39
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-07-16 17:14:46
* @Description:
*/
import { FormEffectHooks, FormPath } from '@formily/antd';
const {
onFieldInputChange$,
onFieldValueChange$,
} = FormEffectHooks;
export const useBusinessEffects = (context, actions) => {
const {
setFieldState,
} = actions;
// 评论图片限制 4 张
onFieldInputChange$('comments.*.picture').subscribe(fieldState => {
const { name, value } = fieldState;
setFieldState(
FormPath.transform(name, /\d/, $1 => {
return `comments.${$1}.picture`
}),
state => {
// 禁用掉 或者 editable 设置成 false，删除按钮也会禁用掉的
// 所以目前先用过 rules 去限制最多可上传多少张
// state.props['x-component-props'].disabled = value.length >= 4;
}
);
});
// 评分联动
onFieldInputChange$('comments.*.star').subscribe(fieldState => {
const { name, value } = fieldState;
setFieldState(
FormPath.transform(name, /\d/, $1 => {
return `comments.${$1}.smile`
}),
state => {
state.value = value;
}
);
});
}
\ No newline at end of file
src/pages/transaction/purchaserEvaluation/common/schemas/evaluateSchema.tsx deleted 100644 → 0
View file @ 938db756
/*
* @Author: XieZhiXiong
* @Date: 2021-07-16 16:53:17
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-09 18:40:47
* @Description: 评价 schema
*/
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE } from '@/constants';
import { getIntl } from 'umi';
const intl = getIntl();
export const evaluateSchema: ISchema = {
type: 'object',
properties: {
comments: {
type: 'array',
'x-component': 'EvaluationList',
default: [],
items: {
type: 'object',
properties: {
MEGA_LADYOUT: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
labelAlign: 'top',
},
properties: {
MEGA_LADYOUT_PRODUCT: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
grid: true,
full: true,
},
properties: {
good: {
type: 'string',
'x-component': 'EtProductInfo',
'x-mega-props': {
span: 2,
},
},
smile: {
type: 'string',
'x-component': 'SmilingFace',
'x-component-props': {
style: {
flex: 1,
textAlign: 'right',
},
},
},
},
},
star: {
title: intl.formatMessage({id: 'purchaserEvaluation.manyichengdu'}),
'x-component': 'Rating',
'x-component-props': {
allowHalf: false,
allowClear: false,
},
'x-rules': [
{
required: true,
},
],
},
comment: {
type: 'string',
title: intl.formatMessage({id: 'purchaserEvaluation.pingjia'}),
'x-component': 'TextArea',
'x-component-props': {
rows: 1,
style: {
width: '60%',
},
},
'x-rules': [
{
max: 200,
},
],
},
MEGA_LADYOUT_1: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
labelAlign: 'top',
inline: true,
},
properties: {
picture: {
type: 'string',
title: intl.formatMessage({id: 'purchaserEvaluation.tupian'}),
'x-component': 'FixUpload',
'x-component-props': {
listType: 'card',
action: '/api/file/file/upload/prefix',
data: {
fileType: UPLOAD_TYPE,
prefix: '',
},
beforeUpload: '{{beforeUpload}}',
accept: '.png, .jpg, .jpeg',
maxCount: 4,
},
'x-rules': [
{
max: 4,
message: intl.formatMessage({id: 'purchaserEvaluation.zuiduokeshangchuan4zhangtu'}),
},
],
},
UPLOAD_TIP: {
type: 'string',
title: ' ',
'x-component': 'UploadTip',
},
},
},
},
},
},
},
},
},
};
src/pages/transaction/purchaserEvaluation/common/schemas/receivedSchema.tsx deleted 100644 → 0
View file @ 938db756
/*
* @Author: XieZhiXiong
* @Date: 2021-08-11 14:04:22
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-11 16:41:32
* @Description: 收到的评价详情 schema
*/
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE } from '@/constants';
import { getIntl } from 'umi';
const intl = getIntl();
/**
*
* @param showExplain 是否需要展示解释, 默认为 true
* @returns
*/
const createSchema = (showExplain = true): ISchema => ({
type: 'object',
properties: {
comments: {
type: 'array',
'x-component': 'EvaluationList',
default: [],
items: {
type: 'object',
properties: {
MEGA_LADYOUT: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
labelAlign: 'top',
},
properties: {
MEGA_LADYOUT_PRODUCT: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
grid: true,
full: true,
},
properties: {
good: {
type: 'string',
'x-component': 'EtProductInfo',
'x-mega-props': {
span: 2,
},
},
smile: {
type: 'string',
'x-component': 'SmilingFace',
'x-component-props': {
style: {
flex: 1,
textAlign: 'right',
},
},
},
},
},
star: {
title: intl.formatMessage({id: 'purchaserEvaluation.manyichengdu'}),
'x-component': 'Rating',
'x-component-props': {
allowHalf: false,
allowClear: false,
},
},
comment: {
type: 'string',
title: intl.formatMessage({id: 'purchaserEvaluation.pingjia'}),
'x-component': 'TextArea',
'x-component-props': {
rows: 1,
style: {
width: '60%',
},
},
'x-rules': {
max: 200,
},
},
picture: {
type: 'string',
title: intl.formatMessage({id: 'purchaserEvaluation.tupian'}),
'x-component': 'FixUpload',
'x-mega-props': {
span: 2,
},
'x-component-props': {
listType: 'card',
action: '/api/file/file/upload/prefix',
data: {
fileType: UPLOAD_TYPE,
prefix: '',
},
beforeUpload: '{{beforeUpload}}',
accept: '.png, .jpg, .jpeg',
maxCount: 4,
},
'x-rules': [
{
max: 4,
message: intl.formatMessage({id: 'purchaserEvaluation.zuiduokeshangchuan4zhangtu'}),
},
],
},
...(showExplain ? {
replyTime: {
type: 'string',
title: intl.formatMessage({id: 'purchaserEvaluation.jieshishijian'}),
},
replyContent: {
type: 'string',
title: intl.formatMessage({id: 'purchaserEvaluation.shangjiajieshi'}),
},
} : {}),
},
},
},
},
},
},
});
export default createSchema;
src/pages/transaction/purchaserEvaluation/received/detail/index.tsx
View file @ d3be51ee
/**
* @Description 采购会员-收到的评价-详情组件
*/
import React, { useState, useEffect } from 'react';
import {
PageHeader,
Descriptions,
Spin,
message,
Upload,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getIntl, history } from 'umi';
import { createFormActions } from '@formily/antd';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberCommentConsumerReceiveTradeHistoryGet } from '@/services/MemberV2Api';
import { normalizeFiledata, FileData } from '@/utils';
import MellowCard from '@/components/MellowCard';
import NiceForm from '@/components/NiceForm';
import createSchema from '../../common/schemas/receivedSchema';
import { createEffects } from '../../common/effects';
import EvaluationList from '../../components/EvaluationList';
import EtProductInfo from '../../components/EtProductInfo';
import { normalizeFiledata } from '@/utils';
import { NormalizedEvaluateItem } from '../../utils';
import EvaluationForm from '../../components/EvaluationForm';
const intl = getIntl();
const formActions = createFormActions();
interface Unevaluated {
good: {
pic: string,
productName: string,
price: number,
purchaseCount: number,
unit: string,
totalPrice: number,
};
star: number;
comment: string;
picture: FileData[];
smile: number;
};
interface OrderInfo {
orderNo: string,
......@@ -46,7 +26,7 @@ interface OrderInfo {
const ReceivedDetail: React.FC = () => {
const { id } = usePageStatus();
const [orderInfo, setOrderInfo] = useState<OrderInfo>(null);
const [evaluationInfo, setEvaluationInfo] = useState<Unevaluated>(null);
const [evaluationInfo, setEvaluationInfo] = useState<NormalizedEvaluateItem[]>([]);
const [evaluationInfoLoading, setEvaluationInfoLoading] = useState(false);
const getEvaluationInfo = () => {
......@@ -58,20 +38,22 @@ const ReceivedDetail: React.FC = () => {
id,
}).then(res => {
if (res.code === 1000) {
setEvaluationInfo({
setEvaluationInfo([
{
good: {
pic: res.data?.productImgUrl,
productName: res.data?.product,
price: res.data?.price,
purchaseCount: res.data?.purchaseCount,
unit: res.data?.unit,
totalPrice: res.data?.totalPrice,
pic: res.data.productImgUrl,
productName: res.data.product,
unit: res.data.unit,
price: res.data.price,
purchaseCount: res.data.purchaseCount,
totalPrice: res.data.totalPrice,
},
star: res.data?.star,
comment: res.data?.comment,
picture: res.data?.pics ? res.data.pics.map(item => normalizeFiledata(item)) : [],
smile: res.data?.star,
});
star: res.data.star,
comment: res.data.comment,
picture: res.data.pics ? res.data.pics.map(item => normalizeFiledata(item)) : [],
smile: res.data.star,
}
]);
setOrderInfo({
orderNo: res.data?.orderNo,
dealTime: res.data?.dealTime as string,
......@@ -89,34 +71,6 @@ const ReceivedDetail: React.FC = () => {
getEvaluationInfo();
}, []);
const handleSubmit = values => {
};
const beforeUpload = file => {
if (file.size / 1024 / 1024 > 10) {
message.warning(intl.formatMessage({id: 'purchaserEvaluation.tupiandaxiaochaoguo10M'}));
return Upload.LIST_IGNORE;
}
return Promise.resolve();
};
const UploadTip = (
<span
style={{
marginTop: 14,
lineHeight: '24px',
color: '#909399',
fontWeight: 400,
wordBreak: 'break-all',
position: 'relative',
top: '34px',
}}
>
{intl.formatMessage({id: 'purchaserEvaluation.zhichiJPGPNGJPEG'})} <br />{intl.formatMessage({id: 'purchaserEvaluation.meizhangzuidabuchaoguo'})} <br />{intl.formatMessage({id: 'purchaserEvaluation.zuidashuliangxianzhi4'})}
</span>
);
return (
<Spin spinning={evaluationInfoLoading}>
<PageHeaderWrapper
......@@ -151,33 +105,12 @@ const ReceivedDetail: React.FC = () => {
</>
}
>
<MellowCard
bodyStyle={{
paddingBottom: 0,
}}
>
<NiceForm
actions={formActions}
previewPlaceholder=" "
initialValues={{
comments: [evaluationInfo],
}}
editable={false}
expressionScope={{
UploadTip: null,
beforeUpload,
}}
onSubmit={handleSubmit}
components={{
EvaluationList,
EtProductInfo,
}}
effects={($, actions) => {
createEffects($, actions);
<EvaluationForm
value={{
comments: evaluationInfo,
}}
schema={createSchema(false)}
ediabled={false}
/>
</MellowCard>
</PageHeaderWrapper>
</Spin>
);
......
src/pages/transaction/purchaserEvaluation/sent/components/DetailInfo/index.tsx
View file @ d3be51ee
import React, { useState, useEffect } from 'react';
/**
* @Description 采购会员-发出的评价-详情组件
*/
import React, { useState, useEffect, useRef } from 'react';
import {
PageHeader,
Descriptions,
Spin,
Button,
message,
Upload,
} from 'antd';
import { FormOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getIntl, history } from 'umi';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { getMemberCommentConsumerSendTradeHistoryGet, postMemberCommentConsumerSendTradeHistoryUpdate } from '@/services/MemberV2Api';
import { normalizeFiledata, FileData } from '@/utils';
import MellowCard from '@/components/MellowCard';
import NiceForm from '@/components/NiceForm';
import { evaluateSchema } from '../../../common/schemas/evaluateSchema';
import { createEffects } from '../../../common/effects';
import EvaluationList from '../../../components/EvaluationList';
import EtProductInfo from '../../../components/EtProductInfo';
import { normalizeFiledata } from '@/utils';
import { NormalizedEvaluateItem } from '../../../utils';
import EvaluationForm, { EvaluationFormRefHandle, EvaluationFormValue } from '../../../components/EvaluationForm';
const formActions = createFormActions();
const {
onFormInit$,
} = FormEffectHooks;
interface Unevaluated {
good: {
pic: string,
productName: string,
price: number,
purchaseCount: number,
unit: string,
totalPrice: number,
};
star: number;
comment: string;
picture: FileData[];
smile: number;
};
const intl = getIntl();
interface OrderInfo {
orderNo: string,
......@@ -46,23 +24,29 @@ interface OrderInfo {
memberName: string,
};
interface DetailInfoProps {
orderId: string;
// 评论id
interface PurchaserEvaluationInfoProps {
/**
* 评论id
*/
id: string;
// 是否可编辑的
isEdit?: boolean;
/**
* 是否可编辑的
*/
ediabled?: boolean;
};
const intl = getIntl();
const DetailInfo: React.FC<DetailInfoProps> = ({
const PurchaserEvaluationInfo: React.FC<PurchaserEvaluationInfoProps> = ({
id,
isEdit = false,
ediabled = false,
}) => {
const [orderInfo, setOrderInfo] = useState<OrderInfo>(null);
const [evaluationInfo, setEvaluationInfo] = useState<Unevaluated>(null);
const [evaluationInfo, setEvaluationInfo] = useState<NormalizedEvaluateItem[]>([]);
const [evaluationInfoLoading, setEvaluationInfoLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const EvaluationFormRef = useRef<EvaluationFormRefHandle | null>(null);
const getEvaluationInfo = () => {
if (!id) {
return;
......@@ -72,20 +56,22 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
id,
}).then(res => {
if (res.code === 1000) {
setEvaluationInfo({
setEvaluationInfo([
{
good: {
pic: res.data?.productImgUrl,
productName: res.data?.product,
price: res.data?.price,
purchaseCount: res.data?.purchaseCount,
unit: res.data?.unit,
totalPrice: res.data?.totalPrice,
pic: res.data.productImgUrl,
productName: res.data.product,
unit: res.data.unit,
price: res.data.price,
purchaseCount: res.data.purchaseCount,
totalPrice: res.data.totalPrice,
},
star: res.data?.star,
comment: res.data?.comment,
picture: res.data?.pics ? res.data.pics.map(item => normalizeFiledata(item)) : [],
smile: res.data?.star,
});
star: res.data.star,
comment: res.data.comment,
picture: res.data.pics ? res.data.pics.map(item => normalizeFiledata(item)) : [],
smile: res.data.star,
}
]);
setOrderInfo({
orderNo: res.data?.orderNo,
dealTime: res.data?.dealTime as string,
......@@ -103,9 +89,13 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
getEvaluationInfo();
}, []);
const handleSubmit = values => {
const handleRelease = () => {
EvaluationFormRef?.current.submit();
};
const handleSubmit = (value: EvaluationFormValue) => {
setSubmitLoading(true);
const payload = values.comments.map(item => {
const payload = value.comments.map(item => {
const {
comment,
picture,
......@@ -113,7 +103,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
} = item;
return {
id,
id: +id,
star,
comment,
pics: picture.map(item => item.status === 'done' && item.url).filter(Boolean),
......@@ -139,29 +129,6 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
});
};
const beforeUpload = file => {
if (file.size / 1024 / 1024 > 10) {
message.warning(intl.formatMessage({id: 'purchaserEvaluation.tupiandaxiaochaoguo10M'}));
return Upload.LIST_IGNORE;
}
return Promise.resolve();
};
const UploadTip = () => (
<div
style={{
marginTop: 14,
lineHeight: '24px',
color: '#909399',
fontWeight: 400,
wordBreak: 'break-all',
position: 'relative',
}}
>
{intl.formatMessage({id: 'purchaserEvaluation.zhichiJPGPNGJPEG'})} <br />{intl.formatMessage({id: 'purchaserEvaluation.meizhangzuidabuchaoguo'})} <br />{intl.formatMessage({id: 'purchaserEvaluation.zuidashuliangxianzhi4'})}
</div>
);
return (
<Spin spinning={evaluationInfoLoading}>
<PageHeaderWrapper
......@@ -177,15 +144,15 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
extra={(
<>
{
isEdit && (
ediabled && (
<Button
type="primary"
icon={<FormOutlined />}
disabled={!id}
loading={submitLoading}
onClick={() => formActions.submit()}
onClick={handleRelease}
>
{intl.formatMessage({id: 'purchaserEvaluation.xiugai'})}
{intl.formatMessage({ id: 'purchaserEvaluation.xiugai' })}
</Button>
)
}
......@@ -199,8 +166,8 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
padding: '0 32px',
}}
>
<Descriptions.Item label={intl.formatMessage({id: 'purchaserEvaluation.gongyinghuiyuan'})}>{orderInfo?.memberName}</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({id: 'purchaserEvaluation.xiadanshijian'})} span={2}>
<Descriptions.Item label={intl.formatMessage({ id: 'purchaserEvaluation.gongyinghuiyuan' })}>{orderInfo?.memberName}</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({ id: 'purchaserEvaluation.xiadanshijian' })} span={2}>
{orderInfo?.dealTime}
</Descriptions.Item>
</Descriptions>
......@@ -208,57 +175,17 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</>
}
>
<MellowCard
bodyStyle={{
paddingBottom: 0,
}}
>
<NiceForm
actions={formActions}
previewPlaceholder=" "
initialValues={{
comments: [evaluationInfo],
}}
editable={isEdit}
expressionScope={{
beforeUpload,
}}
components={{
EvaluationList,
EtProductInfo,
UploadTip,
<EvaluationForm
value={{
comments: evaluationInfo,
}}
ref={EvaluationFormRef}
onSubmit={handleSubmit}
effects={($, actions) => {
createEffects($, actions);
onFormInit$().subscribe(() => {
// 控制不同样式
if (!isEdit) {
// actions.setFieldState('comments.*.MEGA_LADYOUT_1', (fieldState) => {
// fieldState.props['x-component-props'] = {
// ...(fieldState.props['x-component-props'] || {}),
// labelCol: 6,
// };
// });
actions.setFieldState('comments.*.UPLOAD_TIP', (fieldState) => {
fieldState.visible = false;
});
// actions.setFieldState('comments.*.picture', (fieldState) => {
// fieldState.props['x-mega-props'] = {
// ...(fieldState.props['x-mega-props'] || {}),
// span: 3,
// };
// });
}
});
}}
schema={evaluateSchema}
ediabled={ediabled}
/>
</MellowCard>
</PageHeaderWrapper>
</Spin>
);
};
export default DetailInfo;
export default PurchaserEvaluationInfo;
src/pages/transaction/purchaserEvaluation/sent/detail.tsx
View file @ d3be51ee
......@@ -2,15 +2,14 @@ import React from 'react';
import { usePageStatus } from '@/hooks/usePageStatus';
import DetailInfo from './components/DetailInfo';
const SentDetail: React.FC = () => {
const { orderId, id } = usePageStatus();
const PurchaserEvaluationDetail: React.FC = () => {
const { id } = usePageStatus();
return (
<DetailInfo
orderId={orderId}
id={id}
/>
);
};
export default SentDetail;
\ No newline at end of file
export default PurchaserEvaluationDetail;
\ No newline at end of file
src/pages/transaction/purchaserEvaluation/sent/edit.tsx
View file @ d3be51ee
......@@ -2,16 +2,15 @@ import React from 'react';
import { usePageStatus } from '@/hooks/usePageStatus';
import DetailInfo from './components/DetailInfo';
const SentEdit: React.FC = () => {
const { orderId, id } = usePageStatus();
const PurchaserEvaluationEdit: React.FC = () => {
const { id } = usePageStatus();
return (
<DetailInfo
orderId={orderId}
id={id}
isEdit
ediabled
/>
);
};
export default SentEdit;
\ No newline at end of file
export default PurchaserEvaluationEdit;
\ No newline at end of file
src/pages/transaction/purchaserEvaluation/unevaluated/evaluate/index.tsx
View file @ d3be51ee
import React, { useState, useEffect } from 'react';
/**
* @Description 采购会员-待评价订单-评价
*/
import React, { useState, useEffect, useRef } from 'react';
import {
PageHeader,
Descriptions,
Spin,
Button,
message,
Upload,
} from 'antd';
import { FormOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getIntl, history, Prompt } from 'umi';
import moment from 'moment';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberCommentConsumerOrderTradeDetail, GetMemberCommentConsumerOrderTradeDetailResponse, postMemberCommentConsumerOrderTradeSubmit } from '@/services/MemberV2Api';
import MellowCard from '@/components/MellowCard';
import NiceForm from '@/components/NiceForm';
import { normalizeUnevaluatedList } from '../../utils';
import { evaluateSchema } from '../../common/schemas/evaluateSchema';
import { createEffects } from '../../common/effects';
import EvaluationList from '../../components/EvaluationList';
import EtProductInfo from '../../components/EtProductInfo';
import { normalizeUnevaluatedList, NormalizedEvaluateItem } from '../../utils';
import EvaluationForm, { EvaluationFormRefHandle, EvaluationFormValue } from '../../components/EvaluationForm';
const intl = getIntl();
const formActions = createFormActions();
const {
onFormInputChange$,
} = FormEffectHooks;
interface Unevaluated {
good: {
pic: string,
name: string,
price: string,
desc: string,
};
star: number;
comment: string;
picture: string[];
smile: number;
};
interface OrderInfo extends GetMemberCommentConsumerOrderTradeDetailResponse {
unevaluatedList: Unevaluated[];
unevaluatedList: NormalizedEvaluateItem[];
};
const EvaluateOrder: React.FC = () => {
const PurchaserEvaluateOrder: React.FC = () => {
const { id } = usePageStatus();
const [orderInfo, setOrderInfo] = useState<OrderInfo>(null);
const [infoLoading, setInfoLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const [unsaved, setUnsaved] = useState(false);
const EvaluationFormRef = useRef<EvaluationFormRefHandle | null>(null);
const getOrderInfo = () => {
if (!id) {
......@@ -68,13 +45,6 @@ const EvaluateOrder: React.FC = () => {
...res.data,
unevaluatedList,
});
unevaluatedList.forEach((item, index) => {
if (item.commentStatus) {
formActions.setFieldState(`comments.${index}.*`, (fieldState) => {
fieldState.editable = false;
});
}
});
}
}).finally(() => {
setInfoLoading(false);
......@@ -85,9 +55,13 @@ const EvaluateOrder: React.FC = () => {
getOrderInfo();
}, []);
const handleSubmit = values => {
const handleRelease = () => {
EvaluationFormRef?.current.submit();
};
const handleSubmit = (value: EvaluationFormValue) => {
setSubmitLoading(true);
const payload = values.comments.map(item => {
const payload = value.comments.map(item => {
const {
comment,
good,
......@@ -109,7 +83,6 @@ const EvaluateOrder: React.FC = () => {
commentSubmitDetailList: payload,
}).then(res => {
if (res.code === 1000) {
setUnsaved(false);
setTimeout(() => {
history.goBack();
}, 800);
......@@ -121,29 +94,6 @@ const EvaluateOrder: React.FC = () => {
});
};
const beforeUpload = file => {
if (file.size / 1024 / 1024 > 10) {
message.warning(intl.formatMessage({ id: 'purchaserEvaluation.tupiandaxiaochaoguo10M' }));
return Upload.LIST_IGNORE;
}
return Promise.resolve();
};
const UploadTip = () => (
<div
style={{
marginTop: 14,
lineHeight: '24px',
color: '#909399',
fontWeight: 400,
wordBreak: 'break-all',
position: 'relative',
}}
>
{intl.formatMessage({ id: 'purchaserEvaluation.tupiandaxiaochaoguo10M' })} <br />{intl.formatMessage({ id: 'purchaserEvaluation.meizhangzuidabuchaoguo' })} <br />{intl.formatMessage({ id: 'purchaserEvaluation.zuidashuliangxianzhi4' })}
</div>
);
return (
<Spin spinning={infoLoading}>
<PageHeaderWrapper
......@@ -163,7 +113,7 @@ const EvaluateOrder: React.FC = () => {
icon={<FormOutlined />}
disabled={!orderInfo}
loading={submitLoading}
onClick={() => formActions.submit()}
onClick={handleRelease}
>
{intl.formatMessage({ id: 'member.memberEvaluate.createEvaluate.index.release' })}
</Button>
......@@ -186,43 +136,17 @@ const EvaluateOrder: React.FC = () => {
</>
}
>
<MellowCard
bodyStyle={{
paddingBottom: 0,
}}
>
<NiceForm
actions={formActions}
previewPlaceholder=" "
initialValues={{
<EvaluationForm
value={{
comments: orderInfo ? orderInfo.unevaluatedList : [],
}}
expressionScope={{
beforeUpload,
}}
ref={EvaluationFormRef}
onSubmit={handleSubmit}
components={{
EvaluationList,
EtProductInfo,
UploadTip,
}}
effects={($, actions) => {
createEffects($, actions);
onFormInputChange$().subscribe(() => {
if (!unsaved) {
setUnsaved(true);
}
});
}}
schema={evaluateSchema}
ediabled
/>
</MellowCard>
</PageHeaderWrapper>
<Prompt when={unsaved} message="您还有未保存的内容，是否确定要离开？" />
</Spin>
);
};
export default EvaluateOrder;
export default PurchaserEvaluateOrder;
src/pages/transaction/saleOrder/addLogisticsOrder/index.tsx
View file @ d3be51ee
......@@ -19,11 +19,10 @@ import { useFormDetail } from '@/formSchema/effects/useFormDetail'
import ProductModalTable from './components/productModalTable'
import { getOrderVendorCreateLogisticsDetail, getOrderVendorSellDeliveryDetail } from '@/services/OrderNewV2Api'
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect'
import { getLogisticsCompanyPage, getLogisticsShipperAddressPage } from '@/services/LogisticsV2Api'
import { getLogisticsCompanyPage, getLogisticsShipperAddressPage, postLogisticsOrderWaitSubmitAdd } from '@/services/LogisticsV2Api'
import addressText from '../../components/addressText'
import { getAuth } from '@/utils/auth'
import { getSettleAccountsPlatformConfigGetSettlementWay } from '@/services/SettleV2Api'
import { postLogisticsOrderWaitSubmitAdd } from '@/services/LogiticsV2Api'
const addSchemaAction = createFormActions()
......
src/pages/transaction/supplierEvaluation/received/detail/index.tsx
View file @ d3be51ee
import React, { useState, useEffect } from 'react';
/**
* @Description 供应会员-收到的评价-详情组件
*/
import React, { useState, useEffect, useRef } from 'react';
import {
PageHeader,
Descriptions,
Spin,
message,
Upload,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getIntl, history } from 'umi';
import { createFormActions } from '@formily/antd';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberCommentSupplyReceiveTradeHistoryGet } from '@/services/MemberV2Api';
import { normalizeFiledata, FileData } from '@/utils';
import MellowCard from '@/components/MellowCard';
import NiceForm from '@/components/NiceForm';
import createSchema from '../../../purchaserEvaluation/common/schemas/receivedSchema';
import { createEffects } from '../../../purchaserEvaluation/common/effects';
import EvaluationList from '../../../purchaserEvaluation/components/EvaluationList';
import EtProductInfo from '../../../purchaserEvaluation/components/EtProductInfo';
import { normalizeFiledata } from '@/utils';
import { NormalizedEvaluateItem } from '../../../purchaserEvaluation/utils';
import EvaluationForm from '../../../purchaserEvaluation/components/EvaluationForm';
const formActions = createFormActions();
const intl = getIntl();
interface Unevaluated {
good: {
pic: string,
productName: string,
price: number,
purchaseCount: number,
unit: string,
totalPrice: number,
};
star: number;
comment: string;
picture: FileData[];
smile: number;
replyContent: string,
replyTime: string,
};
interface OrderInfo {
orderNo: string,
......@@ -44,10 +23,10 @@ interface OrderInfo {
memberName: string,
};
const ReceivedDetail: React.FC = () => {
const SupplierReceivedDetail: React.FC = () => {
const { id } = usePageStatus();
const [orderInfo, setOrderInfo] = useState<OrderInfo>(null);
const [evaluationInfo, setEvaluationInfo] = useState<Unevaluated>(null);
const [evaluationInfo, setEvaluationInfo] = useState<NormalizedEvaluateItem[]>([]);
const [evaluationInfoLoading, setEvaluationInfoLoading] = useState(false);
const getEvaluationInfo = () => {
......@@ -61,13 +40,14 @@ const ReceivedDetail: React.FC = () => {
if (res.code === 1000) {
const { product } = res.data;
setEvaluationInfo({
setEvaluationInfo([
{
good: {
pic: res.data.productImgUrl,
productName: res.data.product,
unit: res.data.unit,
price: res.data.price,
purchaseCount: res.data.purchaseCount,
unit: res.data.unit,
totalPrice: res.data.totalPrice,
},
star: res.data.star,
......@@ -76,7 +56,8 @@ const ReceivedDetail: React.FC = () => {
smile: res.data.star,
replyContent: res.data.replyContent,
replyTime: res.data.replyTime as string,
});
}
]);
setOrderInfo({
orderNo: res.data.orderNo,
dealTime: res.data.dealTime as string,
......@@ -94,34 +75,6 @@ const ReceivedDetail: React.FC = () => {
getEvaluationInfo();
}, []);
const handleSubmit = values => {
};
const beforeUpload = file => {
if (file.size / 1024 / 1024 > 10) {
message.warning(intl.formatMessage({id: 'supplierEvaluation.tupiandaxiaochaoguo10M'}));
return Upload.LIST_IGNORE;
}
return Promise.resolve();
};
const UploadTip = (
<span
style={{
marginTop: 14,
lineHeight: '24px',
color: '#909399',
fontWeight: 400,
wordBreak: 'break-all',
position: 'relative',
top: '34px',
}}
>
{intl.formatMessage({id: 'supplierEvaluation.zhichiJPGPNGJPEG'})} <br />{intl.formatMessage({id: 'supplierEvaluation.meizhangzuidabuchaoguo'})} <br />{intl.formatMessage({id: 'supplierEvaluation.zuidashuliangxianzhi4'})}
</span>
);
return (
<Spin spinning={evaluationInfoLoading}>
<PageHeaderWrapper
......@@ -156,36 +109,16 @@ const ReceivedDetail: React.FC = () => {
</>
}
>
<MellowCard
bodyStyle={{
paddingBottom: 0,
}}
>
<NiceForm
actions={formActions}
previewPlaceholder=" "
initialValues={{
comments: [evaluationInfo],
}}
editable={false}
expressionScope={{
UploadTip: null,
beforeUpload,
}}
onSubmit={handleSubmit}
components={{
EvaluationList,
EtProductInfo,
}}
effects={($, actions) => {
createEffects($, actions);
<EvaluationForm
value={{
comments: evaluationInfo,
}}
schema={createSchema()}
ediabled={false}
interpretation
/>
</MellowCard>
</PageHeaderWrapper>
</Spin>
);
};
export default ReceivedDetail;
export default SupplierReceivedDetail;
src/pages/transaction/supplierEvaluation/sent/components/DetailInfo/index.tsx
View file @ d3be51ee
import React, { useState, useEffect } from 'react';
/**
* @Description 供应会员-发出的评价-详情组件
*/
import React, { useState, useEffect, useRef } from 'react';
import {
PageHeader,
Descriptions,
Spin,
Button,
message,
Upload,
} from 'antd';
import { FormOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getIntl, history } from 'umi';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { getMemberCommentSupplySendTradeHistoryGet, postMemberCommentSupplySendTradeHistoryUpdate } from '@/services/MemberV2Api';
import { normalizeFiledata, FileData } from '@/utils';
import MellowCard from '@/components/MellowCard';
import NiceForm from '@/components/NiceForm';
import { evaluateSchema } from '../../../../purchaserEvaluation/common/schemas/evaluateSchema';
import { createEffects } from '../../../../purchaserEvaluation/common/effects';
import EvaluationList from '../../../../purchaserEvaluation/components/EvaluationList';
import EtProductInfo from '../../../../purchaserEvaluation/components/EtProductInfo';
import { normalizeFiledata } from '@/utils';
import { NormalizedEvaluateItem } from '../../../../purchaserEvaluation/utils';
import EvaluationForm, { EvaluationFormRefHandle, EvaluationFormValue } from '../../../../purchaserEvaluation/components/EvaluationForm';
const formActions = createFormActions();
const {
onFormInit$,
} = FormEffectHooks;
const intl = getIntl();
interface Unevaluated {
good: {
pic: string,
productName: string,
price: number,
purchaseCount: number,
unit: string,
totalPrice: number,
};
star: number;
comment: string;
picture: FileData[];
smile: number;
};
interface OrderInfo {
orderNo: string,
dealTime: string,
memberName: string,
};
interface DetailInfoProps {
orderId: string;
// 评论id
interface SupplierEvaluationInfoProps {
/**
* 评论id
*/
id: string;
// 是否可编辑的
isEdit?: boolean;
/**
* 是否可编辑的
*/
ediabled?: boolean;
};
const DetailInfo: React.FC<DetailInfoProps> = ({
const SupplierEvaluationInfo: React.FC<SupplierEvaluationInfoProps> = ({
id,
isEdit = false,
ediabled = false,
}) => {
const [orderInfo, setOrderInfo] = useState<OrderInfo>(null);
const [evaluationInfo, setEvaluationInfo] = useState<Unevaluated>(null);
const [evaluationInfo, setEvaluationInfo] = useState<NormalizedEvaluateItem[]>([]);
const [evaluationInfoLoading, setEvaluationInfoLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const EvaluationFormRef = useRef<EvaluationFormRefHandle | null>(null);
const getEvaluationInfo = () => {
if (!id) {
return;
......@@ -72,20 +54,22 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
id,
}).then(res => {
if (res.code === 1000) {
setEvaluationInfo({
setEvaluationInfo([
{
good: {
pic: res.data.productImgUrl,
productName: res.data.product,
unit: res.data.unit,
price: res.data.price,
purchaseCount: res.data.purchaseCount,
unit: res.data.unit,
totalPrice: res.data.totalPrice,
},
star: res.data.star,
comment: res.data.comment,
picture: res.data.pics ? res.data.pics.map(item => normalizeFiledata(item)) : [],
smile: res.data.star,
});
}
]);
setOrderInfo({
orderNo: res.data.orderNo,
dealTime: res.data.dealTime as string,
......@@ -103,9 +87,13 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
getEvaluationInfo();
}, []);
const handleSubmit = values => {
const handleRelease = () => {
EvaluationFormRef?.current.submit();
};
const handleSubmit = (value: EvaluationFormValue) => {
setSubmitLoading(true);
const payload = values.comments.map(item => {
const payload = value.comments.map(item => {
const {
comment,
picture,
......@@ -113,7 +101,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
} = item;
return {
id,
id: +id,
star,
comment,
pics: picture.map(item => item.status === 'done' && item.url).filter(Boolean),
......@@ -139,29 +127,6 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
});
};
const beforeUpload = file => {
if (file.size / 1024 / 1024 > 10) {
message.warning(intl.formatMessage({id: 'supplierEvaluation.tupiandaxiaochaoguo10M'}));
return Upload.LIST_IGNORE;
}
return Promise.resolve();
};
const UploadTip = () => (
<div
style={{
marginTop: 14,
lineHeight: '24px',
color: '#909399',
fontWeight: 400,
wordBreak: 'break-all',
position: 'relative',
}}
>
{intl.formatMessage({id: 'supplierEvaluation.zhichiJPGPNGJPEG'})} <br />{intl.formatMessage({id: 'supplierEvaluation.meizhangzuidabuchaoguo'})} <br />{intl.formatMessage({id: 'supplierEvaluation.zuidashuliangxianzhi4'})}
</div>
);
return (
<Spin spinning={evaluationInfoLoading}>
<PageHeaderWrapper
......@@ -177,13 +142,13 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
extra={(
<>
{
isEdit && (
ediabled && (
<Button
type="primary"
icon={<FormOutlined />}
disabled={!id}
loading={submitLoading}
onClick={() => formActions.submit()}
onClick={handleRelease}
>
{intl.formatMessage({id: 'supplierEvaluation.xiugai'})}
</Button>
......@@ -210,57 +175,17 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
</>
}
>
<MellowCard
bodyStyle={{
paddingBottom: 0,
}}
>
<NiceForm
actions={formActions}
previewPlaceholder=" "
initialValues={{
comments: [evaluationInfo],
}}
editable={isEdit}
expressionScope={{
beforeUpload,
}}
components={{
EvaluationList,
EtProductInfo,
UploadTip,
<EvaluationForm
value={{
comments: evaluationInfo,
}}
ref={EvaluationFormRef}
onSubmit={handleSubmit}
effects={($, actions) => {
createEffects($, actions);
onFormInit$().subscribe(() => {
// 控制不同样式
if (!isEdit) {
// actions.setFieldState('comments.*.MEGA_LADYOUT_1', (fieldState) => {
// fieldState.props['x-component-props'] = {
// ...(fieldState.props['x-component-props'] || {}),
// labelCol: 6,
// };
// });
actions.setFieldState('comments.*.UPLOAD_TIP', (fieldState) => {
fieldState.visible = false;
});
// actions.setFieldState('comments.*.picture', (fieldState) => {
// fieldState.props['x-mega-props'] = {
// ...(fieldState.props['x-mega-props'] || {}),
// span: 3,
// };
// });
}
});
}}
schema={evaluateSchema}
ediabled={ediabled}
/>
</MellowCard>
</PageHeaderWrapper>
</Spin>
);
};
export default DetailInfo;
export default SupplierEvaluationInfo;
src/pages/transaction/supplierEvaluation/sent/detail.tsx
View file @ d3be51ee
/**
* @Description 供应会员-发出的评价-详情
*/
import React from 'react';
import { usePageStatus } from '@/hooks/usePageStatus';
import DetailInfo from './components/DetailInfo';
const SentDetail: React.FC = () => {
const { orderId, id } = usePageStatus();
const SupplierEvaluationDetail: React.FC = () => {
const { id } = usePageStatus();
return (
<DetailInfo
orderId={orderId}
id={id}
/>
);
};
export default SentDetail;
\ No newline at end of file
export default SupplierEvaluationDetail;
\ No newline at end of file
src/pages/transaction/supplierEvaluation/sent/edit.tsx
View file @ d3be51ee
/**
* @Description 供应会员-发出的评价-修改详情
*/
import React from 'react';
import { usePageStatus } from '@/hooks/usePageStatus';
import DetailInfo from './components/DetailInfo';
const SentEdit: React.FC = () => {
const { orderId, id } = usePageStatus();
const SupplierEvaluationEdit: React.FC = () => {
const { id } = usePageStatus();
return (
<DetailInfo
orderId={orderId}
id={id}
isEdit
ediabled
/>
);
};
export default SentEdit;
\ No newline at end of file
export default SupplierEvaluationEdit;
\ No newline at end of file
src/pages/transaction/supplierEvaluation/unevaluated/evaluate/index.tsx
View file @ d3be51ee
import React, { useState, useEffect } from 'react';
/**
* @Description 供应会员-待评价订单-评价
*/
import React, { useState, useEffect, useRef } from 'react';
import {
PageHeader,
Descriptions,
Spin,
Button,
message,
Upload,
} from 'antd';
import { FormOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getIntl, history, Prompt } from 'umi';
import moment from 'moment';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { getIntl, history } from 'umi';
import { usePageStatus } from '@/hooks/usePageStatus';
import { getMemberCommentSupplyOrderTradeDetail, GetMemberCommentSupplyOrderTradeDetailResponse, postMemberCommentSupplyOrderTradeSubmit } from '@/services/MemberV2Api';
import MellowCard from '@/components/MellowCard';
import NiceForm from '@/components/NiceForm';
import { normalizeUnevaluatedList } from '../../../purchaserEvaluation/utils';
import { evaluateSchema } from '../../../purchaserEvaluation/common/schemas/evaluateSchema';
import { createEffects } from '../../../purchaserEvaluation/common/effects';
import EvaluationList from '../../../purchaserEvaluation/components/EvaluationList';
import EtProductInfo from '../../../purchaserEvaluation/components/EtProductInfo';
// import EvaluationForm from '../../../purchaserEvaluation/components/EvaluationForm';
import { normalizeUnevaluatedList, NormalizedEvaluateItem } from '../../../purchaserEvaluation/utils';
import EvaluationForm, { EvaluationFormRefHandle, EvaluationFormValue } from '../../../purchaserEvaluation/components/EvaluationForm';
const formActions = createFormActions();
const {
onFormInputChange$,
} = FormEffectHooks;
const intl = getIntl();
interface Unevaluated {
good: {
pic: string,
name: string,
price: string,
desc: string,
};
star: number;
comment: string;
picture: string[];
smile: number;
};
interface OrderInfo extends GetMemberCommentSupplyOrderTradeDetailResponse {
unevaluatedList: Unevaluated[];
unevaluatedList: NormalizedEvaluateItem[];
};
const EvaluateOrder: React.FC = () => {
const SupplierEvaluateOrder: React.FC = () => {
const { id } = usePageStatus();
const [orderInfo, setOrderInfo] = useState<OrderInfo>(null);
const [infoLoading, setInfoLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const [unsaved, setUnsaved] = useState(false);
const EvaluationFormRef = useRef<EvaluationFormRefHandle | null>(null);
const getOrderInfo = () => {
if (!id) {
......@@ -67,13 +44,6 @@ const EvaluateOrder: React.FC = () => {
...res.data,
unevaluatedList,
});
unevaluatedList.forEach((item, index) => {
if (item.commentStatus) {
formActions.setFieldState(`comments.${index}.*`, (fieldState) => {
fieldState.editable = false;
});
}
});
}
}).finally(() => {
setInfoLoading(false);
......@@ -84,9 +54,13 @@ const EvaluateOrder: React.FC = () => {
getOrderInfo();
}, []);
const handleSubmit = values => {
const handleRelease = () => {
EvaluationFormRef?.current.submit();
};
const handleSubmit = (value: EvaluationFormValue) => {
setSubmitLoading(true);
const payload = values.comments.map(item => {
const payload = value.comments.map(item => {
const {
comment,
good,
......@@ -108,7 +82,6 @@ const EvaluateOrder: React.FC = () => {
commentSubmitDetailList: payload,
}).then(res => {
if (res.code === 1000) {
setUnsaved(false);
setTimeout(() => {
history.goBack();
}, 800);
......@@ -120,29 +93,6 @@ const EvaluateOrder: React.FC = () => {
});
};
const beforeUpload = file => {
if (file.size / 1024 / 1024 > 10) {
message.warning(intl.formatMessage({id: 'supplierEvaluation.tupiandaxiaochaoguo10M'}));
return Upload.LIST_IGNORE;
}
return Promise.resolve();
};
const UploadTip = () => (
<div
style={{
marginTop: 14,
lineHeight: '24px',
color: '#909399',
fontWeight: 400,
wordBreak: 'break-all',
position: 'relative',
}}
>
{intl.formatMessage({id: 'supplierEvaluation.zhichiJPGPNGJPEG'})} <br />{intl.formatMessage({id: 'supplierEvaluation.meizhangzuidabuchaoguo'})} <br />{intl.formatMessage({id: 'supplierEvaluation.zuidashuliangxianzhi4'})}
</div>
);
return (
<Spin spinning={infoLoading}>
<PageHeaderWrapper
......@@ -162,7 +112,7 @@ const EvaluateOrder: React.FC = () => {
icon={<FormOutlined />}
disabled={!orderInfo}
loading={submitLoading}
onClick={() => formActions.submit()}
onClick={handleRelease}
>
{intl.formatMessage({id: 'supplierEvaluation.fabu'})}
</Button>
......@@ -185,44 +135,17 @@ const EvaluateOrder: React.FC = () => {
</>
}
>
{/* <EvaluationForm ediabled /> */}
<MellowCard
bodyStyle={{
paddingBottom: 0,
}}
>
<NiceForm
actions={formActions}
previewPlaceholder=" "
initialValues={{
<EvaluationForm
value={{
comments: orderInfo ? orderInfo.unevaluatedList : [],
}}
expressionScope={{
beforeUpload,
}}
ref={EvaluationFormRef}
onSubmit={handleSubmit}
components={{
EvaluationList,
EtProductInfo,
UploadTip,
}}
effects={($, actions) => {
createEffects($, actions);
onFormInputChange$().subscribe(() => {
if (!unsaved) {
setUnsaved(true);
}
});
}}
schema={evaluateSchema}
ediabled
/>
</MellowCard>
</PageHeaderWrapper>
<Prompt when={unsaved} message={intl.formatMessage({id: 'supplierEvaluation.ninhaiyouweibaocunde'})} />
</Spin>
);
};
export default EvaluateOrder;
export default SupplierEvaluateOrder;
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