Vent-App/pages/filecenter/filecenter.vue

<template name="filecenter">
  <view>
    <u-navbar
      title="文件中心"
      :bgStatusImage="backPic0"
      :bgImage="backPic"
      :safeAreaInsetTop="true"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="list" size="20"> </u-icon>
      </view>
    </u-navbar>
    <!-- <view v-if="menushow" class="menupage">
      <FileTreeMenu @menuClick="menuClick"></FileTreeMenu>
    </view> -->
    <view v-if="!menushow" class="container">
      <view class="main">
        <view style="margin-top: 40px">
          <u-subsection
            :list="sectionList"
            mode="button"
            :current="curNow"
            @change="sectionChange"
            :animation="true"
            bg-color="#3c9cff"
            button-color="#3c9cff"
            active-color="#000"
            inactive-color="#000"
          ></u-subsection>
        </view>
        <view class="searchArea">
          <view class="fileArea">
            <view style="margin-top: 15px; margin-left: 10px" class="fileTitle"
              >文件名称</view
            >
            <u-input
              style="margin-top: 15px; margin-right: 15px"
              v-model="fileName"
              type="text"
              class="fileInput"
            ></u-input
          ></view>
          <view class="pickerArea">
            <view class="btns">
              <u-button
                class="fileBtn"
                style="margin: 15px"
                type="primary"
                :text="fileType ? fileType : '选择文件类型'"
                @click="pickershow = true"
              ></u-button>
              <u-button
                class="fileBtn"
                style="margin: 15px"
                type="primary"
                @click="searchFile"
                >查询</u-button
              >
            </view>
            <u-picker
              :show="pickershow"
              :columns="fileTypeList"
              keyName="label"
              @cancel="pickershow = false"
              @confirm="selectFileType"
            ></u-picker>
          </view>
        </view>
        <view class="u-page">
          <u-list>
            <u-list-item
              class="itemback"
              v-for="(item, index) in fileData"
              :key="index"
            >
              <view class="content flcard" @tap="openFile(item)">
                <view
                  class="demo-layout bg-purple-light"
                  style="margin-bottom: 20rpx"
                >
                  <view style="margin-top: 10rpx">
                    <text class="text-style1">{{ item.fileName }}</text>
                  </view>
                </view>
                <view class="btnClass" style="margin-bottom: 30rpx">
                  <u-button
                    class="btn"
                    type="primary"
                    shape="circle"
                    text="审批详情"
                    @click="detailmodal(item)"
                  ></u-button>
                  <u-button
                    class="btn"
                    type="primary"
                    shape="circle"
                    text="提交"
                    @click="commitmodal(item)"
                  ></u-button>
                  <u-button
                    class="btn"
                    type="primary"
                    shape="circle"
                    text="撤回"
                    @click="retractmodal(item)"
                  ></u-button>
                  <u-button
                    class="btn"
                    type="primary"
                    shape="circle"
                    text="下载"
                    @click="download(item)"
                  ></u-button>
                  <u-button
                    class="btn"
                    type="primary"
                    shape="circle"
                    text="删除"
                    @click="showmodal(item)"
                  ></u-button>
                </view>
                <view class="datacard laiyuan">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.fileSource }}</text>
                  </view>
                  <view class="text-info">文件来源</view>
                </view>
                <view class="datacard zhuangtai">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{
                      item.bpmStatus_dictText
                    }}</text>
                  </view>
                  <view class="text-info">审批状态</view>
                </view>
                <view class="datacard user">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.createBy }}</text>
                  </view>
                  <view class="text-info">创建人</view>
                </view>
                <view class="datacard time">
                  <view style="margin: 20rpx 20rpx">
                    <text class="text-style">{{ item.createTime }}</text>
                  </view>
                  <view class="text-info">上传时间</view>
                </view>
              </view>
            </u-list-item>
          </u-list>
          <!-- 审批详情 -->
          <u-popup
            :show="detailShow"
            :closeable="true"
            :round="10"
            mode="bottom"
            @close="detailClose"
          >
            <view>
              <view class="title">
                <span class="firetext">流程审批进度历史</span>
              </view>
              <view class="table-container">
                <view class="table">
                  <view class="table-header">
                    <view class="table-cell">序号</view>
                    <view class="table-cell">当前环节</view>
                    <view class="table-cell">审批人</view>
                    <view class="table-cell">审批结果</view>
                    <view class="table-cell">审批开始时间</view>
                    <view class="table-cell">审批结束时间</view>
                    <view class="table-cell">处理意见</view>
                    <view class="table-cell">状态</view>
                    <!-- ... 根据需要添加更多表头 -->
                  </view>
                  <view
                    class="table-row"
                    v-for="(item, index) in tableData"
                    :key="index"
                  >
                    <view class="table-cell"
                      ><template>
                        <span>{{ index + 1 }}</span>
                      </template></view
                    >
                    <view class="table-cell">{{ item.name }}</view>
                    <view class="table-cell">
                      <template>
                        <span
                          v-if="item.assignees && item.assignees.length > 0"
                        >
                          {{ item.assignees[0].username }}
                        </span>
                        <!-- 如果没有审批人，可以显示空或占位符 -->
                        <span v-else> - </span>
                      </template></view
                    >
                    <view class="table-cell">{{ item.deleteReason }}</view>
                    <view class="table-cell">{{ item.createTime }}</view>
                    <view class="table-cell">{{ item.endTime }}</view>
                    <view class="table-cell">{{ item.comment }}</view>
                    <view class="table-cell">
                      <template>
                        <span v-if="item.assignees[0].isExecutor">
                          已处理
                        </span>
                        <!-- 如果没有审批人，可以显示空或占位符 -->
                        <span v-else> 待处理</span>
                      </template></view
                    >
                    <!-- ... 根据需要添加更多单元格 -->
                  </view>
                </view>
              </view>
            </view>
            <view>
              <view class="title">
                <span class="firetext">实时流程图</span>
              </view>
              <image style="width: 100%" :src="imageUrl" alt="" />
            </view>
          </u-popup>
          <!-- 删除 -->
          <u-modal
            :show="show"
            :showCancelButton="true"
            :showConfirmButton="true"
            :content="content"
            @confirm="confirm"
            @cancel="cancel"
          ></u-modal>
          <!-- 提交 -->
          <u-picker
            :show="commitShow"
            :columns="[columns]"
            title="选择审批"
            @confirm="confirmCommit"
            @cancel="cancelCommit"
          ></u-picker>
          <!-- 撤回 -->
          <u-popup
            :show="showretract"
            :closeable="true"
            :round="10"
            mode="bottom"
            @close="close"
          >
            <view>
              <u--textarea
                v-model="value1"
                placeholder="请输入撤回原因"
              ></u--textarea>
            </view>
            <view class="button-container">
              <u-button @click="cancelRetract" class="fileBtn" shape="circle"
                >取消</u-button
              >
              <u-button
                @click="confirmRetract"
                class="fileBtn"
                shape="circle"
                type="primary"
                >确认</u-button
              >
            </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
      content: "确定要删除吗？",
      selectItem: "", //选择文件
      showretract: false, //撤回popup
      value1: "", //撤回原因
      cancelItem: "", //撤回文件
      detailShow: false, //详情
      notifyShow: false, //撤回文件提示消息显示
      commitShow: false, //提交
      columns: [],
      commitItem: "", //提交文件
      selectFile: [],
      tableData: [], //审批内容
      detailItem: "", //详情文件
      imageUrl: "",
      fileName: "", //文件名称搜索框
      menushow: false,
    };
  },
  mounted() {
    this.getFileInfo();
  },
  computed: {},
  methods: {
    // 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.showretract = true;
      this.cancelItem = data;
    },
    close() {
      this.showretract = false;
    },
    cancelRetract() {
      this.showretract = false;
    },
    confirmRetract() {
      this.value1 = "";
      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.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.selectFile.forEach((item) => {
                this.columns.push(item.id);
                console.log(this.columns);
              });
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    confirmCommit() {
      var fileiId = this.commitItem.id;
      var reqDefId = 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.getFileInfo();
            } else {
              // console.log("请求下载文件失败：", err);
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    cancelCommit() {
      this.commitShow = false;
    },
  },
};
</script>

<style scoped>
.fileBtn {
  background: linear-gradient(to right, #338afe, #07b4ff, #338afe);
  border-radius: 5px;
}
.fileInput {
  border: 1px solid #2a94ff !important;
}
.text-info {
  margin: 20rpx 20rpx;
  font-size: 14px;
  font-weight: 500;
  color: #657497;
}
.fileTitle {
  margin-right: 20px;
  line-height: 40px;
}
.fileArea,
.pickerArea {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.searchArea {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  margin-bottom: 10rpx;
}
.btns {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px; /* 根据需要调整 */
}
button {
  /* 样式可以根据需要自定义 */
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.container {
  margin-top: 30px;
}
.main {
  display: flex;
  flex-direction: column;
}

.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 10rpx;
  display: flex;
}
.btnClass {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}
.btn {
  background: linear-gradient(to right, #338afe, #07b4ff, #338afe);
  border-radius: 5px;
  border-radius: 10rpx;
  margin-right: 10rpx; /* 示例：添加一些右外边距，但确保它不会导致换行 */
}
/* 最后一个按钮不需要右外边距 */
.btn:last-child {
  margin-right: 0;
}
.text-style {
  color: #3787fe;
  font-size: 16px;
  font-weight: bold;
}
.text-style1 {
  color: #000000;
  font-size: large;
  font-weight: bold;
}
.datacard {
  width: 48%;
  margin: 1%;
  float: left;
  height: 120rpx;
  border-radius: 10px;
}
.time {
  background: url(/static/filecenter/time.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.laiyuan {
  background: url(/static/filecenter/laiyuan.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.user {
  background: url(/static/filecenter/user.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.zhuangtai {
  background: url(/static/filecenter/zhuangtai.png),
    linear-gradient(
      to right,
      rgba(55, 135, 254, 0.08),
      rgba(4, 184, 255, 0.08),
      rgba(60, 161, 237, 0.08)
    );
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.datacard1 {
  width: 100%;
  margin: 1%;
  float: left;
  height: 100rpx;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    rgba(55, 135, 254, 0.08),
    rgba(4, 184, 255, 0.08),
    rgba(60, 161, 237, 0.08)
  );
}
.title {
  width: 100%;
  height: 50rpx;
  background: url(/static/warndata/title.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex; /* 将父级元素设置为 Flex 容器 */
  align-items: center; /* 垂直居中子元素 */
}
.firetext {
  margin: 20px;
  font-weight: bold;
}
.custom-header-class {
  background-color: #f8f8f8;
  color: #333;
}

.table-container {
  overflow-x: auto; /* 允许横向滚动 */
}
.table {
  width: 100%;
  margin: 10px;
  width: max-content; /* 或者设置一个足够大的宽度以容纳所有列 */
  display: flex;
  flex-direction: column;
}
.table-header,
.table-row {
  display: flex; /* 启用Flex布局 */
}

.table-cell {
  padding: 8px;
  flex: 1;
  text-align: center;
  border: 1px solid #ccc; /* 底部边框 */
}
</style>