<template>
|
<LoadingLayout :loading="isLoading">
|
<AppContainer>
|
<PageFormLayout title="账户信息">
|
<ProForm :model="form" ref="formRef" label-width="140px" :is-read="isDetail">
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="账户名称:" prop="name" mode="read">
|
<ProFormText v-model.trim="form.name" placeholder="请输入账户名称" />
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2
|
label="开户总行:"
|
prop="bank"
|
:check-rules="[{ message: '请输入开户总行' }]"
|
>
|
<ProFormText v-model.trim="form.bank" placeholder="请输入开户总行" />
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2
|
label="开户支行:"
|
prop="bankBranch"
|
:check-rules="[{ message: '请输入开户支行' }]"
|
>
|
<ProFormText v-model.trim="form.bankBranch" placeholder="请输入开户支行" />
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2
|
label="户号:"
|
prop="account"
|
:check-rules="[{ message: '请输入户号', type: 'bankCard' }]"
|
>
|
<ProFormText v-model.trim="form.account" placeholder="请输入户号" />
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
</ProForm>
|
<template #footer>
|
<el-button v-if="isDetail" type="primary" @click="isDetail = false">编辑</el-button>
|
<el-button v-else type="primary" @click="handleConfirm()">保存</el-button>
|
</template>
|
</PageFormLayout>
|
</AppContainer>
|
</LoadingLayout>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
LoadingLayout,
|
AppContainer,
|
PageFormLayout,
|
ProForm,
|
ProFormCol,
|
ProFormColItem,
|
ProFormItemV2,
|
ProFormInputNumber,
|
ProFormRadio,
|
ProFormText,
|
} from '@bole-core/components';
|
import { useQuery } from '@tanstack/vue-query';
|
import * as smsServices from '@/services/api/sms';
|
import { FormInstance } from 'element-plus';
|
import { Message } from '@bole-core/core';
|
import * as enterpriseCooperationWalletServices from '@/services/api/enterpriseCooperationWallet';
|
|
defineOptions({
|
name: 'AccountManage',
|
});
|
|
const { userDetail } = useUser();
|
|
const form = reactive({
|
name: '',
|
bank: '',
|
bankBranch: '',
|
account: '',
|
});
|
|
const isDetail = ref(true);
|
|
const { isLoading } = useQuery({
|
queryKey: ['enterpriseCooperationWalletServices/getEnterpriseReceiveAccount'],
|
queryFn: async () => {
|
return await enterpriseCooperationWalletServices.getEnterpriseReceiveAccount(
|
{},
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as API.GetEnterpriseReceiveAccountQueryResult),
|
onSuccess(data) {
|
form.name = data.name;
|
form.bank = data.bank;
|
form.bankBranch = data.bankBranch;
|
form.account = data.account;
|
},
|
});
|
|
const formRef = ref<FormInstance>();
|
|
function handleConfirm() {
|
if (!formRef.value) return;
|
formRef.value.validate((valid) => {
|
if (valid) {
|
submit();
|
} else {
|
return;
|
}
|
});
|
}
|
|
async function submit() {
|
try {
|
let params: API.SaveEnterpriseReceiveAccountCommand = {
|
bank: form.bank,
|
bankBranch: form.bankBranch,
|
account: form.account,
|
};
|
let res = await enterpriseCooperationWalletServices.saveEnterpriseReceiveAccount(params);
|
if (res) {
|
Message.successMessage('操作成功');
|
isDetail.value = true;
|
}
|
} catch (error) {}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.access-list {
|
flex: 1;
|
min-width: 0;
|
|
:deep() {
|
.el-form-item__content {
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
}
|
|
.access-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
|
.access-item-label {
|
margin-right: 20px;
|
word-break: keep-all;
|
}
|
|
:deep() {
|
.el-radio-group {
|
margin-right: 20px;
|
}
|
}
|
}
|
</style>
|
