xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-08-09 11:00:32 +08:00
parent 38152047ce
commit 8815e3da99
1 changed files with 210 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

284
src/view/person/index.vue
View File

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