<template>
|
<LoadingLayout :loading="isLoading">
|
<AppScrollContainer>
|
<ChunkCell title="付款方信息">
|
<ProForm :model="form" ref="formRef" label-width="120px">
|
<ProFormItemV2
|
label="付款账户:"
|
prop="name"
|
:check-rules="[{ message: '请选择付款账户' }]"
|
>
|
<ProFormSelect
|
v-model="form.name"
|
:valueEnum="[]"
|
placeholder="请选择您的付款方式"
|
clearable
|
>
|
</ProFormSelect>
|
</ProFormItemV2>
|
<ProFormMixinsItemContainer>
|
<ProFormItemV2
|
label="付款金额:"
|
prop="money"
|
:check-rules="[{ message: '请输入付款金额' }]"
|
mode="read"
|
>
|
<ProFormInputNumber v-model="form.money"> </ProFormInputNumber>
|
</ProFormItemV2>
|
</ProFormMixinsItemContainer>
|
</ProForm>
|
</ChunkCell>
|
<ChunkCell title="收款方信息">
|
<ProTableQueryFilterBar @on-reset="reset">
|
<template #query>
|
<QueryFilterItem>
|
<SearchInput
|
v-model="extraParamState.keywords"
|
style="width: 300px"
|
placeholder="人员姓名/身份证号/手机号"
|
@on-click-search="getList"
|
>
|
</SearchInput>
|
</QueryFilterItem>
|
</template>
|
</ProTableQueryFilterBar>
|
<ProTableV2
|
v-bind="proTableProps"
|
:columns="SettlementListColumns"
|
:show-operation-column="false"
|
:auto-height="false"
|
ref="proTable"
|
:tableProps="{
|
maxHeight: '400px',
|
}"
|
>
|
</ProTableV2>
|
</ChunkCell>
|
<ChunkCell title="转账信息">
|
<ProForm :model="form" ref="formRef" label-width="120px">
|
<ProFormMixinsItemContainer>
|
<ProFormItemV2 label="交易用途:" prop="name" mode="read">
|
<ProFormText v-model="form.name"> </ProFormText>
|
</ProFormItemV2>
|
</ProFormMixinsItemContainer>
|
<ProFormItemV2 label="附言:" prop="name">
|
<ProFormText v-model="form.name" :maxlength="30" show-word-limit> </ProFormText>
|
</ProFormItemV2>
|
<ProFormItemV2 label="备注:" prop="name">
|
<ProFormText v-model="form.name" :maxlength="30" show-word-limit> </ProFormText>
|
</ProFormItemV2>
|
<div class="chuck-add-or-edit-actions">
|
<el-button class="chuck-add-or-edit-actions" @click="handleBack()">取消</el-button>
|
<el-button class="chuck-add-or-edit-actions" type="primary" @click="handleSubmit"
|
>提交审核</el-button
|
>
|
</div>
|
</ProForm>
|
</ChunkCell>
|
</AppScrollContainer>
|
</LoadingLayout>
|
</template>
|
<script setup lang="ts">
|
import {
|
LoadingLayout,
|
AppScrollContainer,
|
ChunkCell,
|
ProForm,
|
ProFormItemV2,
|
ProFormText,
|
ProFormSelect,
|
ProFormInputNumber,
|
ProTableV2,
|
QueryFilterItem,
|
SearchInput,
|
ProTableQueryFilterBar,
|
ProFormMixinsItemContainer,
|
useTable,
|
} from '@bole-core/components';
|
import { useQuery } from '@tanstack/vue-query';
|
import { useRouteView } from '@/hooks';
|
import { FormInstance } from 'element-plus';
|
import { validateFormList } from '@/utils';
|
import * as taskServices from '@/services/api/task';
|
import { SettlementListColumns } from './constants';
|
|
defineOptions({
|
name: 'ServiceChargeSettle',
|
});
|
|
const route = useRoute();
|
const id = (route.params.id as string) ?? '';
|
const eventContext = useGlobalEventContext();
|
const { closeViewPush } = useRouteView();
|
|
const form = reactive({
|
name: '',
|
money: 0,
|
});
|
|
const { isLoading } = useQuery({
|
queryKey: ['taskServices/getTaskInfo', id],
|
queryFn: async () => {
|
return await taskServices.getTaskInfo(
|
{ id: id },
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as API.GetTaskInfoQueryResult),
|
onSuccess(data) {
|
form.name = data.name;
|
},
|
enabled: !!id,
|
});
|
|
const {
|
getDataSource: getList,
|
proTableProps,
|
paginationState,
|
extraParamState,
|
reset,
|
} = useTable(
|
async ({ pageIndex, pageSize }, extraParamState) => {
|
try {
|
let params: API.GetOpenTaskInfosQuery = {
|
pageModel: {
|
rows: pageSize,
|
page: pageIndex,
|
orderInput: extraParamState.orderInput,
|
},
|
keywords: extraParamState.keywords,
|
};
|
|
let res = await taskServices.getOpenTaskInfos(params);
|
return res;
|
} catch (error) {
|
console.log('error: ', error);
|
}
|
},
|
{
|
defaultExtraParams: {
|
keywords: '',
|
orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
|
},
|
queryKey: ['taskServices/getOpenTaskInfos'],
|
columnsRenderProps: {},
|
}
|
);
|
|
function handleBack() {
|
closeViewPush(route, {
|
name: 'ServiceChargeManageList',
|
});
|
}
|
const formRef = ref<FormInstance>();
|
async function handleSubmit() {
|
try {
|
const valid = await validateFormList([formRef.value]);
|
if (valid) {
|
submit();
|
}
|
} catch (error) {}
|
}
|
|
async function submit() {
|
try {
|
eventContext.emit('serviceChargeSettle');
|
} catch (error) {}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
</style>
|
