档案管理
This commit is contained in:
parent
dee3cf77e6
commit
8eb6eca7c7
|
|
@ -39,6 +39,7 @@
|
|||
"jsencrypt": "3.0.0-rc.1",
|
||||
"lodash": "^4.17.21",
|
||||
"nprogress": "0.2.0",
|
||||
"pdfjs-dist": "^5.4.149",
|
||||
"quill": "2.0.2",
|
||||
"screenfull": "5.0.2",
|
||||
"sm-crypto": "^0.3.13",
|
||||
|
|
@ -47,6 +48,7 @@
|
|||
"vue": "2.6.12",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.5",
|
||||
"vue-pdf": "^4.3.0",
|
||||
"vue-router": "3.4.9",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.0"
|
||||
|
|
|
|||
|
|
@ -256,7 +256,7 @@ export default {
|
|||
return false
|
||||
}
|
||||
if (!isValidSize) {
|
||||
this.$message.error('文件大小不能超过10MB！')
|
||||
this.$message.error('文件大小不能超过`${this.maxFileTips}`！')
|
||||
return false
|
||||
}
|
||||
|
||||
|
|
@ -275,8 +275,6 @@ export default {
|
|||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/bmp'
|
||||
]
|
||||
return allowedTypes.includes(file.type)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
@click="handleAdd" :disabled="addBtnIsShow">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['file:manage:add']"
|
||||
@click="viewFile">
|
||||
预览文件
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button plain size="mini" type="success" icon="el-icon-warning-outline" v-hasPermi="['file:manage:query']"
|
||||
@click="handleDetail(data)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['file:manage:update']"
|
||||
@click="handleUpdate(data)">
|
||||
修改
|
||||
|
|
@ -32,6 +32,8 @@
|
|||
<!-- 新增/编辑 -->
|
||||
<AddTableData v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :width="600" :projectId="projectId" />
|
||||
<!-- 预览文件 -->
|
||||
<ViewFile v-if="isViewflag" :rowData="row" :title="title" @closeDialog="closeDialog" @showColose="showColose" :width="600" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -44,6 +46,7 @@ import {
|
|||
getFileManageApi,
|
||||
} from '@/api/archivesManagement/fileManager/fileManager.js'
|
||||
import AddTableData from './addTableData'
|
||||
import ViewFile from '@/views/viewFile/viewFile.vue'
|
||||
|
||||
|
||||
export default {
|
||||
|
|
@ -60,7 +63,8 @@ export default {
|
|||
},
|
||||
components: {
|
||||
TableModel,
|
||||
AddTableData
|
||||
AddTableData,
|
||||
ViewFile
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -69,6 +73,7 @@ export default {
|
|||
getFileManageApi,
|
||||
title: "",
|
||||
isflag: false,
|
||||
isViewflag: false,
|
||||
isAdd: '',
|
||||
row: {},
|
||||
loading: false,
|
||||
|
|
@ -85,14 +90,14 @@ export default {
|
|||
|
||||
closeDialog() {
|
||||
this.isflag = false;
|
||||
this.isViewflag = false;
|
||||
},
|
||||
showColose() {
|
||||
this.isflag = false;
|
||||
this.isViewflag = false;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
console.log(this.selectedNode);
|
||||
|
||||
this.title = "新增";
|
||||
this.isAdd = 'add';
|
||||
this.isflag = true;
|
||||
|
|
@ -112,14 +117,12 @@ export default {
|
|||
this.isflag = true;
|
||||
},
|
||||
|
||||
/** 详情操作 */
|
||||
handleDetail(row) {
|
||||
this.title = "详情";
|
||||
this.isAdd = 'detail';
|
||||
// 预览文件
|
||||
viewFile(row) {
|
||||
this.title = "预览";
|
||||
this.isAdd = 'view';
|
||||
this.row = row;
|
||||
this.row.belongName = this.selectedNode.label + '/' + this.selectedNode.parentName
|
||||
this.row.detailStatus = true;
|
||||
this.isflag = true;
|
||||
this.isViewflag = true;
|
||||
},
|
||||
/* 搜索操作 */
|
||||
handleQuery() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<!-- 预览文件 -->
|
||||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||
<div style="text-align:center">
|
||||
<!-- 图片预览 -->
|
||||
<template v-if="isImage">
|
||||
<el-image
|
||||
:src="fileUrl"
|
||||
:preview-src-list="previewList"
|
||||
fit="contain"
|
||||
style="max-width:100%;max-height:70vh"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<!-- PDF 预览 -->
|
||||
<template v-else>
|
||||
<pdf :src="fileUrl" style="width:100%;height:70vh" />
|
||||
</template>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import pdf from 'vue-pdf'
|
||||
|
||||
export default {
|
||||
name: 'ViewFile',
|
||||
props: ['width','hight','dataForm','title','disabled','isAdd','rowData','projectId'],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
fileUrl: '', // 实际文件地址
|
||||
fileName: '', // 用于从文件名判断类型
|
||||
previewList: [] // 预览组（可只放当前图片）
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isImage() {
|
||||
// 允许的图片类型
|
||||
const exts = ['.jpg','.jpeg','.png','.gif','.bmp','.webp']
|
||||
const url = (this.fileUrl || '').toLowerCase()
|
||||
const name = (this.fileName || '').toLowerCase()
|
||||
return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 从 rowData 或 dataForm 里取文件信息（根据你现有数据结构调整）
|
||||
// 例如：
|
||||
this.fileUrl = this.rowData?.fileUrl || this.dataForm?.fileUrl || ''
|
||||
this.fileName = this.rowData?.fileName || this.dataForm?.fileName || ''
|
||||
// 预览组（如果你有多张，可放数组；没有就放当前一张）
|
||||
if (this.isImage && this.fileUrl) {
|
||||
this.previewList = [this.fileUrl]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
},
|
||||
components: { pdf }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.w700 .el-dialog {
|
||||
width: 700px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog {
|
||||
width: 500px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog__header,
|
||||
.w700 .el-dialog__header {
|
||||
// background: #eeeeee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.yxq .el-range-separator {
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-style {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.image-slot {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #909399;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue