147 lines
4.7 KiB
JavaScript
Vendored
147 lines
4.7 KiB
JavaScript
Vendored
/**
|
||
* 业务工作台（账单流水数据 › 各子功能）统一前端入口。
|
||
* 对应 Blade：resources/views/business/pages/show.blade.php
|
||
* 路由：/{company_id}/workspace/{section}/{page}/{tab}
|
||
*
|
||
* 店铺收款账户账单(store-receiving-bills)下各 tab：
|
||
* - taobao-alipay → 独立实现 TaobaoAlipayBills（表 ec_alipay_bills）
|
||
* - taobao-wechat / pinduoduo / jd-wallet / jd-transactions / douyin / dewu
|
||
* → 通用实现 AccountBills（表 ec_account_bills，按 bill_type 区分，列配置由后端下发）
|
||
*/
|
||
|
||
require('./../../bootstrap');
|
||
|
||
import Vue from 'vue';
|
||
import TaobaoAlipayBills from './../../components/business/TaobaoAlipayBills.vue';
|
||
import AccountBills from './../../components/business/AccountBills.vue';
|
||
|
||
const GENERIC_TABS = ['taobao-wechat', 'pinduoduo', 'jd-wallet', 'jd-transactions', 'douyin', 'dewu'];
|
||
const STORE_RECEIVING_TABS = ['taobao-alipay', ...GENERIC_TABS];
|
||
|
||
function pageContext(pathname = window.location.pathname) {
|
||
const parts = (pathname || '').split('/').filter(Boolean);
|
||
const idx = parts.indexOf('workspace');
|
||
|
||
if (idx === -1) {
|
||
return { companyId: '', section: '', page: '', tab: '' };
|
||
}
|
||
|
||
return {
|
||
companyId: idx > 0 ? parts[idx - 1] : '',
|
||
section: parts[idx + 1] || '',
|
||
page: parts[idx + 2] || '',
|
||
tab: parts[idx + 3] || '',
|
||
};
|
||
}
|
||
|
||
function resolveComponent(context) {
|
||
const alipayBase = context.companyId
|
||
? `/${context.companyId}/ecommerce-finance/alipay-bills`
|
||
: '/ecommerce-finance/alipay-bills';
|
||
const accountBase = context.companyId
|
||
? `/${context.companyId}/ecommerce-finance/account-bills`
|
||
: '/ecommerce-finance/account-bills';
|
||
|
||
// 店铺收款账户账单 › 淘系支付宝账户（独立实现）
|
||
if (context.page === 'store-receiving-bills' && context.tab === 'taobao-alipay') {
|
||
return { Component: TaobaoAlipayBills, props: { apiBase: alipayBase } };
|
||
}
|
||
|
||
// 店铺收款账户账单 › 其它账户类型（通用实现）
|
||
if (context.page === 'store-receiving-bills' && GENERIC_TABS.indexOf(context.tab) !== -1) {
|
||
return { Component: AccountBills, props: { apiBase: accountBase, billType: context.tab } };
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
const mount = document.querySelector('.business-blank-page');
|
||
|
||
if (mount) {
|
||
const initialContext = pageContext();
|
||
|
||
function isStoreReceivingContext(context) {
|
||
return context.page === 'store-receiving-bills'
|
||
&& STORE_RECEIVING_TABS.indexOf(context.tab) !== -1;
|
||
}
|
||
|
||
function updateActiveTab(tab) {
|
||
document.querySelectorAll('.business-tab-link').forEach((link) => {
|
||
const linkContext = pageContext(new URL(link.href, window.location.origin).pathname);
|
||
const isActive = linkContext.tab === tab;
|
||
|
||
link.classList.toggle('is-active', isActive);
|
||
|
||
if (isActive) {
|
||
link.setAttribute('aria-current', 'page');
|
||
} else {
|
||
link.removeAttribute('aria-current');
|
||
}
|
||
});
|
||
}
|
||
|
||
/* eslint-disable no-new */
|
||
const workspace = new Vue({
|
||
el: mount,
|
||
data: {
|
||
context: initialContext,
|
||
},
|
||
|
||
render(h) {
|
||
const resolved = resolveComponent(this.context);
|
||
|
||
if (resolved) {
|
||
return h(resolved.Component, {
|
||
key: this.context.tab,
|
||
props: resolved.props,
|
||
});
|
||
}
|
||
|
||
return h('div', { class: 'business-page-empty' }, '该页面尚未实现');
|
||
},
|
||
});
|
||
|
||
function navigate(url, pushState = true) {
|
||
const target = new URL(url, window.location.origin);
|
||
const nextContext = pageContext(target.pathname);
|
||
|
||
if (target.origin !== window.location.origin || !isStoreReceivingContext(nextContext)) {
|
||
return false;
|
||
}
|
||
|
||
if (pushState && target.pathname !== window.location.pathname) {
|
||
window.history.pushState({}, '', `${target.pathname}${target.search}${target.hash}`);
|
||
}
|
||
|
||
workspace.context = nextContext;
|
||
updateActiveTab(nextContext.tab);
|
||
|
||
return true;
|
||
}
|
||
|
||
document.addEventListener('click', (event) => {
|
||
const link = event.target.closest('.business-tab-link');
|
||
|
||
if (!link
|
||
|| event.defaultPrevented
|
||
|| event.button !== 0
|
||
|| event.metaKey
|
||
|| event.ctrlKey
|
||
|| event.shiftKey
|
||
|| event.altKey
|
||
) {
|
||
return;
|
||
}
|
||
|
||
if (navigate(link.href)) {
|
||
event.preventDefault();
|
||
}
|
||
});
|
||
|
||
window.addEventListener('popstate', () => {
|
||
navigate(window.location.href, false);
|
||
});
|
||
|
||
updateActiveTab(initialContext.tab);
|
||
}
|