<template>
<el-dialog :title
="dialogMode
=== 'create' ? '新建' : dialogMode
=== 'edit' ? '修改' : '查看'" :visible
.sync
="dialogVisible"
:modal-append-to-
body="true" append-to-
body :close-on-click-modal
="false" custom-class
="fixed-height-dialog"
width
="60%" top
="5vh">
<el-form label-width
="80px" ref
="formRef" :model
="currentForm"
style="height: 100%; display: flex; flex-direction: column;" :rules
="rules">
<div class
="formBorder">
<el-row :gutter
="10">
<el-col :span
="6">
<el-form-item size
="mini" label
="项目名称" prop
="projectName">
<el-input v-model
="currentForm
.projectName" clearable
style="width:100%" size
="mini"></el-input>
</el-form-item>
</el-col>
<el-col :span
="6">
<el-form-item size
="mini" label
="项目编号" prop
="projectCode">
<el-input v-model
="currentForm
.projectCode" clearable
style="width:100%" size
="mini"></el-input>
</el-form-item>
</el-col>
<el-col :span
="12">
<el-form-item size
="mini" label
="项目周期" prop
="projectDate">
<el-date-picker v-model
="projectDate" range-separator
="→" start-placeholder
="请选择开始日期"
end-placeholder
="请选择结束日期" type
="daterange" size
="mini"
style="width: 100%;" unlink-panels
value-format
="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span
="6">
<el-form-item label
="负责人" size
="mini"
style="width: fit-content;">
<el-input v-model
="currentForm
.projectUser" clearable
style="width:100%" size
="mini"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span
="24">
<el-form-item label
="项目概述">
<el-input v-model
="currentForm
.remark" :rows
="2"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class
="formBorder2"
style="flex: 1; min-height: 0; display: flex; flex-direction: column;">
<el-container
style="height: 100%; display: flex; flex-direction: column;">
<el-header
style="height: auto; flex-shrink: 0; padding-bottom: 10px;">
<el-row :gutter
="10" type
="flex" class
="searchDialog">
<el-col :span
="5">
<el-select v-model
="filterForm
.maintenanceCompanyName" placeholder
="请选择管养单位" size
="mini" clearable
filterable @clear
="resetSearch">
<el-option v-for
="item in MaintenanceUnitoptions" :key
="item
.value" :label
="item
.label"
:value
="item
.value"></el-option>
</el-select>
</el-col>
<el-col :span
="5">
<el-select v-model
="filterForm
.routeCode" placeholder
="请选择路线编号" size
="mini" clearable filterable
@clear
="resetSearch">
<el-option v-for
="item in routeCodeOptions" :key
="item
.value" :label
="item
.label"
:value
="item
.value"></el-option>
</el-select>
</el-col>
<el-col :span
="5">
<el-input v-model
="filterForm
.searchKey" placeholder
="请输入边坡编号或名称" size
="mini" clearable
@keyup
.enter
.native
="searchForm" @clear
="resetSearch">
<i slot
="suffix" class
="el-input__icon el-icon-search"></i>
</el-input>
</el-col>
<el-col :span
="5">
<el-select v-model
="filterForm
.evaluateLevel" placeholder
="请选择技术状态等级" size
="mini" clearable
@clear
="resetSearch">
<el-option v-for
="item in evaluateLeveloptions" :key
="item
.value" :label
="item
.label"
:value
="item
.value" />
</el-select>
</el-col>
<el-col :span
="2" :offset
="4">
<el-button type
="primary" size
="mini"
style="width:100%" icon
="el-icon-search" @click
="searchForm"
:loading
="loading">搜索</el-button>
</el-col>
</el-row>
</el-header>
<el-main
style="flex: 1; overflow-y: auto; padding: 0;">
<el-table ref
="scrollTable" v-loading
="loading"
style="width: 100%;" border :data
="formTabledata"
:height
="tableHeight" :header-row-
style="{ height: '40px' }" :header-cell-
style="{
padding: '0',
height: '40px',
lineHeight: '40px',
textAlign: 'center',
}" :cell-
style="{ textAlign: 'center' }" @selection-change
="handleSelectionChange">
<el-table-column type
="selection" width
="55"></el-table-column>
<el-table-column label
="管养单位" prop
="maintenanceCompanyName" width
="290"
show-overflow-tooltip></el-table-column>
<el-table-column label
="路线编号" prop
="routeCode" width
="100"></el-table-column>
<el-table-column label
="边坡编号" prop
="sideSlopeCode" width
="240" show-overflow-tooltip></el-table-column>
<el-table-column label
="边坡名称" prop
="sideSlopeName" width
="267" show-overflow-tooltip></el-table-column>
<el-table-column label
="技术状态等级" width
="137">
<template slot-scope
="scope">
{{ mapEvaluateLevel
(scope
.row
.evaluateLevel
) }}
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer
style="flex-shrink: 0; padding-top: 10px;">
<el-pagination background @size-change
="handleSizeChange" @current-change
="handleCurrentChange"
:current-page
="pageParams
.pageNo" :page-sizes
="[10, 20, 50, 100]" :page-size
="pageParams
.pageSize"
layout
="total, sizes, prev, pager, next" :total
="total">
</el-pagination>
</el-footer>
</el-container>
</div>
</el-form>
<
!-- 弹窗底部按钮 -->
<div slot
="footer" class
="dialog-footer" v-if
="dialogMode
=== 'create' || dialogMode
=== 'edit'">
<el-button @click
="dialogVisible
= false">取消</el-button>
<el-button type
="primary" @click
="submitForm">提交</el-button>
</div>
</el-dialog>
</template>
<script>
import { mapCfg } from "@/utils";
import {
getPeriodicInspectionSideSlopePageList,
addPeriodicInspection,
modifyPeriodicInspection
} from '
../
../api/testProject';
import {
getMaintenanceCompanyList,
getRouteList,
} from "
../
../api/basicInformation";
export default {
name: "SideSlopeDialog",
props: {
visible: Boolean,
mode: String,
initialForm: Object
},
data
() {
return {
dialogVisible: this
.visible,
dialogMode: this
.mode,
currentForm: {
...this
.initialForm },
projectDate: [],
total: 0,
loading: false,
pageParams: {
pageNo: 1,
pageSize: 10
},
filterForm: {
maintenanceCompanyName: '',
routeCode: '',
searchKey: '',
evaluateLevel: ''
},
tableSelection: [],
MaintenanceUnitoptions: [],
routeCodeOptions: [],
formTabledata: [],
evaluateLeveloptions: [],
sideSlopeDetailList: [],
tableHeight: 200,// 初始表格高度
rules: {
projectName: [
{ required: true, message: "项目名称不能为空", trigger: "blur" }
],
projectCode: [
{ required: true, message: "项目编码不能为空", trigger: "blur" }
],
}
};
},
watch: {
// 新增：监听mode属性变化
mode
(val
) {
this
.dialogMode
= val;
// 模式切换时重新加载数据
if
(val
=== 'edit' && this
.dialogVisible
) {
this
.resetSearch
();
}
},
visible
(val
) {
this
.dialogVisible
= val;
if
(val
) {
this
.resetSearch
();
this
.$nextTick
(() => {
this
.calculateTableHeight
();
}
);
}
},
dialogVisible
(val
) {
this
.$emit
('update:visible', val
);
},
initialForm: {
deep: true,
handler
(val
) {
this
.currentForm
= {
...val };
this
.projectDate
= val
.projectStartDate && val
.projectEndDate
? [val
.projectStartDate, val
.projectEndDate]
: [];
}
},
projectDate: {
deep: true,
handler
(value
) {
if
(value && value
.length
=== 2
) {
this
.currentForm
.projectStartDate
= value[0];
this
.currentForm
.projectEndDate
= value[1];
}
}
}
},
async created
() {
await this
.getEvaluateLevel
();
this
.getMaintenanceCompanyList
();
this
.getRouteList
();
this
.LoadListData
();
},
mounted
() {
this
.calculateTableHeight
();
window
.addEventListener
('resize', this
.calculateTableHeight
);
},
beforeDestroy
() {
window
.removeEventListener
('resize', this
.calculateTableHeight
);
},
methods: {
// 获取管养单位方法
async getMaintenanceCompanyList
() {
const res
= await getMaintenanceCompanyList
();
this
.MaintenanceUnitoptions
= res
.map
((item
) =>
({
value: item,
label: item
}
));
},
//获取路线编号方法
async getRouteList
() {
const res
= await getRouteList
();
this
.routeCodeOptions
= res
.map
((item
) =>
({
value: item
.routeCode,
label: item
.routeCode
}
))
},
// 搜索方法
searchForm
() {
this
.pageParams
.pageNo
= 1;
this
.LoadListData
();
},
// 重置搜索条件
resetSearch
() {
this
.filterForm
= {
maintenanceCompanyName: '',
routeCode: '',
searchKey: '',
evaluateLevel: ''
};
this
.pageParams
.pageNo
= 1;
this
.LoadListData
();
},
handleSelectionChange
(val
) {
this
.tableSelection
= val;
},
mapEvaluateLevel
(level
) {
const option
= this
.evaluateLeveloptions
.find
(item
=> item
.value
=== level
);
return option
.label;
},
// 加载表格数据
async LoadListData
() {
this
.loading
= true;
const params
= {
maintenanceCompanyName: this
.filterForm
.maintenanceCompanyName,
routeCode: this
.filterForm
.routeCode,
searchKey: this
.filterForm
.searchKey,
evaluateLevel: this
.filterForm
.evaluateLevel,
pageSize: this
.pageParams
.pageSize,
pageNo: this
.pageParams
.pageNo
};
const res
= await getPeriodicInspectionSideSlopePageList
(params
);
this
.formTabledata
= res
.entities;
this
.total
= res
.entityCount;
this
.loading
= false;
},
handleSizeChange
(val
) {
this
.pageParams
.pageSize
= val;
this
.pageParams
.pageNo
= 1;
this
.LoadListData
();
},
handleCurrentChange
(val
) {
this
.pageParams
.pageNo
= val;
this
.LoadListData
();
},
async getEvaluateLevel
() {
const levelList
= await mapCfg
('Inspection
.Regular
.RegularEvaluateLevel'
)();
this
.evaluateLeveloptions
= levelList
.map
(item
=>
({
value: item
.key,
label: item
.value
}
));
},
async submitForm
() {
this
.$refs
.formRef
.validate
(async valid
=> {
if
(valid
) {
if
(this
.tableSelection
.length
=== 0
) {
this
.$message
.warning
('请至少选择一个边坡'
);
return;
}
const params
= {
...this
.currentForm,
sideSlopeDetailList: this
.tableSelection
.map
(item
=>
({
sideSlopeUniqueCode: item
.sideSlopeCode,
last_evaluate_level: item
.evaluateLevel,
}
))
};
const action
= this
.dialogMode
=== 'create'
? addPeriodicInspection
: modifyPeriodicInspection;
const res
= await action
(params
);
if
(res && res
.success
) {
this
.$message
.success
('操作成功'
);
this
.$emit
('success'
);
this
.dialogVisible
= false;
} else {
this
.$message
.error
(res
.message || '操作失败'
);
}
}
}
);
},
// 计算表格高度
calculateTableHeight
() {
this
.$nextTick
(() => {
try {
const dialog
Body = document.querySelector
('
.fixed-height-dialog
.el-dialog__
body'
);
if
(dialog
Body) {
const
bodyHeight
= dialog
Body.clientHeight;
const headerHeight
= document.querySelector
('
.formBorder'
)?
.offsetHeight || 0;
const searchHeight
= document.querySelector
('
.formBorder2
.el-header'
)?
.offsetHeight || 0;
const footerHeight
= document.querySelector
('
.formBorder2
.el-footer'
)?
.offsetHeight || 0;
const padding
= 30; // 安全边距
this
.tableHeight
= bodyHeight - headerHeight - searchHeight - footerHeight - padding;
}
} catch
(e
) {
console
.warn
('高度计算错误', e
);
this
.tableHeight
= 300; // 默认高度
}
}
);
}
}
};
</script>
<
style lang
="s
css" scoped>
/* 固定弹窗高度 */
:deep
(.fixed-height-dialog
) {
.el-dialog {
display: flex;
flex-direction: column;
max-height: 80vh
!important;
height: 80vh
!important;
.el-dialog__
body {
flex: 1;
overflow:
hidden;
padding: 15px 20px;
display: flex;
flex-direction: column;
}
}
}
.formBorder {
position: relative;
border: thin dotted black;
padding: 10px;
flex-shrink: 0;
&::before {
content: "项目信息";
position: absolute;
top: -10px;
left: 40px;
background-color: #fff;
padding: 0 10px;
font-size: 14px;
color: #606266;
}
}
.formBorder2 {
margin-top: 15px;
position: relative;
border: thin dotted black;
padding: 10px;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
&::before {
content: "待检边坡";
position: absolute;
top: -10px;
left: 40px;
background-color: #fff;
padding: 0 10px;
font-size: 14px;
color: #606266;
}
}
.dialog-footer {
padding: 10px 20px;
border-top: 1px solid #ebeef5;
text-align: center;
}
.searchDialog {
margin-top: 5px
}
/* 表格空数据样式 */
:deep
(.el-table__empty-block
) {
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
/* 优化分页样式 */
:deep
(.el-pagination
) {
padding: 5px 0;
}
</
style>
怎么实现选中第一页的某一项之后 翻页再回来还是选中状态
本文探讨了在尝试使用JavaScript为body元素设置样式属性时遇到的问题，特别是当使用!important标记时，发现该设置并未生效。文章深入分析了这一现象的原因，并提供了可能的解决方案。
扫一扫
5110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
