This commit is contained in:
duanxiaohai 2024-09-10 16:51:43 +08:00
parent 0d707c78cf
commit 1075bf7966
4 changed files with 656 additions and 19 deletions

View File

@ -0,0 +1,385 @@
<template>
<div class="dialogPage">
<el-dialog
v-model="dialogShow"
width="80vw"
:show-close="false"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
<el-icon size="26" color="#fff" @click="closeDialog">
<CircleCloseFilled />
</el-icon>
</div>
</template>
<div class="tabelPart">
<div class="bo">
<div class="title">
<div class="title_top">
<img
src="@/assets/images/table_l.png"
alt=""
style="margin-right: 10px"
/>
<div class="name">{{ title }}</div>
<img
src="@/assets/images/table_r.png"
alt=""
style="margin-left: 10px"
/>
</div>
<img
class="title_botton"
src="@/assets/images/table_c.png"
alt=""
/>
</div>
</div>
<div style="width: 100%; height: calc(100% - 110px)">
<div class="tabelHead">
<div><span>姓名</span>{{ data.character.xm }}</div>
<div><span>地址</span>{{ data.character.dz }}</div>
<div><span>年龄</span>{{ data.character.age }}</div>
<div><span>标签</span>{{ data.character.titleName }}</div>
<div class="status">
<span>状态</span><img :src="lampImages[data.character.zt]" />
</div>
</div>
<el-table
:data="data.tableData"
height="100%"
:key="tableKey"
:header-cell-style="{ background: '#008FCD' }"
@row-click="handleRowClick"
>
<template v-for="item in data.columns" :key="item.label">
<el-table-column
v-if="item.type === 'slot'"
:show-overflow-tooltip="true"
:label="item.label"
:property="item.property"
:width="item.width || ''"
:align="item.align || 'center'"
>
<template #default="scope">
<!-- 状态 -->
<div v-if="item.property == 'zt'">
<div v-for="index in 3" :key="index">
<img
style="width: 30px; height: 30px"
v-if="scope.row.zt == index"
:src="lampImages[index]"
alt="状态"
/>
</div>
</div>
<!-- <slot
:name="item.property"
:currentCol="item"
:currentData="scope.row"
></slot> -->
</template>
</el-table-column>
<el-table-column
v-else
:property="item.property"
:label="item.label"
:show-overflow-tooltip="true"
:width="item.width || ''"
:align="item.align || 'center'"
/>
</template>
</el-table>
</div>
<div class="pagePart">
<el-pagination
background
layout="prev, pager, next,total"
:page-size="pagination.pageSize"
:total="pagination.total"
prev-text="上一页"
next-text="下一页"
@current-change="handle"
v-model:current-page="pagination.currentPage"
/>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
nextTick,
} from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import lamp1 from "../../assets/sy-table/green.gif";
import lamp2 from "../../assets/sy-table/red.gif";
import lamp3 from "../../assets/sy-table/yellow.gif";
import lamp4 from "../../assets/sy-table/green1.gif";
import lamp5 from "../../assets/sy-table/red1.gif";
import lamp6 from "../../assets/sy-table/yellow1.gif";
import lamp7 from "../../assets/sy-table/lampGreen3.png";
import lamp8 from "../../assets/sy-table/lampRed3.png";
import lamp9 from "../../assets/sy-table/lampYellow3.png";
const router = useRouter();
const routers = useRoute();
const props = defineProps({
dialogShow: {
type: Boolean,
default: () => {
return false;
},
},
columns: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
title: {
type: String,
default: () => {
return "";
},
},
pagination: {
type: Object,
required: true,
},
character: {
type: Object,
required: true,
},
});
const emit = defineEmits(["close", "handle", "loadTables", "openMessage"]);
const handleRowClick = (row, column, event) => {
if (props.dj) {
console.log(row, props.dj, "rwxq");
// router.push({
// path: `/home/index/person`,
// query: { identNo: row.identNo, type: "detail" },
// });
// row
emit("openMessage", { identNo: row.identNo });
}
};
//
const dialogShow = ref();
const data = reactive({
title: "",
columns: [],
tableData: [],
character: [],
pagination: {},
});
// 使
const lampImages = {
1: lamp1,
2: lamp2,
3: lamp3,
4: lamp4,
5: lamp5,
6: lamp6,
7: lamp7,
8: lamp8,
9: lamp9,
};
const gridData = [];
//
const tableKey = ref(Math.random());
//
watch(
() => props.dialogShow,
(newVal, oldVal) => {
dialogShow.value = newVal;
// data.tableData = props.tableData;
data.columns = props.columns;
}
);
watch(
() => props.tableData,
(newVal, oldVal) => {
data.tableData = props.tableData;
console.log("状态1", data);
tableKey.value = Math.random();
}
);
watch(
() => props.character,
(newVal, oldVal) => {
data.character = props.character;
}
);
// 使
onMounted(() => {
dialogShow.value = props.dialogShow;
data.columns = props.columns;
data.title = props.title;
data.tableData = props.tableData;
console.log("状态", data);
const paginationTotal = document.querySelector(".el-pagination__total");
// paginationTotal.innerText = ` ${props.pagination.total} `;
});
const closeDialog = () => {
dialogShow.value = false;
emit("close");
};
//
const handle = (current) => {
emit("handle", current);
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--el-dialog-width: 76% !important;
}
.my-header {
display: flex;
flex-direction: row-reverse;
}
.tabelPart {
padding: 16px;
background: linear-gradient(
270deg,
rgba(0, 77, 131, 0.69) 0%,
rgba(0, 51, 83, 0.77) 50%,
rgba(0, 77, 131, 0.74) 100%
),
radial-gradient(
66% 40% at 50% 0%,
rgba(1, 150, 243, 0.55) 0%,
rgba(0, 116, 255, 0) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
border: 2px solid;
border-image: linear-gradient(
180deg,
rgba(21, 150, 255, 1),
rgba(0, 157, 227, 0)
)
2 2;
.tabelHead {
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 36px;
height: 36px;
}
// &div:nth-last-child(1){
// display: flex;
// align-items: center;
// }
.status {
display: flex;
align-items: center;
}
}
:deep(.el-table) {
--el-table-bg-color: none;
--el-table-tr-bg-color: none;
--el-table-header-bg-color: none;
background: none;
border: none;
--el-table-text-color: #fff;
--el-table-header-text-color: #fff;
}
// :deep(.el-table th) {
// text-align: center;
// }
}
.pagePart {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
:deep(.el-pagination) {
--el-pagination-button-disabled-bg-color: none;
--el-pagination-bg-color: none;
--el-pagination-button-bg-color: none;
--el-pagination-button-color: #fff;
color: #fff;
}
:deep(.el-pagination button:disabled) {
background-color: rgba(0, 116, 255, 0) !important;
}
:deep(.el-pagination > .is-last) {
color: #ffffff;
}
}
.bo {
width: 100%;
display: flex;
}
.title {
margin: 10px auto;
display: flex;
flex-direction: column;
&_top {
display: flex;
align-items: end;
justify-content: center;
img {
height: 33px;
width: 33px;
}
.name {
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 600;
font-size: 33px;
color: #ffffff;
line-height: 38px;
text-align: center;
font-style: normal;
letter-spacing: 2px;
background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
}
&_botton {
margin-top: 5px;
height: 19px;
}
}
</style>

View File

@ -771,10 +771,12 @@ const columnsList = reactive({
{ {
label: "走访人", label: "走访人",
property: "name", property: "name",
width: 90,
}, },
{ {
label: "来访者", label: "来访者",
property: "visitor", property: "visitor",
width: 90,
}, },
{ {
label: "来访日期", label: "来访日期",

View File

@ -48,7 +48,7 @@
</el-table> </el-table>
<el-pagination <el-pagination
background background
layout="prev, pager, next" layout="prev, pager, next, total"
:page-size="pagination.pageSize" :page-size="pagination.pageSize"
:total="pagination.total" :total="pagination.total"
prev-text="上一页" prev-text="上一页"
@ -95,7 +95,7 @@
</el-table> </el-table>
<el-pagination <el-pagination
background background
layout="prev, pager, next" layout="prev, pager, next, total"
:page-size="pagination1.pageSize" :page-size="pagination1.pageSize"
:total="pagination1.total" :total="pagination1.total"
prev-text="上一页" prev-text="上一页"
@ -201,8 +201,8 @@
class="table_border" class="table_border"
:row-style="rowState" :row-style="rowState"
:header-cell-style="tableHeaderColor" :header-cell-style="tableHeaderColor"
@row-click="handleRowClick"
> >
<!-- @row-click="handleRowClick" -->
<template v-for="item in data.column_2"> <template v-for="item in data.column_2">
<el-table-column <el-table-column
v-if="item.type == 'slot'" v-if="item.type == 'slot'"
@ -212,6 +212,17 @@
:align="item.align || 'left'" :align="item.align || 'left'"
> >
<template #default="scope"> <template #default="scope">
<!-- 姓名 -->
<div v-if="item.property == 'xm'">
<div @click="handleRowClick(scope.row)">
{{ scope.row.xm }}
</div>
</div>
<div v-if="item.property == 'fullName'">
<div @click="handleRowClick(scope.row)">
{{ scope.row.fullName }}
</div>
</div>
<!-- 状态 --> <!-- 状态 -->
<div v-if="item.property == 'zt'"> <div v-if="item.property == 'zt'">
<div v-for="index in 3" :key="index"> <div v-for="index in 3" :key="index">
@ -219,6 +230,7 @@
style="width: 30px; height: 30px" style="width: 30px; height: 30px"
v-if="scope.row.zt == index" v-if="scope.row.zt == index"
:src="lampImages[index]" :src="lampImages[index]"
@click="statusDetails(scope.row)"
/> />
</div> </div>
</div> </div>
@ -239,7 +251,7 @@
</el-table> </el-table>
<el-pagination <el-pagination
background background
layout="prev, pager, next" layout="prev, pager, next, total"
:page-size="pagination2.pageSize" :page-size="pagination2.pageSize"
:total="pagination2.total" :total="pagination2.total"
prev-text="上一页" prev-text="上一页"
@ -249,6 +261,18 @@
/> />
</div> </div>
</div> </div>
<DialogLamp
:dialogShow="dialogShow"
:title="tableType.title"
:tableData="tableType.data"
:columns="tableType.columns"
:character="tableType.character"
:pagination="pagination3"
@close="closeJj"
@handle="handlePagination"
>
</DialogLamp>
</div> </div>
</template> </template>
@ -258,6 +282,8 @@ import http from "@/utils/request.js";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import tools from "@/utils/tools"; import tools from "@/utils/tools";
import DialogLamp from "./dialog/dialogRW.vue";
import lamp1 from "../assets/sy-table/green.gif"; import lamp1 from "../assets/sy-table/green.gif";
import lamp2 from "../assets/sy-table/red.gif"; import lamp2 from "../assets/sy-table/red.gif";
import lamp3 from "../assets/sy-table/yellow.gif"; import lamp3 from "../assets/sy-table/yellow.gif";
@ -337,6 +363,7 @@ const formData = reactive({
label: "姓名", label: "姓名",
property: "fullName", property: "fullName",
width: "90", width: "90",
type: "slot",
}, },
{ {
label: "状态", label: "状态",
@ -359,6 +386,20 @@ const formData = reactive({
property: "PopulationLabel", property: "PopulationLabel",
}, },
], ],
column_3: [
{
label: "服务内容",
property: "fwnr",
align: "left",
},
{
label: "结果",
property: "zt",
width: "200",
align: "center",
type: "slot",
},
],
tableData: [ tableData: [
{ {
SerialNumber: "01", SerialNumber: "01",
@ -608,11 +649,12 @@ const formData = reactive({
resultsList: [], resultsList: [],
tableData2: [ tableData2: [
{ {
fullName: "吴*琴", fullName: "伍*凤",
zt: 1, zt: 1,
address: "龙游户籍的公民...", address: "衢州市龙游县模******居民委员会",
age: "57", age: "46",
PopulationLabel: "自主申报", PopulationLabel: "收入型低保",
sfzhm: "281889",
}, },
{ {
fullName: "吴*琴", fullName: "吴*琴",
@ -691,9 +733,28 @@ const formData = reactive({
age: "57", age: "57",
PopulationLabel: "自主申报", PopulationLabel: "自主申报",
}, },
],
tableData3: [
{
fwnr: "经济困难老年人发放养老护理补贴每月125元同时很据能力评估等级发放养老服务补贴重度失能每人每月500元、中度失能每人每月250元、轻度失能每人每月125元。",
zt: 1,
identNo: "309601",
},
{
fwnr: "80周岁至89周岁的老年人每人每月享受60元高龄老人生活津贴90周岁含)至98司岁的老年人每人每明享受160元高龄老人生活连贴99同岁及以上的老年人每人每月享安1000元长寿保健补助金。",
zt: 2,
identNo: "309601",
},
{
fwnr: "80周岁以上老年人每年80周岁以下老年人每两年可申请免费评估一次。",
zt: 3,
identNo: "309601",
},
{
fwnr: "病儿童经济困难老年人发放养老护理补贴每月125元同时很据能力评估等级发放养老服务补贴重度失能每人每月500元、中度失能每人每月250元、轻度失能每人每月125元。171.4元/月",
zt: 1,
identNo: "309601",
},
], ],
}, },
hjlnrTableData: { hjlnrTableData: {
@ -751,6 +812,7 @@ const formData = reactive({
label: "姓名", label: "姓名",
property: "xm", property: "xm",
width: "90", width: "90",
type: "slot",
}, },
{ {
label: "状态", label: "状态",
@ -774,6 +836,20 @@ const formData = reactive({
type: "slot", type: "slot",
}, },
], ],
column_3: [
{
label: "服务内容",
property: "fwnr",
align: "left",
},
{
label: "结果",
property: "zt",
width: "200",
align: "center",
type: "slot",
},
],
tableData: [ tableData: [
{ {
SerialNumber: "01", SerialNumber: "01",
@ -924,6 +1000,7 @@ const formData = reactive({
tableData2: [ tableData2: [
{ {
xm: "杨*根", xm: "杨*根",
identNo: "309601",
zt: 1, zt: 1,
dz: "浙江省龙游县龙*****号", dz: "浙江省龙游县龙*****号",
age: "87", age: "87",
@ -1251,6 +1328,23 @@ const formData = reactive({
bzlx: "1", bzlx: "1",
}, },
], ],
tableData3: [
{
fwnr: "经济困难老年人发放养老护理补贴每月125",
zt: 1,
identNo: "309601",
},
{
fwnr: "经济困难老年人发放养老护理补贴每月125",
zt: 2,
identNo: "309601",
},
{
fwnr: "经济困难老年人发放养老护理补贴每月125",
zt: 3,
identNo: "309601",
},
],
}, },
lmbhzTableData: { lmbhzTableData: {
url: "", url: "",
@ -1312,6 +1406,7 @@ const formData = reactive({
label: "姓名", label: "姓名",
property: "xm", property: "xm",
width: "90", width: "90",
type: "slot",
}, },
{ {
label: "状态", label: "状态",
@ -2034,6 +2129,12 @@ const pagination2 = reactive({
pageSize: 20, pageSize: 20,
currentPage: 1, currentPage: 1,
}); });
const pagination3 = reactive({
url: "",
total: 10,
pageSize: 20,
currentPage: 1,
});
// //
const handlePagination = (current) => { const handlePagination = (current) => {
// console.log(current,"page1"); // console.log(current,"page1");
@ -2155,7 +2256,7 @@ const selectedLamp1 = reactive({
yellow: false, yellow: false,
}); });
const lampScreen = (val, val2) => { const lampScreen = (val, val2) => {
console.log(222, val2); // console.log(222, val2);
if (selectedLamp.value === val) { if (selectedLamp.value === val) {
return; return;
} }
@ -2163,7 +2264,7 @@ const lampScreen = (val, val2) => {
const filteredData = val2.filter((element) => element.zt === val); const filteredData = val2.filter((element) => element.zt === val);
data.tableData2 = filteredData; data.tableData2 = filteredData;
pagination2.total = data.tableData2.length;
selectedLamp1.green = !val2.some((element) => element.zt === 1); selectedLamp1.green = !val2.some((element) => element.zt === 1);
selectedLamp1.red = !val2.some((element) => element.zt === 2); selectedLamp1.red = !val2.some((element) => element.zt === 2);
selectedLamp1.yellow = !val2.some((element) => element.zt === 3); selectedLamp1.yellow = !val2.some((element) => element.zt === 3);
@ -2184,7 +2285,152 @@ const lampScreen = (val, val2) => {
// ); // );
console.log(111, data.tableData2, selectedLamp1, val); console.log(111, data.tableData2, selectedLamp1, val);
}; };
//----------------
const dialogShow = ref(false);
const tableType = reactive({
url: "",
title: "",
data: [],
columns: [],
character: [],
});
//column
const columns = reactive({
聚集数据: {
column: [
{
label: "姓名",
property: "xm",
},
{
label: "出生日期",
property: "birth",
},
{
label: "性别",
property: "sex",
},
{
label: "迁出地址",
property: "ydz",
},
{
label: "地址",
property: "xdz",
},
],
},
培训: {
column: [
{
label: "姓名",
property: "xm",
},
{
label: "培训机构名称",
property: "pxjgmc",
},
{
label: "培训项目",
property: "pxxm",
},
],
},
});
const statusDetails = (val) => {
tableType.title = `服务详情`;
console.log(111, val);
switch (data.name) {
case "最低生活保障":
data.identNo = val.sfzhm;
if (data.identNo == null) {
ElMessage.warning({
message: `${val.fullName}无id!`,
offset: 100, //
});
} else {
tableType.columns = formData.dbTableData.column_3;
tableType.data = formData.dbTableData.tableData3;
pagination3.total = formData.dbTableData.tableData3.length;
tableType.character = {
...val,
xm: val.fullName,
dz: val.address,
titleName: formData.name,
};
dialogShow.value = true;
}
break;
case "老年人福利补贴":
data.identNo = val.identNo;
if (data.identNo == null) {
ElMessage.warning({
message: `${val.xm}无id!`,
offset: 100, //
});
} else {
tableType.columns = formData.hjlnrTableData.column_3;
tableType.data = formData.hjlnrTableData.tableData3;
pagination3.total = formData.hjlnrTableData.tableData3.length;
tableType.character = {
...val,
titleName: formData.name,
};
dialogShow.value = true;
}
break;
case "慢性病患者健康管理":
data.identNo = val.identNo;
if (data.identNo == null) {
ElMessage.warning({
message: `${val.xm}无id!`,
offset: 100, //
});
} else {
tableType.columns = formData.hjlnrTableData.column_3;
tableType.data = formData.hjlnrTableData.tableData3;
pagination3.total = formData.hjlnrTableData.tableData3.length;
dialogShow.value = true;
}
break;
case "义务教育学生生活补助":
data.identNo = val.identNo;
if (data.identNo !== null) {
tableType.columns = formData.hjlnrTableData.column_3;
tableType.data = formData.hjlnrTableData.tableData3;
pagination3.total = formData.hjlnrTableData.tableData3.length;
dialogShow.value = true;
} else {
ElMessage.warning({
message: `${val.xm}无id!`,
offset: 100, //
});
}
break;
case "义务教育学生营养改善计划":
data.identNo = val.identNo;
if (data.identNo !== null) {
tableType.columns = formData.hjlnrTableData.column_3;
tableType.data = formData.hjlnrTableData.tableData3;
pagination3.total = formData.hjlnrTableData.tableData3.length;
dialogShow.value = true;
} else {
ElMessage.warning({
message: `${val.xm}无id!`,
offset: 100, //
});
}
break;
default:
break;
}
};
const closeJj = () => {
dialogShow.value = false;
tableType.data = [];
pagination3.currentPage = 1;
};
const getTable = (pagination) => { const getTable = (pagination) => {
http http
.get( .get(
@ -2235,7 +2481,7 @@ const getServiceList = async (pagination, sfxs) => {
}); });
}; };
const handleRowClick = (row, column, event) => { const handleRowClick = (row) => {
// row // row
console.log(row); console.log(row);
switch (data.name) { switch (data.name) {
@ -2320,10 +2566,10 @@ const updateFormDataAndTable = (formDataName, tableData) => {
data.column_2 = tableData.column_2; data.column_2 = tableData.column_2;
data.tableData = tableData.resultsList; data.tableData = tableData.resultsList;
data.tableData1 = tableData.tableData; data.tableData1 = tableData.tableData;
data.tableData2 = tableData.tableData2; data.tableData2 = tableData.tableData2; //
data.tableData3 = tableData.tableData2; data.tableData3 = tableData.tableData2; //
pagination1.total = tableData.tableData.length; pagination1.total = tableData.tableData.length;
console.log(6666, data.tableData2); // console.log(6666, data.tableData2);
lampScreen(1, data.tableData3); lampScreen(1, data.tableData3);
handleCurrentChange(1); handleCurrentChange(1);
@ -2894,6 +3140,10 @@ onMounted(() => {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
//
:deep(.el-pagination > .is-last) {
color: #fff !important ;
}
:deep(.el-pagination.is-background .el-pager li) { :deep(.el-pagination.is-background .el-pager li) {
color: #fff; color: #fff;
background: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.14);

View File

@ -15,8 +15,8 @@ export default defineConfig({
// 第一个代理 // 第一个代理
"/api": { "/api": {
// 匹配到啥来进行方向代理 // 匹配到啥来进行方向代理
// target: "http://10.0.0.65:8095/", //刘进 target: "http://10.0.0.65:8095/", //刘进
target: "http://220.191.238.50:996/", //线上 // target: "http://220.191.238.50:996/", //线上
changeOrigin: true, //是否支持跨域 changeOrigin: true, //是否支持跨域
//rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空,这个 //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空,这个
}, },