2.申办业务时查看个人的报告信息（信息待定）
This commit is contained in:
aixianling
215
project/xiushan/components/personCreditReport.vue
Normal file
215
project/xiushan/components/personCreditReport.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<section class="personCreditReport">
|
||||
<el-link v-if="hasIdNumber" type="primary" @click.stop="handleShow">个人产权</el-link>
|
||||
<el-dialog :visible.sync="dialog" title="个人产权信息" width="1200px" customFooter>
|
||||
<div class="top">
|
||||
<div class="top-left">
|
||||
<el-image v-if="info.avatar"/>
|
||||
<div v-else v-html="txtLogo"/>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<div class="top-right__top">
|
||||
<h2 v-text="person.name"/>
|
||||
</div>
|
||||
<div class="top-right__bottom">
|
||||
<ai-wrapper
|
||||
label-width="130px">
|
||||
<ai-info-item label="手机号码：" :value="person.phone"/>
|
||||
<ai-info-item label="身份证号：" :value="person.idNumber"/>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tabs type="border-card" stretch>
|
||||
<el-tab-pane label="企业信息">
|
||||
<ai-table :dict="dict" :tableData="info.enterpriseList" :col-configs="colConfigs1"
|
||||
:isShowPagination="false" border tableSize="small"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="宅基地信息" lazy>
|
||||
<ai-table :dict="dict" :tableData="info.homesteadInfoList" :col-configs="colConfigs2"
|
||||
:isShowPagination="false" border tableSize="small"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="集体经济组织股权" lazy>
|
||||
<ai-table :dict="dict" :tableData="info.shareholderList" :col-configs="colConfigs3"
|
||||
:isShowPagination="false" border tableSize="small"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="土地流转经营" lazy>
|
||||
<ai-table :dict="dict" :tableData="info.landCirculateInfoList" :col-configs="colConfigs4"
|
||||
:isShowPagination="false" border tableSize="small"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<el-button @click.stop="dialog=false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "personCreditReport",
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
isFinanceUser() {
|
||||
return !!this.user.financeUser?.id
|
||||
},
|
||||
txtLogo() {
|
||||
return this.person.name?.substring(0, 1) || ""
|
||||
},
|
||||
hasIdNumber() {
|
||||
return !!this.person.idNumber
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
info: {},
|
||||
currIndex: 0,
|
||||
colConfigs1: [
|
||||
{prop: 'enterpriseName', label: '企业名称'},
|
||||
{prop: 'enterpriseType', label: '企业类型', dict: "enterpriseType", align: 'center'},
|
||||
{prop: 'areaName', label: '所属区域', align: 'center'},
|
||||
{prop: 'businessScope', label: '经营范围', align: 'center'},
|
||||
{prop: 'operationPeriod', label: '营业期限', align: 'center'},
|
||||
],
|
||||
colConfigs2: [
|
||||
{prop: 'usePerson', label: '使用人'},
|
||||
{prop: 'houseNumber', label: '家庭人口', align: 'center'},
|
||||
{prop: 'areaName', label: '所在地区', align: 'center'},
|
||||
{prop: 'landArea', label: '土地面积/㎡', align: 'center'},
|
||||
{prop: 'landOwnership', label: '土地所有权', align: 'center'},
|
||||
],
|
||||
colConfigs3: [
|
||||
{prop: 'organizationName', label: '集体经济组织名称'},
|
||||
{prop: 'areaName', align: 'center', label: '所在地区'},
|
||||
{prop: 'name', align: 'center', label: '持股人'},
|
||||
{prop: 'shareholdingNumber', align: 'center', label: '股权总数'},
|
||||
{prop: 'shareholdingAmount', align: 'center', label: '股金总额'}
|
||||
],
|
||||
colConfigs4: [
|
||||
{prop: 'landOutflowType', label: '土地流出方'},
|
||||
{prop: 'landArea', align: 'center', label: '土地面积/㎡'},
|
||||
{prop: 'landUndertakeType', align: 'center', label: '土地承接方'},
|
||||
{prop: 'circulateType', align: 'center', label: '流转形式'},
|
||||
{prop: 'startDate', align: 'center', label: '开始日期'},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load("enterpriseType")
|
||||
},
|
||||
methods: {
|
||||
getPCR() {
|
||||
let {idNumber, createUserId: id} = this.person
|
||||
return this.instance.post(`/appportaluser/queryPersonPropertyRight`, null, {
|
||||
params: {idNumber, id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
return this.info = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleShow() {
|
||||
this.getPCR().then(() => this.dialog = true)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
person: {required: true, default: () => ({})}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.personCreditReport {
|
||||
margin-left: 16px;
|
||||
|
||||
.table-item {
|
||||
h2 {
|
||||
margin-bottom: 16px;
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
padding: 34px 30px 16px;
|
||||
border: 1px solid #EEEEEE;
|
||||
border-radius: 4px;
|
||||
|
||||
.top-left {
|
||||
margin-right: 16px;
|
||||
padding: 12px 16px;
|
||||
background: #8CA3CD;
|
||||
color: #FFFFFF;
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
border-radius: 8px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
flex: 1;
|
||||
|
||||
.top-right__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h2 {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 97px;
|
||||
height: 32px;
|
||||
background: #E8F4FF;
|
||||
border: 1px solid #A3D3FF;
|
||||
border-radius: 3px;
|
||||
color: #1890FF;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-right__bottom {
|
||||
padding: 16px 10px 10px 0;
|
||||
background: #F6FBFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.el-tabs {
|
||||
.el-tabs__header {
|
||||
padding: unset;
|
||||
|
||||
.el-tabs__item {
|
||||
background: #f3f6f9;
|
||||
border-bottom-color: #ddd;
|
||||
margin-left: 0;
|
||||
|
||||
&.is-active {
|
||||
background: #fff;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user