usky-web-mobile/src/pages/business/zhxf/fireInspect/inspectDetailsList/index.vue

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs
      :list="state.tabsList"
      :current="state.tabsCurrent"
      @click="tabsClick"
      lineColor="#333"
      :activeStyle="{ color: '#333', fontSize: '14px' }"
      :inactiveStyle="{ color: '#909399', fontSize: '14px' }"
      :scrollable="false"
    ></u-tabs>
  </u-sticky>

  <oa-scroll
    customClass="scroll-height"
    :pageSize="state.pageSize"
    :total="state.total"
    :isSticky="true"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="menu-list m0">
        <view class="list-cell list-cell-arrow" style="line-height: 25px" v-for="(base, index) in state.dataList" :key="index" @click="handleToDetails(base)">
          <view class="menu-item">
            <image
              class="image-bg"
              style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0"
              :src="base.handleStatus == 1 ? '/static/images/fireInspect/processed-icon.png' : '/static/images/fireInspect/process-icon.png'"
            >
            </image>
            <view style="width: calc(100% - 51px); display: flex; justify-content: space-between; align-items: center; padding-right: 10px">
              <view class="deviceHeader">
                <view class="deviceName text-ellipsis">{{ base.superviseCode }}</view>
                <view class="deviceName text-ellipsis"> {{ base.content }}</view>
                <view class="deviceName text-ellipsis">{{ base.timestamp ? base.timestamp.replace("T", " ") : "" }}</view>
              </view>
              <view class="" v-if="base.handleStatus == 1" style="color: #16bf00; margin-right: 10px"> 已处理 </view>
              <view class="" v-if="base.handleStatus == 0" style="color: red; margin-right: 10px"> 未处理 </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { eleInspectList, persInspectList } from "@/api/business/zhxf/fireInspect/index.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  tabsList: [
    { name: "全部", value: "" },
    { name: "未处理", value: 0 },
    { name: "已处理", value: 1 },
  ],
  tabsCurrent: 0,

  dataList: [],
  productCode: "",
  productName: "",
  pageSize: 20,
  current: 1,
  total: 0,
});

/**
 * @页面初始化
 */
function init() {
  selectListApi();
}

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  if (state.productName == "电子督察单") {
    getList(eleInspectList);
  } else {
    getList(persInspectList);
  }

  function getList(param) {
    param({
      handleStatus: state.tabsList[state.tabsCurrent].value,
      pageNum: state.current,
      pageSize: state.pageSize,
    }).then((requset) => {
      if (requset.status === "SUCCESS") {
        state.dataList = requset.data.records;
        state.total = requset.data.total;
        uni.setNavigationBarTitle({
          title: `${state.productName}（${state.total}）`,
        });
      }
    });
  }
}

/**
 * @跳转详情事件
 */
function handleToDetails(e) {
  console.log(e);
  proxy.$tab.navigateTo(`/pages/business/zhxf/fireInspect/inspectDetails/index?id=${e.id}&productName=${state.productName}`);
}

/**
 * @scrollView加载数据
 */
function load() {
  state.pageSize += 10;
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  state.pageSize = 20;
  init();
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  state.tabsCurrent = e.index;
  init();
}

onReady(() => {});

onShow(() => {
  init();
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  if ("productName" in options) {
    state.productName = options.productName;
  }
  if ("productCode" in options) {
    state.productCode = options.productCode;
    init();
  }
});
</script>

<style lang="scss" scoped>
.alarmDetailsList-container {
}
</style>