witcarbon-app/src/views/repair/list.vue

<template>
  <van-nav-bar :title="title" :border="false" safe-area-inset-top>
    <template #left>
      <van-icon
        :name="require('@/assets/arrow-left.svg')"
        size="24"
        @click="backPath"
      />
    </template>
  </van-nav-bar>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <div class="page_info">
      <div
        class="search_pannel"
        v-if="role == 'admin' || role == 'Maintenance'"
      >
        <van-tabs
          v-model:active="dataForm.status"
          title-active-color="#2E69EB"
          title-inactive-color="#0C1935"
        >
          <van-tab
            :name="item.dictValue"
            :title="item.dictLabel"
            v-for="item in repairStatusList"
            :key="item.dictValue"
            :style="{
              display: role == 'admin' && item.dictValue == 1 ? '' : 'none',
            }"
          />
        </van-tabs>
      </div>
      <van-row align="center" class="list_total">
        <van-col>共有</van-col>
        <v-count-up
          :end-val="total"
          class="count_up"
          options="{ separator: ',' }"
        />
        <van-col>条记录</van-col>
      </van-row>
      <div class="info_list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :error="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            v-for="item in dataList"
            :key="item.id"
            class="list_item"
            @click="toPath(item.id)"
          >
            <template v-if="item.status != 1">
              <van-row
                align="center"
                class="urgency_type"
                :style="{
                  'background-color': `${
                    dict_filter(item.urgency, 'urgencyTypeList')['color']
                  }`,
                }"
              >
                <van-col>{{
                  `${dict_filter(item.urgency, "urgencyTypeList")["dictLabel"]}`
                }}</van-col>
              </van-row>
            </template>
            <van-col class="header">{{ item.repairPosition }}</van-col>
            <van-col
              >报修类型：{{
                `${dict_filter(item.repairType, "repairTypeList")["dictLabel"]}`
              }}</van-col
            >
            <template v-if="item.status == 1">
              <van-col>报修时间：{{ item.createDate }}</van-col>
            </template>
            <template v-if="item.status == 2">
              <van-col>指派时间：{{ item.updateDate }}</van-col>
            </template>
            <template v-if="item.status == 3">
              <van-col>维修完成时间：{{ item.repairFinishTime }}</van-col>
            </template>
          </div>
        </van-list>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
import Api from "@/utils/api";
import { isEmpty, getDictDataList } from "@/utils/index";
import VCountUp from "../CountUp";
export default {
  components: {
    "v-count-up": VCountUp,
  },
  data() {
    return {
      role: "",
      title: "",
      repairStatusList: [],
      repairTypeList: [],
      urgencyTypeList: [],
      dataForm: {
        status: 1,
        page: 1,
        limit: 10,
      },
      total: 0,
      dataList: [],
      loading: false,
      refreshing: false,
      finished: false,
    };
  },

  watch: {
    "dataForm.status": {
      handler(newval, oldval) {
        this.onRefresh();
      },
      deep: true,
    },
  },

  created() {
    this.role = localStorage.getItem("role");
    if (this.role == "admin") {
      this.title = "工单待办";
    }
    if (this.role == "Maintenance") {
      this.title = "报修工单";
    }
    if (this.role == "Tenant") {
      this.title = "报修记录";
      this.dataForm.status = "";
    }
    this.getRepairStatusList();
    this.getRepairTypeList();
    this.getUrgencyTypeList();
  },

  methods: {
    getRepairStatusList() {
      this.repairStatusList = getDictDataList("RepairStatus");
      if (this.role == "Maintenance") {
        this.repairStatusList = this.repairStatusList.filter(
          (item) => item.dictValue != 1
        );
      }
    },

    getRepairTypeList() {
      this.repairTypeList = getDictDataList("RepairType");
    },

    getUrgencyTypeList() {
      this.urgencyTypeList = getDictDataList("UrgencyType");
    },

    dict_filter(val, list) {
      if (isEmpty(val)) {
        return {};
      }
      return this[list].find((item) => item.dictValue == val);
    },

    onLoad() {
      setTimeout(async () => {
        if (this.refreshing) {
          this.dataList = [];
          this.refreshing = false;
        }
        await this.getDataList();
        this.dataForm.page++; // 分页数加一
      }, 100);
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.dataList = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.total = 0;
      this.loading = true;
      this.dataForm.page = 1; // 分页数赋值为1
      this.onLoad();
    },

    // 获取列表数据方法
    async getDataList() {
      Api.repairList(this.dataForm).then((res) => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.list.length == 0) {
              // 判断获取数据条数若等于0
              this.dataList = []; // 清空数组
              this.finished = true; // 停止加载
            }
            // 若数据条数不等于0
            this.dataList.push(...res.data.list); // 将数据放入list中
            this.loading = false; // 加载状态结束
            this.total = res.data.total;
            // 如果list长度大于等于总数据条数,数据全部加载完成
            if (this.dataList.length >= res.data.total) {
              this.finished = true; // 结束加载状态
            }
          } else {
            // 判断获取数据条数若等于0
            this.dataList = []; // 清空数组
            this.finished = true; // 停止加载
          }
        } else {
          this.loading = false; // 加载状态结束
          this.finished = true; // 停止加载
        }
      });
    },

    toPath(id) {
      this.$router.push({
        path: "/repair/detail",
        query: {
          id: id,
        },
      });
    },
    
    backPath() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.page_info {
  height: 100%;
  .search_pannel {
    background: #ffffff;
    /deep/ {
      .van-tabs__line {
        --van-tabs-bottom-bar-color: #2e69eb;
      }
    }
  }
  .list_total {
    padding: 0 16px;
    margin: 8px 0;
    display: flex;
    text-align: left;
    .van-col {
      height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
    }
    .count_up {
      font-size: 16px;
      font-weight: 500;
      color: #fa5555;
      margin: 0 2px;
    }
  }
  .info_list {
    padding: 0 16px;
    height: calc(100vh - 125px);
    overflow: auto;
    .list_item {
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
      border-radius: 4px;
      margin-bottom: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }

      .van-col {
        height: 18px;
        font-size: 14px;
        color: #999999;
        line-height: 18px;
        margin-bottom: 4px;
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
      }
      .header {
        height: 22px;
        font-size: 16px;
        color: #0c1935;
        line-height: 22px;
        margin-bottom: 8px;
      }
      .urgency_type {
        position: absolute;
        top: 0;
        right: 0;
        height: 24px;
        padding: 0 12px;
        border-radius: 0px 4px 0px 10px;
        .van-col {
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          line-height: 16px;
        }
      }
    }
  }
}
</style>