njzscloud-dispose-web/src/pages/fin/money-flow/MoneyFlow.vue

115 lines
3.2 KiB
Vue

<template>
<ATablePage
ref="tablePage"
v-bind="tablePageProps">
<template #highFormItem="formData">
<ElFormItem label="订单编号">
<ElInput
v-model="formData.orderSn"
placeholder="订单编号"/>
</ElFormItem>
<ElFormItem label="车次">
<ElInput
v-model="formData.trainNum"
placeholder="车次"/>
</ElFormItem>
<ElFormItem label="资金账户">
<ElInput
v-model="formData.moneyAccountId"
placeholder="资金账户"/>
</ElFormItem>
</template>
<template #columns>
<ElTableColumn label="订单编号" prop="orderSn"/>
<ElTableColumn label="车次" prop="trainNum"/>
<ElTableColumn label="资金账户" prop="moneyAccountId"/>
<ElTableColumn label="变动前余额" prop="beforeBalance"/>
<ElTableColumn label="变动金额" prop="delta"/>
<ElTableColumn label="变动后余额" prop="afterBalance"/>
<ElTableColumn label="变动类型" prop="moneyChangeCategory"/>
<!-- <ElTableColumn label="附件地址" prop="fileUrl"/> -->
<ElTableColumn label="备注" prop="memo"/>
</template>
<MoneyFlowForm ref="moneyFlowForm" :research="research"/>
<MoneyFlowDetail ref="moneyFlowDetail"/>
</ATablePage>
</template>
<script lang="ts" setup>
import MoneyFlowApi from '@/pages/fin/money-flow/money-flow-api.ts'
import MoneyFlowForm from '@/pages/fin/money-flow/MoneyFlowForm.vue'
import ATablePage, {
type ATablePageInstance,
buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import MoneyFlowDetail from '@/pages/fin/money-flow/MoneyFlowDetail.vue'
const moneyFlowFormIns = useTemplateRef<InstanceType<typeof MoneyFlowForm>>('moneyFlowForm')
const moneyFlowDetailIns = useTemplateRef<InstanceType<typeof MoneyFlowDetail>>('moneyFlowDetail')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
function research() {
tablePageIns.value?.doSearch()
}
const tablePageProps = buildTablePageProps<MoneyFlowTypes.SearchMoneyFlowParam, MoneyFlowTypes.SearchMoneyFlowResult>({
searchForm: {
highForm: {
contentWidth: 342,
},
paging: MoneyFlowApi.paging,
},
toolBar: {
leftTools: [
{
icon: 'Plus',
label: '新建',
action() {
moneyFlowFormIns.value?.open()
},
},
],
},
table: {
actionColumn: {
tableActions: [
{
tooltip: '详情',
icon: 'Postcard',
type: 'info',
action({row}) {
moneyFlowDetailIns.value?.open(row)
},
},
{
tooltip: '编辑',
icon: 'Edit',
action({row}) {
moneyFlowFormIns.value?.open(row)
},
},
{
icon: 'Delete',
loading: false,
type: 'danger',
tooltip: '删除',
confirm: {
title: '是否删除当前数据',
},
action({row}) {
return MoneyFlowApi.del([ row.id! ])
.then(() => {
ElMessage.success('删除成功')
return true
})
},
},
],
},
},
})
</script>