Vent-App/pages/filecenter/filecenter.vue

<template name="filecenter">
  <view class="file-page">
    <u-navbar
      title="文件中心"
      :safeAreaInsetTop="true"
      :fixed="true"
      height="50px"
      bgColor="transparent"
      titleStyle="fw600 fs-18"
      leftIconColor="#303133"
      @leftClick="goBack"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="arrow-left" size="20" color="#303133"></u-icon>
      </view>
    </u-navbar>

    <view v-if="!menushow" class="file-page-content">
      <view class="file-tab-bar">
        <view
          class="file-tab-item"
          v-for="(item, index) in sectionList"
          :key="index"
          :class="{ active: curNow === index }"
          @click="sectionChange(index)"
        >
          <text class="file-tab-text">{{ item.name }}</text>
          <view class="file-tab-line" v-if="curNow === index"></view>
        </view>
      </view>

      <view class="file-main">
        <view class="search-card">
          <view class="search-row">
            <text class="search-label">文件名称：</text>
            <u-input
              v-model="fileName"
              type="text"
              class="search-input"
              placeholder="请输入文件名称"
              border="none"
              confirmType="search"
              font-size="24rpx"
              placeholder-style="font-size: 24rpx;"
              @confirm="searchFile"
            ></u-input>
            <view
              class="action-btn action-btn-outline search-picker-btn"
              @click="pickershow = true"
            >
              <text class="action-btn-text">{{
                fileType ? fileType : "文件类型"
              }}</text>
              <view class="search-picker-arrow"></view>
            </view>
            <view
              class="action-btn action-btn-primary search-query-btn"
              @click="searchFile"
            >
              <text class="action-btn-text">查询</text>
            </view>
          </view>
          <u-picker
            :show="pickershow"
            :columns="fileTypeList"
            keyName="label"
            @cancel="pickershow = false"
            @confirm="selectFileType"
          ></u-picker>
        </view>

        <scroll-view
          class="file-list"
          :class="{ 'file-list--fallback': !listHeight }"
          :key="listKey"
          :scroll-y="scrollEnabled"
          :show-scrollbar="false"
          :lower-threshold="scrollLowerThreshold"
          :style="listHeight ? { height: listHeight + 'px' } : null"
          @scrolltolower="loadMore"
        >
          <view v-for="item in fileData" :key="item.id">
            <view class="file-card">
              <view class="file-card-header" @tap="openFile(item)">
                <text class="file-card-title">{{ item.fileName }}</text>
              </view>
              <view class="file-action-row">
                <view
                  class="action-btn action-btn-primary"
                  @click.stop="detailmodal(item)"
                >
                  <text class="action-btn-text">审批详情</text>
                </view>
                <view
                  class="action-btn action-btn-outline"
                  @click.stop="commitmodal(item)"
                >
                  <text class="action-btn-text">提交</text>
                </view>
                <view
                  class="action-btn action-btn-outline"
                  @click.stop="retractmodal(item)"
                >
                  <text class="action-btn-text">撤回</text>
                </view>
                <view
                  class="action-btn action-btn-outline"
                  @click.stop="download(item)"
                >
                  <text class="action-btn-text">下载</text>
                </view>
                <view
                  class="action-btn action-btn-outline"
                  @click.stop="showmodal(item)"
                >
                  <text class="action-btn-text">删除</text>
                </view>
              </view>
              <view class="file-info-grid" @tap="openFile(item)">
                <view class="file-info-card">
                  <view class="file-info-icon-box">
                    <view class="file-info-icon-glass">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/FileSource.svg"
                        mode="aspectFit"
                      ></image>
                    </view>
                  </view>
                  <view class="file-info-content">
                    <text class="file-info-value">{{ item.fileSource }}</text>
                    <text class="file-info-label">文件来源</text>
                  </view>
                </view>
                <view class="file-info-card">
                  <view class="file-info-icon-box">
                    <view class="file-info-icon-glass">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/ApprovalStatus.svg"
                        mode="aspectFit"
                      ></image>
                    </view>
                  </view>
                  <view class="file-info-content">
                    <text class="file-info-value">{{
                      item.bpmStatus_dictText
                    }}</text>
                    <text class="file-info-label">审批状态</text>
                  </view>
                </view>
                <view class="file-info-card">
                  <view class="file-info-icon-box">
                    <view class="file-info-icon-glass">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/Creator.svg"
                        mode="aspectFit"
                      ></image>
                    </view>
                  </view>
                  <view class="file-info-content">
                    <text class="file-info-value">{{ item.createBy }}</text>
                    <text class="file-info-label">创建人</text>
                  </view>
                </view>
                <view class="file-info-card">
                  <view class="file-info-icon-box">
                    <view class="file-info-icon-glass">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/UpdateTime.svg"
                        mode="aspectFit"
                      ></image>
                    </view>
                  </view>
                  <view class="file-info-content">
                    <text class="file-info-value">{{ item.createTime }}</text>
                    <text class="file-info-label">上传时间</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view v-if="loading && fileData.length === 0" class="file-empty">
            <u-loading-icon
              mode="circle"
              size="26"
              color="#0065f8"
            ></u-loading-icon>
            <text class="file-empty-text">正在加载...</text>
          </view>
          <view
            v-else-if="!loading && fileData.length === 0"
            class="file-empty"
            @click="retryLoad"
          >
            <image
              class="file-empty-img"
              src="/static/empty.png"
              mode="aspectFit"
            ></image>
            <text class="file-empty-text">{{
              loadFailed ? "加载失败，点击重试" : "暂无文件"
            }}</text>
          </view>

          <u-loadmore
            v-if="fileData.length > 0"
            :status="loadStatus"
            loading-text="正在加载..."
            loadmore-text="上拉加载更多"
            nomore-text="没有更多文件了"
            :margin-top="16"
            :margin-bottom="16"
            @loadmore="loadMore"
          ></u-loadmore>
        </scroll-view>

        <!-- 审批详情 -->
        <u-popup
          :show="detailShow"
          mode="center"
          :round="16"
          :closeable="false"
          @close="detailClose"
        >
          <view class="detail-modal">
            <view class="detail-modal-header">
              <text class="detail-modal-title">审批详情</text>
              <view class="detail-modal-close" @click="detailClose">
                <image
                  class="detail-close-icon"
                  src="/static/filecenter/关闭.svg"
                  mode="aspectFit"
                />
              </view>
            </view>
            <view class="detail-modal-divider"></view>
            <scroll-view scroll-y class="detail-modal-body">
              <view class="detail-section">
                <view class="detail-section-title">
                  <text class="detail-section-text">流程审批进度历史</text>
                </view>
                <view class="detail-table-container">
                  <view class="detail-table">
                    <view class="detail-table-header">
                      <view class="detail-table-cell">序号</view>
                      <view class="detail-table-cell">当前环节</view>
                      <view class="detail-table-cell">审批人</view>
                      <view class="detail-table-cell">审批结果</view>
                      <view class="detail-table-cell">审批开始时间</view>
                      <view class="detail-table-cell">审批结束时间</view>
                      <view class="detail-table-cell">处理意见</view>
                      <view class="detail-table-cell">状态</view>
                    </view>
                    <view
                      class="detail-table-row"
                      v-for="(item, index) in tableData"
                      :key="index"
                    >
                      <view class="detail-table-cell">
                        <text>{{ index + 1 }}</text>
                      </view>
                      <view class="detail-table-cell">{{ item.name }}</view>
                      <view class="detail-table-cell">
                        <text
                          v-if="item.assignees && item.assignees.length > 0"
                        >
                          {{ item.assignees[0].username }}
                        </text>
                        <text v-else> - </text>
                      </view>
                      <view class="detail-table-cell">{{
                        item.deleteReason
                      }}</view>
                      <view class="detail-table-cell">{{
                        item.createTime
                      }}</view>
                      <view class="detail-table-cell">{{ item.endTime }}</view>
                      <view class="detail-table-cell">{{ item.comment }}</view>
                      <view class="detail-table-cell">
                        <text v-if="item.assignees[0].isExecutor">
                          已处理
                        </text>
                        <text v-else> 待处理</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="detail-section">
                <view class="detail-section-title">
                  <text class="detail-section-text">实时流程图</text>
                </view>
                <view class="detail-flowchart-wrap">
                  <image
                    class="detail-flowchart-img"
                    :src="imageUrl"
                    mode="widthFix"
                  />
                </view>
              </view>
            </scroll-view>
          </view>
        </u-popup>
        <!-- 删除 -->
        <u-popup
          :show="show"
          mode="center"
          :round="16"
          :closeable="false"
          @close="cancel"
        >
          <view class="delete-modal">
            <view class="delete-modal-header">
              <text class="delete-modal-title">删除</text>
              <view class="delete-modal-close" @click="cancel">
                <image
                  class="delete-close-icon"
                  src="/static/filecenter/close.svg"
                  mode="aspectFit"
                />
              </view>
            </view>
            <view class="delete-modal-divider"></view>
            <view class="delete-modal-body">
              <view class="delete-confirm-box">
                <image
                  class="delete-confirm-icon"
                  src="/static/filecenter/delete.svg"
                  mode="aspectFit"
                />
                <text class="delete-confirm-text">确定删除？</text>
              </view>
            </view>
            <view class="delete-modal-footer">
              <view class="action-btn action-btn-outline" @click="cancel">
                <text class="action-btn-text">取消</text>
              </view>
              <view class="action-btn action-btn-primary" @click="confirm">
                <text class="action-btn-text">确定</text>
              </view>
            </view>
          </view>
        </u-popup>
        <!-- 提交 -->
        <u-popup
          :show="commitShow"
          mode="center"
          :round="16"
          :closeable="false"
          @close="cancelCommit"
        >
          <view class="commit-modal">
            <view class="commit-modal-header">
              <text class="commit-modal-title">提交文件</text>
              <view class="commit-modal-close" @click="cancelCommit">
                <image
                  class="commit-close-icon"
                  src="/static/filecenter/关闭.svg"
                  mode="aspectFit"
                />
              </view>
            </view>
            <view class="commit-modal-divider"></view>
            <view class="commit-modal-body">
              <view class="commit-form-box">
                <view class="commit-form-row">
                  <view class="commit-form-label">
                    <text class="commit-required">*</text>
                    <text>选择审批</text>
                  </view>
                  <view class="commit-select" @click="openCommitPicker">
                    <text class="commit-select-text">{{
                      selectedCommitName
                    }}</text>
                    <text class="commit-select-arrow"></text>
                  </view>
                </view>
              </view>
            </view>
            <view class="commit-modal-footer">
              <view class="action-btn action-btn-outline" @click="cancelCommit">
                <text class="action-btn-text">取消</text>
              </view>
              <view
                class="action-btn action-btn-primary"
                @click="confirmCommit"
              >
                <text class="action-btn-text">确定</text>
              </view>
            </view>
          </view>
        </u-popup>
        <u-picker
          :show="commitPickerShow"
          :columns="[commitPickerColumns]"
          keyName="label"
          :defaultIndex="[selectedCommitIndex]"
          @cancel="commitPickerShow = false"
          @confirm="onCommitPickerConfirm"
        ></u-picker>
        <!-- 撤回 -->
        <u-popup
          :show="showretract"
          mode="center"
          :round="16"
          :closeable="false"
          @close="close"
        >
          <view class="retract-modal">
            <view class="retract-modal-header">
              <text class="retract-modal-title">撤销申请</text>
              <view class="retract-modal-close" @click="close">
                <image
                  class="retract-close-icon"
                  src="/static/filecenter/关闭.svg"
                  mode="aspectFit"
                />
              </view>
            </view>
            <view class="retract-modal-divider"></view>
            <view class="retract-modal-body">
              <view class="retract-textarea-wrap">
                <u--textarea
                  v-model="value1"
                  placeholder="请输入撤回原因"
                  border="none"
                ></u--textarea>
              </view>
            </view>
            <view class="retract-modal-footer">
              <view
                class="action-btn action-btn-outline"
                @click="cancelRetract"
              >
                <text class="action-btn-text">取消</text>
              </view>
              <view
                class="action-btn action-btn-primary"
                @click="confirmRetract"
              >
                <text class="action-btn-text">确定</text>
              </view>
            </view>
          </view>
        </u-popup>
        <u-notify
          message="只有审批中的数据才能撤回！"
          :show="notifyShow"
          :duration="1000"
        ></u-notify>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import configService from "../../common/service/config.service";
// import FileTreeMenu from "./treeMenu/fileTreeMenu.vue";
export default {
  // components: {
  //   FileTreeMenu,
  // },
  name: "filecenter",
  props: ["cur"],
  watch: {
    // 页面用 v-show 常驻挂载，切到文件中心时才能量到真实位置
    cur(val) {
      if (val === "filecenter") {
        this.refreshListHeight();
      }
    },
  },
  data() {
    return {
      backPic0: "url(/static/topnavbar0.png)",
      backPic: "url(../../static/topnavbar.png)",
      sectionList: [
        { name: "全部", code: 0 },
        { name: "待审批", code: 1 },
        { name: "已审批", code: 2 },
      ],
      fileTypeList: [
        [
          { label: "全部类型", value: "" },
          { label: ".txt", value: "txt" },
          { label: ".doc", value: "doc" },
          { label: ".docx", value: "docx" },
          { label: ".xls", value: "xls" },
          { label: ".xlsx", value: "xlsx" },
          { label: ".ppt", value: "ppt" },
          { label: ".pptx", value: "pptx" },
          { label: ".jpg", value: "jpg" },
          { label: ".png", value: "png" },
          { label: ".pdf", value: "pdf" },
        ],
      ],
      fileType: "", //文件类型
      pickershow: false,
      curNow: 0,
      fileData: [],
      bpmStatus: 1, //1处理中  2 已完成  3 已驳回
      show: false, //删除modal
      selectItem: "", //选择文件
      showretract: false, //撤回popup
      value1: "", //撤回原因
      cancelItem: "", //撤回文件
      detailShow: false, //详情
      notifyShow: false, //撤回文件提示消息显示
      commitShow: false, //提交
      commitPickerShow: false,
      columns: [],
      selectedCommitIndex: 0,
      commitItem: "", //提交文件
      selectFile: [],
      tableData: [], //审批内容
      detailItem: "", //详情文件
      imageUrl: "",
      fileName: "", //文件名称搜索框
      menushow: false,
      pageNo: 1, //当前页码
      pageSize: 10, //每页条数
      total: 0, //文件总数
      loading: false, //是否正在加载
      hasMore: true, //是否还有下一页
      requestSeq: 0, //请求序号，用于丢弃过期响应
      listKey: 0, //列表 key，重新查询时重建列表以回到顶部
      loadFailed: false, //列表加载是否失败
      listHeight: 0, //列表滚动区高度（px），由搜索卡片下沿算到底部 tabbar
      // 用 data 传值，避免编译器把字面量属性裁掉导致 scroll-y 丢失
      scrollEnabled: true,
      scrollLowerThreshold: 120,
    };
  },
  mounted() {
    this.getFileInfo();
    this.refreshListHeight();
    if (typeof uni.onWindowResize === "function") {
      uni.onWindowResize(this.refreshListHeight);
    }
  },
  beforeDestroy() {
    if (typeof uni.offWindowResize === "function") {
      uni.offWindowResize(this.refreshListHeight);
    }
  },
  computed: {
    commitPickerColumns() {
      return (this.selectFile || []).map((item, index) => ({
        label:
          item.name ||
          item.processName ||
          item.procDefName ||
          `审批流程${index + 1}`,
        value: item.id,
      }));
    },
    selectedCommitName() {
      if (!this.commitPickerColumns.length) {
        return "请选择审批";
      }
      const item = this.commitPickerColumns[this.selectedCommitIndex];
      return item ? item.label : "请选择审批";
    },
    loadStatus() {
      if (this.loading) {
        return "loading";
      }
      return this.hasMore ? "loadmore" : "nomore";
    },
  },
  methods: {
    //左上角返回键：直接返回首页
    goBack() {
      this.$emit("changePage", "device");
    },
    // fileTreeShow(e) {
    //   this.menushow = !this.menushow;
    // },
    menuClick(id) {
      this.menushow = false;
    },
    //选择文件类型
    selectFileType(e) {
      this.pickershow = false;
      if (e.value[0].label === "全部类型") {
        this.fileType = "";
      } else {
        this.fileType = e.value[0].label;
      }
    },
    //根据条件查询相关文件
    searchFile() {
      this.getFileInfo();
    },
    sectionChange(newVal) {
      this.curNow = newVal;
      // 0-全部，1-待审批，2-已审批
      this.bpmStatus = newVal === 0 ? "" : newVal;
      this.getFileInfo();
    },
    getTreeList() {
      var params = { parentId: "" };
      new Promise((resolve, reject) => {
        api
          .getFileInfo(params)
          .then((response) => {
            if (response.data.code == 200) {
              let data = response.data.result.records;
              let datas = data.filter((v) => v.fileType == null);
              let list = list2trees(datas);
              listArr.push(...list);
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    // 拉取文件列表：reset 为 true 时从第一页重新加载，否则加载下一页
    async getFileInfo(reset = true) {
      if (!reset && (this.loading || !this.hasMore)) {
        return;
      }
      const pageNo = reset ? 1 : this.pageNo + 1;
      const seq = ++this.requestSeq;
      this.loading = true;
      this.loadFailed = false;
      if (reset) {
        this.pageNo = 1;
        this.total = 0;
        this.fileData = [];
        this.hasMore = true;
        this.listKey += 1;
      }
      var params = {
        bpmStatus: this.bpmStatus,
        column: "createTime",
        fileSuffix: this.fileType,
        likeFileName: this.fileName,
        pageNo: pageNo,
        pageSize: this.pageSize,
        parentId: "",
        selectFlag: true,
        sysOrgCode: "",
      };
      try {
        const response = await api.getFileInfo(params);
        if (seq !== this.requestSeq) {
          return;
        }
        if (response.data.code != 200) {
          this.loadFailed = true;
          uni.showToast({ title: "文件列表加载失败", icon: "none" });
          return;
        }
        const result = response.data.result || {};
        const records = result.records || [];
        this.pageNo = pageNo;
        this.total = result.total || 0;
        this.fileData = reset ? records : this.fileData.concat(records);
        this.hasMore =
          records.length > 0 &&
          (this.total
            ? this.fileData.length < this.total
            : records.length >= this.pageSize);
      } catch (error) {
        if (seq === this.requestSeq) {
          this.loadFailed = true;
          uni.showToast({ title: "文件列表加载失败", icon: "none" });
        }
      } finally {
        if (seq === this.requestSeq) {
          this.loading = false;
        }
      }
    },
    //上拉加载下一页
    loadMore() {
      this.getFileInfo(false);
    },
    //加载失败时点击空态重试
    retryLoad() {
      if (this.loadFailed) {
        this.getFileInfo();
      }
    },
    //重新计算滚动区高度（页面显示、窗口尺寸变化时调用）
    refreshListHeight() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.measureListHeight();
        }, 30);
      });
    },
    //滚动区 = 搜索卡片下沿 到 底部 tabbar 上方 20rpx
    measureListHeight() {
      const query = uni.createSelectorQuery().in(this);
      query.select(".search-card").boundingClientRect();
      query.exec((res) => {
        const card = res && res[0];
        // 组件被 v-show 隐藏时量不到尺寸，等切换到本页再算
        if (!card || !card.height) {
          return;
        }
        const sys = uni.getSystemInfoSync();
        const safeBottom =
          (sys.safeAreaInsets && sys.safeAreaInsets.bottom) || 0;
        // 减去：底部 tabbar(50 + 安全区)、搜索卡片 margin-bottom 20rpx、.file-main 下内边距 20rpx
        const height = Math.floor(
          sys.windowHeight - (50 + safeBottom) - card.bottom - uni.upx2px(40)
        );
        this.listHeight = height > 0 ? height : 0;
      });
    },
    //查看文件内容
    openFile(params) {
      uni.downloadFile({
        url:
          configService.apiUrl +
          "/ventanaly-sharefile/fileServer/onlyOffice/read?id=" +
          params.id,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        },
      });
    },
    // //下载文件到手机
    download(params) {
      var fileiId = params.id;
      var params = {
        id: fileiId,
      };
      new Promise((resolve, reject) => {
        api
          .downloadFile(params)
          .then((response) => {
            if (response.statusCode == 200) {
              console.log(response, "111");
              // const blob = new Blob([response.data], {
              //   type: "charset=UTF-8",
              // }); // 构造一个blob对象来处理数据
              // if ("download" in document.createElement("a")) {
              //   // 支持a标签download的浏览器
              //   const link = document.createElement("a"); // 创建a标签
              //   link.href = URL.createObjectURL(blob);
              //   document.body.appendChild(link);
              //   link.click(); // 执行下载
              //   URL.revokeObjectURL(link.href); //
              //   document.body.removeChild(link); //
              // }
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // //删除文件
    showmodal(data) {
      this.selectItem = data;
      this.show = true;
    },
    confirm() {
      this.delatefile(this.selectItem);
    },
    cancel() {
      this.show = false;
    },
    delatefile(params) {
      var fileiId = params.id;
      new Promise((resolve, reject) => {
        api
          .delateFile({ id: fileiId })
          .then((response) => {
            if (response.data.code == 200) {
              this.show = false;
              // 本地移除，避免删除后列表回到顶部
              this.fileData = this.fileData.filter(
                (item) => String(item.id) !== String(fileiId)
              );
              this.total = Math.max(this.total - 1, 0);
              if (!this.fileData.length) {
                this.getFileInfo();
              }
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //撤回文件
    retractmodal(data) {
      this.value1 = "";
      this.showretract = true;
      this.cancelItem = data;
    },
    close() {
      this.showretract = false;
    },
    cancelRetract() {
      this.showretract = false;
    },
    confirmRetract() {
      var fileiId = this.cancelItem.id;
      var params = {
        tableId: fileiId,
        reason: this.value1,
        tableName: this.cancelItem.tableName,
      };
      if (this.cancelItem.bpmStatus == 1) {
        new Promise((resolve, reject) => {
          api
            .cancelFile(params)
            .then((response) => {
              if (response.data.code == 200) {
                this.showretract = false;
                this.getFileInfo();
              } else {
                // console.log("请求下载文件失败：", err);
              }
            })
            .catch((error) => {
              reject(error);
            });
        });
      } else {
        this.notifyShow = true;
      }
    },
    // 详情
    detailmodal(data) {
      this.detailShow = true;
      var fileiId = data.id;
      var tablename = data.tableName;
      var params = {
        tableId: fileiId,
        tableName: tablename,
      };
      new Promise((resolve, reject) => {
        api
          .gethistoricFlowNew(params)
          .then((response) => {
            if (response.data.code == 200) {
              var detailData = response.data;
              this.tableData = detailData.result;
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
      this.getDetailImg(data);
    },
    getDetailImg(data) {
      var fileiId = data.id;
      var tablename = data.tableName;
      var params = {
        tableId: fileiId,
        tableName: tablename,
      };
      new Promise((resolve, reject) => {
        api
          .getHighlightImgNew(params)
          .then((response) => {
            if (response.statusCode == 200) {
              this.imageUrl = response.config.baseUrl + response.config.url;
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    detailClose() {
      this.detailShow = false;
    },
    // 提交
    commitmodal(data) {
      this.selectedCommitIndex = 0;
      this.commitShow = true;
      this.commitItem = data;
      this.getListFile();
    },
    getListFile() {
      this.columns = [];
      var params = {
        zx: true,
        column: "createTime",
        order: "desc",
        status: 1,
        _t: Date.now(),
      };
      new Promise((resolve, reject) => {
        api
          .getListFile(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.selectFile = response.data.result || [];
              this.columns = [];
              this.selectedCommitIndex = 0;
              this.selectFile.forEach((item) => {
                this.columns.push(item.id);
              });
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    openCommitPicker() {
      if (!this.commitPickerColumns.length) {
        uni.showToast({
          title: "暂无审批流程",
          icon: "none",
        });
        return;
      }
      this.commitPickerShow = true;
    },
    onCommitPickerConfirm(e) {
      this.commitPickerShow = false;
      const selected = e.value && e.value[0];
      if (!selected) {
        return;
      }
      const index = this.commitPickerColumns.findIndex(
        (item) => item.value === selected.value
      );
      this.selectedCommitIndex =
        index >= 0
          ? index
          : e.indexs && e.indexs[0] !== undefined
          ? e.indexs[0]
          : 0;
    },
    confirmCommit() {
      var fileiId = this.commitItem.id;
      const selected = this.commitPickerColumns[this.selectedCommitIndex];
      var reqDefId = (selected && selected.value) || this.columns[0];
      var params = {
        tableId: fileiId,
        procDefId: reqDefId,
        firstGateway: true,
      };
      new Promise((resolve, reject) => {
        api
          .commitFile(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.commitShow = false;
              this.commitPickerShow = false;
              this.getFileInfo();
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    cancelCommit() {
      this.commitShow = false;
      this.commitPickerShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.file-page {
  /* 高度 = 视口 - 底部 u-tabbar 高度（50px + 安全区），与 u-tabbar 的占位元素相抵，页面不再产生页面级滚动 */
  height: calc(100vh - 50px);
  height: calc(100vh - 50px - constant(safe-area-inset-bottom));
  height: calc(100vh - 50px - env(safe-area-inset-bottom));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #c8d8f8 0%, #eef4fd 320rpx, #f4f7fd 100%);
}

.file-page-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: calc(50px + var(--status-bar-height, 0px));
}

.file-tab-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16rpx 32rpx 0;
}

.file-tab-item {
  position: relative;
  margin-right: 48rpx;
  padding-bottom: 16rpx;
}

.file-tab-text {
  font-size: 28rpx;
  color: #000;
  line-height: 1.4;
}

.file-tab-item.active .file-tab-text {
  color: #0065f8;
  font-weight: 600;
}

.file-tab-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rpx;
  border-radius: 3rpx;
  background: #0065f8;
}

.file-main {
  flex: 1;
  min-height: 0;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.search-card {
  flex-shrink: 0;
  background: #f9f9fb;
  border: 1rpx solid #fff;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
}

.search-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search-label {
  flex-shrink: 0;
  font-size: 24rpx;
  color: #000;
}

.search-input {
  flex: 3;
  min-width: 0;
  height: 48rpx;
  margin: 0 4rpx;
  font-size: 24rpx;
  padding: 0 12rpx !important;
  border: 1rpx solid #2572ff;
}

.search-picker-arrow {
  width: 0;
  height: 0;
  margin-left: 4rpx;
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 10rpx solid #0065f8;
  flex-shrink: 0;
}

/* scroll-view 必须有确定高度，否则内部 height:100% 会被内容撑开、滚动失效。
   正常情况下由 JS 量出搜索卡片下沿到底部 tabbar 的高度，直接内联 px；
   量不到时退回 flex 撑满。 */
.file-list {
  width: 100%;
  flex: none;
  min-height: 0;
}

/* 隐藏滚动条：滚动条会占用宽度，导致列表卡片比上方搜索卡片窄、左右不齐 */
.file-list ::v-deep ::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

.file-list--fallback {
  flex: 1 1 0;
  height: 0;
}

.file-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.file-empty-img {
  width: 240rpx;
  height: 240rpx;
}

.file-empty-text {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #8a94a6;
}

.file-card {
  background: #f9f9fb;
  border: 1rpx solid #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.file-card-header {
  margin-bottom: 16rpx;
}

.file-card-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
  word-break: break-all;
}

.file-action-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.action-btn {
  flex: 1;
  min-width: 0;
  height: 56rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 8rpx;
}

.action-btn-text {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.action-btn-primary {
  background: #0065f8;
}

.action-btn-primary .action-btn-text {
  color: #ffffff;
}

.action-btn-outline {
  background: #ffffff;
  border: 1rpx solid #0065f8;
}

.action-btn-outline .action-btn-text {
  color: #0065f8;
}

.search-picker-btn {
  flex: 2;
  min-width: 0;
  margin-left: 8rpx;
  padding: 0 12rpx;
}
.search-query-btn {
  flex: 2;
  min-width: 0;
  margin-left: 8rpx;
  padding: 0 12rpx;
}

.search-query-btn {
  padding: 0 16rpx;
}

.file-info-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -6rpx;
}

.file-info-card {
  width: calc(50% - 12rpx);
  margin: 6rpx;
  padding: 16rpx 12rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(
    to bottom,
    rgba(175, 195, 252, 0.6) 0%,
    rgba(175, 195, 252, 0.1) 100%
  );
}

.file-info-icon-box {
  position: relative;
  width: 56rpx;
  height: 56rpx;
  border-radius: 12rpx;
  background: #2b7cff;
  box-sizing: border-box;
  box-shadow: 0 4rpx 10rpx rgba(43, 124, 255, 0.22);
  flex-shrink: 0;
  margin-right: 12rpx;
}

.file-info-icon-glass {
  position: absolute;
  left: -6rpx;
  bottom: -6rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 12rpx;
  background: transparent;
  border: none;
  box-shadow: 0 0 0 0.6px #ffffff inset;
  box-sizing: border-box;
  backdrop-filter: blur(4rpx);
  -webkit-backdrop-filter: blur(4rpx);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-info-icon {
  width: 28rpx;
  height: 28rpx;
}

.file-info-content {
  flex: 1;
  min-width: 0;
}

.file-info-value {
  display: block;
  font-size: 24rpx;
  font-weight: 700;
  color: #0065f8;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-info-label {
  display: block;
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #000;
  line-height: 1.3;
}

.retract-modal {
  width: 620rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  padding-bottom: 28rpx;
  box-sizing: border-box;
}

.retract-modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx 20rpx;
}

.retract-modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.retract-modal-close {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.retract-close-icon {
  width: 28rpx;
  height: 28rpx;
}

.retract-modal-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.retract-modal-body {
  padding: 24rpx 28rpx;
}

.retract-textarea-wrap {
  border: 1rpx solid #2b7cff;
  border-radius: 8rpx;
  overflow: hidden;
  min-height: 200rpx;
  background: #ffffff;
}

.retract-modal-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  padding: 0 28rpx;
}

.retract-modal-footer .action-btn {
  flex: 1;
  height: 64rpx;
}

.delete-modal {
  width: 620rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  padding-bottom: 28rpx;
  box-sizing: border-box;
}

.delete-modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx 20rpx;
}

.delete-modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.delete-modal-close {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-close-icon {
  width: 28rpx;
  height: 28rpx;
}

.delete-modal-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.delete-modal-body {
  padding: 24rpx 28rpx;
}

.delete-confirm-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  padding: 20rpx 24rpx;
  background: #f0f4ff;
  border-radius: 8rpx;
}

.delete-confirm-icon {
  width: 48rpx;
  height: 52rpx;
  flex-shrink: 0;
}

.delete-confirm-text {
  font-size: 28rpx;
  color: #1a1a1a;
}

.delete-modal-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  padding: 0 28rpx;
}

.delete-modal-footer .action-btn {
  flex: 1;
  height: 64rpx;
}

.commit-modal {
  width: 620rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  padding-bottom: 28rpx;
  box-sizing: border-box;
}

.commit-modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx 20rpx;
}

.commit-modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.commit-modal-close {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commit-close-icon {
  width: 28rpx;
  height: 28rpx;
}

.commit-modal-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
}

.commit-modal-body {
  padding: 24rpx 28rpx;
}

.commit-form-box {
  background: #f0f4ff;
  border-radius: 8rpx;
  padding: 32rpx 24rpx;
}

.commit-form-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
}

.commit-form-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  font-size: 28rpx;
  color: #1a1a1a;
}

.commit-required {
  color: #ff4d4f;
  margin-right: 4rpx;
}

.commit-select {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 64rpx;
  padding: 0 20rpx;
  background: #ffffff;
  border: 1rpx solid #2b7cff;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.commit-select-text {
  flex: 1;
  font-size: 26rpx;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commit-select-arrow {
  width: 0;
  height: 0;
  margin-left: 12rpx;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 12rpx solid #2b7cff;
  flex-shrink: 0;
}

.commit-modal-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  padding: 0 28rpx;
}

.commit-modal-footer .action-btn {
  flex: 1;
  height: 64rpx;
}

.detail-modal {
  width: 680rpx;
  max-height: 80vh;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.detail-modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx 20rpx;
  flex-shrink: 0;
}

.detail-modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.detail-modal-close {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-close-icon {
  width: 28rpx;
  height: 28rpx;
}

.detail-modal-divider {
  height: 1rpx;
  background: #eef0f4;
  margin: 0 24rpx;
  flex-shrink: 0;
}

.detail-modal-body {
  flex: 1;
  max-height: calc(80vh - 100rpx);
  padding: 24rpx 28rpx 28rpx;
  box-sizing: border-box;
}

.detail-section {
  margin-bottom: 32rpx;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section-title {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 18px 12px;
  background-image: url(/static/warndata/1-1.png);
  background-repeat: no-repeat;
  background-size: 100% 79%;
}

.detail-section-prefix {
  position: relative;
  z-index: 1;
  font-size: 28rpx;
  font-weight: 700;
  color: #2b7cff;
  margin-right: 8rpx;
  font-style: italic;
}

.detail-section-text {
  position: relative;
  z-index: 1;
  font-size: 22rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.detail-table-container {
  overflow-x: auto;
  border: 1rpx solid #b8d4ff;
  border-radius: 8rpx;
}

.detail-table {
  width: max-content;
  min-width: 100%;
  display: flex;
  flex-direction: column;
}

.detail-table-header,
.detail-table-row {
  display: flex;
  flex-direction: row;
}

.detail-table-header {
  background: #ffffff;
  height: 76rpx;
  border-bottom: 1rpx solid #bcd7fb;
  box-sizing: border-box;
}

.detail-table-header .detail-table-cell {
  color: #1a6dff;
  font-weight: 600;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rpx;
  border-right-color: #bcd7fb;
  border-bottom: none;
}

.detail-table-row {
  background: #ffffff;
}

.detail-table-cell {
  flex: 1;
  min-width: 140rpx;
  padding: 16rpx 12rpx;
  font-size: 24rpx;
  color: #333333;
  text-align: center;
  border-right: 1rpx solid #b8d4ff;
  border-bottom: 1rpx solid #b8d4ff;
  box-sizing: border-box;
  word-break: break-all;
}

.detail-table-cell:last-child {
  border-right: none;
}

.detail-table-row:last-child .detail-table-cell {
  border-bottom: none;
}

.detail-flowchart-wrap {
  background: #f0f5ff;
  border-radius: 8rpx;
  padding: 24rpx;
  overflow: hidden;
}

.detail-flowchart-img {
  width: 100%;
  display: block;
}
</style>