jiliangxiaochengxu/pages/Ledger/list.vue

<!-- @format -->

<template>
  <view class="" style="padding-bottom: 20rpx">
    <view style="height: 105rpx"></view>
    <view class="container">
      <view
        style="
          background: #fff;
          width: 100%;
          height: 105rpx;
          position: fixed;
          padding: 20rpx 0;
          top: 0rpx;
        "
      >
        <u-search
          @search="handleSearch"
          v-model="queryParams.searchValue"
          shape="round"
          placeholder="请输入器具名称"
        ></u-search>
      </view>
      <view style="margin-top: 3rpx">
        <view
          class="contentItems"
          v-for="item of ledgerList"
          :key="item.id"
          @click="handleDetails(item)"
        >
          <view class="ledgerName">
            <view style="font-weight: bold"> {{ item.name }} </view>
            <view style="color: rgb(146, 146, 146)">
              {{ item.createTime }}
            </view>
          </view>
          <view class="info">
            <view class="verification status">
              <view>出厂编号:</view>
              <view style="color: #fa3534">{{ item.serialNumber }}</view>
            </view>
            <view class="appStatus status">
              <view>检定状态:</view>
              <view
                :style="{
                  color:
                    verificationColor[verificationStatus(item.checkStatus)],
                }"
                >{{ verificationStatus(item.checkStatus) }}</view
              >
            </view>
            <view class="status">
              <view>申请状态:</view>
              <view
                :style="{
                  color:
                    applicationColor[applicationStatus(item.checkRecordStatus)],
                }"
                >{{ applicationStatus(item.checkRecordStatus) }}</view
              >
            </view>
            <view class="status">
              <view>备案状态:</view>
              <view
                :style="{
                  color: recordColor[recordStatus(item.fillingStatus)],
                }"
                >{{ recordStatus(item.fillingStatus) }}</view
              >
            </view>
          </view>
          <!-- <view class="ledgerNameBottom">
            <view>在用</view>
          </view> -->
          <view class="date"></view>
        </view>
        <view style="height: 10rpx"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { getLedgerList } from "@/api/Ledger";

import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      total: 0,
      verificationColor: {
        未检定: "#909399",
        已校准: "#19be6b",
        已检定: "#19be6b",
        不合格: "#fa3534",
        已超期: "#fa3534",
      },
      applicationColor: {
        已中止: "#fa3534",
        已完成: "#19be6b",
        未申请: "#909399",
        不受理: "#fa3534",
        办理中: "#2979ff",
      },
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#19be6b",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        searchValue: null,
      },
      ledgerList: [],
      verification: [], //检定字典
      application: [], //申请字典
      record: [], //备案字典
    };
  },
  async onLoad() {
    useDict("ejian_instrCheckStatus").then((res) => {
      this.verification = res;
    });
    useDict("ejian_instrCheckRecordStatusV2").then((res) => {
      this.application = res;
    });
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    this.getList();
  },
  computed: {
    //检定状态
    verificationStatus() {
      return (row) => {
        return paraseDict(this.verification, row);
      };
    },
    //申请状态
    applicationStatus() {
      return (row) => {
        return paraseDict(this.application, row);
      };
    },
    //备案状态
    recordStatus() {
      return (row) => {
        return paraseDict(this.record, row);
      };
    },
  },

  methods: {
    handleSearch() {
      console.log("搜索");
    },
    getList() {
      getLedgerList({ ...this.queryParams }).then(({ rows, total }) => {
        this.ledgerList = rows;
        this.total = total;
      });
    },
    handleDetails(row) {
      uni.navigateTo({
        url: "/pages/Ledger/details?id=" + row.id,
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },

    onReachBottom() {
      //触底事件
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
          duration: 1000,
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      } else {
        if (this.queryParams.pageNum <= this.queryParams.pageNum - 1) {
          setTimeout(() => {
            uni.hideLoading();
          }, 500);
        } else {
          uni.showLoading({
            title: "加载中",
          });
          this.queryParams.pageNum++;

          getLedgerList({ ...this.queryParams }).then(({ rows, total }) => {
            this.ledgerList = [...this.ledgerList, ...rows];
            this.total = total;
          });
        }
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss">
.status {
  display: flex;
  color: rgb(146, 146, 146);
  align-items: center;
  margin: 10rpx 0;
}

.status view:last-child {
  font-weight: bold;
  margin-left: 20rpx;
}
.ledgerName {
  color: black;
  font-size: 28rpx;
}
.content {
  display: flex;
  justify-content: space-between;
}
.info {
}
.ledgerNameBottom {
  padding-top: 15rpx;
  border-top: 1px solid rgb(242, 242, 242);
  display: flex;

  & > view:first-child {
    width: 260rpx;
    color: rgb(146, 146, 146);
  }
}
.container {
  height: 100vh;
  // padding: 80rpx 0 40rpx;
  height: 100vh;
  background: rgb(243, 244, 249);

  .contentItems {
    width: 100%;
    background: #fff;
    margin: 6rpx auto;
    padding: 20rpx 30rpx 20rpx;
    .ledgerName {
      padding-bottom: 10rpx;
      border-bottom: 1px solid rgb(242, 242, 242);
      display: flex;

      & > view:first-child {
        width: 260rpx;
        overflow: hidden; /* 隐藏溢出的文本 */
        white-space: nowrap; /* 禁止文本换行 */
        text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      }
      & > view:last-child {
        margin-left: auto;
      }
    }
  }
}
</style>