<template>
|
<div class="report-manage-container">
|
<h2>巡查评估报告</h2>
|
|
<!-- 查询条件区域 -->
|
<div class="search-section">
|
<el-form :inline="true" :model="searchForm" class="search-form">
|
<el-form-item label="区县">
|
<el-select v-model="searchForm.district" placeholder="请选择区县" style="width: 120px">
|
<el-option
|
v-for="district in districts"
|
:key="district.value"
|
:label="district.label"
|
:value="district.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchReports">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 报告表格区域 -->
|
<div class="table-section">
|
<el-table :data="reportList" style="width: 100%">
|
<el-table-column prop="index" label="索引编号" width="80" />
|
<el-table-column prop="name" label="报告名称" min-width="200" />
|
<el-table-column prop="district" label="区县" width="120" />
|
<el-table-column prop="reportMonth" label="报告时间" width="120" />
|
<el-table-column prop="generateTime" label="生成时间" width="180" />
|
<el-table-column prop="auditStatus" label="审核状态" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.auditStatus === '已审核' ? 'success' : 'warning'">
|
{{ scope.row.auditStatus }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="120" fixed="right">
|
<template #default="scope">
|
<el-button size="small" type="primary" @click="viewReport(scope.row)">
|
查看报告
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!-- 报告预览抽屉 -->
|
<el-drawer v-model="drawerVisible" title="报告预览" direction="rtl" size="80%">
|
<!-- <div class="report-preview">
|
<iframe :src="reportUrl" width="100%" height="800px" frameborder="0"></iframe>
|
</div> -->
|
<div ref="refWord" class="report-preview">
|
<div :id="`word-preview`"></div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import {
|
exportDocx,
|
prepareDocxBlob,
|
preparePdf,
|
previewDocx,
|
downloadDocx,
|
print,
|
} from '@/utils/doc'
|
|
const refWord = ref(null)
|
|
// 上海市区县列表
|
const districts = [
|
{ value: 'xuhui', label: '徐汇区' },
|
{ value: 'changning', label: '长宁区' },
|
{ value: 'jingan', label: '静安区' },
|
{ value: 'putuo', label: '普陀区' },
|
{ value: 'hongkou', label: '虹口区' },
|
{ value: 'yangpu', label: '杨浦区' },
|
{ value: 'minhang', label: '闵行区' },
|
{ value: 'baoshan', label: '宝山区' },
|
{ value: 'pudong', label: '浦东新区' },
|
{ value: 'jiading', label: '嘉定区' },
|
{ value: 'jinshan', label: '金山区' },
|
{ value: 'songjiang', label: '松江区' },
|
{ value: 'qingpu', label: '青浦区' },
|
{ value: 'fengxian', label: '奉贤区' },
|
{ value: 'chongming', label: '崇明区' },
|
]
|
|
// 查询表单
|
const searchForm = ref({
|
district: 'xuhui', // 默认选中徐汇区
|
})
|
|
// 报告列表数据
|
const reportList = ref([])
|
|
// 抽屉状态
|
const drawerVisible = ref(false)
|
// 报告预览URL
|
const reportUrl = ref('')
|
|
// 模拟数据生成
|
const generateMockData = () => {
|
const data = []
|
const baseName = '餐饮监管简报'
|
const areas = ['天钥桥', '徐家汇', '衡山路', '龙华']
|
|
for (let i = 1; i <= 10; i++) {
|
const area = areas[Math.floor(Math.random() * areas.length)]
|
const month = Math.floor(Math.random() * 12) + 1
|
const date = new Date()
|
date.setMonth(month - 1)
|
|
data.push({
|
index: i,
|
name: `${searchForm.value.district === 'xuhui' ? '徐汇区' : '其他区'}${baseName}（${area}）-2023年${month}月`,
|
district: searchForm.value.district === 'xuhui' ? '徐汇区' : '其他区',
|
reportMonth: `2023年${month}月`,
|
generateTime: new Date().toLocaleString('zh-CN'),
|
auditStatus: Math.random() > 0.5 ? '已审核' : '未审核',
|
})
|
}
|
|
return data
|
}
|
|
// 查询报告
|
const searchReports = () => {
|
reportList.value = generateMockData()
|
}
|
|
// 查看报告
|
const viewReport = (row) => {
|
// 使用模拟的报告文件
|
reportUrl.value = '/徐汇区餐饮监管简报（天钥桥）-2023年8月(1).docx'
|
drawerVisible.value = true
|
|
prepareDocxBlob(reportUrl.value).then((blob) => {
|
previewDocx(blob, document.getElementById(`word-preview`))
|
})
|
}
|
|
// 页面加载时生成初始数据
|
onMounted(() => {
|
searchReports()
|
})
|
</script>
|
|
<style scoped>
|
.report-manage-container {
|
padding: 20px;
|
}
|
|
.search-section {
|
margin-bottom: 20px;
|
padding: 20px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
}
|
|
.search-form {
|
display: flex;
|
align-items: center;
|
}
|
|
.table-section {
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.report-preview {
|
padding: 20px;
|
}
|
</style>
|
