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"
            ></u-input>
          </view>
          <view class="search-actions">
            <view
              class="action-btn action-btn-outline"
              @click="pickershow = true"
            >
              <text class="action-btn-text">{{
                fileType ? fileType : "选择文件类型"
              }}</text>
            </view>
            <view class="action-btn action-btn-primary" @click="searchFile">
              <text class="action-btn-text">查询</text>
            </view>
            <u-picker
              :show="pickershow"
              :columns="fileTypeList"
              keyName="label"
              @cancel="pickershow = false"
              @confirm="selectFileType"
            ></u-picker>
          </view>
        </view>

        <view class="file-list">
          <u-list>
            <u-list-item v-for="(item, index) in fileData" :key="index">
              <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">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/文件来源.svg"
                        mode="aspectFit"
                      ></image>
                    </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">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/审批状态.svg"
                        mode="aspectFit"
                      ></image>
                    </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">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/创建人.svg"
                        mode="aspectFit"
                      ></image>
                    </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">
                      <image
                        class="file-info-icon"
                        src="/static/filecenter/上传时间.svg"
                        mode="aspectFit"
                      ></image>
                    </view>
                    <view class="file-info-content">
                      <text class="file-info-value">{{ item.createTime }}</text>
                      <text class="file-info-label">上传时间</text>
                    </view>
                  </view>
                </view>
              </view>
            </u-list-item>
          </u-list>
          <!-- 审批详情 -->
          <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-prefix">//</text>
                    <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-prefix">//</text>
                    <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/关闭.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/删除.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>
  </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",
  watch: {},
  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,
    };
  },
  mounted() {
    this.getFileInfo();
  },
  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 : "请选择审批";
    },
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
        fail() {
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
      });
    },
    // 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;
      if (this.curNow === 0) {
        // 如果选择了“全部”，返回所有文件
        this.bpmStatus = "";
        this.getFileInfo();
      } else if (this.curNow === 1) {
        // 否则，根据curNow的值过滤文件
        this.bpmStatus = 1;
        this.getFileInfo();
      } else if (this.curNow === 2) {
        this.bpmStatus = 2;
        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);
          });
      });
    },
    getFileInfo() {
      var params = {
        bpmStatus: this.bpmStatus,
        column: "createTime",
        fileSuffix: this.fileType,
        likeFileName: this.fileName,
        pageNo: 1,
        pageSize: 10000,
        parentId: "",
        selectFlag: true,
        sysOrgCode: "",
      };
      new Promise((resolve, reject) => {
        api
          .getFileInfo(params)
          .then((response) => {
            if (response.data.code == 200) {
              this.fileData = response.data.result.records;
            } else {
              reject(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
    //查看文件内容
    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.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 {
//   min-height: 100vh;
//   background: linear-gradient(180deg, #c8d8f8 0%, #f4f7fd 280rpx, #f4f7fd 100%);
// }

.file-page-content {
  padding-top: 50px;
  // min-height: calc(100vh - 50px);
}

.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 {
  height: calc(100vh - 138px);
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  // overflow-y: auto;
}

.search-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.search-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}

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

.search-input {
  flex: 1;
  height: 72rpx;
  padding: 0 24rpx !important;
  border-radius: 12rpx;
  background: #eef5ff !important;
}

.search-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
}

.file-list {
  width: 100%;
  height: calc(100% - 118px);
  overflow-y: auto;
}

.file-card {
  background: #f8fbff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.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;
}

.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(
    135deg,
    rgba(175, 195, 252, 0.55) 0%,
    rgba(238, 245, 255, 0.35) 100%
  );
}

.file-info-icon-box {
  width: 56rpx;
  height: 56rpx;
  border-radius: 10rpx;
  background: linear-gradient(135deg, #4d9dff 0%, #2b7cff 100%);
  box-shadow: 0 4rpx 10rpx rgba(43, 124, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12rpx;
}

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

.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: 40rpx 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: 8rpx 0 20rpx;
}

.detail-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 28rpx;
  background: linear-gradient(
    90deg,
    rgba(43, 124, 255, 0.18) 0%,
    rgba(43, 124, 255, 0) 75%
  );
  border-radius: 4rpx;
  z-index: 0;
}

.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: 28rpx;
  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: #e8f1ff;
}

.detail-table-header .detail-table-cell {
  color: #2b7cff;
  font-weight: 600;
  background: #e8f1ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.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>