<template>
|
<el-dialog v-model="visible" title="收款/退款" width="90%" append-to-body>
|
<div class="section">
|
<div class="section-title descriptions">基础资料</div>
|
<el-form :model="form" label-width="100px">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="单据编号">
|
<el-input v-model="form.billNo" placeholder="使用系统编号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="客户">
|
<el-select v-model="form.customerId" placeholder="请选择">
|
<el-option v-for="c in customerOptions" :key="c.value" :label="c.label" :value="c.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="制单人">
|
<el-select v-model="form.makerId" placeholder="请选择">
|
<el-option v-for="u in userOptions" :key="u.value" :label="u.label" :value="u.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="制单日期">
|
<el-date-picker v-model="form.makeDate" type="date" value-format="YYYY-MM-DD" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="申请部门">
|
<el-select v-model="form.applyDeptId" placeholder="请选择">
|
<el-option v-for="d in deptOptions" :key="d.value" :label="d.label" :value="d.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="备注">
|
<el-input v-model="form.remark" maxlength="100" show-word-limit placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="附件">
|
<el-upload :action="uploadUrl" :headers="uploadHeaders" name="files" :on-success="onUploadSuccess">
|
<el-button>上传文件</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
|
<div class="section">
|
<div class="toolbar">
|
<div class="section-title descriptions">付款列表</div>
|
<el-input v-model="form.discountAmount" placeholder="优惠金额" style="width:240px" />
|
</div>
|
<el-table :data="form.paymentList" border>
|
<el-table-column label="付款账号" minWidth="160">
|
<template #default="scope">
|
<el-input v-model="scope.row.accountNo" placeholder="请输入" />
|
</template>
|
</el-table-column>
|
<el-table-column label="付款账号名称" minWidth="180">
|
<template #default="scope">
|
<el-select v-model="scope.row.accountName" placeholder="请选择">
|
<el-option v-for="a in accountOptions" :key="a.value" :label="a.label" :value="a.label" />
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="付款方式" minWidth="140">
|
<template #default="scope">
|
<el-select v-model="scope.row.payMethod" placeholder="请选择">
|
<el-option v-for="m in payMethodOptions" :key="m.value" :label="m.label" :value="m.value" />
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="实际付款金额" minWidth="160">
|
<template #default="scope">
|
<el-input v-model="scope.row.amount" placeholder="请输入" />
|
</template>
|
</el-table-column>
|
<el-table-column label="手续费" minWidth="140">
|
<template #default="scope">
|
<el-input v-model="scope.row.fee" placeholder="请输入" />
|
</template>
|
</el-table-column>
|
<el-table-column label="交易号/票据号" minWidth="180">
|
<template #default="scope">
|
<el-input v-model="scope.row.txNo" placeholder="请输入" />
|
</template>
|
</el-table-column>
|
<el-table-column label="备注" minWidth="200">
|
<template #default="scope">
|
<el-input v-model="scope.row.remark" maxlength="30" show-word-limit placeholder="请输入" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" minWidth="120" fixed="right">
|
<template #default="scope">
|
<el-button link type="primary" @click="addPayment">新增一行</el-button>
|
<el-button link type="danger" @click="removePayment(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="summary">合计</div>
|
</div>
|
|
<div class="section">
|
<div class="section-container">
|
<div class="section-title descriptions">源单信息</div>
|
<div class="source-toolbar">
|
<el-button @click="clearSource">清空</el-button>
|
<el-button @click="selectSource">选择源单</el-button>
|
<el-button type="primary" @click="autoWriteOff">自动核销</el-button>
|
</div>
|
</div>
|
<el-table :data="form.sourceList" border>
|
<el-table-column label="单据日期" minWidth="160" prop="billDate" />
|
<el-table-column label="单据类型" minWidth="160" prop="billType" />
|
<el-table-column label="单据编号" minWidth="200" prop="billNo" />
|
<el-table-column label="单据金额" minWidth="120" prop="billAmount" />
|
<el-table-column label="已核销金额" minWidth="120" prop="wroteAmount" />
|
<el-table-column label="未核销金额" minWidth="120" prop="unWroteAmount" />
|
<el-table-column label="本次核销金额" minWidth="160">
|
<template #default="scope">
|
<el-input v-model="scope.row.thisWriteOffAmount" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="100" fixed="right">
|
<template #default="scope">
|
<el-button link type="danger" @click="removeSource(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="summary">合计</div>
|
</div>
|
|
<template #footer>
|
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button @click="visible=false">取消</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { getToken } from '@/utils/auth';
|
|
const visible = ref(false);
|
const form = ref({
|
billNo: '',
|
customerId: undefined,
|
makerId: undefined,
|
makeDate: '',
|
applyDeptId: undefined,
|
remark: '',
|
discountAmount: '',
|
paymentList: [{ accountNo: '', accountName: '', payMethod: '', amount: '', fee: '', txNo: '', remark: '' }],
|
sourceList: [{ billDate: '', billType: '', billNo: '', billAmount: 0, wroteAmount: 0, unWroteAmount: 0, thisWriteOffAmount: '' }]
|
});
|
|
const customerOptions = ref([]);
|
const userOptions = ref([]);
|
const deptOptions = ref([]);
|
const accountOptions = ref([]);
|
const payMethodOptions = ref([]);
|
|
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/basic/customer-follow/upload';
|
const uploadHeaders = { Authorization: 'Bearer ' + getToken() };
|
|
function addPayment() {
|
form.value.paymentList.push({ accountNo: '', accountName: '', payMethod: '', amount: '', fee: '', txNo: '', remark: '' });
|
}
|
function removePayment(i) {
|
form.value.paymentList.splice(i, 1);
|
}
|
function removeSource(i) {
|
form.value.sourceList.splice(i, 1);
|
}
|
function clearSource() {
|
form.value.sourceList = [];
|
}
|
function selectSource() {}
|
function autoWriteOff() {}
|
function onUploadSuccess() {}
|
|
function open(payload) {
|
visible.value = true;
|
}
|
function submit() {
|
visible.value = false;
|
emit('submitted');
|
}
|
|
defineExpose({ open });
|
</script>
|
|
<style scoped>
|
.section { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05); padding: 16px; margin-bottom: 16px; }
|
.section-title { font-weight: 600; margin-bottom: 12px; }
|
.descriptions {
|
margin-bottom: 20px;
|
display: inline-block;
|
font-size: 1rem;
|
font-weight: 600;
|
padding-left: 12px;
|
position: relative;
|
}
|
.descriptions::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 4px;
|
height: 1rem;
|
background-color: #002FA7;
|
border-radius: 2px;
|
}
|
.toolbar { margin-bottom: 10px; display: flex; justify-content: space-between;
|
align-items: center; }
|
.source-toolbar { margin-bottom: 10px; display: flex; gap: 8px; }
|
.summary { padding: 8px 12px; background: #fff7e6; color: #ad6800; }
|
.section-container{display: flex;align-items: center;justify-content: space-between; }
|
</style>
|
