Compare commits
56 Commits
prod-24-10
...
master
Author | SHA1 | Date | |
---|---|---|---|
7b8e2efbb4 | |||
f00f1bc1fd | |||
5c83fa773b | |||
9990cf74d0 | |||
fde77b9c0a | |||
9f9450afc3 | |||
0272e06486 | |||
4a122818e5 | |||
5f2bd8d276 | |||
99789abddc | |||
009bd0b5ac | |||
4ebc40f93c | |||
b53a086862 | |||
0063828771 | |||
cd02c44fca | |||
43c1f76f82 | |||
f3a15b829f | |||
745c21341a | |||
2ab75039b9 | |||
304a1457dc | |||
422d1ce2ec | |||
147e10b342 | |||
055876c0a2 | |||
ca52f0793f | |||
226f9aef63 | |||
652055c3d3 | |||
fc2e9bfec6 | |||
8350cfb2a5 | |||
872e0ea91a | |||
5652ab9600 | |||
4e8e6d4f72 | |||
3bb4688652 | |||
675e89b02e | |||
c3100dd68f | |||
c04b43a8c8 | |||
c5c31c5eec | |||
94424faa2e | |||
db2493181a | |||
18ebd7c0d9 | |||
d239781d5d | |||
f2b4b3e853 | |||
57c3d3d679 | |||
4f8063bf2e | |||
266195ec26 | |||
898b4b8128 | |||
1e305b1734 | |||
e919d0136d | |||
6720928761 | |||
6affb368b7 | |||
a93c98b547 | |||
3ee550c985 | |||
28408ac803 | |||
41d44e93d4 | |||
8a822e829d | |||
8aafdc9bff | |||
432be97178 |
@ -29,3 +29,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
|
|||||||
```
|
```
|
||||||
code = 104, 接口不提示报错
|
code = 104, 接口不提示报错
|
||||||
```
|
```
|
||||||
|
### 开发分支
|
||||||
|
```
|
||||||
|
dev_2025
|
||||||
|
```
|
12152
package-lock.json
generated
12152
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -23,7 +23,8 @@
|
|||||||
"vue-router": "^3.0.7",
|
"vue-router": "^3.0.7",
|
||||||
"vuex": "^3.6.2",
|
"vuex": "^3.6.2",
|
||||||
"element-ui": "^2.15.9",
|
"element-ui": "^2.15.9",
|
||||||
"dayjs": "^1.8.14"
|
"dayjs": "^1.8.14",
|
||||||
|
"decimal.js": "^10.4.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.16",
|
"@babel/core": "^7.12.16",
|
||||||
|
@ -27,6 +27,14 @@ export function getDriverStatisticsKpi(data){
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
export function querySupplierDriverStatisticsScore(data){
|
||||||
|
return request({
|
||||||
|
url: '/supplier/supplierKPI/querySupplierDriverStatisticsScore',
|
||||||
|
method:'POST',
|
||||||
|
// contentType: 'application/json',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
// 各种详情数据
|
// 各种详情数据
|
||||||
export function getKpiDetailsData(data){
|
export function getKpiDetailsData(data){
|
||||||
return request({
|
return request({
|
||||||
@ -36,6 +44,24 @@ export function getKpiDetailsData(data){
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 获取近12个月的服务商数据
|
||||||
|
export function getRecentSupplierKpi(data){
|
||||||
|
return request({
|
||||||
|
url: '/supplier/supplierKPI/queryRecentSupplierStatisticsKpi',
|
||||||
|
method:'POST',
|
||||||
|
// contentType: 'application/json',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 司机分数详情
|
||||||
|
export function driverScoreDetail(data){
|
||||||
|
return request({
|
||||||
|
url: '/supplier/supplierKPI/querySupplierDriverStatisticsScore',
|
||||||
|
method:'POST',
|
||||||
|
// contentType: 'application/json',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
// 关键词搜索服务商名称
|
// 关键词搜索服务商名称
|
||||||
export function getSupplierId(key) {
|
export function getSupplierId(key) {
|
||||||
return request({
|
return request({
|
||||||
|
@ -147,21 +147,29 @@ export function deleteImage(data){
|
|||||||
//开票通知列表
|
//开票通知列表
|
||||||
export function notifyInvoiceList(data){
|
export function notifyInvoiceList(data){
|
||||||
return request({
|
return request({
|
||||||
url:'/supplierAppV2/dispatchApp/accountRecord/notifyInvoiceList',
|
url:'/order/taskInvoiceBatch/selectPageList',
|
||||||
method:'POST',
|
method:'POST',
|
||||||
contentType:'application/json',
|
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// contentType:'application/json',
|
||||||
//开票通知详情
|
//开票通知详情
|
||||||
export function notifyInvoiceDetail(data){
|
export function notifyInvoiceDetail(data){
|
||||||
return request({
|
return request({
|
||||||
url:'/supplierAppV2/dispatchApp/accountRecord/notifyInvoiceDetail',
|
url:'/order/taskInvoiceBatch/selectById',
|
||||||
method:'POST',
|
method:'POST',
|
||||||
contentType:'application/json',
|
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 关联案件
|
||||||
|
export function getOrderListByInvoice(data) {
|
||||||
|
return request({
|
||||||
|
url:'/order/taskOrderCostHisRecord/selectPageList',
|
||||||
|
method:'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 调度app获取新签列表
|
// 调度app获取新签列表
|
||||||
export function pageList(data){
|
export function pageList(data){
|
||||||
return request({
|
return request({
|
||||||
@ -214,6 +222,83 @@ export function uploadImage(data){
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 发票上传
|
||||||
|
export function uploadInvoice(data){
|
||||||
|
return request({
|
||||||
|
url:'/order/taskInvoiceBatch/saveInvoiceImagesAndIdentify',
|
||||||
|
method:'POST',
|
||||||
|
contentType:'multipart/form-data',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除发票
|
||||||
|
export function deleteInvoice(data) {
|
||||||
|
return request({
|
||||||
|
url:'/order/taskInvoiceBatch/deleteInfo',
|
||||||
|
method:'POST',
|
||||||
|
contentType:'multipart/form-data',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成财务批次
|
||||||
|
export function createBatch(data) {
|
||||||
|
return request({
|
||||||
|
url:'/order/taskInvoiceBatch/supplierCreateFinanceBatch',
|
||||||
|
method:'POST',
|
||||||
|
contentType:'application/x-www-form-urlencoded',
|
||||||
|
data,
|
||||||
|
testFlag: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开票信息列表
|
||||||
|
export function getFinanceBatchList(data) {
|
||||||
|
return request({
|
||||||
|
url:'/order/taskInvoiceFinanceBatch/selectFinanceBatchPageList',
|
||||||
|
method:'POST',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批次对应发票信息列表
|
||||||
|
export function financeInvoiceList(data) {
|
||||||
|
return request({
|
||||||
|
url:'/order/taskInvoiceBatch/selectInvoicePageList',
|
||||||
|
method:'POST',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看发票
|
||||||
|
export function selectInvoiceDetailInfo(data) {
|
||||||
|
return request({
|
||||||
|
url:'/order/taskInvoiceBatch/selectInvoiceDetailInfo',
|
||||||
|
method:'POST',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 填写快递
|
||||||
|
export function saveBatchCourierNumber(data) {
|
||||||
|
return request({
|
||||||
|
url:'/order/taskInvoiceBatch/supplierSaveBatchCourierNumber',
|
||||||
|
method:'POST',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取服务商发票信息
|
||||||
|
export function getBillingInfo(url, data) {
|
||||||
|
return request({
|
||||||
|
url: url,
|
||||||
|
method:'POST',
|
||||||
|
contentType:'multipart/form-data',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// ocr 识别
|
// ocr 识别
|
||||||
export function ocrHandler(data){
|
export function ocrHandler(data){
|
||||||
return request({
|
return request({
|
||||||
|
BIN
src/assets/icon_upload.png
Normal file
BIN
src/assets/icon_upload.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 524 B |
@ -2,6 +2,7 @@ import Vue from "vue";
|
|||||||
import VueRouter from "vue-router";
|
import VueRouter from "vue-router";
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
import kpiRouter from './kpi-router'
|
import kpiRouter from './kpi-router'
|
||||||
|
import invoiceRouter from "@/router/invoice-router";
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
@ -84,15 +85,48 @@ const routes = [
|
|||||||
name: 'invoicingNotify',
|
name: 'invoicingNotify',
|
||||||
component: () => import('@/views/index/invoicingNotify.vue'),
|
component: () => import('@/views/index/invoicingNotify.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '开票通知'
|
title: '工单批次'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/invoiceListInfo",
|
||||||
|
name: 'invoiceListInfo',
|
||||||
|
component: () => import('@/views/index/invoiceListInfo.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '开票信息'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/invoiceInfo",
|
||||||
|
name: 'invoiceInfo',
|
||||||
|
component: () => import('@/views/index/invoiceInfo.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '开票信息'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/invoicingDetail",
|
path: "/invoicingDetail",
|
||||||
name: 'invoicingDetail',
|
name: 'invoicingDetail',
|
||||||
component: () => import('@/views/index/invoicingDetail'),
|
component: () => import('@/views/index/invoicingDetail'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '开票通知详情'
|
title: '工单批次详情'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/uploadInvoice",
|
||||||
|
name: 'uploadInvoice',
|
||||||
|
component: () => import('@/views/index/uploadInvoice.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '上传发票',
|
||||||
|
cache: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/showInvoice",
|
||||||
|
name: 'showInvoice',
|
||||||
|
component: () => import('@/views/index/showInvoice.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '查看发票'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -232,6 +266,7 @@ const routes = [
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
...kpiRouter,
|
...kpiRouter,
|
||||||
|
...invoiceRouter,
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
|
11
src/router/invoice-router.js
Normal file
11
src/router/invoice-router.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
const invoiceRouter = [
|
||||||
|
{
|
||||||
|
path: '/invoiceIndex',
|
||||||
|
name: 'invoiceIndex',
|
||||||
|
component: () => import('@/views/invoice/invoiceIndex'),
|
||||||
|
meta:{
|
||||||
|
title: '道路救援',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export default invoiceRouter
|
@ -18,19 +18,27 @@ service.interceptors.request.use(
|
|||||||
let reqUrl=config.url
|
let reqUrl=config.url
|
||||||
// console.log("reqUrl",reqUrl)
|
// console.log("reqUrl",reqUrl)
|
||||||
config.data = config.contentType ? config.data : qs.stringify(config.data)
|
config.data = config.contentType ? config.data : qs.stringify(config.data)
|
||||||
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
|
if (config.testFlag) {
|
||||||
|
config.data = qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true})
|
||||||
|
}
|
||||||
|
config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
|
||||||
let token = localStorage.getItem('token');
|
let token = localStorage.getItem('token');
|
||||||
// let token='4099761587129c46b03c9316c9e866c9'
|
// let token='4099761587129c46b03c9316c9e866c9'
|
||||||
// let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MTI0NTQ5NTMsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiJDLeS4iua1t-a1i-ivleacjeWKoeWVhiIsInN1cHBsaWVySWQiOjMzMDQxLCJzdXBwbGllclR5cGUiOjIsInVzZXJuYW1lIjoic29uZyIsInVzZXJUeXBlIjoicmVzY3VlQXBwIiwiZGV2aWNlSWQiOiIyMmI0OWNhMjBmOWI4MzMwZDk4NzIxNzNmMzllYTY4YmMiLCJhdXRob3JpdGllcyI6W119LCJzY29wZSI6WyJhbGwiXSwiaXNzIjoiaHR0cHM6Ly9zaW5vYXNzaXN0LmNvbSIsImV4cCI6MTcxMjU0MTM1MywiaWF0IjoxNzEyNDU0OTUzfQ.sPU9_OD_TOWcTwqmlawEGyo4mCPrEaRYw2R02gnvYJw'
|
// let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MTI0NTQ5NTMsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiJDLeS4iua1t-a1i-ivleacjeWKoeWVhiIsInN1cHBsaWVySWQiOjMzMDQxLCJzdXBwbGllclR5cGUiOjIsInVzZXJuYW1lIjoic29uZyIsInVzZXJUeXBlIjoicmVzY3VlQXBwIiwiZGV2aWNlSWQiOiIyMmI0OWNhMjBmOWI4MzMwZDk4NzIxNzNmMzllYTY4YmMiLCJhdXRob3JpdGllcyI6W119LCJzY29wZSI6WyJhbGwiXSwiaXNzIjoiaHR0cHM6Ly9zaW5vYXNzaXN0LmNvbSIsImV4cCI6MTcxMjU0MTM1MywiaWF0IjoxNzEyNDU0OTUzfQ.sPU9_OD_TOWcTwqmlawEGyo4mCPrEaRYw2R02gnvYJw'
|
||||||
if (reqUrl.includes("/driverApp")) {
|
if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
|
||||||
|
config.headers['Authorization'] = `${token}`;
|
||||||
|
config.headers['token'] = `${token}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* if (reqUrl.includes("/driverApp")) {
|
||||||
// console.log("司机app")
|
// console.log("司机app")
|
||||||
config.headers['token'] = `${token}`;
|
config.headers['token'] = `${token}`;
|
||||||
} else if(reqUrl.includes("/supplierApp") || reqUrl.includes("/supplierKPI") || reqUrl.includes('/supplier/select')){
|
} else if(reqUrl.includes("/supplierApp") || reqUrl.includes("/supplierKPI") || reqUrl.includes('/supplier/select') || reqUrl.includes('/order') || reqUrl.includes('/order/taskInvoiceBatch') || reqUrl.includes('/supplier') ){
|
||||||
// console.log("调度app,服务商kpi")
|
// console.log("调度app,服务商kpi")
|
||||||
config.headers['Authorization'] = `${token}`;
|
config.headers['Authorization'] = `${token}`;
|
||||||
}else{
|
}else{
|
||||||
config.headers['token'] = `${token}`;
|
config.headers['token'] = `${token}`;
|
||||||
}
|
}*/
|
||||||
return config
|
return config
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
@ -50,7 +58,7 @@ service.interceptors.response.use(
|
|||||||
// }
|
// }
|
||||||
if ( res.code === 401 || res.code === 400 || res.code == 500) {
|
if ( res.code === 401 || res.code === 400 || res.code == 500) {
|
||||||
Toast(res.msg || 'Error')
|
Toast(res.msg || 'Error')
|
||||||
return Promise.reject(new Error(res.msg || 'Error'))
|
return Promise.reject(res.msg)
|
||||||
} else {
|
} else {
|
||||||
return res
|
return res
|
||||||
// if( res.code === 200 ) {
|
// if( res.code === 200 ) {
|
||||||
|
@ -101,6 +101,7 @@ export default {
|
|||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
this.driverId = urlParams.get('driverId');
|
this.driverId = urlParams.get('driverId');
|
||||||
this.time=timeFormat(Date.now())
|
this.time=timeFormat(Date.now())
|
||||||
|
this.keyword=urlParams.get('keyWord') || ''
|
||||||
this.getTrainingList();
|
this.getTrainingList();
|
||||||
document.addEventListener('visibilitychange', async ( ) => {
|
document.addEventListener('visibilitychange', async ( ) => {
|
||||||
let state = document.visibilityState
|
let state = document.visibilityState
|
||||||
|
@ -103,6 +103,9 @@ export default {
|
|||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
this.supplierId = urlParams.get('supplierId');
|
this.supplierId = urlParams.get('supplierId');
|
||||||
this.driverId = urlParams.get('driverId');
|
this.driverId = urlParams.get('driverId');
|
||||||
|
if(this.driverId){
|
||||||
|
this.keyword=urlParams.get('keyWord') || ''
|
||||||
|
}
|
||||||
this.getNormalList()
|
this.getNormalList()
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
344
src/views/index/invoiceInfo.vue
Normal file
344
src/views/index/invoiceInfo.vue
Normal file
@ -0,0 +1,344 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="navBar">
|
||||||
|
<van-nav-bar
|
||||||
|
title="开票信息"
|
||||||
|
left-arrow
|
||||||
|
left-arrow-color="#FFFFFF"
|
||||||
|
:border="false"
|
||||||
|
:fixed="true"
|
||||||
|
:safe-area-inset-top="true"
|
||||||
|
@click-left="h5GoBack"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="contentWrap">
|
||||||
|
<div class="content_tab">
|
||||||
|
<div class="tab_title">批次信息</div>
|
||||||
|
<div class="tab_content">
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">财务编号</div>
|
||||||
|
<div class="item_content">
|
||||||
|
<span id="copyText">{{invoiceInfo.financeBatchCode}}</span>
|
||||||
|
<img class="copyIcon" @click="copyHandler(invoiceInfo.financeBatchCode)" src="@/assets/copy.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">工单数量</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.orderNum}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">总金额</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.totalMoney}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">扣款</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.cutMoney || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">税额扣款</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.taxCutMoney || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">开票金额</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.invoiceMoney || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">备注</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.remark || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">失败原因</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.failRemark || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">创建时间</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.createTime}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">对账状况</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{ statusStr(invoiceInfo.status, invoiceInfo.createTime) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_tab mt10">
|
||||||
|
<div class="tab_title">发票信息</div>
|
||||||
|
<div class="itemWrap" v-for="(item,index) in invoiceList" :key="index">
|
||||||
|
<div class="item line1">
|
||||||
|
<div class="title own_title">{{item.accountName}}</div>
|
||||||
|
<div class="checkBtn" @click="goShowInvoice(item)">查看</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">发票号码:</span>
|
||||||
|
<span class="content">{{item.financeBatchCode}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">发票金额:</span>
|
||||||
|
<span class="content">¥{{item.invoiceMoney}}元</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">开票日期:</span>
|
||||||
|
<span class="content">{{ item.invoiceDate }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content_tab mt10">
|
||||||
|
<div class="tab_title">快递信息</div>
|
||||||
|
<div class="itemWrap bg_cls pd_cls">
|
||||||
|
<div class="item mb10">
|
||||||
|
<span class="title width_cls">发票类型:</span>
|
||||||
|
<span class="content">
|
||||||
|
<van-radio-group v-model="invoiceType" disabled direction="horizontal">
|
||||||
|
<van-radio :name="1" icon-size="16px">电子发票</van-radio>
|
||||||
|
<van-radio :name="2" icon-size="16px">纸质发票</van-radio>
|
||||||
|
</van-radio-group>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title width_cls">补录快递单号:</span>
|
||||||
|
<span class="content" style="flex: 1">
|
||||||
|
<van-field v-model="courierNumber" label="" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="invoice_btn_wrap">
|
||||||
|
<div class="btn" @click="saveHandler">保存</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {myMixins} from "@/utils/myMixins"
|
||||||
|
import { financeInvoiceList, selectInvoiceDetailInfo, saveBatchCourierNumber } from "@/api/mine"
|
||||||
|
import {Dialog} from "vant";
|
||||||
|
export default {
|
||||||
|
name: "invoiceInfo",
|
||||||
|
mixins: [ myMixins ],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
invoiceInfo: {},
|
||||||
|
invoiceList: [],
|
||||||
|
invoiceType: '',
|
||||||
|
courierNumber: '',
|
||||||
|
id: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
let showItemInfo = localStorage.getItem('showItemInfo');
|
||||||
|
this.invoiceInfo = showItemInfo ? JSON.parse(showItemInfo) : {};
|
||||||
|
console.log('this.invoiceInfo', this.invoiceInfo)
|
||||||
|
this.invoiceType = this.invoiceInfo.invoiceType
|
||||||
|
this.id = this.$route.query.id;
|
||||||
|
await this.getInvoiceHandler()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async saveHandler() {
|
||||||
|
await saveBatchCourierNumber({
|
||||||
|
invoiceBatchId: this.id,
|
||||||
|
courierNumber: this.courierNumber,
|
||||||
|
})
|
||||||
|
Dialog.alert({
|
||||||
|
title: '提示',
|
||||||
|
message: '操作成功!',
|
||||||
|
}).then(() => {
|
||||||
|
this.h5GoBack()
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async goShowInvoice(item) {
|
||||||
|
let res = await selectInvoiceDetailInfo({
|
||||||
|
id: item.id
|
||||||
|
})
|
||||||
|
localStorage.setItem('invoiceDetail', JSON.stringify(res.data));
|
||||||
|
this.goPage('showInvoice')
|
||||||
|
},
|
||||||
|
statusStr(status,date) {
|
||||||
|
if(new Date('2024-01-01 00:00:00') > new Date(date)){
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
if( status == 1 ) {
|
||||||
|
return '待审核'
|
||||||
|
} else if( [2 ,3].includes(status)) {
|
||||||
|
return '审核通过'
|
||||||
|
} else if( status == 7 ) {
|
||||||
|
return '审核失败'
|
||||||
|
} else if( status == 4 ) {
|
||||||
|
return '已打款'
|
||||||
|
} else if( status == 8 ) {
|
||||||
|
return '打款中'
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getInvoiceHandler() {
|
||||||
|
let res = await financeInvoiceList({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
total: 0,
|
||||||
|
pageNum: 1,
|
||||||
|
invoiceBatchId: this.id
|
||||||
|
});
|
||||||
|
this.invoiceList = res.data;
|
||||||
|
console.log('current', res)
|
||||||
|
},
|
||||||
|
copyHandler(copyText){
|
||||||
|
let inputNode = document.createElement('input') // 创建input
|
||||||
|
inputNode.value = copyText // 赋值给 input 值
|
||||||
|
document.body.appendChild(inputNode) // 插入进去
|
||||||
|
inputNode.select() // 选择对象
|
||||||
|
document.execCommand('Copy') // 原生调用执行浏览器复制命令
|
||||||
|
inputNode.className = 'oInput'
|
||||||
|
inputNode.style.display = 'none' // 隐藏
|
||||||
|
this.$toast('复制成功')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "@/styles/mixin.scss";
|
||||||
|
@import "@/styles/common.scss";
|
||||||
|
.wrap{
|
||||||
|
@include wh(100%,100%);
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.navBar{
|
||||||
|
margin-bottom: 46px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWrap{
|
||||||
|
.content_tab {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.tab_title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.tab_content {
|
||||||
|
.item_wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 26px;
|
||||||
|
font-size: 12px;
|
||||||
|
.item_label {
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
margin-right: 5px;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
.item_content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.copyIcon {
|
||||||
|
width: 35px;
|
||||||
|
height: 15px;
|
||||||
|
margin-left: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemWrap{
|
||||||
|
/*background: #FFFFFF;*/
|
||||||
|
background-color: #EBF2F7;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: 1px solid #EBF2F7;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 26px;
|
||||||
|
@include flexBetween;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.line1{
|
||||||
|
width: 100%;
|
||||||
|
@include flexColBet;
|
||||||
|
.checkBtn{
|
||||||
|
@include bgFontColor(#FFFFFF,#354D93);
|
||||||
|
@include wh(48px,18px);
|
||||||
|
border-radius: 3px;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: flex;
|
||||||
|
@include fontWeightSize(400,12px);
|
||||||
|
span{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.own_title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.bg_cls {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.pd_cls {
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
::v-deep .van-cell {
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #EBF2F7;
|
||||||
|
}
|
||||||
|
.width_cls {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
.invoice_btn_wrap {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #2C395F;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mb10 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
::v-deep .van-radio__icon {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
262
src/views/index/invoiceListInfo.vue
Normal file
262
src/views/index/invoiceListInfo.vue
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="navBar">
|
||||||
|
<van-nav-bar
|
||||||
|
title="开票信息"
|
||||||
|
left-arrow
|
||||||
|
left-arrow-color="#FFFFFF"
|
||||||
|
:border="false"
|
||||||
|
:fixed="true"
|
||||||
|
:safe-area-inset-top="true"
|
||||||
|
@click-left="goBack"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="search_wrap">
|
||||||
|
<div class="search_left">
|
||||||
|
<el-select v-model="form.statusValue" size="mini" clearable placeholder="请选择审核状态">
|
||||||
|
<el-option
|
||||||
|
v-for="item in statusValueOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="search_right">
|
||||||
|
<van-search
|
||||||
|
v-model="form.financeBatchCode"
|
||||||
|
show-action
|
||||||
|
placeholder="请输入搜索关键词"
|
||||||
|
@search="onSearch"
|
||||||
|
>
|
||||||
|
<template #action>
|
||||||
|
<div @click="onSearch">搜索</div>
|
||||||
|
</template>
|
||||||
|
</van-search>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contentWrap">
|
||||||
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||||
|
<van-list
|
||||||
|
v-model="loading"
|
||||||
|
:finished="finished"
|
||||||
|
finished-text="没有更多了"
|
||||||
|
@load="getMore"
|
||||||
|
>
|
||||||
|
<div class="itemWrap" v-for="(item,index) in invoiceList" :key="index">
|
||||||
|
<div class="item line1">
|
||||||
|
<div class="itemTime">
|
||||||
|
<span class="title">开票编号:</span>
|
||||||
|
<span class="content">{{ item.financeBatchCode }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="checkBtn" @click="getInvoiceInfo(item)">查看</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">工单数量:</span>
|
||||||
|
<span class="content">{{ item.orderNum }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">开票金额:</span>
|
||||||
|
<span class="content">{{ item.invoiceMoney || 0 }}元</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">创建时间:</span>
|
||||||
|
<span class="content">{{ item.createTime }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">对账状态:</span>
|
||||||
|
<span class="content">{{ statusStr(item.status, item.createTime) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</van-list>
|
||||||
|
</van-pull-refresh>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { myMixins } from "@/utils/myMixins"
|
||||||
|
import { getFinanceBatchList } from "@/api/mine"
|
||||||
|
export default {
|
||||||
|
name: "invoiceListInfo",
|
||||||
|
mixins: [ myMixins ],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
statusValue: '',
|
||||||
|
financeBatchCode: '',
|
||||||
|
statusList: [],
|
||||||
|
},
|
||||||
|
invoiceList: [],
|
||||||
|
isLoading: false,
|
||||||
|
loading: false,
|
||||||
|
finished: false,
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
pageNum: 1,
|
||||||
|
},
|
||||||
|
supplierId: '',
|
||||||
|
statusValueOptions:[{name:'待审核',value:1},{name:'审核通过待打款',value: 2},{name:'审核失败',value: 3},{name:'打款中',value: 4},{name:'已打款',value: 5}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
async 'form.statusValue' (){
|
||||||
|
if( this.form.statusValue == 1 ) {
|
||||||
|
this.form.statusList = [1]
|
||||||
|
} else if( this.form.statusValue == 2 ) {
|
||||||
|
this.form.statusList = [2, 3]
|
||||||
|
} else if( this.form.statusValue == 3 ) {
|
||||||
|
this.form.statusList = [7]
|
||||||
|
} else if( this.form.statusValue == 4 ) {
|
||||||
|
this.form.statusList = [8]
|
||||||
|
} else if( this.form.statusValue == 5 ) {
|
||||||
|
this.form.statusList = [4]
|
||||||
|
} else {
|
||||||
|
this.form.statusList = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
this.supplierId = this.$route.query.supplierId;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async onSearch() {
|
||||||
|
this.page.pageNum=1;
|
||||||
|
await this.getList()
|
||||||
|
},
|
||||||
|
onRefresh() {
|
||||||
|
this.page.pageNum=1;
|
||||||
|
this.getList();
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$toast('刷新成功');
|
||||||
|
this.isLoading = false;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
async getMore(){
|
||||||
|
await this.getList()
|
||||||
|
this.page.pageNum++;
|
||||||
|
// 加载状态结束
|
||||||
|
this.loading = false;
|
||||||
|
// 数据全部加载完成
|
||||||
|
if (this.invoiceList.length >= this.page.total) {
|
||||||
|
this.finished = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getList() {
|
||||||
|
let res = await getFinanceBatchList({
|
||||||
|
...this.page,
|
||||||
|
...this.form,
|
||||||
|
supplierId: this.supplierId
|
||||||
|
});
|
||||||
|
if(res.code == 200){
|
||||||
|
this.page.total = res.total;
|
||||||
|
if(this.page.pageNum == 1){
|
||||||
|
this.invoiceList = res.data;
|
||||||
|
}else{
|
||||||
|
let preList = this.invoiceList;
|
||||||
|
let arr = res.data;
|
||||||
|
this.invoiceList = preList.concat(arr)
|
||||||
|
}
|
||||||
|
if (this.invoiceList.length === 0) {
|
||||||
|
this.show=true
|
||||||
|
}else{
|
||||||
|
this.show=false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getInvoiceInfo(item) {
|
||||||
|
localStorage.setItem('showItemInfo', JSON.stringify(item));
|
||||||
|
this.goPage('invoiceInfo', {
|
||||||
|
id: item.id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
statusStr(status,date) {
|
||||||
|
if(new Date('2024-01-01 00:00:00') > new Date(date)){
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
if( status == 1 ) {
|
||||||
|
return '待审核'
|
||||||
|
} else if( [2 ,3].includes(status)) {
|
||||||
|
return '审核通过'
|
||||||
|
} else if( status == 7 ) {
|
||||||
|
return '审核失败'
|
||||||
|
} else if( status == 4 ) {
|
||||||
|
return '已打款'
|
||||||
|
} else if( status == 8 ) {
|
||||||
|
return '打款中'
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "@/styles/mixin.scss";
|
||||||
|
@import "@/styles/common.scss";
|
||||||
|
.wrap{
|
||||||
|
@include wh(100%,100%);
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.navBar{
|
||||||
|
margin-bottom: 46px;
|
||||||
|
}
|
||||||
|
.contentWrap {
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.search_wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
.search_left {
|
||||||
|
width: 100px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.search_right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemWrap{
|
||||||
|
background: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 6px;
|
||||||
|
line-height: 26px;
|
||||||
|
@include flexBetween;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.item{
|
||||||
|
@include fontWeightSize(400,12px);
|
||||||
|
span{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
opacity: .5;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line1{
|
||||||
|
width: 100%;
|
||||||
|
@include flexColBet;
|
||||||
|
.checkBtn{
|
||||||
|
@include bgFontColor(#FFFFFF,#354D93);
|
||||||
|
@include wh(48px,18px);
|
||||||
|
border-radius: 3px;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -2,7 +2,7 @@
|
|||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="navBar">
|
<div class="navBar">
|
||||||
<van-nav-bar
|
<van-nav-bar
|
||||||
title="开票通知详情"
|
title="工单批次详情"
|
||||||
left-arrow
|
left-arrow
|
||||||
left-arrow-color="#FFFFFF"
|
left-arrow-color="#FFFFFF"
|
||||||
:border="false"
|
:border="false"
|
||||||
@ -12,52 +12,143 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="contentWrap">
|
<div class="contentWrap">
|
||||||
<div class="item" v-for="(item,index) in detailList" :key="index">
|
<div class="content_tab">
|
||||||
<div class="itemContent">
|
<div class="tab_title">批次详情</div>
|
||||||
<span> {{ item.orderCode }}</span>
|
<div class="tab_content">
|
||||||
<span>{{ item.serviceName }}</span>
|
<div class="item_wrap">
|
||||||
<span> {{item.settleAmount}}元</span>
|
<div class="item_label">批次编号</div>
|
||||||
</div>
|
<div class="item_content">
|
||||||
<div class="line"></div>
|
<span id="copyText">{{invoiceInfo.batchCode}}</span>
|
||||||
|
<img class="copyIcon" @click="copyHandler(invoiceInfo.batchCode)" src="@/assets/copy.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">财务编号</div>
|
||||||
|
<div class="item_content">
|
||||||
|
<span id="copyText2">{{invoiceInfo.financeBatchCode}}</span>
|
||||||
|
<img class="copyIcon" @click="copyHandler(invoiceInfo.financeBatchCode)" src="@/assets/copy.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">工单数量</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.orderNum}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">总金额</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.orderNum}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">扣款</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.cutMoney || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">税额扣款</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.taxCutMoney || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">开票金额</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.invoiceMoney || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">备注</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.remark || ''}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">创建时间</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.createTime}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">对账状况</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.statusString}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_tab mt_cls">
|
||||||
|
<div class="tab_title">关联案件</div>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th class="text_left">案件编号</th>
|
||||||
|
<th>服务类型</th>
|
||||||
|
<th>结算类型</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="(item, index) in orderList" :key="index">
|
||||||
|
<td class="text_left">
|
||||||
|
{{item.orderCode}}
|
||||||
|
<img class="copyIcon" @click="copyHandler(item.orderCode)" src="@/assets/copy.png" />
|
||||||
|
</td>
|
||||||
|
<td>{{item.serviceType || ''}}</td>
|
||||||
|
<td>{{item.settleAmount || ''}}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {myMixins} from "@/utils/myMixins"
|
import {myMixins} from "@/utils/myMixins"
|
||||||
import {notifyInvoiceDetail} from "@/api/mine"
|
import { notifyInvoiceDetail, getOrderListByInvoice } from "@/api/mine"
|
||||||
export default {
|
export default {
|
||||||
name: "invoicingDetail",
|
name: "invoicingDetail",
|
||||||
mixins:[myMixins],
|
mixins:[myMixins],
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
pageNum:1,
|
batchCode: '',
|
||||||
pageSize:10,
|
id: '',
|
||||||
detailList:[],
|
invoiceInfo: {},
|
||||||
form:{
|
orderList: [],
|
||||||
batchCode:'',
|
|
||||||
startTime:'',
|
|
||||||
overTime:'',
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
// console.log(this.$route.query?.id)
|
this.batchCode = this.$route.query?.batchCode;
|
||||||
this.form.batchCode=this.$route.query?.id;
|
this.id = this.$route.query?.id;
|
||||||
this.form.startTime=this.$route.query?.startTime;
|
|
||||||
this.form.overTime=this.$route.query?.overTime;
|
|
||||||
await this.getDetail()
|
await this.getDetail()
|
||||||
|
await this.getOrderList();
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
async getDetail(){
|
copyHandler(copyText){
|
||||||
let res=await notifyInvoiceDetail({
|
let inputNode = document.createElement('input') // 创建input
|
||||||
pageNum:this.pageNum,
|
inputNode.value = copyText // 赋值给 input 值
|
||||||
pageSize:this.pageSize,
|
document.body.appendChild(inputNode) // 插入进去
|
||||||
...this.form,
|
inputNode.select() // 选择对象
|
||||||
})
|
document.execCommand('Copy') // 原生调用执行浏览器复制命令
|
||||||
this.detailList=res.data
|
inputNode.className = 'oInput'
|
||||||
}
|
inputNode.style.display = 'none' // 隐藏
|
||||||
|
this.$toast('复制成功')
|
||||||
|
},
|
||||||
|
async getOrderList() {
|
||||||
|
let res = await getOrderListByInvoice({
|
||||||
|
batchCode: this.batchCode,
|
||||||
|
pageSize: 1000,
|
||||||
|
pageNum: 1,
|
||||||
|
createTime: this.invoiceInfo.startTime
|
||||||
|
})
|
||||||
|
this.orderList = res.data;
|
||||||
|
console.log('rerere', res);
|
||||||
|
},
|
||||||
|
async getDetail(){
|
||||||
|
let res = await notifyInvoiceDetail({
|
||||||
|
id: this.id
|
||||||
|
})
|
||||||
|
this.invoiceInfo = res.data
|
||||||
|
console.log('rerere', res)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -67,26 +158,62 @@ export default {
|
|||||||
@import "@/styles/common.scss";
|
@import "@/styles/common.scss";
|
||||||
.wrap{
|
.wrap{
|
||||||
@include wh(100%,100%);
|
@include wh(100%,100%);
|
||||||
|
background-color: #F4F5F7;
|
||||||
}
|
}
|
||||||
.navBar{
|
.navBar{
|
||||||
height: 46px;
|
height: 46px;
|
||||||
}
|
}
|
||||||
.contentWrap{
|
.contentWrap{
|
||||||
@include wh(100%,400px);
|
.mt_cls {
|
||||||
margin-left: 27px;
|
margin-top: 10px;
|
||||||
.item{
|
}
|
||||||
|
.content_tab {
|
||||||
|
background-color: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@include all-height(47px);
|
padding: 15px 15px;
|
||||||
.itemContent{
|
box-sizing: border-box;
|
||||||
margin-left: 5px;
|
.tab_title {
|
||||||
color: #323643;
|
font-size: 14px;
|
||||||
@include fontWeightSize(400,13px);
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.line{
|
.tab_content {
|
||||||
@include wh(100%,1px);
|
.item_wrap {
|
||||||
@include bgcolorOpa(#E9E9EA,0.6);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
.item_label {
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
margin-right: 5px;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
.item_content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
line-height: 30px;
|
||||||
|
width: 100%;
|
||||||
|
.text_left {
|
||||||
|
text-align: left;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.copyIcon {
|
||||||
|
width: 35px;
|
||||||
|
height: 15px;
|
||||||
|
margin-left: 10px
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="navBar">
|
<div class="navBar">
|
||||||
<van-nav-bar
|
<van-nav-bar
|
||||||
title="开票通知"
|
title="工单批次"
|
||||||
left-arrow
|
left-arrow
|
||||||
left-arrow-color="#FFFFFF"
|
left-arrow-color="#FFFFFF"
|
||||||
:border="false"
|
:border="false"
|
||||||
@ -11,41 +11,74 @@
|
|||||||
@click-left="goBack"
|
@click-left="goBack"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
<van-tabs v-model="active" sticky @click="changeTabHandler" background="#2C395F" color="#ffffff" title-active-color="#ffffff" title-inactive-color="#BDC1CD">
|
||||||
<div class="itemWrap" v-for="(item,index) in notifyList" :key="index" >
|
<van-tab title="全部" name="1"></van-tab>
|
||||||
<div class="item line1">
|
<van-tab title="未开票" name="2"></van-tab>
|
||||||
<div class="itemTime">
|
<van-tab title="已开票" name="3"></van-tab>
|
||||||
<span class="title">开票月份:</span>
|
</van-tabs>
|
||||||
<span class="content">{{ item.invoiceMonth }}</span>
|
<div class="content_wrap" :class="{ 'pd_cls': active == 2 }">
|
||||||
</div>
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||||
<div class="orderNum">
|
<van-list
|
||||||
<span class="title">总案件数:</span>
|
v-model="loading"
|
||||||
<span class="content">{{ item.orderNum }}</span>
|
:finished="finished"
|
||||||
</div>
|
finished-text="没有更多了"
|
||||||
<div class="checkBtn" @click="goPage('invoicingDetail',{id:item.batchCode,startTime:item.startTime,overTime:item.overTime})">查看 </div>
|
@load="getMore"
|
||||||
</div>
|
>
|
||||||
<div class="item">
|
<van-search
|
||||||
<span class="title">批次号:</span>
|
v-model="batchCode"
|
||||||
<span class="content">{{ item.batchCode }}</span>
|
show-action
|
||||||
</div>
|
placeholder="请输入批次号或开票编号"
|
||||||
<div class="item">
|
>
|
||||||
<span class="title">结算总金额:</span>
|
<template #action>
|
||||||
<span class="content">{{ item.totalMoney + '元' }}</span>
|
<div @click="onSearch">搜索</div>
|
||||||
</div>
|
</template>
|
||||||
<div class="item">
|
</van-search>
|
||||||
<span class="title">扣款金额:</span>
|
<van-checkbox-group v-model="checkList">
|
||||||
<span class="content">{{ item.cutMoney + '元'}}</span>
|
<div class="itemWrap" v-for="(item,index) in notifyList" :key="index" @click="toggle(index)">
|
||||||
</div>
|
<div class="item line1">
|
||||||
<div class="item">
|
<div class="itemTime">
|
||||||
<span class="title">扣款原因:</span>
|
<span class="title">批次号:</span>
|
||||||
<span class="content" style="color: #FF8F37;">{{ item.remark }}</span>
|
<span class="content">{{ item.batchCode }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="orderNum">
|
||||||
<span class="title">最终开票金额:</span>
|
<span class="title">总案件数:</span>
|
||||||
<span class="content">{{ item.invoiceMoney+ '元' }}</span>
|
<span class="content">{{ item?.orderNum || '' }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="checkBtn" @click="goPage('invoicingDetail',{id:item.id, batchCode: item.batchCode})">查看</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">开票月份:</span>
|
||||||
|
<span class="content">{{ getMonth(item) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">结算总金额:</span>
|
||||||
|
<span class="content">{{ item?.totalMoney ? item.totalMoney : 0 }}元</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">扣款金额:</span>
|
||||||
|
<span class="content">{{ item?.cutMoney || 0 }}元</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">扣款原因:</span>
|
||||||
|
<span class="content" style="color: #FF8F37;">{{ item.remark }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="title">最终开票金额:</span>
|
||||||
|
<span class="content">{{ item?.invoiceMoney || 0 }}元</span>
|
||||||
|
</div>
|
||||||
|
<van-checkbox class="checkbox_cls" v-if="active == 2" :name="item" ref="checkboxes" />
|
||||||
|
</div>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</van-list>
|
||||||
|
</van-pull-refresh>
|
||||||
|
</div>
|
||||||
|
<div class="invoice_btn_wrap" v-if="active == 2 && totalCount > 0">
|
||||||
|
<div class="invoice_btn_info">
|
||||||
|
<span class="invoice_btn_title">开票总金额</span>
|
||||||
|
<span class="invoice_btn_money">¥{{totalCount}}</span>
|
||||||
</div>
|
</div>
|
||||||
</van-pull-refresh>
|
<div class="btn" @click="goUploadPage">去开票</div>
|
||||||
|
</div>
|
||||||
<div v-show="show" class="bgShow">
|
<div v-show="show" class="bgShow">
|
||||||
<img src="@/assets/empty.png">
|
<img src="@/assets/empty.png">
|
||||||
</div>
|
</div>
|
||||||
@ -53,6 +86,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { Decimal } from 'decimal.js';
|
||||||
import {myMixins} from "@/utils/myMixins"
|
import {myMixins} from "@/utils/myMixins"
|
||||||
import {notifyInvoiceList} from "@/api/mine"
|
import {notifyInvoiceList} from "@/api/mine"
|
||||||
export default {
|
export default {
|
||||||
@ -63,14 +97,89 @@ export default {
|
|||||||
notifyList:[],
|
notifyList:[],
|
||||||
pageNum:1,
|
pageNum:1,
|
||||||
pageSize:10,
|
pageSize:10,
|
||||||
|
total: 0,
|
||||||
show:false,
|
show:false,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
|
loading: false,
|
||||||
|
active: 1,
|
||||||
|
status: '',
|
||||||
|
dispatchAppSearchInvoiced: '',
|
||||||
|
batchCode: '',
|
||||||
|
finished: false,
|
||||||
|
checkList: [],
|
||||||
|
supplierId: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
/* totalCount () {
|
||||||
|
let total = 0;
|
||||||
|
this.checkList.map(item => {
|
||||||
|
total += item.invoiceMoney
|
||||||
|
})
|
||||||
|
return total
|
||||||
|
},*/
|
||||||
|
totalCount() {
|
||||||
|
// 使用 Decimal 来计算总金额
|
||||||
|
let total = new Decimal(0);
|
||||||
|
|
||||||
|
this.checkList.forEach(item => {
|
||||||
|
total = total.plus(new Decimal(item.invoiceMoney));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回总金额,保留两位小数
|
||||||
|
return total.toNumber()
|
||||||
|
},
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getNotifyList()
|
this.supplierId = this.$route.query?.supplierId;
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
goUploadPage() {
|
||||||
|
localStorage.setItem('list', JSON.stringify(this.checkList));
|
||||||
|
this.goPage('uploadInvoice', { supplierId : this.supplierId })
|
||||||
|
},
|
||||||
|
async onSearch() {
|
||||||
|
this.pageNum=1
|
||||||
|
await this.getNotifyList()
|
||||||
|
},
|
||||||
|
async getMore(){
|
||||||
|
if ( this.active != 2 ) {
|
||||||
|
await this.getNotifyList()
|
||||||
|
this.pageNum++;
|
||||||
|
// 加载状态结束
|
||||||
|
this.loading = false;
|
||||||
|
// 数据全部加载完成
|
||||||
|
if (this.notifyList.length >= this.total) {
|
||||||
|
this.finished = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeTabHandler() {
|
||||||
|
this.pageNum = 1;
|
||||||
|
this.notifyList = [];
|
||||||
|
this.checkList = [];
|
||||||
|
if (this.active == 1) { // 全部, 需要分页
|
||||||
|
this.status = '';
|
||||||
|
this.dispatchAppSearchInvoiced = '';
|
||||||
|
this.pageSize = 10;
|
||||||
|
} else if(this.active == 2) { // 未开票, 不需要分页
|
||||||
|
this.status = 2;
|
||||||
|
this.dispatchAppSearchInvoiced = '';
|
||||||
|
this.pageSize = 10000
|
||||||
|
} else if(this.active == 3) { // 已开票,需要分页
|
||||||
|
this.status = '';
|
||||||
|
this.dispatchAppSearchInvoiced = 1;
|
||||||
|
this.pageSize = 10
|
||||||
|
}
|
||||||
|
this.getNotifyList()
|
||||||
|
},
|
||||||
|
getMonth(item) {
|
||||||
|
let str = '';
|
||||||
|
let startTime = new Date(item.createTime);
|
||||||
|
let endTime = new Date(item.overTime);
|
||||||
|
str = startTime.getFullYear() + '年' + (startTime.getMonth() + 1 ) + '月 - ' + endTime.getFullYear() + '年' + (endTime.getMonth() + 1) + '月'
|
||||||
|
return str
|
||||||
|
},
|
||||||
onRefresh() {
|
onRefresh() {
|
||||||
this.pageNum=1
|
this.pageNum=1
|
||||||
this.getNotifyList()
|
this.getNotifyList()
|
||||||
@ -81,19 +190,34 @@ export default {
|
|||||||
},
|
},
|
||||||
async getNotifyList(){
|
async getNotifyList(){
|
||||||
let res = await notifyInvoiceList({
|
let res = await notifyInvoiceList({
|
||||||
pageNum:this.pageNum,
|
pageNum:this.pageNum,
|
||||||
pageSize:this.pageSize
|
pageSize:this.pageSize,
|
||||||
|
status: this.status,
|
||||||
|
dispatchAppSearchInvoiced: this.dispatchAppSearchInvoiced,
|
||||||
|
total: this.total,
|
||||||
|
batchCode: this.batchCode,
|
||||||
|
supplierId: this.supplierId,
|
||||||
|
current: 1,
|
||||||
})
|
})
|
||||||
// if(res.code === 0){
|
if(res.code == 200){
|
||||||
this.notifyList=res.data;
|
this.total=res.total
|
||||||
console.log(this.notifyList)
|
if(this.pageNum == 1){
|
||||||
if(this.notifyList.length === 0){
|
this.notifyList=res.data;
|
||||||
this.show=true
|
}else{
|
||||||
|
let preList = this.notifyList;
|
||||||
|
let arr = res.data;
|
||||||
|
this.notifyList = preList.concat(arr)
|
||||||
|
}
|
||||||
|
if (this.notifyList.length === 0) {
|
||||||
|
this.show=true
|
||||||
}else{
|
}else{
|
||||||
this.show=false
|
this.show=false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// },
|
},
|
||||||
|
toggle(index) {
|
||||||
|
this.$refs.checkboxes[index].toggle();
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -101,6 +225,11 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "@/styles/mixin.scss";
|
@import "@/styles/mixin.scss";
|
||||||
@import "@/styles/common.scss";
|
@import "@/styles/common.scss";
|
||||||
|
.van-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
.wrap{
|
.wrap{
|
||||||
@include wh(100%,100%);
|
@include wh(100%,100%);
|
||||||
background-color: #F4F5F7;
|
background-color: #F4F5F7;
|
||||||
@ -113,6 +242,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.itemWrap{
|
.itemWrap{
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
@include wh(100%,194px);
|
@include wh(100%,194px);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 14px 25px 18px 29px;
|
padding: 14px 25px 18px 29px;
|
||||||
@ -125,6 +255,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.line1{
|
.line1{
|
||||||
@ -141,10 +272,52 @@ export default {
|
|||||||
}
|
}
|
||||||
.bgShow{
|
.bgShow{
|
||||||
@include flexTwoCenter;
|
@include flexTwoCenter;
|
||||||
height:calc(100% - 46px);
|
/*height:calc(100% - 46px);*/
|
||||||
background-color: #FAFAFA;
|
background-color: #FAFAFA;
|
||||||
img{
|
img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
.van-tabs {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #2c395f;
|
||||||
|
z-index: 1000000 !important;
|
||||||
|
}
|
||||||
|
.content_wrap {
|
||||||
|
padding-top: 1.17333rem;
|
||||||
|
}
|
||||||
|
.invoice_btn_wrap {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
.invoice_btn_info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.invoice_btn_title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.invoice_btn_money {
|
||||||
|
font-size: 26px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #2C395F;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pd_cls {
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
144
src/views/index/showInvoice.vue
Normal file
144
src/views/index/showInvoice.vue
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="navBar">
|
||||||
|
<van-nav-bar
|
||||||
|
title="查看发票"
|
||||||
|
left-arrow
|
||||||
|
left-arrow-color="#FFFFFF"
|
||||||
|
:border="false"
|
||||||
|
:fixed="true"
|
||||||
|
:safe-area-inset-top="true"
|
||||||
|
@click-left="h5GoBack"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="contentWrap">
|
||||||
|
<div class="content_tab">
|
||||||
|
<div class="tab_content">
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">付款方</div>
|
||||||
|
<div class="item_content">中道汽车救援股份有限公司</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">收款方</div>
|
||||||
|
<div class="item_content">{{invoiceInfo.accountName}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">发票号码</div>
|
||||||
|
<div class="item_content">
|
||||||
|
{{invoiceInfo.invoiceNumber}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">发票金额</div>
|
||||||
|
<div class="item_content">¥{{invoiceInfo.invoiceMoney}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">税率</div>
|
||||||
|
<div class="item_content">{{invoiceInfo.taxRate}}%</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">税额</div>
|
||||||
|
<div class="item_content">{{invoiceInfo.taxAmount}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">未税金额</div>
|
||||||
|
<div class="item_content">{{invoiceInfo.afterTaxAmount}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">发票类型</div>
|
||||||
|
<div class="item_content">{{invoiceInfo.invoiceTypeCodeString}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">开票日期</div>
|
||||||
|
<div class="item_content">{{invoiceInfo.invoiceDate}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_label">发票影像</div>
|
||||||
|
<div class="item_content">
|
||||||
|
<div class="invoice_btn" @click="showInvoiceHandler(invoiceInfo.path)">查看发票</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { myMixins } from "@/utils/myMixins"
|
||||||
|
export default {
|
||||||
|
name: "showInvoice",
|
||||||
|
mixins:[ myMixins ],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
invoiceInfo: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let invoiceDetail = localStorage.getItem('invoiceDetail')
|
||||||
|
this.invoiceInfo = invoiceDetail ? JSON.parse(invoiceDetail) : {};
|
||||||
|
console.log('this.invoiceInfo', this.invoiceInfo)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showInvoiceHandler(path) {
|
||||||
|
window.open(path)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "@/styles/mixin.scss";
|
||||||
|
@import "@/styles/common.scss";
|
||||||
|
.wrap{
|
||||||
|
@include wh(100%,100%);
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
}
|
||||||
|
.navBar{
|
||||||
|
height: 46px;
|
||||||
|
}
|
||||||
|
.contentWrap{
|
||||||
|
.mt_cls {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.content_tab {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 15px;
|
||||||
|
.tab_title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.tab_content {
|
||||||
|
.item_wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
.item_label {
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
margin-right: 5px;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
.item_content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.copyIcon {
|
||||||
|
width: 35px;
|
||||||
|
height: 15px;
|
||||||
|
margin-left: 10px
|
||||||
|
}
|
||||||
|
.invoice_btn {
|
||||||
|
padding: 0 15px;
|
||||||
|
background-color: #354D93;
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 28px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
589
src/views/index/uploadInvoice.vue
Normal file
589
src/views/index/uploadInvoice.vue
Normal file
@ -0,0 +1,589 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="navBar">
|
||||||
|
<van-nav-bar
|
||||||
|
title="上传发票"
|
||||||
|
left-arrow
|
||||||
|
left-arrow-color="#FFFFFF"
|
||||||
|
:border="false"
|
||||||
|
:fixed="true"
|
||||||
|
:safe-area-inset-top="true"
|
||||||
|
@click-left="h5GoBack"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="contentWrap">
|
||||||
|
<div class="content_top">
|
||||||
|
<div class="content_tip">【注】如结算金额确认无误后,请开具正规增值税专用发票(开票项为:施救费、救授费、拖车费、帝引费任选其一)。如有路桥费产生,请开在救援发票中。</div>
|
||||||
|
<div class="top_detail">
|
||||||
|
<div class="detail_title detail_color">
|
||||||
|
<div class="title"> <span class="squire"></span> 应开金额</div>
|
||||||
|
<div class="money">¥{{ invoiceTotal }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
<div class="detail_content" v-for="(item, index) in list" :key="index + '_1'">
|
||||||
|
<div class="content_item">
|
||||||
|
{{item.batchCode}}
|
||||||
|
<span class="content_money">¥{{item.invoiceMoney}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_top mt10">
|
||||||
|
<div class="detail_title detail_color2 pd_no">
|
||||||
|
<div class="title"> <span class="squire squire2"></span> 实开金额</div>
|
||||||
|
<div class="money">¥{{ invoiceMoney || 0 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
<div class="invoice_wrap mt10" v-for="(item, index) in tableData" :key="index" @click="goInvoiceDetail(item)">
|
||||||
|
<div class="invoice_title">
|
||||||
|
<div>{{item.accountName}}</div>
|
||||||
|
<div class="btn_del" @click.stop="deleteHandler(item)">删除</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
<div class="invoice_content">
|
||||||
|
<div>
|
||||||
|
<span class="label">发票号码:</span>
|
||||||
|
<span>{{item.invoiceNumber}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="label">发票金额:</span>
|
||||||
|
<span class="invoice_money">¥{{item.invoiceMoney}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="invoice_flex">
|
||||||
|
<div>
|
||||||
|
<span class="label">开票日期:</span>
|
||||||
|
<span>{{item.invoiceDate}}</span>
|
||||||
|
</div>
|
||||||
|
<van-icon class="icon" name="arrow" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="upload_btn_wrap">
|
||||||
|
<div class="btn_save" @click="createInvoiceHandler">保存</div>
|
||||||
|
<van-uploader :before-read="beforeRead" :after-read="afterRead" accept=".png,.jpg,.jpeg,.pdf,.ofd">
|
||||||
|
<div class="btn_upload">
|
||||||
|
<img class="icon_upload" src="@/assets/icon_upload.png" alt="">
|
||||||
|
上传发票
|
||||||
|
</div>
|
||||||
|
</van-uploader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Dialog } from "vant";
|
||||||
|
import { myMixins } from "@/utils/myMixins"
|
||||||
|
import { uploadInvoice, getBillingInfo, deleteInvoice, createBatch } from "@/api/mine"
|
||||||
|
export default {
|
||||||
|
name: "uploadInvoice",
|
||||||
|
mixins:[ myMixins ],
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
invoiceMoneyTotal: 0,
|
||||||
|
tableData: [],
|
||||||
|
activeObj: {},
|
||||||
|
billInfo: {},
|
||||||
|
supplierId: '',
|
||||||
|
queryId: '',
|
||||||
|
batchIds: [],
|
||||||
|
shouldRate: '',
|
||||||
|
realRate: '',
|
||||||
|
invoiceType: '',
|
||||||
|
invoiceMoney: 0,
|
||||||
|
afterTaxAmount: 0,
|
||||||
|
form: {
|
||||||
|
courierNumber: '',
|
||||||
|
invoiceType: '', //电子发票还是纸质发票
|
||||||
|
},
|
||||||
|
show: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
await this.initData();
|
||||||
|
},
|
||||||
|
async activated() {
|
||||||
|
await this.initData();
|
||||||
|
this.show = true;
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
tableData: {
|
||||||
|
immediate: true,
|
||||||
|
handler() {
|
||||||
|
this.getInvoiceMoney()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
invoiceTotal () {
|
||||||
|
let total = 0;
|
||||||
|
this.list?.map(item => {
|
||||||
|
total += item.invoiceMoney
|
||||||
|
})
|
||||||
|
return total
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deactivated() {
|
||||||
|
if (this.show) {
|
||||||
|
this.tableData = [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async initData() {
|
||||||
|
this.list = JSON.parse(localStorage.getItem('list'));
|
||||||
|
this.batchIds = [];
|
||||||
|
this.list.map(a => {
|
||||||
|
this.batchIds.push(a.id)
|
||||||
|
})
|
||||||
|
console.log('this.batchIds', this.batchIds)
|
||||||
|
this.shouldRate = this.list[0]?.shouldRate
|
||||||
|
this.realRate = this.list[0]?.realRate
|
||||||
|
this.invoiceType = this.list[0]?.invoiceType
|
||||||
|
this.supplierId = this.list[0]?.supplierId
|
||||||
|
await this.getInfo();
|
||||||
|
},
|
||||||
|
async getInfo() {
|
||||||
|
if(this.supplierId) {
|
||||||
|
let res = await getBillingInfo('/supplier/info/billing/getBySupplierId/' + this.supplierId )
|
||||||
|
this.billInfo = res.data || {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async createInvoiceHandler() {
|
||||||
|
if ( !this.form.invoiceType ) {
|
||||||
|
this.$toast('发票类型不能为空!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.invoiceTotal != this.invoiceMoney) {
|
||||||
|
this.$toast('“应开金额”与“实开金额”不一致,请核实系统的开票金额与实际开出的发票金额。')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(this.form.invoiceType == 2){
|
||||||
|
Dialog.confirm({
|
||||||
|
title: '提示',
|
||||||
|
message: '纸质发票上传后请尽快邮寄,并在系统《开票信息》菜单,录入快递单号,以免影响结算时效!谢谢!',
|
||||||
|
}).then(async () => {
|
||||||
|
await this.saveHandle();
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await this.saveHandle();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async saveHandle() {
|
||||||
|
let paramsArr = this.getParams();
|
||||||
|
console.log('.......', paramsArr)
|
||||||
|
try {
|
||||||
|
this.loading = true;
|
||||||
|
let res = await createBatch({
|
||||||
|
supplierId: this.supplierId,
|
||||||
|
batchIds: this.batchIds,
|
||||||
|
detailList: paramsArr
|
||||||
|
})
|
||||||
|
console.log('res', res)
|
||||||
|
this.loading = false;
|
||||||
|
Dialog.alert({
|
||||||
|
title: '提示',
|
||||||
|
message: `发票已上传成功,待审核。开票编号为:${res.data},请前往菜单【开票信息】中查看。`,
|
||||||
|
}).then(() => {
|
||||||
|
this.h5GoBack()
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.log('eee', e)
|
||||||
|
Dialog.alert({
|
||||||
|
title: '提示',
|
||||||
|
message: e + '发票提交出错',
|
||||||
|
}).then(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
}finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getParams() {
|
||||||
|
let params = [...this.tableData]
|
||||||
|
if(params.length > 0) {
|
||||||
|
params.map(item => {
|
||||||
|
item.courierNumber = (this.form.invoiceType == 2 ? this.form.courierNumber : '')
|
||||||
|
item.invoiceType = this.form.invoiceType
|
||||||
|
if( item.taxRate.toString().indexOf('%') != -1 ) {
|
||||||
|
let tempRate = item.taxRate.replace('%', '');
|
||||||
|
item.taxRate = (Number(tempRate) / 100)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return params
|
||||||
|
},
|
||||||
|
deleteHandler( row ) { // 删除发票
|
||||||
|
Dialog.confirm({
|
||||||
|
title: '提示',
|
||||||
|
message: '确认要删除发票信息吗?',
|
||||||
|
}).then(async () => {
|
||||||
|
await deleteInvoice({
|
||||||
|
id: row?.id || '',
|
||||||
|
path: row?.path
|
||||||
|
});
|
||||||
|
let index = this.tableData.findIndex(a => a.invoiceNumber == row.invoiceNumber)
|
||||||
|
this.tableData.splice(index, 1)
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeRead (file) {
|
||||||
|
const FileExt = file.name.replace(/.+\./, "");
|
||||||
|
if (['jpg', 'png', 'jpeg', 'pdf', 'ofd'].indexOf(FileExt.toLowerCase()) === -1) {
|
||||||
|
this.$toast('请上传后缀名为jpg、jpeg、png、pdf、ofd的文件!')
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.$set(this.activeObj, 'fileType', FileExt)
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
async afterRead (file) {
|
||||||
|
try {
|
||||||
|
var formData = new FormData(); // 创建form对象
|
||||||
|
formData.append('file', file.file); // 通过append向form对象添加数据
|
||||||
|
formData.append('supplierId', this.supplierId) // 如果还需要传替他参数的话
|
||||||
|
let res = await uploadInvoice(formData)
|
||||||
|
console.log('rrerer', res)
|
||||||
|
if( res?.code == 200 ) {
|
||||||
|
let test = this.tableData.filter(item => item.invoiceNumber == res.data.ocrInvoiceRes.data.invoiceNumber) // 如果
|
||||||
|
if( test.length > 0 ) { // 发票是否已经上传过
|
||||||
|
this.$message.warning("该发票已上传,不能重复上传")
|
||||||
|
return false
|
||||||
|
} else {
|
||||||
|
|
||||||
|
let invoiceDetails = this.getInvoiceRates(res.data.ocrInvoiceRes.data.invoiceDetails)
|
||||||
|
let flag = this.legalRate(invoiceDetails)
|
||||||
|
let realFlag = this.realRateCheck(invoiceDetails)
|
||||||
|
let errorStr = "";
|
||||||
|
//电子发票,验证必须是pdf版本
|
||||||
|
if((res.data.ocrInvoiceRes.data.invoiceType.indexOf("数电") != -1 || res.data.ocrInvoiceRes.data.invoiceType.indexOf("电子") != -1) && this.activeObj.fileType != 'pdf'){
|
||||||
|
errorStr = errorStr + "电票请上传PDF格式的文件;"
|
||||||
|
}
|
||||||
|
if(res.data.ocrInvoiceRes.data.invoiceType.indexOf("专用发票") == -1 && this.invoiceType == 1){
|
||||||
|
errorStr = errorStr + "上传发票类型与服务商配置发票类型不一致,设置类型为:专票;";
|
||||||
|
}
|
||||||
|
if(!this.billInfo.unitName ){
|
||||||
|
errorStr = errorStr + "未设置抬头,请联系区域经理;";
|
||||||
|
}
|
||||||
|
if(!this.billInfo.dutyParagraph ){
|
||||||
|
errorStr = errorStr + "未设置纳税人识别号,请联系区域经理;";
|
||||||
|
}
|
||||||
|
let ocrName = res.data.ocrInvoiceRes.data.sellerName.replace('(','').replace('(','').replace(')','').replace(')','');
|
||||||
|
let billName = ''
|
||||||
|
if (this.billInfo && this.billInfo.unitName) {
|
||||||
|
billName = this.billInfo.unitName.replace('(','').replace('(','').replace(')','').replace(')','');
|
||||||
|
}
|
||||||
|
let diffNumber = this.charDifference(ocrName,billName);
|
||||||
|
if(ocrName != billName && diffNumber > 2 && !res.data.ocrInvoiceRes.data.sellerName.startsWith("国家税务总局")){
|
||||||
|
errorStr = errorStr + "上传发票抬头与服务商配置不一致,设置抬头为:" + (this.billInfo.unitName || '未设置') + ",识别抬头为:" + res.data.ocrInvoiceRes.data.sellerName + ";如发票确认无误,请联系结算部:021-53682525";
|
||||||
|
}
|
||||||
|
|
||||||
|
if( !flag ) {
|
||||||
|
Dialog.alert({
|
||||||
|
title: '提示',
|
||||||
|
message: '您上传的发票税率不符合要求',
|
||||||
|
}).then(() => {
|
||||||
|
this.uploadLoading=false;
|
||||||
|
return false
|
||||||
|
});
|
||||||
|
}else if(!realFlag){
|
||||||
|
Dialog.alert({
|
||||||
|
title: '提示',
|
||||||
|
message: "您上传的发票税率与服务商配置税率不一致,设置税率为:" + this.realRate + "%"
|
||||||
|
}).then(() => {
|
||||||
|
this.uploadLoading=false;
|
||||||
|
return false
|
||||||
|
});
|
||||||
|
}else if(errorStr && errorStr.length > 0){
|
||||||
|
Dialog.alert({
|
||||||
|
title: '提示',
|
||||||
|
message: errorStr,
|
||||||
|
}).then(() => {
|
||||||
|
this.uploadLoading=false;
|
||||||
|
return false
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log('res', res)
|
||||||
|
console.log('file', file)
|
||||||
|
this.form.invoiceType = res.data.ocrInvoiceRes.data.invoiceType.indexOf("数电") == -1 && res.data.ocrInvoiceRes.data.invoiceType.indexOf("电子") == -1 ? 2 : 1
|
||||||
|
let isOrdinaryInvoice = res.data.ocrInvoiceRes.data.invoiceType.indexOf("普通") > -1
|
||||||
|
this.$set(this.activeObj, 'imageUrl', '')
|
||||||
|
this.$set(this.activeObj, 'fileName', '')
|
||||||
|
if (['pdf','ofd'].indexOf(this.activeObj.fileType) === -1) {
|
||||||
|
// this.activeObj.imageUrl = URL.createObjectURL(file.raw);
|
||||||
|
this.activeObj.imageUrl = res.data.url
|
||||||
|
this.$set(this.activeObj, 'fileName', file.file.name)
|
||||||
|
} else {
|
||||||
|
this.$set(this.activeObj, 'fileName', file.file.name)
|
||||||
|
}
|
||||||
|
this.$set(this.activeObj, 'path', res.data.url)
|
||||||
|
this.$set(this.activeObj, 'invoiceNumber', res.data.ocrInvoiceRes.data.invoiceNumber)
|
||||||
|
this.$set(this.activeObj, 'accountName', res.data.ocrInvoiceRes.data.sellerName)
|
||||||
|
this.$set(this.activeObj, 'invoiceMoney', res.data.ocrInvoiceRes.data.totalAmount)
|
||||||
|
this.$set(this.activeObj, 'taxRate',isOrdinaryInvoice?0: res.data.ocrInvoiceRes.data.invoiceDetails[0].taxRate)
|
||||||
|
this.$set(this.activeObj, 'taxAmount',isOrdinaryInvoice?0: res.data.ocrInvoiceRes.data.invoiceTax)
|
||||||
|
this.$set(this.activeObj, 'afterTaxAmount',isOrdinaryInvoice?res.data.ocrInvoiceRes.data.totalAmount: res.data.ocrInvoiceRes.data.invoiceAmountPreTax)
|
||||||
|
this.$set(this.activeObj, 'invoiceDate', res.data.ocrInvoiceRes.data.invoiceDate)
|
||||||
|
this.$set(this.activeObj, 'invoiceCode', res.data.ocrInvoiceRes.data.invoiceCode)
|
||||||
|
this.$set(this.activeObj, 'invoiceTypeCodeString', res.data.ocrInvoiceRes.data.invoiceType)
|
||||||
|
this.$set(this.activeObj, 'payName', res.data.ocrInvoiceRes.data.purchaserName)
|
||||||
|
this.tableData.push({...this.activeObj})
|
||||||
|
this.$forceUpdate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log('eeee', e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goInvoiceDetail (item) {
|
||||||
|
localStorage.setItem('invoiceDetail', JSON.stringify(item))
|
||||||
|
this.show = false;
|
||||||
|
this.goPage('showInvoice')
|
||||||
|
},
|
||||||
|
getInvoiceMoney() {
|
||||||
|
let invoiceMoney = 0;
|
||||||
|
let afterTaxAmount = 0;
|
||||||
|
if( this.tableData.length > 0){
|
||||||
|
this.tableData.map(item => {
|
||||||
|
if( item.invoiceMoney && item.afterTaxAmount ) {
|
||||||
|
invoiceMoney += (Number(item.invoiceMoney) * 100)
|
||||||
|
afterTaxAmount += ( Number(item.afterTaxAmount) * 100 )
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.invoiceMoney = invoiceMoney != 0 ? (invoiceMoney / 100) : 0
|
||||||
|
this.afterTaxAmount = afterTaxAmount != 0 ? ( afterTaxAmount / 100 ) : 0
|
||||||
|
} else {
|
||||||
|
this.invoiceMoney = invoiceMoney
|
||||||
|
this.afterTaxAmount = afterTaxAmount
|
||||||
|
}
|
||||||
|
},
|
||||||
|
charDifference(str1,str2) {
|
||||||
|
let difference = 0;
|
||||||
|
// 遍历字符串1的每个字符
|
||||||
|
for (let i = 0; i < str1.length; i++) {
|
||||||
|
// 如果字符串2中不包含当前字符,或者位置不对,则误差加1
|
||||||
|
if (str2.indexOf(str1[i]) === -1 || str2[i] !== str1[i]) {
|
||||||
|
difference++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//如果前面部分都对得上,但是长度不同,则差异是长度
|
||||||
|
if(str1.length != str2.length){
|
||||||
|
difference += Math.abs(str1.length - str2.length)
|
||||||
|
}
|
||||||
|
// 同样遍历字符串2,处理字符串1中不存在的字符
|
||||||
|
/*for (let i = 0; i < str2.length; i++) {
|
||||||
|
if (str1.indexOf(str2[i]) === -1) {
|
||||||
|
difference++;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
return difference;
|
||||||
|
},
|
||||||
|
legalRate(rateList) { // 合法的 税率
|
||||||
|
let rate = rateList[0]
|
||||||
|
let flag = rateList.every(item => {
|
||||||
|
//设置的是普票,不校验税率
|
||||||
|
if(this.invoiceType == 2 && item != '免税' && item != '0%'){
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return item == rate && ['1%', '3%', '6%', '9%', '13%'].includes(item)
|
||||||
|
})
|
||||||
|
console.log('flag', flag)
|
||||||
|
return flag
|
||||||
|
},
|
||||||
|
realRateCheck(rateList) { // 和设置的税率是否符合
|
||||||
|
let rate = rateList[0]
|
||||||
|
let flag = rateList.every(item => {
|
||||||
|
//设置的是普票,不校验税率
|
||||||
|
if(this.invoiceType == 2 && item != '免税' && item != '0%'){
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return item == rate && this.realRate + '%' == item
|
||||||
|
})
|
||||||
|
console.log('flag', flag)
|
||||||
|
return flag
|
||||||
|
},
|
||||||
|
getInvoiceRates(invoiceDetails) { // 获取发票详情的税率数组
|
||||||
|
let rates = [];
|
||||||
|
invoiceDetails.map(item => {
|
||||||
|
rates.push(item.taxRate)
|
||||||
|
})
|
||||||
|
return rates
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "@/styles/mixin.scss";
|
||||||
|
@import "@/styles/common.scss";
|
||||||
|
.wrap{
|
||||||
|
@include wh(100%,100%);
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.navBar{
|
||||||
|
height: 46px;
|
||||||
|
}
|
||||||
|
.mt10 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.contentWrap {
|
||||||
|
padding-bottom: 70px;
|
||||||
|
.content_top {
|
||||||
|
padding: 15px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
.content_tip {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.top_detail {
|
||||||
|
.detail_content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
.content_item {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
line-height: 27px;
|
||||||
|
.content_money {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #D48139;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail_title {
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.money {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.detail_color {
|
||||||
|
color: #D48139;
|
||||||
|
}
|
||||||
|
.detail_color2 {
|
||||||
|
color: #FF5D2E;
|
||||||
|
}
|
||||||
|
.pd_no {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.squire {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #D48139;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.squire2 {
|
||||||
|
background-color: #FF5D2E;
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
opacity: 0.16;
|
||||||
|
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice_wrap {
|
||||||
|
background-color: #F4FAFF;
|
||||||
|
padding: 11px 3px 15px 18px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #EBF2F7;
|
||||||
|
.invoice_title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(50, 54, 67, 0.76);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.btn_del {
|
||||||
|
width: 48px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #DDDDDD;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.7);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.invoice_content {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-right: 12px;
|
||||||
|
color: #000;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
.label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.invoice_money {
|
||||||
|
color: #FF5D2E;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upload_btn_wrap {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 15px 30px;
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 40px;
|
||||||
|
background: #FBFBFB;
|
||||||
|
box-shadow: 0px -1px 20px 4px rgba(98,107,128,0.2);
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_save {
|
||||||
|
background: #354D93;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.btn_upload {
|
||||||
|
background: #354D93;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
.icon_upload {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.invoice_flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
::v-deep .van-uploader__input-wrapper {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
</style>
|
@ -40,6 +40,20 @@
|
|||||||
accept="image "
|
accept="image "
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="itemContent">
|
||||||
|
<div class="titleType">
|
||||||
|
<img class="startImg" src="@/assets/start.png" />
|
||||||
|
<span>行驶证车辆照片页</span>
|
||||||
|
</div>
|
||||||
|
<van-uploader
|
||||||
|
v-model="vehicleLicenseCarPhotoList"
|
||||||
|
:after-read="vehicleLicenseCarHandler"
|
||||||
|
:max-size="5 * 1024 * 1024"
|
||||||
|
max-count="1"
|
||||||
|
:preview-size="54"
|
||||||
|
accept="image "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div class="itemContent">
|
<div class="itemContent">
|
||||||
<div class="titleType">
|
<div class="titleType">
|
||||||
<img class="startImg" src="@/assets/start.png" />
|
<img class="startImg" src="@/assets/start.png" />
|
||||||
@ -146,9 +160,11 @@ export default {
|
|||||||
imageUrl: require('@/assets/arr_right.png'),
|
imageUrl: require('@/assets/arr_right.png'),
|
||||||
vehicleLicenseFrontList: [],
|
vehicleLicenseFrontList: [],
|
||||||
vehicleLicenseBackList: [],
|
vehicleLicenseBackList: [],
|
||||||
|
vehicleLicenseCarPhotoList: [],
|
||||||
vehicleFrontPhotoList: [],
|
vehicleFrontPhotoList: [],
|
||||||
vehicleLicenseFront: '', // 行驶证首页
|
vehicleLicenseFront: '', // 行驶证首页
|
||||||
vehicleLicenseBack: '', // 行驶证副页
|
vehicleLicenseBack: '', // 行驶证副页
|
||||||
|
vehicleLicenseCarPhoto: '', // 行驶证车辆照片
|
||||||
vehicleFrontPhoto: '', // 车头照
|
vehicleFrontPhoto: '', // 车头照
|
||||||
vehicleLicenseInfo: {},
|
vehicleLicenseInfo: {},
|
||||||
vehicleLicenseBackOcrFlag: false, // 行驶证副页 修改时默认不需要 ocr识别
|
vehicleLicenseBackOcrFlag: false, // 行驶证副页 修改时默认不需要 ocr识别
|
||||||
@ -182,6 +198,12 @@ export default {
|
|||||||
this.vehicleLicenseBack = res.data;
|
this.vehicleLicenseBack = res.data;
|
||||||
await this.vehicleBackOcrHandler();
|
await this.vehicleBackOcrHandler();
|
||||||
},
|
},
|
||||||
|
async vehicleLicenseCarHandler(file) { // 上传 行驶证车辆照片
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("file" , file.file);
|
||||||
|
let res = await uploadImage(formData);
|
||||||
|
this.vehicleLicenseCarPhoto = res.data;
|
||||||
|
},
|
||||||
async vehicleFrontPhotoHandler(file) { // 上传 车头照
|
async vehicleFrontPhotoHandler(file) { // 上传 车头照
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append("file" , file.file);
|
formData.append("file" , file.file);
|
||||||
@ -287,9 +309,19 @@ export default {
|
|||||||
this.vehicleLicenseBack = result.vehicleLicenseBack;
|
this.vehicleLicenseBack = result.vehicleLicenseBack;
|
||||||
this.vehicleFrontPhoto = result.vehicleFrontPhoto;
|
this.vehicleFrontPhoto = result.vehicleFrontPhoto;
|
||||||
this.vehicleLicenseInfo = result.vehicleLicenseInfo;
|
this.vehicleLicenseInfo = result.vehicleLicenseInfo;
|
||||||
this.vehicleLicenseFrontList = [{ url : this.vehicleLicenseFront }];
|
this.vehicleLicenseCarPhoto = result.vehicleLicenseCarPhoto;
|
||||||
this.vehicleLicenseBackList = [{ url : this.vehicleLicenseBack }];
|
if( this.vehicleLicenseFront ) {
|
||||||
this.vehicleFrontPhotoList = [{ url : this.vehicleFrontPhoto }];
|
this.vehicleLicenseFrontList = [{ url : this.vehicleLicenseFront }];
|
||||||
|
}
|
||||||
|
if(this.vehicleLicenseBack) {
|
||||||
|
this.vehicleLicenseBackList = [{ url : this.vehicleLicenseBack }];
|
||||||
|
}
|
||||||
|
if(this.vehicleFrontPhoto) {
|
||||||
|
this.vehicleFrontPhotoList = [{ url : this.vehicleFrontPhoto }];
|
||||||
|
}
|
||||||
|
if(this.vehicleLicenseCarPhoto) {
|
||||||
|
this.vehicleLicenseCarPhotoList = [{ url : this.vehicleLicenseCarPhoto }];
|
||||||
|
}
|
||||||
},
|
},
|
||||||
isChange(e){
|
isChange(e){
|
||||||
this.isJoin=e
|
this.isJoin=e
|
||||||
@ -303,6 +335,10 @@ export default {
|
|||||||
this.$toast('行驶证副页照片不能为空')
|
this.$toast('行驶证副页照片不能为空')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if( !this.vehicleLicenseCarPhoto ) {
|
||||||
|
this.$toast('行驶证车辆照片页不能为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
if( !this.vehicleLicenseBack ) {
|
if( !this.vehicleLicenseBack ) {
|
||||||
this.$toast('车头照片不能为空')
|
this.$toast('车头照片不能为空')
|
||||||
return
|
return
|
||||||
@ -325,6 +361,7 @@ export default {
|
|||||||
vehicleLicenseBack: this.vehicleLicenseBack,
|
vehicleLicenseBack: this.vehicleLicenseBack,
|
||||||
vehicleFrontPhoto: this.vehicleFrontPhoto,
|
vehicleFrontPhoto: this.vehicleFrontPhoto,
|
||||||
vehicleLicenseInfo: this.vehicleLicenseInfo,
|
vehicleLicenseInfo: this.vehicleLicenseInfo,
|
||||||
|
vehicleLicenseCarPhoto: this.vehicleLicenseCarPhoto,
|
||||||
})
|
})
|
||||||
if(this.id){
|
if(this.id){
|
||||||
this.$toast('修改成功')
|
this.$toast('修改成功')
|
||||||
|
@ -70,18 +70,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="serviceInfo common">
|
<div class="serviceInfo common" v-if="orderDetailInfo.batteryNo">
|
||||||
<div class="title">电瓶信息:</div>
|
<div class="title">电瓶信息:</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="infoContent">
|
<div class="infoContent">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span class="leftTitle fontColor">设备号:</span><span class="rightContent"></span>
|
<span class="leftTitle fontColor">设备号:</span><span class="rightContent">{{orderDetailInfo?.batteryNo}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span class="leftTitle fontColor">品牌:</span><span class="rightContent"></span>
|
<span class="leftTitle fontColor">品牌:</span><span class="rightContent">{{orderDetailInfo?.batteryBrand}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span class="leftTitle fontColor">型号:</span><span class="rightContent"></span>
|
<span class="leftTitle fontColor">型号:</span><span class="rightContent">{{orderDetailInfo?.batteryModel}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
13
src/views/invoice/invoiceIndex.vue
Normal file
13
src/views/invoice/invoiceIndex.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap">票务首页</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "invoiceIndex"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -13,6 +13,19 @@
|
|||||||
<template slot-scope="scope">{{scope.row[item.prop]}} </template>
|
<template slot-scope="scope">{{scope.row[item.prop]}} </template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- <template v-else-if="active===4">
|
||||||
|
<el-table-column v-for="(column,index) in filteredLabelList" :key="column.prop" :prop="column.prop" :label="column.label"
|
||||||
|
:fixed="index===0" align="center" min-width="100"
|
||||||
|
:width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="column.label === '师傅姓名'">
|
||||||
|
{{ scope.row[column.prop] }}
|
||||||
|
<span style=" color: #FFBA00;" v-if="scope.row.starRank"><i class="el-icon-star-on star"></i>{{scope.row.starRank}}</span>
|
||||||
|
</span>
|
||||||
|
<span v-else>{{ scope.row[column.prop] }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>-->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
|
<el-table-column v-for="column in labelList" :key="column.prop" :prop="column.prop" :label="column.label"
|
||||||
align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
|
align="center" min-width="100" :width="(isMobile && (column.label=='案件编号' || column.label=='服务内容')) ? 70 : 'auto'">
|
||||||
@ -31,6 +44,14 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
/* filteredLabelList() {
|
||||||
|
if(this.active!==4){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return this.labelList.filter(column => column.label !== '星级评分');
|
||||||
|
}*/
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setTableCellStyle({ row, column,columnIndex }) {
|
setTableCellStyle({ row, column,columnIndex }) {
|
||||||
// 月总表格被转置,原始方法失效,重新定义对比
|
// 月总表格被转置,原始方法失效,重新定义对比
|
||||||
|
@ -2,14 +2,21 @@
|
|||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div v-if="isMobile" class="headWrap">
|
<div v-if="isMobile" class="headWrap">
|
||||||
<div class="title">KPI.数据看板</div>
|
<div class="title">KPI.数据看板</div>
|
||||||
<div class="titleName">{{ current }}月-{{supplierName}}</div>
|
<div class="titleName">{{ current }}-{{supplierName}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')">
|
<div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')">
|
||||||
<div class="empty" v-if="isZd==1"></div>
|
<div class="empty" v-if="isZd==1"></div>
|
||||||
<div class="title">KPI.数据看板<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}月</span></div>
|
<div class="title">KPI.数据看板<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}</span></div>
|
||||||
<!-- 只有中道账号才显示搜索框 -->
|
<!-- 只有中道账号才显示搜索框 -->
|
||||||
<div class="searchWrap" v-if="isZd==1">
|
<div class="searchWrap" v-if="isZd==1">
|
||||||
<span class="month">{{ current }}月</span>
|
<el-date-picker
|
||||||
|
v-model="current"
|
||||||
|
type="month"
|
||||||
|
:clearable="false"
|
||||||
|
class="month custom-date-picker"
|
||||||
|
@change="monthChangeHandle"
|
||||||
|
placeholder="选择月">
|
||||||
|
</el-date-picker>
|
||||||
<el-select
|
<el-select
|
||||||
v-model="supplierId"
|
v-model="supplierId"
|
||||||
filterable
|
filterable
|
||||||
@ -18,7 +25,7 @@
|
|||||||
clearable
|
clearable
|
||||||
placeholder="请输入后选择"
|
placeholder="请输入后选择"
|
||||||
:remote-method="remoteMethod"
|
:remote-method="remoteMethod"
|
||||||
@change="selectSupplierNameHanldle"
|
@change="selectSupplierNameHandle"
|
||||||
:loading="selectLoading">
|
:loading="selectLoading">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in selectOption"
|
v-for="item in selectOption"
|
||||||
@ -27,20 +34,20 @@
|
|||||||
:value="item.id">
|
:value="item.id">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<!-- <i class="el-icon-search" @click="searchHandle"></i>-->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<van-tabs v-model="active" sticky @click="onClick">
|
<van-tabs v-model="active" sticky @click="tabClickHandle">
|
||||||
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
|
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
|
||||||
<div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
|
<div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
|
||||||
<div v-if="isMobile && !([8,9].includes(active))" class="tipArrow right">>>></div>
|
<div v-if="isMobile && !([7,8].includes(active))" class="tipArrow right">>>></div>
|
||||||
</van-tabs>
|
</van-tabs>
|
||||||
<div v-loading="loadingData" :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
|
<div v-loading="loadingData" :class="{'contentWrap':true,'webcontentWrap':!isMobile}" v-if="active===0">
|
||||||
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
<div :class="{'reciceOrder':true,'webCom':!isMobile}">
|
||||||
<div :class="{'title':true,'webTitle':!isMobile}">接单指标</div>
|
<div :class="{'title':true,'webTitle':!isMobile}">接单指标</div>
|
||||||
<div class="reciceOrderIWrap">
|
<div class="reciceOrderIWrap">
|
||||||
<div class="left common">
|
<div class="left common">
|
||||||
<div class="num">{{ indexData && indexData.receiveOrderCount }}</div>
|
<!-- indexData && -->
|
||||||
|
<div class="num">{{ formatCurrency(indexData?.receiveOrderCount) }}</div>
|
||||||
<div class="itemTitle">承接案件量</div>
|
<div class="itemTitle">承接案件量</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center common" @click="clickJumpHandle(5)">
|
<div class="center common" @click="clickJumpHandle(5)">
|
||||||
@ -97,12 +104,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
|
<div :class="{'reciceOrder':true,'webCom':!isMobile,'store':isMobile}">
|
||||||
<div class="scoreTitle">
|
<div class="scoreTitle">
|
||||||
<span class="title">综合打分</span>
|
<div>
|
||||||
|
<span class="title" style="margin-right: 15px">综合打分</span>
|
||||||
|
<el-button v-if="!isMobile && isBtn && supplierId" size="mini" type="primary" @click="applicateHandle">信息变更申请</el-button>
|
||||||
|
</div>
|
||||||
<i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
|
<i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="storeWrap" v-if="indexData">
|
<div class="storeWrap" v-if="indexData">
|
||||||
<circle-char v-if="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
|
<circle-char v-show="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
|
||||||
<div v-else class="detailScore">
|
<div v-show="!showScoreChart" class="detailScore">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div>
|
<div>
|
||||||
<span class="defen">接单得分:</span>
|
<span class="defen">接单得分:</span>
|
||||||
@ -111,7 +121,7 @@
|
|||||||
<span class="defen">接单时效得分:</span>
|
<span class="defen">接单时效得分:</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="defen">到达时效得分:</span>
|
<span class="defen">接单时效得分:</span>
|
||||||
</div>
|
</div>
|
||||||
<div><span class="defen">聚合成功率得分:</span>
|
<div><span class="defen">聚合成功率得分:</span>
|
||||||
</div>
|
</div>
|
||||||
@ -135,13 +145,13 @@
|
|||||||
<div> <span>{{ indexData.polymerizationSuccessScore }}</span></div>
|
<div> <span>{{ indexData.polymerizationSuccessScore }}</span></div>
|
||||||
<div> <span>{{ indexData.appUseScore }}</span></div>
|
<div> <span>{{ indexData.appUseScore }}</span></div>
|
||||||
<div> <span>{{ indexData.urgeScore }}</span></div>
|
<div> <span>{{ indexData.urgeScore }}</span></div>
|
||||||
<div><span>{{ indexData.complainScore }}</span></div>
|
<div><span>{{ indexData.urgeScore }}</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div :class="{'allDataChartWrap':true,'webComAllData':!isMobile,'store':isMobile}">
|
||||||
|
<div class="allDataChart" id="allDataChart" ></div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isMobile" style="padding: 20px"></div>
|
<div v-if="isMobile" style="padding: 20px"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -192,8 +202,8 @@
|
|||||||
<noFit-table v-else :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
<noFit-table v-else :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[2,3,4].includes(active)">
|
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[2].includes(active)">
|
||||||
<div class="searchDriverName" v-if="[3,4].includes(active)">
|
<div class="searchDriverName" v-if="[5,4].includes(active)">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="driverName"
|
v-model="driverName"
|
||||||
filterable
|
filterable
|
||||||
@ -215,12 +225,12 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div :class="{'tabWrap':true,'webTabWrap':!isMobile,'mobileTab':isMobile}">
|
<div :class="{'tabWrap':true,'webTabWrap':!isMobile,'mobileTab':isMobile}">
|
||||||
<div v-for="(item,index) in (active===3 ? driverList : list)" :class="activeIndex===index ? 'active' : ''"
|
<div v-for="(item,index) in (active===4 ? driverList : list)" :class="activeIndex===index ? 'active' : ''"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="changeTab(index)">{{ item.name }}
|
@click="changeTab(index)">{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="{'comTab':true}">
|
<div :class="{'comTab':active !== 4,'comTabActive3':active === 4}">
|
||||||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"></noFit-table>
|
||||||
</div>
|
</div>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
@ -235,22 +245,13 @@
|
|||||||
:total="total">
|
:total="total">
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[5,6,7,8,9].includes(active)">
|
<div v-loading="loadingData" class="contentWrap monthTotal" v-if="[3,4,5,6,7,8].includes(active)">
|
||||||
<div :class="{'comTab':true,'detailTable':isMobile}">
|
<div :class="{'comTab':true,'detailTable':isMobile}">
|
||||||
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
|
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
|
||||||
></noFit-table>
|
></noFit-table>
|
||||||
</div>
|
</div>
|
||||||
<!-- <el-pagination
|
|
||||||
small
|
|
||||||
:current-page.sync="pageNum"
|
|
||||||
:page-size.sync="pageSize"
|
|
||||||
@current-change="getKpiData"
|
|
||||||
@size-change="getKpiData"
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="total">
|
|
||||||
</el-pagination>-->
|
|
||||||
<el-pagination
|
<el-pagination
|
||||||
v-if="active !== 9"
|
v-if="active !== 10"
|
||||||
small
|
small
|
||||||
:page-sizes="[20, 50, 100]"
|
:page-sizes="[20, 50, 100]"
|
||||||
:current-page.sync="pageNum"
|
:current-page.sync="pageNum"
|
||||||
@ -271,9 +272,9 @@ import {
|
|||||||
getKpiDetailsData,
|
getKpiDetailsData,
|
||||||
getStatisticsKpiByMonth,
|
getStatisticsKpiByMonth,
|
||||||
getStatisticsKpi,
|
getStatisticsKpi,
|
||||||
getDriverStatisticsKpi,
|
|
||||||
getSupplierId,
|
getSupplierId,
|
||||||
getDriverName
|
getDriverName,
|
||||||
|
getRecentSupplierKpi, querySupplierDriverStatisticsScore
|
||||||
} from "@/api/kpi.js"
|
} from "@/api/kpi.js"
|
||||||
import {myMixins} from "@/utils/myMixins"
|
import {myMixins} from "@/utils/myMixins"
|
||||||
import CircleChar from "@/views/kpi/components/circleChar.vue";
|
import CircleChar from "@/views/kpi/components/circleChar.vue";
|
||||||
@ -288,12 +289,13 @@ export default {
|
|||||||
return {
|
return {
|
||||||
active:0,
|
active:0,
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
|
// {name: '月/师傅'}, {name: '日/师傅'},
|
||||||
tabArr: [
|
tabArr: [
|
||||||
{name: '总览'}, {name: '月/总'}, {name: '日/总'}, {name: '月/师傅'}, {name: '日/师傅'}, {name: '拒单明细'},
|
{name: '总览'}, {name: '月/总'}, {name: '日/总'},{name: '师傅满意度'}, {name: '拒单明细'},
|
||||||
{name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
|
{name: '超时明细'}, {name: '投诉明细'}, {name: '不使用APP案件明细'}, {name: '车辆在线情况'}
|
||||||
],
|
],
|
||||||
list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
|
list: [{name: '接单指标'}, {name: '客户评价'}, {name: 'APP使用'}, {name: ' 时效 '}],
|
||||||
driverList: [{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
driverList: [{name: '得分总览'},{name: '接单情况'}, {name: '服务评价'}, {name: 'APP使用情况'}, {name: '时效 '}],
|
||||||
startMonthTime: '',
|
startMonthTime: '',
|
||||||
startTime: '',
|
startTime: '',
|
||||||
endTime: '',
|
endTime: '',
|
||||||
@ -313,7 +315,8 @@ export default {
|
|||||||
xAxisArr: [],
|
xAxisArr: [],
|
||||||
isMobile: false,
|
isMobile: false,
|
||||||
isZd: '',
|
isZd: '',
|
||||||
current: dayjs(new Date()).format('M'),
|
current:'',
|
||||||
|
// current: dayjs(new Date()).format('M'),
|
||||||
supplierName:'',
|
supplierName:'',
|
||||||
value: '1',
|
value: '1',
|
||||||
options: [
|
options: [
|
||||||
@ -332,36 +335,72 @@ export default {
|
|||||||
driverselectLoading: false,
|
driverselectLoading: false,
|
||||||
driverselectOption: [],
|
driverselectOption: [],
|
||||||
leftArr:'<<<',
|
leftArr:'<<<',
|
||||||
showScoreChart:true
|
showScoreChart:true,
|
||||||
|
continueMonthKpi:[],
|
||||||
|
isBtn:false,//是否有信息变更申请按钮权限
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted() {
|
|
||||||
await this.checkMobile();
|
|
||||||
await this.initDate();
|
|
||||||
await this.getData();
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
this.checkMobile();
|
this.checkMobile();
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
this.isZd = urlParams?.get('isZd') || ''
|
this.isZd = urlParams?.get('isZd') || ''
|
||||||
/* if(!this.isMobile && this.isZd && this.isZd==1){
|
this.supplierId = urlParams?.get('supplierId') || ''
|
||||||
this.supplierId='1127'
|
this.isBtn= Number(urlParams?.get('isBtn'))
|
||||||
}*/
|
|
||||||
},
|
},
|
||||||
async activated() {
|
async mounted() {
|
||||||
|
await this.checkMobile();
|
||||||
|
await this.initDate();
|
||||||
|
await this.selectSupplierNameHandle();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async selectSupplierNameHanldle(){
|
applicateHandle() {
|
||||||
|
if (window.parent) {
|
||||||
|
const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
|
||||||
|
if (hasListener) {
|
||||||
|
const data = {
|
||||||
|
action: 'closeDialog',
|
||||||
|
message: this.supplierId,
|
||||||
|
// 其他需要传递的参数
|
||||||
|
};
|
||||||
|
window.parent.postMessage(data, '*');
|
||||||
|
// window.parent.postMessage('closeDialog', '*');
|
||||||
|
} else {
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
monthChangeHandle(value){
|
||||||
|
if (value) {
|
||||||
|
const year = value.getFullYear();
|
||||||
|
const month = value.getMonth() + 1; // 月份从 0 开始,需要加 1
|
||||||
|
const yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
|
||||||
|
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')
|
||||||
|
this.startTime = `${year}-${this.padZero(month)}-01 00:00:00`;
|
||||||
|
const lastDay = new Date(year, month, 0).getDate(); // 获取该月的最后一天
|
||||||
|
this.endTime = `${year}-${this.padZero(month)}-${this.padZero(lastDay)} 23:59:59`;
|
||||||
|
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
|
||||||
|
console.log(" this.startMonthTime", this.startMonthTime)
|
||||||
|
this.selectSupplierNameHandle();
|
||||||
|
if(this.active===1){
|
||||||
|
this.tabClickHandle()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
padZero(num) {
|
||||||
|
return num < 10 ? `0${num}` : num;
|
||||||
|
},
|
||||||
|
async selectSupplierNameHandle(){
|
||||||
await this.getData()
|
await this.getData()
|
||||||
setTimeout(()=>{
|
if(this.active !== 0){
|
||||||
this.$refs.Doughnut1.initCircle()
|
return
|
||||||
this.$refs.Doughnut2.initCircle()
|
}
|
||||||
this.$refs.Doughnut3.initCircle()
|
this.$refs.Doughnut1.initCircle()
|
||||||
this.$refs.Doughnut4.initCircle()
|
this.$refs.Doughnut2.initCircle()
|
||||||
this.$refs.Doughnut5.initCircle()
|
this.$refs.Doughnut3.initCircle()
|
||||||
this.$refs.Doughnut6.initCircle()
|
this.$refs.Doughnut4.initCircle()
|
||||||
this.$refs.Doughnut7.initCircle()
|
this.$refs.Doughnut5.initCircle()
|
||||||
},1500)
|
this.$refs.Doughnut6.initCircle()
|
||||||
|
this.$refs.Doughnut7.initCircle()
|
||||||
},
|
},
|
||||||
async remoteMethod(query) {
|
async remoteMethod(query) {
|
||||||
if (query !== '') {
|
if (query !== '') {
|
||||||
@ -394,9 +433,6 @@ export default {
|
|||||||
this.driverselectOption = [];
|
this.driverselectOption = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async searchHandle() {//web端服务商搜索操作
|
|
||||||
console.log("搜索按钮")
|
|
||||||
},
|
|
||||||
async changeHandle() {
|
async changeHandle() {
|
||||||
this.v1=[]
|
this.v1=[]
|
||||||
this.v2=[]
|
this.v2=[]
|
||||||
@ -422,30 +458,48 @@ export default {
|
|||||||
this.xAxisArr = []
|
this.xAxisArr = []
|
||||||
this.etlDetailList=[]
|
this.etlDetailList=[]
|
||||||
this.etlLabelList=[]
|
this.etlLabelList=[]
|
||||||
|
this.continueMonthKpi=[]
|
||||||
await this.getKpiData()
|
await this.getKpiData()
|
||||||
this.loadingData = false
|
this.loadingData = false
|
||||||
} finally {
|
} finally {
|
||||||
this.loadingData = false
|
this.loadingData = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 格式化承接案件量数据
|
||||||
|
formatCurrency(value) {
|
||||||
|
if (!value) return '';
|
||||||
|
let num = parseInt(value);
|
||||||
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||||
|
},
|
||||||
|
formatCurrency1(value) {
|
||||||
|
if (!value) return ''; // 如果值为空,返回空字符串
|
||||||
|
// 如果值已经包含逗号,直接返回原值
|
||||||
|
if (value.toString().includes(',')) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
// 否则,添加千分号
|
||||||
|
let num = parseInt(value);
|
||||||
|
if (isNaN(num)) return ''; // 如果转换失败,返回空字符串
|
||||||
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||||
|
},
|
||||||
async clickJumpHandle(type) {
|
async clickJumpHandle(type) {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.active = type;
|
this.active = type;
|
||||||
await this.onClick();
|
await this.tabClickHandle();
|
||||||
},
|
},
|
||||||
onClick() {
|
tabClickHandle() {
|
||||||
this.activeIndex = 0;
|
this.activeIndex = 0;
|
||||||
this.detailList = [];
|
this.detailList = [];
|
||||||
this.labelList = [];
|
this.labelList = [];
|
||||||
this.driverName=''
|
this.driverName=''
|
||||||
this.getData();
|
this.selectSupplierNameHandle();
|
||||||
if (this.active === 1) {
|
if (this.active === 1) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.drawLine()
|
this.drawLine()
|
||||||
if (!this.isMobile && this.activeIndex === 3) {
|
if (!this.isMobile && this.activeIndex === 3) {
|
||||||
this.drawLine1()
|
this.drawLine1()
|
||||||
}
|
}
|
||||||
}, 500)
|
}, 1000)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
drawLine() { // 基于准备好的dom,初始化echarts实例
|
drawLine() { // 基于准备好的dom,初始化echarts实例
|
||||||
@ -455,13 +509,16 @@ export default {
|
|||||||
let series1 = [{
|
let series1 = [{
|
||||||
name: '派遣案件量',
|
name: '派遣案件量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: this.v1,
|
data: this.v1?.map(item => Number(item?.toString()?.replace(/,/g, ''))),
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
smooth: true,
|
smooth: true,
|
||||||
barWidth: this.isMobile ? 35 : 60,
|
barWidth: this.isMobile ? 35 : 60,
|
||||||
label: {
|
label: {
|
||||||
show: true, // 显示标签
|
show: true, // 显示标签
|
||||||
position: 'top', // 标签位置在柱形顶部
|
position: 'top', // 标签位置在柱形顶部
|
||||||
|
formatter: (params) => {
|
||||||
|
return params.value.toLocaleString();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -845,49 +902,123 @@ export default {
|
|||||||
};
|
};
|
||||||
option && myChart.setOption(option, true);
|
option && myChart.setOption(option, true);
|
||||||
},
|
},
|
||||||
|
async allDataChart(){
|
||||||
|
let res = await getRecentSupplierKpi({
|
||||||
|
startTime: this.startTime,
|
||||||
|
endTime: this.endTime,
|
||||||
|
statisticsType: 1,
|
||||||
|
supplierId: this.supplierId,
|
||||||
|
driverId: this.driverId,
|
||||||
|
driverName:this.driverName,
|
||||||
|
});
|
||||||
|
this.continueMonthKpi=res.data;
|
||||||
|
// 初始化 v1 ,v2数组,长度为 12,初始值为 0
|
||||||
|
let v1 = new Array(12).fill(0);
|
||||||
|
let v2 = new Array(12).fill(0);
|
||||||
|
if( this.continueMonthKpi.length>0){
|
||||||
|
this.continueMonthKpi.forEach(item=>{
|
||||||
|
let month = parseInt(item.statisticsDate?.split('-')[1], 10) - 1; // 获取月份,并转换为数组索引
|
||||||
|
v1[month] = item.dispatchOrderCount;
|
||||||
|
v2[month] = item.orderScore;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let myChart = echarts.init(document.getElementById('allDataChart'))
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: '15%',
|
||||||
|
bottom: '12%',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: { },
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
rotate: 45,
|
||||||
|
margin: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '案件量',
|
||||||
|
type: 'bar',
|
||||||
|
yAxisIndex: 0,
|
||||||
|
data:v1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '总分',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: v2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option, true);
|
||||||
|
},
|
||||||
|
// 通用函数,用于处理百分比数据
|
||||||
|
processPercentage(value) {
|
||||||
|
value *= 100;
|
||||||
|
if (value % 1 !== 0) {
|
||||||
|
value = value.toFixed(2);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
async getKpiData() {
|
async getKpiData() {
|
||||||
try {
|
try {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
if (this.active === 0) {
|
if (this.active === 0) {
|
||||||
|
await this.allDataChart()
|
||||||
let res = await getStatisticsKpiByMonth({
|
let res = await getStatisticsKpiByMonth({
|
||||||
startTime: this.startTime,
|
startTime: this.startTime,
|
||||||
endTime: this.endTime,
|
endTime: this.endTime,
|
||||||
statisticsType: 1,
|
statisticsType: 1,
|
||||||
supplierId: this.supplierId,
|
supplierId: this.supplierId,
|
||||||
});
|
});
|
||||||
|
if(!res.data){
|
||||||
|
return
|
||||||
|
}
|
||||||
this.indexData = res.data;
|
this.indexData = res.data;
|
||||||
this.supplierName=res.data?.supplierName
|
this.supplierName=res.data?.supplierName
|
||||||
this.indexData.refuseOrderRate=this.indexData.refuseOrderRate*100
|
// 需要处理的属性名数组
|
||||||
if (this.indexData.refuseOrderRate % 1 !== 0) {
|
const propertiesToProcess = [
|
||||||
this.indexData.refuseOrderRate = this.indexData.refuseOrderRate.toFixed(2);
|
'refuseOrderRate',
|
||||||
}
|
'timeoutOrderRate',
|
||||||
this.indexData.timeoutOrderRate=this.indexData.timeoutOrderRate*100
|
'complainOrderRate',
|
||||||
if (this.indexData.timeoutOrderRate % 1 !== 0) {
|
'customerSatisfaction',
|
||||||
this.indexData.timeoutOrderRate = this.indexData.timeoutOrderRate.toFixed(2);
|
'threeMinutesContactRate',
|
||||||
}
|
'urgeRate',
|
||||||
this.indexData.complainOrderRate=this.indexData.complainOrderRate*100
|
'appRate',
|
||||||
if (this.indexData.complainOrderRate % 1 !== 0) {
|
'polymerizationSuccessRate'
|
||||||
this.indexData.complainOrderRate = this.indexData.complainOrderRate.toFixed(2);
|
];
|
||||||
}
|
for (let key in this.indexData){
|
||||||
this.indexData.customerSatisfaction=this.indexData.customerSatisfaction*100
|
if (propertiesToProcess.includes(key)) {
|
||||||
if (this.indexData.customerSatisfaction % 1 !== 0) {
|
this.indexData[key] = this.processPercentage(this.indexData[key]);
|
||||||
this.indexData.customerSatisfaction = this.indexData.customerSatisfaction.toFixed(2);
|
}
|
||||||
}
|
|
||||||
this.indexData.threeMinutesContactRate=this.indexData.threeMinutesContactRate*100
|
|
||||||
if (this.indexData.threeMinutesContactRate % 1 !== 0) {
|
|
||||||
this.indexData.threeMinutesContactRate = this.indexData.threeMinutesContactRate.toFixed(2);
|
|
||||||
}
|
|
||||||
this.indexData.urgeRate=this.indexData.urgeRate*100
|
|
||||||
if (this.indexData.urgeRate % 1 !== 0) {
|
|
||||||
this.indexData.urgeRate = this.indexData.urgeRate.toFixed(2);
|
|
||||||
}
|
|
||||||
this.indexData.appRate=this.indexData.appRate*100
|
|
||||||
if (this.indexData.appRate % 1 !== 0) {
|
|
||||||
this.indexData.appRate = this.indexData.appRate.toFixed(2);
|
|
||||||
}
|
|
||||||
this.indexData.polymerizationSuccessRate=this.indexData.polymerizationSuccessRate*100
|
|
||||||
if (this.indexData.polymerizationSuccessRate % 1 !== 0) {
|
|
||||||
this.indexData.polymerizationSuccessRate = this.indexData.polymerizationSuccessRate.toFixed(2);
|
|
||||||
}
|
}
|
||||||
} else if ([1, 2].includes(this.active)) {
|
} else if ([1, 2].includes(this.active)) {
|
||||||
let res = await getStatisticsKpi({
|
let res = await getStatisticsKpi({
|
||||||
@ -916,32 +1047,58 @@ export default {
|
|||||||
item.minorFortyMinutesArrivalRate=this.formatPercentage(item.minorFortyMinutesArrivalRate) ;
|
item.minorFortyMinutesArrivalRate=this.formatPercentage(item.minorFortyMinutesArrivalRate) ;
|
||||||
let formatVal = dayjs(item.statisticsDate).format('DD');
|
let formatVal = dayjs(item.statisticsDate).format('DD');
|
||||||
let formatVal1 = dayjs(item.statisticsDate).format('M');
|
let formatVal1 = dayjs(item.statisticsDate).format('M');
|
||||||
return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')};
|
// console.log("formatVal1",formatVal1)
|
||||||
|
// return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')};
|
||||||
|
return {...item, date: formatVal, month: formatVal1 + '月'};
|
||||||
});
|
});
|
||||||
this.loading = false
|
this.loading = false
|
||||||
this.detailList?.map(item => {
|
this.detailList?.map(item => {
|
||||||
this.xAxisArr.push(item.month)
|
this.xAxisArr.push(item.month)
|
||||||
|
this.xAxisArr = [...new Set(this.xAxisArr)]; // 去重
|
||||||
})
|
})
|
||||||
this.xAxisArr[this.xAxisArr.length - 1] = '本月'
|
console.log(" this.xAxisArr", this.xAxisArr)
|
||||||
|
// this.xAxisArr[this.xAxisArr.length - 1] = '本月'
|
||||||
await this.twoTabHanldeData()
|
await this.twoTabHanldeData()
|
||||||
} else if ([3, 4].includes(this.active)) {
|
}else if (this.active === 3) {
|
||||||
let res = await getDriverStatisticsKpi({
|
let res = await querySupplierDriverStatisticsScore({
|
||||||
startTime: this.startTime ,
|
startTime: this.startTime ,
|
||||||
endTime: this.endTime,
|
endTime: this.endTime,
|
||||||
statisticsType: this.active === 3 ? 1 : 2,
|
statisticsType: 1,
|
||||||
|
supplierId: this.supplierId,
|
||||||
|
driverId: this.driverId,
|
||||||
|
driverName:this.driverName,
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
pageSize: this.pageSize
|
||||||
|
})
|
||||||
|
this.total = res.total
|
||||||
|
this.detailList = res.data?.map(item => {
|
||||||
|
let formatVal = dayjs(item.statisticsDate).format('DD');
|
||||||
|
return {...item, date: formatVal};
|
||||||
|
});
|
||||||
|
this.labelList = [
|
||||||
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
|
{label: '服务商名称', prop: 'supplierName'},
|
||||||
|
{label: '案件总量', prop: 'orderCount'},
|
||||||
|
{label: '满意度得分 ', prop: 'driverSatisfaction'},
|
||||||
|
]
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
/* else if ([4,5].includes(this.active)) {
|
||||||
|
let res = await getDriverStatisticsKpi({
|
||||||
|
startTime: this.startTime ,
|
||||||
|
endTime: this.endTime,
|
||||||
|
statisticsType:this.active === 4 ? 1 : 2,
|
||||||
supplierId: this.supplierId,
|
supplierId: this.supplierId,
|
||||||
driverId: this.driverId,
|
driverId: this.driverId,
|
||||||
driverName:this.driverName,
|
driverName:this.driverName,
|
||||||
pageNum: this.pageNum,
|
pageNum: this.pageNum,
|
||||||
pageSize: this.pageSize
|
pageSize: this.pageSize
|
||||||
})
|
})
|
||||||
// this.detailList = res.data
|
|
||||||
this.total = res.total
|
this.total = res.total
|
||||||
this.detailList = res.data?.map(item => {
|
this.detailList = res.data?.map(item => {
|
||||||
item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ;
|
item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ;
|
||||||
item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ;
|
item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ;
|
||||||
item.cancelRate=this.formatPercentage(item.cancelRate) ;
|
item.cancelRate=this.formatPercentage(item.cancelRate) ;
|
||||||
// item.urgeRate=this.formatPercentage(item.urgeRate) ;
|
|
||||||
item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ;
|
item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ;
|
||||||
item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ;
|
item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ;
|
||||||
item.appRate=this.formatPercentage(item.appRate) ;
|
item.appRate=this.formatPercentage(item.appRate) ;
|
||||||
@ -957,12 +1114,14 @@ export default {
|
|||||||
return {...item, date: formatVal};
|
return {...item, date: formatVal};
|
||||||
});
|
});
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
if(this.active===4 && !this.driverName){
|
if(this.active===5 && !this.driverName){
|
||||||
this.detailList=[]
|
this.detailList=[]
|
||||||
this.total=0
|
this.total=0
|
||||||
}
|
}
|
||||||
await this.twoTabHanldeData();
|
await this.twoTabHanldeData();
|
||||||
} else if ([5, 6, 7, 8, 9].includes(this.active)) {
|
}*/
|
||||||
|
else if ([ 4,5,6, 7, 8].includes(this.active)) {
|
||||||
|
|
||||||
this.detailList = []
|
this.detailList = []
|
||||||
this.labelList = []
|
this.labelList = []
|
||||||
let result = await getKpiDetailsData({
|
let result = await getKpiDetailsData({
|
||||||
@ -979,7 +1138,7 @@ export default {
|
|||||||
return {...item, date: formatVal};
|
return {...item, date: formatVal};
|
||||||
});
|
});
|
||||||
this.loading = false
|
this.loading = false
|
||||||
if (this.active === 5) {//拒单明细
|
if (this.active === 4) {//拒单明细
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '案件编号', prop: 'orderCode'},
|
{label: '案件编号', prop: 'orderCode'},
|
||||||
{label: '服务内容', prop: 'serviceName'},
|
{label: '服务内容', prop: 'serviceName'},
|
||||||
@ -990,7 +1149,7 @@ export default {
|
|||||||
{label: '中道派单时间', prop: 'dispatchTime'},
|
{label: '中道派单时间', prop: 'dispatchTime'},
|
||||||
{label: '拒绝原因', prop: 'reason'},
|
{label: '拒绝原因', prop: 'reason'},
|
||||||
]
|
]
|
||||||
} else if (this.active === 6) {//超时明细
|
} else if (this.active === 5) {//超时明细
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '案件编号', prop: 'orderCode'},
|
{label: '案件编号', prop: 'orderCode'},
|
||||||
{label: '服务内容', prop: 'serviceName'},
|
{label: '服务内容', prop: 'serviceName'},
|
||||||
@ -1000,7 +1159,7 @@ export default {
|
|||||||
{label: '上游接单来源', prop: 'workSource'},
|
{label: '上游接单来源', prop: 'workSource'},
|
||||||
{label: '中道派单时间', prop: 'dispatchTime'},
|
{label: '中道派单时间', prop: 'dispatchTime'},
|
||||||
]
|
]
|
||||||
} else if (this.active === 7) {//投诉明细
|
} else if (this.active === 6) {//投诉明细
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '案件编号', prop: 'orderCode'},
|
{label: '案件编号', prop: 'orderCode'},
|
||||||
{label: '服务内容', prop: 'serviceName'},
|
{label: '服务内容', prop: 'serviceName'},
|
||||||
@ -1009,8 +1168,7 @@ export default {
|
|||||||
{label: '投诉时间', prop: 'complainCreateTime'},
|
{label: '投诉时间', prop: 'complainCreateTime'},
|
||||||
{label: '投诉类型', prop: 'complainTypeString'},
|
{label: '投诉类型', prop: 'complainTypeString'},
|
||||||
]
|
]
|
||||||
} else if (this.active === 8) {//不使用App案件明细
|
} else if (this.active === 7) {//不使用App案件明细
|
||||||
// console.log("不使用App案件明细")
|
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '案件编号', prop: 'orderCode'},
|
{label: '案件编号', prop: 'orderCode'},
|
||||||
{label: '服务内容', prop: 'serviceName'},
|
{label: '服务内容', prop: 'serviceName'},
|
||||||
@ -1018,7 +1176,7 @@ export default {
|
|||||||
{label: '工单创建时间', prop: 'orderCreateTime'},
|
{label: '工单创建时间', prop: 'orderCreateTime'},
|
||||||
{label: '事发地', prop: 'vehiclePointAddress'},
|
{label: '事发地', prop: 'vehiclePointAddress'},
|
||||||
]
|
]
|
||||||
} else if (this.active === 9) {//车辆在线情况
|
} else if (this.active === 8) {//车辆在线情况
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '日期', prop: 'date'},
|
{label: '日期', prop: 'date'},
|
||||||
{label: '0点在线车辆数量', prop: 'zeroClockVehicleCount'},
|
{label: '0点在线车辆数量', prop: 'zeroClockVehicleCount'},
|
||||||
@ -1027,7 +1185,6 @@ export default {
|
|||||||
{label: '16点在线车辆数量', prop: 'sixteenClockVehicleCount'},
|
{label: '16点在线车辆数量', prop: 'sixteenClockVehicleCount'},
|
||||||
{label: '20点在线车辆数量', prop: 'twentyClockVehicleCount'},
|
{label: '20点在线车辆数量', prop: 'twentyClockVehicleCount'},
|
||||||
{label: '22点在线车辆数量', prop: 'twentyTwoClockVehicleCount'},
|
{label: '22点在线车辆数量', prop: 'twentyTwoClockVehicleCount'},
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1043,16 +1200,28 @@ export default {
|
|||||||
return result.toFixed(2) + '%';
|
return result.toFixed(2) + '%';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
checkMobile() {
|
|
||||||
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
|
||||||
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
|
|
||||||
},
|
|
||||||
// 初始化获取当月日期
|
// 初始化获取当月日期
|
||||||
initDate() {
|
initDate() {
|
||||||
this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00'
|
let year=''
|
||||||
this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59'
|
let month=''
|
||||||
|
if( this.current ) {
|
||||||
|
year = new Date(this.current).getFullYear();
|
||||||
|
month = new Date(this.current).getMonth() + 1;
|
||||||
|
} else {
|
||||||
|
/*year = new Date().getFullYear();
|
||||||
|
month = new Date().getMonth() + 1;*/
|
||||||
|
year = 2024
|
||||||
|
month = 12
|
||||||
|
}
|
||||||
|
let yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
|
||||||
|
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')
|
||||||
|
console.log("this.current",this.current)
|
||||||
|
/*this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00'
|
||||||
|
this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59'*/
|
||||||
|
this.startTime = '2024-12-01 00:00:00'
|
||||||
|
this.endTime = '2024-12-31 23:59:59'
|
||||||
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
|
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
|
||||||
console.log(this.startTime,this.endTime,this.startMonthTime)
|
console.log(" this.startMonthTime", this.startMonthTime,this.startTime)
|
||||||
},
|
},
|
||||||
// 获取当月天数
|
// 获取当月天数
|
||||||
getDayLen() {
|
getDayLen() {
|
||||||
@ -1113,6 +1282,12 @@ export default {
|
|||||||
{ 'month': '拒单量' },{ 'month': '拒单率(%)' },{ 'month': '超时接单量' },{ 'month': '超时率(%)' },{ 'month': '客户取消率(%)' }]
|
{ 'month': '拒单量' },{ 'month': '拒单率(%)' },{ 'month': '超时接单量' },{ 'month': '超时率(%)' },{ 'month': '客户取消率(%)' }]
|
||||||
let props = 'prop' //自定义字段名称
|
let props = 'prop' //自定义字段名称
|
||||||
this.detailList?.map((item,index) => {
|
this.detailList?.map((item,index) => {
|
||||||
|
|
||||||
|
item.dispatchOrderCount=this.formatCurrency1( item.dispatchOrderCount);
|
||||||
|
item.receiveOrderCount=this.formatCurrency1( item.receiveOrderCount);
|
||||||
|
item.finishOrderCount=this.formatCurrency1( item.finishOrderCount);
|
||||||
|
item.refuseOrderCount=this.formatCurrency1( item.refuseOrderCount);
|
||||||
|
item.timeoutOrderCount=this.formatCurrency1( item.timeoutOrderCount);
|
||||||
this.v1.push(item.dispatchOrderCount)
|
this.v1.push(item.dispatchOrderCount)
|
||||||
this.v2.push(item.refuseOrderRate.replace('%', ''))
|
this.v2.push(item.refuseOrderRate.replace('%', ''))
|
||||||
this.v3.push(item.timeoutOrderRate.replace('%', ''))
|
this.v3.push(item.timeoutOrderRate.replace('%', ''))
|
||||||
@ -1200,13 +1375,11 @@ export default {
|
|||||||
this.v2.push(item.threeMinutesReceivingRate.replace('%', ''))
|
this.v2.push(item.threeMinutesReceivingRate.replace('%', ''))
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
console.log(" this.detailList师傅接单时效", this.detailList)
|
|
||||||
this.detailList?.map(item => {
|
this.detailList?.map(item => {
|
||||||
this.v1.push(item.arriving)
|
this.v1.push(item.arriving)
|
||||||
this.v2.push(item.polymerizationSuccessArriving)
|
this.v2.push(item.polymerizationSuccessArriving)
|
||||||
this.v3.push(item.fortyMinutesArrivalRate.replace('%', ''))
|
this.v3.push(item.fortyMinutesArrivalRate.replace('%', ''))
|
||||||
})
|
})
|
||||||
console.log("this.v1",this.v1,this.v2,this.v3)
|
|
||||||
}
|
}
|
||||||
this.detailList?.map((item,index) => {
|
this.detailList?.map((item,index) => {
|
||||||
const columnObj = {}
|
const columnObj = {}
|
||||||
@ -1292,8 +1465,40 @@ export default {
|
|||||||
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
} else if (this.active === 3) {
|
}
|
||||||
|
/* else if(this.active === 3){
|
||||||
|
|
||||||
|
} */
|
||||||
|
else if (this.active === 4) {
|
||||||
if (this.activeIndex === 0) {
|
if (this.activeIndex === 0) {
|
||||||
|
this.labelList = [
|
||||||
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
|
{label: '总分', prop: 'score'},
|
||||||
|
{label: '案件总量', prop: 'orderCount'},
|
||||||
|
{label: '累计得分', prop: 'cumulativeScore'},
|
||||||
|
{label: '两分钟内接单得分', prop: 'twoMinutesAcceptScore'},
|
||||||
|
{label: '1分钟内联系客户得分', prop: 'oneMinutesContactCustomerScore'},
|
||||||
|
{label: '联系成功得分', prop: 'contactSuccessScore'},
|
||||||
|
{label: '准时到达B点得分', prop: 'arriveBScore'},
|
||||||
|
{label: '准时到达C点得分', prop: 'arriveCScore'},
|
||||||
|
{label: '服务成功得分', prop: 'serviceSuccessScore'},
|
||||||
|
{label: '必传照片上传得分', prop: 'uploadPhotoScore'},
|
||||||
|
{label: '审核一次通过得分', prop: 'auditScore'},
|
||||||
|
{label: '平安案件无评价扣分', prop: 'pinganNoCommentDeduct'},
|
||||||
|
{label: '案件差评扣分', prop: 'orderNegativeDeduct'},
|
||||||
|
{label: '催促扣分', prop: 'urgeDeduct'},
|
||||||
|
{label: '有责车损扣分', prop: 'responsibleDeduct'},
|
||||||
|
{label: '有责投诉(非态度类)扣分', prop: 'complaintNoAttitudeDeduct'},
|
||||||
|
{label: '有责投诉(态度类)扣分', prop: 'complaintAttitudeDeduct'},
|
||||||
|
{label: '拒单扣分', prop: 'rejectDeduct'},
|
||||||
|
{label: '超时扣分', prop: 'timeoutDeduct'},
|
||||||
|
{label: '聚合成功得分', prop: 'polymerizationSuccessScore'},
|
||||||
|
{label: '聚合失败扣分', prop: 'polymerizationFailDeduct'},
|
||||||
|
{label: '每月培训得分', prop: 'trainingScore'},
|
||||||
|
{label: '新手入列得分', prop: 'listedScore'},
|
||||||
|
{label: '星级评分', prop: 'starRank'},
|
||||||
|
]
|
||||||
|
}if (this.activeIndex === 1) {
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||||
@ -1302,7 +1507,7 @@ export default {
|
|||||||
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
{label: '超时接单量', prop: 'timeoutOrderCount'},
|
||||||
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
{label: '超时率(%)', prop: 'timeoutOrderRate'},
|
||||||
]
|
]
|
||||||
} else if (this.activeIndex === 1) {
|
} else if (this.activeIndex === 2) {
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||||
@ -1312,7 +1517,7 @@ export default {
|
|||||||
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
{label: '客户评价率(%)', prop: 'customerEvaluateRate'},
|
||||||
{label: '催促率(%)', prop: 'urgeRate'},
|
{label: '催促率(%)', prop: 'urgeRate'},
|
||||||
]
|
]
|
||||||
} else if (this.activeIndex === 2) {
|
} else if (this.activeIndex === 3) {
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '承接案件量', prop: 'receiveOrderCount'},
|
{label: '承接案件量', prop: 'receiveOrderCount'},
|
||||||
@ -1324,7 +1529,7 @@ export default {
|
|||||||
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
|
{label: '总聚合成功率(%)', prop: 'polymerizationSuccessRate'},
|
||||||
{label: '日均在线时长(h)', prop: 'onlineDuration'},
|
{label: '日均在线时长(h)', prop: 'onlineDuration'},
|
||||||
]
|
]
|
||||||
} else if (this.activeIndex === 3) {
|
} else if (this.activeIndex === 4) {
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '师傅姓名', prop: 'driverName'},
|
{label: '师傅姓名', prop: 'driverName'},
|
||||||
{label: '接单时效(分)', prop: 'receiving'},
|
{label: '接单时效(分)', prop: 'receiving'},
|
||||||
@ -1334,7 +1539,7 @@ export default {
|
|||||||
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
{label: '聚合成功到达时效(分)', prop: 'polymerizationSuccessArriving'},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
} else if (this.active === 4) {
|
} else if (this.active === 5) {
|
||||||
if (this.activeIndex === 0) {//接单指标
|
if (this.activeIndex === 0) {//接单指标
|
||||||
this.labelList = [
|
this.labelList = [
|
||||||
{label: '日', prop: 'date'},
|
{label: '日', prop: 'date'},
|
||||||
@ -1383,17 +1588,21 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
checkMobile() {
|
||||||
|
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
||||||
|
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
|
||||||
|
},
|
||||||
setType(type) {
|
setType(type) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 5:
|
case 4:
|
||||||
return 1;
|
return 1;
|
||||||
case 6:
|
case 5:
|
||||||
return 2;
|
return 2;
|
||||||
case 7:
|
case 6:
|
||||||
return 3;
|
return 3;
|
||||||
case 8:
|
case 7:
|
||||||
return 4;
|
return 4;
|
||||||
case 9:
|
case 8:
|
||||||
return 5;
|
return 5;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -1460,19 +1669,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.month {
|
|
||||||
display: inline-block;
|
|
||||||
width: 45px;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 20px 0px 0px 20px;
|
|
||||||
border: 1px solid #4C81F5;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon-search {
|
.el-icon-search {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #4C81F5;
|
color: #4C81F5;
|
||||||
@ -1554,12 +1750,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content:center;
|
justify-content:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .defen{
|
|
||||||
display: inline-block;
|
|
||||||
//width: 92px;
|
|
||||||
//text-align: right;
|
|
||||||
}*/
|
|
||||||
.left{
|
.left{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
@ -1612,7 +1802,24 @@ export default {
|
|||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.allDataChartWrap{
|
||||||
|
/* width: 375px;
|
||||||
|
height: 220px;*/
|
||||||
|
@include whBg(375px, 200px, #FFFFFF);
|
||||||
|
|
||||||
|
}
|
||||||
|
.allDataChart{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.webComAllData{
|
||||||
|
width: 420px;
|
||||||
|
height: 200px;
|
||||||
|
/*width: 375px;
|
||||||
|
height: 146px;*/
|
||||||
|
float: left;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
.webCom {
|
.webCom {
|
||||||
@include whBg(420px, 200px, #FFFFFF);
|
@include whBg(420px, 200px, #FFFFFF);
|
||||||
float: left;
|
float: left;
|
||||||
@ -1727,7 +1934,6 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-table {
|
::v-deep .el-table {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@ -1735,7 +1941,11 @@ export default {
|
|||||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
||||||
height: 95% !important;
|
height: 95% !important;
|
||||||
}
|
}
|
||||||
|
.comTabActive3 ::v-deep .el-table--scrollable-x .el-table__body-wrapper{
|
||||||
|
width: 100%;
|
||||||
|
//height: 90%;
|
||||||
|
//height: 84% !important;
|
||||||
|
}
|
||||||
.chartWrapWeb, .webTab {
|
.chartWrapWeb, .webTab {
|
||||||
height: calc(100% - 200px);
|
height: calc(100% - 200px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -1803,4 +2013,47 @@ export default {
|
|||||||
::v-deep .el-switch__label * {
|
::v-deep .el-switch__label * {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
/* 自定义样式 */
|
||||||
|
.custom-date-picker ::v-deep .el-input__prefix{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.month {
|
||||||
|
display: inline-block;
|
||||||
|
width: 75px;
|
||||||
|
//height: 30px;
|
||||||
|
//line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 20px 0px 0px 20px;
|
||||||
|
//border-radius: 0px 20px 20px 0px;
|
||||||
|
//border: 1px solid #4C81F5;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
::v-deep .el-input--suffix .el-input__inner{
|
||||||
|
|
||||||
|
}
|
||||||
|
::v-deep .el-input__inner{
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
border-radius: 20px 0px 0px 20px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border: 1px solid #4C81F5 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
/* 自定义清除按钮样式 */
|
||||||
|
.custom-date-picker ::v-deep .el-input__suffix {
|
||||||
|
right: 0 !important;
|
||||||
|
padding-right: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-date-picker ::v-deep .el-input__suffix-inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-date-picker ::v-deep .el-input__icon {
|
||||||
|
line-height: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -73,47 +73,51 @@
|
|||||||
<div class="titleContent">
|
<div class="titleContent">
|
||||||
<div class="flex-between" v-show="abState">
|
<div class="flex-between" v-show="abState">
|
||||||
<div> 到事发地距离:</div>
|
<div> 到事发地距离:</div>
|
||||||
<div class="halfOpcity"><input @input="validateIntegerInput" type="number" v-model="form.supplierSettleMileageAb"/>公里</div>
|
<div class="halfOpcity"><input @input="validateIntegerInput" class="ipt" type="number" v-model="form.supplierSettleMileageAb"/>公里</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="bcState">
|
<div class="flex-between" v-show="bcState">
|
||||||
<div> 拖车里程:</div>
|
<div> 拖车里程:</div>
|
||||||
<div class="halfOpcity"><input type="number" v-model="form.supplierSettleMileageBc"/>公里</div>
|
<div class="halfOpcity"><input class="ipt" type="number" v-model="form.supplierSettleMileageBc"/>公里</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="caState">
|
<div class="flex-between" v-show="caState">
|
||||||
<div>返程里程:</div>
|
<div>返程里程:</div>
|
||||||
<div class="halfOpcity"><input type="number" v-model="form.supplierSettleMileageCa"/>公里</div>
|
<div class="halfOpcity"><input class="ipt" type="number" v-model="form.supplierSettleMileageCa"/>公里</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="bridgeAbState">
|
<div class="flex-between" v-show="bridgeAbState">
|
||||||
<div>ab路桥费:</div>
|
<div>ab路桥费:</div>
|
||||||
<div class="halfOpcity"><input @input="validateIntegerInput" type="number" v-model="form.supplierBridgeAmountAb"/>元</div>
|
<div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountAb"/>元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="bridgeBcState">
|
<div class="flex-between" v-show="bridgeBcState">
|
||||||
<div>bc路桥费:</div>
|
<div>bc路桥费:</div>
|
||||||
<div class="halfOpcity"><input @input="validateIntegerInput" type="number" v-model="form.supplierBridgeAmountBc"/>元</div>
|
<div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountBc"/>元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="bridgeCaState">
|
<div class="flex-between" v-show="bridgeCaState">
|
||||||
<div>ca路桥费:</div>
|
<div>ca路桥费:</div>
|
||||||
<div class="halfOpcity"><input @input="validateIntegerInput" type="number" v-model="form.supplierBridgeAmountCa"/>元</div>
|
<div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountCa"/>元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="waitAmountState">
|
<div class="flex-between" v-show="waitAmountState">
|
||||||
<div>等候费:</div>
|
<div>等候费:</div>
|
||||||
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" type="number" v-model="form.supplierWaitAmount"/>元</div>
|
<div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" type="number" v-model="form.supplierWaitAmount"/>元</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-between" v-show="tyreAmountState">
|
||||||
|
<div>小轮个数:</div>
|
||||||
|
<div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.tyreNumber"/>个</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="tyreAmountState">
|
<div class="flex-between" v-show="tyreAmountState">
|
||||||
<div>小轮费:</div>
|
<div>小轮费:</div>
|
||||||
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" type="number" v-model="form.supplierTyreAmount"/>元</div>
|
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" disabled type="number" v-model="form.supplierTyreAmount"/>元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="dilemmaAmountState && basePriceDisabled">
|
<div class="flex-between" v-show="dilemmaAmountState && basePriceDisabled">
|
||||||
<div>困境费:</div>
|
<div>困境费:</div>
|
||||||
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" type="number" v-model="form.supplierDilemmaAmount"/>元</div>
|
<div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" type="number" v-model="form.supplierDilemmaAmount"/>元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between" v-show="basementFeeState">
|
<div class="flex-between" v-show="basementFeeState">
|
||||||
<div>地库费:</div>
|
<div>地库费:</div>
|
||||||
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" type="number" v-model="form.supplierBasementFee" :disabled="!isBasementSettle" />元</div>
|
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" class="ipt" type="number" v-model="form.supplierBasementFee" :disabled="!isBasementSettle || isUnsuccessfulSettle" />元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between">
|
<div class="flex-between">
|
||||||
<div>收取客户金额:</div>
|
<div>收取客户金额:</div>
|
||||||
<div class="halfOpcity inputContent"><input type="number" v-model="form.supplierCustomerAmount"/>元</div>
|
<div class="halfOpcity inputContent"><input type="number" class="ipt" v-model="form.supplierCustomerAmount"/>元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-between bgDisable" :class=" { 'flex-between': true, 'bgDisable' : basePriceDisabled } ">
|
<div class="flex-between bgDisable" :class=" { 'flex-between': true, 'bgDisable' : basePriceDisabled } ">
|
||||||
<div>基本费用:</div>
|
<div>基本费用:</div>
|
||||||
@ -381,6 +385,8 @@ export default {
|
|||||||
replaceBatteryAmount: '',
|
replaceBatteryAmount: '',
|
||||||
supplierSettleRatio:{},
|
supplierSettleRatio:{},
|
||||||
contractSettleTypeString:'',
|
contractSettleTypeString:'',
|
||||||
|
tyreNumber:'',
|
||||||
|
taskStatus:{},
|
||||||
},
|
},
|
||||||
noClick: true,
|
noClick: true,
|
||||||
loading: false,
|
loading: false,
|
||||||
@ -412,7 +418,11 @@ export default {
|
|||||||
return this.settleType == '实拖' && this.orderInfo?.contractType == 1 && !['PICC10101', 'PICCSHANGQI', 'PICC101099', 'SAIPCC2021', ''].includes(this.appCode) && !(this.appCode.indexOf("TAIPING") != -1 && this.orderInfo?.malfunctionReason == 2)
|
return this.settleType == '实拖' && this.orderInfo?.contractType == 1 && !['PICC10101', 'PICCSHANGQI', 'PICC101099', 'SAIPCC2021', ''].includes(this.appCode) && !(this.appCode.indexOf("TAIPING") != -1 && this.orderInfo?.malfunctionReason == 2)
|
||||||
},
|
},
|
||||||
isBasement() {
|
isBasement() {
|
||||||
return this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'
|
return this.serviceType == '困境救援' ||this.serviceType == '困境拖车'|| this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障'||this.serviceType =='困境救援(非事故)'||this.serviceType =='困境-吊车(非事故)'
|
||||||
|
},
|
||||||
|
//取消案件和结算比例为按服务不成功结算的案件都不能在后台记账模块填写路桥费、小轮费和地库费;
|
||||||
|
isUnsuccessfulSettle(){
|
||||||
|
return (this.form?.supplierSettleRatio && this.form?.supplierSettleRatio?.code==3 )|| this.form?.taskStatus?.code==19002
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -499,7 +509,7 @@ export default {
|
|||||||
}else {
|
}else {
|
||||||
if (this.form.supplierOtherAmount > 0) {
|
if (this.form.supplierOtherAmount > 0) {
|
||||||
if (this.form.supplierOtherAmountRemark == '') {
|
if (this.form.supplierOtherAmountRemark == '') {
|
||||||
this.$alert('请填写其他费用说明');
|
this.$toast('请填写其他费用说明');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -512,11 +522,16 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
let data = await accountRecordCompute({
|
let data = await accountRecordCompute({
|
||||||
...this.form,
|
...this.form,
|
||||||
settleType: this.orderInfo.settleType?.code
|
settleType: this.orderInfo.settleType?.code,
|
||||||
|
taskOrderCostHisId:this.orderInfo.taskOrderCostHisId,
|
||||||
|
orderCode: this.orderInfo.orderCode,
|
||||||
});
|
});
|
||||||
this.form.supplierBasePrice = data.data.basePrice
|
this.form.supplierBasePrice = data.data.basePrice
|
||||||
this.form.supplierExtraPrice = data.data.extraPrice
|
this.form.supplierExtraPrice = data.data.extraPrice
|
||||||
this.form.supplierSettleAmount = data.data.totalPrice
|
this.form.supplierSettleAmount = data.data.totalPrice
|
||||||
|
if (data.data?.supplierTyreAmount){
|
||||||
|
this.form.supplierTyreAmount=data.data.supplierTyreAmount
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// }
|
// }
|
||||||
/*if(this.form.cutInsuranceAmount == 1 && this.form.policyState === 0){
|
/*if(this.form.cutInsuranceAmount == 1 && this.form.policyState === 0){
|
||||||
@ -633,7 +648,9 @@ export default {
|
|||||||
this.form.supplierBasementFee = this.orderInfo.refBasementFee
|
this.form.supplierBasementFee = this.orderInfo.refBasementFee
|
||||||
}
|
}
|
||||||
if (this.form.supplierSettleRatio?.code != 5 && (this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障')){
|
if (this.form.supplierSettleRatio?.code != 5 && (this.serviceType == '困境救援' || this.serviceType == '困境-吊车' || this.serviceType == '困境救援-事故' || this.serviceType == '困境救援-故障')){
|
||||||
await this.$alert("该案件为困境案件,需确认填写基本费用")
|
// await this.$alert("该案件为困境案件,需确认填写基本费用")
|
||||||
|
await this.$toast("该案件为困境案件,需确认填写基本费用")
|
||||||
|
return
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cancelBtn() {
|
cancelBtn() {
|
||||||
@ -642,12 +659,16 @@ export default {
|
|||||||
async save() {
|
async save() {
|
||||||
if (this.form.supplierOtherAmount > 0) {
|
if (this.form.supplierOtherAmount > 0) {
|
||||||
if (this.form.supplierOtherAmountRemark == '') {
|
if (this.form.supplierOtherAmountRemark == '') {
|
||||||
this.$alert('请填写其他费用说明');
|
this.$toast('请填写其他费用说明');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (this.isBasement && ((this.form.supplierSettleRatio && this.form?.supplierSettleRatio?.code==3)|| this.form?.taskStatus?.code==19002) && !(this.basePriceDisabled || this.isBasementSettle) && (this.form.supplierBasePrice>this.form.startPrice)){
|
||||||
|
this.$toast('取消或服务不成功结算的困境案件,基本费用的填写不能超过起步价');
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (this.accountStatus >= 4) {
|
if (this.accountStatus >= 4) {
|
||||||
this.$alert('已进入后续流程,不允许操作');
|
this.$toast('已进入后续流程,不允许操作');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
@ -701,7 +722,7 @@ export default {
|
|||||||
},
|
},
|
||||||
async confirmAudit() {
|
async confirmAudit() {
|
||||||
if (this.accountStatus >= 4) {
|
if (this.accountStatus >= 4) {
|
||||||
this.$alert('已进入后续流程,不允许操作');
|
this.$toast('已进入后续流程,不允许操作');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.loading1 = true;
|
this.loading1 = true;
|
||||||
@ -952,6 +973,9 @@ img {
|
|||||||
|
|
||||||
.halfOpcity {
|
.halfOpcity {
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
|
.ipt{
|
||||||
|
border: 1px solid #cccccc !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputContent {
|
.inputContent {
|
||||||
|
@ -82,7 +82,7 @@
|
|||||||
<span class="content">{{orderInfo.bridgeAmountBc + ' 元' }}</span>
|
<span class="content">{{orderInfo.bridgeAmountBc + ' 元' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" v-show="bridgeCaState">
|
<div class="item" v-show="bridgeCaState">
|
||||||
<span class="titleLeft">va路桥费:</span>
|
<span class="titleLeft">ca路桥费:</span>
|
||||||
<span class="content">{{orderInfo.bridgeAmountCa + ' 元' }}</span>
|
<span class="content">{{orderInfo.bridgeAmountCa + ' 元' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" v-show="tyreAmountState">
|
<div class="item" v-show="tyreAmountState">
|
||||||
|
Reference in New Issue
Block a user