前端问题修改
This commit is contained in:
parent
47fb3304f6
commit
15d86f9b7b
|
|
@ -11,8 +11,8 @@
|
|||
|
||||
<!-- 图片类型 -->
|
||||
<div v-else-if="imageUrl" class="image-display" @click="handleImageClick">
|
||||
<el-image :src="imageUrl" :preview-src-list="finalPreviewList" class="license-image"
|
||||
fit="cover" hide-on-click-modal>
|
||||
<el-image :src="imageUrl" :preview-src-list="finalPreviewList" class="license-image" fit="cover"
|
||||
hide-on-click-modal>
|
||||
<div slot="error" class="image-error">
|
||||
<i class="el-icon-picture"></i>
|
||||
<span>图片加载失败</span>
|
||||
|
|
@ -26,13 +26,34 @@
|
|||
|
||||
<!-- 空状态 -->
|
||||
<span v-else class="empty-text">--</span>
|
||||
<el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览">
|
||||
<OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle"
|
||||
:document-key="documentKey" :mode="mode" :type="type" @document-ready="handleDocumentReady"
|
||||
@app-ready="handleAppReady" @error="handleError" @initialized="handleInitialized" :force-save="true"
|
||||
:save-timeout="15000" />
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnlyOfficeViewer from './OnlyOfficeViewer';
|
||||
export default {
|
||||
name: 'FileOrImageDisplay',
|
||||
components: {
|
||||
OnlyOfficeViewer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
documentUrl: '',
|
||||
documentTitle: '',
|
||||
documentKey: '',
|
||||
mode: 'view',
|
||||
type: 'desktop',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
// 标签名称
|
||||
label: {
|
||||
|
|
@ -96,15 +117,27 @@ export default {
|
|||
methods: {
|
||||
// 文件点击事件
|
||||
handleFileClick() {
|
||||
/* if (this.filePath) {
|
||||
window.open(this.filePath, '_blank')
|
||||
}
|
||||
this.$emit('file-click', this.file) */
|
||||
this.documentUrl = this.file.filePath
|
||||
this.documentTitle = this.file.name
|
||||
this.documentKey = this.file.id + ''
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 图片点击事件
|
||||
handleImageClick() {
|
||||
this.$emit('image-click', this.imageUrl)
|
||||
}
|
||||
},
|
||||
handleDocumentReady() {
|
||||
console.log('文档已准备就绪')
|
||||
},
|
||||
handleAppReady() {
|
||||
console.log('应用已准备就绪')
|
||||
},
|
||||
handleError(error) {
|
||||
console.log('错误：', error)
|
||||
},
|
||||
handleInitialized() {
|
||||
console.log('初始化完成')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -220,4 +253,21 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-dialog ::v-deep .el-dialog {
|
||||
height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-dialog ::v-deep .el-dialog__body {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
/* 重要：让flex布局生效 */
|
||||
}
|
||||
|
||||
.preview-dialog ::v-deep .onlyoffice-container {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -184,7 +184,8 @@ export default {
|
|||
name: item.fileName,
|
||||
filePath: item.filePath,
|
||||
lsFilePath: item.lsFilePath,
|
||||
fileType: item.fileType
|
||||
fileType: item.fileType,
|
||||
id: item.sourceId
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@
|
|||
<template slot="tableTitle">
|
||||
<h3>数据列表</h3>
|
||||
</template>
|
||||
<template slot="technicalName" slot-scope="{ data }">
|
||||
<span style="color: #1F72EA;cursor: pointer;" @click="viewFile(data)">{{ data.technicalName }}</span>
|
||||
</template>
|
||||
<template slot="tableActions">
|
||||
<el-button @click="handleAdd" :disabled="disabled" v-hasPermi="['enterpriseLibrary:technical:add']"
|
||||
class="add-btn"><i class="el-icon-plus"></i> 新增</el-button>
|
||||
|
|
@ -28,6 +31,11 @@
|
|||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
<el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览">
|
||||
<OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle" :document-key="documentKey"
|
||||
:mode="mode" :type="type" @document-ready="handleDocumentReady" @app-ready="handleAppReady"
|
||||
@error="handleError" @initialized="handleInitialized" :force-save="true" :save-timeout="15000" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -36,11 +44,13 @@ import TableModel from '@/components/TableModel2'
|
|||
import { columnsList, formLabel } from './config'
|
||||
import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/technical/technical'
|
||||
import { encryptWithSM4 } from '@/utils/sm'
|
||||
import OnlyOfficeViewer from '@/views/common/OnlyOfficeViewer'
|
||||
|
||||
export default {
|
||||
name: 'RightTableTechnical',
|
||||
components: {
|
||||
TableModel,
|
||||
OnlyOfficeViewer
|
||||
},
|
||||
dicts: ['construction_nature', 'structural_form', 'basic_form'],
|
||||
props: {
|
||||
|
|
@ -58,6 +68,12 @@ export default {
|
|||
formLabel,
|
||||
columnsList,
|
||||
listAPI,
|
||||
dialogVisible: false,
|
||||
documentUrl: '',
|
||||
documentTitle: '',
|
||||
documentKey: '',
|
||||
mode: 'view',
|
||||
type: 'desktop',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -138,6 +154,25 @@ export default {
|
|||
handleQuery() {
|
||||
this.$refs.technicalTableRef.getTableList()
|
||||
},
|
||||
/** 查看文件 */
|
||||
viewFile(row) {
|
||||
console.log(row);
|
||||
this.documentTitle = row.technicalName
|
||||
this.documentKey = row.resourceFileVoList?.[0]?.sourceId + ''
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleDocumentReady() {
|
||||
console.log('文档已准备就绪')
|
||||
},
|
||||
handleAppReady() {
|
||||
console.log('应用已准备就绪')
|
||||
},
|
||||
handleError(error) {
|
||||
console.log('错误：', error)
|
||||
},
|
||||
handleInitialized() {
|
||||
console.log('初始化完成')
|
||||
},
|
||||
/** 删除操作 */
|
||||
handleDelete(row) {
|
||||
this.$confirm(`确定要删除方案类型"${raw.technicalSolutionName}"吗？删除后将无法恢复！`, '操作提示', {
|
||||
|
|
@ -207,4 +242,21 @@ export default {
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-dialog ::v-deep .el-dialog {
|
||||
height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-dialog ::v-deep .el-dialog__body {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
/* 重要：让flex布局生效 */
|
||||
}
|
||||
|
||||
.preview-dialog ::v-deep .onlyoffice-container {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export const formLabel = [
|
|||
]
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'technicalName',t_width: 350, t_label: '方案名称' },
|
||||
{ t_slot: 'technicalName',t_width: 350, t_label: '方案名称' },
|
||||
{ t_props: 'natureConstruction', t_label: '建设性质' },
|
||||
{ t_props: 'structuralForm', t_label: '结构形式' },
|
||||
{ t_props: 'basicForm', t_label: '基础形式' },
|
||||
|
|
|
|||
Loading…
Reference in New Issue