169 lines
4.9 KiB
JavaScript
169 lines
4.9 KiB
JavaScript
import dayjs from 'dayjs';
|
|
import { ToYuan, ThousandCont } from "oak-domain/lib/utils/money";
|
|
export default OakComponent({
|
|
entity: 'accountOper',
|
|
isList: true,
|
|
projection: {
|
|
id: 1,
|
|
type: 1,
|
|
avail: 1,
|
|
availPlus: 1,
|
|
$$createAt$$: 1,
|
|
},
|
|
properties: {
|
|
accountId: '',
|
|
},
|
|
data: {
|
|
month: new Date(),
|
|
monthStr: '',
|
|
type: 'both',
|
|
chooseMonth: false,
|
|
chooseType: false,
|
|
pickerStart: dayjs().subtract(10, 'y').startOf('m').format('YYYY-MM-DD'),
|
|
pickerEnd: dayjs().startOf('m').format('YYYY-MM-DD'),
|
|
},
|
|
filters: [
|
|
{
|
|
filter() {
|
|
const { accountId } = this.props;
|
|
return {
|
|
accountId,
|
|
};
|
|
}
|
|
}
|
|
],
|
|
formData({ data }) {
|
|
const pagi = this.getPagination();
|
|
const hasMore = !!pagi?.more;
|
|
return {
|
|
hasMore,
|
|
accountOpers: data.map((oper) => {
|
|
const { $$createAt$$, type, availPlus, avail } = oper;
|
|
const num = Math.abs(availPlus);
|
|
const plus = ThousandCont(ToYuan(num), 2);
|
|
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: this.t(`accountOper:v.type.${type}`),
|
|
symbol,
|
|
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 });
|
|
},
|
|
setMonthMp(e) {
|
|
const { value } = e.detail;
|
|
const month = dayjs(value).valueOf();
|
|
this.setMonth(month);
|
|
},
|
|
openChooseTypeMp() {
|
|
this.setState({
|
|
chooseType: true,
|
|
});
|
|
},
|
|
closeChooseTypeMp() {
|
|
this.setState({
|
|
chooseType: false,
|
|
});
|
|
},
|
|
setTypeMp({ detail }) {
|
|
const { key, } = detail;
|
|
this.setState({
|
|
type: key,
|
|
}, () => this.setTypeFilter());
|
|
this.closeChooseTypeMp();
|
|
}
|
|
}
|
|
});
|