<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">
|
<ProFormDatePicker v-model="form.auditTime" type="date" format="YYYY-MM-DD HH:mm" />
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2
|
label="上传凭证:"
|
prop="payAuditFileUrl"
|
:check-rules="[
|
{
|
message: '请上传凭证',
|
type: 'upload',
|
},
|
]"
|
>
|
<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 } from '@/utils';
|
import {
|
EnumParkBountyTradeDetailAuditStatus,
|
EnumParkBountyTradeDetailAuditStatusTextForAdudit,
|
EnterpriseType,
|
} from '@/constants';
|
|
defineOptions({
|
name: 'WithdrawalApprovalAuditDialog',
|
});
|
|
// type Props = {};
|
|
// 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;
|
remianAmount: number;
|
tradeTime: string;
|
auditTime: string;
|
payRemark: string;
|
payFileUrl: UploadUserFile[];
|
};
|
|
const form = defineModel<Form>('form');
|
|
const emit = defineEmits<{
|
(e: 'onConfirm'): void;
|
(e: 'onCancel'): void;
|
}>();
|
|
const { portraitTableWithAttachmentProps } = usePortraitTableWithAttachment({
|
data: form,
|
annexList: computed(() => form.value?.payFileUrl),
|
columns: [
|
{
|
label: '进账单位',
|
key: 'enterpriseName',
|
formatter: () => '太平财产保险有限公司抚州中心支公司',
|
},
|
{
|
label: '开户名称',
|
key: 'societyCreditCode',
|
formatter: () => '太平财产保险有限公司抚州中心支公司',
|
},
|
{
|
label: '开户银行',
|
key: 'contactPhone',
|
formatter: () => '中国工商银行股份有限公司抚州赣东支行',
|
},
|
{
|
label: '开户账号',
|
key: 'userName',
|
formatter: () => '1511 2001 2920 0156 069',
|
},
|
// {
|
// label: '企业类型',
|
// key: 'authType',
|
// type: 'enum',
|
// valueEnum: EnterpriseTypeText,
|
// },
|
// {
|
// label: '所属园区',
|
// key: 'parkName',
|
// },
|
// {
|
// label: '园区类型',
|
// key: 'parkTypeName',
|
// },
|
{
|
label: '消费类型',
|
key: 'payRemark',
|
},
|
{
|
label: '出账审核日期',
|
key: 'tradeTime',
|
type: 'date',
|
},
|
{
|
label: '出账金额',
|
key: 'tradeAmount',
|
type: 'money',
|
},
|
{
|
label: '资金余额',
|
key: 'remianAmount',
|
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;
|
}
|
});
|
}
|
|
function handleApply() {
|
copyTextToClipboard(
|
`开户名称：${'太平财产保险有限公司抚州中心支公司'}\n开户银行：${'中国工商银行股份有限公司抚州赣东支行'}\n开户账号：${'1511 2001 2920 0156 069'}`
|
);
|
}
|
</script>
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.portrait-table-with-attachment-title {
|
justify-content: space-between;
|
}
|
</style>
|
