taicangPopulation2/src/views/components/xiaoqu/bottomList.vue

<template>
  <div class="bottom-list">
    <div class="list-title">
      <introduceTitle title="筛选结果" subTitle="SCREENING RESULTS" />
      <div class="total">
        共 <span>{{ total }}</span> 条数据
      </div>
    </div>
    <div class="result-list">
      <div class="list-table" v-loading="loading">
        <div class="table-header">
          <div class="table-cell0">序号</div>
          <div class="table-cell1">所属网格</div>
          <div class="table-cell2">所属楼栋</div>
          <div class="table-cell1">房屋名称</div>
          <div class="table-cell1">姓名</div>
          <div class="table-cell1">标签</div>
          <div class="table-cell1">类型</div>
          <div class="table-cell1">分色</div>
          <div class="table-cell1">数据更新时间</div>
        </div>
        <div
          class="table-body"
          style="overflow: auto"
          v-infinite-scroll="load"
          :infinite-scroll-distance="10"
          :infinite-scroll-delay="500"
          :infinite-scroll-disabled="disabled"
        >
          <div
            class="body-rows"
            v-for="(item, index) in list"
            :key="'rows' + index"
          >
            <div class="table-cell0">{{ index + 1 }}</div>
            <div class="table-cell1">{{ item.parentname }}</div>
            <div class="table-cell2">
              {{ item.deptname }}{{ item.buildingname }}
            </div>
            <div class="table-cell1">{{ item.housename }}</div>
            <div class="table-cell1">{{ item.name }}</div>
            <div class="table-cell1">
              <el-tooltip effect="dark" content="党员" placement="top">
                <img
                  src="@/assets/images/ui/isd.png"
                  alt=""
                  class="typeis"
                  v-show="item.isD"
              /></el-tooltip>
              <el-tooltip effect="dark" content="退伍军人" placement="top">
                <img
                  src="@/assets/images/ui/isj.png"
                  class="typeis"
                  v-show="item.isJ"
                />
              </el-tooltip>
              <el-tooltip effect="dark" content="帮扶对象" placement="top">
                <img
                  src="@/assets/images/ui/isk.png"
                  alt=""
                  class="typeis"
                  v-show="item.isK"
              /></el-tooltip>
              <el-tooltip effect="dark" content="重点人群" placement="top">
                <img
                  src="@/assets/images/ui/isx.png"
                  alt=""
                  class="typeis"
                  v-show="item.isX"
              /></el-tooltip>
            </div>
            <div class="table-cell1">
              {{ item.type == 1 ? "户籍" : "流动" }}
            </div>
            <div class="table-cell1">
              <ColorCell :item="item" />
            </div>
            <div class="table-cell1">{{ item.updateTime }}</div>
          </div>
        </div>
      </div>
      <div class="no-data" v-show="total == 0">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import introduceTitle from "@/views/components/introduceTitle";
import { inputSearch } from "@/api/home/index.js";
import ColorCell from "@/components/ColorCell";
export default {
  data() {
    return {
      disabled: true,
      loading: false,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    ...mapGetters(["queryParamsXiaoqu", "leftColor", "rightTopColor"]),
  },
  components: { introduceTitle, ColorCell },
  watch: {
    "queryParamsXiaoqu.color"(newValue, oldValue) {
      this.handleChange();
    },
    "queryParamsXiaoqu.isd"(newValue, oldValue) {
      this.handleChange();
    },
    "queryParamsXiaoqu.isj"(newValue, oldValue) {
      this.handleChange();
    },
    "queryParamsXiaoqu.isk"(newValue, oldValue) {
      this.handleChange();
    },
    "queryParamsXiaoqu.isx"(newValue, oldValue) {
      this.handleChange();
    },
    "queryParamsXiaoqu.parentid"(newValue, oldValue) {
      this.handleChange();
    },
    "queryParamsXiaoqu.type"(newValue, oldValue) {
      this.handleChange();
    },
  },
  created() {
    this.handleChange();
  },
  methods: {
    handleChange(newValue) {
      this.reset();
      delete this.queryParamsXiaoqu.buildingid;
      delete this.queryParamsXiaoqu.deptId;
      this.queryParams = { ...this.queryParams, ...this.queryParamsXiaoqu };
      this.disabled = false;
      this.load();
    },
    reset() {
      this.disabled = true;
      this.total = 0;
      this.list = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    load() {
      if (this.list.length > 0 && this.list.length >= this.total) return;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let res = await inputSearch(this.queryParams);
      let handleColor = this.handleColor(res.data.xinxilist.rows);
      this.list = [...this.list, ...handleColor];
      this.total = res.data.xinxilist.total;
      this.queryParams.pageNum++;
      this.loading = false;
    },
    /**
     * 处理颜色
     */
    handleColor(list) {
      list.map((item) => {
        if (!item.color) {
          item.leftColor = "#7b75ff";
          item.rightTopColor = "#7b75ff";
          return;
        }
        for (let key in this.leftColor) {
          if (item.color == key) {
            item.leftColor = this.leftColor[key];
            item.rightTopColor = this.rightTopColor[key];
          }
        }
      });
      return list;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/isTable.scss";
.bottom-list {
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(0, 48, 92, 0.35) 95%,
    rgba(2, 35, 69, 0) 100%
  );
}
.list-title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .total {
    padding-right: 10px;
    font-size: 15px;
    color: #aacfff;
    font-weight: 400;
    span {
      color: #ff961b;
      font-family: "din-bold-2.ttf";
    }
  }
}

.result-list,
.list-table {
  margin-top: 0 !important;
}
.result-list {
  position: relative;
  height: calc(100% - 40px) !important;
  .no-data {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% -50%);
    font-size: 15px;
    color: #d3e9ff;
  }
  .list-table {
    height: 100%;
    display: flex;
    flex-direction: column;
    .table-body {
      flex: 1;
    }
  }
}
.result-list
  .list-table
  .table-body
  > .body-rows[data-v-a33623d4]:nth-child(even) {
  background: rgba(0, 169, 255, 0.15);
}

.typeis {
  height: 20px;
  width: 20px;
  margin-right: 3px;
}

/*全局滚动条样式*/
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-track {
  background: transparent;
}
</style>