明树Git Lab

Skip to content

J
jt_front
Commit a16431ee authored by zhanghan's avatar zhanghan
Browse files
Options

样式处理

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