<!-- 公司资质 -->
|
<template>
|
<div class="aptitude">
|
<el-button type="primary" style="margin-bottom:30px" icon="el-icon-circle-plus-outline" @click="addAptitude" size="medium">新增公司资质信息</el-button>
|
<el-table stripe highlight-current-row :data="aptitudeData" :header-cell-style="{background:'#f5f5f5',color:'#222222'}" v-loading="loading">
|
<el-table-column min-width="220" prop="aptname" label="资质名称" show-overflow-tooltip>
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">资质名称</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.aptname}}</span>
|
<el-input style="padding-left:15px" maxlength="100" size="small" v-show="row.isEdit" v-model="row.aptname" placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200" prop="aptcertstartdate" label="资质发证日期">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">资质发证日期</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.aptcertstartdate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.aptcertstartdate"
|
type="date"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期"
|
v-show="row.isEdit"
|
></el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200" prop="aptcertenddate" label="资质到期日期">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">资质到期日期</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.aptcertenddate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.aptcertenddate"
|
type="date"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期"
|
v-show="row.isEdit"
|
></el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="220" prop="aptcertorgname" show-overflow-tooltip label="资质发证机构">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">资质发证机构</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.aptcertorgname}}</span>
|
<el-input maxlength="100" style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.aptcertorgname" placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="110" label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click.native="handleEdit(scope.row)" v-if="!scope.row.isEdit">修改</el-button>
|
<el-button type="text" @click.native="handleSave(scope.row,scope.$index)" v-else>保存</el-button>
|
<el-button type="text" @click.native="handleCancel(scope.row,scope.$index)" v-if="scope.row.isCancel">取消</el-button>
|
<el-button type="text" @click.native="handleDelete(scope.row,scope.$index)" v-else>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="currentPage"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="10"
|
layout="prev, pager, next, jumper, total, sizes"
|
:total="total"
|
></el-pagination>
|
</div>
|
</template>
|
<script>
|
import {
|
qryZBDAlterAptList,
|
saveZbdAlterAptInfoPre,
|
delZBDAlterApt
|
} from "@api/product";
|
import common from '@/utils/common'
|
export default {
|
data () {
|
return {
|
aptitudeData:[],
|
initialArr:[],
|
total:0,
|
currentPage: 1,
|
loading:false,
|
applyInfo:this.$store.state.product.applyInfo,
|
form:{
|
currentPage:1,
|
pageSize:10,
|
customerID:this.$store.state.product.applyInfo.customerid,
|
objectType:this.$store.state.product.applyInfo.alterobjecttype,
|
serialNo:this.$store.state.product.applyInfo.alterobjectno,
|
}
|
}
|
},
|
created () {
|
this.getAptList()
|
},
|
methods: {
|
// 查询公司资质信息列表
|
getAptList(){
|
this.loading = true
|
qryZBDAlterAptList(this.form).then(res=>{
|
this.loading = false
|
const { result, total } = res
|
this.aptitudeData = []
|
this.initialArr = []
|
result.records.forEach(val => {
|
const obj = {}
|
for (const key in val) {
|
obj[key] = val[key]
|
}
|
this.aptitudeData.push(obj)
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
this.total = result.total;
|
this.$emit('sendAptList',this.aptitudeData)
|
})
|
},
|
// 新增公司资质信息
|
addAptitude(){
|
for (let i = 0; i < this.aptitudeData.length; i++) {
|
if(this.aptitudeData[i].isEdit){
|
this.$message.warning('请先保存当前公司资质信息再新增')
|
return;
|
}
|
};
|
this.aptitudeData.unshift({
|
applyserialno:this.$store.state.product.applyInfo.serialNo,
|
customerid:this.$store.state.product.applyInfo.customerid,
|
aptname:'',
|
aptcertstartdate:'',
|
aptcertenddate:'',
|
aptcertorgname:'',
|
isEdit:true
|
})
|
},
|
// 修改
|
handleEdit(row){
|
this.$set(row,'isEdit',true)
|
this.$set(row, "isCancel", true);
|
},
|
// 保存
|
handleSave(row){
|
if(!row.aptname){
|
this.$message.warning('资质名称不能为空')
|
return;
|
}
|
if(!row.aptcertstartdate){
|
this.$message.warning('资质发证日期不能为空')
|
return;
|
}
|
if(!row.aptcertenddate){
|
this.$message.warning('资质到期日期不能为空')
|
return;
|
}
|
if(!row.aptcertorgname){
|
this.$message.warning('资质发证机构不能为空')
|
return;
|
}
|
row.objectno = this.$store.state.product.applyInfo.alterobjectno
|
saveZbdAlterAptInfoPre(row).then(async res=>{
|
if(res.code=='00'){
|
// 保存成功后重新查询列表
|
this.$message.success('保存成功')
|
this.$set(row,'isEdit',false)
|
this.getAptList()
|
}
|
})
|
},
|
// 取消
|
handleCancel(row,index){
|
const arr = []
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
for (const key in row) {
|
if(key != 'isEdit' && key != 'isCancel' && row[key] != this.initialArr[i][key]){
|
arr.push(key)
|
}
|
}
|
}
|
}
|
if(arr.length){
|
common.comfirm('提示','当前有数据未保存，是否放弃保存？',()=>{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
arr.forEach(val => {
|
for (const key in this.initialArr[index]) {
|
if (this.initialArr[index].hasOwnProperty(val)) {
|
this.aptitudeData[index][key] = this.initialArr[index][key]
|
}
|
}
|
});
|
})
|
}else{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
}
|
},
|
// 删除
|
handleDelete(row,index){
|
if(row.serialno){
|
common.comfirm('提示',`请确认是否删除公司资质名称: ${row.aptname}`,()=>{
|
delZBDAlterApt({serialno:row.serialno}).then(res=>{
|
if(res.code=='00'){
|
// 删除成功后重新查询列表
|
this.$message.success('删除成功')
|
this.getAptList()
|
}
|
})
|
})
|
}else{
|
this.aptitudeData.splice(index,1)
|
}
|
},
|
// 设置每页多少条
|
handleSizeChange(val) {
|
this.form.pageSize = val;
|
this.getAptList(this.form);
|
},
|
// 查询当前页
|
handleCurrentChange(val) {
|
this.form.currentPage = val;
|
this.getAptList(this.form);
|
},
|
}
|
}
|
</script>
|
<style lang="stylus">
|
.aptitude
|
width 100%
|
margin-bottom 24px
|
>.el-button
|
padding 9px 12px
|
.red-star
|
width 7px
|
display inline-block
|
vertical-align: middle;
|
color: #FF4300;
|
</style>
|
