| xqd
@@ -1,246 +1,260 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
- <el-row type="flex" justify="space-between" style="margin-bottom:20px">
|
|
|
- <div class="grid-content bg-purple">
|
|
|
- <el-dropdown @command="handleCommand">
|
|
|
- <div class="pulldown">
|
|
|
- <span class="el-dropdown-link" v-if="!status">
|
|
|
- 月
|
|
|
- </span>
|
|
|
- <span class="el-dropdown-link" v-if="status">
|
|
|
- {{status}}
|
|
|
- </span>
|
|
|
- <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
- </div>
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item command="1">1月</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="grid-content bg-purple">
|
|
|
- <div class="block">
|
|
|
- <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
|
|
|
- start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
|
|
|
- </el-date-picker>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- <el-col :xs="24" :sm="10" :md="8" :lg="5" :xl="5">
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row type="flex" justify="space-between" style="margin-bottom:20px">
|
|
|
+
|
|
|
+ <div class="grid-content bg-purple" >
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入查询内容"
|
|
|
+ v-model="search" style="width: 100%;">
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid-content bg-purple">
|
|
|
+ <div class="block">
|
|
|
+ <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- <el-col :xs="24" :sm="10" :md="8" :lg="5" :xl="5">
|
|
|
<div class="grid-content bg-purple">
|
|
|
- <div class="grid-content bg-purple" style="margin-left: 30px;">
|
|
|
- <el-input
|
|
|
- placeholder="请输入查询内容"
|
|
|
- v-model="input4" style="width: 80%;">
|
|
|
- <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
</el-col> -->
|
|
|
- <!-- <el-col :span="1">
|
|
|
+ <!-- <el-col :span="1">
|
|
|
<div class="grid-content bg-purple"></div>
|
|
|
</el-col> -->
|
|
|
- <div class="grid-content bg-purple" style="display: flex;justify-content: flex-end;">
|
|
|
- <el-button type="primary" @click="index">承兑人分类报表</el-button>
|
|
|
- <el-button type="primary" @click="shipments1">出票人分类报表</el-button>
|
|
|
- <el-button type="primary" disabled>合同统计列表</el-button>
|
|
|
- <el-button type="primary" @click="shipments3">供应商统计列表</el-button>
|
|
|
- <el-button type="primary" @click="Export">导出</el-button>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-row>
|
|
|
- <el-table v-loading="listLoading" :data="srcList" element-loading-text="Loading" border fit highlight-current-row>
|
|
|
- <el-table-column align="center" label="" width="55">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-checkbox v-model="checked"></el-checkbox>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="合同名称" align="center" prop="contractName">
|
|
|
+ <div class="grid-content bg-purple" style="display: flex;justify-content: flex-end;">
|
|
|
+ <el-button type="primary" @click="index">承兑人分类报表</el-button>
|
|
|
+ <el-button type="primary" @click="shipments1">出票人分类报表</el-button>
|
|
|
+ <el-button type="primary" disabled>合同统计列表</el-button>
|
|
|
+ <el-button type="primary" @click="shipments3">供应商统计列表</el-button>
|
|
|
+ <el-button type="primary" @click="Export">导出</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ <el-table v-loading="listLoading" :data="srcList" element-loading-text="Loading" border fit
|
|
|
+ highlight-current-row @select="handleSelectionChange" @select-all="handleAll">
|
|
|
+ <el-table-column align="center" label="" width="55" type="selection">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="合同名称" align="center" prop="contractName">
|
|
|
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="汇票承兑日" align="center" prop="acceptDate">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="汇票承兑日" align="center" prop="acceptDate">
|
|
|
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="汇票贴现日" align="center" prop="expectDiscountDate">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="汇票贴现日" align="center" prop="expectDiscountDate">
|
|
|
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="汇票笔数" align="center" prop="count">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="汇票笔数" align="center" prop="count">
|
|
|
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="汇票金额" align="center" prop="money">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="汇票金额" align="center" prop="money">
|
|
|
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="服务费" align="center" prop="serviceMoney">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="服务费" align="center" prop="serviceMoney">
|
|
|
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="利息" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- xxxx
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="利息" align="center" prop="interest">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- <el-table-column align="center" prop="created_at" label="操作" width="250">
|
|
|
+ <!-- <el-table-column align="center" prop="created_at" label="操作" width="250">
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag type="success" style="cursor: pointer;margin-right: 15px;">恢复</el-tag>
|
|
|
<el-tag type="warning" style="margin-right: 15px;cursor: pointer;">下载</el-tag>
|
|
|
<el-tag type="danger" style="cursor: pointer;">删除</el-tag>
|
|
|
</template>
|
|
|
</el-table-column> -->
|
|
|
- </el-table>
|
|
|
- <div class="pagesip">
|
|
|
- <el-button type="primary" size="small"
|
|
|
- style="background-color:#D8AB5A ;border-color:#D8AB5A ; margin: 0 20px;" @click="jumpFirstPage">首页
|
|
|
- </el-button>
|
|
|
- <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next"
|
|
|
- :total="list.length" :page-size="1" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
|
|
|
- ref="pagination">
|
|
|
- </el-pagination>
|
|
|
- <el-button type="primary" size="small"
|
|
|
- style="background-color:#D8AB5A ;border-color:#D8AB5A ;margin: 0 20px;" @click="jumpLastPage">尾页
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagesip">
|
|
|
+ <el-button type="primary" size="small"
|
|
|
+ style="background-color:#D8AB5A ;border-color:#D8AB5A ; margin: 0 20px;" @click="jumpFirstPage">首页
|
|
|
+ </el-button>
|
|
|
+ <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next"
|
|
|
+ :total="list.length" :page-size="1" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
|
|
|
+ ref="pagination">
|
|
|
+ </el-pagination>
|
|
|
+ <el-button type="primary" size="small"
|
|
|
+ style="background-color:#D8AB5A ;border-color:#D8AB5A ;margin: 0 20px;" @click="jumpLastPage">尾页
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getList
|
|
|
- } from '@/api/table'
|
|
|
-
|
|
|
- export default {
|
|
|
- filters: {
|
|
|
- statusFilter(status) {
|
|
|
- const statusMap = {
|
|
|
- published: 'success',
|
|
|
- draft: 'gray',
|
|
|
- deleted: 'danger'
|
|
|
- }
|
|
|
- return statusMap[status]
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- srcList:[],
|
|
|
- currentPage: 1,
|
|
|
- pagesize: 11,
|
|
|
- list: [],
|
|
|
- listLoading: false,
|
|
|
- status: '',
|
|
|
- hpstatus:'',
|
|
|
- input4:'',
|
|
|
- checked:false,
|
|
|
- pickerOptions: {
|
|
|
- shortcuts: [{
|
|
|
- text: '最近一周',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '最近一个月',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '最近三个月',
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
- picker.$emit('pick', [start, end]);
|
|
|
- }
|
|
|
- }]
|
|
|
- },
|
|
|
- value1: '',
|
|
|
- value2: ''
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.fetchData()
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- this.$request({
|
|
|
- url:'/api/Report/contractReport?contractName=&startDate=&endDate=',
|
|
|
- method:'get',
|
|
|
- }).then((res)=>{
|
|
|
- this.list=res.data
|
|
|
- this.getPageData()
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleCommand(command) {
|
|
|
- this.status = command
|
|
|
-
|
|
|
- },
|
|
|
- handlehpCommand(command) {
|
|
|
- this.hpstatus = command
|
|
|
-
|
|
|
- },
|
|
|
- index(){
|
|
|
- this.$router.push({path:'/shipments/index'})
|
|
|
- },
|
|
|
- shipments1(){
|
|
|
- this.$router.push({path:"/shipments1"})
|
|
|
- },
|
|
|
- shipments3(){
|
|
|
- this.$router.push({path:"/shipments3"})
|
|
|
- },
|
|
|
- Export(){
|
|
|
-
|
|
|
- window.open('http://123.207.180.167:8700/api/Report/export/contractReport?contractName=&startDate=&endDate=')
|
|
|
- },
|
|
|
- jumpFirstPage(){
|
|
|
- this.$refs.pagination.handleCurrentChange(1);
|
|
|
- this.$emit('handleCurrentChange', 1);
|
|
|
- },
|
|
|
- jumpLastPage(){
|
|
|
- let font = this.$refs.pagination
|
|
|
- let cpage = Math.ceil(font.total / font.pageSize);
|
|
|
- font.handleCurrentChange(cpage);
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.currentPage = val;
|
|
|
- this.getPageData();
|
|
|
- },
|
|
|
- getPageData() {
|
|
|
- let start = (this.currentPage - 1) * this.pagesize;
|
|
|
- let end = start + this.pagesize;
|
|
|
- this.srcList = this.list.slice(start, end);
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
+ import {
|
|
|
+ getList
|
|
|
+ } from '@/api/table'
|
|
|
+ import {
|
|
|
+ dataConversionUtil
|
|
|
+ } from '../../utils/Excel.js'
|
|
|
+ export default {
|
|
|
+ filters: {
|
|
|
+ statusFilter(status) {
|
|
|
+ const statusMap = {
|
|
|
+ published: 'success',
|
|
|
+ draft: 'gray',
|
|
|
+ deleted: 'danger'
|
|
|
+ }
|
|
|
+ return statusMap[status]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ srcList: [],
|
|
|
+ currentPage: 1,
|
|
|
+ pagesize: 11,
|
|
|
+ list: [],
|
|
|
+ status: '',
|
|
|
+ hpstatus: '',
|
|
|
+ search: '',
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近一周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近一个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ value1: '',
|
|
|
+ value2: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.$request({
|
|
|
+ url: '/api/Report/contractReport?contractName=&startDate=&endDate=',
|
|
|
+ method: 'get',
|
|
|
+ }).then((res) => {
|
|
|
+ this.list = res.data
|
|
|
+ this.getPageData()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCommand(command) {
|
|
|
+ this.status = command
|
|
|
+
|
|
|
+ },
|
|
|
+ handlehpCommand(command) {
|
|
|
+ this.hpstatus = command
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSelectionChange(data) {
|
|
|
+ this.multipleSelection = data;
|
|
|
+ console.log(this.multipleSelection);
|
|
|
+ },
|
|
|
+ handleAll(data) {
|
|
|
+ this.multipleSelection = data
|
|
|
+ console.log(this.multipleSelection)
|
|
|
+ },
|
|
|
+ index() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/shipments/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ shipments1() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/shipments1"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ shipments3() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/shipments3"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ Export() {
|
|
|
+ // window.open('http://123.207.180.167:8700/api/Report/export/contractReport?contractName=&startDate=&endDate=')
|
|
|
+ if(this.multipleSelection==""){
|
|
|
+ this.$message({
|
|
|
+ type:'warning',
|
|
|
+ message:'请选择数据!'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ var tableHeader = [
|
|
|
+ ['序号', '合同名称', '汇票承兑日', '汇票贴现日','汇票笔数', '汇票金额', '服务费','利息'],
|
|
|
+ ]
|
|
|
+ var dataList = []
|
|
|
+ this.multipleSelection.forEach((item, index) => {
|
|
|
+ dataList.push([index + 1, item.contractName, item.acceptDate,item.expectDiscountDate, item.count, item.money, item
|
|
|
+ .serviceMoney,item.interest
|
|
|
+ ]);
|
|
|
+ })
|
|
|
+ dataConversionUtil.dataToExcel('合同统计列表', tableHeader, dataList)
|
|
|
+ this.$message.success('导出成功!');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ jumpFirstPage() {
|
|
|
+ this.$refs.pagination.handleCurrentChange(1);
|
|
|
+ this.$emit('handleCurrentChange', 1);
|
|
|
+ },
|
|
|
+ jumpLastPage() {
|
|
|
+ let font = this.$refs.pagination
|
|
|
+ let cpage = Math.ceil(font.total / font.pageSize);
|
|
|
+ font.handleCurrentChange(cpage);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.getPageData();
|
|
|
+ },
|
|
|
+ getPageData() {
|
|
|
+ let start = (this.currentPage - 1) * this.pagesize;
|
|
|
+ let end = start + this.pagesize;
|
|
|
+ this.srcList = this.list.slice(start, end);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
- .pulldown {
|
|
|
- width: 185px;
|
|
|
- height: 40px;
|
|
|
- border: 1px solid #E8E8E8;
|
|
|
- border-radius: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 20px;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .pagesip{
|
|
|
- width: 100%;
|
|
|
- margin: 20px auto;
|
|
|
- display: flex;
|
|
|
- // align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- .el-pagination.is-background .el-pager li:not(.disabled).active{
|
|
|
- background-color:#D8AB5A;
|
|
|
- }
|
|
|
- .el-col{
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
+ .pulldown {
|
|
|
+ width: 185px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid #E8E8E8;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagesip {
|
|
|
+ width: 100%;
|
|
|
+ margin: 20px auto;
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
|
+ background-color: #D8AB5A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
</style>
|