|
|
@@ -1,107 +1,170 @@
|
|
|
<template>
|
|
|
- <basic-container>
|
|
|
- <avue-crud
|
|
|
- v-bind="bindVal"
|
|
|
- v-on="onEvent"
|
|
|
- v-model="form"
|
|
|
- :page.sync="page"
|
|
|
- >
|
|
|
- <template slot="menuLeft">
|
|
|
- <el-button
|
|
|
- type="warning"
|
|
|
- size="small"
|
|
|
- plain
|
|
|
- icon="el-icon-download"
|
|
|
- @click="handleExport"
|
|
|
- >
|
|
|
- 导出
|
|
|
- </el-button>
|
|
|
- <print-table-btn @click="printTable" />
|
|
|
-
|
|
|
- <div style="display: flex; align-items: center;">
|
|
|
- <year-month-select v-model="params.yearAndMonth"></year-month-select>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 开始时间 -->
|
|
|
- <template slot="kssjSearch">
|
|
|
+ <basic-container v-loading="loading">
|
|
|
+ <avue-form ref="searchForm" v-model="params" :option="searchOption" class="cl-search-form">
|
|
|
+ <template slot="useDate">
|
|
|
+ <span>日期:</span>
|
|
|
<el-date-picker
|
|
|
- v-model="params.kssjRange"
|
|
|
+ v-model="params.useDateRange"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
- style="width: 240px !important;"
|
|
|
+ style="width: 220px !important;"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</template>
|
|
|
-
|
|
|
- </avue-crud>
|
|
|
-
|
|
|
- <WideTablePrinter
|
|
|
- ref="printWideTable"
|
|
|
- :columns="wideTableColumns"
|
|
|
- :data="data"
|
|
|
- :print-title="printTitle"
|
|
|
- :rows-per-page="30"
|
|
|
- :default-landscape="true"
|
|
|
- />
|
|
|
+ <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>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ @click="handleExport"
|
|
|
+ style="margin-right: 10px;"
|
|
|
+ >
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+ <print-table-btn />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <year-month-select v-model="yearAndMonth" :showAllYear="false" style="margin: 6px 0 20px;"></year-month-select>
|
|
|
+ </div>
|
|
|
+ <template v-if="listData.length">
|
|
|
+ <common-list v-for="(item, index) of listData" :data="item" :type="type" :key="index" style="margin-bottom: 25px;"></common-list>
|
|
|
+ </template>
|
|
|
+ <el-empty v-else description="暂无数据"></el-empty>
|
|
|
</basic-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import YearMonthSelect from "@/components/year-month-select";
|
|
|
+import commonList from "./components/common-list.vue";
|
|
|
+import { getList } from "@/api/externalReports/kjAuxiliaryDetails";
|
|
|
import {exportBlob} from "@/api/common";
|
|
|
import {getToken} from "@/util/auth";
|
|
|
import {downloadXls} from "@/util/util";
|
|
|
import moment from "moment";
|
|
|
|
|
|
-
|
|
|
-export default window.$crudCommon({
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ // 材料、动力、燃料
|
|
|
+ default: "材料"
|
|
|
+ },
|
|
|
+ },
|
|
|
components: {
|
|
|
YearMonthSelect,
|
|
|
+ commonList
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- params: {
|
|
|
- yearAndMonth: moment(new Date()).format('YYYYMM'),
|
|
|
+ loading: false,
|
|
|
+ searchOption: {
|
|
|
+ submitBtn:false,
|
|
|
+ emptyBtn:false,
|
|
|
+ column: [{
|
|
|
+ label: '项目名称',
|
|
|
+ prop: 'xmmc',
|
|
|
+ type: 'input',
|
|
|
+ }, {
|
|
|
+ label: '材料名称',
|
|
|
+ prop: 'name',
|
|
|
+ }, {
|
|
|
+ label: '型号规格',
|
|
|
+ prop: 'model',
|
|
|
+ display: this.type === '材料' ? true : false,
|
|
|
+ }, {
|
|
|
+ label: '日期',
|
|
|
+ prop: 'useDate',
|
|
|
+ type: 'date',
|
|
|
+ }]
|
|
|
},
|
|
|
+ listData: [],
|
|
|
|
|
|
- wideTableColumns: [],
|
|
|
- printTitle: "",
|
|
|
- };
|
|
|
+ yearAndMonth: moment(new Date()).format('YYYYMM'),
|
|
|
+ params: {},
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
- 'params.yearAndMonth'(newVal) {
|
|
|
- this.page.currentPage = 1;
|
|
|
- this.getList(this.page);
|
|
|
+ yearAndMonth() {
|
|
|
+ this.loadData();
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
methods: {
|
|
|
- loadData() {},
|
|
|
+ loadData() {
|
|
|
+ let params = { ...this.params };
|
|
|
+ if (params.useDateRange && params.useDateRange.length) {
|
|
|
+ params.dateMin = params.useDateRange[0];
|
|
|
+ params.dateMax = params.useDateRange[1];
|
|
|
+ }
|
|
|
+ delete params.useDateRange;
|
|
|
+ this.loading = true;
|
|
|
+ getList({
|
|
|
+ ...params,
|
|
|
+ yearAndMonth: this.yearAndMonth,
|
|
|
+ }).then(({ data }) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (data.code == 200) {
|
|
|
+ let allList = [];
|
|
|
+ data.data.map(item => {
|
|
|
+ Object.keys(item).map(key => {
|
|
|
+ allList.push(item[key]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ this.listData = allList;
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
handleExport() {
|
|
|
- exportBlob(`/api/kd-scientific/attendance/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
|
|
|
- downloadXls(res.data, `${this.params.yearAndMonth}研发费用明细表.xlsx`);
|
|
|
+ let title = '研发项目领料单';
|
|
|
+ if (this.type == '动力') {
|
|
|
+ title = '研发动力消耗单';
|
|
|
+ } else if (this.type == '燃料') {
|
|
|
+ title = '研发燃料消耗单';
|
|
|
+ }
|
|
|
+ exportBlob(`/api/kd-scientific/goods/yanfalingliaodan/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
|
|
|
+ downloadXls(res.data, `${this.params.yearAndMonth}${title}.xlsx`);
|
|
|
});
|
|
|
},
|
|
|
- /**
|
|
|
- * 打印表格
|
|
|
- * @param isLandscape 是否横向打印
|
|
|
- */
|
|
|
- printTable(isLandscape) {
|
|
|
- this.wideTableColumns = this.$refs.crud.columnOption;
|
|
|
- this.printTitle = `${this.params.yearAndMonth}研发费用明细表.xlsx`;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.printWideTable.printTable(isLandscape);
|
|
|
- })
|
|
|
+ handleSearchBtn() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ handleResetBtn() {
|
|
|
+ this.params = {};
|
|
|
+ this.$refs.searchForm.resetForm();
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
},
|
|
|
-}, {
|
|
|
- // 模块路径
|
|
|
- name: 'externalReports/kjAuxiliaryDetails',
|
|
|
- res: ({ data }) => {
|
|
|
- return data;
|
|
|
- },
|
|
|
-});
|
|
|
+}
|
|
|
</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>
|