考勤日历视图

2025-08-07 13:03:28 +08:00
parent 03ee95cc6a
commit 167ac1129f
11 changed files with 1043 additions and 7 deletions
--- a/gear-ui3/src/views/info/report/components/ProjectReportDetail.vue
+++ b/gear-ui3/src/views/info/report/components/ProjectReportDetail.vue
@@ -0,0 +1,148 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    width="860px"
+    custom-class="project-report-detail"
+    :before-close="handleClose"
+    append-to-body
+  >
+    <template #title>
+      <div class="dialog-title flex items-center gap-2">
+        <i class="el-icon-document"></i>
+        <span>项目报工详情</span>
+      </div>
+    </template>
+
+    <!-- 打印 / 导出区域 -->
+    <div ref="printArea">
+      <el-scrollbar style="max-height: 70vh; padding-right: 8px">
+        <!-- 基本信息 -->
+        <el-card shadow="never" class="mb-6">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="经办人">{{ data.nickName }}</el-descriptions-item>
+            <el-descriptions-item label="部门">{{ data.deptName }}</el-descriptions-item>
+            <el-descriptions-item label="工作地点">{{ data.workPlace }}</el-descriptions-item>
+            <el-descriptions-item label="是否出差">
+              <el-tag :type="data.isTrip === 1 ? 'success' : 'info'" size="mini">
+                {{ data.isTrip === 1 ? '是' : '否' }}
+              </el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 项目信息 -->
+        <el-card shadow="never" class="mb-6">
+          <template #header>
+            <div class="card-header">项目信息</div>
+          </template>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="项目名称" :span="2">{{ data.projectName }}</el-descriptions-item>
+            <el-descriptions-item label="项目编号">{{ data.projectNum }}</el-descriptions-item>
+            <el-descriptions-item label="项目代号">{{ data.projectCode }}</el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 报工内容（富文本） -->
+        <el-card shadow="never" class="mb-6 rich-card">
+          <template #header>
+            <div class="card-header">报工内容</div>
+          </template>
+          <div class="rich-text" v-html="safeContent"></div>
+        </el-card>
+
+        <!-- 备注 -->
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-header">备注</div>
+          </template>
+          <p class="text-gray-700 whitespace-pre-line">{{ data.remark || '—' }}</p>
+        </el-card>
+      </el-scrollbar>
+    </div>
+
+    <!-- Footer -->
+    <template #footer>
+      <el-button @click="handlePrint" size="mini">打印</el-button>
+      <el-button @click="handleDownload" size="mini">下载 PDF</el-button>
+      <el-button @click="visible = false" type="primary" size="mini">关 闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+// import DOMPurify from 'dompurify'
+export default {
+  name: 'ProjectReportDetail',
+  props: {
+    value: { type: Boolean, default: false }, // v-model
+    record: { type: Object, required: true }
+  },
+  data() {
+    return { visible: this.value }
+  },
+  computed: {
+    data() {
+      return this.record || {}
+    },
+    safeContent() {
+      return this.data.content || ''
+      // return DOMPurify.sanitize(this.data.content || '')
+    }
+  },
+  watch: {
+    value(v) { this.visible = v },
+    visible(v) { this.$emit('input', v) }
+  },
+  methods: {
+    handleClose() { this.visible = false },
+    /** 直接打印弹窗内容 */
+    handlePrint() {
+      const printContent = this.$refs.printArea
+      const printWindow = window.open('', '', 'width=1000,height=800')
+      printWindow.document.write('<html><head><title>打印</title>')
+      printWindow.document.write('<style>@page{size:auto;margin:20mm;}body{font-family:Arial;} .el-scrollbar__wrap{overflow:visible !important;}</style>')
+      printWindow.document.write('</head><body>')
+      printWindow.document.write(printContent.innerHTML)
+      printWindow.document.write('</body></html>')
+      printWindow.document.close()
+      printWindow.focus()
+      printWindow.print()
+      printWindow.close()
+    },
+    /** 下载为 PDF：动态引入 html2pdf.js */
+    async handleDownload() {
+      // const { default: html2pdf } = await import(/* webpackChunkName: "html2pdf" */ 'html2pdf.js')
+      // const opt = {
+      //   margin: 10,
+      //   filename: `项目报工详情_${this.data.reportId || Date.now()}.pdf`,
+      //   html2canvas: { scale: 2, useCORS: true },
+      //   jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+      // }
+      // html2pdf().from(this.$refs.printArea).set(opt).save()
+      this.$message.warning('下载功能暂未实现，敬请期待！')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.project-report-detail >>> .el-dialog__header { padding-bottom: 0; }
+.dialog-title { font-size: 18px; font-weight: 600; }
+.card-header { font-weight: 600; font-size: 14px; color: #303133; }
+.rich-card { padding-bottom: 0 !important; }
+.rich-text {
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #ffffff;
+  line-height: 1.6;
+}
+.rich-text h1,
+.rich-text h2,
+.rich-text h3,
+.rich-text h4 { margin: 0.8em 0 0.5em; font-weight: 600; }
+.rich-text p { margin: 0.5em 0; }
+.rich-text ul,
+.rich-text ol { padding-left: 1.4em; margin: 0.5em 0; }
+.mb-6 { margin-bottom: 24px; }
+</style>