<template>
|
<el-dialog v-model="dialogVisible" title="供应商银行账号配置" width="60%" destroy-on-close @close="handleClose"
|
:close-on-click-modal="false">
|
<el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" size="default"
|
class="form-container">
|
|
<el-form-item label="关联供应商" prop="supplierName">
|
<el-input v-model="form.supplierName" placeholder="请选择关联供应商" readonly class="search-input"
|
@click="openCustomerSelectDialog">
|
<template #suffix>
|
<el-icon class="el-input__icon" style="cursor: pointer;" @click="openCustomerSelectDialog">
|
<Search />
|
</el-icon>
|
</template>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="账号编号" prop="accountNo">
|
<el-input v-model="form.accountNo" placeholder="请输入账号编号" />
|
</el-form-item>
|
|
<el-form-item label="户名" prop="accountName">
|
<el-input v-model="form.accountName" placeholder="请输入户名" />
|
</el-form-item>
|
|
<el-form-item label="银行名称" prop="bankName">
|
<el-input v-model="form.bankName" placeholder="请输入开户银行名称" />
|
</el-form-item>
|
|
<el-form-item label="支行名称" prop="branchName">
|
<el-input v-model="form.branchName" placeholder="请输入支行名称" />
|
</el-form-item>
|
|
<el-form-item label="账号类型" prop="accountType">
|
<el-select v-model="form.accountType" placeholder="请选择账号类型" style="width: 100%;" clearable>
|
<el-option v-for="dict in sys_invoice_type" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="币种" prop="currency">
|
<el-select v-model="form.currency" placeholder="请选择币种" style="width: 100%;" clearable>
|
<el-option v-for="dict in sys_currency" :key="dict.value" :label="dict.label" :value="dict.value" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="账户状态" prop="status">
|
<el-select v-model="form.status" placeholder="请选择账户状态" style="width: 100%;" clearable>
|
<el-option v-for="dict in sys_bank_type" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<transportServiceDialog :visible="isCustomerSelectVisibleIshow" :default-selected-id="form.supplierId"
|
@confirm="handleCustomerSelect" @close="isCustomerSelectVisibleIshow = false" />
|
</template>
|
<script setup lang="ts">
|
import { ref, reactive, nextTick } from 'vue';
|
import type { FormInstance, FormRules } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
import transportServiceDialog from '../transportServiceDialog/index';
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
|
const { proxy } = useCurrentInstance();
|
// 移除了 sys_internal_type
|
const { sys_invoice_type, sys_currency, sys_bank_type } = proxy.useDict('sys_invoice_type', 'sys_currency', 'sys_bank_type');
|
|
// 弹窗控制
|
const dialogVisible = ref(false);
|
const isCustomerSelectVisibleIshow = ref(false);
|
|
// Emits
|
const emit = defineEmits(['close', 'submit']);
|
|
// 表单数据接口
|
interface InvoiceForm {
|
id?: string | number;
|
customerId?: string | number;
|
supplierName: string;
|
accountNo: string;
|
accountName: string;
|
accountType: string;
|
bankName: string;
|
branchName: string;
|
currency?: string;
|
status?: string;
|
}
|
|
const form = reactive<InvoiceForm>({
|
customerId: '',
|
supplierName: '',
|
accountNo: '',
|
accountName: '',
|
accountType: '',
|
bankName: '',
|
branchName: '',
|
id: '',
|
currency: '',
|
status: '',
|
});
|
|
// 表单校验规则
|
const formRules = reactive<FormRules>({
|
supplierName: [{ required: true, message: '请选择关联供应商', trigger: 'change' }],
|
accountNo: [{ required: true, message: '请输入账户编号', trigger: 'blur' }],
|
accountName: [{ required: true, message: '请输入户名', trigger: 'blur' }],
|
bankName: [{ required: true, message: '请输入银行名称', trigger: 'blur' }]
|
});
|
|
const formRef = ref<FormInstance>();
|
|
// 打开弹窗
|
const openDialog = (data?: Partial<InvoiceForm>) => {
|
dialogVisible.value = true;
|
nextTick(() => {
|
formRef.value?.resetFields();
|
if (data && Object.keys(data).length > 0) {
|
Object.assign(form, data);
|
formRef.value?.clearValidate();
|
} else {
|
resetForm();
|
}
|
});
|
};
|
|
const resetForm = () => {
|
Object.assign(form, {
|
customerId: '',
|
supplierName: '',
|
accountNo: '',
|
accountName: '',
|
accountType: '',
|
bankName: '',
|
branchName: '',
|
id: '',
|
currency: '',
|
status: ''
|
});
|
};
|
|
const openCustomerSelectDialog = () => {
|
isCustomerSelectVisibleIshow.value = true;
|
};
|
|
const handleCustomerSelect = (selectedCustomer) => {
|
form.supplierName = selectedCustomer.serviceName;
|
form.supplierId = selectedCustomer.id;
|
isCustomerSelectVisibleIshow.value = false;
|
};
|
|
const handleSubmit = async () => {
|
if (!formRef.value) return;
|
try {
|
const valid = await formRef.value.validate();
|
if (valid) {
|
emit('submit', { ...form });
|
}
|
} catch (error) {
|
console.error('校验失败', error);
|
}
|
};
|
|
const handleClose = () => {
|
dialogVisible.value = false;
|
formRef.value?.resetFields();
|
emit('close');
|
};
|
|
defineExpose({ openDialog, handleClose });
|
</script>
|
