Authored by 王涛

文档管理前端以及文档

文档管理组件
1、预览模式 浏览器参数docId(不展示左侧树)
... ...
表格组件,组件参数:
// 展示分页
showPage: {
type: Boolean,
default: true
},
showBorder: {
type: Boolean,
default: true
},
// 高度
height: {
type: Number,
default: window.innerHeight
},
// 展示下标
showIndex: {
type: Boolean,
default: true
},
indexLabel: {
type: String,
default: '序号'
},
currentPage: {
type: Number,
default: 1
},
// 分页页码设置
pageSizes: {
type: Array,
default: [50,100, 200, 300, 400]
},
// 默认展示
pageSize: {
type: Number,
default: 100
},
// 总数
total: {
type: Number,
default: 0
},
// 展示组件
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
},
// 列
columns: {
type: Array,
default: []
},
// 数据
dataList: {
type: Array,
default: []
},
// 加载
loading:{
type: Boolean,
default: false
},
--------------------------------------------------------------------
columns参数说明:
// 单元绑定数据key
prop: 'fileName',
// 表头展示名称
label: '文档名称',
sortable:true,
// 对其方式 left center right
align:'left',
click:function (row) {
// 单元格点击出发的函数 row,当前行的数据
},
render:function (row){
// 表格个性化展示,返回html
return html;
}
... ...
... ... @@ -6,9 +6,10 @@
<div style="text-align: left;padding-left: 10px;padding-top: 3px;font-weight: bold">
<el-link type="info" :underline="false"><i class="iconfont icon-ziliaoku"></i> 文档管理</el-link>
</div>
<!--:default-expanded-keys="[currentNodeData.id]"-->
<el-tree ref="tree" style="padding:6px;" :props="props" :data="treeData" node-key="id"
:expand-on-click-node="false" :expand-on-click-node="true"
:default-expanded-keys="[defaultKeys]" >
>
<template #default="{ node, data }">
<div style="display: flex;flex-direction: row;width: 100%;">
<div style="width: calc(100% - 85px);max-width: calc(100% - 85px);overflow: hidden;text-overflow: ellipsis;text-align: left;" @click="nodeClick(node, data)" :title="node.label">
... ... @@ -35,11 +36,11 @@
<el-input v-model="keyWord" placeholder="请输入关键字" :size="$global.elementSize"
style="width: 220px;margin-right:10px" clearable/>
<el-button icon="el-icon-search" :size="$global.elementSize" @click="searchFile">搜索</el-button>
<el-button :size="$global.elementSize" @click="showUserDialog(true)">
<el-button :size="$global.elementSize" @click="showUserDialog(true)" v-if="!isView">
<i class="iconfont icon-icon--quanxian"></i>
授权
</el-button>
<el-button :size="$global.elementSize" @click="uploadFile">
<el-button :size="$global.elementSize" @click="downloadFile">
<i class="iconfont icon-icon--download"></i>
下载
</el-button>
... ... @@ -47,6 +48,10 @@
<i class="iconfont icon-icon--shangchuan"></i>
上传
</el-button>
<el-button type="danger" :size="$global.elementSize" @click="deleteDocument('','file')">
<i class="iconfont icon-shanchuwenjianjia"></i>
删除
</el-button>
</div>
<div style="text-align: right;width: 150px">
<el-button-group>
... ... @@ -130,5 +135,7 @@
<cm-userright :showDialogVisible="showUserDialogVisible" :users="userFileRight.usernames" @callback="selectUser"
@hideDialog="showUserDialog"></cm-userright>
<cm-upload :showDialogVisible="showUploadDialogVisible" @callback="uploadCallBack" @hideDialog="showUploadFile(false)"></cm-upload>
<cm-upload :showDialogVisible="showUploadDialogVisible" @callback="uploadCallBack" @hideDialog="showUploadFile"
:type="currentNodeData.docType" :docNo="currentNodeData.docNo"
:category="currentNodeData.id"></cm-upload>
</div>
... ...
... ... @@ -5,7 +5,25 @@ export default {
name: 'DocumentIndex',
template: '',
components: {},
props: {},
props: {
// 展示文档类型,默认展示类型
types: {
type: Array,
default: ['fxbg', 'gf', 'gzgl', 'jkjc', 'lxwh', 'pzgl', '', 'rcxj']
},
// 是否是预览模式
// 预览模式不展示授权按钮
isView: {
type: Boolean,
default: false
},
// 文件类型id(展示该类型下的文件信息)
// 是否是预览模式 == true,viewDocId,必须传入
viewTypeId: {
type: String,
default: ''
}
},
data() {
return {
props: {
... ... @@ -23,10 +41,9 @@ export default {
}
}
},
setup() {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight - 20);
let defaultKeys = Vue.ref('');
let iconclass = {
'folder': 'icon-wenjianjia',
'docx': 'icon-word-full',
... ... @@ -133,13 +150,14 @@ export default {
// 加载列表
proxy.$http.get("/inspection-report/doc/type/tree", {}, function (res) {
if (res && res.data) {
treeData.value = res.data;
currentNodeData.value = res.data[0];
let firstId = res.data[0].id;
defaultKeys.value = firstId;
let first = res.data[0];
currentNodeData.value = first;
// 加载所有
getPage('');
getPage('0');
}
})
}
... ... @@ -149,10 +167,10 @@ export default {
let params = {
id: id,
name: keyWord.value,
types:null
types: props.types.join(',')
}
// 加载列表
proxy.$http.get(`/inspection-report/file/file/documentPage`, params, function (res) {
proxy.$http.get(`/inspection-report/file/document/list`, params, function (res) {
if (res && res.data) {
dataList.value = res.data;
}
... ... @@ -179,34 +197,52 @@ export default {
}
// 刷新
let reload = () => {
let reload = (loadTree) => {
// 属性tree
setTimeout(function () {
let id = currentNodeData.value.id;
getPage(id);
getTree();
if(loadTree && loadTree == true){
getTree();
}
}, 1000)
}
/**
* 删除文档
* 将文档放入回收站
* @param id 文档id
* @param type 文件夹或者文档
*/
let deleteDocument = (id, type) => {
let params = null;
let msg = "您确认删除该文件?";
if (type == 'folder') {
msg = "您确认删除该文件以及文件下的文件?";
params = {id: id, type: type}
} else {
// 删除文件
let arr = getCheckedFile();
let info = [];
arr.map(function (v) {
info.push({
id:v.id,
type:v.type
})
})
params = info;
}
proxy.$global.confirm(msg, function () {
debugger
// ok
proxy.$http.get(`/inspection-report/file/file/delete`, {id: id, type: type}, function (res) {
proxy.$http.post(`/inspection-report/file/change`,params , function (res) {
if (res && res.code == 0) {
proxy.$global.showMsg('删除成功!');
reload();
reload(false);
}
})
... ... @@ -253,7 +289,7 @@ export default {
})
// 属性tree
reload();
reload(true);
showFolder(false);
} else {
console.log('error submit!!')
... ... @@ -267,44 +303,31 @@ export default {
*/
let searchFile = () => {
getPage('');
// let id = currentNodeData.value.id;
// if (id) {
// getPage(id);
// } else {
// // 浏览器地址传文档id参数
// let docId = proxy.$global.getQueryVariable('docId');
// if (docId) {
// getPage(docId);
// } else {
// proxy.$global.showMsg('请选择文档类型!', 'warning');
// }
// }
}
// 用户授权
let showUserDialogVisible = Vue.ref(false);
let userFileRight = Vue.ref({}); // {roleIds: ["1"], usernames: ["admin"]}
let getCheckedFile = () => {
let arr = dataList.value.filter(function (v){
if(v.checked != undefined && v.checked == true){
let arr = dataList.value.filter(function (v) {
if (v.checked != undefined && v.checked == true) {
return v;
}
})
if(arr.length == 0){
proxy.$global.showMsg('请选择需要授权的文档!', 'warning');
if (arr.length == 0) {
proxy.$global.showMsg('请选择需要操作的文档!', 'warning');
return;
}
if(arr.length == 1){
if (arr.length == 1) {
// 查询文件的权限
proxy.$http.get(`/inspection-report/doc/doc/auth/getGrant`, {docId:arr[0].id}, function (res) {
proxy.$http.get(`/inspection-report/doc/doc/auth/getGrant`, {docId: arr[0].id}, function (res) {
if (res && res.code == 0) {
let map = res.map;
if(map){
if (map) {
userFileRight.value = res.map;
}
}
... ... @@ -317,9 +340,9 @@ export default {
}
// 用户授权弹框
let showUserDialog = (flg) => {
if(flg){
if (flg) {
let arr = getCheckedFile();
if(arr && arr.length > 0){
if (arr && arr.length > 0) {
showUserDialogVisible.value = flg;
}
} else {
... ... @@ -338,16 +361,16 @@ export default {
return v.code;
});
let docIds = getCheckedFile().map(function (v){
let docIds = getCheckedFile().map(function (v) {
return v.id;
});
// 保存用户权限
let params = {
docIds:docIds.join(','),
roleIds:roleCodes.join(','),
usernames:userIds.join(',')
docIds: docIds.join(','),
roleIds: roleCodes.join(','),
usernames: userIds.join(',')
}
proxy.$http.get(`/inspection-report/doc/doc/auth/grant`, params, function (res) {
if (res && res.code == 0) {
... ... @@ -368,7 +391,34 @@ export default {
let showUploadFile = (flg) => {
showUploadDialogVisible.value = flg;
}
let uploadCallBack = () =>{
let uploadCallBack = ({document,fileInfo}) => {
reload(false);
console.log(111111111111,document,fileInfo);
}
/**
* 文件下载
*/
let downloadFile = () =>{
let arr = getCheckedFile();
let info = [];
arr.map(function (v) {
// info.push({
// id:v.id,
// type:v.type
// })
info.push(`${v.id}__${v.type}`);
})
let params = {
info : info.join(","),
fileName:''
}
proxy.$http.downloadFile('/inspection-report/file/download',params);
}
... ... @@ -377,21 +427,20 @@ export default {
* 挂载完
*/
Vue.onMounted(() => {
// 参数是否传文档id
let docId = proxy.$global.getQueryVariable('docId');
if (!docId) {
// 预览模式 不展示左侧树
if (!props.isView) {
getTree();
} else {
layout.value = {
left: 0,
right: 24
}
getPage(docId);
getPage(props.viewTypeId);
}
})
return {
/* viewEdit,*/
/* viewEdit,*/
iconclass,
layout,
height,
... ... @@ -400,7 +449,6 @@ export default {
columns,
dataList,
total,
defaultKeys,
nodeClick,
keyWord,
searchFile,
... ... @@ -408,6 +456,9 @@ export default {
activeBtn,
activeModel,
deleteDocument,
uploadCallBack,
downloadFile,
currentNodeData,
docForm,
... ...
... ... @@ -18,9 +18,9 @@
<i class="el-icon-chat-round"></i>
</el-tooltip>
<template #tip>
<!-- <div class="el-upload__tip">-->
<!-- 文件命名规范建议:以文档编号+"-" 开头,如:3101-基本信息.xls-->
<!-- </div>-->
<div class="el-upload__tip" v-if="tips != null && tips != ''">
{{tips}}
</div>
</template>
</el-upload>
</template>
... ...
... ... @@ -18,6 +18,25 @@ export default {
type: String,
default: ''
},
// 文件分类
type: {
type: String,
default: ''
},
// 父级Id
category: {
type: String,
default: ''
},
// 文档编号
docNo: {
type: String,
default: ''
},
tips: {
type: String,
default: ''
},
accept: {
type: String,
default: [".3gpp",
... ... @@ -85,8 +104,22 @@ export default {
emit('hideDialog', false);
}
let getFile = (param) =>{
console.log(param)
let fileObj = param.file
let params = {
file:fileObj,
type:props.type,
category:props.category,
docNo:props.docNo
}
// 上传文件
proxy.$http.uploadFile("/inspection-report/file/upload", params, function (res) {
if (res && res.code == 0) {
proxy.$global.showMsg(res.msg);
// 调用回调
emit('callback',res.object)
hidedialog();
}
})
}
// 上传按钮点击
... ...
let http = {
proxy: null,
isJson: function(obj) {
var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() ==
"[object object]" &&
!obj.length;
return isjson;
},
reqErr : function(status){
if(status && status == '401'){
// 登录超时,刷新当前页面===>跳转到登录页面
proxy: null,
isJson: function (obj) {
var isjson = typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() ==
"[object object]" &&
!obj.length;
return isjson;
},
reqErr: function (status) {
if (status && status == '401') {
// 登录超时,刷新当前页面===>跳转到登录页面
window.location.reload();
}
},
post: function(requestUrl, data, callback) {
if(http.proxy == null){
const { proxy } = Vue.getCurrentInstance()
http.proxy = proxy;
}
}
},
post: function (requestUrl, data, callback) {
if (http.proxy == null) {
const {proxy} = Vue.getCurrentInstance()
http.proxy = proxy;
}
const loading = http.proxy.$global.showLoading();
var access_token = 'access_token=' + http.getToken();
if (requestUrl.indexOf('?') == -1) {
requestUrl += '?' + access_token;
} else {
requestUrl += '&' + access_token;
}
$.ajax({
url: sessionStorage.getItem('domainName') + requestUrl,
method: "post",
processData: false,
contentType: "application/json;charset=UTF-8",
dataType: "JSON",
async: true,
data: JSON.stringify(data),
error: function(xhr, textStatus) {
loading.close();
console.log("==>",requestUrl, xhr, textStatus)
const loading = http.proxy.$global.showLoading();
var access_token = 'access_token=' + http.getToken();
if (requestUrl.indexOf('?') == -1) {
requestUrl += '?' + access_token;
} else {
requestUrl += '&' + access_token;
}
$.ajax({
url: sessionStorage.getItem('domainName') + requestUrl,
method: "post",
processData: false,
contentType: "application/json;charset=UTF-8",
dataType: "JSON",
async: true,
data: JSON.stringify(data),
error: function (xhr, textStatus) {
loading.close();
console.log("==>", requestUrl, xhr, textStatus)
http.reqErr(textStatus.status);
},
success: function(data, textStatus, jqXHR) {
if (callback) {
callback(data);
}
loading.close()
//console.log("==>", requestUrl, jqXHR, textStatus)
},
success: function (data, textStatus, jqXHR) {
if (callback) {
callback(data);
}
loading.close()
//console.log("==>", requestUrl, jqXHR, textStatus)
}
});
}
});
},
get: function(requestUrl, data, callback,errFunc) {
if(http.proxy == null){
const { proxy } = Vue.getCurrentInstance()
http.proxy = proxy;
}
const loading = http.proxy.$global.showLoading();
var access_token = 'access_token=' + http.getToken();
if (requestUrl.indexOf('?') == -1) {
requestUrl += '?' + access_token;
} else {
requestUrl += '&' + access_token;
}
$.ajax({
url: sessionStorage.getItem('domainName') + requestUrl,
method: "get",
headers: {
"Authorization": "Bearer " + http.getToken() + ""
},
data: data,
error: function(xhr, textStatus) {
loading.close();
console.log("==>",requestUrl, xhr, textStatus)
},
get: function (requestUrl, data, callback, errFunc) {
if (http.proxy == null) {
const {proxy} = Vue.getCurrentInstance()
http.proxy = proxy;
}
const loading = http.proxy.$global.showLoading();
var access_token = 'access_token=' + http.getToken();
if (requestUrl.indexOf('?') == -1) {
requestUrl += '?' + access_token;
} else {
requestUrl += '&' + access_token;
}
$.ajax({
url: sessionStorage.getItem('domainName') + requestUrl,
method: "get",
headers: {
"Authorization": "Bearer " + http.getToken() + ""
},
data: data,
error: function (xhr, textStatus) {
loading.close();
console.log("==>", requestUrl, xhr, textStatus)
http.reqErr(textStatus.status);
if(errFunc){
errFunc();
}
if (errFunc) {
errFunc();
}
},
success: function (data, textStatus, jqXHR) {
if (callback) {
callback(data);
}
loading.close();
//console.log("==>", requestUrl, jqXHR, textStatus)
}
});
},
},
success: function(data, textStatus, jqXHR) {
if (callback) {
callback(data);
}
loading.close();
//console.log("==>", requestUrl, jqXHR, textStatus)
}
});
},
uploadFile(requestUrl, parmas,callback) {
if (http.proxy == null) {
const {proxy} = Vue.getCurrentInstance()
http.proxy = proxy;
}
const loading = http.proxy.$global.showLoading();
var access_token = 'access_token=' + http.getToken();
if (requestUrl.indexOf('?') == -1) {
requestUrl += '?' + access_token;
} else {
requestUrl += '&' + access_token;
}
downloadFile(fileName, content) {
var filename = fileName;
var a = document.createElement('a')
var blob = new Blob([content])
a.download = filename
a.href = URL.createObjectURL(blob)
a.click()
URL.revokeObjectURL(blob)
},
getToken() {
return localStorage.getItem('access_token');
},
var formData = new FormData();
(function (ps) {
Object.keys(ps).map(_ => formData.append(_, ps[_]) );
})(parmas);
// showMsg(msg, type = 'success') {
// ElementPlus.ElMessage.success({
// message: msg,
// type: type,
// })
// },
$.ajax({
url: sessionStorage.getItem('domainName') + requestUrl,
type: 'POST',
processData: false,
mimeType: "multipart/form-data",
contentType: false,
async: false,
data: formData,
error: function (xhr, textStatus) {
loading.close();
console.log("==>", requestUrl, xhr, textStatus)
http.reqErr(textStatus.status);
},
success: function (data, textStatus, jqXHR) {
if (callback) {
let d = data;
try {
d = JSON.parse(data);
}catch (e) {
console.log(e);
}
callback(d);
}
loading.close()
}
});
},
// showLoading(callback) {
// const loading = ElementPlus.ElLoading.service({
// lock: true,
// text: '加载中...',
// spinner: 'el-icon-loading',
// background: 'rgba(0, 0, 0, 0.7)',
// });
downloadFile(requestUrl, parmas) {
var access_token = 'access_token=' + http.getToken();
if (requestUrl.indexOf('?') == -1) {
requestUrl += '?' + access_token;
} else {
requestUrl += '&' + access_token;
}
let formart = function (ps) {
const keys = Object.keys(ps).map(_ => `${_}=${ps[_]}`).join('&');
return `${keys}`;
}
let p = formart(parmas);
debugger
window.open(sessionStorage.getItem('domainName') + requestUrl + "&" + p);
// if (callback) {
// callback(loading);
// }
// return loading;
// }
},
getToken() {
return localStorage.getItem('access_token');
},
}
export default http
... ...