product_wx/pages/subPackages/secureselftest/index.vue

<template>
  <div class="secureselftest">
    <van-tabs :swipe-threshold="3" :active="active" @change="onChange">
      <van-tab title="全部" :name="null"></van-tab>
      <van-tab
        :title="item.label"
        :name="item.value"
        :key="item.id"
        v-for="item in dic_SelectList.safety_inspection_type"
      ></van-tab>
    </van-tabs>
    <div class="searchbox" style="padding-bottom: 15rpx">
      <van-row style="background: white">
        <van-col :span="15">
          <picker
            class="ml32 mt10"
            mode="date"
            :value="form.year"
            fields="year"
            :start="startDate"
            :end="endDate"
            @change="bindDateChange"
          >
            <div class="chooseyears">
              <div style="margin-left: 16rpx; width: auto; float: left">
                {{ search.attributiveYear + "年" }}
              </div>

              <van-icon
                name="arrow-down"
                style="float: right; margin-top: 11rpx"
              />
            </div>
          </picker>
        </van-col>
        <van-col :span="8"> </van-col>
      </van-row>
    </div>

    <div class="list">
      <!-- <div v-if="companyList.length == 0"> -->
      <div
        class="list-row"
        v-if="companyList.length != 0"
        v-for="(item, index) in companyList"
        @click="junmpMyMechantsDetails(item.id)"
        :key="index"
      >
        <div class="cell_1">
          <div class="width100 height44rpx mb16rpx">
            <div class="first_title">{{ getDicType(item.type) }}</div>
          </div>
          <div class="width100 height40rpx">
            <div class="second_title" style="width: 100%">
              {{ item.companyName }} {{ "               " + item.createdAt }}
            </div>
          </div>
        </div>
        <img
          src="../../../static/mine/youjiantou.png"
          style="width: 100rpx; height: 100rpx"
          alt=""
        />
      </div>
      <!-- </div> -->
      <!-- <div v-else> -->
      <van-empty
        v-if="companyList.length == 0"
        class="disblock marginauto"
        style="background: white"
        description="暂无数据"
      />
      <!-- </div> -->
    </div>
  </div>
</template>
    
    <script>
import { findSafetySelfCheckingManageList, getByCodes } from "@/js_sdk/http";
import vanEmpty from "../../../wxcomponents/weapp/dist/empty/index";

export default {
  components: {
    vanEmpty,
  },
  data() {
    return {
      dic_key: ["safety_inspection_type"],
      dic_SelectList: {},
      active: 0,
      form: {
        attributiveYear: "2023",
      },
      statusList: [
        { label: "全部", value: null },
        { label: "电梯自检", value: "1" },
        { label: "消防自检", value: "2" },
        { label: "电柜检查", value: "3" },
        { label: "电器线路", value: "4" },
      ],
      companyList: [],
      search: {
        pageSize: 10,
        pageNum: 1,
        attributiveYear: "2023",
      },
    };
  },
  onShow() {
    // this.getByCodes();

    this.getByCodes();
  },
  methods: {
    getDicType(value) {
      if (!value) return "未知类型";

      let safety_inspection_type = this.dic_SelectList.safety_inspection_type;
      let index = safety_inspection_type.findIndex((e) => e.value == value);
      return safety_inspection_type[index].label;
    },
    bindDateChange(event) {
      this.search.attributiveYear = event.detail.value;
      this.getCompanyList();
      this.$forceUpdate();
    },
    junmpMyMechantsDetails(id) {
      uni.navigateTo({
        url: "/pages/subPackages/secureselftest/report?id=" + id,
      });
    },
    jumpReport() {
      uni.navigateTo({
        url: "/pages/subPackages/secureselftest/report?id=" + null,
      });
    },
    async getMoreListData() {
      let that = this;

      that.search.pageNum = that.search.pageNum + 1;
      let list = await findSafetySelfCheckingManageList(that.search);

      if (list.rows == 0) {
        that.$showToast("没有更多数据了");
      } else {
        list.rows.forEach((e) => {
          that.companyList.push(e);
        });
      }
    },
    onReachBottom() {
      this.getMoreListData();
    }, //下拉执行的时候触发 （下拉刷新）
    onChange(e) {
      this.search.type = e.detail.name == null ? "" : e.detail.name;
      this.getCompanyList();
    },
    endDate() {
      return this.getDate("end");
    },
    startDate() {
      return this.getDate("start");
    },

    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.getCompanyList();
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    async getCompanyList() {
      this.search.pageSize = 10;
      this.search.pageNum = 1;
      let list = await findSafetySelfCheckingManageList(this.search);
      //   /wx/SafetyController/findSafetySelfCheckingManageList
      list.rows.forEach((e) => {
        e.createdAt = this.$common.transDate(e.createdAt);
      });

      this.companyList = list.rows;
    },
    jumpAddCompanyPage() {
      uni.navigateTo({
        url: "/pages/subPackages/addCompany/addCompany",
      });
    },

    jumpPage(e) {
      uni.navigateTo({
        url: "/pages/subPackages/companyDetails/companyDetails?id=" + e,
      });
    },
  },
};
</script>
    
    
    <style lang="scss">
.chooseyears {
  width: 326rpx;
  height: 56rpx;
  background: rgba(29, 24, 188, 0.05);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  text-align: center;
  line-height: 56rpx;
  color: #1d18bc;
}
.searchbox {
  display: block;
  background: white;
}
.chaochuyincang {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secureselftest {
  .van-tab {
    // flex: none !important;
    // margin: 0 32rpx;
  }
  .custom-class {
    background: white;
  }
}
</style>