Skip to content

J
jinfa-platform
Commit 39fbd622 authored by Bill's avatar Bill
Browse files
Options

fix: 修改结算开票样式bug

parent bf4237fe
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 461 deletions
src/pages/balance/components/InvoiceCreate/InvoiceArray.tsx deleted 100644 → 0
View file @ bf4237fe
/*
* @Author: Bill
* @Date: 2020-10-28 13:46:19
* @Description: 开票管理， 发票自增
*/
import React from 'react';
import { useIntl, getIntl } from 'umi'
import { toArr, isFn, FormPath } from '@formily/shared'
import { Button, Input } from 'antd'
import styled from 'styled-components'
import {
SchemaForm,
SchemaField,
SchemaMarkupField as Field
} from '@formily/antd'
import { ArrayList } from '@formily/react-shared-components';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons'
const ArrayComponents = {
CircleButton: props => <Button {...props} />,
TextButton: props => <Button {...props} />,
AdditionIcon: () => <div>+</div>,
RemoveIcon: () => <div>-</div>,
MoveDownIcon: () => <div>{getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceArray.arrayComponents.moveDownIcon' })}</div>,
MoveUpIcon: () => <div>{getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceArray.arrayComponents.moveUpIcon' })}</div>
}
const RowStyleLayout = styled(props => <div {...props} />)`
.ant-btn {
margin-right: 16px;
}
.ant-form-item {
display: inline-flex;
margin-right: 16px;
margin-bottom: 10px;
}
> .ant-form-item {
margin-bottom: 0;
margin-right: 0;
}
`
const InvoiceArray = (props) => {
const { value, schema, className, editable, path, mutators } = props
const {
renderAddition,
renderRemove,
renderMoveDown,
renderMoveUp,
renderEmpty,
renderExtraOperations,
...componentProps
} = schema.getExtendsComponentProps() || {}
const intl = useIntl();
const onAdd = () => {
const items = Array.isArray(schema.items)
? schema.items[schema.items.length - 1]
: schema.items
mutators.push(items.getEmptyValue())
}
const length = toArr(value).length;
return (
<ArrayList
value={value}
minItems={schema.minItems}
maxItems={schema.maxItems}
editable={editable}
components={ArrayComponents}
renders={{
renderAddition,
renderRemove,
renderMoveDown,
renderMoveUp,
renderEmpty // 允许开发者覆盖默认
}}
>
{toArr(value).map((item, index) => {
return (
<RowStyleLayout {...componentProps} key={index}>
<div style={{ display: 'flex', position: 'relative' }}>
<SchemaField path={FormPath.parse(path).concat(index)} />
{
length - 1 === index
? <Button onClick={onAdd} style={{ marginLeft: '-16px' }}><PlusOutlined width={44} /></Button>
: null
}
<Button
style={{ marginLeft: length - 1 === index ? '0' : '-16px' }}
onClick={() => mutators.remove(index)}
>
<MinusOutlined width={44} />
</Button>
</div>
</RowStyleLayout>
)
})}
<ArrayList.Empty>
{({ children }) => {
return (
<div className="array-cards-addition" onClick={onAdd}>
{/* {children} */}
<Button>{intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceArray.button' })}</Button>
</div>
)
}}
</ArrayList.Empty>
<ArrayList.Addition>
{({ children, isEmpty }) => {
if (!isEmpty) {
return null
}
}}
</ArrayList.Addition>
</ArrayList>
)
}
InvoiceArray.isFieldComponent = true;
export default InvoiceArray
src/pages/balance/components/InvoiceCreate/InvoiceDrawer.tsx deleted 100644 → 0
View file @ bf4237fe
/*
* @Author: Bill
* @Date: 2020-10-28 14:11:55
* @Description: 开票详情 drawer
*/
import React, { useEffect, useState } from 'react';
import { useIntl, getIntl } from 'umi'
import { Drawer, Input, DatePicker, message } from 'antd';
import InvoiceInfo from './InvoiceInfo';
import {
SchemaForm,
SchemaMarkupField as Field
} from '@formily/antd'
import InvoiceArray from './InvoiceArray';
import { Button, Table } from 'antd';
import { createFormActions, FormMegaLayout, FormSlot, createVirtualBox } from '@formily/antd';
import { InvoiceInfoProps, ProveListProps } from '../../common/type';
import { Moment } from 'moment';
import styles from './index.less';
import {
getSettleAccountsMemberSettlementGetInvoiceProveDetail,
getSettleAccountsMemberSettlementGetReturnInvoiceProveDetail,
postSettleAccountsMemberSettlementInvoiceByReturn,
postSettleAccountsMemberSettlementInvoiceProve
} from '@/services/SettleV2Api';
const formActions = createFormActions();
interface Iprops {
visible: boolean,
title: string,
width: number,
type: number, // 0 -> 开票， 1-> 查看
id: string, // 开票管理id,
/** 1-生产通知单,2-物流单,3-订单,4-积分订单,5-退货申请单 */
settlementOrderType: 1 | 2 | 3 | 4 | 5,
// payRoleId: number,
// payMemberId: number,
onCancel: () => void,
refresh: () => void
}
interface SubmitProps {
[key: string]: {
number: string,
remark: string,
invoiceDate: Moment
}[]
}
enum TypeEnum {
edit = 0,
view = 1
}
const columns = [
{ title: getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.columns.number' }), dataIndex: 'number' },
{ title: getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.columns.invoiceDate' }), dataIndex: 'invoiceDate' },
{ title: getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.columns.remark' }), dataIndex: 'remark' },
]
const InvoiceComponent = createVirtualBox('InvoiceComponent', ({ infos }) => {
return (
<div >
<InvoiceInfo infos={infos} />
</div>
)
})
const TabelHeader = createVirtualBox('TabelHeader', ({ infos }) => {
return (
<div >
<div className={styles.formHeader}>
<div className={styles.invoiceNum}>{getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.tabelHeader.text.1' })}<span style={{ color: "#ff4d4f" }}>*</span></div>
<div className={styles.invoiceDate}>{getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.tabelHeader.text.2' })}<span style={{ color: "#ff4d4f" }}>*</span></div>
<div>{getIntl().formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.tabelHeader.text.3' })}</div>
</div>
</div>
)
})
const InvoiceDrawer: React.FC<Iprops> = (props) => {
const { visible, title, onCancel, width, type, id, settlementOrderType } = props;
const intl = useIntl();
const [invoiceInfo, setInvoiceInfo] = useState<any[]>([]);
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
const isEdit = type === TypeEnum.edit;
const handleSubmit = () => {
// // 如果当前type==0为开票， 1为查看，那么直接关闭
if (type === TypeEnum.edit) {
formActions.submit()
} else {
// 查看类型的话，按确认直接关掉窗口
onCancel();
}
}
const handleForm = (value: SubmitProps) => {
console.log(value);
const keys = Object.keys(value);
if (keys.length === 0) {
message.error({
content: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.error' })
})
return;
}
let res = {}
keys.map((item) => {
const array = value[item];
res[item] = array.map((_row) => {
const { number, remark, invoiceDate } = _row;
return { number: number, remark: remark, invoiceDate: invoiceDate.format('YYYY-MM-DD') }
})
})
if (settlementOrderType === 5) {
console.log(value);
const postDataList = {
receiptInvoiceId: parseInt(id),
addList: invoiceInfo.map((_item, key) => {
const { kindName, typeName, ...rest } = _item;
return {
...rest,
kind: kindName == intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.kindName' }) ? 1 : 2,
type: typeName == intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.typeName' }) ? 1 : 2,
proveList: res[`list-${key}`]
}
})
}
console.log(postDataList);
postSettleAccountsMemberSettlementInvoiceByReturn(postDataList)
.then(({ code, data }) => {
if (code === 1000) {
setSubmitLoading(false)
props.refresh();
onCancel();
}
})
return;
}
const { kindName, typeName, ...rest } = invoiceInfo[0]
const postData = {
...rest,
proveList: res[`list-0`],
kind: kindName == intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.kindName' }) ? 1 : 2,
type: typeName == intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.typeName' }) ? 1 : 2,
receiptInvoiceId: parseInt(id)
}
setSubmitLoading(true)
console.log(postData);
// /settle/accounts/member/settlement/invoiceProve
postSettleAccountsMemberSettlementInvoiceProve(postData)
.then((data) => {
if (data.code === 1000) {
setSubmitLoading(false)
props.refresh();
onCancel();
}
})
}
useEffect(() => {
if (props.visible) {
console.log(settlementOrderType)
if (settlementOrderType === 5) {
getSettleAccountsMemberSettlementGetReturnInvoiceProveDetail({ id: id })
.then(({ code, data }) => {
if (code === 1000) {
setInvoiceInfo(data)
}
})
return;
}
getSettleAccountsMemberSettlementGetInvoiceProveDetail({ id: id })
.then((data) => {
if (data.code === 1000) {
setInvoiceInfo([data.data])
}
})
}
}, [id, visible, settlementOrderType])
// const tableList = invoiceInfo?.proveList?.map((item, key) => ({...item, id: key}));
const renderFooter = () => {
if (type === TypeEnum.view) {
return null
}
return (
<div style={{ textAlign: 'right' }}>
<Button onClick={onCancel} style={{ marginRight: 8 }}>
{intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.renderFooter.button.1' })}
</Button>
<Button onClick={handleSubmit} type="primary">
{intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.renderFooter.button.2' })}
</Button>
</div>
)
}
const renderOnly = () => {
return (
<SchemaForm onSubmit={handleForm} actions={formActions} components={{ InvoiceArray, Input, DatePicker }} >
{
invoiceInfo.map((item, unique) => {
const infos = item;
const tableList = item?.proveList?.map((item, key) => ({ ...item, id: key }));
return (
<div key={unique}>
<InvoiceComponent infos={infos} />
{
isEdit
? (
<>
<TabelHeader />
<Field
name={`list-${unique}`}
type="array"
x-component="InvoiceArray"
>
<Field type="object">
<Field name="number" x-component="Input" x-rules={[{ required: true, message: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.field.number' }) }]} />
<Field name="invoiceDate" x-component-props={{
getPopupContainer: (triggernode) => triggernode.parentElement
}} x-component="DatePicker" x-rules={[{ required: true, message: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceDrawer.field.invoiceDate' }) }]} />
<Field name="remark" x-component="Input" x-component-props={{ style: { width: '240px' } }} />
</Field>
</Field>
</>
)
: (
<Table
columns={columns}
dataSource={tableList}
rowKey={record => record.id}
/>
)
}
</div>
)
})
}
</SchemaForm>
)
}
return (
<Drawer
getContainer={false}
destroyOnClose
visible={visible}
bodyStyle={{ overflow: 'auto' }}
title={title}
width={width}
onClose={onCancel}
footer={renderFooter()}
>
<div style={{ display: 'flex', flexDirection: 'column' }}>
{
renderOnly()
}
</div>
</Drawer>
)
}
export default InvoiceDrawer
src/pages/balance/components/InvoiceCreate/InvoiceInfo.tsx deleted 100644 → 0
View file @ bf4237fe
/*
* @Author: Bill
* @Date: 2020-10-28 13:46:39
* @Description: 开票详情 内容
*/
import React from 'react';
import { getIntl } from 'umi'
import { Row, Col } from 'antd';
import { InvoiceInfoProps } from '../../common/type';
import styles from './index.less';
const intl = getIntl()
interface Iprops {
infos: InvoiceInfoProps
}
const infoList = [
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.typeName' }), dataIndex: 'typeName' },
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.kindName' }), dataIndex: 'kindName' },
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.invoiceTitle' }), dataIndex: 'invoiceTitle' },
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.taxNo' }), dataIndex: 'taxNo' },
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.bankOfDeposit' }), dataIndex: 'bankOfDeposit' },
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.account' }), dataIndex: 'account' },
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.address' }), dataIndex: 'address' },
{ title: intl.formatMessage({ id: 'balance.components.invoiceCreate.invoiceInfo.infoList.tel' }), dataIndex: 'tel' }
]
const InvoiceInfo: React.FC<Iprops> = (props) => {
const { infos } = props;
return (
<>
{
infoList.map((item) => {
return (
<Row className={styles.row} key={item.dataIndex}>
<Col span={3} className={styles.label}>{item.title}</Col>
<Col span={16}>{infos && infos[item.dataIndex]}</Col>
</Row>
)
})
}
</>
)
}
export default InvoiceInfo
src/pages/balance/components/InvoiceCreate/arrayList.tsx
View file @ 39fbd622
......@@ -27,23 +27,32 @@ const ArrayCustom = props => {
value={value}
minItems={schema.minItems}
maxItems={schema.maxItems}
editable={editable}
// editable={editable}
>
{xComponentProps?.header || null}
{toArr(value).map((item, index) => {
return (
<div className={styles.container} key={index}>
<SchemaField path={FormPath.parse(path).concat(index)} />
<div className={styles.remove} onClick={() => mutators.remove(index)}>
<MinusOutlined />
</div>
{
!xComponentProps.disabled && (
<div className={styles.remove} onClick={() => mutators.remove(index)}>
<MinusOutlined />
</div>
)
}
</div>
)
})}
<div className={styles.add} onClick={onAdd}>
<PlusOutlined size={12} />
<span className={styles.addText}>{intl.formatMessage({id: 'balance.tianjia'})}</span>
</div>
{
!xComponentProps.disabled && (
<div className={styles.add} onClick={onAdd}>
<PlusOutlined size={12} />
<span className={styles.addText}>{intl.formatMessage({id: 'balance.tianjia'})}</span>
</div>
)
}
</ArrayList>
)
......
src/pages/balance/components/InvoiceCreate/invoiceDrawerInfo.less
View file @ 39fbd622
......@@ -7,7 +7,7 @@
.header-item {
width: 128px;
margin-right: 20px;
margin-right: 18px;
}
}
......
src/pages/balance/components/InvoiceCreate/invoiceDrawerInfo.tsx
View file @ 39fbd622
......@@ -5,7 +5,7 @@ import {
SchemaMarkupField as Field
} from '@formily/antd'
import { Button, Drawer } from 'antd';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import ArrayList from './arrayList';
import { Input, DatePicker } from '@formily/antd-components';
import styles from './invoiceDrawerInfo.less';
......@@ -32,6 +32,7 @@ type ProveListType = {
const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
const { visible, onCancel, invoiceInfoData, onSubmit, mode } = props;
const [initialValue, setInitialValue] = useState<{ [key: string]: ProveListType }>({});
const disabled = useMemo(() => mode === 'view', [mode])
const handleCancel = () => {
onCancel?.()
......@@ -56,7 +57,7 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
}
useEffect(() => {
if (mode === 'view' && invoiceInfoData) {
if (invoiceInfoData) {
const data = {};
invoiceInfoData?.forEach((_item, index) => {
const { proveList } = _item;
......@@ -66,10 +67,11 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
}
}, [mode, invoiceInfoData])
return (
<Drawer
visible={visible}
width={800}
width={820}
title={intl.formatMessage({ id: 'balance.kaijufapiao' })}
onClose={handleCancel}
footer={renderFooter()}
......@@ -79,7 +81,7 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
onSubmit={handleSubmit}
components={{ ArrayCustom: ArrayList, Input: Input, DatePicker, InvoiceInfo }}
actions={formActions}
editable={mode === 'edit'}
// editable={mode === 'edit'}
>
{
invoiceInfoData?.map((_item, key) => {
......@@ -114,7 +116,8 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
</div>
<div className={styles['header-item']}>{intl.formatMessage({ id: 'balance.beizhu' })}</div>
</div>
)
),
disabled: disabled,
}}
>
<Field type="object">
......@@ -125,7 +128,8 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
x-component-props={{
style: {
width: '128px'
}
},
disabled: disabled
}}
x-rules={
[
......@@ -136,6 +140,9 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
<Field
name="invoiceDate"
x-component="DatePicker"
x-component-props={{
disabled: disabled
}}
x-rules={
[
{ required: true, message: intl.formatMessage({ id: 'balance.qingtianxiekaipiaoriqi' }) }
......@@ -148,7 +155,8 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
x-component-props={{
style: {
width: '128px'
}
},
disabled: disabled,
}}
x-rules={
[
......@@ -162,7 +170,8 @@ const InvoiceDrawerInfo: React.FC<Iprops> = (props: Iprops) => {
x-component-props={{
style: {
width: '268px'
}
},
disabled: disabled
}}
/>
</FormMegaLayout>
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/CommodityList/index.tsx
View file @ 39fbd622
......@@ -106,12 +106,13 @@ const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver,
};
const { productName: name, productImgUrl: image, mode = "horizontal", price: originalPrice, discount, activityPrice, ...otherRestProps } = rest as any;
const { productName: name, productImgUrl: image, mode = "horizontal", price: originalPrice, discount, activityPrice, label, ...otherRestProps } = rest as any;
const withLabel = label ? {label: [label]} : {};
const horizontalData = {
name,
image,
mode,
tags: [intl.formatMessage({ id: 'activityPage.fill300remove20' })],
...withLabel,
originalPrice: originalPrice,
discountPrice: discount || activityPrice
};
......@@ -122,7 +123,7 @@ const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
mode,
discountPrice: discount || activityPrice,
buyBtn: false,
tags: [intl.formatMessage({ id: 'activityPage.fill300remove20' })],
...withLabel,
sold: 0
};
......
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