/*
-----------弹窗模块管理
------------------- */
<template>
<el
-dialog
:title="dialogMode === 'create' ? '新建'
: dialogMode === 'edit' ? '修改'
: '查看'"
:v
isible
.sync="dialogV
isible"
: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%;
d
isplay
: flex;
flex
-directi
on: column;"
:rules="rules">
<!
-- 项目信息区域
-->
<div class="formBorder">
<el
-row
:gutter="10">
<el
-col
:span="6">
<el
-form
-item size="m
ini" label="项目名称" prop="projectName">
<el
-input v
-model="currentForm
.projectName" clearable style="width
:100%" size="m
ini"
:d
isabled="dialogMode === 'view'">
</el
-input>
</el
-form
-item>
</el
-col>
<el
-col
:span="6">
<el
-form
-item size="m
ini" label="项目编号" prop="projectCode">
<el
-input v
-model="currentForm
.projectCode" clearable style="width
:100%" size="m
ini"
:d
isabled="dialogMode === 'view'">
</el
-input>
</el
-form
-item>
</el
-col>
<el
-col
:span="12">
<el
-form
-item size="m
ini" label="项目周期" prop="projectDate">
<el
-date
-picker v
-model="projectDate" range
-separator="→" start
-placeholder="请选择开始日期"
end
-placeholder="请选择结束日期" type="daterange" size="m
ini" style="width
: 100%;" unl
ink
-panels
:d
isabled="dialogMode === 'view'">
</el
-date
-picker>
</el
-form
-item>
</el
-col>
</el
-row>
<el
-row>
<el
-col
:span="6">
<el
-form
-item label="负责人" size="m
ini" style="width
:
fit
-c
ontent;">
<el
-input v
-model="currentForm
.projectUser" clearable style="width
:100%" size="m
ini"
:d
isabled="dialogMode === 'view'">
</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"
:d
isabled="dialogMode === 'view'">
</el
-input>
</el
-form
-item>
</el
-col>
</el
-row>
</div>
<div class="formBorder2">
<el
-c
onta
iner style="height
: 100%;">
<el
-header style="height
: auto;
flex
-shr
ink
: 0;
padd
ing
-bottom
: 10px;">
<el
-row
:gutter="10" type="flex" class="searchDialog">
<el
-col
:span="5">
<el
-select v
-model="filterForm
.ma
intenanceCompanyName" placeholder="请选择管养单位" size="m
ini" clearable
filterable @clear="resetSearch"
:d
isabled="dialogMode === 'view'">
<el
-opti
on v
-for="item
in Ma
intenanceUnitopti
ons"
:key="item
.value"
:label="item
.label"
:value="item
.value">
</el
-opti
on>
</el
-select>
</el
-col>
<el
-col
:span="5">
<el
-select v
-model="filterForm
.routeCode" placeholder="请选择路线编号" size="m
ini" clearable filterable
@clear="resetSearch"
:d
isabled="dialogMode === 'view'">
<el
-opti
on v
-for="item
in routeCodeOpti
ons"
:key="item
.value"
:label="item
.label"
:value="item
.value">
</el
-opti
on>
</el
-select>
</el
-col>
<el
-col
:span="5">
<el
-input v
-model="filterForm
.searchKey" placeholder="请输入边坡编号或名称" size="m
ini" clearable
@keyup
.enter
.native="searchForm" @clear="resetSearch"
:d
isabled="dialogMode === 'view'">
<i slot="suffix" class="el
-input__ic
on el
-ic
on-search"></i>
</el
-input>
</el
-col>
<el
-col
:span="5">
<el
-select v
-model="filterForm
.evaluateLevel" placeholder="请选择技术状态等级" size="m
ini" clearable
@clear="resetSearch"
:d
isabled="dialogMode === 'view'">
<el
-opti
on v
-for="item
in evaluateLevelopti
ons"
:key="item
.value"
:label="item
.label"
:value="item
.value" />
</el
-select>
</el
-col>
<el
-col
:span="2"
:offset="4">
<el
-butt
on type="primary" size="m
ini" style="width
:100%" ic
on="el
-ic
on-search" @click="searchForm"
:load
ing="load
ing"
:d
isabled="dialogMode === 'view'">搜索
</el
-butt
on>
</el
-col>
</el
-row>
</el
-header>
<el
-ma
in style="overflow
-y
: hidden;">
<el
-table ref="scrollTable" v
-load
ing="load
ing" style="width
: 100%;" border
:data="formTabledata"
:row
-style="{ height
: '36px' }"
:cell
-style="{ padd
ing
: '4px 0', textAlign
: 'center' }"
:header
-cell
-style="{
height
: '36px',
padd
ing
: '4px 0',
l
ineHeight
: '36px',
textAlign
: 'center'
}" @selecti
on-change="handleSelecti
onChange"
:row
-key="getRowkey">
<el
-table
-column type="selecti
on" width="55"
:selectable="
isRowSelectable"
:reserve
-selecti
on="true">
</el
-table
-column>
<el
-table
-column label="管养单位" prop="ma
intenanceCompanyName" 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
-ma
in>
<!
-- 分页区域
-->
<el
-footer style="flex
-shr
ink
: 0;
padd
ing
-top
: 10px;">
<el
-pag
inati
on background @current
-change="handleCurrentChange"
:current
-page="pageParams
.pageNo"
:page
-size="pageParams
.pageSize" layout="total, prev, pager, next"
:total="total">
</el
-pag
inati
on>
</el
-footer>
</el
-c
onta
iner>
</div>
</el
-form>
<!
-- 弹窗底部按钮
-->
<div slot="footer" class="dialog
-footer" v
-if="dialogMode === 'create' || dialogMode === 'edit'">
<el
-butt
on @click="dialogV
isible = false">取消
</el
-butt
on>
<el
-butt
on type="primary" @click="submitForm">提交
</el
-butt
on>
</div>
</el
-dialog>
</template>
<script>
import { mapCfg } from "@/utils";
import {
getPeriodic
Inspecti
onSideSlopePageL
ist,
addPeriodic
Inspecti
on,
modifyPeriodic
Inspecti
on,
getSelectedPeriodic
Inspecti
onSideSlopeL
ist
} from "
../
../api/testProject";
import { getMa
intenanceCompanyL
ist, getRouteL
ist } from "
../
../api/basic
Informati
on";
export default {
name
: "SideSlopeDialog",
props
: {
v
isible
: Boolean, // 控制弹窗显示
mode
: Str
ing, // 模式：create/edit/view
initialForm
: Object, // 初始表单数据
},
data() {
return {
isInitializ
ingSelecti
on: false, // 初始化状态标志
dialogV
isible
: th
is.v
isible, // 弹窗显示状态
dialogMode
: th
is.mode, // 当前模式
currentForm
: {
projectCode
: '', // 项目编号
projectName
: '', // 项目名称
projectStartDate
: '', // 开始日期
projectEndDate
: '', // 结束日期
projectUser
: '', // 项目负责人
remark
: '', // 备注
sideSlopeDetailL
ist
: [] // 边坡详情列表
},
projectDate
: [], // 项目日期范围
total
: 0, // 总数据量
load
ing
: false, // 加载状态
pageParams
: { // 分页参数
pageNo
: 1,
pageSize
: 10,
},
filterForm
: { // 搜索条件
ma
intenanceCompanyName
: "",
routeCode
: "",
searchKey
: "",
evaluateLevel
: "",
},
mulitipleSelecti
on: [],
allSelecti
on: new Map(),
Ma
intenanceUnitopti
ons
: [], // 管养单位选项
routeCodeOpti
ons
: [], // 路线编号选项
formTabledata
: [], // 表格数据
evaluateLevelopti
ons
: [], // 技术状态等级选项
rules
: { // 表单验证规则
projectName
: [
{ required
: true, message
: "项目名称不能为空", trigger
: "blur" },
],
projectCode
: [
{ required
: true, message
: "项目编码不能为空", trigger
: "blur" },
],
},
};
},
watch
: {
// 修复1：监听v
isible变化时确保加载数据
async v
isible(val) {
th
is.dialogV
isible = val;
if (val) {
// 打开对话框时重置状态
th
is.resetAllData();
// 关键修复：确保在创建模式外加载数据
if (th
is.dialogMode !== 'create' && th
is.currentForm
.id) {
// 确保在DOM更新后加载数据
await th
is.$nextTick();
await th
is.LoadL
istData();
}
} else {
// 关闭对话框时重置数据
th
is.resetAllData();
}
},
// 修复2：监听模式变化
mode(val) {
th
is.dialogMode = val;
// 当模式从创建变为编辑/查看时，确保加载数据
if (th
is.dialogV
isible && val !== 'create' && th
is.currentForm
.id) {
th
is.LoadL
istData();
}
},
// 修复3：监听初始表单数据变化
initialForm
: {
deep
: true,
immediate
: true, // 添加立即执行
async
handler(val) {
th
is.currentForm = {
...val };
th
is.projectDate = [val
.projectStartDate, val
.projectEndDate];
// 关键修复：当初始表单有ID时立即加载数据
if (th
is.dialogV
isible && val
.id && th
is.dialogMode !== 'create') {
await th
is.$nextTick();
await th
is.LoadL
istData();
}
}
},
// 同步弹窗显示状态到父组件
dialogV
isible(val) {
th
is.$emit("update
:v
isible", val);
},
projectDate
: {
deep
: true,
handler(value) {
if (value && value
.length === 2) {
th
is.currentForm
.projectStartDate = value[0];
th
is.currentForm
.projectEndDate = value[1];
}
},
},
},
async created() {
// 初始化数据
th
is.getRouteL
ist();
await th
is.getEvaluateLevel();
th
is.getMa
intenanceCompanyL
ist();
},
methods
: {
handleSelecti
onChange(selecti
on) {
// 跳过初始化阶段的选中状态变更
if (th
is.isInitializ
ingSelecti
on) return;
// 获取当前页选中项的key集合
c
onst currentPageKeys = new Set(
selecti
on.map(row => row
.sideSlopeUniqueCode)
);
// 处理当前页的取消选中操作
th
is.formTabledata
.forEach(row => {
c
onst key = row
.sideSlopeUniqueCode;
// 仅当行在全局选中池中但不在当前页选中集合时删除
if (th
is.allSelecti
on.has(key) && !currentPageKeys
.has(key)) {
th
is.allSelecti
on.delete(key);
}
});
// 添加新选中的项到全局池
selecti
on.forEach(row => {
c
onst key = row
.sideSlopeUniqueCode;
if (!th
is.allSelecti
on.has(key)) {
th
is.allSelecti
on.set(key, row);
}
});
// 更新当前页选中引用
th
is.mulitipleSelecti
on = selecti
on;
},
getRowkey(row) {
return row
.sideSlopeUniqueCode;
},
// 判断行是否可选（查看模式禁用选择）
isRowSelectable(row,
index) {
return th
is.dialogMode !== "view";
},
// 获取管养单位列表
async getMa
intenanceCompanyL
ist() {
c
onst res = await getMa
intenanceCompanyL
ist();
th
is.Ma
intenanceUnitopti
ons = res
.map((item) => ({
value
: item,
label
: item,
}));
},
// 获取路线列表
async getRouteL
ist() {
c
onst res = await getRouteL
ist();
th
is.routeCodeOpti
ons = res
.map((item) => ({
value
: item
.id,
label
: item
.routeCode,
}));
},
// 搜索方法
searchForm() {
// th
is.showSelected
Only = false,
th
is.pageParams
.pageNo = 1;
th
is.LoadL
istData();
},
// 重置搜索条件
resetSearch() {
// th
is.showSelected
Only = true,
th
is.filterForm = {
ma
intenanceCompanyName
: "",
routeCode
: "",
searchKey
: "",
evaluateLevel
: "",
};
th
is.pageParams
.pageNo = 1;
th
is.LoadL
istData();
},
// 重置组件状态
resetAllData() {
th
is.resetSelecti
on();
th
is.formTabledata = []; // 清空表格数据
th
is.total = 0; // 重置总条数
th
is.pageParams = { // 重置分页
pageNo
: 1,
pageSize
: 10
};
// 重置搜索条件（可选）
th
is.filterForm = {
ma
intenanceCompanyName
: "",
routeCode
: "",
searchKey
: "",
evaluateLevel
: ""
};
},
// 修改原有方法
resetSelecti
on() {
th
is.allSelecti
on.clear();
th
is.allSelecti
on = new Map();
if (th
is.$refs
.scrollTable) {
th
is.$refs
.scrollTable
.clearSelecti
on();
}
},
// 映射技术状态等级
mapEvaluateLevel(level) {
c
onst opti
on = th
is.evaluateLevelopti
ons
.f
ind(
(item) => item
.value === level
);
return opti
on.label;
},
// 加载表格数据
async LoadL
istData() {
th
is.load
ing = true;
try {
c
onst params = {
orgId
: th
is.filterForm
.ma
intenanceCompanyName,
routeId
: th
is.filterForm
.routeCode,
searchKey
: th
is.filterForm
.searchKey,
evaluateLevel
: th
is.filterForm
.evaluateLevel,
pageSize
: th
is.pageParams
.pageSize,
pageNo
: th
is.pageParams
.pageNo,
};
// 获取表格数据
c
onst res = await getPeriodic
Inspecti
onSideSlopePageL
ist(params);
th
is.formTabledata = res
.entities;
th
is.total = res
.entityCount;
// 处理非创建模式的数据加载
if (th
is.dialogMode !== 'create' && th
is.currentForm
.id) {
// 首次加载时获取所有选中项
if (th
is.pageParams
.pageNo === 1) {
c
onst selected = await getSelectedPeriodic
Inspecti
onSideSlopeL
ist({
periodicId
: th
is.currentForm
.id,
pageSize
: 10000, // 获取所有选中项
pageNo
: 1
});
// 重置全局选中池
th
is.allSelecti
on.clear();
th
is.mulitipleSelecti
on = selected
.entities;
// 存储全局选中状态
th
is.mulitipleSelecti
on.forEach(item => {
th
is.allSelecti
on.set(item
.sideSlopeUniqueCode, item);
});
}
// 设置当前页选中状态
th
is.isInitializ
ingSelecti
on = true;
th
is.$nextTick(() => {
th
is.formTabledata
.forEach(row => {
if (th
is.allSelecti
on.has(row
.sideSlopeUniqueCode)) {
th
is.$refs
.scrollTable
.toggleRowSelecti
on(row, true);
}
});
th
is.isInitializ
ingSelecti
on = false;
});
}
} catch (
error) {
c
onsole
.error("加载数据失败
:",
error);
th
is.$message
.error("加载数据失败");
} f
inally {
th
is.load
ing = false;
}
},
// 当前页码变化
handleCurrentChange(val) {
th
is.pageParams
.pageNo = val;
th
is.LoadL
istData();
},
// 获取技术状态等级选项
async getEvaluateLevel() {
c
onst levelL
ist = await mapCfg("
Inspecti
on.Regular
.RegularEvaluateLevel")();
th
is.evaluateLevelopti
ons = levelL
ist
.map((item) => ({
value
: item
.key,
label
: item
.value,
}));
},
// 提交表单
async submitForm() {
th
is.$refs
.formRef
.validate(async (valid) => {
if (valid) {
// 验证是否选择了边坡
c
onst selectedItems = Array
.from(th
is.allSelecti
on.values());
if (th
is.allSelecti
on.size === 0) {
th
is.$message
.warn
ing("请至少选择一个边坡");
return;
}
// 构造提交参数
c
onst params = {
...th
is.currentForm,
sideSlopeDetailL
ist
: selectedItems
.map(item => ({
sideSlopeUniqueCode
: item
.sideSlopeUniqueCode,
evaluateLevel
: item
.evaluateLevel,
evaluateDate
: item
.evaluateDate || undef
ined
})),
};
// 根据模式选择操作
c
onst acti
on = th
is.dialogMode === "create"
? addPeriodic
Inspecti
on
: modifyPeriodic
Inspecti
on;
// 执行操作
try {
c
onst success = await acti
on(params);
if (success) {
th
is.$message
.success(
th
is.dialogMode === "create" ? "新建成功"
: "修改成功"
);
th
is.$refs
.scrollTable
.clearSelecti
on();
th
is.$emit("success");
th
is.dialogV
isible = false;
} else {
th
is.$message
.error("操作失败");
}
} catch (
error) {
th
is.$message
.error(
error.message || "操作失败");
}
}
});
}
},
};
</script>
<style lang="scss" scoped>
/* 修复1：弹性容器最小高度约束 */
:deep(
.fixed
-height
-dialog),
.formBorder2,
.formBorder2
.el
-c
onta
iner,
.formBorder2
.el
-ma
in {
m
in-height
: 0 !important;
}
/* 表格行高优化 */
:deep(
.el
-table) {
.el
-table__row {
height
: 36px !important;
td {
padd
ing
: 4px 0 !important;
}
}
.el
-table__header {
th {
padd
ing
: 4px 0 !important;
.cell {
l
ine
-height
: 28px !important;
}
}
}
/* 确保内部滚动 */
.el
-table__body
-wrapper {
overflow
-y
: auto !important;
max
-height
: calc(100vh
- 400px) !important;
}
}
/* 表单区域固定 */
.formBorder {
positi
on: relative; ///为伪元素提供定位上下文
border
: th
in dotted black !important;
padd
ing
: 10px !important;
marg
in-top
: 15px !important;
flex
-shr
ink
: 0 !important;
height
: auto !important;
overflow
: v
isible !important;
marg
in-bottom
: 15px !important;
/* 边框的文字 */
&
::before {
c
ontent
: "项目信息";
positi
on: absolute;
top
: -8px; //调整到更合适的位置
left
: 15px; //向右移动避免遮挡
background
-color
: #fff; //背景色需与页面背景一致
padd
ing
: 0 8px;
f
ont
-size
: 13px;
color
: #606266;
z
-index
: 10; //提高层级确保显示
f
ont
-weight
: 500; //加粗文字
po
inter
-events
: n
one; //防止点击穿透
}
}
.formBorder2 {
positi
on: relative;
border
: th
in dotted black;
padd
ing
: 10px;
flex
: 1;
m
in-height
: 0;
overflow
: hidden; // 保留
d
isplay
: flex;
flex
-directi
on: column;
padd
ing
-top
: 25px; // 新增
&
::before {
c
ontent
: "待检边坡";
positi
on: absolute;
top
: 5px; // 调整到新增的padd
ing区域内部
left
: 15px;
background
-color
: #fff;
padd
ing
: 0 8px;
f
ont
-size
: 13px;
color
: #606266;
z
-index
: 1000;
f
ont
-weight
: 500;
po
inter
-events
: n
one;
}
.el
-c
onta
iner {
height
: auto !important; // 覆盖行内样式
flex
: 1; // 填满剩余空间
d
isplay
: flex;
flex
-directi
on: column;
m
in-height
: 0;
.el
-header {
flex
-shr
ink
: 0;
height
: auto !important;
padd
ing
-bottom
: 10px;
}
.el
-ma
in {
flex
: 1;
overflow
: hidden;
positi
on: relative;
padd
ing
: 0;
}
.el
-footer {
flex
-shr
ink
: 0;
padd
ing
-top
: 10px;
}
}
}
// 弹窗底部按钮区域
.dialog
-footer {
padd
ing
: 10px 20px;
border
-top
: 1px solid #ebeef5;
text
-align
: center;
}
// 搜索区域样式
.searchDialog {
marg
in-top
: 5px;
}
// 空数据样式
:deep(
.el
-table__empty
-block) {
m
in-height
: 200px;
d
isplay
: flex;
justify
-c
ontent
: center;
align
-items
: center;
}
// 分页样式
:deep(
.el
-pag
inati
on) {
padd
ing
: 5px 0;
}
// 表格高度控制
:deep(
.el
-table) {
height
: 100% !important;
.el
-table__body
-wrapper {
overflow
-y
: auto !important;
}
}
</style><template>
<div class="project
-management
-block">
<!
-- 弹窗组件
-->
<side
-slope
-dialog
:v
isible="dialogV
isible"
:mode="currentMode"
:initial
-form="currentForm"
@update
:v
isible="dialogV
isible = $event"
@success="handleDialogSuccess" />
<div class="project
-management
-block
--header">
<el
-form
size="m
ini"
:inl
ine="true"
class="fr ml10"
align="left">
<el
-input
v
-model="searchParams
.projectName"
placeholder="项目名称或编号"
size="m
ini"
clearable
@clear="resetSearch"
style="width
: 140px;"
class="mr10" />
<el
-select
v
-model="searchParams
.status"
placeholder="项目状态"
size="m
ini"
clearable
@clear="resetSearch"
style="width
: 140px;"
class="mr10">
<el
-opti
on
v
-for="item
in statusOpti
ons"
:key="item
.value"
:label="item
.label"
:value="item
.value"
filterable />
</el
-select>
<el
-date
-picker
v
-model="searchProjectDate"
value
-format="timestamp"
size="m
ini"
class="mr10"
type="datetimerange"
range
-separator="至"
start
-placeholder="开始日期"
end
-placeholder="结束日期">
</el
-date
-picker>
<el
-butt
on
type="primary"
size="m
ini"
style="width
: 80px;"
@click="handleSearch"
class="mr10"
>查询
</el
-butt
on>
<el
-butt
on
type="success"
size="m
ini"
style="width
: 80px;"
@click="openCreateDialog"
class="mr10"
>新建
</el
-butt
on>
</el
-form>
</div>
<div class="project
-management
-block
--c
ontent" >
<!
-- 项目数据表格
-->
<el
-table
:data="tableData"
border
style="width
: 100%;
flex
: 1;"
height="100%"
>
<el
-table
-column
label="序号"
type="
index"
width="120">
</el
-table
-column>
<el
-table
-column
label="项目名称"
prop="projectName"
width="250">
</el
-table
-column>
<el
-table
-column
label="项目编号"
prop="projectCode"
width="220">
</el
-table
-column>
<el
-table
-column
label="项目周期"
width="250">
<template slot
-scope="scope">
{{ scope
.row
.projectStartDate ?
formatDateRange(scope
.row
.projectStartDate, scope
.row
.projectEndDate)
: ''
}}
</template>
</el
-table
-column>
<el
-table
-column
label="项目状态"
width="150">
<template slot
-scope="scope">
{{ scope
.row
.status ?
getStatusText(scope
.row
.status)
: ''
}}
</template>
</el
-table
-column>
<el
-table
-column
label="边坡总数"
prop="sideSlopeTotalCount"
width="150">
</el
-table
-column>
<el
-table
-column
label="已完成边坡数"
prop="sideSlopeCompleteCount"
width="194">
</el
-table
-column>
<el
-table
-column
label="完成率"
width="150">
<template slot
-scope="scope">
{{
scope
.row
.sideSlopeTotalCount ?
calculateCompleti
onRate(
scope
.row
.sideSlopeCompleteCount,
scope
.row
.sideSlopeTotalCount
)
: ''
}}
</template>
</el
-table
-column>
<el
-table
-column
label="操作"
width="195">
<template
slot
-scope="scope">
<div
v
-if="scope
.row
.id"
style="d
isplay
: flex;
justify
-c
ontent
: center;">
<el
-butt
on
size="m
ini"
type="primary"
@click="openViewDialog(scope
.row)"
style="padd
ing
: 4px 8px;
f
ont
-size
: 12px"
>查看
</el
-butt
on>
<el
-butt
on
size="m
ini"
type="
info"
@click="openEditDialog(scope
.row)"
style="padd
ing
: 4px 8px;
f
ont
-size
: 12px"
>编辑
</el
-butt
on>
<el
-butt
on
size="m
ini"
type="danger"
@click="deleteItem(scope
.row)"
style="padd
ing
: 4px 8px;
f
ont
-size
: 12px"
>删除
</el
-butt
on>
</div>
</template>
</el
-table
-column>
</el
-table>
</div>
<div class="project
-management
-block
--footer">
<el
-pag
inati
on
background
layout="total,prev, pager, next,jumper"
:current
-page
.sync="pageParams
.pageNo"
:page
-size="pageParams
.pageSize"
:total="pageParams
.total"/>
</div>
</div>
</template>
<script>
// 导入模块
import SideSlopeDialog from '
./SideSlopeDialog
.vue' // 项目详情弹窗组件
import { mapCfg } from '@/utils' // 字典配置映射工具
//接口
import {
getPeriodic
Inspecti
onPageL
ist,
deletePeriodic
Inspecti
on
} from '
../
../api/testProject'
// 组件定义
export default {
name
: 'ProjectManagement', // 组件名称
comp
onents
: {
SideSlopeDialog // 注册弹窗组件
},
// 数据模型
data() {
return {
// 搜索参数对象
searchParams
: {
projectName
: '', // 项目名称/编号搜索词
status
: '', // 项目状态筛选值
projectStartDate
: '', // 项目开始日期
projectEndDate
: '' // 项目结束日期
},
// 日期范围选择器绑定值
searchProjectDate
: [],
// 项目状态下拉选项
statusOpti
ons
: [],
// 表格数据源
tableData
: [],
// 分页参数
pageParams
: {
pageNo
: 1, // 当前页码
pageSize
: 10, // 每页条数
total
: 0 // 总数据量
},
// 弹窗控制参数
dialogV
isible
: false, // 弹窗显示状态
currentMode
: '', // 弹窗模式
: 'create'/'edit'/'view'
currentForm
: null // 当前表单数据
}
},
// 监听器
watch
: {
//监听日期范围选择器变化：将选择器值同步到搜索参数对象
searchProjectDate(newVal) {
if (newVal && newVal
.length === 2) {
th
is.searchParams
.projectStartDate = newVal[0]
th
is.searchParams
.projectEndDate = newVal[1]
} else {
th
is.searchParams
.projectStartDate = ''
th
is.searchParams
.projectEndDate = ''
}
}
},
// 生命周期钩子
async created() {
// 初始化状态选项
th
is.getStatus()
// 加载表格数据
th
is.loadTableData()
},
// 方法/函数
methods
: {
// 工具方法
//根据状态值获取状态文本
getStatusText(statusValue) {
c
onst opti
on = th
is.statusOpti
ons
.f
ind((opt) => opt
.value === statusValue)
return opti
on ? opti
on.label
: ''
},
//格式化日期范围
formatDateRange(start, end) {
if (!start || !end) return ''
// 截取日期部分（去除时间）
c
onst format = (dateStr) => dateStr
.substr
ing(0, 10)
return `${format(start)} 至 ${format(end)}`
},
//计算完成率
calculateCompleti
onRate(completed, total) {
if (!total ||
isNaN(total) || total <= 0) return '0%'
return `${((completed / total) * 100)
.toFixed(1)}%`
},
// 弹窗操作方法
//创建项目弹窗
openCreateDialog() {
th
is.currentMode = 'create'
// 重置表单数据
th
is.currentForm = {
projectCode
: '',
projectName
: '',
projectStartDate
: '',
projectEndDate
: '',
projectUser
: '',
remark
: '',
sideSlopeDetailL
ist
: []
}
th
is.dialogV
isible = true
},
//编辑项目弹窗
openEditDialog(row) {
th
is.currentMode = 'edit'
// 复制当前行数据到表单
th
is.currentForm = {
...row,
projectStartDate
: row
.projectStartDate,
projectEndDate
: row
.projectEndDate
}
th
is.dialogV
isible = true
},
//查看项目弹窗
openViewDialog(row) {
th
is.currentMode = 'view'
// 复制当前行数据到表单
th
is.currentForm = {
...row,
projectStartDate
: row
.projectStartDate,
projectEndDate
: row
.projectEndDate
}
th
is.dialogV
isible = true
},
// 弹窗操作成功回调,刷新表格数据（返回第一页）
handleDialogSuccess() {
th
is.pageParams
.pageNo = 1
th
is.loadTableData()
},
// 数据操作方法
//加载表格数据,根据搜索参数和分页设置获取项目数据
async loadTableData() {
// 转换日期为时间戳格式
c
onst startTime = th
is.searchParams
.projectStartDate
? new Date(th
is.searchParams
.projectStartDate)
.getTime()
: null
c
onst endTime = th
is.searchParams
.projectEndDate
? new Date(th
is.searchParams
.projectEndDate)
.getTime()
: null
// 构造API参数
c
onst params = {
pageNo
: th
is.pageParams
.pageNo,
pageSize
: th
is.pageParams
.pageSize,
searchKey
: th
is.searchParams
.projectName,
status
: th
is.searchParams
.status,
startTime,
endTime
}
try {
// 调用API获取项目数据
c
onst res = await getPeriodic
Inspecti
onPageL
ist(params)
th
is.tableData = res
.entities || []
th
is.pageParams
.total = res
.entityCount || 0
} catch (
error) {
c
onsole
.error('加载项目列表失败',
error)
th
is.tableData = []
th
is.pageParams
.total = 0
}
},
//搜索方法重置到第一页并重新加载数据
handleSearch() {
th
is.pageParams
.pageNo = 1
th
is.loadTableData()
},
//重置搜索条件，清空所有搜索参数并重新加载数据
resetSearch() {
th
is.searchParams = {
projectName
: '',
status
: '',
projectStartDate
: '',
projectEndDate
: ''
}
th
is.searchProjectDate = []
th
is.handleSearch()
},
//删除项目
async deleteItem(row) {
try {
// 显示确认对话框
await th
is.$c
onfirm('确定要删除该项目吗？', '提示', {
c
onfirmButt
onText
: '确定',
cancelButt
onText
: '取消',
type
: 'warn
ing'
})
// 调用删除API
await deletePeriodic
Inspecti
on({ periodicId
: row
.id })
th
is.$message
.success('删除成功')
// 如果删除的是最后一页的最后一条，返回上一页
if (th
is.tableData
.length === 1 && th
is.pageParams
.pageNo > 1) {
th
is.pageParams
.pageNo
-= 1
}
// 重新加载数据
th
is.loadTableData()
} catch (
error) {
// 用户取消删除时不显示错误
if (
error !== 'cancel') {
th
is.$message
.error('删除失败')
}
}
},
//从字典配置加载状态选项
getStatus() {
try {
// 获取字典配置
c
onst dictL
ist = mapCfg('
Inspecti
on.Periodic
.Periodic
Inspecti
onStatus')()
// 转换为Element
-UI需要的格式
th
is.statusOpti
ons = dictL
ist
.map((item) => ({
value
: item
.key,
label
: item
.value
}))
} catch (e) {
c
onsole
.error("获取状态失败", e);
th
is.statusOpti
ons = [];
}
}
}
}
</script>
<style lang="scss" scoped>
.project
-management
-block {
width
: 100%;
height
: 100%;
positi
on: relative;
background
-color
: #fff;
&
--header {
height
: 50px;
box
-siz
ing
: border
-box;
padd
ing
: 10px;
border
-bottom
: 1px solid #ebeef5;
}
&
--c
ontent {
d
isplay
: block;
padd
ing
: 10px;
height
: calc(100%
- 90px);
positi
on: relative;
z
-index
: 10;
}
&
--footer {
border
-top
: 1px solid #ebeef5;
padd
ing
: 4px 10px 0 10px;
positi
on: relative;
z
-index
: 11;
text
-align
: center;
}
}
/* 优化表格样式 */
::v
-deep
.el
-table {
flex
: 1;
m
in-height
: 0; // 防止flex布局溢出
/* 单元格样式 */
th,
td {
padd
ing
: 4px 0;
}
/* 表头样式 */
.el
-table__header
-wrapper {
l
ine
-height
: 1;
th {
.cell {
l
ine
-height
: 1
.2;
}
}
}
}
/* 分页组件样式优化，确保在不同缩放比例下可见 */
::v
-deep
.el
-pag
inati
on {
padd
ing
: 4px 5px;
.btn
-prev,
.btn
-next,
.el
-pager li,
.el
-pag
inati
on__jump {
m
in-width
: 28px;
height
: 28px;
l
ine
-height
: 28px;
marg
in: 0 2px;
}
.el
-pag
inati
on__total,
.el
-pag
inati
on__jump {
f
ont
-size
: 12px;
}
}
/* 响应式调整 */
@media screen and (max
-width
: 1200px) {
.project
-management
-block
--header
.el
-col {
marg
in-bottom
: 8px;
}
::v
-deep
.el
-pag
inati
on {
d
isplay
: flex;
flex
-wrap
: wrap;
justify
-c
ontent
: center;
&>* {
marg
in-bottom
: 5px;
}
}
}
</style>
vue.runtime
.esm
.js:4662 [
Vue warn]
: Error in callback for immediate watcher "
initialForm" (Prom
ise/async)
: "
TypeError: Can
not read properties of null (read
ing 'projectStartDate')"
found
in
---> <SideSlopeDialog> at src/pages/c
onservati
on-management/SideSlopeDialog
.vue
<ProjectManagement> at src/pages/c
onservati
on-management/_ProjectManagement
.vue
<TabPage> at src/pages/base/comp
onents/TabPage
.vue
<ElTabPane> at packages/tabs/src/tab
-pane
.vue
<ElTabs> at packages/tabs/src/tabs
.vue
<ElMa
in> at packages/ma
in/src/ma
in.vue
<ElC
onta
iner> at packages/c
onta
iner/src/ma
in.vue... (1 recursive calls)
<AppMa
in> at src/pages/base/AppMa
in.vue
<Backend> at src/pages/comm
on/Backend
.vue
<App> at src/App
.vue
<Root>这是怎么回事
文章描述了一个在Vue2项目中进行表单上传时遇到的错误——TypeError:dateObject.getTimeisnotafunction。问题根源在于rules中的日期验证规则type:date，由于日期字段被初始化为字符串而非日期对象，导致此问题。解决方案是移除rules中的type:date约束，确保日期字段在表单中重新选择后以正确的日期格式处理。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
