明树Git Lab
Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
J
jt_front
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
jt_front
Commits
a16431ee
Commit
a16431ee
authored
Apr 02, 2026
by
zhanghan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
样式处理
parent
24964840
Pipeline
#109171
passed with stage
in 20 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
197 additions
and
158 deletions
+197
-158
index.vue
src/components/CollapseNavigation/index.vue
+10
-1
manage.less
src/styles/manage.less
+40
-0
annualAdd.vue
src/views/everydayPage/annualAdd.vue
+120
-122
annualPlan.vue
src/views/everydayPage/annualPlan.vue
+27
-35
No files found.
src/components/CollapseNavigation/index.vue
View file @
a16431ee
...
@@ -52,9 +52,18 @@ const props = defineProps({
...
@@ -52,9 +52,18 @@ const props = defineProps({
type
:
Number
,
type
:
Number
,
default
:
0
,
default
:
0
,
},
},
// 折叠面板的 v-model 绑定值(用于自动展开折叠面板)
collapseActiveNames
:
{
type
:
Array
,
default
:
null
,
},
});
});
const
emit
=
defineEmits
([
"update:activeItem"
,
"navClick"
]);
const
emit
=
defineEmits
([
"update:activeItem"
,
"navClick"
,
"update:collapseActiveNames"
,
]);
const
currentItem
=
ref
(
""
);
const
currentItem
=
ref
(
""
);
const
scrollContainerEl
=
ref
(
null
);
const
scrollContainerEl
=
ref
(
null
);
...
...
src/styles/manage.less
View file @
a16431ee
...
@@ -383,3 +383,43 @@
...
@@ -383,3 +383,43 @@
}
}
}
}
// ==========================设置定制化样式 end ==========================
// ==========================设置定制化样式 end ==========================
// ==========================表格双色条纹样式 start ==========================
.table-stripe-colors {
border: 1px solid #ebeef5;
// 奇数行 1、3、5、7…
.odd-row {
background-color: #f5f5f5 !important;
}
// 偶数行 2、4、6、8…
.even-row {
background-color: #edf0f5 !important;
}
// 鼠标悬停
.el-table__body tr:hover > td {
background-color: #e8f4ff !important;
}
// 表头
.el-table__header-wrapper {
th {
background-color: #f0f2f5 !important;
color: #333;
font-weight: 600;
text-align: center;
border-color: #ebeef5;
}
}
// 表格主体单元格
.el-table__body-wrapper {
td {
border-color: #ebeef5;
padding: 8px 0;
}
}
}
// ==========================表格双色条纹样式 end ==========================
src/views/everydayPage/annualAdd.vue
View file @
a16431ee
...
@@ -6,13 +6,12 @@
...
@@ -6,13 +6,12 @@
<div
class=
"project-tab-content-wrapper"
>
<div
class=
"project-tab-content-wrapper"
>
<div
class=
"tab-content"
>
<div
class=
"tab-content"
>
<el-form
label-width=
"150"
:model=
"formData"
:disabled=
"isPreview"
>
<el-form
label-width=
"150"
:model=
"formData"
:disabled=
"isPreview"
>
<el-collapse
v-model=
"activeCollapse"
>
<el-collapse
v-model=
"activeCollapse"
v-collapse-nav=
"navigationItems"
>
<!-- 项目基本信息:字段完全对齐数据库 -->
<!-- 项目基本信息:字段完全对齐数据库 -->
<el-collapse-item
<el-collapse-item
title=
"项目基本信息"
name=
"项目基本信息"
>
title=
"项目基本信息"
name=
"项目基本信息"
id=
"collapse-项目基本信息"
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"12"
>
<el-col
:span=
"12"
>
<el-form-item
label=
"项目信息"
required
>
<el-form-item
label=
"项目信息"
required
>
...
@@ -96,12 +95,16 @@
...
@@ -96,12 +95,16 @@
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
label=
"运营年限
(年)
"
>
<el-form-item
label=
"运营年限"
>
<el-input
<el-input
v-model=
"formData.yynxn"
v-model=
"formData.yynxn"
:min=
"0"
:min=
"0"
placeholder=
"请输入运营年限(年)"
placeholder=
"请输入运营年限"
/>
>
<template
#
suffix
>
<span>
年
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
...
@@ -122,16 +125,20 @@
...
@@ -122,16 +125,20 @@
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
label=
"项目建设期
(月)
"
>
<el-form-item
label=
"项目建设期"
>
<el-input
<el-input
v-model=
"formData.xmjsqy"
v-model=
"formData.xmjsqy"
:min=
"0"
:min=
"0"
placeholder=
"请输入项目建设期 (月)"
placeholder=
"请输入项目建设期"
/>
>
<
template
#
suffix
>
<span>
月
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
label=
"项目流转状态
(审批状态)
"
>
<el-form-item
label=
"项目流转状态"
>
<CommonSelector
<CommonSelector
v-model=
"formData.projectLzType"
v-model=
"formData.projectLzType"
dictName=
"xmlzzt"
dictName=
"xmlzzt"
...
@@ -154,7 +161,6 @@
...
@@ -154,7 +161,6 @@
<el-collapse-item
<el-collapse-item
title=
"国资委中央企业投资信息"
title=
"国资委中央企业投资信息"
name=
"国资委中央企业投资信息"
name=
"国资委中央企业投资信息"
id=
"collapse-国资委中央企业投资信息"
>
>
<div
class=
"tzxx"
>
<div
class=
"tzxx"
>
<!-- 战略类A:按数据库字段补充所有表单项 -->
<!-- 战略类A:按数据库字段补充所有表单项 -->
...
@@ -494,11 +500,7 @@
...
@@ -494,11 +500,7 @@
</div>
</div>
</el-collapse-item>
</el-collapse-item>
<!-- 最终分类情况:补充长文本输入框 -->
<!-- 最终分类情况:补充长文本输入框 -->
<el-collapse-item
<el-collapse-item
title=
"最终分类情况"
name=
"最终分类情况"
>
title=
"最终分类情况"
name=
"最终分类情况"
id=
"collapse-最终分类情况"
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"24"
>
<el-col
:span=
"24"
>
<el-form-item
label=
"最终分类情况说明"
>
<el-form-item
label=
"最终分类情况说明"
>
...
@@ -512,12 +514,10 @@
...
@@ -512,12 +514,10 @@
</el-col>
</el-col>
</el-row>
</el-row>
</el-collapse-item>
</el-collapse-item>
<!-- 可研/决策信息(单位:万元):独立表格,专属方法/数据源 -->
<!-- 可研/决策信息(单位:万元):独立表格,专属方法/数据源 -->
<el-collapse-item
<el-collapse-item
title=
"可研/决策信息(单位:万元)"
title=
"可研/决策信息(单位:万元)"
name=
"可研/决策信息(单位:万元)"
name=
"可研/决策信息(单位:万元)"
id=
"collapse-可研/决策信息(单位:万元)"
>
>
<el-table
<el-table
:data=
"financialIndicators"
:data=
"financialIndicators"
...
@@ -527,6 +527,7 @@
...
@@ -527,6 +527,7 @@
:header-cell-style=
"tableHeaderCellStyle"
:header-cell-style=
"tableHeaderCellStyle"
:row-class-name=
"tableRowClassName"
:row-class-name=
"tableRowClassName"
row-key=
"serialNumber"
row-key=
"serialNumber"
class=
"table-stripe-colors"
>
>
<!-- 序号列 -->
<!-- 序号列 -->
<el-table-column
<el-table-column
...
@@ -574,19 +575,20 @@
...
@@ -574,19 +575,20 @@
controls-position=
"right"
controls-position=
"right"
@
change=
"handleFinancialChange(row)"
@
change=
"handleFinancialChange(row)"
:disabled=
"isPreview"
:disabled=
"isPreview"
class=
"two-tone-input"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</template>
</template>
</el-table-column>
</el-table-column>
</el-table>
</el-table>
</el-collapse-item>
</el-collapse-item>
<!-- 年度投资计划:基础信息 -->
<!-- 年度投资计划:基础信息 -->
<el-collapse-item
<el-collapse-item
title=
"年度投资计划"
name=
"年度投资计划"
>
title=
"年度投资计划"
name=
"年度投资计划"
id=
"collapse-年度投资计划"
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<!-- 基础短字段:span12分栏 -->
<!-- 基础短字段:span12分栏 -->
<el-col
:span=
"8"
>
<el-col
:span=
"8"
>
...
@@ -611,7 +613,11 @@
...
@@ -611,7 +613,11 @@
<el-input
<el-input
v-model=
"formData.ndTzMb"
v-model=
"formData.ndTzMb"
placeholder=
"请输入年度投资目标"
placeholder=
"请输入年度投资目标"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"8"
>
<el-col
:span=
"8"
>
...
@@ -622,26 +628,7 @@
...
@@ -622,26 +628,7 @@
/>
/>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<!-- <el-col :span="6">
<el-form-item label-width="240px" label="项目预计起始时间">
<el-date-picker
v-model="formData.xmkgsjyj"
type="date"
placeholder="请选择时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="240px" label="项目预计完成时间">
<el-date-picker
v-model="formData.xmjgsjyj"
type="date"
placeholder="请选择时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col> -->
<el-col
:span=
"8"
>
<el-col
:span=
"8"
>
<el-form-item
<el-form-item
label-width=
"240px"
label-width=
"240px"
...
@@ -658,7 +645,7 @@
...
@@ -658,7 +645,7 @@
<el-col
:span=
"8"
>
<el-col
:span=
"8"
>
<el-form-item
<el-form-item
label-width=
"240px"
label-width=
"240px"
label=
"预计实现资本金内部收益率
(%)
"
label=
"预计实现资本金内部收益率"
>
>
<el-input
<el-input
v-model=
"formData.yjSxZbjNbsyl"
v-model=
"formData.yjSxZbjNbsyl"
...
@@ -668,7 +655,11 @@
...
@@ -668,7 +655,11 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"请输入收益率"
placeholder=
"请输入收益率"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
%
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"8"
>
<el-col
:span=
"8"
>
...
@@ -787,7 +778,6 @@
...
@@ -787,7 +778,6 @@
<el-collapse-item
<el-collapse-item
title=
"项目年度计划表格(单位:万元)"
title=
"项目年度计划表格(单位:万元)"
name=
"项目年度计划表格(单位:万元)"
name=
"项目年度计划表格(单位:万元)"
id=
"collapse-项目年度计划表格(单位:万元)"
>
>
<div
class=
"annualPlans"
>
<div
class=
"annualPlans"
>
<annualPlan
<annualPlan
...
@@ -803,7 +793,6 @@
...
@@ -803,7 +793,6 @@
<el-collapse-item
<el-collapse-item
title=
"项目年度计划(资金支付口径)"
title=
"项目年度计划(资金支付口径)"
name=
"项目年度计划(资金支付口径)"
name=
"项目年度计划(资金支付口径)"
id=
"collapse-项目年度计划(资金支付口径)"
>
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
...
@@ -816,15 +805,16 @@
...
@@ -816,15 +805,16 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
%
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
<el-form-item
label-width=
"180px"
label=
"年度计划总额"
>
label-width=
"180px"
label=
"年度计划总额(万元)"
>
<el-input
<el-input
v-model=
"formData.ndJhZe"
v-model=
"formData.ndJhZe"
:min=
"0"
:min=
"0"
...
@@ -832,14 +822,15 @@
...
@@ -832,14 +822,15 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
<el-form-item
label-width=
"180px"
label=
"资本金-能建方"
>
label-width=
"180px"
label=
"资本金-能建方(万元)"
>
<el-input
<el-input
v-model=
"formData.zbjPtF"
v-model=
"formData.zbjPtF"
:min=
"0"
:min=
"0"
...
@@ -847,14 +838,15 @@
...
@@ -847,14 +838,15 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
<el-form-item
label-width=
"180px"
label=
"资本金-外部股东"
>
label-width=
"180px"
label=
"资本金-外部股东(万元)"
>
<el-input
<el-input
v-model=
"formData.zbjWbGd"
v-model=
"formData.zbjWbGd"
:min=
"0"
:min=
"0"
...
@@ -862,11 +854,15 @@
...
@@ -862,11 +854,15 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
label-width=
"180px"
label=
"债权融资
(万元)
"
>
<el-form-item
label-width=
"180px"
label=
"债权融资"
>
<el-input
<el-input
v-model=
"formData.zqRz"
v-model=
"formData.zqRz"
:min=
"0"
:min=
"0"
...
@@ -874,14 +870,15 @@
...
@@ -874,14 +870,15 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
<el-form-item
label-width=
"180px"
label=
"回款再投入"
>
label-width=
"180px"
label=
"回款再投入(万元)"
>
<el-input
<el-input
v-model=
"formData.hkZtr"
v-model=
"formData.hkZtr"
:min=
"0"
:min=
"0"
...
@@ -889,12 +886,16 @@
...
@@ -889,12 +886,16 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
label-width=
"180px"
label=
"其他
(万元)
"
>
<el-form-item
label-width=
"180px"
label=
"其他"
>
<el-input
<el-input
v-model=
"formData.qt"
v-model=
"formData.qt"
:min=
"0"
:min=
"0"
...
@@ -902,14 +903,18 @@
...
@@ -902,14 +903,18 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
<el-col
:span=
"6"
>
<el-col
:span=
"6"
>
<el-form-item
<el-form-item
label-width=
"180px"
label-width=
"180px"
label=
"我方仅指本单位出资
(万元)
"
label=
"我方仅指本单位出资"
>
>
<el-input
<el-input
v-model=
"formData.wfJzBdwCz"
v-model=
"formData.wfJzBdwCz"
...
@@ -918,7 +923,11 @@
...
@@ -918,7 +923,11 @@
controls-position=
"right"
controls-position=
"right"
placeholder=
"0.00"
placeholder=
"0.00"
style=
"width: 100%"
style=
"width: 100%"
/>
>
<
template
#
suffix
>
<span>
万元
</span>
</
template
>
</el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-col>
</el-row>
</el-row>
...
@@ -927,7 +936,6 @@
...
@@ -927,7 +936,6 @@
<el-collapse-item
<el-collapse-item
title=
"2026年参股单位出资情况修正(单位:万元)"
title=
"2026年参股单位出资情况修正(单位:万元)"
name=
"2026年参股单位出资情况修正(单位:万元)"
name=
"2026年参股单位出资情况修正(单位:万元)"
id=
"collapse-2026年参股单位出资情况修正(单位:万元)"
>
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"24"
>
<el-col
:span=
"24"
>
...
@@ -973,7 +981,6 @@
...
@@ -973,7 +981,6 @@
</div>
</div>
</div>
</div>
</template>
</template>
<
script
setup
>
<
script
setup
>
import
{
reactive
,
ref
,
onMounted
,
getCurrentInstance
,
nextTick
}
from
"vue"
;
import
{
reactive
,
ref
,
onMounted
,
getCurrentInstance
,
nextTick
}
from
"vue"
;
import
{
useRouter
,
useRoute
}
from
"vue-router"
;
import
{
useRouter
,
useRoute
}
from
"vue-router"
;
...
@@ -1052,25 +1059,8 @@ const router = useRouter();
...
@@ -1052,25 +1059,8 @@ const router = useRouter();
const
route
=
useRoute
();
const
route
=
useRoute
();
const
{
proxy
}
=
getCurrentInstance
();
const
{
proxy
}
=
getCurrentInstance
();
// ========== 导航配置 ==========
// ========== 导航配置(由 v-collapse-nav 指令自动生成) ==========
// 定义所有折叠面板的导航信息
const
navigationItems
=
ref
([]);
const
getNavigationItems
=
()
=>
{
return
[
{
name
:
"项目基本信息"
,
label
:
"项目基本信息"
},
{
name
:
"国资委中央企业投资信息"
,
label
:
"国资委中央企业投资信息"
},
{
name
:
"最终分类情况"
,
label
:
"最终分类情况"
},
{
name
:
"可研/决策信息(单位:万元)"
,
label
:
"可研/决策信息"
},
{
name
:
"年度投资计划"
,
label
:
"年度投资计划"
},
{
name
:
"项目年度计划表格(单位:万元)"
,
label
:
"项目年度计划表格"
},
{
name
:
"项目年度计划(资金支付口径)"
,
label
:
"资金支付口径"
},
{
name
:
"2026年参股单位出资情况修正(单位:万元)"
,
label
:
"参股单位出资修正"
,
},
];
};
const
navigationItems
=
ref
(
getNavigationItems
());
// 导航点击处理
// 导航点击处理
const
handleNavClick
=
(
item
)
=>
{
const
handleNavClick
=
(
item
)
=>
{
...
@@ -1753,7 +1743,6 @@ onMounted(() => {
...
@@ -1753,7 +1743,6 @@ onMounted(() => {
}
}
});
});
</
script
>
</
script
>
<
style
lang=
"less"
scoped
>
<
style
lang=
"less"
scoped
>
// 布局容器
// 布局容器
.project-tab-content-wrapper {
.project-tab-content-wrapper {
...
@@ -1793,32 +1782,41 @@ onMounted(() => {
...
@@ -1793,32 +1782,41 @@ onMounted(() => {
}
}
}
}
// 可研/决策信息表格样式
// 双拼色输入框样式
:deep(.el-table) {
:deep(.two-tone-input) {
// 偶数行样式
.el-input__wrapper {
.even-row {
border-radius: 0;
background-color: #ffffff;
box-shadow: 0 0 0 1px #dcdfe6 inset;
padding: 0 8px;
}
}
.el-input__inner {
// 奇数行样式
background-color: transparent !important;
.odd-row {
text-align: right;
background-color: #fafafa;
padding-right: 45px;
color: #333;
}
}
.el-input__suffix {
// 鼠标悬停效果
position: absolute;
.el-table__body tr:hover > td {
right: 8px;
background-color: #e8f4ff !important;
top: 50%;
transform: translateY(-50%);
color: #606266;
font-size: 14px;
pointer-events: none;
}
}
&.is-focus .el-input__wrapper {
// 表格边框颜色
box-shadow: 0 0 0 1px #409eff inset;
.el-table__body-wrapper,
.el-table__header-wrapper {
border: 1px solid #ebeef5;
}
}
}
// 单元格样式
.add-project-header {
td {
display: flex;
border-color: #ebeef5;
justify-content: space-between;
align-items: center;
padding: 16px 0;
.header-right {
display: flex;
gap: 12px;
}
}
}
}
</
style
>
</
style
>
src/views/everydayPage/annualPlan.vue
View file @
a16431ee
...
@@ -6,7 +6,7 @@
...
@@ -6,7 +6,7 @@
<table
class=
"investment-table"
>
<table
class=
"investment-table"
>
<!-- 表头行 -->
<!-- 表头行 -->
<thead>
<thead>
<tr
style=
"background: #f5f7fa"
>
<tr>
<td
class=
"first-col"
colspan=
"5"
>
指标名称
</td>
<td
class=
"first-col"
colspan=
"5"
>
指标名称
</td>
<td>
合计
</td>
<td>
合计
</td>
</tr>
</tr>
...
@@ -151,14 +151,7 @@
...
@@ -151,14 +151,7 @@
<!-- 右侧:Element 时间输入表格(绑定**内部响应式数据**,不再直接绑props) -->
<!-- 右侧:Element 时间输入表格(绑定**内部响应式数据**,不再直接绑props) -->
<div
class=
"right-table"
>
<div
class=
"right-table"
>
<el-table
<el-table
:data=
"tableData"
:row-class-name=
"tableRowClassName"
border
>
:data=
"tableData"
style=
"width: 100%"
border
:cell-style=
"tableCellStyle"
:row-style=
"
{ height: '48px' }"
:header-row-style="{ height: '48px', background: '#f5f7fa' }"
>
<el-table-column
<el-table-column
v-for=
"time in validDynamicTimeList"
v-for=
"time in validDynamicTimeList"
:key=
"`time-col-$
{time}`"
:key=
"`time-col-$
{time}`"
...
@@ -201,7 +194,9 @@ const props = defineProps({
...
@@ -201,7 +194,9 @@ const props = defineProps({
dynamicTimeList
:
{
type
:
Array
,
default
:
()
=>
[]
},
// 父组件必须传
dynamicTimeList
:
{
type
:
Array
,
default
:
()
=>
[]
},
// 父组件必须传
isPreview
:
{
type
:
Boolean
,
default
:
false
},
isPreview
:
{
type
:
Boolean
,
default
:
false
},
});
});
const
tableRowClassName
=
({
rowIndex
})
=>
{
return
rowIndex
%
2
===
0
?
"even-row"
:
"odd-row"
;
};
const
emit
=
defineEmits
([
const
emit
=
defineEmits
([
"update:modelValue"
,
// v-model双向绑定
"update:modelValue"
,
// v-model双向绑定
"handleAnnualPlanChange"
,
// 原有业务事件
"handleAnnualPlanChange"
,
// 原有业务事件
...
@@ -322,19 +317,31 @@ const getAllRowsTotal = () => {
...
@@ -322,19 +317,31 @@ const getAllRowsTotal = () => {
return
total
.
toFixed
(
2
);
return
total
.
toFixed
(
2
);
};
};
// 合计行样式(保持不变)
// 表格单元格样式
const
tableCellStyle
=
({
row
})
=>
const
tableCellStyle
=
({
row
,
columnIndex
})
=>
{
row
?.
isTotal
?
{
background
:
"#f5f7fa"
,
fontWeight
:
"bold"
}
:
{};
const
baseStyle
=
{
border
:
"1px solid #ebeef5"
,
};
// 调试日志(打印内部数据字段,确认是否保留)
if
(
row
.
isTotal
)
{
onMounted
(()
=>
{
return
{
...
baseStyle
,
background
:
"#f5f7fa"
,
fontWeight
:
"bold"
};
if
(
tableData
.
value
.
length
>
0
)
{
}
}
});
// 左边三列(序号、指标项、合计)使用 #f7faff 背景色
if
(
columnIndex
===
0
||
columnIndex
===
1
||
columnIndex
===
2
)
{
return
{
...
baseStyle
,
background
:
"#f7faff"
};
}
return
baseStyle
;
};
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
// 所有样式保持不变,仅优化input样式,确保能看见
::v-deep
.odd-row
{
background-color
:
#f5f5f5
!
important
;
}
// 偶数行 2、4、6、8…
::v-deep
.even-row
{
background-color
:
#edf0f5
!
important
;
}
.annual-plan-wrap
{
.annual-plan-wrap
{
display
:
flex
;
display
:
flex
;
align-items
:
flex-start
;
align-items
:
flex-start
;
...
@@ -368,24 +375,9 @@ onMounted(() => {
...
@@ -368,24 +375,9 @@ onMounted(() => {
.investment-table
thead
td
{
.investment-table
thead
td
{
height
:
48px
;
height
:
48px
;
font-weight
:
bold
;
font-weight
:
bold
;
background
:
#f7faff
;
// background: #f7faff;
}
.first-col
{
font-weight
:
bold
;
// background-color: #f5f7fa;
}
.second-col
{
// background-color: #f5f7fa;
}
.third-col
{
font-weight
:
500
;
// background-color: #f5f7fa;
}
// 新增:第四列样式(计划投资回款等模块)
.fourth-col
{
// background-color: #f5f7fa;
font-weight
:
500
;
}
}
// 样式优化:移除不必要的隐藏,确保元素可见
// 样式优化:移除不必要的隐藏,确保元素可见
:deep
(
.el-table
)
{
:deep
(
.el-table
)
{
--el-table-border-color
:
#ebeef5
;
--el-table-border-color
:
#ebeef5
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment