gxwebsoft
3cb365253b
- 将站点所有附件上传按钮移至表格下方左侧，与批量下载按钮分开，布局统一 - 统一附件上传按钮旁提示文案格式，改为同一行按钮右侧显示，间距固定30px，文本左对齐 - 统一附件上传支持文件格式说明为“支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式，单个文件不超过500M” - 统一单个附件文件大小限制改为500M，涉及多页面文件修改 - 恢复vehicle-attachment-upload组件showTip属性门控，支持按需隐藏提示 - 修复master-order编辑页附件上传按钮与描述文字排列，改为单行且按钮左侧描述右侧排列 - 优化customer-archive客商材料上传按钮及提示的布局，按钮左、提示右，间距30px，超长文案省略 - 调整部分页面缩进与标签样式，提升视觉一致性 - 修改部分组件及页面的css样式，适配上述布局与样式调整
600 lines
21 KiB
Vue
600 lines
21 KiB
Vue
<template>
|
|
<basic-container class="bill-ledger-form-page">
|
|
<div class="archive-page-form__title">
|
|
{{ recordId ? '编辑汇票台账' : '新增汇票台账' }}
|
|
</div>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-position="right"
|
|
label-width="auto"
|
|
class="bill-ledger-form-page__form"
|
|
>
|
|
<section-card title="基本信息">
|
|
<el-row :gutter="24">
|
|
<el-col :span="6">
|
|
<el-form-item label="票据号码" prop="billNo">
|
|
<el-input
|
|
v-model="form.billNo"
|
|
:disabled="Boolean(recordId)"
|
|
maxlength="32"
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="出票单位" prop="issuerId">
|
|
<el-select
|
|
v-model="form.issuerId"
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
:remote-method="searchCustomers"
|
|
:loading="customerLoading"
|
|
placeholder="请选择客商基础档案"
|
|
>
|
|
<el-option
|
|
v-for="item in customerOptions"
|
|
:key="item.id"
|
|
:label="customerName(item)"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="票面金额" prop="faceAmount">
|
|
<el-input-number
|
|
v-model="form.faceAmount"
|
|
:min="0"
|
|
:precision="2"
|
|
:controls="false"
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="出票日期" prop="issueDate">
|
|
<el-date-picker
|
|
v-model="form.issueDate"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
placeholder="请选择"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="可用部门" prop="availableDeptIds">
|
|
<el-tree-select
|
|
v-model="form.availableDeptIds"
|
|
:data="deptTree"
|
|
:props="deptProps"
|
|
node-key="id"
|
|
multiple
|
|
show-checkbox
|
|
collapse-tags
|
|
collapse-tags-tooltip
|
|
placeholder="请选择，默认全部"
|
|
@change="handleDeptChange"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="费用承担方" prop="feeBearerId">
|
|
<el-select
|
|
v-model="form.feeBearerId"
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
:remote-method="searchCustomers"
|
|
:loading="customerLoading"
|
|
placeholder="请选择客商基础档案"
|
|
>
|
|
<el-option
|
|
v-for="item in customerOptions"
|
|
:key="item.id"
|
|
:label="customerName(item)"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="双方确认贴现率" prop="confirmedDiscountRate">
|
|
<el-input-number
|
|
v-model="form.confirmedDiscountRate"
|
|
:min="0"
|
|
:max="100"
|
|
:precision="4"
|
|
:controls="false"
|
|
placeholder="请输入"
|
|
>
|
|
<template #suffix>%</template>
|
|
</el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="汇票类型" prop="billType">
|
|
<el-select v-model="form.billType" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in billTypeOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="收票单位" prop="receiverName">
|
|
<el-select
|
|
v-model="form.receiverName"
|
|
filterable
|
|
allow-create
|
|
default-first-option
|
|
placeholder="请选择或输入"
|
|
>
|
|
<el-option
|
|
v-for="item in receiverOptions"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="可用余额">
|
|
<el-input :model-value="formatMoney(projectedAvailableBalance)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="到期日期" prop="maturityDate">
|
|
<el-date-picker
|
|
v-model="form.maturityDate"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
placeholder="请选择"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="出票行" prop="issuingBank">
|
|
<el-select
|
|
v-model="form.issuingBank"
|
|
filterable
|
|
allow-create
|
|
default-first-option
|
|
placeholder="请选择或输入"
|
|
>
|
|
<el-option v-for="item in bankOptions" :key="item" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="银行贴现参考率" prop="bankDiscountReferenceRate">
|
|
<el-input-number
|
|
v-model="form.bankDiscountReferenceRate"
|
|
:min="0"
|
|
:max="100"
|
|
:precision="4"
|
|
:controls="false"
|
|
placeholder="请输入"
|
|
>
|
|
<template #suffix>%</template>
|
|
</el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="预计贴现费用">
|
|
<el-input :model-value="formatMoney(estimatedDiscountFee)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</section-card>
|
|
|
|
<section-card title="附件信息">
|
|
<el-table :data="form.attachments" border>
|
|
<el-table-column type="index" label="序号" width="64" align="center" />
|
|
<el-table-column label="文件名" min-width="220">
|
|
<template #default="{ row }">
|
|
<el-link
|
|
v-if="row.url || row.link"
|
|
type="primary"
|
|
:href="row.url || row.link"
|
|
target="_blank"
|
|
>
|
|
{{ row.originalName || row.name || '附件' }}
|
|
</el-link>
|
|
<span v-else>{{ row.originalName || row.name || '-' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="附件描述" min-width="240">
|
|
<template #default="{ row }">
|
|
<el-input v-model="row.description" maxlength="200" placeholder="请输入" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="文件大小" width="120" align="center">
|
|
<template #default="{ row }">{{ fileSize(row) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="uploadUserName" label="上传人" width="130" align="center" />
|
|
<el-table-column prop="uploadTime" label="上传时间" width="170" align="center" />
|
|
<el-table-column label="操作" width="100" align="center">
|
|
<template #default="{ $index }">
|
|
<el-link type="danger" @click="form.attachments.splice($index, 1)">删除</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<vehicle-attachment-upload
|
|
v-model="form.attachments"
|
|
class="bill-ledger-form-page__uploader"
|
|
:multiple="true"
|
|
:limit="20"
|
|
:max-size="500"
|
|
:file-types="attachmentFileTypes"
|
|
:show-file-list="false"
|
|
button-text="上传"
|
|
@change="normalizeAttachments"
|
|
/>
|
|
</section-card>
|
|
|
|
<section-card title="备注">
|
|
<el-form-item prop="remark" class="bill-ledger-form-page__remark">
|
|
<el-input
|
|
v-model="form.remark"
|
|
type="textarea"
|
|
:rows="4"
|
|
maxlength="200"
|
|
show-word-limit
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
</section-card>
|
|
|
|
<section-card title="使用记录">
|
|
<el-table :data="usageRecords" border>
|
|
<el-table-column type="index" label="序号" width="64" align="center" />
|
|
<el-table-column prop="applicationNo" label="申请单号" min-width="180" align="center" />
|
|
<el-table-column label="使用金额" min-width="150" align="center">
|
|
<template #default="{ row }">{{ formatMoney(row.usedAmount) }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="useDeptName" label="使用部门" min-width="180" align="center" />
|
|
<el-table-column label="状态" min-width="120" align="center">
|
|
<template #default>已审核</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</section-card>
|
|
|
|
<div class="bill-ledger-form-page__actions">
|
|
<el-button type="primary" :loading="saving" @click="confirmSubmit">确认</el-button>
|
|
<el-button @click="goBack">取消</el-button>
|
|
</div>
|
|
</el-form>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import * as api from '@/api/payment/billLedger';
|
|
import { getList as getCustomerList } from '@/api/vehicle/customer-archive';
|
|
import { getDeptTree } from '@/api/system/dept';
|
|
|
|
const emptyForm = () => ({
|
|
id: null,
|
|
billNo: '',
|
|
issuerId: null,
|
|
receiverName: '',
|
|
billType: 'issued',
|
|
faceAmount: null,
|
|
availableBalance: 0,
|
|
issueDate: '',
|
|
maturityDate: '',
|
|
availableDeptIds: ['all'],
|
|
availableDeptNames: '全部',
|
|
feeBearerId: null,
|
|
confirmedDiscountRate: null,
|
|
issuingBank: '',
|
|
bankDiscountReferenceRate: null,
|
|
attachments: [],
|
|
remark: '',
|
|
});
|
|
|
|
export default {
|
|
name: 'BillLedgerForm',
|
|
data() {
|
|
return {
|
|
form: emptyForm(),
|
|
usageRecords: [],
|
|
billTypeOptions: api.billTypeOptions,
|
|
customerOptions: [],
|
|
receiverOptions: [],
|
|
customerLoading: false,
|
|
saving: false,
|
|
deptTree: [],
|
|
deptMap: new Map(),
|
|
deptProps: { label: 'title', value: 'id', children: 'children' },
|
|
bankOptions: [
|
|
'中国工商银行',
|
|
'中国农业银行',
|
|
'中国银行',
|
|
'中国建设银行',
|
|
'交通银行',
|
|
'招商银行',
|
|
'浦发银行',
|
|
'中信银行',
|
|
],
|
|
attachmentFileTypes: [
|
|
'pdf',
|
|
'bmp',
|
|
'jpeg',
|
|
'png',
|
|
'jpg',
|
|
'doc',
|
|
'docx',
|
|
'ppt',
|
|
'pptx',
|
|
'xlsx',
|
|
'xls',
|
|
'eml',
|
|
'msg',
|
|
'zip',
|
|
],
|
|
rules: {
|
|
billNo: [
|
|
{ required: true, message: '请输入票据号码', trigger: 'blur' },
|
|
{ max: 32, message: '票据号码不能超过32个字符', trigger: 'blur' },
|
|
],
|
|
issuerId: [{ required: true, message: '请选择出票单位', trigger: 'change' }],
|
|
receiverName: [{ required: true, message: '请选择或输入收票单位', trigger: 'change' }],
|
|
billType: [{ required: true, message: '请选择汇票类型', trigger: 'change' }],
|
|
faceAmount: [{ validator: this.validateFaceAmount, trigger: 'change' }],
|
|
issueDate: [{ required: true, message: '请选择出票日期', trigger: 'change' }],
|
|
maturityDate: [{ validator: this.validateMaturityDate, trigger: 'change' }],
|
|
availableDeptIds: [{ validator: this.validateDepartments, trigger: 'change' }],
|
|
feeBearerId: [{ required: true, message: '请选择费用承担方', trigger: 'change' }],
|
|
confirmedDiscountRate: [{ validator: this.validateRate, trigger: 'change' }],
|
|
issuingBank: [
|
|
{ required: true, message: '请选择或输入出票行', trigger: 'change' },
|
|
{ max: 100, message: '出票行不能超过100个字符', trigger: 'change' },
|
|
],
|
|
bankDiscountReferenceRate: [{ validator: this.validateRate, trigger: 'change' }],
|
|
remark: [{ max: 200, message: '备注不能超过200个字符', trigger: 'blur' }],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo']),
|
|
recordId() {
|
|
return this.$route.query.id || '';
|
|
},
|
|
activeUsedAmount() {
|
|
return this.usageRecords.reduce((total, item) => total + Number(item.usedAmount || 0), 0);
|
|
},
|
|
projectedAvailableBalance() {
|
|
return Math.max(Number(this.form.faceAmount || 0) - this.activeUsedAmount, 0);
|
|
},
|
|
estimatedDiscountFee() {
|
|
return (
|
|
(Number(this.form.faceAmount || 0) * Number(this.form.confirmedDiscountRate || 0)) / 100
|
|
);
|
|
},
|
|
},
|
|
created() {
|
|
this.initialize();
|
|
},
|
|
methods: {
|
|
unwrapData(response) {
|
|
const body = response?.data || response || {};
|
|
return body?.data || body;
|
|
},
|
|
async initialize() {
|
|
await Promise.all([this.loadDepartments(), this.searchCustomers('')]);
|
|
if (!this.recordId) {
|
|
this.form.issueDate = this.$dayjs().format('YYYY-MM-DD');
|
|
return;
|
|
}
|
|
const data = this.unwrapData(await api.getDetail(this.recordId));
|
|
this.form = {
|
|
...emptyForm(),
|
|
...data,
|
|
availableDeptIds: this.parse(data.availableDeptIdsJson),
|
|
attachments: this.parse(data.attachmentsJson),
|
|
};
|
|
this.usageRecords = data.usageRecords || [];
|
|
this.receiverOptions = data.receiverName ? [data.receiverName] : [];
|
|
this.ensureCustomerOption(data.issuerId, data.issuerName);
|
|
this.ensureCustomerOption(data.feeBearerId, data.feeBearerName);
|
|
this.handleDeptChange(this.form.availableDeptIds);
|
|
},
|
|
parse(value) {
|
|
if (!value) return [];
|
|
if (Array.isArray(value)) return value;
|
|
try {
|
|
return JSON.parse(value) || [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
},
|
|
async loadDepartments() {
|
|
const response = await getDeptTree(this.userInfo?.tenantId);
|
|
const rows = this.unwrapData(response) || [];
|
|
this.deptTree = [{ id: 'all', title: '全部', children: rows }];
|
|
this.deptMap = new Map([['all', '全部']]);
|
|
this.flattenDepartments(rows).forEach(item => this.deptMap.set(String(item.id), item.title));
|
|
},
|
|
flattenDepartments(rows) {
|
|
return (rows || []).flatMap(item => [item, ...this.flattenDepartments(item.children || [])]);
|
|
},
|
|
handleDeptChange(values) {
|
|
const ids = values || [];
|
|
this.form.availableDeptNames = ids.some(item => String(item) === 'all')
|
|
? '全部'
|
|
: ids
|
|
.map(item => this.deptMap.get(String(item)))
|
|
.filter(Boolean)
|
|
.join('、');
|
|
},
|
|
async searchCustomers(keyword) {
|
|
this.customerLoading = true;
|
|
try {
|
|
const data = this.unwrapData(
|
|
await getCustomerList(1, 100, { approvalStatus: 'approved', fullName: keyword || '' })
|
|
);
|
|
const current = this.customerOptions.filter(item =>
|
|
[this.form.issuerId, this.form.feeBearerId].some(id => String(id) === String(item.id))
|
|
);
|
|
this.customerOptions = [...current, ...(data.records || [])].filter(
|
|
(item, index, rows) => rows.findIndex(row => String(row.id) === String(item.id)) === index
|
|
);
|
|
this.receiverOptions = [
|
|
...new Set(this.customerOptions.map(item => this.customerName(item)).filter(Boolean)),
|
|
];
|
|
} finally {
|
|
this.customerLoading = false;
|
|
}
|
|
},
|
|
ensureCustomerOption(id, name) {
|
|
if (!id || this.customerOptions.some(item => String(item.id) === String(id))) return;
|
|
this.customerOptions.push({ id, fullName: name, shortName: name });
|
|
},
|
|
customerName(item) {
|
|
return item.fullName || item.shortName || item.customerCode || '-';
|
|
},
|
|
validateFaceAmount(rule, value, callback) {
|
|
if (!Number.isFinite(Number(value)) || Number(value) <= 0) {
|
|
callback(new Error('票面金额必须大于0'));
|
|
return;
|
|
}
|
|
if (Number(value) < this.activeUsedAmount) {
|
|
callback(new Error('票面金额不能小于已使用金额'));
|
|
return;
|
|
}
|
|
callback();
|
|
},
|
|
validateMaturityDate(rule, value, callback) {
|
|
if (!value) {
|
|
callback(new Error('请选择到期日期'));
|
|
return;
|
|
}
|
|
if (this.form.issueDate && !this.$dayjs(value).isAfter(this.$dayjs(this.form.issueDate))) {
|
|
callback(new Error('到期日期必须晚于出票日期'));
|
|
return;
|
|
}
|
|
callback();
|
|
},
|
|
validateDepartments(rule, value, callback) {
|
|
if (!Array.isArray(value) || !value.length) {
|
|
callback(new Error('请选择可用部门'));
|
|
return;
|
|
}
|
|
callback();
|
|
},
|
|
validateRate(rule, value, callback) {
|
|
if (value !== null && value !== undefined && value !== '') {
|
|
const rate = Number(value);
|
|
if (!Number.isFinite(rate) || rate < 0 || rate > 100) {
|
|
callback(new Error('贴现率必须在0-100之间'));
|
|
return;
|
|
}
|
|
}
|
|
callback();
|
|
},
|
|
normalizeAttachments(files) {
|
|
const userName = this.userInfo?.realName || this.userInfo?.userName || '';
|
|
const time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
this.form.attachments = (files || []).map(file => ({
|
|
...file,
|
|
description: file.description || '',
|
|
uploadUserName: file.uploadUserName || userName,
|
|
uploadTime: file.uploadTime || time,
|
|
}));
|
|
},
|
|
fileSize(file) {
|
|
if (typeof file.size === 'string' && /[a-z]/i.test(file.size)) return file.size;
|
|
const bytes = Number(file.size || file.fileSize || 0);
|
|
if (!bytes) return '-';
|
|
if (bytes < 1024) return `${bytes}B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
|
|
return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
|
|
},
|
|
payload() {
|
|
return {
|
|
id: this.form.id,
|
|
billNo: this.form.billNo,
|
|
issuerId: this.form.issuerId,
|
|
receiverName: this.form.receiverName,
|
|
billType: this.form.billType,
|
|
faceAmount: this.form.faceAmount,
|
|
issueDate: this.form.issueDate,
|
|
maturityDate: this.form.maturityDate,
|
|
availableDeptIdsJson: JSON.stringify(this.form.availableDeptIds || []),
|
|
availableDeptNames: this.form.availableDeptNames,
|
|
feeBearerId: this.form.feeBearerId,
|
|
confirmedDiscountRate: this.form.confirmedDiscountRate,
|
|
issuingBank: this.form.issuingBank,
|
|
bankDiscountReferenceRate: this.form.bankDiscountReferenceRate,
|
|
attachmentsJson: JSON.stringify(this.form.attachments || []),
|
|
remark: this.form.remark,
|
|
};
|
|
},
|
|
async confirmSubmit() {
|
|
await this.$refs.formRef.validate();
|
|
this.saving = true;
|
|
try {
|
|
await api.submit(this.payload());
|
|
this.$message.success(this.recordId ? '编辑成功' : '新增成功');
|
|
this.goBack();
|
|
} finally {
|
|
this.saving = false;
|
|
}
|
|
},
|
|
goBack() {
|
|
this.$router.push('/payment/bill-ledger');
|
|
},
|
|
formatMoney(value) {
|
|
return Number(value || 0).toFixed(2);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.bill-ledger-form-page__form :deep(.el-form-item) {
|
|
margin-bottom: 16px;
|
|
}
|
|
.bill-ledger-form-page__form :deep(.el-input),
|
|
.bill-ledger-form-page__form :deep(.el-select),
|
|
.bill-ledger-form-page__form :deep(.el-input-number),
|
|
.bill-ledger-form-page__form :deep(.el-date-editor),
|
|
.bill-ledger-form-page__form :deep(.el-tree-select) {
|
|
width: 100%;
|
|
}
|
|
.bill-ledger-form-page__remark :deep(.el-form-item__content) {
|
|
margin-left: 0 !important;
|
|
}
|
|
.bill-ledger-form-page__uploader {
|
|
margin-top: 12px;
|
|
}
|
|
.bill-ledger-form-page__actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 16px 0 8px;
|
|
}
|
|
.bill-ledger-form-page :deep(.el-table) {
|
|
--el-table-border-color: #eff1f7;
|
|
}
|
|
.bill-ledger-form-page :deep(.el-table__row:nth-child(even) > td.el-table__cell) {
|
|
background: #fafafa;
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.bill-ledger-form-page :deep(.el-col-6) {
|
|
max-width: 100%;
|
|
flex: 0 0 100%;
|
|
}
|
|
}
|
|
</style>
|