transfer id from one suspension box to another, as shown in the following figure.
1. This is the page. Click to view, and a floating box
2
question: I want the data in the last suspension box to be separate, that is, I click from multiple data on the page, and the data in that suspension box is different. Now all I"ve done is click on the data on the page, and the data in that suspension box is all the same.
attach code:
< template >
<div class="fill">
<el-button type="primary" @click="fillin2()" style="margin-left: 85%"><i class="fa fa-plus-square"></i></el-button>
</div>
<el-table :data="tableData" v-loading="loading" border>
<el-table-column prop="real_name" label="" align="center"></el-table-column>
<el-table-column label="" align="center">
<template slot-scope="scope">
{{enumIsCorp[scope.row.is_corp]}}
</template>
</el-table-column>
<el-table-column label="" align="center">
<template slot-scope="scope">
{{enumSex[scope.row.sex]}}
</template>
</el-table-column>
<el-table-column label="" align="center">
<template slot-scope="scope">
{{enumMarriageStatus[scope.row.marriage_status]}}
</template>
</el-table-column>
<el-table-column prop="" label="" align="center"></el-table-column>
<el-table-column label="" align="center">
<template slot-scope="scope">
<button type="primary" class="btn-farm-more" @click="fillin(scope.row)"><span></span></button>
</template>
</el-table-column>
</el-table>
<div class="query-pagination">
<el-pagination class="pull-right"
@current-change="getData"
:current-page.sync="params.index"
:page-size="params.size"
layout="total, prev, pager, next, jumper"
:total="tableTotal">
</el-pagination>
</div>
<el-dialog width="88%" :visible.sync="fillVisible" :before-close="handleClose">
<div class="fill">
<div class="fill">
<el-form :inline="true" :model="form" ref="form" class="tabtop13" :rules="rules">
<el-form-item label="">
<el-select v-model="form.is_corp" :clearable="true">
<el-option key="1" label="3" value="0"></el-option>
<el-option key="2" label="2" value="1"></el-option>
<el-option key="3" label="1" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="" class="fill">
<el-input placeholder="" v-model="form.real_name" :disabled="form.is_corp === "1""></el-input>
</el-form-item>
<el-form-item label="" class="fill">
<el-select v-model="form.sex">
<el-option key="1" label="" value="1"></el-option>
<el-option key="2" label="" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="" class="fill">
<el-input placeholder="" v-model="form.mobile_no"></el-input>
</el-form-item>
<el-form-item label="" class="fill">
<select-address v-model="form.address_code"></select-address>
</el-form-item>
<el-form-item class="fill">
<el-input placeholder="" v-model="form.address_detail"></el-input>
</el-form-item>
<el-form-item label="" prop="education">
<el-select v-model="form.education">
<el-option key="1" label="" value="0"></el-option>
<el-option key="2" label="" value="1"></el-option>
<el-option key="3" label="" value="2"></el-option>
<el-option key="4" label="" value="3"></el-option>
<el-option key="5" label="" value="4"></el-option>
<el-option key="6" label="" value="5"></el-option>
<el-option key="7" label="" value="6"></el-option>
<el-option key="8" label="" value="7"></el-option>
</el-select>
</el-form-item>
<el-form-item label="" style="width: 25%" prop="marriage_status">
<el-select style="width: 110%;" v-model="form.marriage_status">
<el-option key="1" label="("" )" value="1"></el-option>
<el-option key="2" label="()" value="2"></el-option>
<el-option key="3" label="()" value="3"></el-option>
<el-option key="4" label="" value="4"></el-option>
<el-option key="5" label="" value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-input placeholder="" v-model="form.spouse_real_name"></el-input>
</el-form-item>
<el-form-item label="">
<el-select v-model="form.spouse_sex">
<el-option key="1" label="" value="1"></el-option>
<el-option key="2" label="" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div v-loading="edloading">
<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="-sharpcccccc" class="tabtop13" align="center">
<tr align="center">
<td :rowspan="educationalData.length+1" width="120px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" v-for="(p, index) of educationalData">
<td align="center"><el-input v-model="p.start_end_date"></el-input></td>
<td><el-input v-model="p.age_inter"></el-input></td>
<td><el-input-number :min="0" :controls="false" style="width: 110px" v-model="p.education_mech"></el-input-number></td>
<td><el-input-number :min="0" :controls="false" style="width: 110px" v-model="p.profession"></el-input-number></td>
<td><el-input v-model="p.remark"></el-input></td>
<td width="60px" align="center" v-if="!edAdd">
<el-button type="text" title=""
@click="handleRemove(p.id)"><i class="fa fa-times"></i></el-button>
</td>
<td width="60px" align="center" v-else>
<el-button type="text" title=""
@click="Remove(index, educationalData)"><i class="fa fa-times"></i></el-button>
</td>
</tr>
<tr v-if="edAdd">
<td colspan="7" align="center"><el-button @click="educationalData.push({})"></el-button></td>
</tr>
</table>
<div class="fill">
<el-row type="flex" class="row-bg" justify="left">
<el-col :span="4"><el-button @click="educationalNew"></el-button></el-col>
<el-col :span="6"><el-button @click="getData"></el-button></el-col>
<el-button style="margin-left: 20%" @click="educationalsubmit" :loading="edpostloading"></el-button>
</el-row>
</div>
</div>
<div class="fill" v-loading="staaloading">
<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="-sharpcccccc" class="tabtop13" align="center">
<tr align="center">
<td :rowspan="staffData.length+1" width="120px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" v-for="(p, index) of staffData">
<td><el-input v-model="p.start_end_date"></el-input></td>
<td><el-input v-model="p.age_inter"></el-input></td>
<td><el-input-number :min="0" :controls="false" style="width: 110px" v-model="p.work_unit"></el-input-number></td>
<td><el-input-number :min="0" :controls="false" style="width: 110px" v-model="p.job"></el-input-number></td>
<td><el-input v-model="p.assets_total"></el-input></td>
<td><el-input v-model="p.large_exp"></el-input></td>
<td width="60px" align="center" v-if="!staAdd">
<el-button type="text" title=""
@click="whandleRemove(p.id)"><i class="fa fa-times"></i></el-button>
</td>
<td width="60px" align="center" v-else>
<el-button type="text" title=""
@click="Removew(index, staffData)"><i class="fa fa-times"></i></el-button>
</td>
</tr>
<tr v-if="staAdd">
<td colspan="8" align="center"><el-button @click="staffData.push({})"></el-button></td>
</tr>
</table>
<div class="fill">
<el-row type="flex" class="row-bg" justify="left">
<el-col :span="4"><el-button @click="workNew "></el-button></el-col>
<el-col :span="6"><el-button @click="getData"></el-button></el-col>
<el-button style="margin-left: 20%" @click="onsubmitt" :loading="sdpostloading"></el-button>
</el-row>
</div>
</div>
</div>
<div class="fill">
<el-button @click=" handleClose" style="margin-left: 20%"></el-button>
<el-button style="margin-left: 10%" @click="onsubmit" :loading="postloading"></el-button>
</div>
</el-dialog>
< / div >
< / template >
< script >
import {getCustomerShareholder, getHandEducation, getWorkExp, postCustomerShareholder, putCustomerShareholder,
postWorkExp, postHandEducation, putWorkExp, putHandEducation, deleteHandEducation, deleteWorkExp} from "@/api/credit" import {enumIsCorp, enumMarriageStatus, enumSex, enumEducation} from"@ / utils/enum"
import SelectAddress from"@ / components/SelectAddress2"
export default {
components: {
SelectAddress
},
props: {},
data() {
return {
enumIsCorp,
enumMarriageStatus,
enumSex,
enumEducation,
params: {
index: 1,
size: 10
},
tableData: [],
detaill: {},
educationalData: [{}, {}],
staffData: [{}, {}],
postloading: false,
sdpostloading: false,
edpostloading: false,
edloading: false,
staaloading: false,
edAdd: false,
staAdd: false,
form: {},
tableTotal: 0,
loading: false,
staffloading: false,
fillVisible: false,
isput: false,
}
},
computed: {
},
watch: {},
created() {
this.init()
this.getData()
},
mounted() {
},
methods: {
init() {
this.detaill = JSON.parse(localStorage.getItem("detail"))
},
educationalNew() {
this.edAdd = true
},
workNew() {
this.staAdd = true
},
getData() {
this.loading = true
this.edloading = true
this.staaloading = true
this.edAdd = false
this.staAdd = false
this.tableData = []
this.educationalData = []
this.staffData = []
getCustomerShareholder({
index: this.params.index,
size: this.params.size,
service_id: this.detaill.service_id,
customer_id: this.detaill.customer_id
}, {customer_id: "eq", service_id: "eq"}, {is_corp: "desc"}).then(res => {
if (res.data) {
this.tableData = res.data.data
this.tableTotal = res.data.totalCount
}
}).catch(err => {
console.log(err)
}).then(() => {
this.loading = false
})
getHandEducation({
customer_id: this.detaill.customer_id,
id: this.form.datum_customer_shareholder_id
}, {customer_id: "eq", id: "eq"}, {}).then(res => {
if (res.data) {
for (let item of res.data) {
if (item.is_corp === "0") {
this.educationalData.push(item)
} else if (item.is_corp === "1") {
this.educationalData.push(item)
} else {
this.educationalData.push(item)
}
}
// this.educationalData = res.data
}
}).catch(err => {
console.log(err)
}).then(() => {
this.edloading = false
})
getWorkExp({
customer_id: this.detaill.customer_id,
id: this.form.datum_customer_shareholder_id
}, {customer_id: "eq", id: "eq"}, {}).then(res => {
if (res.data) {
this.staffData = res.data
}
}).catch(err => {
console.log(err)
}).then(() => {
this.staaloading = false
})
},
handleClose() {
this.form = {}
this.idcardFileList = []
this.marriagestatusFileList = []
this.positioimagesFileList = []
this.honorimagesFileList = []
this.accountbookimagesFileList = []
this.fillVisible = false
this.$refs.form.clearValidate()
},
fillin(val) {
this.fillVisible = true
this.isput = true
this.edAdd = false
this.staAdd = false
this.form = {...val}
this.photoinit()
},
fillin2() {
this.fillVisible = true
this.educationalData = [{}, {}]
this.staffData = [{}, {}]
},
onsubmit() {
this.$refs.form.validate(valid => {
if (valid) {
this.postloading = true
this.$refs.idcard.submit()
} else {
this.$message.error("")
}
})
},
educationalsubmit() {
this.edpostloading = true
if (this.educationalData.length < 1) { return this.$message.warning("") }
for (let t = 0; t < this.educationalData.length; tPP) {
this.educationalData[t].customer_id = this.detaill.customer_id
this.educationalData[t].customer_name = this.detaill.farm_name
this.educationalData[t].customer_related_id = this.detaill.customer_related_id
this.educationalData[t].id = this.form.datum_customer_shareholder_id
}
if (this.edAdd) {
postHandEducation(this.educationalData).then(res => {
if (res.data) {
this.$message.success("")
this.getData()
} else {
this.$message.error("")
}
}).catch(err => {
console.log(err)
this.$message.error("")
}).then(() => {
this.edpostloading = false
})
} else {
putHandEducation(this.educationalData[0].id, this.educationalData[0]).then(res => {
if (res.data) {
this.$message.success("")
this.fillin()
this.getData()
} else {
this.$message.error("")
}
}).catch(err => {
console.log(err)
this.$message.error("")
}).then(() => {
this.edpostloading = false
})
}
},
onsubmitt() {
this.sdpostloading = true
if (this.staffData.length < 1) { return this.$message.warning("") }
for (let t = 0; t < this.staffData.length; tPP) {
this.staffData[t].customer_id = this.detaill.customer_id
this.staffData[t].customer_name = this.detaill.farm_name
this.staffData[t].customer_related_id = this.detaill.customer_related_id
this.staffData[t].id = this.form.datum_customer_shareholder_id
}
if (this.staAdd) {
postWorkExp(this.staffData).then(res => {
if (res.data) {
this.$message.success("")
this.getData()
} else {
this.$message.error("")
}
}).catch(err => {
console.log(err)
this.$message.error("")
}).then(() => {
this.sdpostloading = false
})
} else {
putWorkExp(this.staffData[0].id, this.staffData[0]).then(res => {
if (res.data) {
this.$message.success("")
this.fillin()
this.getData()
} else {
this.$message.error("")
}
}).catch(err => {
console.log(err)
this.$message.error("")
}).then(() => {
this.sdpostloading = false
})
}
},
handleRemove(id) {
deleteHandEducation(id).then(res => {
if (res.data) {
this.$message.success("")
// this.getData()
this.handleClose()
}
}).catch(err => {
console.log(err)
this.$message.error("")
})
},
whandleRemove(id) {
deleteWorkExp(id).then(res => {
if (res.data) {
this.$message.success("")
this.handleClose()
this.getData()
}
}).catch(err => {
console.log(err)
this.$message.error("")
})
},
Removew(index, data) {
data.splice(index, 1)
},
Remove(index, data) {
data.splice(index, 1)
}
}}
< / script >
< style scoped >
.fill {
border: 1px solid -sharpebeef5;}
.tabtop13 {
margin-top: 15px;}
.tabtop13 td {
background-color:-sharpffffff;
height:25px;
line-height:150%;}
.biaoti {
font-family: ;
font-size: 26px;
font-weight: bold;
border-bottom:1px dashed -sharpCCCCCC;
color: -sharp255e95;}
< / style >
now the main problem is education and work. All the data displayed are the same. Why?
Sep.03,2021