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

完成新建合同的各个表单字段核对

Browse Source
master
lynn 8 months ago
parent e9ea05bbab
commit dc3e42a89a
1 changed files with 152 additions and 22 deletions
Show Stats Download Patch File Download Diff File

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

@ -308,7 +308,7 @@
<div v-show="currentStep === 2" class="step-content">
<!-- 选择的合同模版类型信息 -->
<div class="template-info">
<div class="info-title">已选合同模版类型</div>
<div class="info-title">合同类型</div>
<div class="info-content">
<div class="info-item">
<span class="label">合同分类：</span>
@ -335,7 +335,7 @@
<!-- 流程控制 -->
<div class="form-section">
<div class="section-title">流程控制</div>
<div class="section-title">合同配置</div>
<div class="process-control-grid">
<div class="control-item">
<div class="control-label">是否为简易流程</div>
@ -394,14 +394,74 @@
</el-select>
</el-form-item>
<!-- 新增承包商/供应商输入框 -->
<el-form-item
label="承包商/供应商"
prop="supply"
:rules="[{ required: form.is_simple === 1, message: '请输入承包商/供应商', trigger: 'submit' }]"
v-show="form.is_simple === 1">
<el-input v-model="form.supply" placeholder="请输入承包商/供应商"></el-input>
</el-form-item>
<!-- 新增执行科室选择 -->
<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>
</div>
</el-form-item>
<el-form-item label="合同预算金额(元)" prop="price" :rules="[{ required: true, message: '请输入预算金额', trigger: 'submit' }]" v-show="showFields.budgetPrice">
<el-input-number v-model="form.price" :min="0" :precision="2" :step="1000" style="width: 100%"></el-input-number>
</el-form-item>
<el-form-item label="资金渠道" prop="moneyWay" :rules="[{ required: true, message: '请选择资金渠道', trigger: 'submit' }]" v-show="showFields.fundChannel">
<el-select v-model="form.moneyWay" placeholder="请选择资金渠道" style="width: 100%">
<el-option v-for="item in moneyWay" :key="item.id" :label="item.value" :value="item.value"></el-option>
</el-select>
<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>
</div>
</el-form-item>
<el-form-item label="关联预算计划" prop="plan" v-show="showFields.budgetPlan" :rules="[{ required: true, message: '请选择关联预算计划', trigger: 'change' }]">
@ -436,10 +496,15 @@
<div v-html="form.before_contract_template.template"></div>
</div>
<!-- 事后支付表格 -->
<div v-else-if="form.contract_template && form.showAfterPayment" class="form-section">
<div v-else-if="form.contract_template" class="form-section">
<div class="section-title">事后支付表格</div>
<div v-html="form.contract_template.template"></div>
</div>
<!-- 无支付表格提示 -->
<div v-else class="form-section">
<div class="section-title">无支付表格</div>
<div class="no-payment-form">当前选择的合同类型没有配置支付表格</div>
</div>
</div>
</div>
@ -447,8 +512,10 @@
<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.contract_template && form.showAfterPayment" type="primary" @click="submit" class="action-button">提交</Button>
<!-- 当显示事后支付表格或没有事前支付表格时，显示"提交"按钮 -->
<Button v-if="currentStep === 3 && (form.showAfterPayment || !form.before_contract_template)" type="primary" @click="submit" class="action-button">提交</Button>
<Button @click="cancel" class="action-button">取消</Button>
</div>
</div>
@ -1160,7 +1227,7 @@ export default {
purchaseMethod: '',
name: '',
type: '', // 项目类型
moneyWay: '',
moneyWay: [],
plan: [],
plan_display: '', // 预算计划显示文本
price: 0,
@ -1182,7 +1249,9 @@ export default {
ratio: '',
payee: ''
}
]
],
showAfterPayment: false, // 是否显示事后支付表格
contract_carry_department: [] // 新增执行科室字段
},
categoryOptions: [],
purchaseMethodsMap: {},
@ -1762,8 +1831,8 @@ export default {
type: this.form.type,
is_plan: this.form.isBudget ? 1 : 0,
purchase_type_id: this.form.purchaseForm, // 修改这里，使用 purchaseForm 而不是 methods
purchase_way_id: this.form.modality,
money_way_id: `${this.form.moneyWay.toString()}`,
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 => {
@ -1892,10 +1961,10 @@ export default {
nextStep() {
// 验证当前步骤的表单
if (this.currentStep === 1) {
// 验证第一步的必填项
if (!this.form.category || !this.form.affairType || !this.form.contractType ||
!this.form.purchaseForm || !this.form.purchaseMethod) {
this.$Message.warning('请填写所有必填项')
// 验证是否至少选择了一个下拉框
if (!this.form.category && !this.form.affairType && !this.form.contractType &&
!this.form.purchaseForm && !this.form.purchaseMethod) {
this.$Message.warning('请至少选择一个选项')
return
}
// 获取模版配置
@ -1958,10 +2027,10 @@ export default {
async getTemplateConfig() {
try {
const params = {
category: this.form.category,
work_type: this.form.affairType,
contract_type: this.form.contractType,
purchase_form: this.form.purchaseForm
category: this.form.category || 0,
work_type: this.form.affairType || 0,
contract_type: this.form.contractType || 0,
purchase_form: this.form.purchaseForm || 0
}
console.log('请求模版配置参数:', params)
@ -2038,11 +2107,11 @@ export default {
purchaseMethod: '',
name: '',
type: '', // 项目类型
money_way_id: '',
moneyWay: [],
plan: [],
plan_display: '', // 预算计划显示文本
price: 0,
supply: '',
supply: '', // 承包商/供应商
// 流程控制字段
is_simple: 0, // 是否为简易流程
has_charge: 0, // 是否为河道处收费类项目
@ -2061,7 +2130,8 @@ export default {
payee: ''
}
],
showAfterPayment: false // 是否显示事后支付表格
showAfterPayment: false, // 是否显示事后支付表格
contract_carry_department: [] // 新增执行科室字段
}
this.affairTypeOptions = []
@ -2229,6 +2299,27 @@ export default {
nextPaymentStep() {
this.form.showAfterPayment = true
},
// 获取资金渠道名称的方法
getMoneyWayName(id) {
const way = this.moneyWay.find(item => item.id === id)
return way ? way.value : ''
},
// 移除资金渠道
removeMoneyWay(id) {
this.form.moneyWay = this.form.moneyWay.filter(item => item !== id)
},
// 获取科室名称的方法
getDepartmentName(id) {
const dept = this.departments.find(item => item.id === id)
return dept ? dept.name : ''
},
// 移除科室
removeDepartment(id) {
this.form.contract_carry_department = this.form.contract_carry_department.filter(item => item !== id)
},
},
mounted() {
this.window.width = screen.availWidth * 0.95
@ -2625,4 +2716,43 @@ export default {
min-width: 100px;
}
}
.no-payment-form {
padding: 20px;
text-align: center;
color: #909399;
font-size: 14px;
background-color: #f5f7fa;
border-radius: 4px;
}
.money-way-selector {
width: 100%;
.money-way-tags {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
.el-tag {
margin-right: 0;
}
}
}
.department-selector {
width: 100%;
.department-tags {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
.el-tag {
margin-right: 0;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save