<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="current
Form"
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="current
Form.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="current
Form.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="current
Form.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="current
Form.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="filter
Form.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="filter
Form.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="filter
Form.searchKey" placeholder="请输入边坡编号或名称" size="mini" clearable
@keyup.enter.native="search
Form" @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="filter
Form.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="search
Form"
: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="submit
Form">提交</el-button>
</div>
</el-dialog>
</template>
<script>
import { mapCfg } from "@/utils";
import {
getPeriodicInspectionSideSlopePageList,
addPeriodicInspection,
modifyPeriodicInspection
} from '../../api/testProject';
import {
getMaintenanceCompanyList,
getRouteList,
} from "../../api/basicIn
formation";
export default {
name: "SideSlopeDialog",
props: {
visible: Boolean,
mode: String,
initial
Form: Object
},
data() {
return {
dialogVisible: this.visible,
dialogMode: this.mode,
current
Form: { ...this.initial
Form },
projectDate: [],
total: 0,
loading: false,
pageParams: {
pageNo: 1,
pageSize: 10
},
filter
Form: {
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);
},
initial
Form: {
deep: true,
handler(val) {
this.current
Form = { ...val };
this.projectDate = val.projectStartDate && val.projectEndDate
? [val.projectStartDate, val.projectEndDate]
: [];
}
},
projectDate: {
deep: true,
handler(value) {
if (value && value.length === 2) {
this.current
Form.projectStartDate = value[0];
this.current
Form.projectEndDate = value[1];
}
}
}
},
async created() {
await this.getEvaluateLevel();
this.getMaintenanceCompanyList();
this.getRouteList();
this.LoadListData();
},
mounted() {
this.calculateTableHeight();
window.addEventListener('resize', this.calculateTableHeight);
},
be
foreDestroy() {
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
}))
},
// 搜索方法
search
Form() {
this.pageParams.pageNo = 1;
this.LoadListData();
},
// 重置搜索条件
resetSearch() {
this.filter
Form = {
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.filter
Form.maintenanceCompanyName,
routeCode: this.filter
Form.routeCode,
searchKey: this.filter
Form.searchKey,
evaluateLevel: this.filter
Form.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 submit
Form() {
this.$refs.
formRef.validate(async valid => {
if (valid) {
if (this.tableSelection.length === 0) {
this.$message.
warning('请至少选择一个边坡');
return;
}
const params = {
...this.current
Form,
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 dialogBody = document.querySelector('.fixed-height-dialog .el-dialog__body');
if (dialogBody) {
const bodyHeight = dialogBody.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="scss" 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;
&::be
fore {
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;
&::be
fore {
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>
怎么实现
选中第一页的某一项之后 翻页再回来还是
选中状态
本文探讨了使用Vue的Element UI库实现分页功能时遇到的一个警告问题：关于prop 'pagerCount' 的自定义验证检查失败。尽管该警告出现，但并未影响到页面的实际功能。
扫一扫
2215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
