| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- <template>
- <div v-loading="loading">
- <div class="container">
- <div class="operate-btn" style="text-align: right; margin: 10px 16px;">
- <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
- <el-button size="small" type="primary" icon="el-icon-printer" v-print="'#budgetWrap'">打印</el-button>
- </div>
- <table id="budgetWrap" 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"
- :summary-method="getSummaries"
- >
- <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="140"
- >
- </el-table-column>
- </el-table>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </template>
- <script>
- import moment from 'moment';
- import projectSelect from "@/components/project-select";
- import { getAllBudget } from "@/api/projectManage/projectList";
- import Decimal from "decimal.js";
- export default {
- props: {
- projectId: [String, Number],
- projectData: Object
- },
- components: {
- projectSelect,
- },
- data() {
- return {
- currProjectId: "",
- tableData: [{
- kmmc: '一、人员人工费用',
- }, {
- kmmc: '二、直接投入费用'
- }, {
- kmmc: '三、折旧费用与长期待摊费用'
- }, {
- kmmc: '四、无形资产摊销费用'
- }, {
- kmmc: '五、设计费用'
- }, {
- kmmc: '六、装备调试费用与试验费用'
- }, {
- kmmc: '七、委托外部研究开发费'
- }, {
- kmmc: '八、其他费用'
- }],
- selProject: {},
- loading: false,
- };
- },
- 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 `年 月 日至 年 月 日`;
- },
- },
- watch: {
- projectId(newVal, oldVal) {
- this.currProjectId = newVal;
- if (oldVal) {
- this.selProject = this.projectData;
- }
- },
- currProjectId(newVal) {
- if (!!newVal) {
- this.getAllBudgetData(newVal);
- }
- }
- },
- mounted() {
- this.currProjectId = this.projectId || '';
- },
- methods: {
- handleRefresh() {
- this.getAllBudgetData(this.currProjectId);
- },
- handleProjectChange(data) {
- this.selProject = data;
- this.$emit("change", data);
- },
- getAllBudgetData(id) {
- this.loading = true;
- getAllBudget({ xmId: id }).then(({ data }) => {
- this.loading = false;
- if (data.success) {
- const { ryrgfy, zjtrfy, zjfyycqdtfy, wxzctxfy, sjfy, zbtsysyfy, wtwbyjkffy, qtfy } = data.data;
- let _total = (new Decimal(ryrgfy).add(zjtrfy).add(zjfyycqdtfy).add(wxzctxfy).add(sjfy).add(zbtsysyfy).add(wtwbyjkffy).add(qtfy)).toFixed(2);
- this.tableData = this.tableData.map((item, index) => {
- let readKey = '';
- if (index == 0) {
- readKey = 'ryrgfy';
- } else if (index == 1) {
- readKey = 'zjtrfy';
- } else if (index == 2) {
- readKey = 'zjfyycqdtfy';
- } else if (index == 3) {
- readKey = 'wxzctxfy';
- } else if (index == 4) {
- readKey = 'sjfy';
- } else if (index == 5) {
- readKey = 'zbtsysyfy';
- } else if (index == 6) {
- readKey = 'wtwbyjkffy';
- } else if (index == 7) {
- readKey = 'qtfy';
- }
- item.sales = (data.data[readKey] === -1 ? 0 : data.data[readKey]).toFixed(0);
- let ratio = 0;
- if (Number(_total) > 0) {
- ratio = (new Decimal(item.sales).div(new Decimal(_total)) * 100).toFixed(2);
- }
- item.ratio = ratio;
- return item;
- });
- }
- }).catch(err => {
- this.loading = false;
- });
- },
- getSummaries(param) {
- const { columns, data } = param;
- const sums = [];
- columns.forEach((column, index) => {
- if (index === 0) {
- sums[index] = '合计';
- return;
- }
- const values = data.map(item => Number(item[column.property]));
- if (!values.every(value => isNaN(value))) {
- sums[index] = values.reduce((prev, curr) => {
- const value = Number(curr);
- if (!isNaN(value)) {
- return prev + curr;
- } else {
- return prev;
- }
- }, 0);
- // 保留两位小数
- sums[index] = sums[index].toFixed(2);
- } else {
- sums[index] = '';
- }
- });
- return sums;
- }
- }
- };
- </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>
|