liangbin
/
JSDW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(票证签发审核): 添加详情页路由和查看功能 

添加票证签发审核详情页路由配置，实现从列表页跳转查看详情功能
This commit is contained in:
liangbin 2026-01-13 16:34:39 +08:00
parent 8643d4174f
commit 1b401db79b
3 changed files with 316 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/router/index.js
View File

@ -225,6 +225,14 @@ export const constantRoutes = [
name: "TicketIssueAudit",
meta: { title: "票证签发审核", icon: "table" },
},
{
path: "/proprietor/TicketIssueAudit/Detail",
component: () =>
import("@/views/proprietor/TicketIssueAudit/Detail.vue"),
name: "TicketIssueAuditDetail",
hidden: true,
meta: { title: "票证签发审核详情", icon: "table" },
},
],
},

295
src/views/Proprietor/TicketIssueAudit/Detail.vue Normal file
View File

@ -0,0 +1,295 @@
<!-- 业主模块-票证签发审核-列表页 -->
<template>
<div class="MainBox">
<div class="ticket-detail-container">
<!-- 标题 -->
<div class="ticket-title">
<h1>[TICKET-20250405-001]</h1>
<h2>审核与签发</h2>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 左侧基础信息 -->
<div class="left-section">
<div class="section-card">
<h3 class="section-title">基础信息</h3>
<div class="info-row">
<span class="label">项目名称:</span>
<span class="value">数据中心二期扩建工程</span>
</div>
<div class="info-row">
<span class="label">作业地点:</span>
<span class="value">北京市朝阳区CBD核心区</span>
</div>
<div class="info-row">
<span class="label">作业时间:</span>
<span class="value">2025年4月10日上午9:00至下午5:00</span>
</div>
<div class="info-row">
<span class="label">施工单位:</span>
<span class="value">北京建工集团有限责任公司</span>
</div>
<div class="info-row">
<span class="label">工作负责人:</span>
<span class="value">张伟 (一级建造师)</span>
</div>
<div class="info-row">
<span class="label">作业班成员:</span>
<span class="value">李强 (电工)、王磊 (焊工)、赵敏 (安全员)</span>
</div>
</div>
<div class="section-card">
<h3 class="section-title">核心内容</h3>
<div class="info-row">
<span class="label">工作内容描述:</span>
<div class="value">对数据中心机房内部电力线路进行升级改造，更换老旧电缆并新增配电柜，确保供电稳定性和安全性。</div>
</div>
<div class="info-row">
<span class="label">风险类型:</span>
<div class="risk-tags">
<el-tag type="danger">高空作业</el-tag>
<el-tag type="warning">电气危险</el-tag>
<el-tag type="info">有限空间</el-tag>
</div>
</div>
<div class="info-row">
<span class="label">安全措施清单:</span>
<div class="value">
<div class="check-item">✓ 佩戴安全帽和防滑鞋</div>
<div class="check-item">✓ 设置警戒线和警示标志</div>
<div class="check-item">✓ 安排专职安全监督员</div>
<div class="check-item">✓ 断电操作并挂锁标识</div>
</div>
</div>
<div class="info-row">
<span class="label">附件预览:</span>
<div class="value">
<div class="attachment-item">施工资质证书.pdf</div>
<div class="attachment-item">施工方案.docx</div>
<div class="attachment-item">现场勘查照片.jpg</div>
</div>
</div>
</div>
<div class="section-card">
<h3 class="section-title">前置审核记录</h3>
<div class="record-item">
<div class="record-title">作业单位审核</div>
<div class="record-content">
<div>审核人: 刘洋 | 时间: 2025-04-03 14:22</div>
<div>已完成初步资料审查，符合申报要求。</div>
</div>
</div>
<div class="record-item">
<div class="record-title">监理单位审核</div>
<div class="record-content">
<div>审核人: 陈涛 | 时间: 2025-04-04 10:15</div>
<div>现场条件核实无误，同意上报审批。</div>
</div>
</div>
</div>
</div>
<!-- 中间审核要点 -->
<div class="middle-section">
<div class="section-card">
<h3 class="section-title">审核要点确认</h3>
<div class="checklist-item">
<div class="checklist-title">1. 施工作业必要性</div>
<div class="radio-group">
<el-radio v-model="formData.necessary" label="1">必要</el-radio>
<el-radio v-model="formData.necessary" label="0">不必要</el-radio>
</div>
</div>
<div class="checklist-item">
<div class="checklist-title">2. 施工作业可行性</div>
<div class="radio-group">
<el-radio v-model="formData.feasible" label="1">可行</el-radio>
<el-radio v-model="formData.feasible" label="0">不可行</el-radio>
</div>
</div>
<div class="checklist-item">
<div class="checklist-title">3. 票证内容完整性</div>
<div class="checkbox-group">
<el-checkbox v-model="formData.completeness" label="基础信息完整">基础信息完整</el-checkbox>
<el-checkbox v-model="formData.completeness" label="风险描述清晰">风险描述清晰</el-checkbox>
<el-checkbox v-model="formData.completeness" label="安全措施完备">安全措施完备</el-checkbox>
<el-checkbox v-model="formData.completeness" label="附件齐全">附件齐全</el-checkbox>
</div>
</div>
<div class="checklist-item">
<div class="checklist-title">4. 施工条件确认</div>
<div class="radio-group">
<el-radio v-model="formData.conditionsMet" label="1">符合</el-radio>
<el-radio v-model="formData.conditionsMet" label="0">不符合</el-radio>
</div>
</div>
</div>
</div>
<!-- 右侧操作控制 -->
<div class="right-section">
<div class="section-card">
<h3 class="section-title">操作控制</h3>
<div class="info-row">
<span class="label">签发人</span>
<el-select v-model="formData.issuer" placeholder="请选择签发人">
<el-option label="张伟 (当前登录人)" value="zhangwei"></el-option>
</el-select>
</div>
<div class="info-row">
<span class="label">审核意见*</span>
<el-input v-model="formData.auditOpinion" type="textarea" rows="6" placeholder="请填写您的审核意见..."></el-input>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const formData = ref({
necessary: null,
feasible: null,
completeness: [],
conditionsMet: null,
issuer: 'zhangwei',
auditOpinion: ''
})
</script>
<style scoped lang="scss">
.MainBox {
padding: 20px;
height: 100%;
background: #F9FAFB;
}
.ticket-detail-container {
max-width: 1600px;
margin: 0 auto;
}
.ticket-title {
margin-bottom: 20px;
h1 {
font-size: 24px;
font-weight: bold;
margin: 0;
color: #303133;
}
h2 {
font-size: 18px;
margin: 5px 0 0 0;
color: #606266;
}
}
.main-content {
display: flex;
gap: 20px;
align-items: stretch;
}
.left-section, .middle-section, .right-section {
flex: 1;
display: flex;
flex-direction: column;
}
.section-card {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
flex: 1;
display: flex;
flex-direction: column;
}
.section-title {
font-size: 16px;
font-weight: bold;
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid #E4E7ED;
color: #303133;
}
.info-row {
margin-bottom: 15px;
display: flex;
flex-direction: column;
gap: 5px;
.label {
font-weight: bold;
color: #606266;
font-size: 14px;
}
.value {
color: #303133;
font-size: 14px;
line-height: 1.6;
}
}
.risk-tags {
display: flex;
gap: 10px;
}
.check-item {
margin-bottom: 5px;
color: #303133;
}
.attachment-item {
margin-bottom: 5px;
color: #409EFF;
cursor: pointer;
}
.record-item {
margin-bottom: 20px;
.record-title {
font-weight: bold;
color: #303133;
margin-bottom: 5px;
}
.record-content {
color: #606266;
line-height: 1.6;
}
}
.checklist-item {
margin-bottom: 20px;
.checklist-title {
font-weight: bold;
color: #303133;
margin-bottom: 10px;
}
}
.radio-group, .checkbox-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.action-buttons {
margin-top: 20px;
}
</style>

13
src/views/Proprietor/TicketIssueAudit/index.vue
View File

@ -84,6 +84,8 @@
<script setup name="Index">
import DialogBox from "./DialogBox.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const activeTab = ref("1"); // 当前选中的tab
// 查询表单数据
@ -127,6 +129,17 @@ const handleAuditClick = (row) => {
dialogShow.value = true;
}
// 查询详情
const handleDetailClick = (row) => {
console.log("查看详情", row);
router.push({
path: "/proprietor/TicketIssueAudit/Detail",
query: {
id: row.id
}
});
}
// 关闭弹窗
const handleCancel = () => {
console.log('关闭弹窗')