项目管理基础信息页面

fuliqi

2024-11-26 42e1d8e76fbf40f053a480cfdd359c9479b1cd63

 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,17 +8,22 @@
          :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>
@@ -38,7 +43,7 @@
      currentTab: '项目管理基础信息',
      id: this.$route.query.id || '',
      disabled: false,
      componentName: 'BasicInfo',
      componentName: BasicInfo,
      TABS_DATA: [
        {
          label: '项目管理基础信息',
@@ -202,5 +207,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>