This commit is contained in:
duanxiaohai 2024-10-14 09:56:15 +08:00
commit b6657cbe1a
1 changed files with 140 additions and 4 deletions

View File

@ -1,5 +1,43 @@
<template> <template>
<div> <div class="tablebody">
<div class="tableheader">
<div
class="tableheader_title"
:class="chooseTitle == item.id ? 'active' : ''"
v-for="item in titleList"
:key="item.id"
@click="chooseTitle = item.id"
>
{{ item.title }}
<div class="line" v-if="chooseTitle == item.id"></div>
</div>
</div>
<div class="select" v-if="chooseTitle != '1'">
<div class="select_item">
<el-input
v-model="search.name"
style="width: 100%"
placeholder="姓名查询"
clearable
class="input-with-select"
>
<template #append>
<el-button :icon="Search" @click="searchT('name')" />
</template>
</el-input>
</div>
<div class="select_item">
<el-date-picker
style="width: 100%"
v-model="search.date"
type="date"
placeholder="选择时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
@change="searchT('date')"
/>
</div>
</div>
<el-table <el-table
:data="data.tableData" :data="data.tableData"
stripe stripe
@ -20,8 +58,29 @@
import { onMounted, ref, reactive } from "vue"; import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import { Search } from "@element-plus/icons-vue";
const router = useRouter(); const router = useRouter();
const routers = useRoute(); const routers = useRoute();
const chooseTitle = ref(1);
const search = reactive({
name: "",
date: "",
});
const titleList = reactive([
{
title: "服务项目(未完成)",
id: 1,
},
{
title: "在册低保人员",
id: 2,
},
{
title: "退出低保人员",
id: 3,
},
]);
const data = reactive({ const data = reactive({
xh: "", xh: "",
bm: "", bm: "",
@ -53,6 +112,31 @@ const data = reactive({
tableData: [], tableData: [],
}); });
//
var timer;
const throttle = (func, limit) => {
if (!timer) {
timer = setTimeout(() => {
func();
timer = null;
}, limit);
}
};
const searchT = (val) => {
if (val == "name") {
console.log(search);
} else {
if (search.date == null) {
throttle(getDate, 50);
} else {
console.log(search);
}
}
};
const getDate = () => {
console.log("未选择时间");
};
const personDetails = () => { const personDetails = () => {
http.get(`/api/ggfwyth/pg/wxsbmRyxx/${data.xh}/${data.bm}`).then((res) => { http.get(`/api/ggfwyth/pg/wxsbmRyxx/${data.xh}/${data.bm}`).then((res) => {
if (res.code == 200) { if (res.code == 200) {
@ -70,9 +154,61 @@ onMounted(() => {
// data.tableData = JSON.parse(routers.query.personDetails); // data.tableData = JSON.parse(routers.query.personDetails);
data.xh = routers.query.xh; data.xh = routers.query.xh;
data.bm = routers.query.bm; data.bm = routers.query.bm;
// console.log(11, data.tableData); console.log(11, data.tableData);
// personDetails(); // personDetails()
}); });
</script> </script>
<style lang="less" scoped></style> <style lang="scss" scoped>
.tablebody {
width: 100%;
height: 100%;
overflow: auto;
padding: 20px;
box-sizing: border-box;
.tableheader {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
padding-bottom: 20px;
margin-bottom: 20px ;
border-bottom: 2px solid #ccc;
.tableheader_title {
font-size: 18px;
font-weight: 600;
text-align: center;
position: relative;
.line {
position: absolute;
width: 50%;
height: 4px;
border-radius: 2px;
background-color: green;
left: 50%;
transform: translateX(-50%);
bottom: -22px;
}
}
.active {
color: green;
}
}
.select {
margin-bottom: 20px ;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.select_item {
width: 48%;
}
}
}
:deep(.el-input-group__append button.el-button) {
background-color: #0091ff;
color: #fff;
font-size: 18px;
border: none;
}
</style>