Browse Source

提交研发项目经费预算表

ljb 10 months ago
parent
commit
d62cebc081

+ 57 - 0
src/components/project-select/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-select
+    v-model="xmId"
+    filterable
+    placeholder="请选择"
+    :loading="loading"
+    style="width: 100%;"
+    @change="handleProjectChange"
+  >
+    <el-option
+      v-for="item in projectList"
+      :key="item.id"
+      :label="item.xmmc"
+      :value="item.id">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { getList } from "@/api/projectManage/projectList";
+
+export default {
+  name: 'ProjectSelect',
+  props: {
+    value: [String, Number],
+    params: Object
+  },
+  data() {
+    return {
+      xmId: '',
+      loading: false,
+      projectList: []
+    }
+  },
+  mounted() {
+    this.getProjectList();
+  },
+  methods: {
+    getProjectList() {
+      getList(1, 99999, this.params).then(({ data }) => {
+        if (data.success) {
+          this.projectList = data.data.records;
+          this.xmId = this.value;
+
+          let currPro = this.projectList.find(item => item.id === this.value);
+          this.$emit('change', currPro);
+        }
+      })
+    },
+    handleProjectChange(val) {
+      let currPro = this.projectList.find(item => item.id === val);
+      this.$emit('input', val);
+      this.$emit('change', currPro);
+    },
+  }
+}
+</script>

+ 156 - 0
src/views/project-manage/components/all-budget-table.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="operate-btn" style="text-align: right; margin: 10px 16px;">
+        <el-button>刷新</el-button>
+        <el-button type="primary">下载</el-button>
+        <el-button type="primary">打印</el-button>
+      </div>
+      <table class="doc-page">
+        <thead>
+          <th colspan="3">研发项目经费预算表</th>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="doc-label">研发项目名称</td>
+            <td>
+              <project-select v-model="currProjectId" @change="handleProjectChange"></project-select>
+            </td>
+          </tr>
+          <tr>
+            <td class="doc-label">项目申请单位</td>
+            <td>{{ selProject.xmsqdw }}</td>
+          </tr>
+          <tr>
+            <td class="doc-label">项目起止时间</td>
+            <td>{{ getXmDateRange }}</td>
+          </tr>
+          <tr>
+            <td class="doc-label">研究费用预算明细</td>
+            <td style="padding: 0;">
+              <el-table
+                :data="tableData"
+                border
+                style="width: 100%"
+                show-summary
+                class="budget-table"
+              >
+                <el-table-column
+                  prop="kmmc"
+                  label="科目名称"                  
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="sales"
+                  label="科目金额"
+                  width="120"
+                  align="center"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="ratio"
+                  label="占总预算比例"
+                  align="center"
+                  width="120"
+                >
+                </el-table-column>
+              </el-table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+import projectSelect from "@/components/project-select";
+
+export default {
+  components: {
+    projectSelect,
+  },
+  data() {
+    return {
+      currProjectId: "",
+      tableData: [{
+        kmmc: '一、人员人工费用'
+      }, {
+        kmmc: '二、直接投入费用'
+      }, {
+        kmmc: '三、折旧费用与长期待摊费用'
+      }, {
+        kmmc: '四、无形资产摊销费用'
+      }, {
+        kmmc: '五、设计费用'
+      }, {
+        kmmc: '六、装备调试费用与试验费用'
+      }, {
+        kmmc: '七、委托外部研究开发费'
+      }, {
+        kmmc: '八、其他费用'
+      }],
+
+      selProject: {},
+    };
+  },
+  computed: {
+     getXmDateRange() {
+      if (this.selProject.xmkssj && this.selProject.xmjssj) {
+        let xmkssj = moment(this.selProject.xmkssj).format('yyyy年MM月DD日');
+        let xmjssj = moment(this.selProject.xmjssj).format('yyyy年MM月DD日')
+        return `${xmkssj}至${xmjssj}`;
+      }
+      return `年 月 日至 年 月 日`;
+    },
+  },
+  methods: {
+    handleProjectChange(data) {
+      this.selProject = data;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 800px;
+  margin: 0 auto;
+}
+.doc-page {
+  width: 100%;
+  border: 1px solid #eee;
+  tr,
+  td {
+    border: 1px solid #eee;
+  }
+  td {
+    padding: 12px 8px;
+  }
+  thead th {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    background-color: rgba(228, 240, 254, 1);
+  }
+  tr td.doc-label {
+    width: 26%;
+    background-color: rgb(246, 246, 246);
+    font-weight: 600;
+    text-align: center;
+    font-size: 14px;
+  }
+}
+
+.budget-table {
+  ::v-deep .el-table__body .el-table__cell {
+    padding: 8px 2px;
+  }
+  ::v-deep .el-table__header .el-table__cell {
+    padding: 10px 2px;
+  }
+} 
+</style>

+ 13 - 9
src/views/project-manage/components/project-budget.vue

@@ -1,34 +1,37 @@
 <template>
   <el-tabs tab-position="left">
-    <el-tab-pane label="研发项目费用预算表格">用户管理</el-tab-pane>
-    <el-tab-pane label="一、人员人工费用">
+    <el-tab-pane label="研发项目费用预算表格" lazy>
+      <all-budget-table></all-budget-table>
+    </el-tab-pane>
+    <el-tab-pane label="一、人员人工费用" lazy>
       <person-cost />
     </el-tab-pane>
-    <el-tab-pane label="二、直接投入费用">
+    <el-tab-pane label="二、直接投入费用" lazy>
       <zztl-cost></zztl-cost>
     </el-tab-pane>
-    <el-tab-pane label="三、折旧费用与长期待摊费用">
+    <el-tab-pane label="三、折旧费用与长期待摊费用" lazy>
       <zjfyycqdtfy-cost></zjfyycqdtfy-cost>
     </el-tab-pane>
-    <el-tab-pane label="四、无形资产摊销费用">
+    <el-tab-pane label="四、无形资产摊销费用" lazy>
       <wxzctx-cost></wxzctx-cost>
     </el-tab-pane>
-    <el-tab-pane label="五、设计费用">
+    <el-tab-pane label="五、设计费用" lazy>
       <design-cost></design-cost>
     </el-tab-pane>
-    <el-tab-pane label="六、装备调试费用与实验费用">
+    <el-tab-pane label="六、装备调试费用与实验费用" lazy>
       <zb-cost></zb-cost>
     </el-tab-pane>
-    <el-tab-pane label="七、委托外部研究开发费">
+    <el-tab-pane label="七、委托外部研究开发费" lazy>
       <outsourcing-cost></outsourcing-cost>
     </el-tab-pane>
-    <el-tab-pane label="八、其他费用">
+    <el-tab-pane label="八、其他费用" lazy>
       <other-cost></other-cost>
     </el-tab-pane>
   </el-tabs>
 </template>
 
 <script>
+import allBudgetTable from './all-budget-table.vue';
 import personCost from './person-cost.vue';
 import zztlCost from './zztl-cost.vue';
 import zjfyycqdtfyCost from './zjfyycqdtfy-cost.vue';
@@ -40,6 +43,7 @@ import otherCost from './other-cost.vue';
 
 export default {
   components: {
+    allBudgetTable,
     personCost,
     zztlCost,
     zjfyycqdtfyCost,

+ 8 - 7
src/views/project-manage/project-list.vue

@@ -50,25 +50,26 @@
       modal-append-to-body
       append-to-body
       size="1200px"
+      destroy-on-close
     >
       <el-tabs type="border-card">
-        <el-tab-pane label="1、项目立项">
+        <el-tab-pane label="1、项目立项" lazy>
           <apply-form></apply-form>
         </el-tab-pane>
-        <el-tab-pane label="2、科研预算">
+        <el-tab-pane label="2、科研预算" lazy>
           <project-budget></project-budget>
         </el-tab-pane>
-        <el-tab-pane label="3、项目实施">
+        <el-tab-pane label="3、项目实施" lazy>
           <implement-form></implement-form>
         </el-tab-pane>
-        <el-tab-pane label="4、项目变更">
+        <el-tab-pane label="4、项目变更" lazy>
           <change></change>
         </el-tab-pane>
-        <el-tab-pane label="5、项目结题">
+        <el-tab-pane label="5、项目结题" lazy>
           <accept-form></accept-form>
         </el-tab-pane>
-        <el-tab-pane label="6、项目成果"></el-tab-pane>
-        <el-tab-pane label="7、委外材料"></el-tab-pane>
+        <el-tab-pane label="6、项目成果" lazy></el-tab-pane>
+        <el-tab-pane label="7、委外材料" lazy></el-tab-pane>
       </el-tabs>
     </el-drawer>
   </basic-container>