|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 报告管理 -->
|
|
|
|
|
<!-- 表单查询项 -->
|
|
|
|
|
<div v-if="!previewMode" class="headerbox">
|
|
|
|
|
<el-form size="small" :inline="true" label-width="200">
|
|
|
|
|
@ -11,346 +12,152 @@
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="5">
|
|
|
|
|
<el-form-item label="发布时间">
|
|
|
|
|
<el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
|
|
|
|
<el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择日期"
|
|
|
|
|
style="width: 100%;"></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini"
|
|
|
|
|
@click="handleQuery">查询</el-button>
|
|
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 表格内容区 -->
|
|
|
|
|
<div v-if="!previewMode" class="tablebox">
|
|
|
|
|
<!-- 按钮行 -->
|
|
|
|
|
<div class="tablebtntwo">
|
|
|
|
|
<el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleExport">导出单片材料</el-button>
|
|
|
|
|
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
|
|
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
|
|
<el-table-column label="序号" align="center" prop="id" />
|
|
|
|
|
<el-table-column label="文件标题" align="center" prop="title" />
|
|
|
|
|
<el-table-column label="发布单位" align="center" prop="unit" />
|
|
|
|
|
<el-table-column label="发布人" align="center" prop="author" />
|
|
|
|
|
<!-- <el-table-column label="发布人" align="center" prop="author" /> -->
|
|
|
|
|
<el-table-column label="发布时间" align="center" prop="createTime" />
|
|
|
|
|
<el-table-column label="操作" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button size="mini" type="text" style="color: gray;" @click="handlePreview(scope.row)">预览</el-button>
|
|
|
|
|
<el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
|
|
<el-button size="mini" type="text" style="color: #F25353;" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
|
|
<el-button size="mini" type="text" style="color: gray;"
|
|
|
|
|
@click="handlePreview(scope.row)">预览</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
|
|
|
|
|
@pagination="getList" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 新增/编辑的弹窗 -->
|
|
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
|
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
|
|
<el-form-item label="文件标题" prop="fileTitle">
|
|
|
|
|
<el-input v-model="form.fileTitle" placeholder="请输入文件标题" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="发布时间" prop="createTime">
|
|
|
|
|
<el-date-picker v-model="form.createTime" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="发布单位" prop="unit">
|
|
|
|
|
<el-input v-model="form.unit" placeholder="请输入发布单位" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="发布人" prop="createBy">
|
|
|
|
|
<el-input v-model="form.createBy" placeholder="请输入发布人" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="内容" prop="content">
|
|
|
|
|
<Editorone v-model="form.content" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.current"
|
|
|
|
|
:limit.sync="queryParams.size" @pagination="getList" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 预览的展示区 -->
|
|
|
|
|
<!-- DOCX预览区域 -->
|
|
|
|
|
<div v-if="previewMode" class="previewbox">
|
|
|
|
|
<!-- 按钮区域 -->
|
|
|
|
|
<div class="previewhead">
|
|
|
|
|
<div class="headone">预览</div>
|
|
|
|
|
<h3>{{ previewData.title }}</h3>
|
|
|
|
|
<div class="headtwo">
|
|
|
|
|
<el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleExporttwo" :loading="loading">
|
|
|
|
|
导出PDF
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="primary" size="mini" icon="el-icon-back" @click="handleReturn">返回</el-button>
|
|
|
|
|
<el-button size="mini" @click="previewMode = false">返回</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 标题栏 -->
|
|
|
|
|
<div class="previewnick">
|
|
|
|
|
<h1>{{ previewData.fileTitle }}</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 发布信息栏 -->
|
|
|
|
|
<div class="previewinfo">
|
|
|
|
|
<div class="previewinfoitem">发布时间：{{ previewData.createTime }}</div>
|
|
|
|
|
<div class="previewinfoitem">发布单位：{{ previewData.unit }}</div>
|
|
|
|
|
<div class="previewinfoitem">发布人：{{ previewData.createBy }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
|
|
<div class="previewcontent">
|
|
|
|
|
<div v-html="previewData.content"></div>
|
|
|
|
|
<vue-office-docx
|
|
|
|
|
:src="docxFileData"
|
|
|
|
|
style="width: 100%; height: calc(100vh - 250px); border: 1px solid #eee;"
|
|
|
|
|
@rendered="renderedHandler"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Editorone from '@/components/Editor';
|
|
|
|
|
import { addClgl, deleteClgl, updateClgl, getClglPage, exportToPdf } from '@/api/ManageApi/index';
|
|
|
|
|
import VueOfficeDocx from '@vue-office/docx'
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: { Editorone },
|
|
|
|
|
components: {
|
|
|
|
|
'vue-office-docx': VueOfficeDocx
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
loading: false,
|
|
|
|
|
postList: [],
|
|
|
|
|
total: 0,
|
|
|
|
|
// 查询参数
|
|
|
|
|
queryParams: {
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10,
|
|
|
|
|
fileTitle: '',
|
|
|
|
|
startTime: ''
|
|
|
|
|
},
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
dialogTitle: '新增',
|
|
|
|
|
form: {
|
|
|
|
|
id: undefined,
|
|
|
|
|
fileTitle: '',
|
|
|
|
|
createTime: '',
|
|
|
|
|
unit: '',
|
|
|
|
|
createBy: '',
|
|
|
|
|
content: ''
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
fileTitle: [
|
|
|
|
|
{ required: true, message: '文件标题不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
createTime: [
|
|
|
|
|
{ required: true, message: '发布时间不能为空', trigger: 'change' }
|
|
|
|
|
],
|
|
|
|
|
unit: [
|
|
|
|
|
{ required: true, message: '发布单位不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
createBy: [
|
|
|
|
|
{ required: true, message: '发布人不能为空', trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
content: [
|
|
|
|
|
{ required: true, message: '内容不能为空', trigger: 'blur' }
|
|
|
|
|
]
|
|
|
|
|
fileTitle: undefined,
|
|
|
|
|
startTime: undefined
|
|
|
|
|
},
|
|
|
|
|
// 表格数据
|
|
|
|
|
postList: [],
|
|
|
|
|
// 加载状态
|
|
|
|
|
loading: false,
|
|
|
|
|
// 总条数
|
|
|
|
|
total: 0,
|
|
|
|
|
// 预览模式
|
|
|
|
|
previewMode: false,
|
|
|
|
|
// 预览数据
|
|
|
|
|
previewData: {},
|
|
|
|
|
};
|
|
|
|
|
// DOCX文件数据
|
|
|
|
|
docxFileData: null
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.getList()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 导出PDF
|
|
|
|
|
async handleExporttwo() {
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
|
|
|
|
|
// 验证数据
|
|
|
|
|
if (!this.previewData.fileTitle || !this.previewData.content) {
|
|
|
|
|
this.$message.warning('请确保标题和内容不为空');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 1. 调用导出接口
|
|
|
|
|
const exportResponse = await exportToPdf({
|
|
|
|
|
htmlArticleTitle: this.previewData.fileTitle,
|
|
|
|
|
htmlContent: this.previewData.content
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log('完整的:', exportResponse);
|
|
|
|
|
|
|
|
|
|
// 检查响应结构 - 注意数据在data属性中
|
|
|
|
|
if (!exportResponse?.data || exportResponse.code !== 200) {
|
|
|
|
|
throw new Error(exportResponse?.msg || '导出PDF失败');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const fileData = exportResponse.data;
|
|
|
|
|
if (!fileData.fileName || !fileData.url) {
|
|
|
|
|
throw new Error('后端未返回有效的文件路径或文件名');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 使用若依下载方式
|
|
|
|
|
this.handleDownload(fileData);
|
|
|
|
|
|
|
|
|
|
this.$message.success('PDF导出下载成功');
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('导出PDF失败:', error);
|
|
|
|
|
this.$message.error('导出PDF失败');
|
|
|
|
|
} finally {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 若依下载方式
|
|
|
|
|
handleDownload(fileData) {
|
|
|
|
|
var name = fileData.fileName;
|
|
|
|
|
var url = fileData.url;
|
|
|
|
|
console.log(name);
|
|
|
|
|
console.log(url);
|
|
|
|
|
var suffix = url.substring(url.lastIndexOf("."), url.length);
|
|
|
|
|
const a = document.createElement('a');
|
|
|
|
|
a.setAttribute('download', name + suffix);
|
|
|
|
|
a.setAttribute('target', '_blank');
|
|
|
|
|
a.setAttribute('href', url);
|
|
|
|
|
a.click();
|
|
|
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 返回按钮
|
|
|
|
|
handleReturn() {
|
|
|
|
|
this.previewMode = false;
|
|
|
|
|
this.previewData = {};
|
|
|
|
|
},
|
|
|
|
|
handleAdd() {
|
|
|
|
|
this.dialogTitle = '新增';
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
this.form = { id: undefined, fileTitle: '', createTime: '', unit: '', createBy: '', content: '' };
|
|
|
|
|
},
|
|
|
|
|
handleEdit(row) {
|
|
|
|
|
this.dialogTitle = '编辑';
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
this.form = { ...row };
|
|
|
|
|
},
|
|
|
|
|
async handleDelete(row) {
|
|
|
|
|
this.$confirm('确定删除该文件吗？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(async () => {
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
await deleteClgl([row.id]);
|
|
|
|
|
this.postList = this.postList.filter(item => item.id !== row.id);
|
|
|
|
|
this.total -= 1;
|
|
|
|
|
this.$message({ type: 'success', message: '删除成功!' });
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('删除失败:', error);
|
|
|
|
|
this.$message.error('删除失败');
|
|
|
|
|
} finally {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handlePreview(row) {
|
|
|
|
|
this.previewMode = true;
|
|
|
|
|
this.previewData = { ...row };
|
|
|
|
|
this.previewData.content = row.content; // 直接赋值 HTML 内容
|
|
|
|
|
},
|
|
|
|
|
async submitForm() {
|
|
|
|
|
this.$refs.form.validate(async valid => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
if (this.form.id) {
|
|
|
|
|
// 编辑操作
|
|
|
|
|
await updateClgl(this.form);
|
|
|
|
|
const index = this.postList.findIndex(item => item.id === this.form.id);
|
|
|
|
|
this.postList.splice(index, 1, { ...this.form });
|
|
|
|
|
this.$message({ type: 'success', message: '编辑成功!' });
|
|
|
|
|
} else {
|
|
|
|
|
// 新增操作
|
|
|
|
|
const response = await addClgl(this.form);
|
|
|
|
|
const newForm = { ...this.form, id: response.data.id };
|
|
|
|
|
this.postList.push(newForm);
|
|
|
|
|
this.total += 1;
|
|
|
|
|
this.$message({ type: 'success', message: '新增成功!' });
|
|
|
|
|
}
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('操作失败:', error);
|
|
|
|
|
this.$message.error('操作失败');
|
|
|
|
|
} finally {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
cancel() {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
},
|
|
|
|
|
handleSelectionChange(selection) {
|
|
|
|
|
console.log(selection);
|
|
|
|
|
},
|
|
|
|
|
async handleExport() {
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
const params = {
|
|
|
|
|
...this.queryParams
|
|
|
|
|
};
|
|
|
|
|
const response = await getClglPage(params);
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
const fileData = response.data;
|
|
|
|
|
if (!fileData.fileName || !fileData.url) {
|
|
|
|
|
throw new Error('后端未返回有效的文件路径或文件名');
|
|
|
|
|
}
|
|
|
|
|
this.handleDownload(fileData);
|
|
|
|
|
this.$message.success('导出成功');
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error('导出失败');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('导出失败:', error);
|
|
|
|
|
this.$message.error('导出失败');
|
|
|
|
|
} finally {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async getList() {
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
const params = {
|
|
|
|
|
...this.queryParams
|
|
|
|
|
};
|
|
|
|
|
const response = await getClglPage(params);
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
this.postList = response.data.records;
|
|
|
|
|
this.total = response.data.total;
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error('获取数据失败');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取数据失败:', error);
|
|
|
|
|
this.$message.error('获取数据失败');
|
|
|
|
|
} finally {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
// 获取表格数据
|
|
|
|
|
getList() {
|
|
|
|
|
this.loading = true
|
|
|
|
|
// 默认数据
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.postList = [
|
|
|
|
|
{ id: 1, title: 'xxxx项目单体材料模板', unit: '经发委', author: '', createTime: '2024-08-20', fileUrl: 'docx/单体材料模板.docx' },
|
|
|
|
|
]
|
|
|
|
|
this.total = 1
|
|
|
|
|
this.loading = false
|
|
|
|
|
}, 500)
|
|
|
|
|
},
|
|
|
|
|
// 查询
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.queryParams.current = 1;
|
|
|
|
|
this.getList();
|
|
|
|
|
this.queryParams.current = 1
|
|
|
|
|
this.getList()
|
|
|
|
|
},
|
|
|
|
|
// 重置查询
|
|
|
|
|
resetQuery() {
|
|
|
|
|
this.queryParams = {
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10,
|
|
|
|
|
fileTitle: '',
|
|
|
|
|
startTime: ''
|
|
|
|
|
};
|
|
|
|
|
this.getList();
|
|
|
|
|
fileTitle: undefined,
|
|
|
|
|
startTime: undefined
|
|
|
|
|
}
|
|
|
|
|
this.handleQuery()
|
|
|
|
|
},
|
|
|
|
|
// 表格选择变化
|
|
|
|
|
handleSelectionChange(selection) {
|
|
|
|
|
this.ids = selection.map(item => item.id)
|
|
|
|
|
this.single = selection.length !== 1
|
|
|
|
|
this.multiple = !selection.length
|
|
|
|
|
},
|
|
|
|
|
// 预览文档
|
|
|
|
|
handlePreview(row) {
|
|
|
|
|
this.previewMode = true
|
|
|
|
|
this.previewData = row
|
|
|
|
|
this.loadDocxFile(row.fileUrl)
|
|
|
|
|
},
|
|
|
|
|
extractTextContent(html) {
|
|
|
|
|
const tempDiv = document.createElement('div');
|
|
|
|
|
tempDiv.innerHTML = html;
|
|
|
|
|
return tempDiv.textContent || tempDiv.innerText || '';
|
|
|
|
|
// 加载DOCX文件
|
|
|
|
|
loadDocxFile(url) {
|
|
|
|
|
this.docxFileData = null
|
|
|
|
|
axios.get(url, { responseType: 'arraybuffer' })
|
|
|
|
|
.then(response => {
|
|
|
|
|
this.docxFileData = response.data
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('加载文档失败:', error)
|
|
|
|
|
this.$message.error('文档加载失败')
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 文档渲染完成回调
|
|
|
|
|
renderedHandler() {
|
|
|
|
|
console.log('文档渲染完成')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
@ -380,7 +187,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
.previewbox {
|
|
|
|
|
width: 90%;
|
|
|
|
|
height: auto;
|
|
|
|
|
height: 92rem;
|
|
|
|
|
margin-left: 5%;
|
|
|
|
|
margin-top: .3rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -403,17 +210,6 @@ export default {
|
|
|
|
|
gap: .5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.previewnick {
|
|
|
|
|
margin-top: .3rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 5rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: 3px solid #2B62F1;
|
|
|
|
|
color: #2B62F1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.previewinfo {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
@ -423,5 +219,6 @@ export default {
|
|
|
|
|
|
|
|
|
|
.previewcontent {
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
