数据库:
bean:
package com.heeexy.example.bean;
import java.util.Date;
import org.springframework.format.annotation.DateTimeFormat;
import com.fasterxml.jackson.annotation.JsonFormat;
//写跟进表
public class XGJ {
private int id;
private int userId;
private Date update_time;
private Date create_time;
private int dr;
//跟进状态
private String genjinzhuangtai;
//跟进日期
@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
@JsonFormat(timezone = "GMT+8",pattern = "yyyy-MM-dd HH:mm:ss")
private Date genjinriqi;
//对应客户表的客户ID
private int khId;
//跟进内容
private String genjinneirong;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getUserId() {
return userId;
}
public void setUserId(int userId) {
this.userId = userId;
}
public Date getUpdate_time() {
return update_time;
}
public void setUpdate_time(Date update_time) {
this.update_time = update_time;
}
public Date getCreate_time() {
return create_time;
}
public void setCreate_time(Date create_time) {
this.create_time = create_time;
}
public int getDr() {
return dr;
}
public void setDr(int dr) {
this.dr = dr;
}
public String getGenjinzhuangtai() {
return genjinzhuangtai;
}
public void setGenjinzhuangtai(String genjinzhuangtai) {
this.genjinzhuangtai = genjinzhuangtai;
}
public Date getGenjinriqi() {
return genjinriqi;
}
public void setGenjinriqi(Date genjinriqi) {
this.genjinriqi = genjinriqi;
}
public int getKhId() {
return khId;
}
public void setKhId(int khId) {
this.khId = khId;
}
public String getGenjinneirong() {
return genjinneirong;
}
public void setGenjinneirong(String genjinneirong) {
this.genjinneirong = genjinneirong;
}
}
<el-button type="primary" icon="edit" v-if="hasPerm('kh:updateXGJ')" @click="getCKXGJ(scope.row,scope.$index)">写跟进</el-button>
<el-form ref="tempKH" class="small-space" :model="tempKH" style="margin-left:5%;">
<el-row :gutter="10" v-for="(itemx,index) in tempKH.domainsXGJ" :key="index">
<el-form-item label="跟进内容" :prop="'domainsXGJ.' + index + '.genjinneirong'" :rules="{ required: true, message: '请输入跟进内容', trigger: 'blur' }">
<el-input type="text" v-model="itemx.genjinneirong" style='width: 51%'></el-input>
</el-form-item>
<el-form-item label="跟进状态" :prop="'domainsXGJ.' + index + '.genjinzhuangtai'" :rules="{ required: true, message: '请输入跟进状态', trigger: 'blur' }">
<el-select prop="khzt" v-model="itemx.genjinzhuangtai" placeholder="跟进状态" style='width: 51%;'>
<el-option
v-for="item in gjztlist"
:key="item.xuhao"
:label="item.xialamingcheng"
:value="item.xialamingcheng"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="跟进日期" :prop="'domainsXGJ.' + index + '.genjinriqi'" :rules="{ required: true, message: '请输入跟进日期', trigger: 'blur' }">
<el-date-picker type="date" v-model="itemx.genjinriqi" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" tyle="width:185px ;"></el-date-picker>
</el-form-item>
<el-form-item label="userId" hidden=true>
<el-input type="text" v-model="itemx.userId"></el-input>
</el-form-item>
<el-form-item label="khId" hidden=true>
<el-input type="text" v-model="itemx.khId"></el-input>
</el-form-item>
<el-form-item label="dr" hidden=true>
<el-input type="text" v-model="itemx.dr" ></el-input>
</el-form-item>
<el-button type="primary" @click.prevent="removeDomainX(itemx)">删除</el-button>
<el-button type="primary" @click="resetFormX('tempKH')">重置</el-button>
</el-row>
<el-form-item label="跟进信息">
<el-button type="primary" icon="plus" @click="addLadderX">添加</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="guanbi2">取 消</el-button>
<el-button type="primary" v-if="dialogStatusXGJ=='xiegenjin'" :disabled="isDisable" @click="removeyunX()">修 改</el-button>
</div>
</el-dialog>
<script>
export default {
data() {
return {
tempKH: {
id: "",
update_time: "",
create_time: "",
khlx: "",
khzt: "",
ssbm: "",
khmc:"",
dianhua:"",
shouji:"",
dizhi:"",
zuixingenjinjilu: "",
qianfzr: "",
genjinriqi:"",
genjinneirong:"",
fuzeren:"",
status:"",
genjinriqi1:"",
genjinriqi2:"",
faqiriqi:"",
faqiriqi1:"",
faqiriqi2:"",
khlx1:"",
khlx2:"",
khlx3:"",
khzt1:"",
khzt2:"",
khzt3:"",
khzt4:"",
khzt5:"",
khzt6:"",
gongsimingcheng:"",
gongsidizhi:"",
fuzeren:"",
qfkh:"",
userId:"",
dr:"",
shoujianren:"",
fasongneirong:"",
faqiren:"",
domains: [{
id: "",
lianxiren: "",
userId:"",
drt:""
}],
domainsXGJ:[{
id: "",
userId: "",
update_time: "",
create_time: "",
dr: "",
genjinzhuangtai: "",
genjinriqi: "",
khId: "",
genjinneirong: ""
}],
},
khlxlist:{},
zxgjjllist:{},
khztlist:{},
isReadOnly: false,
methods: {
resetFormX(formName) {
this.$refs[formName].resetFields();
},
removeDomainX(itemx) {
var index = this.tempKH.domainsXGJ.indexOf(itemx)
if (index !== -1) {
this.tempKH.domainsXGJ.splice(index, 1)
}
},
addLadderX() {
this.tempKH.domainsXGJ.push({
id: "",
userId: "",
update_time: "",
create_time: "",
dr: "",
genjinzhuangtai: "",
genjinriqi: "",
khId: "",
genjinneirong: ""
});
this.showceshiX();
},
showceshiX(){
for (let i = 0; i < this.tempKH.domains.length; i++) {
console.log(this.tempKH.domains.length);
this.tempKH.domains[i].userId = this.$store.getters.userId;
this.tempKH.domains[i].drt = 0;
};
for (let i = 0; i < this.tempKH.domainsXGJ.length; i++) {
console.log(this.tempKH.domainsXGJ.length);
this.tempKH.domainsXGJ[i].userId = this.$store.getters.userId;
this.tempKH.domainsXGJ[i].dr = 0;
this.tempKH.domainsXGJ[i].khId = this.editObj.id;
}
},
}
}
}
};
</script>页面效果:
注:删除方法传的参数是 v-for = "(itemx,index)"中的itemx
参考文章:
http://element.eleme.io/#/zh-CN element官网