feat(票证签发审核): 添加详情页路由和查看功能
添加票证签发审核详情页路由配置，实现从列表页跳转查看详情功能
This commit is contained in:
parent
8643d4174f
commit
1b401db79b
|
|
@ -225,6 +225,14 @@ export const constantRoutes = [
|
||||||
name: "TicketIssueAudit",
|
name: "TicketIssueAudit",
|
||||||
meta: { title: "票证签发审核", icon: "table" },
|
meta: { title: "票证签发审核", icon: "table" },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/proprietor/TicketIssueAudit/Detail",
|
||||||
|
component: () =>
|
||||||
|
import("@/views/proprietor/TicketIssueAudit/Detail.vue"),
|
||||||
|
name: "TicketIssueAuditDetail",
|
||||||
|
hidden: true,
|
||||||
|
meta: { title: "票证签发审核详情", icon: "table" },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -84,6 +84,8 @@
|
||||||
<script setup name="Index">
|
<script setup name="Index">
|
||||||
import DialogBox from "./DialogBox.vue";
|
import DialogBox from "./DialogBox.vue";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
const router = useRouter();
|
||||||
const activeTab = ref("1"); // 当前选中的tab
|
const activeTab = ref("1"); // 当前选中的tab
|
||||||
|
|
||||||
// 查询表单数据
|
// 查询表单数据
|
||||||
|
|
@ -127,6 +129,17 @@ const handleAuditClick = (row) => {
|
||||||
dialogShow.value = true;
|
dialogShow.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 查询详情
|
||||||
|
const handleDetailClick = (row) => {
|
||||||
|
console.log("查看详情", row);
|
||||||
|
router.push({
|
||||||
|
path: "/proprietor/TicketIssueAudit/Detail",
|
||||||
|
query: {
|
||||||
|
id: row.id
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
console.log('关闭弹窗')
|
console.log('关闭弹窗')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue