前言:
近期参与的项目中,需要在新增的弹框中做一个判断(编辑不动):通过判断用户输入的数量的值来动态的添加内容的input框。即:
实现过程:
(1)
首先还是在showtable.vue页面写好新增编辑弹框和风险内容弹框
<!-- 新增编辑 -->
<el-dialog :title="title" :visible.sync="dialogFormVisible">
<add-edit-form ref="addEditProcess" :rowData="rowData" @sendForm="sendForm" :isEdit="isEdit" :title="title"></add-edit-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitAddEditForm">确 定</el-button>
</div>
</el-dialog>
<!-- 风险内容 -->
<el-dialog title="风险内容" :visible.sync="dialogFormRisk">
<el-form ref="riskForm">
<el-form-item :label="'风险内容'+(i+1)" label-width="120px" v-for="(item,i) of riskItems" :key="i">
<el-input v-model="riskItems[i]"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormRisk = false">取 消</el-button>
<el-button type="primary" @click="determineRisk">确 定</el-button>
</div>
</el-dialog>
(2)
确定新增按钮,调的还是新增组件的transform方法,再回来就是sendForm方法,此时,需要判断status和数量了:
// 新增编辑--子父组件传值
sendForm(formData) {
this.formData = formData
let submitObj = {
"url": '',
"msg": '',
}
if (formData.status === "1") {
if(formData.addForm.riskquantity == "0"){
// 直接新增
submitObj.url = add.url
submitObj.msg = "确定新增?"
submitObj.contentType = 'json'
//调共同方法(接口)
this.getInterface(submitObj,formData)
}else{
//打开风险内容弹框
this.dialogFormRisk = true
let riskData = formData.addForm.riskquantity
this.riskItems = []
for(let i=1;i<=riskData;i++){
this.riskItems.push('')
}
}
} else {
submitObj.url = modify.url
submitObj.msg = "确定修改?"
submitObj.contentType = 'json'
this.getInterface(submitObj,formData)
}
},
// 共同方法
getInterface(submitObj,formData){
let _this = this
this.$confirm(submitObj.msg, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$post(submitObj.url, formData.addForm,submitObj.contentType).then(res => {
this.$message({
message: res.msg,
type: 'success',
duration: 1500,
onClose: function () {
_this.dialogFormVisible = false
_this.dialogFormRisk = false
let form = {
"page": _this.page,
"limit": _this.limit
}
_this.getTableData(form)
}
});
}).catch(err => {
_this.dialogFormVisible = false
})
}).catch(err => {
console.log(err)
})
},
(3)
最后就是风险内容填完调新增接口了:
// 确定风险内容
determineRisk(){
this.formData.addForm.risk_content = this.riskItems
let submitObj = {
"url": mini_upgrade_change_details_add.url,
"msg": '确定新增?',
"contentType":'json'
}
this.getInterface(submitObj,this.formData)
},