| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <template>
- <basic-container v-loading="loading">
- <avue-form ref="searchForm" v-model="params" :option="searchOption" class="cl-search-form">
- <template slot-scope="{size}" slot="menuForm">
- <el-button type="primary" :size="size" icon="el-icon-search" @click="handleSearchBtn">查询</el-button>
- <el-button :size="size" icon="el-icon-delete" @click="handleResetBtn">清空</el-button>
- </template>
- </avue-form>
- <h3 class="page-title">{{ pageTitle }}</h3>
- <div style="display: flex; align-items: center;">
- <year-month-select v-model="yearAndMonth" :showAllYear="false" style="margin: 6px 0 20px;"></year-month-select>
- <el-radio-group v-model="costType" size="mini" style="margin: 8px 0 20px 8px;">
- <el-radio-button :label="1">费用化明细表</el-radio-button>
- <el-radio-button :label="2">资本化明细表</el-radio-button>
- </el-radio-group>
- </div>
- <template v-if="listData.length">
- <common-list
- v-for="(item, index) of listData"
- :data="item" :cost-type="costType"
- @printClick="handlePrintClick"
- @exportClick="handleExportClick"
- :key="index"
- style="margin-bottom: 25px;"
- ></common-list>
- </template>
- <el-empty v-else description="暂无数据"></el-empty>
- <WideTablePrinter
- ref="printWideTable"
- :columns="wideTableColumns"
- :data="wideTableData"
- :print-title="pageTitle"
- :rows-per-page="30"
- :default-landscape="true"
- :zoom="95"
- >
- <template slot="tableHeader">
- <div>
- <span style="margin-right: 140px;">{{ `研发项目编号:${currProject.xmbh}` }}</span>
- <span style="margin-right: 100px;">{{ `研发项目名称:${currProject.xmmc}` }}</span>
- <span style="margin-right: 100px;">{{ `支出类型:${currProject.costName}` }}</span>
- <span>{{ `金额单位:元` }}</span>
- </div>
- </template>
- <template slot="tableFooter">
- <div>
- <span>录入人:</span>
- </div>
- <div style="margin-top: 6px;">
- <span>主管人:</span>
- </div>
- </template>
- </WideTablePrinter>
- </basic-container>
- </template>
- <script>
- import YearMonthSelect from "@/components/year-month-select";
- import commonList from "./components/common-list.vue";
- import { getList } from "@/api/externalReports/jjkcAuxiliaryDetails";
- import moment from "moment";
- import { mapGetters } from "vuex";
- import {exportBloByPost} from "@/api/common";
- import {getToken} from "@/util/auth";
- import {downloadXls} from "@/util/util";
- export default {
- components: {
- YearMonthSelect,
- commonList
- },
- data() {
- return {
- loading: false,
- searchOption: {
- submitBtn:false,
- emptyBtn:false,
- column: [{
- label: '项目名称',
- prop: 'xmmc',
- type: 'input',
- }]
- },
- listData: [],
- yearAndMonth: "",
- params: {},
- costType: 1,
-
- wideTableColumns: [],
- wideTableData: [],
- currProject: {}
- }
- },
- watch: {
- yearAndMonth() {
- this.loadData();
- },
- costType() {
- this.loadData();
- }
- },
- computed: {
- ...mapGetters(['tag']),
- pageTitle() {
- let yearAndMonthCN = this.yearAndMonth ? moment(this.yearAndMonth).format('yyyy年MM月') : '';
- return `${yearAndMonthCN}${this.tag.label}`;
- },
- },
- methods: {
- loadData() {
- let params = { ...this.params, type: this.costType };
- this.loading = true;
- getList({
- ...params,
- yearAndMonth: this.yearAndMonth,
- }).then(({ data }) => {
- this.loading = false;
- if (data.code == 200) {
- let allList = data.data.map(item => {
- let childArr = item.costList.map(costItem => {
- return { xmmc: item.xmmc, xmbh: item.xmbh, xmId: item.xmId, ...costItem, zl: '记' };
- });
- return childArr;
- });
- this.listData = allList;
- }
- }).catch(() => {
- this.loading = false;
- });
- },
- handleSearchBtn() {
- this.loadData();
- },
- handleResetBtn() {
- this.params = {};
- this.$refs.searchForm.resetForm();
- this.loadData();
- },
- handlePrintClick({ column, data, projectData }) {
- this.wideTableColumns = [...column];
- this.wideTableData = data;
- this.currProject = projectData;
- this.$nextTick(() => {
- this.$refs.printWideTable.printTable(true);
- })
- },
- handleExportClick({ xmId }) {
- const exportParams = { xmId, ...this.params, type: this.costType, yearAndMonth: this.yearAndMonth };
- exportBloByPost(`/api/kd-scientific/xm/cost/details/deduction-list/export?${this.website.tokenHeader}=${getToken()}`, exportParams).then(res => {
- downloadXls(res.data, `${this.pageTitle}.xlsx`);
- });
- },
- },
- }
- </script>
- <style lang="scss">
- .cl-search-form {
- .el-form-item--small .el-form-item__label {
- display: none;
- }
- .el-form-item--small .el-form-item__content {
- margin-left: 8px !important;
- }
- .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
- margin-bottom: 6px;
- }
- .avue-form__group .el-col {
- width: auto !important;
- padding-top: 0 !important;
- }
- }
- </style>
|