fuliqi
2024-11-27 02cb7ae4d616e943e2b8660044c535db51ef4203
src/views/projectEngineering/projectLibrary/projectDetails.vue
@@ -1,6 +1,6 @@
<template>
  <el-card class="card-container">
    <div class="flex justify-between mb-4">
    <div class="flex-container mb-4">
      <el-tabs v-model="currentTab" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in TABS_DATA"
@@ -8,28 +8,33 @@
          :label="item.label"
          :name="item.value"
        >
          <template slot="label">
            <div class="text-sm">{{ item.label }}</div>
          <template slot-scope="item">
            <div class="tab-label">{{ item.label }}</div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <component :is="componentName" ref="childRef" :disabled="disabled" class="w-full h-[calc(100%-55px)]" />
    <div v-if="!disabled" class="mt-[3%] ml-[3%] flex">
      <el-button class="w-[72px]" type="primary" @click="submit">保存</el-button>
      <el-button class="w-[72px]" @click="reset">重置</el-button>
      <!-- <el-button v-else class="w-[72px]" @click="cancel">取消</el-button> -->
    <component
      :is="componentName"
      ref="childRef"
      :disabled="disabled"
      class="full-width custom-height"
    />
    <div v-if="!disabled" class="button-container">
      <el-button class="save-button" type="primary" @click="submit">保存</el-button>
      <el-button class="reset-button" @click="reset">重置</el-button>
      <!-- <el-button v-else class="cancel-button" @click="cancel">取消</el-button> -->
    </div>
  </el-card>
</template>
<script>
import BasicInfo from '@/views/projectEngineering/projectLibrary/component/BasicInfo';
// import InvestInfo from '@/components/InvestInfo.vue';
// import InvestmentFunds from '@/components/investmentFunds.vue';
// import LegalPerson from '@/components/legalPerson.vue';
// import PolicyInfo from '@/components/PolicyInfo.vue';
// import DocumentsInfo from '@/components/DocumentsInfo.vue';
import InvestInfo from '@/views/projectEngineering/projectLibrary/component/InvestInfo';
import InvestmentFunds from '@/views/projectEngineering/projectLibrary/component/investmentFunds';
import LegalPerson from '@/views/projectEngineering/projectLibrary/component/legalPerson';
import PolicyInfo from '@/views/projectEngineering/projectLibrary/component/PolicyInfo';
import DocumentsInfo from '@/views/projectEngineering/projectLibrary/component/DocumentsInfo';
import { addProject, getProject, updateProject, getProjectCode } from '@/api/projectInfo';
export default {
@@ -38,7 +43,7 @@
      currentTab: '项目管理基础信息',
      id: this.$route.query.id || '',
      disabled: false,
      componentName: 'BasicInfo',
      componentName: BasicInfo,
      TABS_DATA: [
        {
          label: '项目管理基础信息',
@@ -48,32 +53,30 @@
        {
          label: '投资管理基础信息',
          value: '任务下发',
          componentName: 'InvestInfo'
          componentName: InvestInfo
        },
        {
          label: ' 项目投资及资金来源',
          value: '项目投资及资金来源',
          componentName: 'InvestmentFunds'
          componentName: InvestmentFunds
        },
        {
          label: '项目(法人)单位登记信息',
          value: '项目(法人)单位登记信息',
          componentName: 'LegalPerson'
          componentName: LegalPerson
        },
        {
          label: '投资项目产业政策符合情况',
          value: '投资项目产业政策符合情况',
          componentName: 'PolicyInfo'
          componentName: PolicyInfo
        },
        {
          label: '相关文书',
          value: '相关文书',
          componentName: 'DocumentsInfo'
          componentName: DocumentsInfo
        }
      ],
      childRef: null,
      // 假设这些状态是从 Vuex 中获取的,或者你可以直接在 data 中定义它们
      // projectForm, investment, investmentFunds, legalPerson, resetPlanLibrary, investmentProjectPolicyComplianceDTO, fileIdList, documentsInfoList, projectList, fileList
    };
  },
  methods: {
@@ -165,7 +168,6 @@
        this.getProjectInfo(this.id);
      } else {
        this.getProjectCodeApi();
        // 假设 resetPlanLibrary 是一个方法,用于重置状态
        this.resetPlanLibrary();
        this.fileList = [];
        this.fileIdList = [];
@@ -184,8 +186,6 @@
        }
      });
    },
    // 假设 resetPlanLibrary 是从某个地方引入或定义的,你需要确保它在你的组件中可用
    // resetPlanLibrary() { ... }
  },
  created() {
    // 在组件创建时获取项目信息,如果 id 存在
@@ -193,8 +193,6 @@
      this.getProjectInfo(this.id);
    } else {
      this.getProjectCodeApi();
      // 初始化或重置状态
      // this.resetPlanLibrary();
    }
  },
@@ -202,5 +200,36 @@
</script>
<style scoped>
/* 你的样式 */
::v-deep .el-tabs__nav-wrap::after {
  background-color: rgba(0, 0, 0, 0) !important;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.tab-label {
  font-size: 14px;
}
.full-width {
  width: 100%;
}
.custom-height {
  height: calc(100% - 55px);
}
.button-container {
  margin-top: 3%;
  margin-left: 3%;
  display: flex;
}
.save-button,
.reset-button {
  width: 72px;
}
</style>