2222

src/views/report/project/components/projectInfo.vue

 <template>
-  <div class="from-table font-line-space">
+  <div class="from-table font-line-space" v-if="tabsData[0].isShow">
+    <div v-if="tabsData[1].isShow">
       <a-row>
         <a-col :span="24" style="border-top: 0px">
           <div class="tb-title">
@@ -364,6 +365,7 @@
           </div>
         </a-col>
       </a-row>
+
       <a-row type="flex">
         <a-col :span="4" class="bg-gray">
           <div class="special-middle">
@@ -420,7 +422,8 @@
           </div>
         </a-col>
       </a-row>
-
+    </div>
+    <div v-if="tabsData[2].isShow">
       <a-row>
         <a-col :span="24" style="border-top: 0px">
           <div class="tb-title">
@@ -523,7 +526,8 @@
           </div>
         </a-col>
       </a-row>
-
+    </div>
+    <div v-if="tabsData[3].isShow">
       <a-row>
         <a-col :span="24" style="border-top: 0px">
           <div class="tb-title">
@@ -561,6 +565,8 @@
           <div v-html="toTextarea(value.researchProgress)"></div>
         </a-col>
       </a-row>
+    </div>
+    <div v-if="tabsData[4].isShow">
       <a-row>
         <a-col :span="24" style="border-top: 0px">
           <div class="tb-title">
@@ -578,6 +584,8 @@
           <div v-html="toTextarea(value.researchContent)"></div>
         </a-col>
       </a-row>
+    </div>
+    <div v-if="tabsData[5].isShow">
       <a-row>
         <a-col :span="24" style="border-top: 0px">
           <div class="tb-title">
@@ -625,7 +633,8 @@
           <div v-html="toTextarea(value.otherTarget)"></div>
         </a-col>
       </a-row>
-
+    </div>
+    <div v-if="tabsData[6].isShow">
       <!-- 经费预算 -->
       <budget-info :budget.sync="value.budget" />
       <!-- 分年度用款计划 -->
@@ -634,18 +643,24 @@
       <equipments-info :equipments.sync="value.equipments" />
       <!-- 设备费-购置设备预算明细表 -->
       <unit-payment-info :unitPayment.sync="value.unitPayment" />
+    </div>
+    <div v-if="tabsData[7].isShow">
       <!-- 项目绩效目标表v-if="value.projState >= 50" -->
       <project-kpi v-if="value.projectKPI" :projectKPI.sync="value.projectKPI" />
-
+    </div>
+    <div v-if="tabsData[8].isShow">
       <!-- 项目课题设置 -->
       <project-sub-info :dataList.sync="value.projectSubList" />
-
-    <!-- 单位科研项目及资金管理制度表 -->
-    <management-rule-info :dataList.sync="value.managementRuleList" />
-
+    </div>
+    <div v-if="tabsData[9].isShow">
       <!-- 附件 -->
       <file-info :fileList.sync="value.fileList" />
     </div>
+    <div v-if="tabsData[10].isShow">
+      <!-- 单位科研项目及资金管理制度表 -->
+      <management-rule-info :dataList.sync="value.managementRuleList" />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -679,8 +694,14 @@ export default {
       default: () => {
         return null
       }
+    },
+    tabsData: {
+      type: Array,
+      default: () => {
+        return []
       }
     },
+  },
   created () {
   },
   mounted () {

src/views/report/project/components/projectView.vue

@@ -2,10 +2,14 @@
 <template>
   <div class="app-content layoutEmbedded" style="height: 76vh;overflow: auto;">
     <a-spin :spinning="loading" style="width: 100%;height: 100%;">
+      <a-tabs type="card" hideAdd size="small" @change="callback">
+        <a-tab-pane :key="item.key" :tab="item.title" v-for="(item) in tabsData">
+        </a-tab-pane>
+      </a-tabs>
       <!-- 申报项目详情 -->
       <!-- <a-button type="primary" @click="onExport">导出</a-button> -->
-      <project-info v-model="projectInfo" v-if="projType" />
-      <project-info-Key v-model="projectInfo" v-else />
+      <project-info v-model="projectInfo" :tabsData="tabsData" v-if="projType" />
+      <project-info-Key v-model="projectInfo" :tabsData="tabsData" v-else />
     </a-spin>
   </div>
 </template>
@@ -49,6 +53,20 @@ export default {
   },
   data () {
     return {
+      tabsData: [
+        { title: '全部', key: '0', isShow: true },
+        { title: '基本情况', key: '1', isShow: false },
+        { title: '项目人员情况', key: '2', isShow: false },
+        { title: '项目可行性研究情况', key: '3', isShow: false },
+        { title: '项目实施目标', key: '4', isShow: false },
+        { title: '项目考核指标', key: '5', isShow: false },
+        { title: '项目经费', key: '6' },
+        { title: '项目绩效目标表', key: '7', isShow: false },
+        { title: '项目课题设置', key: '8' },
+        { title: '附件清单', key: '9' },
+        { title: '单位科研项目及资金管理制度', key: '10', isShow: false },
+        { title: '诚信承诺书', key: '11', isShow: false },
+      ],
       projectInfo: {
         id: null,
         organizationCode: null,
@@ -142,7 +160,19 @@ export default {
         document.body.removeChild(downloadElement); //下载完成移除元素
         window.URL.revokeObjectURL(href); //释放blob
       })
-    }
+    },
+    callback (key) {
+      var index = parseInt(key)
+      this.tabsData.forEach(e => {
+        if (key == '0')
+          e.isShow = true
+        else
+          e.isShow = false
+      })
+      this.tabsData[0].isShow = true;
+      this.tabsData[index].isShow = true;
+      console.log(this.tabsData);
+    },
   },
 }
 </script>