DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

用印

Browse Source
This commit is contained in:
86156
2026-03-18 16:23:54 +08:00
parent 8f8729d2b2
commit 8df6ff1576
13 changed files with 1821 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
klp-ui/src/views/wms/seal/seal.vue Normal file
View File

@@ -0,0 +1,339 @@
<template>
<div class="request-page">
<el-row :gutter="20">
<el-col :span="8">
<el-card class="form-card" shadow="never">
<div slot="header" class="card-header">
<span>用印申请</span>
</div>
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" size="small" class="metal-form">
<div class="form-summary">
<div class="summary-left">
<div class="summary-title">发起用印</div>
<div class="summary-sub">请完善信息后提交，系统会推送部门负责人审批</div>
</div>
<div class="summary-right">
<div class="summary-item">
<div class="k">申请人</div>
<div class="v">{{ currentApplicantText }}</div>
</div>
<div class="summary-item">
<div class="k">用印类型</div>
<div class="v">{{ form.sealType || '-' }}</div>
</div>
</div>
</div>
<el-form-item label="审批部门" prop="deptId">
<el-select v-model="form.deptId" placeholder="请选择审批部门" filterable @change="onDeptChange" style="width: 100%">
<el-option
v-for="item in deptOptions"
:key="item.deptId"
:label="item.deptName + (item.leaderNickName ? '（负责人：' + item.leaderNickName + '）' : '（无负责人）')"
:value="item.deptId"
/>
</el-select>
<div class="hint-text">系统将根据部门负责人自动创建审批任务</div>
</el-form-item>
<el-form-item label="用印类型" prop="sealType">
<el-select
v-model="form.sealType"
filterable
allow-create
default-first-option
clearable
placeholder="选择或输入用印类型"
style="width: 100%"
>
<el-option
v-for="dictItem in (dict.type.hrm_stamp_image || [])"
:key="dictItem.value"
:label="dictItem.label"
:value="dictItem.label"
/>
</el-select>
<div class="hint-text">优先从字典选择；若字典未配置，可直接输入</div>
</el-form-item>
<div class="block-title">用途与材料</div>
<el-form-item label="用途说明" prop="purpose">
<el-input v-model="form.purpose" type="textarea" :rows="4" placeholder="请说明用印用途、对象、份数等" show-word-limit maxlength="200" />
</el-form-item>
<el-form-item label="待盖章PDF" prop="applyFileIds">
<file-upload
v-model="form.applyFileIds"
:limit="1"
:file-size="50"
:file-type="['pdf']"
/>
<div class="hint-text">仅支持 PDF，单个文件不超过 50MB</div>
</el-form-item>
<el-form-item label="盖章页码" prop="pageNo" v-if="form.applyFileIds">
<el-input-number
v-model="form.pageNo"
:min="1"
:max="999"
controls-position="right"
placeholder="请输入需要盖章的页码（从第1页开始）"
style="width: 100%"
/>
<div class="hint-text">请输入需要盖章的页码，从第1页开始计数</div>
</el-form-item>
<el-form-item label="需要回执" prop="receiptRequired">
<el-switch v-model="form.receiptRequired" :active-value="1" :inactive-value="0" />
<div class="hint-text">开启后，盖章完成通常需要回传回执文件</div>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="可选：补充说明" show-word-limit maxlength="200" />
</el-form-item>
<div class="form-actions">
<el-button @click="$router.back()">取消</el-button>
<el-button type="primary" :loading="submitting" @click="submit">提交申请</el-button>
</div>
</el-form>
</el-card>
</el-col>
<el-col :span="16">
<el-card class="list-card" shadow="never">
<div slot="header" class="card-header">
<span>我的用印申请</span>
<div class="actions">
<el-button size="mini" icon="el-icon-refresh" @click="getList">刷新</el-button>
</div>
</div>
<el-table v-loading="listLoading" :data="sealList" border>
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">
<el-tag :type="statusType(scope.row.status)">{{ statusText(scope.row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="用印类型" align="center" prop="sealType" />
<el-table-column label="用途说明" align="center" prop="purpose" show-overflow-tooltip />
<el-table-column label="申请时间" align="center" prop="createTime" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="goDetail(scope.row)">查看</el-button>
<el-button v-if="canPreviewReceipt(scope.row)" size="mini" type="text" @click="previewReceipt(scope.row)">预览</el-button>
<el-button v-if="canPreviewReceipt(scope.row)" size="mini" type="text" @click="downloadReceipt(scope.row)">下载</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { addSealReq, listSealReq } from '@/api/wms/seal'
import { listDept } from '@/api/wms/dept'
import FileUpload from '@/components/FileUpload'
export default {
name: 'WmsSealRequest',
dicts: ['hrm_stamp_image'],
components: { FileUpload },
data() {
return {
submitting: false,
listLoading: false,
deptOptions: [],
sealList: [],
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
createBy: this.$store.getters.name
},
form: {
empId: this.$store.getters.id,
deptId: '',
sealType: '',
purpose: '',
applyFileIds: '',
pageNo: 1,
receiptRequired: 0,
remark: ''
},
rules: {
deptId: [{ required: true, message: '请选择审批部门', trigger: 'change' }],
sealType: [{ required: true, message: '请选择/输入用印类型', trigger: 'change' }],
purpose: [{ required: true, message: '请填写用途说明', trigger: 'blur' }],
applyFileIds: [{ required: true, message: '请上传 PDF 附件', trigger: 'change' }],
pageNo: [{ required: true, message: '请输入盖章页码', trigger: 'blur' }],
receiptRequired: [{ required: true, message: '请选择是否需要回执', trigger: 'change' }]
}
}
},
computed: {
currentApplicantText() {
const user = this.$store?.state?.user || {}
return user.nickName || user.userName || '当前用户'
}
},
created() {
this.loadDeptList()
this.getList()
},
methods: {
async loadDeptList() {
try {
const res = await listDept()
this.deptOptions = res.data || []
} catch (e) {
this.deptOptions = []
}
},
onDeptChange() {},
statusText(status) {
const map = { running: '审批中', draft: '草稿', approved: '已通过', rejected: '已驳回', canceled: '已撤销', pending: '待审批' }
return map[status] || status || '-'
},
statusType(status) {
const map = { running: 'warning', draft: 'info', approved: 'success', rejected: 'danger', canceled: 'info', pending: 'warning' }
return map[status] || 'info'
},
getList() {
this.listLoading = true
listSealReq(this.queryParams)
.then(res => {
this.sealList = res.rows || []
this.total = res.total || 0
})
.finally(() => {
this.listLoading = false
})
},
goDetail(row) {
this.$router.push({ path: '/job/sealDetail', query: { bizId: row.bizId } })
},
canPreviewReceipt(row) {
return row.status === 'approved' && row.receiptFileIds
},
previewReceipt(row) {
if (row.receiptFileIds) {
window.open(row.receiptFileIds, '_blank')
}
},
downloadReceipt(row) {
if (row.receiptFileIds) {
window.open(row.receiptFileIds, '_blank')
}
},
async submit() {
try {
await this.$refs.formRef.validate()
this.submitting = true
let remark = this.form.remark || ''
if (this.form.pageNo) {
remark = remark ? `${remark}\n[盖章页码:第${this.form.pageNo}页]` : `[盖章页码:第${this.form.pageNo}页]`
}
const payload = {
empId: this.form.empId,
deptId: this.form.deptId,
sealType: this.form.sealType,
purpose: this.form.purpose,
applyFileIds: this.form.applyFileIds,
receiptRequired: this.form.receiptRequired,
remark,
status: 'pending'
}
await addSealReq(payload)
this.$message.success('提交成功')
this.getList()
} finally {
this.submitting = false
}
}
}
}
</script>
<style lang="scss" scoped>
.request-page {
padding: 16px 20px 32px;
background: transparent;
}
.form-card {
max-width: 980px;
margin: 0 auto;
border: 1px solid #eef0f4;
border-radius: 10px;
background: #ffffff;
box-shadow: none;
}
.list-card {
border: 1px solid #eef0f4;
border-radius: 10px;
box-shadow: none;
background: #ffffff;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #2b2f36;
}
.actions {
display: flex;
gap: 8px;
}
.metal-form { padding-right: 8px; }
.block-title {
margin: 18px 0 10px;
padding-left: 10px;
font-weight: 600;
color: #2f3440;
border-left: 2px solid #cbd1db;
}
.hint-text {
margin-top: 6px;
font-size: 12px;
color: #8a8f99;
line-height: 1.4;
}
.form-summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 12px;
margin-bottom: 12px;
border: 1px solid #eef0f4;
border-radius: 10px;
background: transparent;
}
.summary-title { font-size: 15px; font-weight: 700; color: #2b2f36; }
.summary-sub { margin-top: 4px; font-size: 12px; color: #8a8f99; }
.summary-right { display: flex; gap: 16px; }
.summary-item .k { font-size: 12px; color: #8a8f99; }
.summary-item .v { margin-top: 2px; font-weight: 600; color: #2b2f36; }
.form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
}
@media (max-width: 1200px) {
.summary-right { display: none; }
}
</style>

549
klp-ui/src/views/wms/seal/sealDetail.vue Normal file
View File

@@ -0,0 +1,549 @@
<template>
<div class="request-page">
<el-card class="form-card" shadow="never">
<div slot="header" class="card-header">
<span>用印详情</span>
<div class="actions">
<el-button size="mini" icon="el-icon-arrow-left" @click="$router.back()">返回</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="loadDetail">刷新</el-button>
</div>
</div>
<div class="form-summary" v-loading="loading">
<div class="summary-left">
<div class="summary-title">{{ seal.sealType || '用印申请' }}</div>
<div class="summary-sub">
申请编号：{{ seal.bizId || '-' }} · 状态：
<el-tag size="mini" :type="statusType(seal.status)">{{ statusText(seal.status) }}</el-tag>
</div>
</div>
<div class="summary-right">
<div class="summary-item">
<div class="k">申请人</div>
<div class="v">{{ applicantText }}</div>
</div>
<div class="summary-item">
<div class="k">需要回执</div>
<div class="v">{{ seal.receiptRequired === 1 ? '是' : '否' }}</div>
</div>
</div>
</div>
<div class="block-title">用印信息</div>
<el-descriptions :column="2" border size="small" v-loading="loading">
<el-descriptions-item label="用印类型">{{ seal.sealType || '-' }}</el-descriptions-item>
<el-descriptions-item label="申请人">{{ applicantText }}</el-descriptions-item>
<el-descriptions-item label="用途说明" :span="2">{{ seal.purpose || '-' }}</el-descriptions-item>
<el-descriptions-item label="盖章页码">
<span v-if="stampForm.pageNo" class="page-no-text">第 {{ stampForm.pageNo }} 页</span>
<span v-else class="text-muted">未指定</span>
</el-descriptions-item>
<el-descriptions-item label="需要回执">{{ seal.receiptRequired === 1 ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ seal.remark || '-' }}</el-descriptions-item>
</el-descriptions>
<div class="block-title">申请材料附件</div>
<el-card class="inner-card" shadow="never" v-loading="attachmentLoading">
<div v-if="seal.receiptFileIds" class="receipt-panel">
<div class="receipt-title">回执文件</div>
<div class="receipt-actions">
<el-button size="mini" type="primary" plain @click="previewReceipt">预览回执</el-button>
<el-button size="mini" type="success" plain @click="downloadReceipt">下载回执</el-button>
</div>
</div>
<div v-if="attachmentList.length > 0" class="attachment-list">
<div v-for="file in attachmentList" :key="file.ossId" class="attachment-item">
<div class="file-info">
<i class="el-icon-document file-icon"></i>
<div class="file-details">
<div class="file-name">{{ file.originalName || file.fileName || `文件${file.ossId}` }}</div>
<div class="file-meta">
<span v-if="file.fileSize">{{ formatFileSize(file.fileSize) }}</span>
<span v-if="file.createTime" class="file-time">{{ formatDate(file.createTime) }}</span>
</div>
</div>
</div>
<div class="file-actions">
<el-button size="mini" type="text" @click="previewFile(file)">预览</el-button>
<el-button size="mini" type="text" @click="downloadFile(file.ossId)">下载</el-button>
</div>
</div>
</div>
<div v-else class="empty">暂无附件</div>
</el-card>
<div class="block-title">盖章操作</div>
<el-card class="inner-card" shadow="never">
<div class="hint-text">仅当前审批人可操作盖章；盖章成功后才算审批通过。</div>
<div v-if="canApprove" class="btn-row">
<el-input v-model="actionRemark" type="textarea" :rows="3" placeholder="填写审批意见（可选）" />
<div class="btn-row mt10">
<el-button type="success" :loading="actionSubmitting" @click="openStampDialog">同意并盖章</el-button>
<el-button type="danger" :loading="actionSubmitting" @click="reject">驳回</el-button>
</div>
</div>
<div v-else class="empty">当前无可操作的审批任务</div>
</el-card>
</el-card>
<el-dialog
title="盖章确认"
:visible.sync="stampDialogVisible"
width="1200px"
:close-on-click-modal="false"
append-to-body
class="pdf-preview-dialog"
>
<div class="pdf-preview-container">
<div v-if="targetPdfFile && targetPdfFile.url" class="pdf-viewer">
<div class="pdf-controls">
<span class="hint-text" style="margin:0;">点击PDF选择盖章位置</span>
<div style="flex:1;"></div>
<el-button size="mini" @click="openPdfPreview">在新窗口打开</el-button>
</div>
<PdfStamper
:pdf-url="targetPdfFile.url"
:initial-page="stampForm.pageNo || 1"
@change="onStampChange"
/>
<div class="pdf-hint">
<div class="hint-text">当前选择：页码 {{ stampForm.pageNo || '-' }}，x={{ stampForm.xPx !== null ? stampForm.xPx : '-' }}，y={{ stampForm.yPx !== null ? stampForm.yPx : '-' }}</div>
</div>
</div>
<div v-else class="empty">PDF文件加载失败</div>
</div>
<div class="stamp-config">
<el-form :model="stampForm" label-width="120px" size="small">
<el-form-item label="选择印章">
<el-select v-model="stampForm.stampImageUrl" placeholder="选择印章" filterable style="width: 100%">
<el-option
v-for="dict in dict.type.hrm_stamp_image"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="盖章页码">
<el-input-number v-model="stampForm.pageNo" :min="1" :max="999" controls-position="right" style="width: 200px" />
</el-form-item>
<el-form-item label="X 坐标">
<el-input-number v-model="stampForm.xPx" :min="0" :precision="0" style="width: 200px" />
</el-form-item>
<el-form-item label="Y 坐标">
<el-input-number v-model="stampForm.yPx" :min="0" :precision="0" style="width: 200px" />
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="stampDialogVisible = false">关闭</el-button>
<el-button type="primary" :loading="stamping" @click="doStampAndApprove">盖章并通过</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getSealReq, rejectSealReq, approveSealReq, stampSealJava } from '@/api/wms/seal'
import { listByIds } from '@/api/system/oss'
import PdfStamper from '@/components/PdfStamper/index.vue'
export default {
name: 'WmsSealDetail',
components: { PdfStamper },
dicts: ['hrm_stamp_image'],
data() {
return {
seal: {},
loading: false,
attachmentLoading: false,
attachmentList: [],
targetPdfFile: null,
stampDialogVisible: false,
stamping: false,
actionSubmitting: false,
actionRemark: '',
stampForm: {
pageNo: 1,
stampImageUrl: '',
xPx: null,
yPx: null,
widthPx: null,
heightPx: null,
viewportWidth: null,
viewportHeight: null
}
}
},
computed: {
currentBizId() {
return this.$route?.params?.bizId || this.$route?.query?.bizId || this.$route?.params?.id
},
applicantText() {
if (this.seal.createBy) {
return this.seal.createBy
}
return this.seal.empId ? `员工ID:${this.seal.empId}` : '-'
},
canApprove() {
const currentUserId = this.$store.getters.id
return this.seal.status === 'running' && String(this.seal.approverId) === String(currentUserId)
}
},
created() {
this.loadDetail()
},
methods: {
statusText(status) {
const map = { running: '审批中', draft: '草稿', approved: '已通过', rejected: '已驳回', canceled: '已撤销' }
return map[status] || status || '-'
},
statusType(status) {
const map = { running: 'warning', draft: 'info', approved: 'success', rejected: 'danger', canceled: 'info' }
return map[status] || 'info'
},
formatDate(val) {
if (!val) return '-'
const d = new Date(val)
const p = n => (n < 10 ? `0${n}` : n)
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
},
async loadDetail() {
const bizId = this.currentBizId
if (!bizId) {
this.$message.warning('缺少bizId')
return
}
this.loading = true
try {
const res = await getSealReq(bizId)
this.seal = res.data || {}
this.seal.approverId = this.seal.approverId || this.seal.approver_id || this.seal.approverUserId
await this.loadAttachments()
} finally {
this.loading = false
}
},
async loadAttachments() {
const fileIds = this.seal.applyFileIds
if (!fileIds) {
this.attachmentList = []
this.targetPdfFile = null
return
}
const ids = String(fileIds).split(',').map(id => id.trim()).filter(Boolean)
if (!ids.length) {
this.attachmentList = []
this.targetPdfFile = null
return
}
this.attachmentLoading = true
try {
const res = await listByIds(ids)
this.attachmentList = res.data || []
this.targetPdfFile = this.attachmentList.find(f => f.fileName && f.fileName.toLowerCase().endsWith('.pdf')) || this.attachmentList[0] || null
const match = this.seal.remark ? this.seal.remark.match(/\[盖章页码:第(\d+)页\]/) : null
if (match) {
this.stampForm.pageNo = parseInt(match[1])
}
} catch (e) {
this.attachmentList = []
this.targetPdfFile = null
} finally {
this.attachmentLoading = false
}
},
formatFileSize(bytes) {
if (!bytes) return '-'
const units = ['B', 'KB', 'MB', 'GB']
let size = Number(bytes)
let unitIndex = 0
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024
unitIndex++
}
return `${size.toFixed(2)} ${units[unitIndex]}`
},
previewFile(file) {
if (file.url) {
window.open(file.url, '_blank')
} else {
this.$message.warning('文件URL不存在')
}
},
downloadFile(ossId) {
window.open(`/system/oss/download/${ossId}`, '_blank')
},
previewReceipt() {
if (!this.seal || !this.seal.receiptFileIds) return
window.open(this.seal.receiptFileIds, '_blank')
},
downloadReceipt() {
if (!this.seal || !this.seal.receiptFileIds) return
window.open(this.seal.receiptFileIds, '_blank')
},
openPdfPreview() {
if (this.targetPdfFile && this.targetPdfFile.url) {
window.open(this.targetPdfFile.url, '_blank')
} else {
this.$message.warning('PDF文件URL不存在')
}
},
openStampDialog() {
if (!this.targetPdfFile || !this.targetPdfFile.url) {
this.$message.warning('请先加载PDF文件')
return
}
this.stampDialogVisible = true
},
onStampChange(params) {
if (!params) return
if (params.pageNo !== null && params.pageNo !== undefined) {
this.stampForm.pageNo = Number(params.pageNo) || 1
}
if (params.xPx !== null && params.xPx !== undefined && !isNaN(Number(params.xPx))) {
this.stampForm.xPx = Math.floor(Number(params.xPx))
}
if (params.yPx !== null && params.yPx !== undefined && !isNaN(Number(params.yPx))) {
this.stampForm.yPx = Math.floor(Number(params.yPx))
}
if (params.viewportWidth !== null && params.viewportWidth !== undefined && !isNaN(Number(params.viewportWidth))) {
this.stampForm.viewportWidth = Math.floor(Number(params.viewportWidth))
}
if (params.viewportHeight !== null && params.viewportHeight !== undefined && !isNaN(Number(params.viewportHeight))) {
this.stampForm.viewportHeight = Math.floor(Number(params.viewportHeight))
}
},
async doStampAndApprove() {
if (!this.canApprove) {
this.$message.warning('你不是当前审批人，无法盖章')
return
}
if (!this.stampForm.stampImageUrl) {
this.$message.warning('请选择印章')
return
}
if (this.stampForm.xPx === null || this.stampForm.yPx === null) {
this.$message.warning('请选择盖章位置')
return
}
try {
this.stamping = true
const payload = {
targetFileUrl: this.targetPdfFile.url,
stampImageUrl: this.stampForm.stampImageUrl,
pageNo: Number(this.stampForm.pageNo),
xPx: Math.floor(Number(this.stampForm.xPx)),
yPx: Math.floor(Number(this.stampForm.yPx)),
viewportWidth: this.stampForm.viewportWidth,
viewportHeight: this.stampForm.viewportHeight
}
await stampSealJava(this.currentBizId, payload)
await approveSealReq(this.currentBizId, this.actionRemark)
this.$message.success('盖章成功，审批已通过')
this.stampDialogVisible = false
this.loadDetail()
} finally {
this.stamping = false
}
},
async reject() {
this.actionSubmitting = true
try {
await rejectSealReq(this.currentBizId, this.actionRemark)
this.$message.success('已驳回')
this.loadDetail()
} finally {
this.actionSubmitting = false
}
}
}
}
</script>
<style lang="scss" scoped>
.request-page {
padding: 16px 20px 32px;
background: #f8f9fb;
}
.form-card {
max-width: 980px;
margin: 0 auto;
border: 1px solid #d7d9df;
border-radius: 12px;
background: #ffffff;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
color: #2b2f36;
}
.actions {
display: flex;
gap: 8px;
}
.block-title {
margin: 12px 0 8px;
padding-left: 10px;
font-weight: 700;
color: #2f3440;
border-left: 3px solid #9aa3b2;
}
.hint-text {
margin: 6px 0 10px;
font-size: 12px;
color: #8a8f99;
}
.form-summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 12px;
margin-bottom: 12px;
border: 1px solid #e6e8ed;
border-radius: 10px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.summary-title {
font-size: 16px;
font-weight: 800;
color: #2b2f36;
}
.summary-sub {
margin-top: 4px;
font-size: 12px;
color: #8a8f99;
}
.summary-right {
display: flex;
gap: 16px;
}
.summary-item .k {
font-size: 12px;
color: #8a8f99;
}
.summary-item .v {
margin-top: 2px;
font-weight: 700;
color: #2b2f36;
}
.inner-card {
border: 1px solid #e6e8ed;
}
.empty {
color: #a0a3ad;
font-size: 13px;
padding: 10px 4px;
}
.btn-row {
display: flex;
flex-direction: column;
gap: 10px;
}
.mt10 {
margin-top: 10px;
}
.attachment-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.attachment-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border: 1px solid #e6e8ed;
border-radius: 8px;
background: #fafbfc;
}
.file-info {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.file-icon {
font-size: 24px;
color: #9aa3b2;
}
.file-details {
flex: 1;
}
.file-name {
font-weight: 600;
color: #2b2f36;
margin-bottom: 4px;
}
.file-meta {
font-size: 12px;
color: #8a8f99;
display: flex;
gap: 12px;
}
.file-time {
margin-left: 8px;
}
.receipt-panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
margin-bottom: 12px;
border: 1px dashed #d7d9df;
border-radius: 8px;
background: #fff;
}
.receipt-title {
font-weight: 700;
color: #2b2f36;
}
.page-no-text {
font-weight: 600;
color: #2b2f36;
}
.text-muted {
color: #8a8f99;
font-size: 12px;
}
.pdf-preview-container {
padding: 12px 0;
}
.pdf-viewer {
position: relative;
}
.pdf-controls {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 6px;
}
.pdf-hint {
margin-top: 12px;
padding: 12px;
background: #f8f9fa;
border-radius: 6px;
}
.stamp-config {
margin-top: 12px;
padding: 12px;
background: #fafbfc;
border-radius: 8px;
}
@media (max-width: 1200px) {
.summary-right {
display: none;
}
}
</style>