标段解析
This commit is contained in:
parent
655d94daa1
commit
772f589465
|
|
@ -3,18 +3,50 @@
|
|||
<div>
|
||||
<!-- 表单搜索 -->
|
||||
<el-card v-show="showSearch" class="search-card">
|
||||
<el-form :inline="true" ref="queryFormRef" :rules="formRules" :model="queryParams" label-width="auto">
|
||||
<el-form-item :key="v" :prop="item.f_model" v-for="(item, v) in formLabel"
|
||||
:label="item.isShow ? item.f_label : ''">
|
||||
<el-input clearable :maxlength="item.f_max || 50" v-if="item.f_type === 'ipt'"
|
||||
v-model.trim="queryParams[item.f_model]" :placeholder="`请输入${item.f_label}`"
|
||||
:style="{ width: item.f_width || '180px' }" />
|
||||
<el-select clearable filterable v-if="item.f_type === 'sel'" v-model="queryParams[item.f_model]"
|
||||
:placeholder="`请选择${item.f_label}`" :style="{ width: item.f_width || '180px' }">
|
||||
<el-option :key="v" :label="sel.label" :value="sel.value" v-for="(sel, v) in item.f_selList" />
|
||||
<el-form
|
||||
:inline="true"
|
||||
ref="queryFormRef"
|
||||
:rules="formRules"
|
||||
:model="queryParams"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-form-item
|
||||
:key="v"
|
||||
:prop="item.f_model"
|
||||
v-for="(item, v) in formLabel"
|
||||
:label="item.isShow ? item.f_label : ''"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
:maxlength="item.f_max || 50"
|
||||
v-if="item.f_type === 'ipt'"
|
||||
v-model.trim="queryParams[item.f_model]"
|
||||
:placeholder="`请输入${item.f_label}`"
|
||||
:style="{ width: item.f_width || '180px' }"
|
||||
/>
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
v-if="item.f_type === 'sel'"
|
||||
v-model="queryParams[item.f_model]"
|
||||
:placeholder="`请选择${item.f_label}`"
|
||||
:style="{ width: item.f_width || '180px' }"
|
||||
>
|
||||
<el-option
|
||||
:key="v"
|
||||
:label="sel.label"
|
||||
:value="sel.value"
|
||||
v-for="(sel, v) in item.f_selList"
|
||||
/>
|
||||
</el-select>
|
||||
<el-cascader clearable style="width: 180px" :show-all-levels="false" :props="item.optionProps"
|
||||
:options="item.f_selList" v-if="item.f_type === 'selCasAdd'" v-model="queryParams[item.f_model]"
|
||||
<el-cascader
|
||||
clearable
|
||||
style="width: 180px"
|
||||
:show-all-levels="false"
|
||||
:props="item.optionProps"
|
||||
:options="item.f_selList"
|
||||
v-if="item.f_type === 'selCasAdd'"
|
||||
v-model="queryParams[item.f_model]"
|
||||
@change="
|
||||
handleCasAdd(
|
||||
$event,
|
||||
|
|
@ -22,27 +54,59 @@
|
|||
cascadeFunc,
|
||||
extraTableProp,
|
||||
)
|
||||
" />
|
||||
<el-cascader style="width: 180px" :show-all-levels="false" :options="item.f_selList"
|
||||
:props="item.optionProps" v-if="item.f_type === 'selCas'" v-model="queryParams[item.f_model]"
|
||||
@change="handleCas($event, item.f_model)" />
|
||||
<el-date-picker type="date" style="width: 240px" value-format="yyyy-MM-dd"
|
||||
v-if="item.f_type === 'date'" v-model="queryParams[item.f_model]"
|
||||
:placeholder="`请选择${item.f_label}`" />
|
||||
<el-date-picker type="daterange" style="width: 240px" range-separator="至" value-format="yyyy-MM-dd"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" v-if="item.f_type === 'dateRange'"
|
||||
v-model="queryParams[item.f_model]" @change="onChangeTime($event, item.dateType)"
|
||||
:picker-options="pickerOptions" />
|
||||
<el-input-number :min="0" style="width: 240px" v-if="item.f_type === 'num'"
|
||||
v-model="queryParams[item.f_model]" />
|
||||
"
|
||||
/>
|
||||
<el-cascader
|
||||
style="width: 180px"
|
||||
:show-all-levels="false"
|
||||
:options="item.f_selList"
|
||||
:props="item.optionProps"
|
||||
v-if="item.f_type === 'selCas'"
|
||||
v-model="queryParams[item.f_model]"
|
||||
@change="handleCas($event, item.f_model)"
|
||||
/>
|
||||
<el-date-picker
|
||||
type="date"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-if="item.f_type === 'date'"
|
||||
v-model="queryParams[item.f_model]"
|
||||
:placeholder="`请选择${item.f_label}`"
|
||||
/>
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
style="width: 240px"
|
||||
range-separator="至"
|
||||
value-format="yyyy-MM-dd"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
v-if="item.f_type === 'dateRange'"
|
||||
v-model="queryParams[item.f_model]"
|
||||
@change="onChangeTime($event, item.dateType)"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
<el-input-number
|
||||
:min="0"
|
||||
style="width: 240px"
|
||||
v-if="item.f_type === 'num'"
|
||||
v-model="queryParams[item.f_model]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 自定义搜索插槽：父组件可自行插入 el-form-item -->
|
||||
<slot name="form" :queryParams="queryParams"></slot>
|
||||
<el-form-item v-if="showBtnCrews">
|
||||
<el-button v-if="showQueryButtons" class="query-btn" @click="handleQuery">
|
||||
<el-button
|
||||
v-if="showQueryButtons"
|
||||
class="query-btn"
|
||||
@click="handleQuery"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button v-if="showQueryButtons" class="reset-btn" @click="resetQuery">
|
||||
<el-button
|
||||
v-if="showQueryButtons"
|
||||
class="reset-btn"
|
||||
@click="resetQuery"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
|
||||
|
|
@ -52,15 +116,26 @@
|
|||
</el-card>
|
||||
<!-- 按钮集群 -->
|
||||
<el-row class="btn-container">
|
||||
<ToolbarModel v-if="showRightTools" :columns="columnCheckList" @queryTable="getTableList"
|
||||
:showSearch.sync="showSearch" :handleShow.sync="handleShow" :indexNumShow.sync="indexNumShow"
|
||||
:selectionShow.sync="selectionShow" :isSelectShow="isSelectShow" :showOperation="showOperation" />
|
||||
<ToolbarModel
|
||||
v-if="showRightTools"
|
||||
:columns="columnCheckList"
|
||||
@queryTable="getTableList"
|
||||
:showSearch.sync="showSearch"
|
||||
:handleShow.sync="handleShow"
|
||||
:indexNumShow.sync="indexNumShow"
|
||||
:selectionShow.sync="selectionShow"
|
||||
:isSelectShow="isSelectShow"
|
||||
:showOperation="showOperation"
|
||||
/>
|
||||
</el-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-card class="table-card" :style="tableCardStyle">
|
||||
<!-- 表格头部插槽 -->
|
||||
<div class="table-header" v-if="$slots.tableTitle || $slots.tableActions">
|
||||
<div
|
||||
class="table-header"
|
||||
v-if="$slots.tableTitle || $slots.tableActions"
|
||||
>
|
||||
<div class="table-title">
|
||||
<slot name="tableTitle"></slot>
|
||||
</div>
|
||||
|
|
@ -71,29 +146,83 @@
|
|||
|
||||
<!-- 表格容器，添加最大高度和滚动 -->
|
||||
<div class="table-container" :style="tableContainerStyle">
|
||||
<el-table ref="tableRef" :data="tableList" style="width: 100%" v-loading="loading" select-on-indeterminate
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column width="45" align="center" type="selection" :selectable="selectable"
|
||||
v-if="selectionShow && isSelectShow" />
|
||||
<el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
|
||||
(queryParams.pageNum - 1) * queryParams.pageSize +
|
||||
index +
|
||||
1
|
||||
" v-if="indexNumShow" />
|
||||
<el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
|
||||
:width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
:data="tableList"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
select-on-indeterminate
|
||||
@selection-change="handleSelectionChange"
|
||||
@current-change="handleCurrentChange"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
width="45"
|
||||
align="center"
|
||||
type="selection"
|
||||
:selectable="selectable"
|
||||
v-if="selectionShow && isSelectShow"
|
||||
/>
|
||||
<el-table-column
|
||||
width="45"
|
||||
align="center"
|
||||
label=""
|
||||
v-if="isRadioShow"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-radio
|
||||
:label="getRowUniqueId(scope.row)"
|
||||
v-model="currentRowId"
|
||||
>
|
||||
<span></span>
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed
|
||||
width="55"
|
||||
label="序号"
|
||||
type="index"
|
||||
align="center"
|
||||
:index="
|
||||
(index) =>
|
||||
(queryParams.pageNum - 1) *
|
||||
queryParams.pageSize +
|
||||
index +
|
||||
1
|
||||
"
|
||||
v-if="indexNumShow"
|
||||
/>
|
||||
<el-table-column
|
||||
:key="v"
|
||||
align="center"
|
||||
:label="item.t_label"
|
||||
:prop="item.t_props"
|
||||
:width="item.t_width"
|
||||
show-overflow-tooltip
|
||||
v-for="(item, v) in tableColumCheckProps"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<!-- 判断当前列数据是否需要使用插槽的数据 -->
|
||||
<template v-if="item.t_slot">
|
||||
<slot :data="scope.row" :name="item.t_slot"></slot>
|
||||
<slot
|
||||
:data="scope.row"
|
||||
:name="item.t_slot"
|
||||
></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[item.t_props] || '-' }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
|
||||
fixed="right" v-if="handleShow && showOperation">
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="操作"
|
||||
:width="handleColWidth"
|
||||
:show-overflow-tooltip="false"
|
||||
fixed="right"
|
||||
v-if="handleShow && showOperation"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<div class="optionDivRef">
|
||||
<slot :data="row" name="handle">-</slot>
|
||||
|
|
@ -104,8 +233,12 @@
|
|||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" />
|
||||
<pagination
|
||||
:total="total"
|
||||
@pagination="getTableList"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -123,7 +256,7 @@ export default {
|
|||
// 列表请求接口
|
||||
requestApi: {
|
||||
type: Function,
|
||||
default: () => function () { },
|
||||
default: () => function () {},
|
||||
},
|
||||
// 列表配置项
|
||||
columnsList: {
|
||||
|
|
@ -178,6 +311,11 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示单选框 由父组件传递 默认不显示
|
||||
isRadioShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 测试时使用的数据源
|
||||
testTableList: {
|
||||
type: Array,
|
||||
|
|
@ -196,20 +334,24 @@ export default {
|
|||
// 表格最大高度（像素），默认600px
|
||||
tableMaxHeight: {
|
||||
type: [Number, String],
|
||||
default: 600
|
||||
default: 600,
|
||||
},
|
||||
// 是否自动加载数据 默认自动加载
|
||||
autoLoad: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
handleColWidth: {
|
||||
type: Number,
|
||||
default: 200
|
||||
default: 200,
|
||||
},
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
indexNumShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -221,14 +363,16 @@ export default {
|
|||
},
|
||||
/* 表格卡片动态高度 */
|
||||
tableCardStyle() {
|
||||
const baseHeight = this.showSearch ? 200 : 120; // 搜索区域高度
|
||||
const toolbarHeight = this.showRightTools ? 40 : 0; // 工具栏高度
|
||||
const paginationHeight = 60; // 分页区域高度
|
||||
const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25}px)`;
|
||||
const baseHeight = this.showSearch ? 200 : 120 // 搜索区域高度
|
||||
const toolbarHeight = this.showRightTools ? 40 : 0 // 工具栏高度
|
||||
const paginationHeight = 60 // 分页区域高度
|
||||
const availableHeight = `calc(100vh - ${
|
||||
baseHeight + toolbarHeight + paginationHeight + 25
|
||||
}px)`
|
||||
return {
|
||||
height: availableHeight,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
flexDirection: 'column',
|
||||
}
|
||||
},
|
||||
/* 表格容器样式 */
|
||||
|
|
@ -237,7 +381,7 @@ export default {
|
|||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
flexDirection: 'column',
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -272,11 +416,11 @@ export default {
|
|||
// 列表数据条数
|
||||
total: 0,
|
||||
// 搜索区域是否隐藏
|
||||
|
||||
|
||||
// 是否显示复选框
|
||||
selectionShow: true,
|
||||
// 是否显示序号
|
||||
indexNumShow: true,
|
||||
|
||||
// 是否显示操作列
|
||||
handleShow: true,
|
||||
// 列表每列 label
|
||||
|
|
@ -290,6 +434,10 @@ export default {
|
|||
|
||||
// 日期选择器配置
|
||||
pickerOptions: {},
|
||||
// 单选框当前选中的行唯一标识
|
||||
currentRowId: null,
|
||||
// 单选框当前选中的行数据
|
||||
currentRowData: null,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -361,7 +509,11 @@ export default {
|
|||
delete queryParams.time // 剔除无关参数
|
||||
// 删除日期范围选择器绑定的临时数组字段（如 openTime），保留实际使用的两个字段（如 openStartTime, openEndTime）
|
||||
this.formLabel.forEach((item) => {
|
||||
if (item.f_type === 'dateRange' && item.dateType && item.dateType.length === 2) {
|
||||
if (
|
||||
item.f_type === 'dateRange' &&
|
||||
item.dateType &&
|
||||
item.dateType.length === 2
|
||||
) {
|
||||
delete queryParams[item.f_model]
|
||||
}
|
||||
})
|
||||
|
|
@ -376,6 +528,17 @@ export default {
|
|||
if (res.code === 200) {
|
||||
this.tableList = res.rows
|
||||
this.total = res.total
|
||||
// 数据刷新后，如果之前选中的行不在当前列表中，清空选中状态
|
||||
if (this.isRadioShow && this.currentRowId) {
|
||||
const exists = this.tableList.some(
|
||||
(row) =>
|
||||
this.getRowUniqueId(row) === this.currentRowId,
|
||||
)
|
||||
if (!exists) {
|
||||
this.currentRowId = null
|
||||
this.currentRowData = null
|
||||
}
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
|
|
@ -440,7 +603,7 @@ export default {
|
|||
this.$set(setObj, 'unitName', res.data.unitName)
|
||||
this.$set(setObj, 'typeName', res.data.name)
|
||||
})
|
||||
.catch((err) => { })
|
||||
.catch((err) => {})
|
||||
for (let key in this.queryParams) {
|
||||
this.$set(setObj, key, this.queryParams[key])
|
||||
}
|
||||
|
|
@ -484,6 +647,19 @@ export default {
|
|||
this.selectedData = e
|
||||
},
|
||||
|
||||
// 获取行的唯一标识（优先使用id，否则使用索引）
|
||||
getRowUniqueId(row) {
|
||||
return row.id || row.proId || row.bidId || JSON.stringify(row)
|
||||
},
|
||||
|
||||
|
||||
// 处理表格当前行变化（用于高亮）
|
||||
handleCurrentChange(currentRow) {
|
||||
if (this.isRadioShow && currentRow) {
|
||||
this.currentRowId = this.getRowUniqueId(currentRow)
|
||||
}
|
||||
},
|
||||
|
||||
/* 时间change事件 */
|
||||
onChangeTime(e, type) {
|
||||
if (this.isOneMonth) {
|
||||
|
|
@ -535,6 +711,18 @@ export default {
|
|||
},
|
||||
deep: true,
|
||||
},
|
||||
// 监听单选框选中值的变化
|
||||
currentRowId(newVal, oldVal) {
|
||||
if (this.isRadioShow && newVal && newVal !== oldVal) {
|
||||
// 找到对应的行数据
|
||||
const row = this.tableList.find(r => this.getRowUniqueId(r) === newVal)
|
||||
if (row) {
|
||||
const index = this.tableList.findIndex(r => this.getRowUniqueId(r) === newVal)
|
||||
this.currentRowData = row
|
||||
this.$emit('radio-change', row, index)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -550,7 +738,7 @@ export default {
|
|||
.query-btn {
|
||||
width: 98px;
|
||||
height: 36px;
|
||||
background: #1F72EA;
|
||||
background: #1f72ea;
|
||||
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
color: #fff;
|
||||
|
|
@ -559,7 +747,7 @@ export default {
|
|||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #4A8BFF;
|
||||
background: #4a8bff;
|
||||
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
|
@ -567,7 +755,7 @@ export default {
|
|||
.reset-btn {
|
||||
width: 98px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
color: #333;
|
||||
|
|
@ -618,13 +806,13 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; // 确保容器可以收缩
|
||||
|
||||
|
||||
::v-deep .el-table {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
|
||||
// 确保表格体可以滚动
|
||||
.el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
|
|
@ -669,6 +857,22 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 单选框样式
|
||||
::v-deep .el-radio {
|
||||
margin: 0;
|
||||
|
||||
.el-radio__label {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.el-radio__input {
|
||||
.el-radio__inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格样式优化
|
||||
::v-deep .el-table {
|
||||
.el-button--text {
|
||||
|
|
@ -679,7 +883,7 @@ export default {
|
|||
// 表头样式
|
||||
thead {
|
||||
th {
|
||||
background-color: #F1F6FF;
|
||||
background-color: #f1f6ff;
|
||||
color: #424242;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
|
@ -698,4 +902,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -513,6 +513,20 @@ export const dynamicRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/analysisBidDetail',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['enterpriseLibrary:analysis:detail'],
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/analysis/components/AnalysisBidDetail'),
|
||||
name: 'AnalysisBidDetail',
|
||||
meta: { title: '项目标段', activeMenu: '/analysis', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
// 防止连续点击多次路由报错
|
||||
|
|
|
|||
|
|
@ -0,0 +1,548 @@
|
|||
<template>
|
||||
<div class="analysis-detail-container">
|
||||
<div class="content-header">
|
||||
<el-button class="reset-btn" @click="handleClose">返回</el-button>
|
||||
<el-button class="upload-btn" @click="handleUpload('ruleForm')">提交解析</el-button>
|
||||
</div>
|
||||
<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>
|
||||
</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 class="detail-field full-width">
|
||||
<div class="field-label">招标文件</div>
|
||||
<div class="file-value">{{ detailData.proDescription || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="table-container">
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="17">
|
||||
<TableModel :showSearch="false" :showOperation="false" :showRightTools="false"
|
||||
ref="detailTableRef" :columnsList="detailColumnsList" :request-api="listAPI"
|
||||
:sendParams="sendParams" :handleColWidth="180" :isRadioShow="true"
|
||||
@radio-change="handleRadioChange" :indexNumShow="false">
|
||||
<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>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-card class="upload-container">
|
||||
<div class="card-header">
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="附件上传">
|
||||
<h3>附件上传</h3>
|
||||
</div>
|
||||
<div class="upload-title">
|
||||
<span>请先选择需要解析的标的，再上传标的及其相关附件附件进行解析</span>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px"
|
||||
label-position="top">
|
||||
<el-form-item v-for="(item, index) in uploadType" :key="index" :label="item"
|
||||
:prop="`fileList${index + 1}`">
|
||||
<UploadMoreFile :fileList="form[`fileList${index + 1}`]"
|
||||
@file-change="handleFileChange" @del-file="handleDelFile"
|
||||
:type="`fileList${index + 1}`" :uploadType="defaultParams.uploadType"
|
||||
:maxFileTips="defaultParams.maxFileTips"
|
||||
:fileUploadRule="defaultParams.fileUploadRule"
|
||||
:limitUploadNum="defaultParams.limitUploadNum" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { decryptWithSM4 } from '@/utils/sm'
|
||||
import { listAPI, delDataAPI } from '@/api/analysis/analysis'
|
||||
import { formLabel, detailColumnsList } from '../config'
|
||||
import TableModel from '@/components/TableModel2'
|
||||
import request from '@/utils/request'
|
||||
import BidForm from './BidForm.vue'
|
||||
import UploadMoreFile from '@/views/common/UploadMoreFile.vue'
|
||||
// 默认参数
|
||||
const defaultParams = {
|
||||
fileUploadRule: {
|
||||
fileUploadType: 'bidding',
|
||||
fields_json: '',
|
||||
suffix: 'analysis_database',
|
||||
},
|
||||
uploadType: 'pdf、doc、docx',
|
||||
maxFileTips: '500MB',
|
||||
limitUploadNum: 1,
|
||||
}
|
||||
export default {
|
||||
name: 'AnalysisBidDetail',
|
||||
components: {
|
||||
TableModel,
|
||||
BidForm,
|
||||
UploadMoreFile
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formLabel,
|
||||
detailColumnsList,
|
||||
listAPI,
|
||||
proId: '',
|
||||
detailData: {},
|
||||
sendParams: {
|
||||
enterpriseId: 2
|
||||
},
|
||||
defaultParams,
|
||||
selectedRow: {},
|
||||
uploadType: ['标段文件', '标段文件2'],
|
||||
form: {
|
||||
delFileList: []
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
uploadType: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal && newVal.length > 0) {
|
||||
// 立即清除验证
|
||||
this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
|
||||
if (oldVal && oldVal.length > 0) {
|
||||
oldVal.forEach((item, index) => {
|
||||
this.$delete(this.form, `fileList${index + 1}`)
|
||||
this.$delete(this.rules, `fileList${index + 1}`)
|
||||
})
|
||||
}
|
||||
|
||||
newVal.forEach((item, index) => {
|
||||
this.$set(this.form, `fileList${index + 1}`, [])
|
||||
this.$set(this.rules, `fileList${index + 1}`, [
|
||||
{
|
||||
required: true,
|
||||
message: `请上传${item}`,
|
||||
trigger: ['change'],
|
||||
},
|
||||
])
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleForm &&
|
||||
this.$refs.ruleForm.clearValidate()
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.proId = decryptWithSM4(this.$route.query.proId)
|
||||
this.getDetail()
|
||||
},
|
||||
methods: {
|
||||
// 获取详情数据
|
||||
async getDetail() {
|
||||
try {
|
||||
// TODO: 根据实际API接口调整
|
||||
const res = await request({
|
||||
url: '/smartBid/analysis/detail',
|
||||
method: 'GET',
|
||||
params: { proId: this.proId }
|
||||
})
|
||||
// 或者使用 getDetailDataAPI，需要根据实际接口调整
|
||||
// const res = await getDetailDataAPI({ proId: this.proId })
|
||||
|
||||
if (res.code === 200) {
|
||||
this.detailData = res.data || {}
|
||||
} else {
|
||||
this.$message.error(res.msg || '获取详情失败')
|
||||
// 如果接口未实现，使用模拟数据
|
||||
this.detailData = {
|
||||
proName: '南方电网公司2025年电网基建工程第二批次施工公开招标项目',
|
||||
proCode: 'CG2700022002003411',
|
||||
bidder: '中建宏业建筑工程有限公司',
|
||||
agency: '南方电网供应链集团有限公司',
|
||||
openTime: '2025/06/02 09:00',
|
||||
openMethod: '线上开标',
|
||||
proDescription: '本项目为南方电网公司2025年电网基建工程第四批次施工公开招标，涵盖云南、广东及深圳地区的多个标段，工期从141至487日历天不等，计划总投资额约...'
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取详情失败:', error)
|
||||
// 如果接口未实现，使用模拟数据
|
||||
this.detailData = {
|
||||
proName: '南方电网公司2025年电网基建工程第二批次施工公开招标项目',
|
||||
proCode: 'CG2700022002003411',
|
||||
bidder: '中建宏业建筑工程有限公司',
|
||||
agency: '南方电网供应链集团有限公司',
|
||||
openTime: '2025/06/02 09:00',
|
||||
openMethod: '线上开标',
|
||||
proDescription: '本项目为南方电网公司2025年电网基建工程第四批次施工公开招标，涵盖云南、广东及深圳地区的多个标段，工期从141至487日历天不等，计划总投资额约...'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 返回
|
||||
handleClose() {
|
||||
const obj = { path: "/analysis" }
|
||||
this.$tab.closeOpenPage(obj)
|
||||
},
|
||||
// 处理单选框变化
|
||||
handleRadioChange(row, index) {
|
||||
this.selectedRow = row
|
||||
console.log('选中的行数据:', row)
|
||||
},
|
||||
// 文件变化
|
||||
handleFileChange(file, fileName) {
|
||||
console.log(file)
|
||||
this.form[fileName] = file
|
||||
this.$refs.ruleForm && this.$refs.ruleForm.clearValidate([fileName])
|
||||
|
||||
},
|
||||
// 文件删除时触发
|
||||
handleDelFile(file) {
|
||||
console.log(file)
|
||||
const delPath =
|
||||
file?.response?.fileRes?.filePath || file?.filePath || null
|
||||
if (delPath) {
|
||||
this.form.delFileList.push(delPath)
|
||||
}
|
||||
},
|
||||
validate(formName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
resolve(this.form) // 校验成功返回表单数据
|
||||
} else {
|
||||
reject(new Error('数据未填写完整'))
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/**验证 */
|
||||
async handleUpload(formName) {
|
||||
try {
|
||||
if (Object.keys(this.selectedRow).length === 0) {
|
||||
this.$message.error('请选择要提交的标段')
|
||||
return
|
||||
|
||||
}
|
||||
const data = await this.validate(formName)
|
||||
// 所有校验通过，组装完整数据
|
||||
let formData = {
|
||||
...data,
|
||||
allFiles: [
|
||||
...data.fileList.map((file) =>
|
||||
JSON.parse(JSON.stringify(file)),
|
||||
),
|
||||
],
|
||||
delFiles: [...data.delFileList],
|
||||
}
|
||||
|
||||
let allFiles = formData.allFiles
|
||||
.map((file) => {
|
||||
return file?.response?.fileRes
|
||||
? {
|
||||
...file.response.fileRes,
|
||||
}
|
||||
: null
|
||||
})
|
||||
.filter((item) => item !== null)
|
||||
formData.files = allFiles
|
||||
delete formData.fileList
|
||||
delete formData.delFileList
|
||||
delete formData.allFiles
|
||||
// 显示遮罩层
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: '数据提交中，请稍候...',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
target:
|
||||
this.$el.querySelector('.el-dialog') || document.body,
|
||||
})
|
||||
console.log('所有表单校验通过，完整数据:', formData)
|
||||
/* const res = await this.saveData(formData)
|
||||
if (res.code === 200) {
|
||||
this.handleReuslt(res)
|
||||
} else {
|
||||
this.$modal.msgError(res.msg)
|
||||
} */
|
||||
} catch (error) {
|
||||
} finally {
|
||||
if (this.loading) {
|
||||
this.loading.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 保存接口
|
||||
async saveData(formData) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.isAdd === 'add') {
|
||||
// 新增
|
||||
addDataAPI(formData)
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
} else {
|
||||
// 修改
|
||||
editDataAPI(formData)
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.analysis-detail-container {
|
||||
padding: 24px;
|
||||
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
width: 98px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
color: #409EFF;
|
||||
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-detail-card {
|
||||
background: #fff;
|
||||
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 {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-detail-content {
|
||||
.detail-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-field {
|
||||
.field-label {
|
||||
color: #424242;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
min-height: 20px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.description-value {
|
||||
min-height: 80px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.file-value {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #1f72ea;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 98px;
|
||||
height: 36px;
|
||||
background: #1f72ea;
|
||||
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #4a8bff;
|
||||
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
span {
|
||||
font-size: 14px !important;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -281,7 +281,7 @@ export default {
|
|||
|
||||
.analysis-detail-content {
|
||||
.detail-row {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -289,7 +289,7 @@ export default {
|
|||
}
|
||||
|
||||
.detail-col {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-field {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,16 @@
|
|||
<!-- 招标解析 -->
|
||||
<el-card class="analysis-container">
|
||||
<div class="table-container">
|
||||
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="analysisTableRef"
|
||||
:columnsList="columnsList" :request-api="listAPI" :sendParams="sendParams" :handleColWidth="250">
|
||||
<TableModel
|
||||
:formLabel="formLabel"
|
||||
:showOperation="true"
|
||||
:showRightTools="false"
|
||||
ref="analysisTableRef"
|
||||
:columnsList="columnsList"
|
||||
:request-api="listAPI"
|
||||
:sendParams="sendParams"
|
||||
:handleColWidth="250"
|
||||
>
|
||||
<template slot="tableTitle">
|
||||
<h3>数据列表</h3>
|
||||
</template>
|
||||
|
|
@ -17,8 +25,8 @@
|
|||
@click="handleDetail(data)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button type="text" v-hasPermi="['enterpriseLibrary:tool:edit']" class="action-btn"
|
||||
@click="handleUpdate(data)">
|
||||
<el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:detail']" class="action-btn"
|
||||
@click="handleBidDetail(data)">
|
||||
标段解析
|
||||
</el-button>
|
||||
<el-button type="text" v-hasPermi="['enterpriseLibrary:tool:edit']" class="action-btn"
|
||||
|
|
@ -72,6 +80,7 @@ export default {
|
|||
showAnalysisForm: false,
|
||||
title: '',
|
||||
row: {},
|
||||
selectedRow: null, // 单选框选中的行数据
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -112,11 +121,21 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
/** 标段解析操作 */
|
||||
handleBidDetail(row) {
|
||||
this.$router.push({
|
||||
name: 'AnalysisBidDetail',
|
||||
query: {
|
||||
proId: encryptWithSM4('2')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/* 搜索操作 */
|
||||
handleQuery() {
|
||||
this.$refs.analysisTableRef.getTableList()
|
||||
},
|
||||
|
||||
/** 删除操作 */
|
||||
handleDelete(row) {
|
||||
this.$confirm(`确定要删除"${row.toolName}"吗？删除后将无法恢复！`, '操作提示', {
|
||||
|
|
|
|||
Loading…
Reference in New Issue