|
|
@@ -0,0 +1,144 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-breadcrumb separator=">">
|
|
|
+ <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>
|
|
|
+ <a href="#">统计报表</a>
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>
|
|
|
+ <a href="#/report/monthFHJSB">发货结算表</a>
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <!--
|
|
|
+ 要resetFields起作用，必须配置:model和prop
|
|
|
+ -->
|
|
|
+ <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
|
|
|
+ <el-form-item label="客户" prop="customerId">
|
|
|
+ <el-select size="mini" v-model="queryModel.customerId" filterable>
|
|
|
+ <el-option v-for="customer in customerList" :key="customer.id" :label="customer.company" :value="customer.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="月度" prop="selectDate">
|
|
|
+ <el-date-picker type="month" size="mini" :editable="false" v-model="queryModel.selectDate" style="width: 193px;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="mini" icon="ios-search" @click="searchBtn" :loading="loading">查询</el-button>
|
|
|
+ <el-button type="info" size="mini" style="margin-left: 8px" @click="handleReset('queryForm')">重置</el-button>
|
|
|
+ <el-button v-if="dataList.length > 0" type="success" size="mini" icon="ios-search" @click="exportXls" :loading="loading">下载</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-table :data="dataList" style="min-height:400px;" v-loading="loading" stripe>
|
|
|
+ <el-table-column prop="planNumber" label="计划单号"></el-table-column>
|
|
|
+ <el-table-column prop="summary" label="摘要"></el-table-column>
|
|
|
+ <el-table-column prop="debit" label="借方" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="credit" label="贷方" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="balance" label="余额" width="120"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Constant from "@/constant";
|
|
|
+import reportApi from "@/api/report";
|
|
|
+import customerApi from "@/api/base/customer";
|
|
|
+import NProgress from "nprogress"; // progress bar
|
|
|
+import "nprogress/nprogress.css"; // progress bar style
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryModel: {
|
|
|
+ "customerId": "",
|
|
|
+ "selectDate": "",
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ customerList: [],
|
|
|
+ dataName: "",
|
|
|
+ dataDate: "",
|
|
|
+ dataList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ searchBtn() {
|
|
|
+ if(this.queryModel.customerId != '' && this.queryModel.selectDate != '') {
|
|
|
+ this.changePage();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$message({type: "warning", message: "请选择客户与月度"});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changePage() {
|
|
|
+ var self = this;
|
|
|
+ self.loading = true;
|
|
|
+
|
|
|
+ var formData = new FormData();
|
|
|
+ formData.append("customerId", self.queryModel.customerId);
|
|
|
+ formData.append("selectDate", self.queryModel.selectDate);
|
|
|
+
|
|
|
+ reportApi.monthFHJSB(formData).then(function (response) {
|
|
|
+ self.loading = false;
|
|
|
+
|
|
|
+ var jsonData = response.data;
|
|
|
+ if(jsonData.result){
|
|
|
+ // self.dataDate = jsonData.data.date;
|
|
|
+ // self.dataName = jsonData.data.name;
|
|
|
+ self.dataList = jsonData.data.list;
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message({type: "error", message: error});
|
|
|
+ });
|
|
|
+ },
|
|
|
+ exportXls() {
|
|
|
+ var self = this;
|
|
|
+ self.loading = true;
|
|
|
+
|
|
|
+ var formData = new FormData();
|
|
|
+ formData.append("customerId", self.queryModel.customerId);
|
|
|
+ formData.append("selectDate", self.queryModel.selectDate);
|
|
|
+
|
|
|
+ reportApi.monthFHJSBXls(formData).then(function (response) {
|
|
|
+ self.loading = false;
|
|
|
+
|
|
|
+ var jsonData = response.data;
|
|
|
+ self.$message({
|
|
|
+ showClose: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ message: jsonData.message + `,<a href="${jsonData.data}" target="_blank">点击下载</a> `,
|
|
|
+ duration: 30000,
|
|
|
+ });
|
|
|
+ }).catch((error) => {
|
|
|
+ self.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleReset(name) {
|
|
|
+ this.$refs[name].resetFields();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ customerApi.findList().then(response => {
|
|
|
+ this.customerList = response.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.el-breadcrumb {
|
|
|
+ margin: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-divider {
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.demo-form-inline {
|
|
|
+ margin-left: 10px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.button-group {
|
|
|
+ margin-left: 10px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+</style>
|
