table

src/view/person/rwTable.vue

@@ -1,5 +1,43 @@
 <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
       :data="data.tableData"
       stripe
@@ -20,8 +58,29 @@
 import { onMounted, ref, reactive } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/utils/request.js";
+import { Search } from "@element-plus/icons-vue";
 const router = useRouter();
 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({
   xh: "",
   bm: "",
@@ -53,6 +112,31 @@ const data = reactive({
   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 = () => {
   http.get(`/api/ggfwyth/pg/wxsbmRyxx/${data.xh}/${data.bm}`).then((res) => {
     if (res.code == 200) {
@@ -71,8 +155,60 @@ onMounted(() => {
   data.xh = routers.query.xh;
   data.bm = routers.query.bm;
   console.log(11, data.tableData);
-    personDetails()
+  // personDetails()
 });
 </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>