diff --git a/es/components/account/detail/web.d.ts b/es/components/account/detail/web.d.ts index 50dc426b..95b7d449 100644 --- a/es/components/account/detail/web.d.ts +++ b/es/components/account/detail/web.d.ts @@ -19,6 +19,7 @@ export default function Render(props: WebComponentProps void; }, { newDeposit: () => Promise; setDepositOpen: (v: boolean) => void; @@ -29,5 +30,4 @@ export default function Render(props: WebComponentProps void; onDepositModalClose: () => void; onUnfinishedDepositClick: () => void; - onGoToHistory: () => void; }>): React.JSX.Element | null; diff --git a/es/components/account/detail/web.js b/es/components/account/detail/web.js index 0cdcfc28..11a875f6 100644 --- a/es/components/account/detail/web.js +++ b/es/components/account/detail/web.js @@ -5,8 +5,8 @@ import classNames from 'classnames'; import { CentToString } from 'oak-domain/lib/utils/money'; import NewDeposit from '../../deposit/new'; export default function Render(props) { - const { account, depositMaxCent, newDepositPath, depositOpen, depositMinCent, ufOpen, depPrice, depositChannel, depositLoss, depositing, onWithdraw, textColor, priceColor, bgColor, } = props.data; - const { t, newDeposit, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, onUnfinishedDepositClick, setDepositing, onDepositClick, onDepositModalClose, onGoToHistory, } = props.methods; + const { account, depositMaxCent, newDepositPath, depositOpen, depositMinCent, ufOpen, depPrice, depositChannel, depositLoss, depositing, onWithdraw, textColor, priceColor, bgColor, onGoToHistory } = props.data; + const { t, newDeposit, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, onUnfinishedDepositClick, setDepositing, onDepositClick, onDepositModalClose, } = props.methods; if (account) { const { total, avail, '#oakLegalActions': legalActions, accountOper$account: opers } = account; return (
diff --git a/es/components/account/detail/web.pc.d.ts b/es/components/account/detail/web.pc.d.ts index fcf94800..f50c788b 100644 --- a/es/components/account/detail/web.pc.d.ts +++ b/es/components/account/detail/web.pc.d.ts @@ -16,6 +16,7 @@ export default function Render(props: WebComponentProps void; }, { newDeposit: () => Promise; setDepositOpen: (v: boolean) => void; @@ -26,5 +27,4 @@ export default function Render(props: WebComponentProps void; onDepositModalClose: () => void; onUnfinishedDepositClick: () => void; - onGoToHistory: () => void; }>): React.JSX.Element | null; diff --git a/es/components/account/detail/web.pc.js b/es/components/account/detail/web.pc.js index 22d004d6..6e5ccdb6 100644 --- a/es/components/account/detail/web.pc.js +++ b/es/components/account/detail/web.pc.js @@ -7,8 +7,8 @@ import NewDeposit from '../../deposit/new'; import AccountOperList from '../../accountOper/pure/List.pc'; import { AccountBookOutlined, ScheduleOutlined } from '@ant-design/icons'; export default function Render(props) { - const { account, depositMaxCent, newDepositPath, depositOpen, depositMinCent, ufOpen, depPrice, depositChannel, depositLoss, depositing, onWithdraw, } = props.data; - const { t, newDeposit, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, onUnfinishedDepositClick, setDepositing, onDepositClick, onDepositModalClose, onGoToHistory, } = props.methods; + const { account, depositMaxCent, newDepositPath, depositOpen, depositMinCent, ufOpen, depPrice, depositChannel, depositLoss, depositing, onWithdraw, onGoToHistory, } = props.data; + const { t, newDeposit, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, onUnfinishedDepositClick, setDepositing, onDepositClick, onDepositModalClose, } = props.methods; if (account) { const { total, avail, '#oakLegalActions': legalActions, accountOper$account: opers } = account; return (<> diff --git a/es/components/accountOper/list/index.js b/es/components/accountOper/list/index.js index 2fbc503d..8df7f9af 100644 --- a/es/components/accountOper/list/index.js +++ b/es/components/accountOper/list/index.js @@ -6,22 +6,26 @@ export default OakComponent({ projection: { id: 1, type: 1, - totalPlus: 1, + avail: 1, availPlus: 1, $$createAt$$: 1, }, properties: { accountId: '', }, + data: { + month: new Date(), + monthStr: '', + type: 'both', + chooseMonth: false, + chooseType: false, + }, filters: [ { filter() { const { accountId } = this.props; return { accountId, - avail: { - $ne: 0, - }, }; } } @@ -38,19 +42,103 @@ export default OakComponent({ const sign = availPlus > 0 ? '+' : '-'; const time = dayjs($$createAt$$).format('YYYY-MM-DD HH:mm'); const symbol = this.t(`accountOper:v.type.${type}`)[0]; + const bgColor = this.features.style.getColor('accountOper', 'type', type); return { value: `${sign}${plus}`, time, - type, + type: this.t(`accountOper:v.type.${type}`), symbol, - avail: ThousandCont(ToYuan(avail), 2) + avail: ThousandCont(ToYuan(avail), 2), + bgColor, }; }), }; }, + lifetimes: { + ready() { + this.setTypeFilter(); + } + }, methods: { loadMoreMp() { return this.loadMore(); + }, + setType(type) { + this.setState({ + type, + }, () => this.setTypeFilter()); + }, + setTypeFilter() { + const { type } = this.state; + switch (type) { + case 'in': { + this.addNamedFilter({ + '#name': 'type', + filter: { + availPlus: { + $gt: 0, + }, + } + }, true); + break; + } + case 'out': { + this.addNamedFilter({ + '#name': 'type', + filter: { + availPlus: { + $lt: 0, + }, + } + }, true); + break; + } + case 'both': + default: { + this.addNamedFilter({ + '#name': 'type', + filter: { + availPlus: { + $ne: 0, + }, + } + }, true); + break; + } + } + }, + setMonth(month) { + if (month) { + const m = dayjs(month); + const begin = m.startOf('month').valueOf(); + const end = m.endOf('month').valueOf(); + this.setState({ + monthStr: m.format('YYYY-MM'), + month, + }, () => this.addNamedFilter({ + '#name': 'month', + filter: { + $$createAt$$: { + $between: [begin, end], + } + } + }, true)); + } + else { + this.setState({ + monthStr: '', + month: undefined, + }, () => this.removeNamedFilter({ + '#name': 'month', + filter: {} + }, true)); + } + }, + setChooseMonth(chooseMonth) { + this.setState({ chooseMonth }); + }, + setChooseType(chooseType) { + this.setState({ chooseType }); } } }); diff --git a/es/components/accountOper/list/locales/zh-CN.json b/es/components/accountOper/list/locales/zh-CN.json index 0967ef42..27e375f3 100644 --- a/es/components/accountOper/list/locales/zh-CN.json +++ b/es/components/accountOper/list/locales/zh-CN.json @@ -1 +1,9 @@ -{} +{ + "history": "账户历史", + "chooseMonth": "选择月份", + "type": { + "both": "全部", + "in": "仅收入", + "out": "仅支出" + } +} diff --git a/es/components/accountOper/list/mobile.module.less b/es/components/accountOper/list/mobile.module.less index 10a028b9..b5134059 100644 --- a/es/components/accountOper/list/mobile.module.less +++ b/es/components/accountOper/list/mobile.module.less @@ -4,4 +4,52 @@ min-height: 100%; flex-direction: column; align-items: stretch; + + .control { + padding: 4px; + } + + .item { + padding-bottom: 10px; + + .symbol { + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 25px; + margin: 10px; + font-size: large; + font-weight: bold; + } + + .main { + margin-top: 5px; + width: 100%; + } + + .sub { + width: 100%; + + .type { + font-weight: bold; + } + } + } + +} + +.types { + padding: 20px; + width: 100%; +} + +.empty { + display: flex; + width: 100%; + flex: 1; + background-color: white; + align-items: center; + justify-content: center; } \ No newline at end of file diff --git a/es/components/accountOper/list/web.d.ts b/es/components/accountOper/list/web.d.ts index 4e604dae..f0b75054 100644 --- a/es/components/accountOper/list/web.d.ts +++ b/es/components/accountOper/list/web.d.ts @@ -8,6 +8,17 @@ export default function Render(props: WebComponentProps; hasMore: boolean; -}>): React.JSX.Element | null; + month?: Date; + monthStr: string; + type: 'in' | 'out' | 'both'; + chooseMonth: boolean; + chooseType: boolean; +}, { + setMonth: (month?: number | Date) => void; + setType: (type: 'in' | 'out' | 'both') => void; + setChooseMonth: (cm: boolean) => void; + setChooseType: (ct: boolean) => void; +}>): React.JSX.Element; diff --git a/es/components/accountOper/list/web.js b/es/components/accountOper/list/web.js index a376fabe..aa278e4d 100644 --- a/es/components/accountOper/list/web.js +++ b/es/components/accountOper/list/web.js @@ -1,29 +1,63 @@ import React from 'react'; -import { List, InfiniteScroll, Space } from 'antd-mobile'; +import { List, InfiniteScroll, Space, DatePicker, Button, Popup, Radio, Result } from 'antd-mobile'; +import { DownOutline, SearchOutline, UndoOutline } from 'antd-mobile-icons'; import Styles from './mobile.module.less'; export default function Render(props) { - const { accountOpers, hasMore } = props.data; - const { t, loadMore } = props.methods; - if (accountOpers?.length) { - return (
- - {accountOpers.map((oper, idx) => { - const { value, time, type, symbol, avail } = oper; - return ( - {symbol} -
} description={ - {time} - {t('accountOper:attr.avail')}:{avail} - }> - - {type} - {value} - - ); + const { accountOpers, hasMore, month, type, chooseMonth, chooseType, monthStr } = props.data; + const { t, loadMore, setType, setMonth, setChooseMonth, setChooseType, navigateBack } = props.methods; + return (
+ + + + + setChooseMonth(false)} max={new Date()} precision="month" onConfirm={(value) => { + setMonth(value); + setChooseMonth(false); + }}/> + setChooseType(false)} onClose={() => setChooseType(false)}> + { + setType(type); + setChooseType(false); + }} value={type}> + + {t('type.both')} + {t('type.in')} + {t('type.out')} + + + + {accountOpers?.length ?
+ + {accountOpers.map((oper, idx) => { + const { value, time, type, symbol, avail, bgColor } = oper; + return ( + {symbol} +
} description={ + {time} + {t('account:attr.avail')}:{avail} + }> + + {type} + {value} + + ); })} - - -
); - } - return null; + + +
: (
+ } status='success' title={t('common::noData')} description={}/> +
)} + ); } diff --git a/es/components/accountOper/list/web.module.less b/es/components/accountOper/list/web.module.less new file mode 100644 index 00000000..8ea0f01d --- /dev/null +++ b/es/components/accountOper/list/web.module.less @@ -0,0 +1,27 @@ + +.control { + padding: 4px; +} + +.value { + font-size: x-large; + font-weight: bold; +} + +.list { + min-height: 620px; +} + +.types { + padding: 20px; + width: 100%; +} + +.empty { + display: flex; + width: 100%; + flex: 1; + background-color: white; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/es/components/accountOper/list/web.pc.d.ts b/es/components/accountOper/list/web.pc.d.ts index 2fc9fe44..f5a4c3f5 100644 --- a/es/components/accountOper/list/web.pc.d.ts +++ b/es/components/accountOper/list/web.pc.d.ts @@ -1,12 +1,24 @@ import React from 'react'; import { WebComponentProps } from 'oak-frontend-base'; import { EntityDict } from '../../../oak-app-domain'; -export default function Render(props: WebComponentProps; -}>): React.JSX.Element | undefined; + hasMore: boolean; + month?: Date; + monthStr: string; + type: 'in' | 'out' | 'both'; + chooseMonth: boolean; + chooseType: boolean; +}, { + setMonth: (month?: Date) => void; + setType: (type: 'in' | 'out' | 'both') => void; + setChooseMonth: (cm: boolean) => void; + setChooseType: (ct: boolean) => void; +}>): React.JSX.Element; diff --git a/es/components/accountOper/list/web.pc.js b/es/components/accountOper/list/web.pc.js index 13c9992e..80aefe40 100644 --- a/es/components/accountOper/list/web.pc.js +++ b/es/components/accountOper/list/web.pc.js @@ -1,11 +1,46 @@ import React from 'react'; -import { List, Flex } from 'antd'; +import { Avatar, List, Select, Flex, Button, Card, Result, DatePicker } from 'antd'; +import Styles from './web.module.less'; +import dayJs from 'dayjs'; export default function Render(props) { - const { accountOpers } = props.data; - const { t } = props.methods; - if (accountOpers?.length) { - return ( - - ); - } + const { accountOpers, hasMore, month, type, chooseMonth, chooseType, monthStr, oakLoading, oakLoadingMore } = props.data; + const { t, loadMore, setType, setMonth, setChooseMonth, setChooseType, navigateBack } = props.methods; + return (<> + + { + setMonth(value.toDate()); + }} maxDate={dayJs()}/> + { + updateExternalId(value); + }} placeholder={t('externalId.help')} disabled={iState !== 'paying'}/> ]; if (type === 'bank') { @@ -121,7 +126,7 @@ function RenderWechatPay(props) { return null; } function RenderPayMeta(props) { - const { pay, notSameApp, t, offlines, offline, updateOfflineId } = props; + const { pay, notSameApp, t, offlines, offline, updateOfflineId, updateExternalId } = props; const { iState, entity } = pay; if (entity !== 'offlineAccount' && notSameApp) { return ; @@ -131,7 +136,7 @@ function RenderPayMeta(props) { if (offline && offlines) { return (<> {iState === 'paying' && } - + ); } return null; @@ -208,6 +213,8 @@ export default function Render(props) { } } ]); + }} updateExternalId={(externalId) => { + update({ externalId }); }}/>
diff --git a/es/components/pay/detail/web.pc.d.ts b/es/components/pay/detail/web.pc.d.ts index dc711022..b1f81282 100644 --- a/es/components/pay/detail/web.pc.d.ts +++ b/es/components/pay/detail/web.pc.d.ts @@ -10,6 +10,7 @@ export declare function RenderOffline(props: { offlines: ColoredOffline[]; offline: ColoredOffline; updateOfflineId: (entityId: string) => void; + updateExternalId: (externalId: string) => void; }): React.JSX.Element | null; export default function Render(props: WebComponentProps; diff --git a/es/components/pay/detail/web.pc.js b/es/components/pay/detail/web.pc.js index 5551770f..f95bc067 100644 --- a/es/components/pay/detail/web.pc.js +++ b/es/components/pay/detail/web.pc.js @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Tag, Card, QRCode, Form, Descriptions, Typography, Alert, Button, Modal, Radio } from 'antd'; +import { Input, Tag, Card, QRCode, Form, Descriptions, Typography, Alert, Button, Modal, Radio } from 'antd'; import { CheckCircleOutlined } from '@ant-design/icons'; import { CentToString } from 'oak-domain/lib/utils/money'; import Styles from './web.pc.module.less'; @@ -8,8 +8,8 @@ import duration from 'dayjs/plugin/duration'; import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid'; dayJs.extend(duration); export function RenderOffline(props) { - const { pay, t, offline, offlines, updateOfflineId } = props; - const { iState, phantom3 } = pay; + const { pay, t, offline, offlines, updateOfflineId, updateExternalId } = props; + const { iState, phantom3, externalId } = pay; const { type, channel, name, qrCode, color } = offline; const [show, setShow] = useState(false); const [showQrCode, setShowQrCode] = useState(false); @@ -23,6 +23,12 @@ export function RenderOffline(props) { {phantom3} + , + {t('externalId.label')}}> + { + const { value } = currentTarget; + updateExternalId(value); + }} placeholder={t('externalId.help')} disabled={iState !== 'paying'}/> ]; if (type === 'bank') { @@ -123,7 +129,7 @@ function RenderWechatPay(props) { return null; } function RenderPayMeta(props) { - const { pay, notSameApp, t, offlines, offline, updateOfflineId } = props; + const { pay, notSameApp, t, offlines, offline, updateOfflineId, updateExternalId } = props; const { iState, entity } = pay; if (entity !== 'offlineAccount' && notSameApp) { return ; @@ -133,7 +139,7 @@ function RenderPayMeta(props) { if (offline && offlines) { return (<> {iState === 'paying' && } - + ); } return null; @@ -214,6 +220,10 @@ export default function Render(props) { } } ]); + }} updateExternalId={(externalId) => { + update({ + externalId, + }); }}/>
diff --git a/es/components/pay/list/web.pc.js b/es/components/pay/list/web.pc.js index 357e049b..2779825f 100644 --- a/es/components/pay/list/web.pc.js +++ b/es/components/pay/list/web.pc.js @@ -146,6 +146,8 @@ export default function Render(props) { {offlines && ele.id === spRow.entityId)} updateOfflineId={(entityId) => updateItem({ entity: 'offlineAccount', entityId + }, spId)} updateExternalId={(externalId) => updateItem({ + externalId, }, spId)}/>}
diff --git a/es/configuration/attrUpdateMatrix.js b/es/configuration/attrUpdateMatrix.js index 6834ff12..9d67a307 100644 --- a/es/configuration/attrUpdateMatrix.js +++ b/es/configuration/attrUpdateMatrix.js @@ -67,7 +67,12 @@ const attrUpdateMatrix = { } }, externalId: { - actions: ['startPaying', 'succeedPaying'], + actions: ['startPaying', 'succeedPaying', 'update'], + filter: { + iState: { + $in: ['unpaid', 'paying'], + }, + }, }, }, refund: { diff --git a/es/data/i18n.js b/es/data/i18n.js index cf51db03..456240bd 100644 --- a/es/data/i18n.js +++ b/es/data/i18n.js @@ -52,7 +52,15 @@ const i18ns = [ language: "zh-CN", module: "oak-pay-business", position: "src/components/accountOper/list", - data: {} + data: { + "history": "账户历史", + "chooseMonth": "选择月份", + "type": { + "both": "全部", + "in": "仅收入", + "out": "仅支出" + } + } }, { id: "65d19e4723a89c25e3c10a87013af430", @@ -198,11 +206,15 @@ const i18ns = [ }, "code": { "label": "转帐凭证号", - "help": "请在转帐留言中附上转帐凭证号，便于人工核对" + "help": "请在转帐时于留言中附上转帐凭证号，便于人工核对。若转账时忘记附上，则请准确填写转账流水号。" }, "channel": { "change": "更换", "prefix": "渠道" + }, + "externalId": { + "label": "转账流水号", + "help": "转账成功后有唯一流水号，将之正确填入可减少财务人员核对时的错误概率，给您带来更大便利" } } }, @@ -696,6 +708,7 @@ const i18ns = [ "enter": "请输入", "change": "修改", "finish": "完成", + "loadMore": "加载更多", "pay": { "symbol": "￥", "scale": "元" diff --git a/es/locales/common/zh_CN.json b/es/locales/common/zh_CN.json index 72b70601..111a9cf2 100644 --- a/es/locales/common/zh_CN.json +++ b/es/locales/common/zh_CN.json @@ -46,6 +46,7 @@ "enter": "请输入", "change": "修改", "finish": "完成", + "loadMore": "加载更多", "pay": { "symbol": "￥", "scale": "元" diff --git a/lib/components/pay/detail/index.js b/lib/components/pay/detail/index.js index 0b524bd2..019d08eb 100644 --- a/lib/components/pay/detail/index.js +++ b/lib/components/pay/detail/index.js @@ -269,6 +269,17 @@ exports.default = OakComponent({ }); } }, + updateExternalIdMp(input) { + const { detail } = input; + this.update({ + externalId: detail.value, + }); + }, + clearExternalIdMp() { + this.update({ + externalId: null, + }); + } }, lifetimes: { ready() { diff --git a/lib/configuration/attrUpdateMatrix.js b/lib/configuration/attrUpdateMatrix.js index 93e162f8..bdfc41a9 100644 --- a/lib/configuration/attrUpdateMatrix.js +++ b/lib/configuration/attrUpdateMatrix.js @@ -69,7 +69,12 @@ const attrUpdateMatrix = { } }, externalId: { - actions: ['startPaying', 'succeedPaying'], + actions: ['startPaying', 'succeedPaying', 'update'], + filter: { + iState: { + $in: ['unpaid', 'paying'], + }, + }, }, }, refund: { diff --git a/lib/data/i18n.js b/lib/data/i18n.js index cdb3110d..c26441c2 100644 --- a/lib/data/i18n.js +++ b/lib/data/i18n.js @@ -54,7 +54,15 @@ const i18ns = [ language: "zh-CN", module: "oak-pay-business", position: "src/components/accountOper/list", - data: {} + data: { + "history": "账户历史", + "chooseMonth": "选择月份", + "type": { + "both": "全部", + "in": "仅收入", + "out": "仅支出" + } + } }, { id: "65d19e4723a89c25e3c10a87013af430", @@ -200,11 +208,15 @@ const i18ns = [ }, "code": { "label": "转帐凭证号", - "help": "请在转帐留言中附上转帐凭证号，便于人工核对" + "help": "请在转帐时于留言中附上转帐凭证号，便于人工核对。若转账时忘记附上，则请准确填写转账流水号。" }, "channel": { "change": "更换", "prefix": "渠道" + }, + "externalId": { + "label": "转账流水号", + "help": "转账成功后有唯一流水号，将之正确填入可减少财务人员核对时的错误概率，给您带来更大便利" } } }, @@ -698,6 +710,7 @@ const i18ns = [ "enter": "请输入", "change": "修改", "finish": "完成", + "loadMore": "加载更多", "pay": { "symbol": "￥", "scale": "元" diff --git a/lib/locales/common/zh_CN.json b/lib/locales/common/zh_CN.json index 72b70601..111a9cf2 100644 --- a/lib/locales/common/zh_CN.json +++ b/lib/locales/common/zh_CN.json @@ -46,6 +46,7 @@ "enter": "请输入", "change": "修改", "finish": "完成", + "loadMore": "加载更多", "pay": { "symbol": "￥", "scale": "元" diff --git a/src/components/pay/detail/index.ts b/src/components/pay/detail/index.ts index fed84860..1296e5d2 100644 --- a/src/components/pay/detail/index.ts +++ b/src/components/pay/detail/index.ts @@ -290,6 +290,17 @@ export default OakComponent({ }) } }, + updateExternalIdMp(input: WechatMiniprogram.Input) { + const { detail } = input; + this.update({ + externalId: detail.value, + }); + }, + clearExternalIdMp() { + this.update({ + externalId: null, + }); + } }, lifetimes: { ready() { diff --git a/src/components/pay/detail/index.xml b/src/components/pay/detail/index.xml index 836cec37..9adce943 100644 --- a/src/components/pay/detail/index.xml +++ b/src/components/pay/detail/index.xml @@ -48,6 +48,16 @@ {{pay.phantom3}} + + + {{offline.channel}} diff --git a/src/components/pay/detail/locales/zh-CN.json b/src/components/pay/detail/locales/zh-CN.json index cf78a779..e1dd2fb4 100644 --- a/src/components/pay/detail/locales/zh-CN.json +++ b/src/components/pay/detail/locales/zh-CN.json @@ -25,10 +25,14 @@ }, "code": { "label": "转帐凭证号", - "help": "请在转帐留言中附上转帐凭证号，便于人工核对" + "help": "请在转帐时于留言中附上转帐凭证号，便于人工核对。若转账时忘记附上，则请准确填写转账流水号。" }, "channel": { "change": "更换", "prefix": "渠道" + }, + "externalId": { + "label": "转账流水号", + "help": "转账成功后有唯一流水号，将之正确填入可减少财务人员核对时的错误概率，给您带来更大便利" } } \ No newline at end of file diff --git a/src/components/pay/detail/web.pc.tsx b/src/components/pay/detail/web.pc.tsx index c8805bf7..e782c861 100644 --- a/src/components/pay/detail/web.pc.tsx +++ b/src/components/pay/detail/web.pc.tsx @@ -16,10 +16,11 @@ export function RenderOffline(props: { t: (key: string) => string, offlines: ColoredOffline[]; offline: ColoredOffline; - updateOfflineId: (entityId: string) => void + updateOfflineId: (entityId: string) => void; + updateExternalId: (externalId: string) => void; }) { - const { pay, t, offline, offlines, updateOfflineId } = props; - const { iState, phantom3 } = pay; + const { pay, t, offline, offlines, updateOfflineId, updateExternalId } = props; + const { iState, phantom3, externalId } = pay; const { type, channel, name, qrCode, color } = offline; const [show, setShow] = useState(false); @@ -41,6 +42,20 @@ export function RenderOffline(props: { {phantom3} + , + {t('externalId.label')}} + > + { + const { value } = currentTarget; + updateExternalId(value); + }} + placeholder={t('externalId.help')} + disabled={iState !== 'paying'} + /> ]; if (type === 'bank') { @@ -228,8 +243,9 @@ function RenderPayMeta(props: { offlines?: ColoredOffline[]; offline?: ColoredOffline; updateOfflineId: (entityId: string) => void + updateExternalId: (externalId: string) => void; }) { - const { pay, notSameApp, t, offlines, offline, updateOfflineId } = props; + const { pay, notSameApp, t, offlines, offline, updateOfflineId, updateExternalId } = props; const { iState, entity } = pay; if (entity !== 'offlineAccount' && notSameApp) { return @@ -246,6 +262,7 @@ function RenderPayMeta(props: { offline={offline} offlines={offlines} updateOfflineId={updateOfflineId} + updateExternalId={updateExternalId} /> ); @@ -384,6 +401,11 @@ export default function Render(props: WebComponentProps { + update({ + externalId, + }); + }} />
diff --git a/src/components/pay/detail/web.tsx b/src/components/pay/detail/web.tsx index 3e6f8e34..82ce4112 100644 --- a/src/components/pay/detail/web.tsx +++ b/src/components/pay/detail/web.tsx @@ -21,10 +21,11 @@ export function RenderOffline(props: { t: (key: string) => string, offlines: ColoredOffline[]; offline: ColoredOffline; - updateOfflineId: (entityId: string) => void + updateOfflineId: (entityId: string) => void; + updateExternalId: (externalId: string) => void; }) { - const { pay, t, offline, offlines, updateOfflineId } = props; - const { meta, iState, phantom3 } = pay; + const { pay, t, offline, offlines, updateOfflineId, updateExternalId } = props; + const { meta, iState, phantom3, externalId } = pay; const { type, channel, name, qrCode, color } = offline || {}; const [show, setShow] = useState(false); @@ -45,6 +46,20 @@ export function RenderOffline(props: { {phantom3} + , + {t('externalId.label')}} + > + { + updateExternalId(value); + }} + placeholder={t('externalId.help')} + disabled={iState !== 'paying'} + /> ]; if (type === 'bank') { @@ -221,9 +236,10 @@ function RenderPayMeta(props: { t: (key: string) => string, offlines?: ColoredOffline[]; offline?: ColoredOffline; - updateOfflineId: (entityId: string) => void + updateOfflineId: (entityId: string) => void; + updateExternalId: (externalId: string) => void; }) { - const { pay, notSameApp, t, offlines, offline, updateOfflineId } = props; + const { pay, notSameApp, t, offlines, offline, updateOfflineId, updateExternalId } = props; const { iState, entity } = pay; if (entity !== 'offlineAccount' && notSameApp) { return @@ -240,6 +256,7 @@ function RenderPayMeta(props: { offline={offline} offlines={offlines} updateOfflineId={updateOfflineId} + updateExternalId={updateExternalId} /> ); @@ -383,6 +400,9 @@ export default function Render(props: WebComponentProps { + update({ externalId }); + }} />
diff --git a/src/components/pay/list/web.pc.tsx b/src/components/pay/list/web.pc.tsx index 2d19b72d..1f865b24 100644 --- a/src/components/pay/list/web.pc.tsx +++ b/src/components/pay/list/web.pc.tsx @@ -197,6 +197,9 @@ export default function Render(props: WebComponentProps updateItem({ + externalId, + }, spId)} />} = { } }, externalId: { - actions: ['startPaying', 'succeedPaying'], + actions: ['startPaying', 'succeedPaying', 'update'], + filter: { + iState: { + $in: ['unpaid', 'paying'], + }, + }, }, }, refund: { diff --git a/src/data/i18n.ts b/src/data/i18n.ts index 3351be1f..0ee30b3e 100644 --- a/src/data/i18n.ts +++ b/src/data/i18n.ts @@ -54,7 +54,15 @@ const i18ns: I18n[] = [ language: "zh-CN", module: "oak-pay-business", position: "src/components/accountOper/list", - data: {} + data: { + "history": "账户历史", + "chooseMonth": "选择月份", + "type": { + "both": "全部", + "in": "仅收入", + "out": "仅支出" + } + } }, { id: "65d19e4723a89c25e3c10a87013af430", @@ -200,11 +208,15 @@ const i18ns: I18n[] = [ }, "code": { "label": "转帐凭证号", - "help": "请在转帐留言中附上转帐凭证号，便于人工核对" + "help": "请在转帐时于留言中附上转帐凭证号，便于人工核对。若转账时忘记附上，则请准确填写转账流水号。" }, "channel": { "change": "更换", "prefix": "渠道" + }, + "externalId": { + "label": "转账流水号", + "help": "转账成功后有唯一流水号，将之正确填入可减少财务人员核对时的错误概率，给您带来更大便利" } } }, @@ -698,6 +710,7 @@ const i18ns: I18n[] = [ "enter": "请输入", "change": "修改", "finish": "完成", + "loadMore": "加载更多", "pay": { "symbol": "￥", "scale": "元"