<template name="filecenter">
<view>
<u-navbar
title="文件中心"
:bgStatusImage="backPic0"
:bgImage="backPic"
:safeAreaInsetTop="true"
@leftClick="fileTreeShow"
>
<!-- <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 class="fileArea" style="margin-top: 28px">
<view style="margin-top: 15px; margin-left: 10px" class="fileTitle"
>文件名称</view
>
<u-input
style="margin-top: 15px; border-color: #2a94ff"
v-model="fileName"
type="text"
></u-input
></view>
<view class="pickerArea">
<view class="btns">
<u-button
style="margin: 15px"
type="primary"
:text="fileType ? fileType : '选择文件类型'"
@click="pickershow = true"
></u-button>
<u-button 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 class="u-page">
<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"
>
<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="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>
</view>
<view 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>
</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" 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>
</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: ".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;
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>
.fileTitle {
margin-right: 20px;
line-height: 40px;
}
.fileArea,
.pickerArea {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.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: 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>