年度计划开发完毕

src/views/everydayPage/annual.vue

@@ -65,7 +65,37 @@ let tableData = ref([]);
 let tableColumns = ref([
   {
     prop: "projectName",
-    label: "项目信息",
+    label: "项目名称",
+    showOverflowTooltip: true,
+  },
+  {
+    prop: "projectForeignName",
+    label: "项目外文名称",
+    showOverflowTooltip: true,
+  },
+  {
+    prop: "sbdw",
+    label: "申报单位",
+    showOverflowTooltip: true,
+  },
+  {
+    prop: "ssejqy",
+    label: "所属二级企业",
+    showOverflowTooltip: true,
+  },
+  {
+    prop: "xmgsmc",
+    label: "项目公司名称",
+    showOverflowTooltip: true,
+  },
+  {
+    prop: "xmkgsjyj",
+    label: "项目预计起始时间",
+    showOverflowTooltip: true,
+  },
+  {
+    prop: "xmjgsjyj",
+    label: "目预计完成时间",
     showOverflowTooltip: true,
   },
 
@@ -86,7 +116,7 @@ let pageSize = ref(10);
 const getStatementData = () => {
   loading.value = true;
   proxy.$post({
-    url: "/api/project/getJsqtzjcList",
+    url: "/api/project/getTzjhList",
     data: {
       page: currentPage.value,
       pagesize: pageSize.value,
@@ -136,7 +166,7 @@ const deleteStatement = (item) => {
   })
     .then(() => {
       proxy.$post({
-        url: "/api/project/deleteJsqtzjc",
+        url: "/api/project/deleteTzjh",
         data: {
           id: item.id,
         },

src/views/everydayPage/annualPlan.vue

+<template>
+  <!-- 外层左右布局flex容器 -->
+  <div class="annual-plan-wrap">
+    <!-- 左侧：数据驱动的原生表格（绑定右侧行合计值） -->
+    <div class="left-table">
+      <table class="investment-table">
+        <tbody>
+          <!-- 计划资金来源（全口径）模块 -->
+          <tr>
+            <td rowspan="18" class="first-col">年度投资计划</td>
+            <td rowspan="16" class="second-col">计划投资完成及资金来源</td>
+            <td rowspan="9" class="third-col">计划资金来源（全口径）</td>
+            <td style="height: 48px"></td>
+            <td style="height: 48px"></td>
+            <td style="height: 48px">合计</td>
+          </tr>
+          <tr>
+            <td rowspan="3">资本金</td>
+            <td>小计</td>
+            <td>{{ getRowTotal(1) }}万元</td>
+          </tr>
+          <tr>
+            <td>能建方*</td>
+            <td>{{ getRowTotal(2) }}万元</td>
+          </tr>
+          <tr>
+            <td>外部股东*</td>
+            <td>{{ getRowTotal(3) }}万元</td>
+          </tr>
+          <tr>
+            <td rowspan="2">债权融资*</td>
+            <td>小计*</td>
+            <td>{{ getRowTotal(4) }}万元</td>
+          </tr>
+          <tr>
+            <td>其中：非并表项目我方贷款/担保额*</td>
+            <td>{{ getRowTotal(5) }}万元</td>
+          </tr>
+          <tr>
+            <td>回款再投入*</td>
+            <td></td>
+            <td>{{ getRowTotal(6) }}万元</td>
+          </tr>
+          <tr>
+            <td rowspan="2">其他*</td>
+            <td>小计*</td>
+            <td>{{ getRowTotal(7) }}万元</td>
+          </tr>
+          <tr>
+            <td>其中：我方其他出资*</td>
+            <td>{{ getRowTotal(8) }}万元</td>
+          </tr>
+          <!-- 资金来源（新口径）模块 -->
+          <tr>
+            <td rowspan="6" class="third-col">资金来源（新口径）</td>
+            <td>合计</td>
+            <td></td>
+            <td>{{ getRowTotal(9) }}万元</td>
+          </tr>
+          <tr>
+            <td rowspan="3">资本金</td>
+            <td>小计</td>
+            <td>{{ getRowTotal(10) }}万元</td>
+          </tr>
+          <tr>
+            <td>能建方</td>
+            <td>{{ getRowTotal(11) }}万元</td>
+          </tr>
+          <tr>
+            <td>外部股东</td>
+            <td>{{ getRowTotal(12) }}万元</td>
+          </tr>
+          <tr>
+            <td>债权融资</td>
+            <td></td>
+            <td>{{ getRowTotal(13) }}万元</td>
+          </tr>
+          <tr>
+            <td>回款再投入</td>
+            <td></td>
+            <td>{{ getRowTotal(14) }}万元</td>
+          </tr>
+          <tr>
+            <td>其他</td>
+            <td></td>
+            <td></td>
+            <td>{{ getRowTotal(15) }}万元</td>
+          </tr>
+          <!-- 合计与政府付费模块 -->
+          <tr>
+            <td>合计</td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>{{ getRowTotal(16) }}万元</td>
+          </tr>
+          <tr>
+            <td>政府付费*</td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>{{ getRowTotal(17) }}万元</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 右侧：Element 时间输入表格（绑定父组件传递的数据源+动态时间） -->
+    <div class="right-table">
+      <el-table
+        :data="modelValue"
+        style="width: 100%"
+        border
+        :cell-style="tableCellStyle"
+        :row-style="{ height: '48px' }"
+        :header-row-style="{ height: '48px' }"
+      >
+        <el-table-column
+          v-for="time in dynamicTimeList"
+          :key="time"
+          :label="time"
+          width="160"
+          align="center"
+        >
+          <template #default="{ row }">
+            <el-input-number
+              v-model="row[time]"
+              :min="0"
+              :precision="2"
+              controls-position="right"
+              @change="handleChange(row)"
+              :disabled="isPreview"
+              style="width: 100%"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, watch, onMounted } from "vue";
+
+// 🔥 核心：接收父组件参数，v-model双向绑定核心（modelValue对应父组件v-model值）
+const props = defineProps({
+  // 双向绑定的表格数据源（父组件formData.xmndjh）
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  // 父组件传递的动态时间列表（替代子组件内部定义）
+  dynamicTimeList: {
+    type: Array,
+    default: () => [],
+  },
+  // 预览状态（禁用输入）
+  isPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 🔥 核心：触发双向绑定更新+原有事件兼容
+const emit = defineEmits([
+  "update:modelValue", // v-model必须的更新事件，同步数据给父组件
+  "handleAnnualPlanChange", // 保留原有事件，兼容父组件逻辑
+]);
+
+// 监听数据源变化（父组件回填时触发），确保合计值正确
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal.length === 0) return;
+    // 父组件回填数据后，重新计算所有行合计
+    newVal.forEach((row) => {
+      if (row) {
+        row.total = props.dynamicTimeList.reduce((sum, time) => {
+          return sum + (Number(row[time]) || 0);
+        }, 0);
+      }
+    });
+    // 同步更新父组件数据
+    emit("update:modelValue", newVal);
+  },
+  { deep: true, immediate: true },
+);
+
+// 获取对应行的合计值（父组件数据源，保留2位小数）
+const getRowTotal = (index) => {
+  const row = props.modelValue[index - 1];
+  return row?.total ? row.total.toFixed(2) : "0.00";
+};
+
+onMounted(() => {
+  console.log(props.dynamicTimeList, " props.dynamicTimeList");
+});
+// 右侧数据变更：计算行合计 + 双向同步父组件 + 触发原有事件
+const handleChange = (row) => {
+  // 计算当前行合计（适配父组件动态时间列表）
+
+  row.total = props.dynamicTimeList.reduce((sum, time) => {
+    return sum + (Number(row[time]) || 0);
+  }, 0);
+};
+
+// 合计行样式（和父组件表格样式统一）
+const tableCellStyle = ({ row }) =>
+  row.isTotal ? { background: "#f5f7fa", fontWeight: "bold" } : {};
+</script>
+
+<style scoped lang="scss">
+// 核心：左右布局样式
+.annual-plan-wrap {
+  display: flex;
+  align-items: flex-start;
+  gap: 0; // 左右无缝衔接，视觉成一个整体
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  overflow-x: auto; // 整体横向滚动，避免左右分离滚动
+}
+
+// 左侧原生表格容器：固定宽度不挤压
+.left-table {
+  flex-shrink: 0;
+}
+// 左侧原生表格样式（160px列宽 + 48px行高 + 无缝边框）
+.investment-table {
+  width: fit-content;
+  border-collapse: collapse;
+  border: 1px solid #ebeef5; // 和父组件表格边框色统一
+  border-right: 0; // 取消右侧边框，和右侧EL表格无缝衔接
+}
+
+.investment-table td {
+  width: 160px; // 和右侧EL表格列宽完全统一
+  height: 49px; // 匹配原有行高，避免错位
+  border: 1px solid #ebeef5; // 和父组件表格边框色统一
+  padding: 0 !important; // 取消内边距，文字居中更整齐
+  text-align: center;
+  vertical-align: middle;
+  word-break: break-all;
+  box-sizing: border-box;
+}
+
+// 左侧表格层级背景色（保留原有样式）
+.first-col {
+  font-weight: bold;
+  background-color: #f5f7fa; // 和父组件合计行背景统一
+}
+.second-col {
+  background-color: #f5f7fa;
+}
+.third-col {
+  font-weight: 500;
+  background-color: #f5f7fa;
+}
+
+// 右侧EL表格样式优化（和父组件完全统一：行高/边框/内边距）
+:deep(.el-table) {
+  --el-table-border-color: #ebeef5; // 边框色和父组件表格一致
+  --el-table-row-height: 48px !important; // 行高和左侧强制统一
+  border-left: 0; // 取消左侧边框，和左侧无缝衔接
+}
+
+// 表头行高也强制48px，避免表头错位
+:deep(.el-table__header tr),
+:deep(.el-table__body tr) {
+  height: 48px !important;
+}
+
+:deep(.el-table-cell) {
+  padding: 0 !important; // 内边距和左侧一致
+  text-align: center;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+// 输入框适配行高，居中显示
+:deep(.el-input-number) {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.el-input-number__input) {
+  text-align: right;
+  padding-right: 25px;
+  width: 90%; // 微调宽度，避免输入框溢出
+}
+
+// 去除多余样式
+.flex {
+  display: flex;
+}
+</style>