Squashed commit of the following:
commita514bf4009Author: 浅念 <email@sample.com> Date: Thu Sep 18 09:55:10 2025 +0800 Squashed commit of the following: commit9e260ddcd8Author: 浅念 <email@sample.com> Date: Thu Sep 18 09:49:33 2025 +0800 修改 kpi commit6feb3ace75Author: 浅念 <email@sample.com> Date: Thu Sep 18 09:42:44 2025 +0800 kpi 统计 commitec257a246dAuthor: 浅念 <email@sample.com> Date: Wed Sep 17 17:04:35 2025 +0800 修改 弹框表格 commitfa764852abAuthor: 浅念 <email@sample.com> Date: Wed Sep 17 15:54:35 2025 +0800 添加 账户简称 commit65f7f4a123Author: 浅念 <email@sample.com> Date: Wed Sep 17 15:10:28 2025 +0800 品牌加热门 修改 仪表盘接口 commit922cfec81dAuthor: 浅念 <email@sample.com> Date: Tue Sep 16 15:57:17 2025 +0800 调整备货单 crm 端页面 commit5c8df36f12Author: 浅念 <email@sample.com> Date: Mon Sep 15 17:14:38 2025 +0800 调整备货单 及各页面名称 commit5503a14408Author: 浅念 <email@sample.com> Date: Fri Sep 12 18:10:03 2025 +0800 账户添加公司 commit3439b45d9aAuthor: 浅念 <email@sample.com> Date: Fri Sep 12 17:53:26 2025 +0800 修改终版备货单 commit045d13eb7bAuthor: 浅念 <email@sample.com> Date: Fri Sep 12 17:49:07 2025 +0800 修改备货单 等页面 commitda690dfa06Author: 浅念 <email@sample.com> Date: Thu Sep 11 17:44:37 2025 +0800 修改 备货单 详情 commit853e9591b3Author: 浅念 <email@sample.com> Date: Wed Sep 10 18:11:39 2025 +0800 修改 备货单页面 commit9052bd1027Author: 浅念 <email@sample.com> Date: Tue Sep 9 20:53:30 2025 +0800 备货单 审核功能 commit079d9babb8Merge:ebd747991d810bAuthor: 浅念 <email@sample.com> Date: Tue Sep 9 14:51:43 2025 +0800 Merge branch 'feature/crm_pc' of http://219.157.255.213:25311/xinyouhe/art-design into feature/crm_vehicle commitebd7479573Merge:64e53b6459d306Author: 浅念 <email@sample.com> Date: Tue Sep 9 13:57:28 2025 +0800 Merge branch 'feature/crm_pc' of http://219.157.255.213:25311/xinyouhe/art-design into feature/crm_vehicle commit64e53b6ee9Author: 浅念 <email@sample.com> Date: Mon Sep 8 19:09:55 2025 +0800 备货单 加 审批流程 commit9bd7c89cb4Author: 浅念 <email@sample.com> Date: Thu Sep 4 15:09:17 2025 +0800 车辆信息，备货单 等页面 commit91d810b33aAuthor: 浅念 <email@sample.com> Date: Tue Sep 9 14:51:23 2025 +0800 添加公司搜索 commit459d306504Author: 浅念 <email@sample.com> Date: Tue Sep 9 13:56:43 2025 +0800 用户添加 公司搜索 commit8a0d4fc516Author: 浅念 <email@sample.com> Date: Thu Sep 4 14:38:09 2025 +0800 自定义跟进时间 处理 commit58f7d56f40Author: 浅念 <email@sample.com> Date: Wed Sep 3 15:13:10 2025 +0800 工单去掉 移动端不显示限制 commita91e1d7820Author: 浅念 <email@sample.com> Date: Tue Sep 2 14:13:15 2025 +0800 将编号 后移 commita9f8c5c4dcAuthor: 浅念 <email@sample.com> Date: Wed Aug 27 09:20:56 2025 +0800 客户重复通知 commitaefd43f79dAuthor: 浅念 <email@sample.com> Date: Tue Aug 26 09:55:42 2025 +0800 修改 通知详情样式 和 即时通讯 commit1bd9d163ecAuthor: 浅念 <email@sample.com> Date: Mon Aug 25 15:31:14 2025 +0800 通知 列表富文本内容显示 commitbe6093e57dAuthor: 浅念 <email@sample.com> Date: Mon Aug 25 13:34:13 2025 +0800 crm 客户添加自定义列 跟进添加图片粘贴上传 commitd83246ba8cAuthor: 浅念 <email@sample.com> Date: Fri Aug 22 18:33:58 2025 +0800 显示编号 commit329acaf68dAuthor: 浅念 <email@sample.com> Date: Fri Aug 22 18:27:26 2025 +0800 通知板块 及 功能调整 commitb319944007Author: 浅念 <email@sample.com> Date: Thu Aug 21 11:12:12 2025 +0800 调整联系方式字段为电话 列表中多个联系方式纵向排列显示 会增加公司信息的自定义输入框 排序搜索 等功能 commit70d26f0829Author: 浅念 <email@sample.com> Date: Tue Aug 19 16:18:15 2025 +0800 1.0.3 的相关功能 commit0e84bedb67Author: 浅念 <email@sample.com> Date: Fri Aug 15 16:31:55 2025 +0800 v1.0.2 更新内容 commitf5deb7b8f7Author: 浅念 <email@sample.com> Date: Wed Aug 13 19:27:49 2025 +0800 添加菜单 权限 等页面 commite797cb24deAuthor: 浅念 <email@sample.com> Date: Mon Aug 11 19:24:24 2025 +0800 添加工单附件 及样式 commit619311dfbeAuthor: chenlan <suya123456> Date: Fri Aug 8 22:13:25 2025 +0800 添加crm 归属客户 commitb402e522bfAuthor: 浅念 <email@sample.com> Date: Thu Aug 7 10:51:17 2025 +0800 询单权限校验 commitf950f665a9Author: 浅念 <email@sample.com> Date: Thu Aug 7 10:10:45 2025 +0800 添加 询单图片预览 commit8deecc8197Author: 浅念 <email@sample.com> Date: Wed Aug 6 18:36:42 2025 +0800 修改用户页面 询单 commit3e24d1905fAuthor: 浅念 <email@sample.com> Date: Tue Aug 5 18:25:32 2025 +0800 添加用户页面 客户页面接口 等 commit7542d80e38Author: 浅念 <email@sample.com> Date: Mon Aug 4 18:05:07 2025 +0800 修改 仪表盘页面样式 commite5548f95e4Author: 浅念 <email@sample.com> Date: Mon Aug 4 14:50:55 2025 +0800 修改询单字段 仪表盘页面 及添加管理端客户页面 commitd30ea5b7bfAuthor: 浅念 <email@sample.com> Date: Mon Aug 4 14:48:58 2025 +0800 添加echarts 插件 commit0e4160c5caAuthor: 浅念 <email@sample.com> Date: Fri Aug 1 18:27:22 2025 +0800 仪表盘接口 commitbd23288acdAuthor: 浅念 <email@sample.com> Date: Fri Aug 1 18:26:46 2025 +0800 修改 仪表盘 commit6bfb940881Author: 浅念 <email@sample.com> Date: Fri Aug 1 10:01:35 2025 +0800 客户列表 添加公海详情展示 commitb50f650565Author: 浅念 <email@sample.com> Date: Thu Jul 31 17:26:36 2025 +0800 修改 客户标签样式 个人信息添加邮箱 修复关闭全部页面404 commitea1dbb7af4Author: 浅念 <email@sample.com> Date: Wed Jul 30 18:50:31 2025 +0800 修改公海和询单页面 commit1bfbb95bd9Author: 浅念 <email@sample.com> Date: Wed Jul 30 17:23:09 2025 +0800 修改样式和添加用户数据显示 commita9f5f76b35Author: 浅念 <email@sample.com> Date: Wed Jul 30 15:06:03 2025 +0800 设置默认页面 commit3ea9d3d5dfAuthor: 浅念 <email@sample.com> Date: Wed Jul 30 11:46:31 2025 +0800 修改飞书登录 公司id 系统id 获取不到问题 客户及公海添加用户信息显示 commit0cef82279fAuthor: 浅念 <email@sample.com> Date: Tue Jul 29 16:42:36 2025 +0800 修改工单 客户等页面 commit695ebbcc71Author: 浅念 <email@sample.com> Date: Fri Jul 25 17:50:04 2025 +0800 修改默认值 commitffc194a1c1Author: 浅念 <email@sample.com> Date: Fri Jul 25 17:05:33 2025 +0800 飞书授权添加系统码 及登录进入页面路由 commit48b95e252fAuthor: 浅念 <email@sample.com> Date: Fri Jul 25 15:48:49 2025 +0800 回收站添加占位 commit382011d592Author: 浅念 <email@sample.com> Date: Fri Jul 25 15:11:50 2025 +0800 修改登录页样式公海数据 个人信息默认图 commit0f790269dbAuthor: 浅念 <email@sample.com> Date: Fri Jul 25 09:16:55 2025 +0800 修改字段名称 commitf18cfdb69eAuthor: 浅念 <email@sample.com> Date: Thu Jul 24 17:28:51 2025 +0800 调整代码格式 commit858147fbbdAuthor: 浅念 <email@sample.com> Date: Thu Jul 24 10:17:22 2025 +0800 修改token刷新 及修改询单详情展示 commitc333b907e6Author: 浅念 <email@sample.com> Date: Wed Jul 23 18:22:56 2025 +0800 对接询单接口 commit7979a31e36Author: 浅念 <email@sample.com> Date: Wed Jul 23 14:40:02 2025 +0800 修改代码格式 commit4a39387865Author: 浅念 <email@sample.com> Date: Wed Jul 23 14:07:13 2025 +0800 设置客户列表权限 commitfc4de02582Author: 浅念 <email@sample.com> Date: Tue Jul 22 17:08:13 2025 +0800 feat(router): 调整菜单 commit2ffe0c9753Author: 浅念 <email@sample.com> Date: Tue Jul 22 17:04:16 2025 +0800 feat(crmApi.ts): 调整结构 commitc3fb2c48d3Author: 浅念 <email@sample.com> Date: Tue Jul 22 17:00:25 2025 +0800 feat(router): 路由调整 commitc5b0a8265aAuthor: 浅念 <email@sample.com> Date: Tue Jul 22 16:54:06 2025 +0800 chore: 添加询单页面及调整菜单 commitca06c9bc46Author: 浅念 <email@sample.com> Date: Tue Jul 22 16:35:43 2025 +0800 询单页面及菜单 commit3b6de4c7faMerge:d3bb4ec85e8b9bAuthor: 浅念 <email@sample.com> Date: Tue Jul 22 09:22:20 2025 +0800 Merge branch 'master' into feature/crm_pc commitd3bb4ec6e5Merge:c7d8908d7ab6f1Author: 浅念 <email@sample.com> Date: Mon Jul 21 18:22:55 2025 +0800 Merge branch 'master' into feature/crm_pc # Conflicts: # .gitignore # src/api/crmApi.ts # src/api/usersApi.ts # src/store/modules/user.ts # src/utils/http/index.ts # src/views/auth/login/index.vue # src/views/crmpc/customer/Show.vue # src/views/crmpc/customer/index.vue commitc7d890809cAuthor: 浅念 <email@sample.com> Date: Mon Jul 21 18:12:16 2025 +0800 添加系统码 commit31cd18fadeAuthor: 浅念 <email@sample.com> Date: Mon Jul 21 18:02:48 2025 +0800 Merge branch 'master' into feature/crm_pc # Conflicts: # .gitignore commit59c9c97c08Author: 浅念 <email@sample.com> Date: Mon Jul 21 17:56:52 2025 +0800 Merge branch 'master' into feature/crm_pc # Conflicts: # .gitignore commitd4b577c42eAuthor: 浅念 <email@sample.com> Date: Mon Jul 21 13:03:56 2025 +0800 feat(crm): 添加相关图片 commite4967760b7Merge:0c6766685102fcAuthor: 浅念 <email@sample.com> Date: Mon Jul 21 11:25:49 2025 +0800 Finish crm_pc commit85102fcf32Author: 浅念 <email@sample.com> Date: Mon Jul 21 11:24:06 2025 +0800 crm 接口对接 commit0c67666793Author: 浅念 <email@sample.com> Date: Wed Jul 16 17:18:14 2025 +0800 添加上传头部信息 commita41c75f703Author: 浅念 <email@sample.com> Date: Tue Jul 15 09:40:53 2025 +0800 修改页面 commit22ae0e86c8Author: 浅念 <email@sample.com> Date: Mon Jul 14 17:59:02 2025 +0800 修改页面 commit812e3c4b0cAuthor: 浅念 <email@sample.com> Date: Mon Jul 14 10:09:10 2025 +0800 修改菜单问题 commit2ad479b006Author: 浅念 <email@sample.com> Date: Fri Jul 11 19:45:57 2025 +0800 修改样式 commit5802e157bfAuthor: 浅念 <email@sample.com> Date: Fri Jul 11 19:43:34 2025 +0800 修改工单 commit713d43f7b4Author: 浅念 <email@sample.com> Date: Fri Jul 11 18:37:16 2025 +0800 添加登录 commit719911918fAuthor: 浅念 <email@sample.com> Date: Fri Jul 4 17:16:38 2025 +0800 项目创建 commitce47b39fa5Author: 浅念 <email@sample.com> Date: Wed Jul 2 09:37:51 2025 +0800 删除 # Conflicts: # src/App.vue # src/api/adminApi.ts # src/api/crmApi.ts # src/api/menuApi.ts # src/api/systemApi.ts # src/api/usersApi.ts # src/components/core/layouts/art-header-bar/index.vue # src/components/core/layouts/art-page-content/index.vue # src/router/routes/asyncRoutes.ts # src/router/routesAlias.ts # src/views/admin/customer/customeraudit.vue # src/views/admin/customer/highseas.vue # src/views/admin/customer/index.vue # src/views/admin/inquiry_system/index.vue # src/views/admin/system/company.vue # src/views/admin/system/feishu_app.vue # src/views/admin/system/menu/index.vue # src/views/admin/system/role/index.vue # src/views/admin/system/systems.vue # src/views/admin/user/index.vue # src/views/admin/user/user_info.vue # src/views/auth/login/index.vue # src/views/crmpc/customer/Add.vue # src/views/crmpc/customer/Edit.vue # src/views/crmpc/customer/Followadd.vue # src/views/crmpc/customer/Show.vue # src/views/crmpc/customer/index.vue # src/views/crmpc/highseas/index.vue # src/views/crmpc/recycle/index.vue # src/views/crmpc/team/team_customer.vue # src/views/crmpc/team/user_customer.vue # src/views/dashboard/console/index.vue # src/views/system/user-center/index.vue # src/views/work/myOrder/index.vue # src/views/work/order/index.vue
This commit is contained in:
浅念
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<div class="stocking-show-page">
|
||||
<div class="boxshadow">
|
||||
<OrderDetailContent :orderData="orderDialog.orderData" />
|
||||
</div>
|
||||
<!-- 上传合同 -->
|
||||
<div class="boxshadow">
|
||||
<div class="form-title">
|
||||
<span class="border"></span>
|
||||
<span class="title">合同</span>
|
||||
</div>
|
||||
<div class="file-preview">
|
||||
<div v-if="contractFile" class="contract-file">
|
||||
<div v-if="isImageFile(contractFile)" class="image-preview">
|
||||
<img
|
||||
:src="contractFile.url"
|
||||
:alt="contractFile.name"
|
||||
class="preview-image"
|
||||
@click="previewImage(contractFile)"
|
||||
/>
|
||||
<div class="file-info">
|
||||
<span class="file-name">{{ contractFile.name }}</span>
|
||||
<el-button type="text" size="small" @click="previewImage(contractFile)">
|
||||
预览
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="document-preview">
|
||||
<div class="file-icon">
|
||||
<i class="iconfont-sys"></i>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<span class="file-name">{{ contractFile.name }}</span>
|
||||
<el-button type="primary" size="small" @click="downloadFile(contractFile)">
|
||||
下载
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-file">
|
||||
<i class="iconfont-sys"></i>
|
||||
<span>暂无合同文件</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxshadow">
|
||||
<div class="form-title">
|
||||
<span class="border"></span>
|
||||
<span class="title">审批记录</span>
|
||||
</div>
|
||||
<div class="approval-timeline">
|
||||
<div v-for="(rec, idx) in approvalRecords" :key="idx" class="timeline-item">
|
||||
<div class="left">
|
||||
<div class="avatar-box">
|
||||
<span class="initial">{{ rec.name?.slice(0, 1) || '—' }}</span>
|
||||
<i v-if="rec.approved" class="status-dot iconfont-sys"></i>
|
||||
<i v-if="rec.rejected" class="status-dot rejected"></i>
|
||||
<i v-else-if="rec.pending" class="status-dot pending iconfont-sys"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="row name-role">
|
||||
<span class="name">{{ rec.name }}</span>
|
||||
<span class="role">（{{ rec.role || rec.type || '审批人' }}）</span>
|
||||
</div>
|
||||
<div class="row time">{{ rec.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!approvalRecords.length" class="empty">暂无审批记录</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxshadow" v-if="status == 'pending'">
|
||||
<div class="form-title">
|
||||
<span class="border"></span>
|
||||
<span class="title">审批</span>
|
||||
</div>
|
||||
<div class="">
|
||||
<ElRow :gutter="12">
|
||||
<ElCol :span="24">
|
||||
<ElFormItem label="备注：">
|
||||
<el-input
|
||||
v-model="approvalNotes"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入备注信息"
|
||||
class="approval-notes"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-card" v-if="status == 'pending'">
|
||||
<!-- 底部信息 -->
|
||||
<div class="submit-wrap">
|
||||
<ElButton type="primary" plain size="large" class="submit-btn" @click="handleSubmit('reject')"
|
||||
>驳回</ElButton
|
||||
>
|
||||
<ElButton type="primary" size="large" class="submit-btn" @click="handleSubmit('approve')"
|
||||
>同意</ElButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PDF 预览弹窗 -->
|
||||
<el-dialog
|
||||
v-model="pdf.visible"
|
||||
title="打印预览"
|
||||
width="80%"
|
||||
top="40px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div style="height: 70vh; display: flex; flex-direction: column; gap: 12px">
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px">
|
||||
<!-- <el-button type="primary" @click="print()">打印</el-button> -->
|
||||
<el-button @click="download">下载</el-button>
|
||||
</div>
|
||||
<iframe
|
||||
v-if="pdf.blobUrl || pdf.url"
|
||||
ref="frameRef"
|
||||
:src="pdf.blobUrl || pdf.url"
|
||||
style="flex: 1; width: 100%; border: 1px solid #eee; border-radius: 6px"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CrmService } from '@/api/crmApi'
|
||||
import { commonService } from '@/api/commonApi'
|
||||
// import { manageService } from '@/api/adminApi'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { usePdfPreview } from '@/composables/usePdfPreview'
|
||||
import { router } from '@/router'
|
||||
import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
|
||||
import type { OrderData } from '@/composables/useOrderDetailDialog'
|
||||
|
||||
defineOptions({ name: 'CrmApprovalDetail' }) // 定义组件名称，用于 KeepAlive 缓存控制
|
||||
|
||||
const { pdf, frameRef, download } = usePdfPreview()
|
||||
const route = useRoute()
|
||||
const orderDialog = reactive({
|
||||
orderData: {} as OrderData
|
||||
})
|
||||
// const approval_id = route.query.id
|
||||
const status = route.query.status
|
||||
const stocking_id = route.query.biz_id
|
||||
const instance_id = route.query.instance_id
|
||||
const stockingInfo = ref<any>({})
|
||||
const approvalNotes = ref('')
|
||||
const approvalAction = ref('')
|
||||
const handleSubmit = async (approvalAction: string) => {
|
||||
try {
|
||||
// 这里调用审批API
|
||||
const { message } = await CrmService.stockapprovalpass({
|
||||
instance_id: instance_id,
|
||||
action: approvalAction,
|
||||
comment: approvalNotes.value
|
||||
})
|
||||
router.push('/crmpc/approval/stocking_auth')
|
||||
ElMessage.success(message)
|
||||
} catch {
|
||||
ElMessage.error('提交失败')
|
||||
}
|
||||
}
|
||||
// 审批记录（先填充假数据展示）
|
||||
const approvalRecords = ref<any[]>([])
|
||||
const getDictItemSelectlist = ref<any[]>([])
|
||||
const getDictItemSelect = async () => {
|
||||
const res = await commonService.getDictItemSelect({ dict_id: '18' })
|
||||
getDictItemSelectlist.value = res
|
||||
}
|
||||
|
||||
// 合同文件
|
||||
const contractFile = ref<{ name: string; url: string; file_name: string } | null>(null)
|
||||
|
||||
|
||||
//获取详情并映射到回显模型
|
||||
const getdetilfn = async () => {
|
||||
const res = await CrmService.checkStock({ id: stocking_id })
|
||||
const orderData: OrderData = res
|
||||
orderDialog.orderData = orderData
|
||||
stockingInfo.value = res
|
||||
// 合同文件
|
||||
if (res?.contract) {
|
||||
contractFile.value = {
|
||||
name: '合同文件',
|
||||
url: res.contract_url || res.contract,
|
||||
file_name: res.contract
|
||||
}
|
||||
}
|
||||
// 审批记录（兼容多种字段）
|
||||
const resstockapprovallogs = await CrmService.stockapprovallogs({ instance_id: instance_id })
|
||||
console.log(resstockapprovallogs)
|
||||
const historyList = resstockapprovallogs
|
||||
if (historyList.length > 0) {
|
||||
approvalRecords.value = historyList.map((h: any) => ({
|
||||
name: h?.initiator_name ? h?.initiator_name : h?.name,
|
||||
role: h?.index == -1 ? '申请人' : '审批人',
|
||||
time: h?.finished_at || '',
|
||||
approved: h?.status === 'approved' || h?.status === 'submitted',
|
||||
rejected: h?.status === 'rejected',
|
||||
pending: h?.status != 'approved' && h?.status != 'rejected' && h?.status != 'submitted'
|
||||
}))
|
||||
}
|
||||
}
|
||||
// 判断是否为图片文件
|
||||
const isImageFile = (file: { name: string; url: string; file_name: string }) => {
|
||||
// 检查文件名
|
||||
if (file.name && /\.(jpg|jpeg|png|gif|webp)$/i.test(file.name)) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 检查file_name字段
|
||||
if (file.file_name && file.file_name.startsWith('image/')) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 检查URL中的文件扩展名（去除查询参数）
|
||||
if (file.url) {
|
||||
const urlWithoutParams = file.url.split('?')[0] // 移除查询参数
|
||||
if (/\.(jpg|jpeg|png|gif|webp)$/i.test(urlWithoutParams)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
const previewImage = (file: { name: string; url: string; file_name: string }) => {
|
||||
// 创建图片预览弹窗
|
||||
const imagePreview = document.createElement('div')
|
||||
imagePreview.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
const image = document.createElement('img')
|
||||
image.src = file.url
|
||||
image.alt = file.name
|
||||
image.style.cssText = `
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
`
|
||||
|
||||
const closeBtn = document.createElement('div')
|
||||
closeBtn.innerHTML = '×'
|
||||
closeBtn.style.cssText = `
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
`
|
||||
|
||||
imagePreview.appendChild(image)
|
||||
imagePreview.appendChild(closeBtn)
|
||||
document.body.appendChild(imagePreview)
|
||||
|
||||
// 点击关闭
|
||||
const closePreview = () => {
|
||||
document.body.removeChild(imagePreview)
|
||||
}
|
||||
|
||||
imagePreview.addEventListener('click', closePreview)
|
||||
closeBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation()
|
||||
closePreview()
|
||||
})
|
||||
|
||||
// ESC键关闭
|
||||
const handleKeydown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
closePreview()
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
}
|
||||
|
||||
// 下载文件
|
||||
const downloadFile = (file: { name: string; url: string; file_name: string }) => {
|
||||
try {
|
||||
const link = document.createElement('a')
|
||||
link.href = file.url
|
||||
link.download = file.name
|
||||
link.target = '_blank'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
} catch (error) {
|
||||
console.error('下载失败:', error)
|
||||
ElMessage.error('下载失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDictItemSelect()
|
||||
getdetilfn()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stocking-show-page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 12px;
|
||||
color: #333333;
|
||||
.header-left {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.sub {
|
||||
color: #333333;
|
||||
}
|
||||
.mr40 {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
.form-title {
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.form-title .title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.items-wrap {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.item-row {
|
||||
padding: 8px 0;
|
||||
}
|
||||
:deep(.el-input.is-disabled .el-input__inner) {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
padding: 20px;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contract-file {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
object-fit: contain;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.preview-image:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.document-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #409eff;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.no-file {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.no-file i {
|
||||
font-size: 48px;
|
||||
color: #ddd;
|
||||
}
|
||||
.submit-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 0 8px;
|
||||
}
|
||||
|
||||
/* 审批记录 时间线 */
|
||||
.approval-timeline {
|
||||
padding: 8px 4px 8px 0;
|
||||
}
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.timeline-item + .timeline-item {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.left {
|
||||
width: 46px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.avatar-box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background: #3d7bff;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
.status-dot {
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
// width: 14px;
|
||||
// height: 14px;
|
||||
font-size: 9px;
|
||||
padding: 3px 1px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.status-dot.pending {
|
||||
background: #3471ff;
|
||||
padding: 3px 3px;
|
||||
}
|
||||
.status-dot.rejected {
|
||||
background: #ff0000;
|
||||
padding: 3px 3px;
|
||||
}
|
||||
/* 连接下一个节点的虚线 */
|
||||
.timeline-item:not(:last-child) .left::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 52px; /* avatar 46px + 间距 6px */
|
||||
left: 23px; /* 盒子宽度一半，确保竖线居中 */
|
||||
width: 0;
|
||||
height: calc(100% + 16px); /* 加上相邻项之间的间距 */
|
||||
border-left: 2px dotted #bfbfbf;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.row.name-role {
|
||||
color: #222;
|
||||
}
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.role {
|
||||
color: #666;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.time {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.empty {
|
||||
color: #999;
|
||||
padding: 8px 0 4px 4px;
|
||||
}
|
||||
.submit-wrap {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 24px 0 8px;
|
||||
width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user