From 8609b6e889b9050aca3fa283de1a488356eef56b Mon Sep 17 00:00:00 2001 From: lynn Date: Thu, 24 Apr 2025 19:13:40 +0800 Subject: [PATCH] =?UTF-8?q?8=E4=B8=AA=E8=A1=A8=E5=8D=95=E4=B8=AD=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/businessConfig/EditPayForm.vue | 1466 +++++++++++--- src/views/businessConfig/contractConfig.vue | 6 +- src/views/contract/contractList_bk.vue | 1885 +++++++++++++++++++ 3 files changed, 3046 insertions(+), 311 deletions(-) create mode 100644 src/views/contract/contractList_bk.vue diff --git a/src/views/businessConfig/EditPayForm.vue b/src/views/businessConfig/EditPayForm.vue index a4421b7..abd08f4 100644 --- a/src/views/businessConfig/EditPayForm.vue +++ b/src/views/businessConfig/EditPayForm.vue @@ -173,7 +173,7 @@ export default { previewContent: '', // 预览内容 showEditDrawer: false, showPreviewModal: false, // 添加预览模态窗口控制变量 - currentTemplateIndex: 0, + currentTemplateIndex: 8, editForm: { field: '', // Renamed from name to field name: '', // Renamed from label to name (Chinese name) @@ -190,7 +190,7 @@ export default { content:'' }, { - name: '资金划拨审批单', + name: '苏州市河道管理处资金划拨审批单', content: `
@@ -198,14 +198,34 @@ export default { - - + + - + - + @@ -215,97 +235,201 @@ export default { - - + + - - + + - - + + - - + + - + - - + + - - + + - + - - -
项目名称:\${projectName}本次为第\${paymentTimes}次付款 +
+ +
+
\${projectName}
+
本次为第 +
+ +
+
\${paymentTimes}
+
次付款
承包商/供货商:\${contractor} +
+ +
+
\${contractor}
+
合同服务时间:\${serviceTime} +
+ +
+
\${serviceTime}
+
付款情形
A 合同金额\${contractAmount}\${contractRemark} +
+ +
+
\${contractAmount}
+
+
+ +
+
\${contractRemark}
+
B 审计金额\${auditAmount}\${auditRemark} +
+ +
+
\${auditAmount}
+
+
+ +
+
\${auditRemark}
+
C 前期累计已付款\${previousPayment}\${previousPaymentRemark} +
+ +
+
\${previousPayment}
+
+
+ +
+
\${previousPaymentRemark}
+
D 本期拟款\${currentPayment}\${currentPaymentRemark} +
+ +
+
\${currentPayment}
+
+
+ +
+
\${currentPaymentRemark}
+
E 本期应付款\${currentDuePayment} -
-
- - - +
+
-
- - +
\${currentDuePayment}
+
+
+
- -
\${paymentType}
+
\${paymentType}
F 累计支付\${totalPaid}\${totalPaidRemark} +
+ +
+
\${totalPaid}
+
+
+ +
+
\${totalPaidRemark}
+
G 累计拟款\${totalPlanned}\${totalPlannedRemark} +
+ +
+
\${totalPlanned}
+
+
+ +
+
\${totalPlannedRemark}
+
H 质保金\${warranty} +
+ +
+
\${warranty}
+
+
+
+ + %,质保期 + + 年,需审计的以审计价为计费依据。 +
+
+
\${percent}%,质保期\${zbYear}年,需审计的以审计价为计费依据。 +
资金划支渠道:
业务科室:
-
  \${department}
+
+
+ +
+
\${department}
+
经办人:
-
  \${handler}
+
+
+ +
+
\${handler}
+
业务科室负责人:
-
  \${departmentHead}
+
+
+ +
+
\${departmentHead}
+
业务科室分管领导:
-
  \${departmentLeader}
+
+
+ +
+
\${departmentLeader}
+
财务审计科:
-
  \${financeDepartment}
+
+
+ +
+
\${financeDepartment}
+
财务审计科分管领导:
-
  \${financeLeader}
+
+
+ +
+
\${financeLeader}
+
单位负责人:
-
  \${unitLeader}
+
+
+ +
+
\${unitLeader}
+
@@ -318,170 +442,194 @@ export default {

苏州市河道管理处报销贴单

-
科室:\${department}
-
\${year}年\${month}月\${day}日
+
科室:
\${department}
+
\${date}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + - - -
用途说明金额报销(领款)人\${handler}附单据\${receipts}张
\${purpose1}\${amount1}
\${purpose2}\${amount2}科室负责人\${departmentHead}
\${purpose3}\${amount3}
\${purpose4}\${amount4}财审科审核\${financeApproval}
\${purpose5}\${amount5}
\${purpose6}\${amount6}分管领导审核\${leaderApproval}
\${purpose7}\${amount7}
\${purpose8}\${amount8}财务分管领导审核\${financeLeaderApproval}
\${purpose9}\${amount9}
合计\${total}单位负责人审批\${unitLeaderApproval}
报销金额(大写) -
- - - - - - - +
职工姓名 +
+
+
\${name}
+
退休/在职 +
+ +
+
\${status}
+
家属姓名 +
+ +
+
\${familyName}
+
与本人关系 +
+ +
+
\${relation}
-
-
` - }, - { - name: '苏州市河道管理处报销贴单', - content: ` -
-
-

苏州市河道管理处报销贴单

-
- 科室:\${department} - \${year}年\${month}月\${day}日 -
- - - - - - - - - - - - - - - - + + + + + + - - - - + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - + - - - + + + - - + - - - + + + - - - - + + + + - - + +
职工姓名\${name}退休/在职\${status}家属姓名\${familyName}与本人关系\${relation}
内容发票金额报销比例\${medicalActualAmount}\${name}内容发票金额报销比例 +
+ +
+
\${medicalActualAmount}
+
报销(领款)人 +
+ +
+
\${name}
+
门诊医药费\${medicalInvoiceValue}\${medicalReimbursementRatio}\${medicalActualAmount}门诊医药费 +
+ +
+
\${medicalInvoiceValue}
+
+
+ +
+
\${medicalReimbursementRatio}
+
+
+ +
+
\${medicalActualAmount}
+
住院医药费\${hospitalInvoiceValue}\${hospitalReimbursementRatio}\${hospitalActualAmount}科室负责人\${departmentHead}住院医药费 +
+ +
+
\${hospitalInvoiceValue}
+
+
+ +
+
\${hospitalReimbursementRatio}
+
+
+ +
+
\${hospitalActualAmount}
+
科室负责人 +
+ +
+
\${departmentHead}
+
儿童医药费\${childMedicalInvoiceValue}\${childMedicalReimbursementRatio}\${childMedicalActualAmount}财审科审核\${financialAudit}儿童医药费 +
+ +
+
\${childMedicalInvoiceValue}
+
+
+ +
+
\${childMedicalReimbursementRatio}
+
+
+ +
+
\${childMedicalActualAmount}
+
财审科审核 +
+ +
+
\${financialAudit}
+
幼托费用\${childcareInvoiceValue}幼托费用 \${childcareActualAmount}分管领导审核\${leaderAudit} +
+ +
+
\${childcareActualAmount}
+
分管领导审核 +
+ +
+
\${leaderAudit}
+
子女保险费\${childInsuranceInvoiceValue}子女保险费 \${childInsuranceActualAmount}财务分管领导审核\${financialLeaderAudit} +
+ +
+
\${childInsuranceActualAmount}
+
财务分管领导审核 +
+ +
+
\${financialLeaderAudit}
+
合计\${totalAmount}单位负责人审批\${unitLeaderAudit}合计 +
+ +
+
\${totalAmount}
+
单位负责人审批 +
+ +
+
\${unitLeaderAudit}
+
报销金额(大写)\${upperCaseAmount}报销金额(大写) +
+ +
+
\${upperCaseAmount}
+
@@ -489,7 +637,7 @@ export default {
` }, { - name: '公务接待结算单', + name: '苏州市河道管理处公务接待结算单', content: `
@@ -498,43 +646,94 @@ export default { 科室 - \${getDepartment} + +
+ +
+
\${getDepartment}
+ 事由 - \${getReason} + +
+ +
+
\${getReason}
+ 日期 - \${getDate} + +
+ +
+
\${getDate}
+ 就餐地点 - \${getDiningLocation} + +
+ +
+
\${getDiningLocation}
+ 就餐人数 接待人数 - \${getVisitorCount} + +
+ +
+
\${getVisitorCount}
+ 金额(元) 餐费 - \${getMealsFee} + +
+ +
+
\${getMealsFee}
+ 陪同人数 - \${getAccompanyCount} + +
+ +
+
\${getAccompanyCount}
+ 住宿费 - \${getAccommodationFee} - - - 科室经办人 - \${getHandler} - 综合科意见 - \${getComprehensiveOpinion} + +
+ +
+
\${getAccommodationFee}
+ - 分管领导意见 - \${getLeaderOpinion} + 经办人 + +
+ +
+
\${getOperator}
+ + 审核人 + +
+ +
+
\${getReviewer}
+ - 备注 - \${getRemark} + 备注 + +
+ +
+
\${getRemarks}
+ @@ -548,72 +747,85 @@ export default {

苏州市河道管理处会议审批表

- \${year}年 - \${month}月 - \${day}日 +
+ +
+
\${date}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
申请部门\${department}
会议名称\${meetingName}
会议类别\${meetingType}类会议
会议起止日期及天数\${duration}
会议地点\${location}
会议规模代表人数:\${representativeCount} 工作人员数:\${staffCount}
会议经费预算(元)\${totalBudget}
其中:住宿费\${accommodationFee}申请部门 +
+ +
+
\${department}
+
伙食费\${mealsFee}会议名称 +
+ +
+
\${meetingName}
+
租场费\${venueFee}会议时间 +
+ +
+
\${meetingTime}
+
其他费用\${otherFees}会议地点 +
+ +
+
\${meetingLocation}
+
科室负责人审核\${departmentApproval}参会人员 +
+ +
+
\${participants}
+
分管领导审核\${sectionApproval}会议内容 +
+ +
+
\${meetingContent}
+
综合科审核\${comprehensiveApproval}经办人 +
+ +
+
\${operator}
+
单位负责人审核\${unitApproval}审核人 +
+ +
+
\${reviewer}
+
@@ -629,42 +841,96 @@ export default { 申请科室 - \${department} - 申请理由 - \${reason} + +
+ +
+
\${department}
+ + 申请理由 + +
+ +
+
\${reason}
+ 申请日期 - \${applyDate} - + +
+ +
+
\${applyDate}
+ 预计就餐人数 接待人数 - \${visitorCount} + +
+ +
+
\${visitorCount}
+ 预计金额
(元) 餐费 - \${mealsFee} + +
+ +
+
\${mealsFee}
+ 陪同人数 - \${accompanyCount} + +
+ +
+
\${accompanyCount}
+ 住宿费 - \${accommodationFee} + +
+ +
+
\${accommodationFee}
+ 科室经办人 - \${handler} + +
+ +
+
\${handler}
+ 综合科意见 - \${comprehensiveOpinion} + +
+ +
+
\${comprehensiveOpinion}
+ 分管领导意见 - \${leaderOpinion} + +
+ +
+
\${leaderOpinion}
+ 备注 - \${remark} + +
+ +
+
\${remark}
+ @@ -681,49 +947,120 @@ export default { 费用发生地点: - \${location} + +
+ +
+
\${location}
+ 上期读数 - \${previousReading} + +
+ +
+
\${previousReading}
+ 实际使用水/电量 - \${usageAmount} + +
+ +
+
\${usageAmount}
+ 年 月 日读数 - \${currentReading} + +
+ +
+
\${currentReading}
+ 水/电费单价 - \${unitPrice} + +
+ +
+
\${unitPrice}
+ 总费用 - \${totalAmount}元 + +
+ +
+
\${totalAmount}元
+ 大写: - \${amountInWords} + +
+ +
+
\${amountInWords}
+ 借水/电单位 - \${borrower} + +
+ +
+
\${borrower}
+ 经办人 - \${handler} + +
+ +
+
\${handler}
+ 经办科室 - \${department} + +
+ +
+
\${department}
+ 科室负责人 - \${departmentHead} + +
+ +
+
\${departmentHead}
+ 发票预留电话 - \${phone} + +
+ +
+
\${phone}
+ 分管领导 - \${leader} + +
+ +
+
\${leader}
+
- 申请日期:\${applyDate} + 申请日期: +
+
+ +
+
\${applyDate}
+
@@ -737,7 +1074,12 @@ export default {

苏州市河道管理处定点办会结算单

-
年   月   日
+
+
+ +
+
\${date}
+
@@ -748,27 +1090,69 @@ export default { - + - + - + - + - + - + @@ -777,48 +1161,355 @@ export default { - - + + - - + + - - + + - - + + - - + + - + - + - + - + - + + + + + + + +
申请部门\${department} +
+ +
+
\${department}
+
会议名称\${meetingName} +
+ +
+
\${meetingName}
+
会议类别(\${meetingType})类会议 + (
+
+ +
+
\${meetingType}
+
)类会议 +
会议起止日期及天数\${duration} +
+ +
+
\${duration}
+
会议地点\${location} +
+ +
+
\${location}
+
会议规模代表人数:\${representativeCount}     工作人员数:\${staffCount} + 代表人数: +
+
+ +
+
\${representativeCount}
+
+      工作人员数: +
+
+ +
+
\${staffCount}
+
+
会议经费预算(元)
合计\${budgetTotal}\${settlementTotal} +
+ +
+
\${budgetTotal}
+
+
+ +
+
\${settlementTotal}
+
其中:住宿费\${budgetAccommodation}\${settlementAccommodation} +
+ +
+
\${budgetAccommodation}
+
+
+ +
+
\${settlementAccommodation}
+
伙食费\${budgetMeals}\${settlementMeals} +
+ +
+
\${budgetMeals}
+
+
+ +
+
\${settlementMeals}
+
租场费\${budgetVenue}\${settlementVenue} +
+ +
+
\${budgetVenue}
+
+
+ +
+
\${settlementVenue}
+
其他费用\${budgetOther}\${settlementOther} +
+ +
+
\${budgetOther}
+
+
+ +
+
\${settlementOther}
+
科室负责人审核\${departmentApproval} +
+ +
+
\${departmentApproval}
+
分管领导审核\${leaderApproval} +
+ +
+
\${sectionApproval}
+
财审科审核\${financeApproval} +
+ +
+
\${financeApproval}
+
财审科分管领导审核\${financeLeaderApproval} +
+ +
+
\${financeLeaderApproval}
+
单位负责人审核\${unitLeaderApproval} +
+ +
+
\${unitLeaderApproval}
+
综合科审核 +
+ +
+
\${comprehensiveApproval}
+
+
+
` + }, + { + name: '苏州市河道管理处报销贴单1', + content: ` +
+
+

苏州市河道管理处报销贴单

+
+
科室:
\${department}
+
\${date}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用途说明金额报销(领款)人 +
+ +
+
\${handler}
+
+
+ 附单据张 +
+
附单据\${receipts}张
+
+
+ +
+
\${purpose1}
+
+
+ +
+
\${amount1}
+
+
+ +
+
\${purpose2}
+
+
+ +
+
\${amount2}
+
科室负责人 +
+ +
+
\${departmentHead}
+
+
+ +
+
\${purpose3}
+
+
+ +
+
\${amount3}
+
+
+ +
+
\${purpose4}
+
+
+ +
+
\${amount4}
+
财审科审核 +
+ +
+
\${financeApproval}
+
+
+ +
+
\${purpose5}
+
+
+ +
+
\${amount5}
+
+
+ +
+
\${purpose6}
+
+
+ +
+
\${amount6}
+
分管领导审核 +
+ +
+
\${leaderApproval}
+
+
+ +
+
\${purpose7}
+
+
+ +
+
\${amount7}
+
+
+ +
+
\${purpose8}
+
+
+ +
+
\${amount8}
+
财务分管领导审核 +
+ +
+
\${financeLeaderApproval}
+
+
+ +
+
\${purpose9}
+
+
+ +
+
\${amount9}
+
合计 +
+ +
+
\${total}
+
单位负责人审批 +
+ +
+
\${unitLeaderApproval}
+
报销金额(大写) +
+ +
+
\${upperCaseAmount}
+
@@ -827,7 +1518,14 @@ export default { } ], docxContent: '', - docxUrl: '' + docxUrl: '', + placeholderMap: { + childInsuranceActualAmount: '请输入儿童保险实际金额', + financialLeaderAudit: '请输入财务分管领导审核意见', + totalAmount: '请输入合计金额', + unitLeaderAudit: '请输入单位负责人审批意见', + upperCaseAmount: '请输入报销金额(大写)' + }, } }, computed: { @@ -870,6 +1568,14 @@ export default { this.previewContent = this.codeContent this.handleRefresh() } + }, + 'editForm.options': { + handler(newVal) { + if (this.editForm.type === 'radio') { + // 当选项变化时,重置预览值 + this.radioPreviewValue = ''; + } + } } }, methods: { @@ -901,11 +1607,42 @@ export default { this.updateFieldMetadata(Array.from(variables)); - // 移除占位变量,保留其他内容用于预览 - processedContent = processedContent.replace(/\${[^}]+}/g, ''); - - // 移除所有 display:none 样式,使隐藏内容可见 - processedContent = processedContent.replace(/display:\s*none/g, 'display: block'); + // 替换占位变量为对应的输入控件 + // processedContent = processedContent.replace(/\${([^}]+)}/g, (match, field) => { + // const metadata = this.fieldMetadata[field]; + // if (!metadata) return match; + + // const baseStyle = 'width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2); text-align: center;'; + + // let inputHtml = ''; + // switch (metadata.type) { + // case 'text': + // inputHtml = ``; + // break; + // case 'number': + // inputHtml = ``; + // break; + // case 'date': + // inputHtml = ``; + // break; + // case 'select': + // const options = metadata.options.split(',').map(opt => + // `` + // ).join(''); + // inputHtml = ``; + // break; + // case 'checkbox': + // inputHtml = `
`; + // break; + // case 'radio': + // inputHtml = `
`; + // break; + // default: + // inputHtml = ``; + // } + + // return `
${inputHtml}
\${${field}}
`; + // }); this.previewContent = processedContent; }, @@ -933,15 +1670,105 @@ export default { console.log('正在编辑字段:', field.name); }, handleSaveField() { - const { field } = this.editForm; // Get field name - - if (this.fieldMetadata[field]) { // Use field name as key - this.fieldMetadata[field] = { ...this.editForm }; + if (!this.editForm.field || !this.editForm.name) { + this.$message.warning('请填写字段名称和显示名称') + return + } + + // 更新字段元数据 + this.fieldMetadata[this.editForm.field] = { + name: this.editForm.name, + type: this.editForm.type, + options: this.editForm.options } - this.generateFieldList(); + // 更新代码预览区 + const codeContent = this.codeContent + const fieldName = this.editForm.field + const fieldType = this.editForm.type + const fieldOptions = this.editForm.options + + // 查找所有包含该占位变量的元素 + const regex = new RegExp(`\\$\\{${fieldName}\\}`, 'g') + const matches = codeContent.match(regex) - this.showEditDrawer = false; + if (matches) { + // 根据字段类型生成对应的控件 + let controlHtml = '' + switch (fieldType) { + case 'text': + controlHtml = `` + break + case 'number': + controlHtml = `` + break + case 'select': + const options = fieldOptions.split(',').map(opt => opt.trim()) + controlHtml = `` + break + case 'date': + controlHtml = `` + break + case 'checkbox': + const checkboxOptions = fieldOptions.split(',').map(opt => opt.trim()) + controlHtml = `
+ ${checkboxOptions.map(opt => ` + + `).join('')} +
` + break + case 'radio': + const radioOptions = fieldOptions.split(',').map(opt => opt.trim()) + controlHtml = `
+ ${radioOptions.map(opt => ` + + `).join('')} +
` + break + } + + // 替换所有匹配的占位变量 + let newCodeContent = codeContent + // 使用更简单的正则表达式来匹配每个控件 + const controlRegex = new RegExp(`
[^<]*<[^>]*data-field="${fieldName}"[^>]*>[^<]*<\\/div>[^<]*
\\$\\{${fieldName}\\}<\\/div>`, 'g') + + newCodeContent = newCodeContent.replace(controlRegex, (match) => { + // 提取原有的字段名 + const fieldNameMatch = match.match(/]*>([^<]+)<\/td>/) + const originalFieldName = fieldNameMatch ? fieldNameMatch[1] : '' + + // 保留原有的字段名,只替换控件部分 + return `
${controlHtml}
\${${fieldName}}
` + }) + + // 更新代码预览区内容 + this.codeContent = newCodeContent + + // 更新模板内容 + this.templates[this.currentTemplateIndex].content = newCodeContent + + // 立即刷新预览区域 + this.handleRefresh() + } + + // 更新字段列表 + this.fieldList = Object.entries(this.fieldMetadata).map(([field, metadata]) => ({ + field, + name: metadata.name, + type: metadata.type, + options: metadata.options + })) + + this.showEditDrawer = false + this.$message.success('字段保存成功') }, getTypeDisplay(type) { const typeMap = { @@ -1239,9 +2066,21 @@ export default { // 处理图片样式 html = html.replace(/ { + const baseStyle = 'width: 100%; height: 32px; padding: 4px 8px; border: 1px solid #DCDFE6; border-radius: 4px; background: #fff; color: #333; font-size: 14px; line-height: 1.5; box-shadow: 0 0 4px rgba(220, 223, 230, 0.2); text-align: center;'; + return ` +
+ +
\${${field}}
+
+ `; + }); // 更新代码内容和预览内容 this.codeContent = html + this.previewContent = html // 提取变量并更新字段元数据 const variables = this.extractVariables(html) @@ -1254,7 +2093,6 @@ export default { this.$refs.codeEditor.setValue(html) } // 更新预览内容 - this.previewContent = html this.handleRefresh() }) } catch (error) { @@ -1533,6 +2371,18 @@ export default { color: #909399; font-size: 14px; } + +.radio-preview { + margin-top: 10px; + padding: 10px; + background-color: #f5f7fa; + border-radius: 4px; + + :deep(.el-radio) { + margin-right: 20px; + margin-bottom: 10px; + } +} diff --git a/src/views/businessConfig/contractConfig.vue b/src/views/businessConfig/contractConfig.vue index 428dcbc..dbd8b50 100644 --- a/src/views/businessConfig/contractConfig.vue +++ b/src/views/businessConfig/contractConfig.vue @@ -678,7 +678,7 @@ export default { this.loadEditOptions(row) // 打开抽屉 - this.dialogVisible = true + this.dialogVisible = true }) .catch(error => { console.error('加载支付表格选项失败:', error) @@ -802,7 +802,7 @@ export default { if (this.form.paymentForm && this.form.paymentForm !== this.originalPaymentForm) { submitData.contract_template_id = this.form.paymentForm } - } else { + } else { // 新增模式下,如果有支付表格值就添加 if (this.form.paymentForm) { submitData.contract_template_id = this.form.paymentForm @@ -816,7 +816,7 @@ export default { return } - this.$message.success('保存成功') + this.$message.success('保存成功') this.dialogVisible = false // 刷新列表数据 await this.getTableData() diff --git a/src/views/contract/contractList_bk.vue b/src/views/contract/contractList_bk.vue new file mode 100644 index 0000000..40b31fb --- /dev/null +++ b/src/views/contract/contractList_bk.vue @@ -0,0 +1,1885 @@ + + + + +