master
lynn 7 months ago
parent d9e1c75f02
commit 47e905fb93

@ -489,7 +489,7 @@ export default {
//
],
postPaymentForm: [
{ required: true, message: '请选择事后支付表格', trigger: 'change' }
//
]
},
originalPrePaymentForm: '',

@ -389,9 +389,9 @@
</el-form-item>
<el-form-item label="项目类型" prop="type" :rules="[{ required: true, message: '请选择项目类型', trigger: 'submit' }]" v-show="showFields.projectType">
<el-select v-model="form.type" placeholder="请选择项目类型" style="width: 100%">
<el-option v-for="item in type" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
<Select v-model="form.type" placeholder="请选择项目类型" style="width: 100%">
<Option v-for="item in type" :key="item.value" :value="item.value">{{ item.label }}</Option>
</Select>
</el-form-item>
<!-- 新增承包商/供应商输入框 -->
@ -405,30 +405,13 @@
<!-- 新增执行科室选择 -->
<el-form-item label="执行科室" prop="contract_carry_department" :rules="[{ required: true, message: '请选择执行科室', trigger: 'submit' }]">
<div class="department-selector">
<el-select
v-model="form.contract_carry_department"
placeholder="请选择执行科室"
style="width: 100%"
multiple
collapse-tags
@remove-tag="removeDepartment">
<el-option
v-for="item in departments"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<div class="department-tags" v-if="form.contract_carry_department && form.contract_carry_department.length > 0">
<el-tag
v-for="id in form.contract_carry_department"
:key="id"
closable
@close="removeDepartment(id)">
{{ getDepartmentName(id) }}
</el-tag>
</div>
<Select v-model="form.contract_carry_department" placeholder="请选择执行科室" style="width: 100%" multiple>
<Option v-for="item in departments" :key="item.id" :value="item.id">{{ item.name }}</Option>
</Select>
<div class="department-tags" v-if="form.contract_carry_department && form.contract_carry_department.length > 0">
<el-tag v-for="id in form.contract_carry_department" :key="id" closable @close="removeDepartment(id)">
{{ getDepartmentName(id) }}
</el-tag>
</div>
</el-form-item>
@ -437,30 +420,13 @@
</el-form-item>
<el-form-item label="资金渠道" prop="moneyWay" :rules="[{ required: true, message: '请选择资金渠道', trigger: 'submit' }]" v-show="showFields.fundChannel">
<div class="money-way-selector">
<el-select
v-model="form.moneyWay"
placeholder="请选择资金渠道"
style="width: 100%"
multiple
collapse-tags
@remove-tag="removeMoneyWay">
<el-option
v-for="item in moneyWay"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
<div class="money-way-tags" v-if="form.moneyWay && form.moneyWay.length > 0">
<el-tag
v-for="id in form.moneyWay"
:key="id"
closable
@close="removeMoneyWay(id)">
{{ getMoneyWayName(id) }}
</el-tag>
</div>
<Select v-model="form.moneyWay" placeholder="请选择资金渠道" style="width: 100%" multiple>
<Option v-for="item in moneyWay" :key="item.id" :value="item.id">{{ item.value }}</Option>
</Select>
<div class="money-way-tags" v-if="form.moneyWay && form.moneyWay.length > 0">
<el-tag v-for="id in form.moneyWay" :key="id" closable @close="removeMoneyWay(id)">
{{ getMoneyWayName(id) }}
</el-tag>
</div>
</el-form-item>
@ -492,13 +458,23 @@
<div v-show="currentStep === 3" class="step-content">
<!-- 事前支付表格 -->
<div v-if="form.before_contract_template && !form.showAfterPayment" class="form-section">
<div class="section-title">事前支付表格</div>
<div ref="beforePaymentForm" v-html="form.before_forms || form.before_contract_template.template"></div>
<div class="section-title" style="display: flex; align-items: center;">
事前支付表格
<el-button type="text" icon="el-icon-zoom-in" @click="openPaymentFormPreview('before')"></el-button>
</div>
<div v-if="!showPaymentFormPreview || previewType !== 'before'">
<div ref="beforePaymentForm" v-html="form.before_forms || (form.before_contract_template && form.before_contract_template.template) || ''"></div>
</div>
</div>
<!-- 事后支付表格 -->
<div v-else-if="form.contract_template" class="form-section">
<div class="section-title">事后支付表格</div>
<div ref="afterPaymentForm" v-html="form.forms || form.contract_template.template"></div>
<div class="section-title" style="display: flex; align-items: center;">
事后支付表格
<el-button type="text" icon="el-icon-zoom-in" @click="openPaymentFormPreview('after')"></el-button>
</div>
<div v-if="!showPaymentFormPreview || previewType !== 'after'">
<div ref="afterPaymentForm" v-html="form.forms || (form.contract_template && form.contract_template.template) || ''"></div>
</div>
</div>
<!-- 无支付表格提示 -->
<div v-else class="form-section">
@ -656,6 +632,24 @@
<govPlane ref="govPlane" @selected="row => form.gov_plane_id = row.id"></govPlane>
<!-- 放大弹窗 -->
<Modal
v-model="showPaymentFormPreview"
width="80%"
:title="previewType === 'before' ? '事前支付表格' : '事后支付表格'"
:z-index="4000"
class="payment-preview-modal"
@on-cancel="handlePaymentFormPreviewClose"
footer-hide
>
<div v-if="previewType === 'before'">
<div ref="previewBeforePaymentForm" v-html="form.before_forms || (form.before_contract_template && form.before_contract_template.template) || ''"></div>
</div>
<div v-else>
<div ref="previewAfterPaymentForm" v-html="form.forms || (form.contract_template && form.contract_template.template) || ''"></div>
</div>
</Modal>
</div>
</template>
@ -706,6 +700,31 @@ import govPlane from './components/govPlane.vue';
import {
download
} from '@/utils/downloadRequest'
function syncFormDomToHtml(dom, contractTemplateFields) {
if (!dom) return '';
const inputs = dom.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
const fieldName = input.getAttribute('data-field');
if (fieldName && contractTemplateFields) {
const field = contractTemplateFields.find(f => f.field === fieldName);
if (field) {
if (input.type === 'checkbox' || input.type === 'radio') {
const checkedInput = dom.querySelector(`[data-field="${fieldName}"]:checked`);
field.value = checkedInput ? checkedInput.value : '';
if (checkedInput) {
checkedInput.setAttribute('checked', 'checked');
}
} else {
field.value = input.value;
input.setAttribute('value', input.value);
}
}
}
});
return dom.innerHTML;
}
export default {
components: {
editor,
@ -1373,6 +1392,8 @@ export default {
is_plan: true, //
is_substitute: true //
},
showPaymentFormPreview: false,
previewType: '', // 'before' or 'after'
}
},
methods: {
@ -2899,8 +2920,8 @@ export default {
// 3.
//
if (detail.contract_category) {
this.form.category = detail.contract_category;
this.handleCategoryChange(detail.contract_category);
this.form.category = detail.contract_category.category;
this.handleCategoryChange(detail.contract_category.category);
}
//
@ -3169,6 +3190,35 @@ export default {
this.$Message.error('检查表单时发生错误');
}
},
openPaymentFormPreview(type) {
this.previewType = type;
if (type === 'before') {
const dom = this.$refs.beforePaymentForm;
if (dom && this.form.before_contract_template) {
this.form.before_forms = syncFormDomToHtml(dom, this.form.before_contract_template.contract_template_fields);
}
} else {
const dom = this.$refs.afterPaymentForm;
if (dom && this.form.contract_template) {
this.form.forms = syncFormDomToHtml(dom, this.form.contract_template.contract_template_fields);
}
}
this.showPaymentFormPreview = true;
},
handlePaymentFormPreviewClose() {
if (this.previewType === 'before') {
const dom = this.$refs.previewBeforePaymentForm;
if (dom && this.form.before_contract_template) {
this.form.before_forms = syncFormDomToHtml(dom, this.form.before_contract_template.contract_template_fields);
}
} else {
const dom = this.$refs.previewAfterPaymentForm;
if (dom && this.form.contract_template) {
this.form.forms = syncFormDomToHtml(dom, this.form.contract_template.contract_template_fields);
}
}
this.showPaymentFormPreview = false;
},
},
mounted() {
this.window.width = screen.availWidth * 0.95
@ -3631,4 +3681,7 @@ export default {
right: 0;
left: auto;
}
.payment-preview-modal {
z-index: 4000 !important;
}
</style>

Loading…
Cancel
Save