|
|
@@ -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>
|