Vent-App/pages/filecenter/filecenter.vue

<template name="filecenter">
  <view class="container">
    <u-navbar title="文件中心" :safeAreaInsetTop="true" leftIcon=""> </u-navbar>
    <view class="main">
      <u-subsection
        :list="sectionList"
        mode="subsection"
        :current="curNow"
        @change="sectionChange"
      ></u-subsection>
      <u-list>
        <u-list-item
          class="itemback"
          v-for="(item, index) in fileData"
          :key="index"
        >
          <div class="content flcard" @tab="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="datacard laiyuan">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.fileSource }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small"
                >文件来源</view
              >
            </view>
            <view class="datacard zhuangtai">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.bpmStatus_dictText }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small"
                >审批状态</view
              >
            </view>
            <view class="datacard user">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.createBy }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small">创建人</view>
            </view>
            <view class="datacard time">
              <view style="margin: 20rpx 20rpx">
                <text class="text-style">{{ item.createTime }}</text>
              </view>
              <view style="margin: 20rpx 20rpx; font-size: small"
                >上传时间</view
              >
            </view>
          </div>
          <div class="btnClass">
            <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>
          </div>
        </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">{{ item.status }}</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" shape="circle">取消</u-button>
          <u-button @click="confirmRetract" shape="circle" type="primary"
            >确认</u-button
          >
        </view>
      </u-popup>
      <u-notify
        message="只有审批中的数据才能撤回！"
        :show="notifyShow"
        :duration="1000"
      ></u-notify>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
import configService from "../../common/service/config.service";
export default {
  components: {},
  name: "filecenter",
  watch: {},
  data() {
    return {
      sectionList: [
        { name: "全部", code: 0 },
        { name: "待审批", code: 1 },
        { name: "已审批", code: 2 },
      ],
      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: "",
    };
  },
  mounted() {
    this.getFileInfo();
  },
  computed: {},
  methods: {
    sectionChange(newVal) {
      this.curNow = newVal;
      if (this.curNow === 0) {
        // 如果选择了“全部”，返回所有文件
        this.bpmStatus = "";
        this.getFileInfo(this.bpmStatus);
      } else if (this.curNow === 1) {
        // 否则，根据curNow的值过滤文件
        this.bpmStatus = 1;
        this.getFileInfo(this.bpmStatus);
      } else if (this.curNow === 2) {
        this.bpmStatus = 2;
        this.getFileInfo(this.bpmStatus);
      }
    },
    getFileInfo(code) {
      var params = {
        bpmStatus: code,
        column: "createTime",
        fileSuffix: "",
        likeFileName: "",
        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) {
              uni.downloadFile({
                url: response.config.baseUrl + response.config.url,
                success: function (res) {
                  console.log(res);
                  var filePath = res.tempFilePath;
                  uni.openDocument({
                    filePath: filePath,
                    success: function (res) {
                      console.log("打开文档成功");
                    },
                  });
                },
              });
              console.log(response);
            } 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>
.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;
}
.main {
  /* margin-top: 100rpx; */
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  margin-top: 80px; /* 内容区域顶部留出导航栏的高度 */
}

.itemback {
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 5rpx;
  display: flex;
}
.btnClass {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}
.btn {
  border-radius: 10rpx;
  margin-right: 10rpx; /* 示例：添加一些右外边距，但确保它不会导致换行 */
}
/* 最后一个按钮不需要右外边距 */
.btn:last-child {
  margin-right: 0;
}
.text-style {
  color: #3787fe;
  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>