添加报表模块

pull/2/head
jwg 6 months ago
parent 2332440e81
commit 121b97b5ce

@ -15,6 +15,7 @@
"crypto-js": "^4.1.1",
"dayjs": "^1.11.5",
"dingtalk-jsapi": "^2.15.2",
"echarts": "^5.5.0",
"exif-js": "^2.3.0",
"html2canvas": "^1.4.1",
"js-base64": "^3.7.5",

@ -0,0 +1,58 @@
import request from '@/plugin/axios'
// 申请单报表
export function applyReportApi(query) {
return request({
url: 'bs/expense-apply/getreport',
method: 'get',
params: query,
})
}
// 申请单报表
export function claimReportApi(query) {
return request({
url: 'bs/expense-claim/getreport',
method: 'get',
params: query,
})
}
// 报表
export function gatherMsgApi(query) {
return request({
url: 'bs/statement/gathering ',
method: 'get',
})
}
// 申请单报表
export function paymentMsgApi(query) {
return request({
url: 'bs/statement/payment',
method: 'get',
})
}
// 付款饼图
export function paymentPieApi(query) {
return request({
url: '/bs/statement/paymentPie',
method: 'get',
})
}
// 收款饼图
export function gatheringPieApi(query) {
return request({
url: '/bs/statement/gatheringPie',
method: 'get',
})
}
// 供应商柱状图
export function paymentColumnarApi(query) {
return request({
url: '/bs/statement/paymentColumnar',
method: 'get',
})
}

@ -143,7 +143,7 @@ export default {
this.$loading(true, 'file')
this.uploadFiles(newList)
.then((res) => {
;(res || []).map((item) => {
(res || []).map((item) => {
this.list.push(item)
})
this.$loading(false, 'file')

@ -0,0 +1,14 @@
import layoutHome from '../../layout/index.vue'
const meta = { requiresAuth: true }
export default {
path: '/reportForms',
name: 'reportForms',
meta,
redirect: { name: 'reportForms' },
component: layoutHome,
children: (pre => [
{ path: '/myReportForms', name: `${pre}myReportForms`, component: () => import('@/views/reportForms/myReportForms'), meta: { cache: true, title: '我的报表' } },
])('reportForms-')
}

@ -1,6 +1,7 @@
import layoutHome from '../layout/index.vue'
import company from './modules/company'
import contract from './modules/contract'
import reportForms from './modules/reportForms'
export const frameInRoutes = [
{
path: '/',
@ -13,7 +14,8 @@ export const frameInRoutes = [
])('home-')
},
company,
contract
contract,
reportForms
]
export const frameOutRoutes = [

@ -1,39 +1,58 @@
<template>
<!-- 出差列表 -->
<div>
<HeaderFilter :listType="listType" @onListQuery="handleListQuery" :paramProp="listQuery" />
<RMList :moreLoading.sync="moreLoading" :refreshing.sync="refreshing" :finished.sync="finished" @onLoad="handleLoad" @onRefresh="handleRefresh" isMore :tableList="tableList">
<HeaderFilter
:listType="listType"
@onListQuery="handleListQuery"
:paramProp="listQuery"
/>
<RMList
:moreLoading.sync="moreLoading"
:refreshing.sync="refreshing"
:finished.sync="finished"
@onLoad="handleLoad"
@onRefresh="handleRefresh"
isMore
:tableList="tableList"
>
<div>
<MyClaimListCard v-for="(item,index) in tableList" :key="item.id" :itemData="item" :listType="listType" @onUpdataInfo="handleUpdataInfo($event, index)" @onAllRefresh="handleAllRefresh" />
<MyClaimListCard
v-for="(item, index) in tableList"
:key="item.id"
:itemData="item"
:listType="listType"
@onUpdataInfo="handleUpdataInfo($event, index)"
@onAllRefresh="handleAllRefresh"
/>
</div>
</RMList>
<div class="common-bottom-btns" style="bottom: 8rem">
<div class="common-bottom-btn" @click="handleTopPage">
<img src="@/assets/images/icons/top.png" alt="">
<img src="@/assets/images/icons/top.png" alt="" />
<span>回到顶部</span>
</div>
</div>
<div class='feedback-container'>
<div id='allBtns' class='float-btns' ref="allBtns">
<div class='help-wrap' @click="handApply(1)">
<img class='img' src="@/assets/images/tigongdan.png" />
<div class="feedback-container">
<div id="allBtns" class="float-btns" ref="allBtns">
<div class="help-wrap" @click="handApply(1)">
<img class="img" src="@/assets/images/tigongdan.png" />
<span>出差报销</span>
</div>
<div class='help-wrap' @click="handApply(2)">
<img class='img' src="@/assets/images/myworkrukou.png" />
<div class="help-wrap" @click="handApply(2)">
<img class="img" src="@/assets/images/myworkrukou.png" />
<span>日常报销</span>
</div>
</div>
</div>
<div class="common-bottom-btns" style="bottom: 10rem">
<div class="common-bottom-btn" @click="handleToAdd">
<img src="@/assets/images/icons/add.png" alt="">
<img src="@/assets/images/icons/add.png" alt="" />
<span>添加报销</span>
</div>
</div>
<div class="common-bottom-btns" style="bottom: 6rem">
<div class="common-bottom-btn" @click="handleBack">
<img src="@/assets/images/icons/home.png" alt="">
<img src="@/assets/images/icons/home.png" alt="" />
<span>返回首页</span>
</div>
</div>
@ -42,25 +61,26 @@
<script>
//
import { getScrollTop } from '@/utils'
import { getScrollTop } from "@/utils";
// import { getOrderListApi, getDataStatisticsApi, updateOrderSingleListApi } from '@/api/potentialGuest/order'
import { mapState } from 'vuex'
import { mapState } from "vuex";
import { getExpenseClaimMyPage } from "@/api/bs/expenseClaim";
export default {
props: {
listType: String // EnrollmentOrder: EnrollmentCollection: ShiftRecord: WaitPay:
listType: String, // EnrollmentOrder: EnrollmentCollection: ShiftRecord: WaitPay:
},
components: {
HeaderFilter: () => import('@/views/company/myClaim/components/HeaderFilter.vue'),
RMList: () => import('@/components/ReComponents/RMList'),
MyClaimListCard: () => import('@/components/MyClaimListCard'),
HeaderFilter: () =>
import("@/views/company/myClaim/components/HeaderFilter.vue"),
RMList: () => import("@/components/ReComponents/RMList"),
MyClaimListCard: () => import("@/components/MyClaimListCard"),
},
data() {
return {
btnshow: false,
show: false,
billType: null,
demo: ['2210', '45646', '414'],
demo: ["2210", "45646", "414"],
height: 0,
moreLoading: false,
refreshing: false,
@ -84,88 +104,94 @@ export default {
costDeptId: null,
invoiceIds: null,
},
}
};
},
computed: {
...mapState({
singlePageSize: state => state.common.setting.singlePageSize,
pageSize: state => state.common.setting.pageSize,
})
singlePageSize: (state) => state.common.setting.singlePageSize,
pageSize: (state) => state.common.setting.pageSize,
}),
},
activated() {
this.handleScrollInit()
this.handleScrollInit();
},
deactivated() {
window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener("scroll", this.handleScroll);
},
created() {
this.handleInit()
this.handleInit();
},
methods: {
// type 1 2
handApply(type) {
this.$router.push({
path: '/claim',
path: "/claim",
query: {
type: 'add',
billType: type == 1 ? 'CLBX' : 'RCBX'
}
})
this.billType = type == 1 ? 'CLBX' : 'RCBX'
type: "add",
billType: type == 1 ? "CLBX" : "RCBX",
},
});
this.billType = type == 1 ? "CLBX" : "RCBX";
},
handleCloseBtns() {
this.$refs.allBtns.style.height = "0";
this.btnshow = false;
},
handleBack() {
history.back()
history.back();
},
handleSetSingle(id) {
return new Promise((resolve, reject) => {
let listQuery = {
pageNo: 1,
pageSize: this.singlePageSize,
}
getExpenseClaimMyPage(listQuery).then((res) => {
let arr = (res.data && res.data.list || []).filter(item => item.id == id)
resolve(arr)
}).catch((err) => {
reject(err)
})
};
getExpenseClaimMyPage(listQuery)
.then((res) => {
let arr = ((res.data && res.data.list) || []).filter(
(item) => item.id == id
);
resolve(arr);
})
.catch((err) => {
reject(err);
});
});
},
handleUpdataInfo(id, index) {
this.$loading(true, 'singleReset')
this.handleSetSingle(id).then(arr => {
this.$loading(true, "singleReset");
this.handleSetSingle(id)
.then((arr) => {
if (arr.length) {
this.tableList.splice(index, 1, arr[0])
this.tableList.splice(index, 1, arr[0]);
}
this.$loading(false, 'singleReset')
}).catch(() => {
this.$loading(false, 'singleReset')
this.$loading(false, "singleReset");
})
.catch(() => {
this.$loading(false, "singleReset");
});
},
handleListQuery(paramProp) {
this.listQuery = {
...paramProp,
}
this.finished = false
this.handleRefresh()
};
this.finished = false;
this.handleRefresh();
},
handleScroll() {
getScrollTop().then(height => {
this.height = height
})
getScrollTop().then((height) => {
this.height = height;
});
},
handleScrollInit() {
window.addEventListener('scroll', this.handleScroll)
window.scrollTo(0, this.height)
window.addEventListener("scroll", this.handleScroll);
window.scrollTo(0, this.height);
// this.handleInit()
},
handleScrollToTop() {
window.scrollTo(0, 0)
this.height = 0
window.scrollTo(0, 0);
this.height = 0;
},
handleToAdd() {
this.btnshow = !this.btnshow;
@ -177,58 +203,60 @@ export default {
},
handleAllRefresh() {
// this.getTableList('refresh')
this.handleRefresh()
this.handleRefresh();
},
handleInit() {
this.getTableList('init')
this.getTableList("init");
},
handleTopPage() {
window.scrollTo(0, 0)
window.scrollTo(0, 0);
this.$nextTick(() => {
this.height = 0
})
this.height = 0;
});
},
handleRefresh() {
this.listQuery.pageNo = 1
this.finished = false
this.getTableList('refresh')
this.listQuery.pageNo = 1;
this.finished = false;
this.getTableList("refresh");
},
handleLoad() {
this.listQuery.pageNo += 1
this.getTableList('more')
this.listQuery.pageNo += 1;
this.getTableList("more");
},
getTableList(val) {
// const { shellIdsLocal, collegeInfoIdLocal, startDate, endDate, keyword, type, method, targets, usePersonId, teacherIds, chargePersonIds } = this.listQuery
const query = {
...this.listQuery
}
this.moreLoading = true
this.$loading(true, 'tableLoading')
getExpenseClaimMyPage(query).then(res => {
let resList = res.data && res.data.list || []
if (['init', 'refresh'].includes(val)) {
this.tableList = resList
this.handleScrollToTop()
...this.listQuery,
};
this.moreLoading = true;
this.$loading(true, "tableLoading");
getExpenseClaimMyPage(query)
.then((res) => {
let resList = (res.data && res.data.list) || [];
if (["init", "refresh"].includes(val)) {
this.tableList = resList;
this.handleScrollToTop();
} else {
this.tableList = this.tableList.concat(resList)
this.tableList = this.tableList.concat(resList);
}
if (resList.length < this.pageSize) {
this.finished = true
this.finished = true;
}
}).finally(() => {
this.$nextTick(() => {
this.moreLoading = false
this.refreshing = false
this.$loading(false, 'tableLoading')
})
.finally(() => {
this.$nextTick(() => {
this.moreLoading = false;
this.refreshing = false;
this.$loading(false, "tableLoading");
});
// this.$loading(false, `cTableLoading_${this.listType}`)
})
});
},
}
}
},
};
</script>
<style scoped lang="scss">
@import '~@/assets/style/new.scss';
@import "~@/assets/style/new.scss";
</style>

@ -1,6 +1,7 @@
.home-box {
// height: 100vh;
height: 85vh;
// height: 85vh;
height: 100%;
background: #0088fe;
padding: 0.6rem 0.6rem 0 0.6rem;
position: relative;

@ -55,11 +55,11 @@
</template>
<script>
import { checkPermission } from '@/utils'
import { getMyNotifyMessagePage } from '@/api/bs/waitToDo'
import { Dialog } from 'vant'
import { checkPermission } from "@/utils";
import { getMyNotifyMessagePage } from "@/api/bs/waitToDo";
import { Dialog } from "vant";
export default {
name: 'home-index',
name: "home-index",
components: {
// withdraw: () => import('./components/withdraw.vue')
},
@ -71,60 +71,62 @@ export default {
},
computed: {
permission_btns() {
return this.$store.getters.permission_btns
return this.$store.getters.permission_btns;
},
userInfo() {
return JSON.parse(window.localStorage.getItem('userInfo') || { dept: {} })
return JSON.parse(
window.localStorage.getItem("userInfo") || { dept: {} }
);
},
},
created() {
console.log(this.$route.query, 'this.$router.query')
console.log(this.$route.query, "this.$router.query");
},
mounted() {
this.$forceCloseLoading()
this.handleFilterList()
this.handleInitList()
this.$forceCloseLoading();
this.handleFilterList();
this.handleInitList();
},
data() {
return {
roterList: [],
isDot: false,
}
};
},
methods: {
loginOut() {
Dialog.confirm({
title: '提示',
message: '您确定要退出吗?',
title: "提示",
message: "您确定要退出吗?",
}).then(() => {
this.$store.dispatch('common/user/out')
})
this.$store.dispatch("common/user/out");
});
},
handleInitList() {
let filterArr = ['QUOTATION_SHEET']
let filterArr = ["QUOTATION_SHEET"];
getMyNotifyMessagePage({
pageNo: 1,
pageSize: 999,
}).then((res) => {
let resList = (res.data && res.data.list) || []
let resList = (res.data && res.data.list) || [];
let newArr = resList.filter(
(item) => !filterArr.includes(item.billType)
)
);
if (newArr.length) {
this.isDot = true
this.isDot = true;
} else {
this.isDot = false
this.isDot = false;
}
})
});
},
handleToWait() {
this.$router.push({
path: '/waitToDo',
})
path: "/waitToDo",
});
},
handleFilterList() {
this.roterList = []
this.roterList = [];
let arr = [
{
row: [
@ -135,10 +137,10 @@ export default {
// show: this.permission_btns.includes('bs:expense-apply:create'),
// },
{
route: '/myNewTrips',
title: '我的申请',
icon: 'manager-o',
show: checkPermission('bs/myExpenseApply/index'),
route: "/myNewTrips",
title: "我的申请",
icon: "manager-o",
show: checkPermission("bs/myExpenseApply/index"),
},
/* {
route: '/myTrips',
@ -153,10 +155,10 @@ export default {
// show: this.permission_btns.includes('bs:expense-claim:create'),
// },
{
route: '/myNewClaim',
title: '我的报销',
icon: 'bookmark-o',
show: checkPermission('bs/myExpenseClaim/index'),
route: "/myNewClaim",
title: "我的报销",
icon: "bookmark-o",
show: checkPermission("bs/myExpenseClaim/index"),
},
/* {
route: '/myClaim',
@ -165,42 +167,42 @@ export default {
show: checkPermission('bs/expenseClaim/index'),
}, */
{
route: '/myInvoice',
title: '我的发票',
icon: 'label-o',
show: checkPermission('bs/invoice/index'),
route: "/myInvoice",
title: "我的发票",
icon: "label-o",
show: checkPermission("bs/invoice/index"),
},
],
title: '报销',
title: "报销",
},
{
row: [
{
route: '/myTrips',
title: '申请单',
icon: 'exchange',
show: checkPermission('bs/expenseApply/index'),
route: "/myTrips",
title: "申请单",
icon: "exchange",
show: checkPermission("bs/expenseApply/index"),
},
{
route: '/myClaim',
title: '报销单',
icon: 'qr-invalid',
show: checkPermission('bs/expenseClaim/index'),
route: "/myClaim",
title: "报销单",
icon: "qr-invalid",
show: checkPermission("bs/expenseClaim/index"),
},
{
route: '/corporateReceiptsApproval', //
title: '对公收款审批',
icon: 'friends-o',
show: this.permission_btns.includes('bs:vendor-receipt:query'),
route: "/corporateReceiptsApproval", //
title: "对公收款审批",
icon: "friends-o",
show: this.permission_btns.includes("bs:vendor-receipt:query"),
},
{
route: '/corporatePaymentApproval',
title: '对公付款审批',
icon: 'friends-o',
show: this.permission_btns.includes('bs:vendor-payment:query'),
route: "/corporatePaymentApproval",
title: "对公付款审批",
icon: "friends-o",
show: this.permission_btns.includes("bs:vendor-payment:query"),
},
],
title: '审批',
title: "审批",
},
{
row: [
@ -231,53 +233,64 @@ export default {
show: this.permission_btns.includes('procurement:payApply:list')
}, */
{
route: '/corporateReceipts',
title: '对公收款',
icon: 'friends-o',
show: this.permission_btns.includes('bs:vendor-receipt:query'),
route: "/corporateReceipts",
title: "对公收款",
icon: "friends-o",
show: this.permission_btns.includes("bs:vendor-receipt:query"),
},
{
route: '/corporatePayment',
title: '对公付款',
icon: 'friends-o',
show: this.permission_btns.includes('bs:vendor-payment:query'),
route: "/corporatePayment",
title: "对公付款",
icon: "friends-o",
show: this.permission_btns.includes("bs:vendor-payment:query"),
},
],
title: '对公',
title: "对公",
},
]
{
row: [
{
route: "/myReportForms",
title: "我的报表",
icon: "friends-o",
show: true,
},
],
title: "报表",
},
];
this.roterList = arr.map((item) => {
return {
...item,
row: item.row.filter((n) => n.show),
}
})
};
});
},
checkPermission,
handelTo(route) {
if (route) {
if (
['/trips', '/claim', '/supplier', '/custom', '/pay'].includes(route)
["/trips", "/claim", "/supplier", "/custom", "/pay"].includes(route)
) {
this.$router.push({
path: route,
query: {
type: 'add',
type: "add",
},
})
});
} else {
this.$router.push({
path: route,
})
});
}
} else {
this.$fm('模块正在中...')
this.$fm("模块正在中...");
}
},
},
}
};
</script>
<style lang="scss" scoped>
@import './index.scss';
@import "./index.scss";
</style>

@ -0,0 +1,126 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from '../mixins/resize'
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "350px",
},
autoResize: {
type: Boolean,
default: true,
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
},
setOptions({ amountDataList } = {}) {
let newAmountDataList = amountDataList || [];
let xArr = [];
newAmountDataList.forEach((element) => {
xArr.push(element.date);
});
let yArr = [];
newAmountDataList.forEach((element) => {
yArr.push(element.num);
});
this.chart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: xArr,
axisTick: {
alignWithLabel: true,
},
axisLine: {
//x
lineStyle: {
color: "#333",
},
},
},
],
yAxis: [
{
type: "value",
axisLine: {
//y
lineStyle: {
color: "#333",
},
},
},
],
series: [
{
color: "#4E98FF",
name: "CNY",
type: "bar",
barWidth: "30%",
data: yArr,
},
],
});
},
},
};
</script>

@ -0,0 +1,99 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from '../mixins/resize'
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "350px",
},
autoResize: {
type: Boolean,
default: true,
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
},
setOptions({ feeTypeDataList } = {}) {
this.chart.setOption({
title: {
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
label: {
formatter: "{b}{c}",
},
name: "",
type: "pie",
radius: ["50%", "70%"],
color: ["#4DB6AC", "#B3E6B5", "#5F7BAC"],
data: feeTypeDataList,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
},
},
};
</script>

@ -0,0 +1,273 @@
<template>
<div class="common-list-contain">
<div class="common-form">
<van-form
ref="queryParams"
:show-error-message="false"
validate-trigger=""
:submit-on-enter="false"
label-width="8rem"
>
<div class="section"><span class="line"> </span> 查询条件</div>
<div class="trips-box">
<div class="item-box">
<RePick
v-model="bblx"
titleKey="label"
idKey="value"
label="报表类型"
:list="option1"
isRequrie
isCell
clearable
/>
<RePick
v-model="ssdlx"
titleKey="label"
idKey="value"
label="申请单类型"
:list="option2"
isRequrie
isCell
clearable
/>
<van-field
:value="queryParams.createTime"
label="日期"
placeholder="请选择"
@click="handleDateShow"
:right-icon="queryParams.createTime ? '' : 'arrow'"
input-align="right"
autosize
rows="1"
type="textarea"
>
<template v-if="queryParams.createTime" #button>
<van-icon
name="clear"
color="#C8C9CC"
size="16"
@click.stop="handleClear"
/>
</template>
</van-field>
<div style="display: flex; justify-content: center">
<van-button
style="margin-right: 30px"
@click="handleConfirm"
type="primary"
size="normal"
>搜索</van-button
>
<van-button @click="handleDateReset"></van-button>
</div>
</div>
</div>
</van-form>
</div>
<!-- 费用统计 -->
<van-cell-group style="margin-top: 20px">
<van-cell title="费用统计" />
<div class="account-box">
<div class="item-box" v-for="(item, index) in accountList" :key="index">
<div class="box-tt">
<div>
<span>{{ item.tt }}</span>
</div>
<div>
CNY <span class="fw600">{{ item.m }}</span>
</div>
<div>
单据 <span class="fw600">{{ item.num }}</span>
</div>
</div>
</div>
</div>
</van-cell-group>
<van-cell-group style="margin-top: 20px">
<van-cell title="金额按月统计" />
<LineChart :chartData="chartData" />
</van-cell-group>
<van-cell-group style="margin-top: 20px">
<van-cell title="按费用类型统计" />
<RoundChart :chartData="chartData" />
</van-cell-group>
<!--行程时间范围选择 -->
<van-calendar
ref="vanCalendar"
allow-same-day
:maxDate="maxDate"
v-model="dateShow"
:min-date="minDate"
:default-date="defaultDate"
type="range"
color="#0088FE"
@confirm="handleDateSelect"
/>
<div class="common-bottom-btns" style="bottom: 6rem">
<div class="common-bottom-btn" @click="handleBack">
<img src="@/assets/images/icons/home.png" alt="" />
<span>返回首页</span>
</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
import { applyReportApi, claimReportApi } from "@/api/bs/chart";
export default {
components: {
RePick: () => import("@/components/ReComponents/RePick"),
RoundChart: () => import("./components/RoundChart"),
LineChart: () => import("./components/LineChart"),
},
data() {
return {
//
option1: [
{
value: "SQ",
label: "申请单",
},
{
value: "BX",
label: "费用单",
},
],
//
option2: [
{
value: "RC",
label: "日常",
},
{
value: "CL",
label: "差旅",
},
],
//
bblx: "SQ",
ssdlx: "RC",
queryParams: {
billType: "RCSQ",
createTime: "",
startDate: null,
endDate: null,
},
minDate: new Date("2000/01/01"),
maxDate: new Date("2030/01/01"),
defaultDate: new Date(),
dateShow: false,
//
accountList: [
{
m: 747.8,
num: 2,
tt: "合计",
},
{
tt: "流程中",
m: 747.8,
num: 2,
},
],
chartData: {},
};
},
watch: {
ssdlx: {
handler(val) {
this.queryParams.billType = val + this.bblx;
},
immediate: true,
},
bblx: {
handler(val) {
this.queryParams.billType = this.ssdlx + val;
},
immediate: true,
},
},
methods: {
//
handleDateShow(obj) {
const { startTime, endTime } = obj;
this.$nextTick(() => {
this.$refs.vanCalendar && this.$refs.vanCalendar.reset();
this.dateShow = true;
if (startTime && endTime) {
this.defaultDate = [
dayjs(startTime).toDate(),
dayjs(endTime).toDate(),
];
}
});
},
//
handleClear() {
this.queryParams.startDate = "";
this.queryParams.endDate = "";
},
//
handleDateSelect(list) {
this.queryParams.startDate = dayjs(list[0]).format("YY/MM/DD");
this.queryParams.endDate = dayjs(list[1]).format("YY/MM/DD");
this.queryParams.createTime = `${dayjs(list[0]).format(
"YY/MM/DD"
)}~${dayjs(list[1]).format("YY/MM/DD")}`;
this.dateShow = false;
},
//
handleConfirm() {
let api = this.bblx == "SQ" ? applyReportApi : claimReportApi;
const { billType, startDate, endDate } = this.queryParams;
api({
billType,
startDate: startDate || null,
endDate: endDate || null,
}).then((res) => {
this.chartData = res.data || {};
this.accountList[0].m = this.chartData.totalAmount;
this.accountList[0].num = this.chartData.totalCount;
this.accountList[1].m = this.chartData.processAmount;
this.accountList[1].num = this.chartData.processCount;
});
},
//
handleDateReset() {
this.queryParams = {
billType: "RCSQ",
createTime: "",
startDate: null,
endDate: null,
};
this.handleConfirm();
},
handleBack() {
history.back();
},
},
};
</script>
<style scoped lang="scss">
@import "~@/assets/style/common/form.scss";
/* .account-box {
display: flex;
justify-content: space-between;
} */
.box-tt {
padding: 10px 30px;
display: flex;
justify-content: space-between;
.fw600 {
font-weight: 600;
}
}
</style>
Loading…
Cancel
Save