<template>
|
<LoadingLayout :loading="isLoading">
|
<ProForm :model="form" ref="dialogForm" label-width="120px">
|
<ProFormItemV2
|
label="支付宝账号:"
|
prop="alipayAccount"
|
:checkRules="[{ message: '请输入支付宝账号' }]"
|
>
|
<div style="display: flex; width: 100%">
|
<ProFormText v-model.trim="form.alipayAccount" placeholder="请输入支付宝账号">
|
</ProFormText>
|
<el-button style="margin-left: 10px" type="primary" link @click="openEnterpriseWallet"
|
>获取签约链接</el-button
|
>
|
</div>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="支付宝姓名:"
|
prop="name"
|
:checkRules="[{ message: '请输入支付宝姓名' }]"
|
>
|
<ProFormText v-model.trim="form.name" placeholder="请输入支付宝姓名" />
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="商户ID:"
|
prop="alipayMerchantId"
|
:checkRules="[{ message: '请输入商户ID' }]"
|
>
|
<ProFormText v-model.trim="form.alipayMerchantId" placeholder="请输入商户ID" disabled />
|
</ProFormItemV2>
|
<ProFormItemV2 label="业务场景:" prop="scene" :checkRules="[{ message: '请选择业务场景' }]">
|
<ProFormSelect
|
v-model="form.scene"
|
:valueEnum="EnumEnterpriseWalletExpandindirectOrderSceneText"
|
placeholder="请选择业务场景"
|
>
|
</ProFormSelect>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="场景描述:"
|
prop="sceneDirections"
|
:checkRules="[{ message: '请输入场景描述' }]"
|
>
|
<ProFormText
|
v-model.trim="form.sceneDirections"
|
placeholder="谁/通过什么媒介（APP/web/小程序)/主要为谁提供什么服务/用于在什么场景给什么人群转账"
|
/>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="转账场景截图:"
|
prop="sceneFiles"
|
:check-rules="[{ type: 'upload', message: '请上传转账场景截图' }]"
|
>
|
<ProFormUpload
|
v-model:file-url="form.sceneFiles"
|
:limit="5"
|
:limitFileSize="10"
|
accept="png,jpg,jpeg,pdf"
|
></ProFormUpload>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="资质文件:"
|
prop="sceneQualificationFiles"
|
:check-rules="[{ type: 'upload', message: '请上传资质文件' }]"
|
>
|
<ProFormUpload
|
v-model:file-url="form.sceneQualificationFiles"
|
:limit="5"
|
:limitFileSize="10"
|
accept="png,jpg,jpeg,pdf"
|
></ProFormUpload>
|
</ProFormItemV2>
|
<ProFormItemV2 label="签约状态:" prop="signStatus" required>
|
<span>{{ EnumEnterpriseWalletSignStatusText[form.signStatus] }}</span>
|
<el-button
|
style="margin-left: 10px"
|
type="primary"
|
link
|
@click="refetch({ type: 'inactive' })"
|
>校验</el-button
|
>
|
</ProFormItemV2>
|
<ProFormItemV2 label="进件状态:" prop="expandindirectOrderStatus" required>
|
<span>{{
|
EnumEnterpriseWalletExpandindirectOrderStatusText[form.expandindirectOrderStatus]
|
}}</span>
|
<el-button
|
style="margin-left: 10px"
|
type="primary"
|
link
|
@click="refetch({ type: 'inactive' })"
|
>校验</el-button
|
>
|
</ProFormItemV2>
|
</ProForm>
|
<AlipayWalletOpen v-bind="dialogQrcodeProps"></AlipayWalletOpen>
|
</LoadingLayout>
|
</template>
|
|
<script setup lang="ts">
|
import { FormInstance } from 'element-plus';
|
import {
|
ProForm,
|
ProFormItemV2,
|
ProFormText,
|
LoadingLayout,
|
UploadUserFile,
|
ProFormSelect,
|
ProFormUpload,
|
useFormDialog,
|
} from '@bole-core/components';
|
import * as enterpriseWalletServices from '@/services/api/enterpriseWallet';
|
import { useQuery } from '@tanstack/vue-query';
|
import {
|
EnumEnterpriseWalletExpandindirectOrderSceneText,
|
EnumEnterpriseWalletSignStatusText,
|
EnumEnterpriseWalletExpandindirectOrderStatusText,
|
} from '@/constants';
|
import { convertWalletApiToFiles, convertWalletFilesToApi } from '@/utils';
|
import AlipayWalletOpen from './AlipayWalletOpen.vue';
|
|
defineOptions({
|
name: 'AliPayConfigureView',
|
});
|
|
type Props = {
|
id: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const dialogForm = ref<FormInstance>();
|
|
const form = reactive({
|
alipayAccount: '',
|
alipayMerchantId: '',
|
signStatus: '' as any as EnumEnterpriseWalletSignStatus,
|
expandindirectOrderStatus: '' as any as EnumEnterpriseWalletExpandindirectOrderStatus,
|
name: '',
|
scene: '' as any as EnumEnterpriseWalletExpandindirectOrderScene,
|
sceneDirections: '',
|
/**转账场景截图 */
|
sceneFiles: [] as UploadUserFile[],
|
/**商户行业资质图片或协议文本 */
|
sceneQualificationFiles: [] as UploadUserFile[],
|
});
|
|
const { isLoading, refetch } = useQuery({
|
queryKey: [
|
'enterpriseWalletServices/getEnterpriseWallet',
|
props.id,
|
EnumEnterpriseWalletAccess.Alipay,
|
],
|
queryFn: async (ctx) => {
|
return await enterpriseWalletServices.getEnterpriseWallet({
|
enterpriseId: props.id,
|
access: EnumEnterpriseWalletAccess.Alipay,
|
});
|
},
|
onSuccess(data) {
|
form.alipayAccount = data.identity;
|
form.alipayMerchantId = data.code;
|
form.expandindirectOrderStatus = data.expandindirectOrderStatus;
|
form.signStatus = data.signStatus;
|
form.name = data.name;
|
form.scene = data.scene || EnumEnterpriseWalletExpandindirectOrderScene.YONGJIN_BAOCHOU;
|
form.name = data.sceneDirections;
|
form.sceneFiles = convertWalletApiToFiles(
|
data.files,
|
EnumEnterpriseWalletExpandindirectOrderFileType.Scene
|
);
|
form.sceneQualificationFiles = convertWalletApiToFiles(
|
data.files,
|
EnumEnterpriseWalletExpandindirectOrderFileType.SceneQualification
|
);
|
},
|
});
|
|
const { dialogProps: dialogQrcodeProps, handleAdd } = useFormDialog({
|
defaultFormParams: {
|
alipayUrl: '',
|
},
|
});
|
|
async function openEnterpriseWallet() {
|
try {
|
let params: API.OpenEnterpriseWalletCommand = {
|
access: EnumEnterpriseWalletAccess.Alipay,
|
enterpriseId: props.id,
|
};
|
let res = await enterpriseWalletServices.openEnterpriseWallet(params);
|
if (res) {
|
handleAdd({
|
alipayUrl: res.signUrl,
|
});
|
}
|
} catch (error) {}
|
}
|
|
async function enterpriseWalletExpandindirectCreate() {
|
try {
|
if (!dialogForm.value) return;
|
const valid = await dialogForm.value.validate();
|
if (!valid) return;
|
let params: API.EnterpriseWalletExpandindirectCreateCommand = {
|
enterpriseId: props.id,
|
identity: form.alipayAccount,
|
name: form.name,
|
scene: form.scene,
|
sceneDirections: form.sceneDirections,
|
sitesInfo: null,
|
files: [
|
...convertWalletFilesToApi(
|
form.sceneFiles,
|
EnumEnterpriseWalletExpandindirectOrderFileType.Scene
|
),
|
...convertWalletFilesToApi(
|
form.sceneQualificationFiles,
|
EnumEnterpriseWalletExpandindirectOrderFileType.SceneQualification
|
),
|
],
|
};
|
let res = await enterpriseWalletServices.enterpriseWalletExpandindirectCreate(params);
|
return res;
|
} catch (error) {}
|
}
|
|
defineExpose({
|
onConfirm: enterpriseWalletExpandindirectCreate,
|
});
|
</script>
|
