Skip to content

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

完善静态页面

parent 6c478b5f
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 75 deletions
config/routes/tranactionRoute.ts
View file @ 26515a50
......@@ -3,7 +3,7 @@
* @Date: 2020-07-31 19:56:22
* @LastEditors: XieZhiXiong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-23 09:35:27
* @LastEditTime: 2020-09-23 17:02:26
*/
const TranactionRoute = {
......@@ -350,7 +350,7 @@ const TranactionRoute = {
{
path: '/memberCenter/tranactionAbility/supplierEvaluation/unevaluated/evaluate',
name: 'evaluate',
component: '@/pages/transaction/supplierEvaluation/unevaluated/evaluate',
component: '@/pages/transaction/supplierEvaluation/unevaluated/evaluate/index',
hideInMenu: true,
},
{
......
src/components/NiceForm/public/index.tsx
View file @ 26515a50
......@@ -64,4 +64,33 @@ registerVirtualBox('controller-group', (_props) => {
{children}
</Space>
)
})
// 左右两列布局
registerVirtualBox('LeftRightLayout', (_props) => {
console.log('_props', _props)
const { children, props } = _props;
const leftItems = children.filter(
child => child.props.schema['x-component-props'] && child.props.schema['x-component-props'].position === 'left'
);
const rightItems = children.filter(
child => child.props.schema['x-component-props'] && child.props.schema['x-component-props'].position === 'right'
);
const wrapProps = props['x-component-props'] ? props['x-component-props'].wrapProps : {};
const leftProps = props['x-component-props'] ? props['x-component-props'].leftProps : {};
const rightProps = props['x-component-props'] ? props['x-component-props'].rightProps : {};
return (
<Row
align="middle"
{...wrapProps}
>
{leftItems.map((item, index) => (
<Col span={18} {...leftProps} key={index}>{item}</Col>
))}
{rightItems.map((item, index) => (
<Col span={6} {...rightProps} key={index}>{item}</Col>
))}
</Row>
)
})
\ No newline at end of file
src/pages/transaction/supplierEvaluation/components/EvaluationList/index.tsx
View file @ 26515a50
......@@ -135,7 +135,7 @@ const EvaluationList = props => {
return (
<RowStyleLayout {...componentProps} key={index}>
<Row align="middle">
<Col span={10}>
<Col span={8}>
<div className="goodInfo">
<div className="goodInfo-left">
<img src={item.good ? item.good.pic : ''} />
......@@ -147,16 +147,11 @@ const EvaluationList = props => {
</div>
</div>
</Col>
<Col span={10}>
<Col span={16}>
<div className="main">
<SchemaField path={FormPath.parse(path).concat(index)} />
</div>
</Col>
<Col span={4}>
<div style={{ textAlign: 'right' }}>
<SmilingFace value={2} />
</div>
</Col>
</Row>
</RowStyleLayout>
)
......
src/pages/transaction/supplierEvaluation/unevaluated/evaluate/effects/index.tsx 0 → 100644
View file @ 26515a50
import { useBusinessEffects } from './useBusinessEffects';
export const createEffects = (context, actions) => {
useBusinessEffects(context, actions);
};
\ No newline at end of file
src/pages/transaction/supplierEvaluation/unevaluated/evaluate/effects/useBusinessEffects.tsx 0 → 100644
View file @ 26515a50
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 => {
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/supplierEvaluation/unevaluated/evaluate.tsx → src/pages/transaction/supplierEvaluation/unevaluated/evaluate/index.tsx
View file @ 26515a50
......@@ -5,17 +5,19 @@ import {
Card,
Spin,
Button,
message,
} from 'antd';
import { FormOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { history } from 'umi';
import { createFormActions } from '@formily/antd';
import { Rating } from '@formily/antd-components';
import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
import { normalizeFiledata } from '@/utils';
import AvatarWrap from '@/components/AvatarWrap';
import NiceForm from '@/components/NiceForm';
import { evaluateSchema } from './schema';
import EvaluationList from '../components/EvaluationList';
import styles from './evaluate.less';
import { createEffects } from './effects';
import EvaluationList from '../../components/EvaluationList';
import styles from './index.less';
const formActions = createFormActions();
......@@ -25,6 +27,28 @@ const EvaluateOrder: React.FC = () => {
console.log('values', values);
};
const beforeUpload = file => {
if (file.size / 1024 < 10) {
message.warning('图片大小超过10M');
return Promise.reject();
}
};
const UploadTip = (
<span
style={{
lineHeight: '24px',
color: '#909399',
fontWeight: 400,
wordBreak: 'break-all',
position: 'relative',
top: '34px',
}}
>
支持JPG/PNG/JPEG <br />每张最大不超过 10M，尺寸不限 <br />最大数量限制 4张
</span>
);
return (
<PageHeaderWrapper
title={
......@@ -45,7 +69,7 @@ const EvaluateOrder: React.FC = () => {
<Button
type="primary"
icon={<FormOutlined />}
onClick={() => {}}
onClick={() => formActions.submit()}
>
发布
</Button>
......@@ -68,13 +92,16 @@ const EvaluateOrder: React.FC = () => {
>
<NiceForm
actions={formActions}
expressionScope={{
UploadTip,
beforeUpload,
}}
onSubmit={handleSubmit}
components={{
EvaluationList,
Rating,
}}
effects={($, actions) => {
createEffects($, actions);
}}
schema={evaluateSchema}
/>
......
src/pages/transaction/supplierEvaluation/unevaluated/evaluate/schema/index.ts 0 → 100644
View file @ 26515a50
/*
* @Author: XieZhiXiong
* @Date: 2020-09-23 17:00:24
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-09-23 18:06:56
* @Description:
*/
import { ISchema } from '@formily/antd';
import { UPLOAD_TYPE } from '@/constants';
export const evaluateSchema: ISchema = {
type: 'object',
properties: {
comments: {
type: 'array',
'x-component': 'EvaluationList',
default: [
{
name: '杰尼',
age: 24,
small: 1,
star2: 0,
},
],
items: {
type: 'object',
properties: {
LEFT_RIGHT: {
type: 'object',
'x-component': 'LeftRightLayout',
'x-component-props': {
rightProps: {
span: 2,
offset: 4,
},
},
properties: {
MEGA_LADYOUT: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
labelCol: 6,
labelAlign: 'left',
position: 'left',
},
properties: {
star: {
title: '满意程度',
required: true,
'x-component': 'Rating',
'x-component-props': {
allowHalf: false,
},
},
comment: {
type: 'string',
title: '评价',
required: true,
'x-component': 'TextArea',
'x-component-props': {
rows: 4,
},
},
picture: {
type: 'string',
title: '图片',
required: true,
'x-component': 'Upload',
'x-component-props': {
listType: 'card',
action: '/api/file/upload/prefix',
data: {
fileType: UPLOAD_TYPE,
prefix: '/test/',
},
beforeUpload: '{{beforeUpload}}',
},
'x-mega-props': {
addonAfter: '{{UploadTip}}',
},
},
},
},
smile: {
type: 'object',
default: 1,
'x-component': 'SmilingFace',
'x-component-props': {
position: 'right',
},
},
},
},
},
},
},
},
};
\ No newline at end of file
src/pages/transaction/supplierEvaluation/unevaluated/schema/index.tsx
View file @ 26515a50
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { UPLOAD_TYPE } from '@/constants';
export const listSearchSchema: ISchema = {
type: 'object',
......@@ -85,62 +86,4 @@ export const listSearchSchema: ISchema = {
},
},
},
};
export const evaluateSchema: ISchema = {
type: 'object',
properties: {
comments: {
type: 'array',
'x-component': 'EvaluationList',
default: [
{
name: '杰尼',
age: 24,
small: 1,
},
],
items: {
type: 'object',
properties: {
MEGA_LADYOUT: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
labelCol: 6,
labelAlign: 'left',
},
properties: {
star: {
title: '满意程度',
required: true,
'x-component': 'Rating',
'x-component-props': {
allowHalf: false,
},
},
comment: {
type: 'string',
title: '评价',
required: true,
'x-component': 'TextArea',
'x-component-props': {
rows: 4,
},
},
picture: {
type: 'string',
title: '图片',
required: true,
'x-component': 'CustomUpload',
'x-component-props': {
},
},
},
},
},
},
},
},
};
\ No newline at end of file
src/utils/index.tsx
View file @ 26515a50
......@@ -427,6 +427,23 @@ export const padRequiredMessage = (originSchema: ISchema) => {
return originSchema
}
// 初始化 Upload 数据
export const normalizeFiledata = url => {
url = url || '';
if (!url) {
return;
}
const splited = url.split('/');
const fileName = splited && splited.length ? splited[splited.length - 1] : '';
return {
uid: Math.random().toFixed(16).slice(2, 10),
name: fileName,
status: 'done',
url,
};
};
export default {
isArray,
isObject,
......
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