This commit is contained in:
parent
38152047ce
commit
8815e3da99
|
@ -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,6 +95,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="person-side">
|
<div class="person-side">
|
||||||
|
<div v-if="rightList.value < 1">
|
||||||
<div class="my-label">
|
<div class="my-label">
|
||||||
<div class="my-label-title">养老金发放情况</div>
|
<div class="my-label-title">养老金发放情况</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -102,7 +104,7 @@
|
||||||
:data="data"
|
:data="data"
|
||||||
border
|
border
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
max-height="250"
|
max-height="500"
|
||||||
:header-cell-style="{
|
:header-cell-style="{
|
||||||
border: 'none',
|
border: 'none',
|
||||||
height: '60px',
|
height: '60px',
|
||||||
|
@ -117,24 +119,14 @@
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
|
<template v-for="item in dataMyTag.tableList">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="yljlx"
|
:width="item.width"
|
||||||
label="养老金类型"
|
:prop="item.name"
|
||||||
width="160"
|
:label="item.label"
|
||||||
align="center"
|
>
|
||||||
/>
|
</el-table-column>
|
||||||
<el-table-column
|
</template>
|
||||||
prop="yljffrq"
|
|
||||||
label="发放日期"
|
|
||||||
width="160"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
prop="yljffje"
|
|
||||||
label="发放金额(元)"
|
|
||||||
width="160"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
background
|
background
|
||||||
|
@ -147,10 +139,69 @@
|
||||||
@current-change="handlePaginationYL"
|
@current-change="handlePaginationYL"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-label">
|
|
||||||
<div class="my-label-title">医疗金发放情况</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="my-table">
|
<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-title">医疗金发放情况</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- <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 {
|
||||||
|
|
Loading…
Reference in New Issue