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

完成事前和事后支付表格的填写

Browse Source
master
lynn 1 year ago
parent dc3e42a89a
commit 82cd17b824
1 changed files with 347 additions and 53 deletions
Show Stats Download Patch File Download Diff File

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

@ -493,12 +493,12 @@
<!-- 事前支付表格 -->
<div v-if="form.before_contract_template && !form.showAfterPayment" class="form-section">
<div class="section-title">事前支付表格</div>
<div v-html="form.before_contract_template.template"></div>
<div ref="beforePaymentForm" v-html="form.before_contract_template.template"></div>
</div>
<!-- 事后支付表格 -->
<div v-else-if="form.contract_template" class="form-section">
<div class="section-title">事后支付表格</div>
<div v-html="form.contract_template.template"></div>
<div ref="afterPaymentForm" v-html="form.contract_template.template"></div>
</div>
<!-- 无支付表格提示 -->
<div v-else class="form-section">
@ -512,10 +512,18 @@
<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>
<!-- 当有事前支付表格且未显示事后支付表格时，显示"下一步"按钮 -->
<Button v-if="currentStep === 3 && form.before_contract_template && !form.showAfterPayment" type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
<!-- 当显示事后支付表格或没有事前支付表格时，显示"提交"按钮 -->
<Button v-if="currentStep === 3 && (form.showAfterPayment || !form.before_contract_template)" type="primary" @click="submit" class="action-button">提交</Button>
<!-- 当有事前支付表格且未显示事后支付表格时，显示"下一步"和"跳过"按钮 -->
<template v-if="currentStep === 3 && form.before_contract_template && !form.showAfterPayment">
<Button type="primary" @click="nextPaymentStep" class="action-button">下一步</Button>
<Button @click="skipPrePayment" class="action-button">跳过，稍后填写</Button>
</template>
<!-- 当显示事后支付表格时，显示"提交"和"跳过"按钮 -->
<template v-else-if="currentStep === 3 && form.contract_template">
<Button type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="skipPostPayment" class="action-button">跳过，稍后填写</Button>
</template>
<!-- 当没有支付表格时，只显示"提交"按钮 -->
<Button v-else-if="currentStep === 3" type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="cancel" class="action-button">取消</Button>
</div>
</div>
@ -1818,53 +1826,102 @@ export default {
},
//提交新建
async submit() {
addContrant({
// 第一步的数据
category: this.form.category,
work_type: this.form.affairType,
contract_type: this.form.contractType,
purchase_form: this.form.purchaseForm,
purchase_sub_form: this.form.purchaseSubForm,
purchase_method: this.form.purchaseMethod,
// 第二步的数据
type: this.form.type,
is_plan: this.form.isBudget ? 1 : 0,
purchase_type_id: this.form.purchaseForm, // 修改这里，使用 purchaseForm 而不是 methods
purchase_way_id: this.form.purchaseMethod,
money_way_id: this.form.moneyWay.toString(), // 修改这里，将数组转换为字符串
plan_price: this.form.price,
name: this.form.name,
contract_plan_links: this.form.plan.map(item => {
return item.value
}),
is_substitute: this.form.is_substitute,
is_simple: this.form.is_simple,
has_charge: this.form.has_charge,
supply: this.form.supply,
money: this.form.money,
status: this.form.is_simple ? 2 : 1,
gov_plane_id: this.form.gov_plane_id,
contract_carry_department: this.form.contract_carry_department?.map(i => ({carry_department_id: i})) || [],
// 第三步的数据
before_contract_template: this.form.before_contract_template,
contract_template: this.form.contract_template
}).then(res => {
this.isShowAdd = false
try {
// 更新事前支付表格的 HTML 和值
if (this.form.before_contract_template &&
this.form.before_contract_template.contract_template_fields &&
this.$refs.beforePaymentForm) {
const inputs = this.$refs.beforePaymentForm.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
const fieldName = input.getAttribute('data-field');
if (fieldName) {
const field = this.form.before_contract_template.contract_template_fields.find(f => f.field === fieldName);
if (field) {
if (input.type === 'checkbox' || input.type === 'radio') {
const checkedInput = this.$refs.beforePaymentForm.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);
}
}
}
});
this.form.before_contract_template.template = this.$refs.beforePaymentForm.innerHTML;
}
// 更新事后支付表格的 HTML 和值
if (this.form.contract_template &&
this.form.contract_template.contract_template_fields &&
this.$refs.afterPaymentForm) {
const inputs = this.$refs.afterPaymentForm.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
const fieldName = input.getAttribute('data-field');
if (fieldName) {
const field = this.form.contract_template.contract_template_fields.find(f => f.field === fieldName);
if (field) {
if (input.type === 'checkbox' || input.type === 'radio') {
const checkedInput = this.$refs.afterPaymentForm.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);
}
}
}
});
this.form.contract_template.template = this.$refs.afterPaymentForm.innerHTML;
}
// 提交数据
const res = await addContrant({
category: this.form.category,
work_type: this.form.affairType,
contract_type: this.form.contractType,
purchase_form: this.form.purchaseForm,
purchase_sub_form: this.form.purchaseSubForm,
purchase_method: this.form.purchaseMethod,
type: this.form.type,
is_plan: this.form.isBudget ? 1 : 0,
purchase_type_id: this.form.purchaseForm,
purchase_way_id: this.form.purchaseMethod,
money_way_id: this.form.moneyWay.toString(),
plan_price: this.form.price,
name: this.form.name,
contract_plan_links: this.form.plan.map(item => item.value),
is_substitute: this.form.is_substitute,
is_simple: this.form.is_simple,
has_charge: this.form.has_charge,
supply: this.form.supply,
money: this.form.money,
status: this.form.is_simple ? 2 : 1,
gov_plane_id: this.form.gov_plane_id,
contract_carry_department: this.form.contract_carry_department?.map(i => ({carry_department_id: i})) || [],
before_contract_template: this.form.before_contract_template,
contract_template: this.form.contract_template
});
this.isShowAdd = false;
Message({
type: 'success',
message: '操作成功'
})
this.resetForm()
this.$refs.planTable?.clearSelection()
this.getContracts()
}).catch(error => {
});
this.resetForm();
this.$refs.planTable?.clearSelection();
this.getContracts();
} catch (error) {
console.error('提交失败:', error);
Message({
type: 'error',
message: error.message || '提交失败'
})
})
});
}
},
//删除合同
@ -1983,18 +2040,56 @@ export default {
this.currentStep++
}
})
} else {
} else if (this.currentStep === 3) {
this.currentStep++
}
},
prevStep() {
// 如果在事后支付表格，先保存内容
if (this.currentStep === 3 && this.form.showAfterPayment &&
this.form.contract_template &&
this.form.contract_template.contract_template_fields &&
this.$refs.afterPaymentForm) {
// 获取所有输入控件
const inputs = this.$refs.afterPaymentForm.querySelectorAll('input, select, textarea');
// 遍历所有输入控件，更新值到 HTML
inputs.forEach(input => {
const fieldName = input.getAttribute('data-field');
if (fieldName) {
const field = this.form.contract_template.contract_template_fields.find(f => f.field === fieldName);
if (field) {
if (input.type === 'checkbox' || input.type === 'radio') {
// 对于复选框和单选框，需要找到选中的值
const checkedInput = this.$refs.afterPaymentForm.querySelector(`[data-field="${fieldName}"]:checked`);
field.value = checkedInput ? checkedInput.value : '';
// 更新 HTML 中的 checked 状态
if (checkedInput) {
checkedInput.setAttribute('checked', 'checked');
}
} else {
field.value = input.value;
// 更新 HTML 中的 value
input.setAttribute('value', input.value);
}
}
}
});
// 获取更新后的 HTML
const afterFormHtml = this.$refs.afterPaymentForm.innerHTML;
// 更新模板
this.form.contract_template.template = afterFormHtml;
}
if (this.currentStep === 3 && this.form.showAfterPayment && this.form.before_contract_template) {
// 如果在事后支付表格且有事前支付表格，则返回事前支付表格
this.form.showAfterPayment = false
this.form.showAfterPayment = false;
} else {
// 其他情况正常返回上一步
this.currentStep--
this.currentStep--;
}
},
@ -2068,10 +2163,131 @@ export default {
// 保存支付表格模板
if (config.before_contract_template) {
this.form.before_contract_template = config.before_contract_template
// 处理事前支付表格模板
let beforeTemplate = config.before_contract_template.template;
if (beforeTemplate && config.before_contract_template.contract_template_fields) {
console.log('处理事前支付表格模板:', config.before_contract_template.contract_template_fields)
// 遍历字段列表，为每个字段找到对应的控件
config.before_contract_template.contract_template_fields.forEach(field => {
// 在模板中查找 data-field 属性值与字段名相同的控件
const regex = new RegExp(`<[^>]*data-field="${field.field}"[^>]*>`, 'g');
const matches = beforeTemplate.match(regex);
if (matches) {
matches.forEach(match => {
// 获取控件类型
let controlType = 'text';
if (match.includes('type="number"')) controlType = 'number';
else if (match.includes('type="date"')) controlType = 'date';
else if (match.includes('type="checkbox"')) controlType = 'checkbox';
else if (match.includes('type="radio"')) controlType = 'radio';
else if (match.includes('<select')) controlType = 'select';
else if (match.includes('<textarea')) controlType = 'textarea';
// 根据控件类型设置 id 和 value
let newControl = match;
// 添加 id
if (!newControl.includes('id=')) {
newControl = newControl.replace('data-field', `id="before_${field.field}" data-field`);
}
// 设置 value
if (controlType === 'checkbox' || controlType === 'radio') {
// 对于复选框和单选框，需要处理 options
const options = field.options ? JSON.parse(field.options) : [];
options.forEach(opt => {
const optionRegex = new RegExp(`<input[^>]*value="${opt.value}"[^>]*>`, 'g');
const optionMatches = newControl.match(optionRegex);
if (optionMatches) {
optionMatches.forEach(optionMatch => {
const checked = field.value === opt.value ? 'checked' : '';
newControl = newControl.replace(optionMatch, optionMatch.replace('>', ` ${checked}>`));
});
}
});
} else {
// 对于其他控件，直接设置 value
if (!newControl.includes('value=')) {
newControl = newControl.replace('>', ` value="${field.value || ''}">`);
} else {
newControl = newControl.replace(/value="[^"]*"/, `value="${field.value || ''}"`);
}
}
// 替换原控件
beforeTemplate = beforeTemplate.replace(match, newControl);
});
}
});
}
this.form.before_contract_template = config.before_contract_template;
this.form.before_contract_template.template = beforeTemplate;
}
if (config.contract_template) {
this.form.contract_template = config.contract_template
// 处理事后支付表格模板
let afterTemplate = config.contract_template.template;
if (afterTemplate && config.contract_template.contract_template_fields) {
console.log('处理事后支付表格模板:', config.contract_template.contract_template_fields)
// 遍历字段列表，为每个字段找到对应的控件
config.contract_template.contract_template_fields.forEach(field => {
// 在模板中查找 data-field 属性值与字段名相同的控件
const regex = new RegExp(`<[^>]*data-field="${field.field}"[^>]*>`, 'g');
const matches = afterTemplate.match(regex);
if (matches) {
matches.forEach(match => {
// 获取控件类型
let controlType = 'text';
if (match.includes('type="number"')) controlType = 'number';
else if (match.includes('type="date"')) controlType = 'date';
else if (match.includes('type="checkbox"')) controlType = 'checkbox';
else if (match.includes('type="radio"')) controlType = 'radio';
else if (match.includes('<select')) controlType = 'select';
else if (match.includes('<textarea')) controlType = 'textarea';
// 根据控件类型设置 id 和 value
let newControl = match;
// 添加 id
if (!newControl.includes('id=')) {
newControl = newControl.replace('data-field', `id="after_${field.field}" data-field`);
}
// 设置 value
if (controlType === 'checkbox' || controlType === 'radio') {
// 对于复选框和单选框，需要处理 options
const options = field.options ? JSON.parse(field.options) : [];
options.forEach(opt => {
const optionRegex = new RegExp(`<input[^>]*value="${opt.value}"[^>]*>`, 'g');
const optionMatches = newControl.match(optionRegex);
if (optionMatches) {
optionMatches.forEach(optionMatch => {
const checked = field.value === opt.value ? 'checked' : '';
newControl = newControl.replace(optionMatch, optionMatch.replace('>', ` ${checked}>`));
});
}
});
} else {
// 对于其他控件，直接设置 value
if (!newControl.includes('value=')) {
newControl = newControl.replace('>', ` value="${field.value || ''}">`);
} else {
newControl = newControl.replace(/value="[^"]*"/, `value="${field.value || ''}"`);
}
}
// 替换原控件
afterTemplate = afterTemplate.replace(match, newControl);
});
}
});
}
this.form.contract_template = config.contract_template;
this.form.contract_template.template = afterTemplate;
}
},
@ -2297,7 +2513,42 @@ export default {
},
// 切换到事后支付表格
nextPaymentStep() {
this.form.showAfterPayment = true
// 保存事前支付表格的数据
if (this.form.before_contract_template && this.form.before_contract_template.contract_template_fields) {
// 获取所有输入控件
const inputs = this.$refs.beforePaymentForm.querySelectorAll('input, select, textarea');
// 遍历所有输入控件，更新值到 HTML
inputs.forEach(input => {
const fieldName = input.getAttribute('data-field');
if (fieldName) {
const field = this.form.before_contract_template.contract_template_fields.find(f => f.field === fieldName);
if (field) {
if (input.type === 'checkbox' || input.type === 'radio') {
// 对于复选框和单选框，需要找到选中的值
const checkedInput = this.$refs.beforePaymentForm.querySelector(`[data-field="${fieldName}"]:checked`);
field.value = checkedInput ? checkedInput.value : '';
// 更新 HTML 中的 checked 状态
if (checkedInput) {
checkedInput.setAttribute('checked', 'checked');
}
} else {
field.value = input.value;
// 更新 HTML 中的 value
input.setAttribute('value', input.value);
}
}
}
});
// 获取更新后的 HTML
const beforeFormHtml = this.$refs.beforePaymentForm.innerHTML;
console.log("被修改的模板", beforeFormHtml);
// 更新模板
this.form.before_contract_template.template = beforeFormHtml;
}
this.form.showAfterPayment = true;
},
// 获取资金渠道名称的方法
getMoneyWayName(id) {
@ -2320,6 +2571,36 @@ export default {
removeDepartment(id) {
this.form.contract_carry_department = this.form.contract_carry_department.filter(item => item !== id)
},
// 跳过事前支付表格
skipPrePayment() {
this.form.showAfterPayment = true
},
// 跳过事后支付表格
skipPostPayment() {
this.submit()
},
// 更新事前表格字段值
updateBeforeFieldValue(field, value) {
if (this.form.before_contract_template && this.form.before_contract_template.contract_template_fields) {
const fieldObj = this.form.before_contract_template.contract_template_fields.find(f => f.field === field);
if (fieldObj) {
fieldObj.value = value;
}
}
},
// 更新事后表格字段值
updateAfterFieldValue(field, value) {
if (this.form.contract_template && this.form.contract_template.contract_template_fields) {
const fieldObj = this.form.contract_template.contract_template_fields.find(f => f.field === field);
if (fieldObj) {
fieldObj.value = value;
}
}
},
},
mounted() {
this.window.width = screen.availWidth * 0.95
@ -2755,4 +3036,17 @@ export default {
}
}
}
.skip-option {
margin-top: 16px;
text-align: center;
.el-button {
color: #909399;
&:hover {
color: #409EFF;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save