This commit is contained in:
duanxiaohai
parent
38152047ce
commit
8815e3da99
|
|
@ -77,16 +77,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="person-main">
|
||||
<div class="main-tag-item" @click="onClickTag2('出生')">出生</div>
|
||||
<div class="main-tag-item" @click="onClickTag2('学习')">学习</div>
|
||||
<div class="main-tag-item" @click="onClickTag2('工作')">工作</div>
|
||||
<div class="main-tag-item" @click="onClickTag2('婚育')">婚育</div>
|
||||
<div class="main-tag-item" @click="onClickTag2('置业')">置业</div>
|
||||
<div class="main-tag-item" @click="onClickTag2('退休养老')">
|
||||
退休<br />养老
|
||||
<div
|
||||
v-for="(item, index) in dataMyTag.myTag1"
|
||||
class="main-tag-item"
|
||||
:class="
|
||||
item.name == dataMyTag.myTagshow ? 'main-tag-item_active' : ''
|
||||
"
|
||||
@click="onClickTag2(item, index)"
|
||||
>
|
||||
<span v-if="item.name == '退休养老'"> 退休<br />养老</span>
|
||||
<span v-else>{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="main-tag-item" @click="onClickTag2('身后事')">身后事</div>
|
||||
<div class="main-tag-item" @click="onClickTag2('综合')">综合</div>
|
||||
<div class="person-main-person"></div>
|
||||
<div class="back" @click="back()">
|
||||
<img src="@/assets/person/back.png" alt="" />
|
||||
|
|
@ -94,63 +95,113 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="person-side">
|
||||
<div class="my-label">
|
||||
<div class="my-label-title">养老金发放情况</div>
|
||||
<div v-if="rightList.value < 1">
|
||||
<div class="my-label">
|
||||
<div class="my-label-title">养老金发放情况</div>
|
||||
</div>
|
||||
<div class="my-table">
|
||||
<el-table
|
||||
:data="data"
|
||||
border
|
||||
style="width: 100%"
|
||||
max-height="500"
|
||||
:header-cell-style="{
|
||||
border: 'none',
|
||||
height: '60px',
|
||||
fontSize: '18px',
|
||||
color: '#fff',
|
||||
}"
|
||||
:row-style="{
|
||||
letterSpacing: '1px',
|
||||
fontSize: '16px',
|
||||
height: '50px',
|
||||
backgroundColor: 'rgba(31, 63, 113, 1)',
|
||||
color: '#fff',
|
||||
}"
|
||||
>
|
||||
<template v-for="item in dataMyTag.tableList">
|
||||
<el-table-column
|
||||
:width="item.width"
|
||||
:prop="item.name"
|
||||
:label="item.label"
|
||||
>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
v-model:current-page="pagination.currentPage"
|
||||
@current-change="handlePaginationYL"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-table">
|
||||
<el-table
|
||||
:data="data"
|
||||
border
|
||||
style="width: 100%"
|
||||
max-height="250"
|
||||
:header-cell-style="{
|
||||
border: 'none',
|
||||
height: '60px',
|
||||
fontSize: '18px',
|
||||
color: '#fff',
|
||||
}"
|
||||
:row-style="{
|
||||
letterSpacing: '1px',
|
||||
fontSize: '16px',
|
||||
height: '50px',
|
||||
backgroundColor: 'rgba(31, 63, 113, 1)',
|
||||
color: '#fff',
|
||||
}"
|
||||
>
|
||||
<el-table-column
|
||||
prop="yljlx"
|
||||
label="养老金类型"
|
||||
width="160"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="yljffrq"
|
||||
label="发放日期"
|
||||
width="160"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="yljffje"
|
||||
label="发放金额(元）"
|
||||
width="160"
|
||||
align="center"
|
||||
/>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
v-model:current-page="pagination.currentPage"
|
||||
@current-change="handlePaginationYL"
|
||||
/>
|
||||
<div v-else>
|
||||
<div class="my-label">
|
||||
<div class="my-label-title">基本信息</div>
|
||||
</div>
|
||||
<div class="my-info">
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">姓  名</div>
|
||||
<div class="my-info-content">
|
||||
<p>{{ baseInfo.nm || baseInfo.xm }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">证件类型</div>
|
||||
<div class="my-info-content">
|
||||
<p>{{ baseInfo.zjlx || "身份证" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">证件号码</div>
|
||||
<div class="my-info-content">
|
||||
<p>******************</p>
|
||||
<!-- <p>{{ baseInfo.identNo }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">政治面貌</div>
|
||||
<div class="my-info-content">
|
||||
<p>{{ baseInfo.zzmm || "" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">居住状态</div>
|
||||
<div class="my-info-content">
|
||||
<p v-if="baseInfo.jzzt == 1">居住</p>
|
||||
<p v-else-if="baseInfo.jzzt == 0">未居住</p>
|
||||
<p v-else></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">民  族</div>
|
||||
<div class="my-info-content">
|
||||
<p>{{ baseInfo.ethnic }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">性  别</div>
|
||||
<div class="my-info-content">
|
||||
<p>{{ baseInfo.gender }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-info-item">
|
||||
<div class="my-info-label">户口登记地</div>
|
||||
<div class="my-info-content">
|
||||
<p>{{ baseInfo.domicAddr || baseInfo.dz }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-label">
|
||||
<!-- <div class="my-label">
|
||||
<div class="my-label-title">医疗金发放情况</div>
|
||||
</div>
|
||||
<div class="my-table">
|
||||
</div> -->
|
||||
<!-- <div class="my-table">
|
||||
<el-table
|
||||
:data="data1"
|
||||
border
|
||||
|
|
@ -205,7 +256,7 @@
|
|||
v-model:current-page="pagination1.currentPage"
|
||||
@current-change="handlePaginationYLJ"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
|
|
@ -318,6 +369,52 @@ const dataMyTag = reactive({
|
|||
show: 0,
|
||||
},
|
||||
],
|
||||
myTag1: [
|
||||
{
|
||||
name: "出生",
|
||||
},
|
||||
{
|
||||
name: "学习",
|
||||
},
|
||||
{
|
||||
name: "工作",
|
||||
},
|
||||
{
|
||||
name: "婚育",
|
||||
},
|
||||
{
|
||||
name: "置业",
|
||||
},
|
||||
{
|
||||
name: "退休养老",
|
||||
},
|
||||
{
|
||||
name: "身后事",
|
||||
},
|
||||
{
|
||||
name: "综合",
|
||||
},
|
||||
],
|
||||
myTagshow: "出生",
|
||||
/**
|
||||
* @type {Array}
|
||||
* @description 表格配置
|
||||
*/
|
||||
tableList: [
|
||||
{
|
||||
name: "yljlx",
|
||||
label: "养老金类型",
|
||||
width: "160",
|
||||
},
|
||||
{
|
||||
name: "yljffrq",
|
||||
label: "发放日期",
|
||||
},
|
||||
{
|
||||
name: "yljffje",
|
||||
label: "发放金额(元）",
|
||||
},
|
||||
],
|
||||
});
|
||||
//存放养老金数据
|
||||
const data = ref([
|
||||
|
|
@ -342,6 +439,7 @@ const data = ref([
|
|||
sum: "1000",
|
||||
},
|
||||
]);
|
||||
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
|
|
@ -548,6 +646,27 @@ const columnsList = reactive({
|
|||
},
|
||||
],
|
||||
},
|
||||
综合: {
|
||||
url: "/api/ggfwyth/ysyzt/getRyzhxx",
|
||||
column: [
|
||||
// {
|
||||
// label: "身份证号码",
|
||||
// property: "identNo",
|
||||
// },
|
||||
{
|
||||
label: "医疗保险类型",
|
||||
property: "ylbxlx",
|
||||
},
|
||||
{
|
||||
label: "发放日期",
|
||||
property: "jfrq",
|
||||
},
|
||||
{
|
||||
label: "缴费金额",
|
||||
property: "jfje",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
//特殊标签弹框
|
||||
const onClickTag = (item) => {
|
||||
|
|
@ -556,10 +675,11 @@ const onClickTag = (item) => {
|
|||
dialogShow.value = true;
|
||||
};
|
||||
//圆球弹框
|
||||
const onClickTag2 = (name) => {
|
||||
tableType.title = name;
|
||||
tableType.url = columnsList[name].url;
|
||||
tableType.columns = columnsList[name].column;
|
||||
const onClickTag2 = (val, index) => {
|
||||
dataMyTag.myTagshow = val.name;
|
||||
tableType.title = val.name;
|
||||
tableType.url = columnsList[val.name].url;
|
||||
tableType.columns = columnsList[val.name].column;
|
||||
getTable(tableType.url);
|
||||
dialogShow.value = true;
|
||||
};
|
||||
|
|
@ -569,6 +689,10 @@ const paginationDialog = reactive({
|
|||
total: 50,
|
||||
showTotal: 0,
|
||||
});
|
||||
//判断右侧显示的为表格还是列表，0为列表，1为表格
|
||||
const rightType = ref(0);
|
||||
//存放右侧单条数据
|
||||
const rightList = ref([]);
|
||||
//获取表格数据
|
||||
const getTable = (url) => {
|
||||
http
|
||||
|
|
@ -580,6 +704,17 @@ const getTable = (url) => {
|
|||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
tableType.data = res.data;
|
||||
if (tableType.data?.length > 1) {
|
||||
rightType.value = 1;
|
||||
} else {
|
||||
if (tableType.data == null) {
|
||||
rightList.value = [];
|
||||
} else {
|
||||
rightList.value = tableType.data[0];
|
||||
}
|
||||
rightType.value = 0;
|
||||
}
|
||||
console.log(rightType.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -810,16 +945,17 @@ onMounted(() => {
|
|||
right: 110px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: url("../../assets/person/tag-active.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #00fffc;
|
||||
}
|
||||
// &:hover {
|
||||
// background: url("../../assets/person/tag-active.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// color: #00fffc;
|
||||
// }
|
||||
}
|
||||
|
||||
.main-tag-item_active {
|
||||
background: url("../../assets/person/tag-active.png") no-repeat;
|
||||
background-size: cover;
|
||||
background-size: 100% 100%;
|
||||
color: #00fffc;
|
||||
}
|
||||
|
||||
.person-main-person {
|
||||
|
|
|
|||
Loading…
Reference in New Issue