2026.4.10

feiyu02

6 天以前 ccc970e575ef3f3e5c67af8da210263f4ac549f9

 src/views/inspection/report/ReportManage.vue

@@ -1 +1,179 @@
<template>巡查评估报告</template>
<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}）-2025年${month}月`,
      district: searchForm.value.district === 'xuhui' ? '徐汇区' : '其他区',
      reportMonth: `2025年${month}月`,
      generateTime: new Date().toLocaleString('zh-CN'),
      auditStatus: Math.random() > 0.5 ? '已审核' : '未审核',
    })
  }

  return data
}

// 查询报告
const searchReports = () => {
  reportList.value = generateMockData()
}

// 查看报告
const viewReport = (row) => {
  // 使用模拟的报告文件
  reportUrl.value = '/徐汇区餐饮监管简报（天钥桥）-2025年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>