usky-web-mobile/src/pages/business/mhxf/fireReport/index.vue

<template>
  <oa-scroll
    customClass="scroll-height"
    :pageSize="pageSize"
    :total="total"
    :isSticky="false"
    :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="fireReport-area">
        <view class="fireReport-area_center" v-for="(li, index) in dataList" :key="index">
          <view class="fireReport-area_center_img" @click="handleSelect()">
            <u-image src="@/static/images/common/fireReport.png" width="13px" height="13px"></u-image>
          </view>
          <view class="fireReport-area_center_title" @click="handleSelect(li.reportPath)">
            <view>{{ li.reportName }}</view>
          </view>

          <view class="fireReport-area_center_button" @click="handleDownload(li.reportPath)">下载报告</view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
import { onReady, onLoad, onShow, onReachBottom, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance } from "vue";
import { reportInfoList } from "@/api/business/mhxf/fireReport";

const { proxy } = getCurrentInstance();

const dataRes = ref(true);
const dataList = ref([]);
const pageSize = ref(20);
const pageNum = ref(1);
const total = ref(0);

/**
 * @列表点击事件
 */
function handleSelect(reportPath) {
  proxy.$tab.navigateTo("/pages/business/mhxf/fireReport/components/detailedPath?reportPath=" + reportPath);
}

/**
 * @历史报告列表查询接口
 * @API接口查询
 */
function reportInfoListApi() {
  reportInfoList({
    pageSize: pageSize.value,
    pageNum: pageNum.value,
    companyId: "",
    sourceType: 2,
  }).then((res) => {
    dataList.value = res.data.records;
    total.value = res.data.total;
  });
}

/**
 * @下载
 * @按钮点击事件
 */
function handleDownload(reportPath) {
  proxy.$modal.loading("报告下载中，请耐心等待...");

  setTimeout(() => {
    //  #ifdef H5
    window.open(reportPath);
    // #endif

    // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
    // #ifdef MP-WEIXIN
    uni.downloadFile({
      url: reportPath,
      success: (res) => {
        console.log(res);
        if (res.statusCode === 200) {
          // 预览pdf文件
          uni.openDocument({
            filePath: res.tempFilePath,
            showMenu: true, // 右上角菜单，可以进行分享保存pdf
            success: function (file) {
              console.log("file-success", file);
            },
          });
        }
      },
    });
    // #endif

    // #ifdef APP-PLUS
    uni.downloadFile({
      url: reportPath,
      success: (res) => {
        console.log(res);
        if (res.statusCode === 200) {
          // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function () {
              uni.showToast({
                title: "文件已保存至/DCIM/CAMERA文件夹下",
                icon: "none",
              });
              setTimeout(function () {
                // 预览pdf文件
                uni.openDocument({
                  filePath: res.tempFilePath,
                  showMenu: true,
                  success: function (file) {
                    console.log("file-success", file);
                  },
                });
              }, 1500);
            },
            fail: function () {
              uni.showToast({
                title: "保存失败，请稍后重试！",
                icon: "none",
              });
            },
          });
        }
      },
    });
    // #endif

    proxy.$modal.closeLoading();
  }, 2000);
}

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

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

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    uni.navigateTo({
      url: "/pages/business/zhaf/xunJian/collect/components/collectRecord",
    });
  } else {
  }
});

onLoad((options) => {
  reportInfoListApi();
});

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

onReady(() => {});

onMounted(() => {});
</script>

<style lang="scss">
.fireReport-area {
  background-color: #f7f7f7;

  &_center {
    display: flex;
    height: 45px;
    background: #fff;
    padding: 0 10px;

    &_img {
      margin: auto 10px auto 0;
    }

    &_title {
      margin: auto auto auto 0px;
    }

    &_button {
      margin: auto 0px auto 0px;
      color: #3c9cff;
      cursor: pointer;
    }
  }

  > uni-view {
    margin-bottom: 10px;
  }

  > uni-view:last-child {
    margin-bottom: 0px;
  }
}
</style>