招标解析查看页面
This commit is contained in:
parent
4bbb26ac55
commit
655d94daa1
|
|
@ -3,86 +3,90 @@
|
|||
<div class="content-header">
|
||||
<el-button class="reset-btn" @click="handleClose">返回</el-button>
|
||||
</div>
|
||||
<el-card class="analysis-detail-card">
|
||||
<template slot="header">
|
||||
<div class="card-header">
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="项目信息">
|
||||
<h3>项目信息</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="analysis-detail-content">
|
||||
<!-- 两列布局的字段 -->
|
||||
<el-row :gutter="24" class="detail-row">
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">项目名称</div>
|
||||
<div class="field-value">{{ detailData.proName || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">项目编号</div>
|
||||
<div class="field-value">{{ detailData.proCode || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24" class="detail-row">
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">招标人</div>
|
||||
<div class="field-value">{{ detailData.bidder || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">代理机构</div>
|
||||
<div class="field-value">{{ detailData.agency || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24" class="detail-row">
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">开标时间</div>
|
||||
<div class="field-value">{{ detailData.openTime || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">开标方式</div>
|
||||
<div class="field-value">{{ detailData.openMethod || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 项目简介 - 占满宽度 -->
|
||||
<div class="detail-field full-width">
|
||||
<div class="field-label">项目简介</div>
|
||||
<div class="field-value description-value">{{ detailData.proDescription || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="table-container">
|
||||
<TableModel :showSearch="false" :showOperation="true" :showRightTools="false" ref="detailTableRef"
|
||||
:columnsList="detailColumnsList" :request-api="listAPI" :sendParams="sendParams" :handleColWidth="180">
|
||||
<template slot="tableTitle">
|
||||
<div class="content-scrollable">
|
||||
<el-card class="analysis-detail-card">
|
||||
<template slot="header">
|
||||
<div class="card-header">
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="标的信息">
|
||||
<h3>标的信息</h3>
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="项目信息">
|
||||
<h3>项目信息</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="analysis-detail-content">
|
||||
<!-- 两列布局的字段 -->
|
||||
<el-row :gutter="24" class="detail-row">
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">项目名称</div>
|
||||
<div class="field-value">{{ detailData.proName || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">项目编号</div>
|
||||
<div class="field-value">{{ detailData.proCode || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:edit']" class="action-btn" style="#FE9400"
|
||||
@click="handleUpdate(data)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
<el-row :gutter="24" class="detail-row">
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">招标人</div>
|
||||
<div class="field-value">{{ detailData.bidder || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">代理机构</div>
|
||||
<div class="field-value">{{ detailData.agency || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24" class="detail-row">
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">开标时间</div>
|
||||
<div class="field-value">{{ detailData.openTime || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="detail-col">
|
||||
<div class="detail-field">
|
||||
<div class="field-label">开标方式</div>
|
||||
<div class="field-value">{{ detailData.openMethod || '--' }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 项目简介 - 占满宽度 -->
|
||||
<div class="detail-field full-width">
|
||||
<div class="field-label">项目简介</div>
|
||||
<div class="field-value description-value">{{ detailData.proDescription || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="table-container">
|
||||
<TableModel :showSearch="false" :showOperation="true" :showRightTools="false" ref="detailTableRef"
|
||||
:columnsList="detailColumnsList" :request-api="listAPI" :sendParams="sendParams"
|
||||
:handleColWidth="180">
|
||||
<template slot="tableTitle">
|
||||
<div class="card-header">
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="标的信息">
|
||||
<h3>标的信息</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:edit']" class="action-btn"
|
||||
style="#FE9400" @click="handleUpdate(data)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
</div>
|
||||
</div>
|
||||
<BidForm v-if="showBidForm" :width="600" :rowData="detailData" :title="title" @closeDialog="showBidForm = false"/>
|
||||
<BidForm v-if="showBidForm" :width="600" :rowData="detailData" :title="title"
|
||||
@closeDialog="showBidForm = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -180,8 +184,35 @@ export default {
|
|||
.analysis-detail-container {
|
||||
padding: 24px;
|
||||
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||||
min-height: 100vh;
|
||||
height: calc(100vh - 84px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-scrollable {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 6px; // 为滚动条留出空间
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
|
|
@ -217,6 +248,7 @@ export default {
|
|||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
|
||||
border: none;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
::v-deep .el-card__header {
|
||||
|
|
@ -262,8 +294,8 @@ export default {
|
|||
|
||||
.detail-field {
|
||||
.field-label {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
color: #424242;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -291,4 +323,8 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- 小型弹窗,用于完成,删除,保存等操作 -->
|
||||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||
<div>
|
||||
<div class="dialog-content-scrollable">
|
||||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" label-position="top">
|
||||
<el-form-item label="标的名称" prop="markName">
|
||||
<el-input v-model.trim="form.markName" placeholder="请输入标的名称" clearable show-word-limit
|
||||
|
|
@ -264,15 +264,38 @@ export default {
|
|||
.w700 ::v-deep .el-dialog {
|
||||
width: 700px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 5vh !important;
|
||||
margin-bottom: 5vh !important;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog {
|
||||
width: 500px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 5vh !important;
|
||||
margin-bottom: 5vh !important;
|
||||
}
|
||||
|
||||
// 弹窗主体区域
|
||||
.w500 ::v-deep .el-dialog__body,
|
||||
.w700 ::v-deep .el-dialog__body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.w500 ::v-deep .el-dialog__header,
|
||||
.w700 ::v-deep .el-dialog__header {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -331,5 +354,33 @@ export default {
|
|||
|
||||
::v-deep .el-dialog__footer {
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 内容区域可滚动
|
||||
.dialog-content-scrollable {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 6px;
|
||||
max-height: calc(90vh - 120px); // 减去头部和底部的高度
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue