<template>
|
<ProDialog
|
:title="form.title"
|
v-model="visible"
|
@close="onDialogClose"
|
destroy-on-close
|
draggable
|
>
|
<PortraitTableWithAttachment v-bind="portraitTableWithAttachmentProps" labelWidth="100px">
|
<template #title>
|
<el-row class="portrait-table-with-attachment-title">
|
<el-text style="color: #333333">打款信息</el-text>
|
<el-button type="primary" link @click="handleApply">复制</el-button>
|
</el-row>
|
</template>
|
</PortraitTableWithAttachment>
|
<ProForm
|
:model="form"
|
ref="dialogForm"
|
label-width="90px"
|
style="margin-top: 20px"
|
:is-read="form.isCheck"
|
>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2
|
label="审核:"
|
prop="auditStatus"
|
:check-rules="[{ message: '请选择审核状态' }]"
|
>
|
<ProFormRadio
|
v-model="form.auditStatus"
|
:value-enum="EnumParkBountyTradeDetailAuditStatusTextForAdudit"
|
/>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol v-if="form.isCheck">
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="审核日期:" prop="auditTime" v-if="isApplyTrade">
|
<ProFormDatePicker v-model="form.auditTime" type="date" format="YYYY-MM-DD HH:mm" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="审核日期:" prop="financeAuditTime" v-else>
|
<ProFormDatePicker
|
v-model="form.financeAuditTime"
|
type="date"
|
format="YYYY-MM-DD HH:mm"
|
/>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2
|
label="上传凭证:"
|
prop="payAuditFileUrl"
|
:required="!isApplyTrade"
|
:check-rules="
|
!isApplyTrade
|
? [
|
{
|
message: '请上传凭证',
|
type: 'upload',
|
},
|
]
|
: undefined
|
"
|
>
|
<ProFormUpload
|
v-model:file-url="form.payAuditFileUrl"
|
:limit="1"
|
:showTip="false"
|
:limitFileSize="50"
|
></ProFormUpload>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
|
<ProFormCol>
|
<ProFormColItem>
|
<ProFormItemV2
|
label="审核理由:"
|
prop="auditRemark"
|
:required="form.auditStatus === EnumParkBountyTradeDetailAuditStatus.Reject"
|
:check-rules="[
|
{
|
message: '请输入审核理由',
|
validator: (rule, value, callback) => {
|
if (!value && form.auditStatus === EnumParkBountyTradeDetailAuditStatus.Reject) {
|
callback(new Error('请输入驳回理由'));
|
}
|
callback();
|
},
|
},
|
]"
|
>
|
<ProFormTextArea
|
v-model="form.auditRemark"
|
placeholder="请输入"
|
show-word-limit
|
:maxlength="150"
|
></ProFormTextArea>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
</ProForm>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="emit('onCancel')">取 消</el-button>
|
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
</span>
|
</template>
|
</ProDialog>
|
</template>
|
|
<script setup lang="ts">
|
import { FormInstance } from 'element-plus';
|
import {
|
ProDialog,
|
ProForm,
|
ProFormItemV2,
|
ProFormTextArea,
|
ProFormCol,
|
ProFormColItem,
|
ProFormRadio,
|
ProFormUpload,
|
ProFormDatePicker,
|
UploadUserFile,
|
} from '@bole-core/components';
|
import { usePortraitTableWithAttachment } from '@/hooks';
|
import { copyTextToClipboard, StringUtils } from '@/utils';
|
import {
|
EnumParkBountyTradeDetailAuditStatus,
|
EnumParkBountyTradeDetailAuditStatusTextForAdudit,
|
EnterpriseType,
|
} from '@/constants';
|
import { Message } from '@bole-core/core';
|
|
defineOptions({
|
name: 'RewardApplyTradeCheckDialog',
|
});
|
|
type Props = {
|
//true 出账审批 false 财务审批
|
isApplyTrade?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const visible = defineModel({ type: Boolean });
|
|
type Form = {
|
title?: string;
|
id: string;
|
auditStatus: EnumParkBountyTradeDetailAuditStatus;
|
auditRemark: string;
|
payAuditFileUrl: UploadUserFile[];
|
isCheck: boolean;
|
userName: string;
|
enterpriseName: string;
|
societyCreditCode: string;
|
contactPhone: string;
|
authType: EnterpriseType;
|
parkName: string;
|
parkTypeName: string;
|
tradeAmount: number;
|
bountyAmount: number;
|
tradeTime: string;
|
auditTime: string;
|
financeAuditTime: string;
|
payRemark: string;
|
payFileUrl: UploadUserFile[];
|
|
incomeCompanyName: string;
|
insureBillNo: string;
|
incomeBankAccount: string;
|
incomeBankCardNumber: string;
|
incomeBankName: string;
|
creationTime: string;
|
};
|
|
const form = defineModel<Form>('form');
|
|
const emit = defineEmits<{
|
(e: 'onConfirm'): void;
|
(e: 'onCancel'): void;
|
}>();
|
|
function getIncomeCompanyName(row: Form) {
|
return row.id === '52febfa5-1df6-23d6-21fd-3a1cfdef4222'
|
? '中国大地财产保险股份有限公司深圳分公司'
|
: row.incomeCompanyName ?? '太平财产保险有限公司抚州中心支公司';
|
}
|
|
function getIncomeBankAccount(row: Form) {
|
return row.id === '52febfa5-1df6-23d6-21fd-3a1cfdef4222'
|
? '中国大地财产保险股份有限公司深圳分公司'
|
: row.incomeBankAccount ?? '太平财产保险有限公司抚州中心支公司';
|
}
|
|
function getIncomeBankName(row: Form) {
|
return row.id === '52febfa5-1df6-23d6-21fd-3a1cfdef4222'
|
? '中国工商银行股份有限公司深圳喜年支行'
|
: row.incomeBankName ?? '中国工商银行股份有限公司抚州赣东支行';
|
}
|
|
function getIncomeBankCardNumber(row: Form) {
|
return row.id === '52febfa5-1df6-23d6-21fd-3a1cfdef4222'
|
? StringUtils.insertSpaces('4000032419200171762')
|
: StringUtils.insertSpaces(row.incomeBankCardNumber ?? '1511200129200156069');
|
}
|
|
const { portraitTableWithAttachmentProps } = usePortraitTableWithAttachment({
|
data: form,
|
annexList: computed(() => form.value?.payFileUrl),
|
columns: [
|
{
|
label: '进账单位',
|
key: 'incomeCompanyName',
|
formatter: (row) => getIncomeCompanyName(row),
|
},
|
{
|
label: '开户名称',
|
key: 'incomeBankAccount',
|
formatter: (row) => getIncomeBankAccount(row),
|
},
|
{
|
label: '开户银行',
|
key: 'incomeBankName',
|
formatter: (row) => getIncomeBankName(row),
|
},
|
{
|
label: '开户账号',
|
key: 'incomeBankCardNumber',
|
formatter: (row) => getIncomeBankCardNumber(row),
|
},
|
// {
|
// label: '企业类型',
|
// key: 'authType',
|
// type: 'enum',
|
// valueEnum: EnterpriseTypeText,
|
// },
|
// {
|
// label: '所属园区',
|
// key: 'parkName',
|
// },
|
// {
|
// label: '园区类型',
|
// key: 'parkTypeName',
|
// },
|
{
|
label: '消费类型',
|
key: 'payRemark',
|
},
|
{
|
label: '保单号',
|
key: 'insureBillNo',
|
},
|
{
|
label: '出账申请日期',
|
key: 'tradeTime',
|
type: 'date',
|
},
|
props.isApplyTrade
|
? {
|
label: '',
|
}
|
: {
|
label: '出账审核日期',
|
key: 'auditTime',
|
type: 'date',
|
},
|
{
|
label: '出账金额',
|
key: 'tradeAmount',
|
type: 'money',
|
},
|
{
|
label: '资金余额',
|
key: 'bountyAmount',
|
type: 'money',
|
},
|
],
|
});
|
|
const dialogForm = ref<FormInstance>();
|
|
function onDialogClose() {
|
if (!dialogForm.value) return;
|
dialogForm.value.resetFields();
|
}
|
|
function handleConfirm() {
|
if (!dialogForm.value) return;
|
if (form.value?.isCheck) {
|
emit('onCancel');
|
return;
|
}
|
dialogForm.value.validate((valid) => {
|
if (valid) {
|
emit('onConfirm');
|
} else {
|
return;
|
}
|
});
|
}
|
|
async function handleApply() {
|
try {
|
const content = `开户名称：${getIncomeCompanyName(form.value)}\n开户银行：${getIncomeBankName(
|
form.value
|
)}\n开户账号：${getIncomeBankCardNumber(form.value)}`;
|
await Message.tipMessage(content, { title: '复制内容' });
|
copyTextToClipboard(content);
|
} catch (error) {}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.portrait-table-with-attachment-title {
|
justify-content: space-between;
|
}
|
</style>
|
