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

<template>
  <oa-scroll
    customClass="scroll-height"
    :pageSize="pageSize"
    :total="total"
    :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">
        <view class="reportContent">
          <view class="contentDom" v-for="(li, index) in dataList" :key="index">
            <view style="margin: auto 10px auto 0" @click="handleSelect()">
              <u-image src="@/static/images/fireReport/icon1.png" width="13px" height="13px"></u-image>
            </view>
            <view style="margin: 0 auto 0 0" @click="handleSelect(li.reportPath)">
              <view>{{ li.reportName }}</view>
            </view>
            <view>
              <view style="color: #3c9cff; cursor: pointer" @click="handleDownload(li.reportPath)">下载报告</view>
            </view>
          </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 { useStores, commonStores } from "@/store/modules/index";

import { reportInfoList } from "@/api/business/mhxf/fireReport";

const commonStore = commonStores(); //全局公共Store

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);
  // proxy.$tab.navigateTo("/pages/business/mhxf/fireReport/components/detailed");
}

/**
 * @历史报告列表查询接口
 * @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;
  total.value = 0;
  reportInfoListApi();
}

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

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

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

onReady(() => {});

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

<style lang="scss">
.fireReport {
  background-color: #f7f7f7;
  .reportContent {
    .contentDom {
      display: flex;
      height: 45px;
      line-height: 45px;
      background: #fff;
      padding: 0 10px;
    }

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

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

  .progress-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.2);
    width: 750rpx;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .progress-box {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 30rpx;
      .text {
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>