<template>
|
<div class="warrant">
|
<p>
|
<span></span>
|
权证信息
|
</p>
|
<el-button type="primary" icon="el-icon-circle-plus-outline" v-if="writeAble" @click="addwarrant" size="medium">新增权证</el-button>
|
<el-table stripe highlight-current-row :data="warrantData" style="margin-top:30px" :header-cell-style="{background:'#f5f5f5',color:'#222222'}">
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span>权利凭证号</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.propertycertid}}</span>
|
<el-input style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.propertycertid" placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span>权证类型</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.propertycerttypeDesc}}</span>
|
<el-select style="padding-left:15px;display:block;" v-model="row.propertycerttype" filterable placeholder="请选择" size="small" v-show="row.isEdit">
|
<el-option
|
v-for="item in propertycerttype"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span>权证发证日期</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.outtodate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.outtodate"
|
type="date"
|
v-show="row.isEdit"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span>权证到期日期</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.expiredate}}</span>
|
<div style="padding-left:15px">
|
<el-date-picker
|
v-model="row.expiredate"
|
type="date"
|
v-show="row.isEdit"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
size="small"
|
placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span>权证发证机关名称</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.outtoorgname}}</span>
|
<el-input style="padding-left:15px" size="small" v-show="row.isEdit" v-model="row.outtoorgname" placeholder="请输入"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="110" v-if="writeAble" 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>
|
</div>
|
</template>
|
<script>
|
import {
|
getDictionaryList,
|
qryHousePropertyCertList,
|
saveHousePropertyCert,
|
delHousePropertyCert
|
} from '@api/product'
|
import common from '@/utils/common'
|
export default {
|
props: ['propertyData','index','writeAble'],
|
data () {
|
return {
|
propertycerttype:[],
|
warrantData:[],
|
initialArr:[],
|
}
|
},
|
computed: {
|
|
},
|
async created () {
|
if(this.propertyData.serialno){
|
this.getHousePropertyCertList()
|
}
|
// 获取权证类型
|
this.propertycerttype = await this.qryDictionaryList('propertycerttype')
|
},
|
methods: {
|
// 查询权证信息
|
getHousePropertyCertList(){
|
qryHousePropertyCertList({
|
relativeserialno:this.propertyData.serialno
|
}).then(res=>{
|
this.warrantData = []
|
this.initialArr = []
|
res.result.forEach(val => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key];
|
}
|
this.warrantData.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
this.propertyData.index = this.index
|
this.propertyData.propertyCertList = this.warrantData
|
this.$emit('sendPropertyForm',this.propertyData)
|
})
|
},
|
// 新增权证
|
addwarrant(){
|
for (let i = 0; i < this.warrantData.length; i++) {
|
if(this.warrantData[i].isEdit){
|
this.$message.warning('请先保存当前权证信息再新增')
|
return;
|
}
|
};
|
this.warrantData.unshift({
|
expiredate:'',
|
outtodate:'',
|
outtoorgname:'',
|
propertycertid:'',
|
propertycerttype:'',
|
isEdit:true
|
})
|
},
|
// 修改
|
handleEdit(row){
|
for (let i = 0; i < this.warrantData.length; i++) {
|
if(this.warrantData.length>1&&this.warrantData[i].isEdit){
|
this.$message.warning('请先保存当前权证信息')
|
return;
|
}
|
};
|
this.$set(row,'isEdit',true)
|
this.$set(row, "isCancel", true);
|
},
|
// 保存
|
async handleSave(row,index){
|
if(!row.propertycertid){
|
this.$message.warning('权利凭证号不能为空')
|
return;
|
}
|
if(!row.propertycerttype){
|
this.$message.warning('权证类型不能为空')
|
return;
|
}
|
if(!row.outtodate){
|
this.$message.warning('权证发证日期不能为空')
|
return;
|
}
|
if(!row.expiredate){
|
this.$message.warning('权证到期日期不能为空')
|
return;
|
}
|
if(!row.outtoorgname){
|
this.$message.warning('权证发证机关名称不能为空')
|
return;
|
}
|
if(this.propertyData.serialno){
|
row.relativeserialno=this.propertyData.serialno
|
// 同步返回保存是否成功
|
const res = await this.save(row)
|
if(res.code=='00'){
|
this.getHousePropertyCertList()
|
}else{
|
return
|
}
|
}else{
|
this.$set(row,'isEdit',false)
|
this.propertyData.index = this.index
|
this.propertyData.propertyCertList = this.warrantData
|
this.$emit('sendPropertyForm',this.propertyData)
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
return;
|
}
|
}
|
this.initialArr.push(Object.assign({}, row));
|
}
|
},
|
// 取消
|
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.warrantData[index][key] = this.initialArr[index][key]
|
}
|
}
|
});
|
})
|
}else{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
}
|
},
|
// 删除
|
handleDelete(row,index){
|
for (let i = 0; i < this.warrantData.length; i++) {
|
if(this.warrantData.length==1&&!this.warrantData[i].isEdit){
|
this.$message.warning('至少保留一个权证信息')
|
return;
|
}
|
};
|
if(!row.isEdit){
|
common.comfirm('提示',`请确认是否需要权证：${scope.row.propertyowner}?`,async ()=>{
|
if(row.serialno){
|
const res = await this.del(row.serialno)
|
if(res.code != '00')return;
|
}
|
this.$message.success('删除成功')
|
this.getHousePropertyCertList()
|
})
|
}else{
|
this.getHousePropertyCertList()
|
}
|
},
|
// 删除接口
|
del(serialno){
|
return new Promise(resolve=>{
|
delHousePropertyCert({serialNo:serialno}).then(res=>{
|
resolve(res)
|
})
|
})
|
},
|
// 保存接口
|
save(row){
|
return new Promise(resolve=>{
|
saveHousePropertyCert(row).then(res=>{
|
resolve(res)
|
})
|
})
|
},
|
qryDictionaryList(code) {
|
return new Promise(resolve => {
|
getDictionaryList({
|
codeNo: code
|
}).then(res => {
|
resolve(res.result);
|
});
|
});
|
},
|
}
|
}
|
</script>
|
<style lang="stylus">
|
.warrant
|
margin-top 20px
|
.red-star
|
width 7px
|
display inline-block
|
vertical-align: middle;
|
color: #FF4300;
|
>.el-button
|
padding 9px 12px
|
p
|
height: 20px
|
color: #222222
|
font-weight:500
|
font-size:14px
|
position: relative
|
padding-left: 10px;
|
margin-bottom: 30px
|
span
|
width: 2px
|
height: 14px
|
background-color: #0081F0
|
position: absolute
|
left: 0
|
top: 50%
|
transform: translateY(-50%)
|
</style>
|
