xiaoy
/
contract-business-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://gogs.langye.net:3000/xiaoy/contract-business-web

Browse Source
master
lion 1 year ago
parent 2dc4fd2102 a3a1d5f797
commit c0fb6ee0d0
4 changed files with 318 additions and 73 deletions
Show Stats Download Patch File Download Diff File

132
src/views/contract/components/printPaymentForm.vue
Unescape View File

@ -0,0 +1,132 @@
<template>
<div>
<xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="print" ok-text="打印">
<template v-slot:normalContent>
<div class="form-switch">
<RadioGroup v-model="currentForm" type="button">
<Radio label="pre" :disabled="!getBeforeForms">事前支付表格</Radio>
<Radio label="post" :disabled="!getForms">事后支付表格</Radio>
</RadioGroup>
</div>
<div class="white-container" ref="printtable">
<div class="form-container">
<!-- Pre-payment Form -->
<div v-if="currentForm === 'pre'" class="payment-form">
<div v-if="getBeforeForms" v-html="getBeforeForms"></div>
<div v-else class="no-form-message">暂无事前支付表格内容</div>
</div>
<!-- Post-payment Form -->
<div v-else class="payment-form">
<div v-if="getForms" v-html="getForms"></div>
<div v-else class="no-form-message">暂无事后支付表格内容</div>
</div>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import { detailFundLog } from "@/api/paymentRegistration/fundLog"
import html2canvas from 'html2canvas'
import * as printJS from "print-js"
export default {
name: 'PrintPaymentForm',
data() {
return {
isShow: false,
currentForm: 'post',
fundLog: null
}
},
computed: {
getBeforeForms() {
return this.fundLog && this.fundLog.contract && this.fundLog.contract.before_forms
},
getForms() {
return this.fundLog && this.fundLog.contract && this.fundLog.contract.forms
}
},
methods: {
async getDetailFundLog(id) {
try {
const res = await detailFundLog({ id })
this.fundLog = res
// 如果没有事前支付表格，默认显示事后支付表格
if (!this.getBeforeForms) {
this.currentForm = 'post'
}
} catch (error) {
console.error('获取付款详情失败:', error)
this.$Message.error('获取付款详情失败')
}
},
async print() {
try {
const canvas = await html2canvas(this.$refs['printtable'], {
backgroundColor: null,
useCORS: true,
})
printJS({
printable: canvas.toDataURL(),
type: 'image',
documentTitle: `苏州市河道管理处${this.currentForm === 'pre' ? '事前' : '事后'}支付表格`,
style: '@page{margin:auto;}'
})
} catch (error) {
console.error('打印失败:', error)
this.$Message.error('打印失败')
}
}
}
}
</script>
<style scoped lang="scss">
.form-switch {
margin-bottom: 20px;
text-align: center;
}
.white-container {
background: #fff;
padding: 20px;
}
.form-container {
position: relative;
width: 100%;
padding: 20px;
font-family: SimSun, serif;
}
.payment-form {
border: 1px solid #000;
padding: 20px;
}
.no-form-message {
text-align: center;
padding: 40px;
color: #999;
font-size: 16px;
}
@media print {
.white-container {
padding: 0;
}
.form-container {
padding: 0;
}
.payment-form {
border: 1px solid #000;
}
}
</style>

8
src/views/contract/components/printReimbursement.vue
Unescape View File

@ -49,7 +49,7 @@
<td class="content">{{ getChildrenRatio }}</td> <td class="content">{{ getChildrenRatio }}</td>
<td class="content">{{ getChildrenActual }}</td> <td class="content">{{ getChildrenActual }}</td>
<td class="label">财审科审核</td> <td class="label">财审科审核</td>
<td class="content" colspan="3">{{ getFinanceApproval }}</td> <td class="content" colspan="3">{{ }}</td>
</tr> </tr>
<tr> <tr>
<td class="label">幼托费用</td> <td class="label">幼托费用</td>
@ -57,7 +57,7 @@
<td class="content">无</td> <td class="content">无</td>
<td class="content">{{ getNurseryActual }}</td> <td class="content">{{ getNurseryActual }}</td>
<td class="label">分管领导审核</td> <td class="label">分管领导审核</td>
<td class="content" colspan="3">{{ getLeaderApproval }}</td> <td class="content" colspan="3">{{ }}</td>
</tr> </tr>
<tr> <tr>
<td class="label">子女保险费</td> <td class="label">子女保险费</td>
@ -65,13 +65,13 @@
<td class="content">无</td> <td class="content">无</td>
<td class="content">{{ getChildInsuranceActual }}</td> <td class="content">{{ getChildInsuranceActual }}</td>
<td class="label">财务分管领导审核</td> <td class="label">财务分管领导审核</td>
<td class="content" colspan="3">{{ getFinanceLeaderApproval }}</td> <td class="content" colspan="3">{{ }}</td>
</tr> </tr>
<tr> <tr>
<td class="label">合计</td> <td class="label">合计</td>
<td class="content" colspan="3">{{ getTotalFee }} {{ getTotalActual }}</td> <td class="content" colspan="3">{{ getTotalFee }} {{ getTotalActual }}</td>
<td class="label" rowspan="2">单位负责人审批</td> <td class="label" rowspan="2">单位负责人审批</td>
<td class="content" colspan="3" rowspan="2">{{ getUnitApproval }}</td> <td class="content" colspan="3" rowspan="2">{{ }}</td>
</tr> </tr>
<tr> <tr>
<td class="label">报销金额(大写)</td> <td class="label">报销金额(大写)</td>

235
src/views/contract/contractList.vue
Unescape View File

@ -164,14 +164,14 @@
<template v-if="scope.row.assurance_status==1"> <template v-if="scope.row.assurance_status==1">
<!-- 那么必须财务审核通过--> <!-- 那么必须财务审核通过-->
<Button class="slot-btns-item" size="small" type="primary" <Button class="slot-btns-item" size="small" type="primary"
@click="$refs['paymentRegistration'].getContract(scope.row),$refs['paymentRegistration'].isShowPaymentRegistration = true"> @click="checkFormsBeforePayment(scope.row)">
付款登记 付款登记
</Button> </Button>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<Button class="slot-btns-item" size="small" type="primary" <Button class="slot-btns-item" size="small" type="primary"
@click="$refs['paymentRegistration'].getContract(scope.row),$refs['paymentRegistration'].isShowPaymentRegistration = true"> @click="checkFormsBeforePayment(scope.row)">
付款登记 付款登记
</Button> </Button>
</template> </template>
@ -510,44 +510,66 @@
<div slot="footer"> <div slot="footer">
<div class="modal-footer"> <div class="modal-footer">
<Button v-if="currentStep > 1" @click="prevStep" class="action-button">上一步</Button> <!-- 从付款登记进入时的按钮控制 -->
<Button v-if="currentStep < 3" type="primary" @click="nextStep" class="action-button">下一步</Button> <template v-if="isFromPayment">
<!-- 当有事前支付表格且未显示事后支付表格时 --> <!-- 只显示事前支付表格时 -->
<template v-if="currentStep === 3 && form.before_contract_template && !form.showAfterPayment"> <template v-if="form.before_contract_template && !form.showAfterPayment && (!form.contract_template || form.forms)">
<!-- 新增模式下显示跳过按钮 --> <Button type="primary" @click="submit" class="action-button">提交</Button>
<template v-if="!isEditMode">
<Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
<Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
</template> </template>
<!-- 编辑模式下，只有当before_forms为空时才显示跳过按钮 --> <!-- 只显示事后支付表格时 -->
<template v-else-if="(!form.before_forms || form.before_forms.trim() === '' || !form.skipBeforeTemplate)"> <template v-else-if="form.contract_template && form.showAfterPayment && (!form.before_contract_template || form.before_forms)">
<Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button> <Button type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
</template> </template>
<!-- 编辑模式下，如果before_forms不为空，只显示下一步按钮 --> <!-- 两个表格都没填写时 -->
<template v-else> <template v-else-if="form.before_contract_template && !form.showAfterPayment && form.contract_template && !form.forms">
<Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button> <Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
</template> </template>
</template> <!-- 其他情况 -->
<!-- 当显示事后支付表格时 --> <template v-else>
<template v-else-if="currentStep === 3 && form.contract_template">
<!-- 新增模式下显示跳过按钮 -->
<template v-if="!isEditMode">
<Button type="primary" @click="submit" class="action-button">提交</Button> <Button type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button>
</template> </template>
<!-- 编辑模式下，只有当forms为空时才显示跳过按钮 --> </template>
<template v-else-if="(!form.forms || form.forms.trim() === '' || !form.skipAfterTemplate)"> <!-- 正常编辑模式时的按钮控制 -->
<Button type="primary" @click="submit" class="action-button">提交</Button> <template v-else>
<Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button> <Button v-if="currentStep > 1" @click="prevStep" class="action-button">上一步</Button>
<Button v-if="currentStep < 3" type="primary" @click="nextStep" class="action-button">下一步</Button>
<!-- 当有事前支付表格且未显示事后支付表格时 -->
<template v-if="currentStep === 3 && form.before_contract_template && !form.showAfterPayment">
<!-- 新增模式下显示跳过按钮 -->
<template v-if="!isEditMode">
<Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
<Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
</template>
<!-- 编辑模式下，只有当before_forms为空时才显示跳过按钮 -->
<template v-else-if="(!form.before_forms || form.before_forms.trim() === '' || !form.skipBeforeTemplate)">
<Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
<Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
</template>
<!-- 编辑模式下，如果before_forms不为空，只显示下一步按钮 -->
<template v-else>
<Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
</template>
</template> </template>
<!-- 编辑模式下，如果forms不为空，只显示提交按钮 --> <!-- 当显示事后支付表格时 -->
<template v-else> <template v-else-if="currentStep === 3 && form.contract_template">
<Button type="primary" @click="submit" class="action-button">提交</Button> <!-- 新增模式下显示跳过按钮 -->
<template v-if="!isEditMode">
<Button type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button>
</template>
<!-- 编辑模式下，只有当forms为空时才显示跳过按钮 -->
<template v-else-if="(!form.forms || form.forms.trim() === '' || !form.skipAfterTemplate)">
<Button type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button>
</template>
<!-- 编辑模式下，如果forms不为空，只显示提交按钮 -->
<template v-else>
<Button type="primary" @click="submit" class="action-button">提交</Button>
</template>
</template> </template>
<!-- 当没有支付表格时，只显示"提交"按钮 -->
<Button v-else-if="currentStep === 3" type="primary" @click="submit" class="action-button">提交</Button>
</template> </template>
<!-- 当没有支付表格时，只显示"提交"按钮 -->
<Button v-else-if="currentStep === 3" type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="cancel" class="action-button">取消</Button> <Button @click="cancel" class="action-button">取消</Button>
</div> </div>
</div> </div>
@ -643,7 +665,8 @@ import {
addContrant, addContrant,
delContract, delContract,
checkContractName, checkContractName,
editorContract editorContract,
detailContract
} from "@/api/contract/contract" } from "@/api/contract/contract"
import { import {
getparameter getparameter
@ -906,6 +929,9 @@ export default {
return '无' return '无'
} }
switch (value) { switch (value) {
case 0:
return "无"
break;
case 1: case 1:
return "待申请" return "待申请"
break; break;
@ -930,6 +956,9 @@ export default {
return '无' return '无'
} }
switch (value) { switch (value) {
case 0:
return "无"
break;
case 1: case 1:
return "待申请" return "待申请"
break; break;
@ -957,6 +986,9 @@ export default {
return '无' return '无'
} }
switch (value) { switch (value) {
case 0:
return "无"
break;
case 1: case 1:
return "待申请" return "待申请"
break; break;
@ -981,6 +1013,9 @@ export default {
return "无" return "无"
} }
switch (value) { switch (value) {
case 0:
return "无"
break;
case 1: case 1:
return "待申请" return "待申请"
break; break;
@ -1303,7 +1338,7 @@ export default {
payee: '' payee: ''
} }
], ],
showAfterPayment: false, // 是否显示事后支付表格 showAfterPayment: true, // 是否显示事后支付表格
contract_carry_department: [] // 新增执行科室字段 contract_carry_department: [] // 新增执行科室字段
}, },
categoryOptions: [], categoryOptions: [],
@ -1330,6 +1365,7 @@ export default {
plan: [], // 添加这个来存储选中的预算计划 plan: [], // 添加这个来存储选中的预算计划
isEditMode: false, // 添加编辑模式标识 isEditMode: false, // 添加编辑模式标识
currentContractId: null, // 添加当前编辑的合同ID currentContractId: null, // 添加当前编辑的合同ID
isFromPayment: false, // 是否从付款登记进入
} }
}, },
methods: { methods: {
@ -1427,6 +1463,11 @@ export default {
} }
} }
switch (row.req_status) { switch (row.req_status) {
case 0:
return {
'color': 'rgb(140,140,140)'
}
break;
case 1: case 1:
return { return {
'color': 'rgb(96,109,241)' 'color': 'rgb(96,109,241)'
@ -1455,6 +1496,11 @@ export default {
} }
} }
switch (row.purchase_status) { switch (row.purchase_status) {
case 0:
return {
'color': 'rgb(140,140,140)'
}
break;
case 1: case 1:
return { return {
'color': 'rgb(96,109,241)' 'color': 'rgb(96,109,241)'
@ -1483,6 +1529,11 @@ export default {
} }
} }
switch (row.invite_status) { switch (row.invite_status) {
case 0:
return {
'color': 'rgb(140,140,140)'
}
break;
case 1: case 1:
return { return {
'color': 'rgb(96,109,241)' 'color': 'rgb(96,109,241)'
@ -1511,6 +1562,11 @@ export default {
} }
} }
switch (row.join_status) { switch (row.join_status) {
case 0:
return {
'color': 'rgb(140,140,140)'
}
break;
case 1: case 1:
return { return {
'color': 'rgb(96,109,241)' 'color': 'rgb(96,109,241)'
@ -1874,6 +1930,8 @@ export default {
//提交新建 //提交新建
async submit() { async submit() {
try { try {
console.log(this.form.showAfterPayment);
// 保存事前支付表格的数据 // 保存事前支付表格的数据
if (!this.form.showAfterPayment && this.form.before_contract_template) { if (!this.form.showAfterPayment && this.form.before_contract_template) {
// 获取所有输入控件 // 获取所有输入控件
@ -1963,6 +2021,7 @@ export default {
submitData.contract_type = this.form.contractType submitData.contract_type = this.form.contractType
submitData.purchase_type_id = this.form.purchaseForm submitData.purchase_type_id = this.form.purchaseForm
submitData.purchase_way_id = this.form.purchaseMethod submitData.purchase_way_id = this.form.purchaseMethod
submitData.plan_price = this.form.price
// 处理事前支付模板 // 处理事前支付模板
if (this.form.skipBeforeTemplate && !this.isEditMode) { if (this.form.skipBeforeTemplate && !this.isEditMode) {
@ -2151,6 +2210,8 @@ export default {
} }
}); });
console.log(missingFields);
if (missingFields.length > 0) { if (missingFields.length > 0) {
this.$Message.warning('请填写所有必填项'); this.$Message.warning('请填写所有必填项');
return; return;
@ -2646,39 +2707,39 @@ export default {
}, },
// 切换到事后支付表格 // 切换到事后支付表格
nextPaymentStep() { nextPaymentStep() {
// 保存事前支付表格的数据 // 保存事前支付表格的数据
if (this.form.before_contract_template && !this.form.showAfterPayment) { if (this.form.before_contract_template && !this.form.showAfterPayment) {
// 获取所有输入控件 // 获取所有输入控件
const inputs = this.$refs.beforePaymentForm.querySelectorAll('input, select, textarea'); const inputs = this.$refs.beforePaymentForm.querySelectorAll('input, select, textarea');
// 遍历所有输入控件，更新值到 HTML // 遍历所有输入控件，更新值到 HTML
inputs.forEach(input => { inputs.forEach(input => {
const fieldName = input.getAttribute('data-field'); const fieldName = input.getAttribute('data-field');
if (fieldName) { if (fieldName) {
const field = this.form.before_contract_template.contract_template_fields.find(f => f.field === fieldName); const field = this.form.before_contract_template.contract_template_fields.find(f => f.field === fieldName);
if (field) { if (field) {
if (input.type === 'checkbox' || input.type === 'radio') { if (input.type === 'checkbox' || input.type === 'radio') {
// 对于复选框和单选框，需要找到选中的值 // 对于复选框和单选框，需要找到选中的值
const checkedInput = this.$refs.beforePaymentForm.querySelector(`[data-field="${fieldName}"]:checked`); const checkedInput = this.$refs.beforePaymentForm.querySelector(`[data-field="${fieldName}"]:checked`);
field.value = checkedInput ? checkedInput.value : ''; field.value = checkedInput ? checkedInput.value : '';
// 更新 HTML 中的 checked 状态 // 更新 HTML 中的 checked 状态
if (checkedInput) { if (checkedInput) {
checkedInput.setAttribute('checked', 'checked'); checkedInput.setAttribute('checked', 'checked');
}
} else {
field.value = input.value;
// 更新 HTML 中的 value
input.setAttribute('value', input.value);
} }
} else {
field.value = input.value;
// 更新 HTML 中的 value
input.setAttribute('value', input.value);
} }
} }
} });
});
// 获取更新后的 HTML
// 获取更新后的 HTML const beforeFormHtml = this.$refs.beforePaymentForm.innerHTML;
const beforeFormHtml = this.$refs.beforePaymentForm.innerHTML;
// 更新模板和保存数据
// 更新模板和保存数据 this.form.before_forms = beforeFormHtml;
this.form.before_forms = beforeFormHtml;
} }
this.form.showAfterPayment = true; this.form.showAfterPayment = true;
}, },
@ -2751,12 +2812,13 @@ export default {
}, },
// 编辑按钮点击事件 // 编辑按钮点击事件
async handleEdit(row) { async handleEdit(row, isFromPayment = false) {
this.isEditMode = true; this.isEditMode = true;
this.currentContractId = row.id; this.currentContractId = row.id;
this.isShowAdd = true; this.isShowAdd = true;
this.currentStep = 1; this.currentStep = 1; // 始终保持初始值为1
this.isFromPayment = isFromPayment; // 设置是否从付款登记进入
try { try {
// 1. 先获取分类选项 // 1. 先获取分类选项
await this.getCategoryOptions(); await this.getCategoryOptions();
@ -2796,8 +2858,6 @@ export default {
this.form.purchaseMethod = detail.purchase_way_id; this.form.purchaseMethod = detail.purchase_way_id;
} }
console.log("detail", detail);
// 保存其他表单数据 // 保存其他表单数据
this.form = { this.form = {
...this.form, ...this.form,
@ -2837,6 +2897,15 @@ export default {
if (this.form.plan && this.form.plan.length > 0) { if (this.form.plan && this.form.plan.length > 0) {
this.form.plan_display = this.form.plan.map(item => item.label).join(', '); this.form.plan_display = this.form.plan.map(item => item.label).join(', ');
} }
// 如果是从付款登记进入,手动触发流程
if (isFromPayment) {
this.disablePrevStep = true;
// 手动触发第一步到第二步的流程
await this.nextStep();
// 手动触发第二步到第三步的流程
await this.nextStep();
}
} }
} catch (error) { } catch (error) {
console.error('初始化编辑数据失败:', error); console.error('初始化编辑数据失败:', error);
@ -3030,6 +3099,38 @@ export default {
return true; return true;
}, },
async checkFormsBeforePayment(row) {
try {
// 获取最新的合同详情
const res = await detailContract({ id: row.id });
if (res) {
console.log("detail", res);
// 检查是否有事前支付表格且未填写
if (res.before_contract_template && !res.before_forms) {
// 有事前支付表格但未填写,进入编辑模式
await this.handleEdit(row, true);
return;
}
// 检查是否有事后支付表格且未填写
if (res.contract_template && !res.forms) {
// 有事后支付表格但未填写,进入编辑模式
await this.handleEdit(row, true);
return;
}
// 如果都有填写或没有配置支付表格,则继续付款登记流程
this.$refs['paymentRegistration'].getContract(row);
this.$refs['paymentRegistration'].isShowPaymentRegistration = true;
} else {
this.$Message.error('获取合同详情失败');
}
} catch (error) {
console.error('Error checking forms:', error);
this.$Message.error('检查表单时发生错误');
}
},
}, },
mounted() { mounted() {
this.window.width = screen.availWidth * 0.95 this.window.width = screen.availWidth * 0.95

16
src/views/contract/paymentRegistrationList.vue
Unescape View File

@ -159,6 +159,7 @@
<printMeetingSettlement ref="printMeetingSettlement"></printMeetingSettlement> <printMeetingSettlement ref="printMeetingSettlement"></printMeetingSettlement>
<printFundApproval ref="printFundApproval"></printFundApproval> <printFundApproval ref="printFundApproval"></printFundApproval>
<detailPaymentRegistration ref="detailPaymentRegistration" @success="getFundLogs"></detailPaymentRegistration> <detailPaymentRegistration ref="detailPaymentRegistration" @success="getFundLogs"></detailPaymentRegistration>
<printPaymentForm ref="printPaymentForm"></printPaymentForm>
</div> </div>
</template> </template>
@ -181,6 +182,7 @@ import printUtilityBill from "./components/printUtilityBill";
import printReimbursementSimple from "./components/printReimbursementSimple"; import printReimbursementSimple from "./components/printReimbursementSimple";
import printMeetingSettlement from "./components/printMeetingSettlement"; import printMeetingSettlement from "./components/printMeetingSettlement";
import printFundApproval from "./components/printFundApproval"; import printFundApproval from "./components/printFundApproval";
import printPaymentForm from "./components/printPaymentForm";
export default { export default {
components: { components: {
@ -195,6 +197,7 @@ export default {
printMeetingSettlement, printMeetingSettlement,
printFundApproval, printFundApproval,
detailPaymentRegistration, detailPaymentRegistration,
printPaymentForm,
}, },
data() { data() {
return { return {
@ -551,9 +554,18 @@ export default {
}, },
async handlePrint(row) { async handlePrint(row) {
try { try {
const rowIndex = this.list.findIndex(item => item.id === row.id); // 检查合同信息中的forms和before_forms
console.log('当前行号:', rowIndex); if (row.contract) {
// 如果有forms或before_forms,显示支付表格打印窗口
if (row.contract.forms || row.contract.before_forms) {
this.$refs['printPaymentForm'].getDetailFundLog(row.id);
this.$refs['printPaymentForm'].isShow = true;
return;
}
}
// 如果没有forms和before_forms,则按原来的逻辑处理
const rowIndex = this.list.findIndex(item => item.id === row.id);
if(rowIndex === 0) { // 第一行 if(rowIndex === 0) { // 第一行
this.$refs['printRegistration'].getDetailFundLog(row.id); this.$refs['printRegistration'].getDetailFundLog(row.id);
this.$refs['printRegistration'].isShow = true; this.$refs['printRegistration'].isShow = true;

Write Preview
Loading…
Cancel
Save