<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="收款方信息">
|
<ProForm :model="form" ref="formRef" label-width="120px">
|
<ProFormItemV2
|
label="收款方账户:"
|
prop="name"
|
:check-rules="[{ message: '请选择收款方账户' }]"
|
>
|
<ProFormRadio
|
v-model="form.name"
|
:valueEnum="[]"
|
placeholder="请选择收款方账户"
|
clearable
|
>
|
</ProFormRadio>
|
</ProFormItemV2>
|
<ProFormMixinsItemContainer>
|
<ProFormItemV2
|
label="收款方户名:"
|
prop="name"
|
:check-rules="[{ message: '请输入收款方户名' }]"
|
mode="read"
|
>
|
<ProFormText v-model="form.name"> </ProFormText>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="收款方账号:"
|
prop="name"
|
:check-rules="[{ message: '请输入收款方账号' }]"
|
mode="read"
|
>
|
<ProFormText v-model="form.name"> </ProFormText>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="收款方开户行:"
|
prop="name"
|
:check-rules="[{ message: '请输入收款开户行' }]"
|
mode="read"
|
>
|
<ProFormText v-model="form.name"> </ProFormText>
|
</ProFormItemV2>
|
</ProFormMixinsItemContainer>
|
</ProForm>
|
</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,
|
ProFormRadio,
|
ProFormMixinsItemContainer,
|
} from '@bole-core/components';
|
import { useQuery } from '@tanstack/vue-query';
|
import { useRouteView } from '@/hooks';
|
import { FormInstance } from 'element-plus';
|
import { validateFormList } from '@/utils';
|
|
defineOptions({
|
name: 'ServiceChargeSettle',
|
});
|
|
const route = useRoute();
|
const id = (route.params.id as string) ?? '';
|
|
const { closeViewPush } = useRouteView();
|
|
const form = reactive({
|
name: '',
|
money: 0,
|
});
|
|
const { isLoading } = useQuery({
|
queryKey: ['flexTaskServices/getFlexTaskDetail', id],
|
queryFn: async () => {
|
return await flexTaskServices.getFlexTaskDetail(
|
{ id: id },
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as API.GetFlexTaskDetailForBackOutput),
|
onSuccess(data) {},
|
enabled: !!id,
|
});
|
|
function handleBack() {
|
closeViewPush(route, {
|
name: 'ServiceChargeManageList',
|
});
|
}
|
const formRef = ref<FormInstance>();
|
async function handleSubmit() {
|
try {
|
const valid = await validateFormList([formRef.value]);
|
if (valid) {
|
//
|
}
|
} catch (error) {}
|
}
|
|
onMounted(() => {});
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
</style>
|
