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

修改事后支付表格支持最多选择两个

Browse Source
master
linyongLynn 1 year ago
parent 9909acbb71
commit 8386826a16
2 changed files with 137 additions and 25 deletions
Show Stats Download Patch File Download Diff File

156
src/views/businessConfig/contractConfig.vue
Unescape View File

@ -128,9 +128,37 @@
<span>{{ scope.row.prePaymentForm || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="postPaymentForm" label="事后支付表格" width="120">
<el-table-column prop="postPaymentForm" label="事后支付表格" width="200">
<template #default="scope">
<span>{{ scope.row.postPaymentForm || '-' }}</span>
<div v-if="scope.row.postPaymentForm && scope.row.postPaymentForm !== '-'">
<el-tooltip
v-if="scope.row.postPaymentForm.split(',').length > 1"
:content="scope.row.postPaymentForm"
placement="top"
>
<div>
<el-tag
v-for="(form, index) in scope.row.postPaymentForm.split(',')"
:key="index"
size="small"
type="info"
style="margin-right: 4px; margin-bottom: 4px;"
>
{{ form.trim() }}
</el-tag>
</div>
</el-tooltip>
<div v-else>
<el-tag
size="small"
type="info"
style="margin-right: 4px; margin-bottom: 4px;"
>
{{ scope.row.postPaymentForm.trim() }}
</el-tag>
</div>
</div>
<span v-else>-</span>
</template>
</el-table-column>
</el-table-column>
@ -394,7 +422,15 @@
</el-form-item>
<el-form-item label="事后支付表格" prop="postPaymentForm" class="form-section">
<el-select v-model="form.postPaymentForm" placeholder="请选择事后支付表格" class="form-input" clearable>
<el-select
v-model="form.postPaymentForm"
placeholder="请选择事后支付表格（最多选择2个）"
class="form-input"
multiple
:multiple-limit="2"
collapse-tags
clearable
>
<el-option
v-for="item in paymentFormOptions"
:key="item.id"
@ -402,6 +438,9 @@
:value="item.id"
/>
</el-select>
<div style="font-size: 12px; color: #909399; margin-top: 4px;">
最多可选择2个事后支付表格，第一个为contract_template_id，第二个为contract_template_id2
</div>
</el-form-item>
<!-- 合同配置选项 -->
@ -586,7 +625,7 @@ export default {
tenderReview: false,
contractSign: false,
prePaymentForm: '', // 事前支付表格
postPaymentForm: '', // 事后支付表格
postPaymentForm: [], // 事后支付表格（数组，支持多选）
is_simple: 0,
has_charge: 0,
isBudget: 0,
@ -651,11 +690,12 @@ export default {
// 初始化数据
async initData() {
try {
// 获取列表数据
await this.getTableData()
// 获取配置数据
await this.getCategoryOptions()
// 不再这里获取支付表格选项
// 获取支付表格选项
await this.getPaymentFormOptions()
// 获取列表数据
await this.getTableData()
} catch (error) {
console.error('初始化数据失败:', error)
this.$message.error('初始化数据失败')
@ -664,6 +704,11 @@ export default {
// 获取列表数据
async getTableData() {
try {
// 确保支付表格选项已加载
if (this.paymentFormOptions.length === 0) {
await this.getPaymentFormOptions()
}
// 构建查询参数
const params = {
page: this.currentPage,
@ -705,9 +750,10 @@ export default {
tenderReview: item.flow_invite || false,
contractSign: item.flow_join || false,
prePaymentForm: item.before_contract_template?.name || '-',
postPaymentForm: item.contract_template?.name || '-',
postPaymentForm: this.formatPostPaymentForms(item.contract_template_id, item.contract_template_id2, item.contract_template),
before_contract_template_id: item.before_contract_template_id,
contract_template_id: item.contract_template_id,
contract_template_id2: item.contract_template_id2,
is_simple_default: item.is_simple_default || 0,
has_charge_default: item.has_charge_default || 0,
is_plan_default: item.is_plan_default || 0,
@ -926,13 +972,9 @@ export default {
this.purchaseFormOptions = []
this.purchaseMethodOptions = []
// 获取支付表格选项
try {
// 确保支付表格选项已加载
if (this.paymentFormOptions.length === 0) {
await this.getPaymentFormOptions()
} catch (error) {
console.error('获取支付表格选项失败:', error)
this.$message.error('获取支付表格选项失败')
return
}
// 重置表单数据
@ -953,7 +995,7 @@ export default {
tenderReview: false,
contractSign: false,
prePaymentForm: '',
postPaymentForm: '',
postPaymentForm: [],
is_simple: 0,
has_charge: 0,
isBudget: 0,
@ -997,8 +1039,10 @@ export default {
this.purchaseFormOptions = []
try {
// 先获取支付表格选项
await this.getPaymentFormOptions()
// 确保支付表格选项已加载
if (this.paymentFormOptions.length === 0) {
await this.getPaymentFormOptions()
}
console.log('编辑行数据:', row) // 打印行数据，查看字段名
@ -1021,7 +1065,7 @@ export default {
tenderReview: row.tenderReview === true || row.tenderReview === 1,
contractSign: row.contractSign === true || row.contractSign === 1,
prePaymentForm: row.before_contract_template_id || '',
postPaymentForm: row.contract_template_id || '',
postPaymentForm: this.getPostPaymentFormArray(row.contract_template_id, row.contract_template_id2),
// 合同配置参数
is_simple_editable: row.edit_is_simple === 1,
has_charge_editable: row.edit_has_charge === 1,
@ -1054,10 +1098,10 @@ export default {
// 保存原始支付表格值
this.originalPrePaymentForm = row.before_contract_template_id
this.originalPostPaymentForm = row.contract_template_id
this.originalPostPaymentForm = this.getPostPaymentFormArray(row.contract_template_id, row.contract_template_id2)
// 加载下拉框选项
this.loadEditOptions(row)
await this.loadEditOptions(row)
// 确保表单数据已经设置
this.$nextTick(() => {
@ -1081,6 +1125,11 @@ export default {
await this.getCategoryOptions()
}
// 确保支付表格选项已加载
if (this.paymentFormOptions.length === 0) {
await this.getPaymentFormOptions()
}
// 加载事务类选项
if (row.category_id) {
const category = this.categoryOptions.find(item => item.id === row.category_id)
@ -1160,6 +1209,11 @@ export default {
async handleSubmit() {
this.$refs.formRef.validate(async(valid) => {
if (valid) {
// 验证事后支付表格选择数量
if (this.form.postPaymentForm && this.form.postPaymentForm.length > 2) {
this.$message.error('事后支付表格最多只能选择2个')
return
}
try {
// 准备提交的数据，按照API期望的参数格式
const submitData = {
@ -1224,16 +1278,20 @@ export default {
}
// 如果事后支付表格有值且与原始值不同，才添加到提交数据中
if (this.form.postPaymentForm === '') {
// 如果事后支付表格有值且与原始值不同，才添加到提交数据中
if (this.form.postPaymentForm.length === 0) {
submitData.contract_template_id = ''
} else if (this.form.postPaymentForm && this.form.postPaymentForm !== this.originalPostPaymentForm) {
submitData.contract_template_id = this.form.postPaymentForm
submitData.contract_template_id2 = ''
} else if (this.form.postPaymentForm.length > 0 && JSON.stringify(this.form.postPaymentForm) !== JSON.stringify(this.originalPostPaymentForm)) {
submitData.contract_template_id = this.form.postPaymentForm[0] || ''
submitData.contract_template_id2 = this.form.postPaymentForm[1] || ''
}
} else {
// 新增模式下，如果有支付表格值就添加
submitData.before_contract_template_id = this.form.prePaymentForm || ''
if (this.form.postPaymentForm) {
submitData.contract_template_id = this.form.postPaymentForm
if (this.form.postPaymentForm && this.form.postPaymentForm.length > 0) {
submitData.contract_template_id = this.form.postPaymentForm[0] || ''
submitData.contract_template_id2 = this.form.postPaymentForm[1] || ''
}
}
@ -1275,6 +1333,26 @@ export default {
// 分页加载数据
this.getTableData()
},
// 获取事后支付表格数组
getPostPaymentFormArray(templateId1, templateId2) {
const array = []
if (templateId1) array.push(templateId1)
if (templateId2) array.push(templateId2)
return array
},
// 格式化事后支付表格显示
formatPostPaymentForms(templateId1, templateId2, template) {
const array = this.getPostPaymentFormArray(templateId1, templateId2)
if (array.length === 0) return '-'
// 根据ID查找对应的表格名称
const formNames = array.map(id => {
const formOption = this.paymentFormOptions.find(option => option.id == id)
return formOption ? formOption.label : `表格${id}`
})
return formNames.join(', ')
},
// 获取支付表格选项
async getPaymentFormOptions() {
try {
@ -1405,6 +1483,18 @@ export default {
font-size: 16px;
}
// 表格中多个标签的样式
:deep(.el-table) {
.el-tag {
margin: 2px 4px 2px 0;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
}
:deep(.el-table) {
margin-top: 20px;
}
@ -1593,6 +1683,22 @@ export default {
border-radius: 4px;
border-color: #dee2e6;
}
// 多选组件的样式优化
:deep(.el-select--multiple) {
.el-select__tags {
max-width: calc(100% - 30px);
}
.el-tag {
margin: 2px 4px 2px 0;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
}
}
.drawer-footer {

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

@ -2234,6 +2234,12 @@ export default {
return
}
// 检查执行科室字段
if (!this.form.contract_carry_department || this.form.contract_carry_department.length === 0) {
this.$Message.warning('请选择执行科室')
return
}
if (missingFields.length > 0) {
// 生成具体的错误提示信息
const fieldNames = {

Write Preview
Loading…
Cancel
Save