b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

1、新增应付明细

Browse Source 
2、新增应收明细
3、新增异常处置
4、新增风险处置
5、新增在途追踪
6、修复业务模块bug
This commit is contained in:
b2894lxlx
2026-08-13 00:01:23 +08:00
parent 748dd80d4a
commit 6554ad80dd
33 changed files with 7868 additions and 1657 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/backend-stubs/transit/risk-disposal/RiskDisposalBackend.md
+76
View File
@@ -0,0 +1,76 @@
# 风险处置后端接口契约
> 当前仓库为前端工程，无 Java 后端源码。本文件提供 BladeX 后端落库与接口实现契约，路径需放入 `blade-transport` 服务。
## Controller
```java
@RestController
@AllArgsConstructor
@RequestMapping("/risk-disposal")
@Api(value = "风险处置", tags = "风险处置")
public class RiskDisposalController {
private final IRiskDisposalService riskDisposalService;
@GetMapping("/list")
public R<IPage<RiskDisposalVO>> list(RiskDisposalQuery query, Query page) {
IPage<RiskDisposalVO> pages = riskDisposalService.selectRiskDisposalPage(Condition.getPage(page), query);
return R.data(pages);
}
@GetMapping("/detail")
public R<RiskDisposalVO> detail(Long id) {
return R.data(riskDisposalService.detail(id));
}
@PostMapping("/dispose")
public R<Boolean> dispose(@Valid @RequestBody RiskDisposalDTO dto) {
return R.status(riskDisposalService.dispose(dto));
}
@PostMapping("/batch-dispose")
public R<Boolean> batchDispose(@Valid @RequestBody RiskDisposalBatchDTO dto) {
return R.status(riskDisposalService.batchDispose(dto));
}
}
```
## 字段约定
- `riskLevel`: `low` 低，`medium` 中，`high` 高
- `disposalStatus`: `pending` 待处理，`processed` 已处理，`ignored` 已忽略
- `disposalMethod`: `process` 处理，`ignore` 忽略
- 列表默认按 `create_time DESC` 返回
- `riskNo` 由后端生成：`RK + yyyyMMdd + 3位流水号`
## 接口
- `GET /blade-transport/risk-disposal/list`
- `GET /blade-transport/risk-disposal/detail?id=`
- `POST /blade-transport/risk-disposal/dispose`
- `POST /blade-transport/risk-disposal/batch-dispose`
## DTO
```java
@Data
public class RiskDisposalDTO {
@NotNull(message = "风险ID不能为空")
private Long id;
@NotBlank(message = "请选择处理方式")
private String disposalMethod;
@Length(max = 500, message = "处置说明不能超过500个字符")
private String disposalRemark;
}
@Data
public class RiskDisposalBatchDTO {
@NotEmpty(message = "风险ID不能为空")
private List<Long> ids;
@NotBlank(message = "请选择处理方式")
private String disposalMethod;
@Length(max = 500, message = "处置说明不能超过500个字符")
private String disposalRemark;
}
```
docs/backend-stubs/transit/track-tracking/TrackTrackingBackend.md
+27
View File
@@ -0,0 +1,27 @@
# 在途追踪后端接口契约
## 接口
- `GET /blade-transport/track-tracking/map`
- `GET /blade-transport/track-tracking/ship`
## 建议返回
```json
{
"code": 200,
"success": true,
"data": {
"siteName": "XX园区A门",
"address": "南宁市邕宁区龙岗大道21号",
"coordinates": "108.348610;22.721864",
"records": []
}
}
```
## 说明
- `map` 用于轨迹查询
- `ship` 用于船舶查询
- 当前前端先做高德地图占位，后端可先只返回基础信息和轨迹点数组
docs/sql/transit/risk-disposal.sql
+66
View File
@@ -0,0 +1,66 @@
-- 风险处置模块初始化脚本
-- 父菜单：在途管理
INSERT INTO `blade_menu` (
`id`, `parent_id`, `code`, `name`, `alias`, `path`, `source`, `sort`, `category`, `action`, `is_open`,
`remark`, `tenant_id`, `create_user`, `create_dept`, `create_time`, `update_user`, `update_time`, `status`,
`is_deleted`
) VALUES (
'1710000000000000001', 0, 'transit_manage', '在途管理', 'transit_manage', '/transit', 'el-icon-truck',
20, 1, 1, 1, '在途管理父菜单', '000000', 1, 1, NOW(), 1, NOW(), 1, 0
);
INSERT INTO `blade_menu` (
`id`, `parent_id`, `code`, `name`, `alias`, `path`, `source`, `sort`, `category`, `action`, `is_open`,
`remark`, `tenant_id`, `create_user`, `create_dept`, `create_time`, `update_user`, `update_time`, `status`,
`is_deleted`
) VALUES (
'1710000000000000002', '1710000000000000001', 'risk_disposal', '风险处置', 'risk_disposal',
'/transit/risk-disposal', 'el-icon-warning-outline', 20, 1, 1, 1, '风险处置页面',
'000000', 1, 1, NOW(), 1, NOW(), 1, 0
);
INSERT INTO `blade_menu` (
`id`, `parent_id`, `code`, `name`, `alias`, `path`, `source`, `sort`, `category`, `action`, `is_open`,
`remark`, `tenant_id`, `create_user`, `create_dept`, `create_time`, `update_user`, `update_time`, `status`,
`is_deleted`
) VALUES
('1710000000000000003', '1710000000000000002', 'risk_disposal_query', '查询', 'risk_disposal_query', '', '', 10, 2, 1, 1, '风险处置查询权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0),
('1710000000000000004', '1710000000000000002', 'risk_disposal_process', '处理', 'risk_disposal_process', '', '', 20, 2, 1, 1, '风险处置处理权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0),
('1710000000000000005', '1710000000000000002', 'risk_disposal_ignore', '忽略', 'risk_disposal_ignore', '', '', 30, 2, 1, 1, '风险处置忽略权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0),
('1710000000000000006', '1710000000000000002', 'risk_disposal_batch_process', '批量处理', 'risk_disposal_batch_process', '', '', 40, 2, 1, 1, '风险处置批量处理权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0),
('1710000000000000007', '1710000000000000002', 'risk_disposal_batch_ignore', '批量忽略', 'risk_disposal_batch_ignore', '', '', 50, 2, 1, 1, '风险处置批量忽略权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0),
('1710000000000000008', '1710000000000000002', 'risk_disposal_view', '查看', 'risk_disposal_view', '', '', 60, 2, 1, 1, '风险处置查看权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0);
CREATE TABLE IF NOT EXISTS `tms_risk_disposal` (
`id` bigint NOT NULL COMMENT '主键',
`tenant_id` varchar(12) DEFAULT '000000' COMMENT '租户ID',
`risk_no` varchar(30) NOT NULL COMMENT '风险编号',
`rule_name` varchar(50) NOT NULL COMMENT '规则名称',
`waybill_id` bigint DEFAULT NULL COMMENT '运单ID',
`waybill_no` varchar(30) DEFAULT NULL COMMENT '运单号',
`project_id` bigint DEFAULT NULL COMMENT '项目ID',
`project_name` varchar(50) DEFAULT NULL COMMENT '项目名称',
`risk_level` varchar(20) NOT NULL COMMENT '风险等级：low/medium/high',
`transport_type` varchar(20) DEFAULT NULL COMMENT '运输类型',
`risk_description` varchar(500) DEFAULT NULL COMMENT '风险描述',
`trigger_time` datetime DEFAULT NULL COMMENT '触发时间',
`disposal_status` varchar(20) NOT NULL DEFAULT 'pending' COMMENT '处理状态：pending/processed/ignored',
`disposal_method` varchar(20) DEFAULT NULL COMMENT '处理方式：process/ignore',
`disposal_remark` varchar(500) DEFAULT NULL COMMENT '处置说明',
`dispose_user` bigint DEFAULT NULL COMMENT '处置人',
`dispose_user_name` varchar(50) DEFAULT NULL COMMENT '处置人名称',
`dispose_time` datetime DEFAULT NULL COMMENT '处置时间',
`create_user` bigint DEFAULT NULL COMMENT '创建人',
`create_dept` bigint DEFAULT NULL COMMENT '创建部门',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_user` bigint DEFAULT NULL COMMENT '更新人',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
`status` int DEFAULT 1 COMMENT '状态',
`is_deleted` int DEFAULT 0 COMMENT '是否已删除',
PRIMARY KEY (`id`),
UNIQUE KEY `uk_tms_risk_disposal_no` (`risk_no`),
KEY `idx_tms_risk_disposal_status` (`disposal_status`),
KEY `idx_tms_risk_disposal_level` (`risk_level`),
KEY `idx_tms_risk_disposal_waybill` (`waybill_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='风险处置';
docs/sql/transit/track-tracking.sql
+29
View File
@@ -0,0 +1,29 @@
-- 在途追踪模块初始化脚本
INSERT INTO `blade_menu` (
`id`, `parent_id`, `code`, `name`, `alias`, `path`, `source`, `sort`, `category`, `action`, `is_open`,
`remark`, `tenant_id`, `create_user`, `create_dept`, `create_time`, `update_user`, `update_time`, `status`,
`is_deleted`
) VALUES (
'1720000000000000001', 0, 'transit_manage', '在途管理', 'transit_manage', '/transit', 'el-icon-truck',
20, 1, 1, 1, '在途管理父菜单', '000000', 1, 1, NOW(), 1, NOW(), 1, 0
);
INSERT INTO `blade_menu` (
`id`, `parent_id`, `code`, `name`, `alias`, `path`, `source`, `sort`, `category`, `action`, `is_open`,
`remark`, `tenant_id`, `create_user`, `create_dept`, `create_time`, `update_user`, `update_time`, `status`,
`is_deleted`
) VALUES (
'1720000000000000002', '1720000000000000001', 'track_tracking', '在途追踪', 'track_tracking',
'/transit/track-tracking', 'el-icon-position', 10, 1, 1, 1, '在途追踪页面',
'000000', 1, 1, NOW(), 1, NOW(), 1, 0
);
INSERT INTO `blade_menu` (
`id`, `parent_id`, `code`, `name`, `alias`, `path`, `source`, `sort`, `category`, `action`, `is_open`,
`remark`, `tenant_id`, `create_user`, `create_dept`, `create_time`, `update_user`, `update_time`, `status`,
`is_deleted`
) VALUES
('1720000000000000003', '1720000000000000002', 'track_tracking_query', '查询', 'track_tracking_query', '', '', 10, 2, 1, 1, '在途追踪查询权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0),
('1720000000000000004', '1720000000000000002', 'track_tracking_ship_query', '船舶查询', 'track_tracking_ship_query', '', '', 20, 2, 1, 1, '在途追踪船舶查询权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0),
('1720000000000000005', '1720000000000000002', 'track_tracking_refresh', '刷新', 'track_tracking_refresh', '', '', 30, 2, 1, 1, '在途追踪刷新权限', '000000', 1, 1, NOW(), 1, NOW(), 1, 0);
src/api/business/voucher-manage.js
+39
View File
@@ -0,0 +1,39 @@
import request from '@/axios';
const baseUrl = '/blade-transport/voucher-manage';
export const getList = (current, size, params) =>
request({ url: `${baseUrl}/list`, method: 'get', params: { current, size, ...params } });
export const getDetail = id => request({ url: `${baseUrl}/detail`, method: 'get', params: { id } });
export const submit = data => request({ url: `${baseUrl}/submit`, method: 'post', data });
export const createUploadDraft = data =>
request({ url: `${baseUrl}/upload-draft`, method: 'post', data });
export const completeUploadFile = data =>
request({ url: `${baseUrl}/complete-upload-file`, method: 'post', data });
export const remove = id => request({ url: `${baseUrl}/remove`, method: 'post', params: { id } });
export const getWaybillBatches = (current, size, params) =>
request({
url: `${baseUrl}/waybill-batches`,
method: 'get',
params: { current, size, ...params },
});
const fileTaskBaseUrl = '/blade-file/fileTask';
export const queryFileTask = md5 =>
request({ url: `${fileTaskBaseUrl}/queryFileTask`, method: 'get', params: { md5 } });
export const getFileTask = id =>
request({ url: `${fileTaskBaseUrl}/queryFileTask`, method: 'get', params: { id } });
export const createFileTask = data =>
request({ url: `${fileTaskBaseUrl}/createFileTask`, method: 'post', data });
export const getPartUploadUrl = (id, partNumber) =>
request({ url: `${fileTaskBaseUrl}/getUploadUrl`, method: 'get', params: { id, partNumber } });
export const updateFileTask = data =>
request({ url: `${fileTaskBaseUrl}/updateFileTask`, method: 'post', data });
export const pauseFileTask = ids =>
request({ url: `${fileTaskBaseUrl}/updatePaused`, method: 'post', params: { ids: ids.join(',') } });
export const resumeFileTask = id =>
request({ url: `${fileTaskBaseUrl}/resume`, method: 'post', params: { id } });
export const getFileTaskList = (current, size, params) =>
request({ url: `${fileTaskBaseUrl}/list`, method: 'get', params: { current, size, ...params } });
export const getFileTaskUrl = id =>
request({ url: `${fileTaskBaseUrl}/file-url`, method: 'get', params: { id } });
src/api/business/waybill-manage.js
+6 -1
View File
@@ -13,6 +13,12 @@ export const cancel = api.cancel;
export const reassign = api.reassign;
export const complete = api.complete;
export const batchComplete = api.batchComplete;
export const changeRoute = data =>
request({
url: `${baseUrl}/change-route`,
method: 'post',
data,
});
export const roadLoading = ids =>
request({
url: `${baseUrl}/road-loading`,
@@ -26,7 +32,6 @@ export const getImportBatches = params => request({ url: `${baseUrl}/import-batc
export const getImportDetails = params => request({ url: `${baseUrl}/import-batch/details`, method: 'get', params });
export const removeImportBatches = ids => request({ url: `${baseUrl}/import-batch/remove`, method: 'post', params: { ids } });
export const getImportOptions = () => request({ url: `${baseUrl}/import-batch/options`, method: 'get' });
export const getImportContracts = projectId => request({ url: `${baseUrl}/import-batch/contracts`, method: 'get', params: { projectId } });
export const exportImportTemplate = () => request({ url: `${baseUrl}/import-batch/export-template`, method: 'get', responseType: 'blob' });
export const saveImportDraft = data => request({ url: `${baseUrl}/import-batch/draft`, method: 'post', data });
export const confirmImport = data => request({ url: `${baseUrl}/import-batch/confirm`, method: 'post', data });
src/api/settlement/receivable-payable-detail.js
+54
View File
@@ -0,0 +1,54 @@
import request from '@/axios';
const baseUrl = '/blade-transport/receivable-payable-detail';
export const getList = (current, size, params) =>
request({ url: `${baseUrl}/list`, method: 'get', params: { current, size, ...params } });
export const getFeeDetail = id =>
request({ url: `${baseUrl}/fee-detail`, method: 'get', params: { id } });
export const getChangeRecords = (current, size, params) =>
request({
url: `${baseUrl}/change-records`,
method: 'get',
params: { current, size, ...params },
});
export const updateFee = data =>
request({ url: `${baseUrl}/update-fee`, method: 'post', data });
export const transferSettlement = data =>
request({ url: `${baseUrl}/transfer-settlement`, method: 'post', data });
export const getTransferCandidates = (current, size, params) =>
request({
url: `${baseUrl}/transfer-candidates`,
method: 'get',
params: { current, size, ...params },
});
export const getGenerateWaybills = (current, size, params) =>
request({
url: `${baseUrl}/generate-waybills`,
method: 'get',
params: { current, size, ...params },
});
export const getGeneratePreview = (current, size, params) =>
request({
url: `${baseUrl}/generate-preview`,
method: 'get',
params: { current, size, ...params },
});
export const generateFee = data =>
request({ url: `${baseUrl}/generate-fee`, method: 'post', data });
export const exportDetail = params =>
request({
url: `${baseUrl}/export-receivable-payable-detail`,
method: 'get',
params,
responseType: 'blob',
});
src/api/transit/exception-disposal.js
+15
View File
@@ -0,0 +1,15 @@
import request from '@/axios';
const baseUrl = '/blade-transport/exception-disposal';
export const getList = (current, size, params) =>
request({ url: `${baseUrl}/list`, method: 'get', params: { current, size, ...params } });
export const getDetail = id => request({ url: `${baseUrl}/detail`, method: 'get', params: { id } });
export const follow = data => request({ url: `${baseUrl}/follow`, method: 'post', data });
export const complete = data => request({ url: `${baseUrl}/complete`, method: 'post', data });
export const batchComplete = ids =>
request({ url: `${baseUrl}/batch-complete`, method: 'post', params: { ids } });
src/api/transit/risk-disposal.js
+13
View File
@@ -0,0 +1,13 @@
import request from '@/axios';
const baseUrl = '/blade-transport/risk-disposal';
export const getList = (current, size, params) =>
request({ url: `${baseUrl}/list`, method: 'get', params: { current, size, ...params } });
export const getDetail = id => request({ url: `${baseUrl}/detail`, method: 'get', params: { id } });
export const dispose = data => request({ url: `${baseUrl}/dispose`, method: 'post', data });
export const batchDispose = data =>
request({ url: `${baseUrl}/batch-dispose`, method: 'post', data });
src/api/transit/track-tracking.js
+9
View File
@@ -0,0 +1,9 @@
import request from '@/axios';
const baseUrl = '/blade-transport/track-tracking';
export const getTrackingMap = params =>
request({ url: `${baseUrl}/map`, method: 'get', params });
export const getShipTracking = params =>
request({ url: `${baseUrl}/ship`, method: 'get', params });
src/option/business/common.js
+15 -1
View File
@@ -36,7 +36,6 @@ export const planStatusOptions = [
{ label: '待调度', value: 'waiting_dispatch' },
{ label: '调度中', value: 'dispatching' },
{ label: '已完成', value: 'completed' },
{ label: '已取消', value: 'cancelled' },
];
export const waybillStatusOptions = [
@@ -209,6 +208,21 @@ export const createCrudOption = columns => ({
column: columns,
});
export const withSearchPlaceholders = columns =>
columns.map(column => {
if (!column.search || column.searchPlaceholder) return column;
if (column.type === 'date' || column.type === 'datetime' || column.searchRange) return column;
const isSelectSearch =
column.type === 'select' ||
column.searchType === 'select' ||
Boolean(column.dicData) ||
Boolean(column.dicUrl);
return {
...column,
searchPlaceholder: isSelectSearch ? '请选择' : '请输入',
};
});
export const auditColumns = [
{
label: '创建人',
src/option/business/loading-manage.js
+19 -1
View File
@@ -8,7 +8,7 @@ export const transportTypeDict = {
},
};
export const carrierTypeOptions = ['承运商', '自运', '网签平台'];
export const carrierTypeOptions = ['承运商', '自运', '网货平台'];
export const loadingStatusOptions = [
{ label: '草稿', value: 'draft' },
@@ -28,6 +28,24 @@ export const loadingManageConfig = {
permission: 'loading_manage',
exportUrl: '/blade-transport/loading-manage/export-loading-manage',
exportName: '配载管理',
exportColumns: [
{ prop: 'loadingNo', label: '配载单号' },
{ prop: 'loadingSubNos', label: '配载子单号' },
{ prop: 'vehicleNo', label: '车牌号/航班号/船号/班列号' },
{ prop: 'driverName', label: '司机' },
{ prop: 'driverPhone', label: '联系电话' },
{ prop: 'carrierType', label: '承运类型' },
{ prop: 'departureAddress', label: '发货地' },
{ prop: 'transitAddress', label: '途经地' },
{ prop: 'arrivalAddress', label: '到货地' },
{ prop: 'carrierName', label: '承运商' },
{ prop: 'transportType', label: '运输类型' },
{ prop: 'dataSource', label: '数据来源' },
{ prop: 'createTime', label: '创建时间' },
{ prop: 'updateTime', label: '更新时间' },
{ prop: 'currentProcessNode', label: '过程节点' },
{ prop: 'businessStatus', label: '状态' },
],
createText: '新建配载',
batchCompleteText: '批量完成',
statusProp: 'businessStatus',
src/option/business/shipping-template.js
+49 -5
View File
@@ -1,4 +1,11 @@
import { auditColumns, createCrudOption, selectRule, textRule, transportTypeOptions } from './common';
import {
auditColumns,
createCrudOption,
selectRule,
textRule,
transportTypeOptions,
withSearchPlaceholders,
} from './common';
const templateTypeOptions = [
{ label: '运输计划', value: '运输计划' },
@@ -10,8 +17,31 @@ export const config = {
permission: 'shipping_template',
exportUrl: '/blade-transport/shipping-template/export-shipping-template',
exportName: '发货模板',
tableColumnOrder: [
'templateCode',
'templateName',
'templateType',
'transportType',
'createUserName',
'remark',
'updateTime',
'createTime',
],
exportColumns: [
{ prop: 'templateCode', label: '模板编号' },
{ prop: 'templateName', label: '模板名称' },
{ prop: 'templateType', label: '模板类型' },
{ prop: 'transportType', label: '运输类型' },
{ prop: 'createUserName', label: '创建人' },
{ prop: 'remark', label: '备注' },
{ prop: 'updateTime', label: '更新时间' },
{ prop: 'createTime', label: '创建时间' },
],
enableAllDept: false,
enableProjectSelect: true,
projectQueryParams: {
approvalStatuses: 'approved,change_approved',
},
excludeVoidedProjects: true,
enableAttachmentTable: true,
enableTransportPlanForm: true,
@@ -41,7 +71,8 @@ export const config = {
};
export const option = {
...createCrudOption([
...createCrudOption(
withSearchPlaceholders([
{
label: '',
prop: 'templateInfoTitle',
@@ -61,6 +92,7 @@ export const option = {
minWidth: 170,
disabled: true,
placeholder: '系统自动生成',
display: true,
},
{
label: '模板名称',
@@ -71,6 +103,7 @@ export const option = {
order: 380,
minWidth: 150,
rules: textRule('模板名称', 50, true),
display: true,
},
{
label: '模板类型',
@@ -83,6 +116,7 @@ export const option = {
dicData: templateTypeOptions,
minWidth: 120,
rules: selectRule('模板类型'),
display: true,
},
{
label: '备注',
@@ -95,6 +129,7 @@ export const option = {
maxlength: 200,
showWordLimit: true,
rules: textRule('备注', 200),
display: true,
},
{
label: '',
@@ -115,6 +150,7 @@ export const option = {
order: 340,
minWidth: 150,
rules: textRule('项目', 100, true),
display: true,
},
{
label: '客户合同',
@@ -124,6 +160,7 @@ export const option = {
order: 330,
minWidth: 160,
rules: textRule('客户合同', 100, true),
display: true,
},
{
label: '运输方式',
@@ -134,6 +171,7 @@ export const option = {
dicData: transportTypeOptions,
minWidth: 130,
rules: selectRule('运输方式'),
display: true,
},
{
label: '',
@@ -152,6 +190,7 @@ export const option = {
order: 300,
minWidth: 220,
rules: textRule('发货地址', 255, true),
display: true,
},
{
label: '收货地址',
@@ -161,6 +200,7 @@ export const option = {
order: 290,
minWidth: 220,
rules: textRule('收货地址', 255, true),
display: true,
},
{
label: '',
@@ -211,8 +251,12 @@ export const option = {
{ label: '收货地', prop: 'arrivalName', hide: true, display: false },
{ label: '收货联系人', prop: 'arrivalContact', hide: true, display: false },
{ label: '收货联系方式', prop: 'arrivalPhone', hide: true, display: false },
{ label: '所属组织', prop: 'deptName', minWidth: 150, addDisplay: false, editDisplay: false },
...auditColumns,
]),
{ label: '所属组织', prop: 'deptName', minWidth: 150, addDisplay: false, editDisplay: false, display: false },
...auditColumns.map(column => ({
...column,
display: false,
})),
])
),
dialogWidth: '96%',
};
src/option/business/transport-plan.js
+65 -11
View File
@@ -6,6 +6,7 @@ import {
planStatusOptions,
selectRule,
textRule,
withSearchPlaceholders,
} from './common';
const listDicFormatter = res => {
@@ -104,8 +105,55 @@ const formatGoodsInfo = row => {
return text || row.goodsInfo || '';
};
const formatDispatchProgress = row =>
row.dispatchProgressName || row.dispatchProgress || row.progress || '';
const parseDispatchRows = row => {
const sources = [
row.dispatchRows,
row.dispatchList,
row.dispatchRecords,
row.waybillList,
row.waybillRows,
];
for (const source of sources) {
const rows = parseGoodsRows(source);
if (rows.length) return rows;
}
return [];
};
const formatDispatchQuantity = value => {
const number = Number(value || 0);
if (!Number.isFinite(number)) return '0';
const fixed = Math.round((number + Number.EPSILON) * 1000) / 1000;
return Number.isInteger(fixed) ? String(fixed) : String(fixed).replace(/\.?0+$/, '');
};
const formatDispatchProgress = row => {
const goodsRows = parseGoodsRows(row.goodsJson);
const totalRows = goodsRows.length ? goodsRows : [row];
const dispatchRows = parseDispatchRows(row);
const summary = new Map();
const add = (item, field) => {
const unit = item.quantityUnit || item.goodsQuantityUnit || item.unit || '吨';
const quantity = Number(item.quantity || item.cargoQuantity || item.goodsQuantity || 0);
if (!summary.has(unit)) summary.set(unit, { total: 0, assigned: 0 });
if (Number.isFinite(quantity)) summary.get(unit)[field] += quantity;
};
totalRows.forEach(item => add(item, 'total'));
dispatchRows.forEach(item => add(item, 'assigned'));
if (!dispatchRows.length) {
const assigned = Number(row.dispatchedQuantity || row.dispatchQuantity || 0);
if (Number.isFinite(assigned)) {
const unit = row.quantityUnit || row.goodsQuantityUnit || row.unit || '吨';
if (!summary.has(unit)) summary.set(unit, { total: 0, assigned: 0 });
summary.get(unit).assigned = assigned;
}
}
const lines = Array.from(summary.entries()).map(
([unit, item]) => `${formatDispatchQuantity(item.assigned)}/${formatDispatchQuantity(item.total)}${unit}`
);
return lines.length ? lines.join('\n') : row.dispatchProgressName || row.dispatchProgress || row.progress || '';
};
const auditColumn = prop => ({ ...auditColumns.find(item => item.prop === prop) });
@@ -116,6 +164,9 @@ export const config = {
exportName: '运输计划',
enableAllDept: false,
enableProjectSelect: true,
projectQueryParams: {
approvalStatuses: 'approved,change_approved',
},
templateCreateTarget: 'transport-plan',
enableAttachmentTable: true,
enableTransportPlanForm: true,
@@ -128,10 +179,10 @@ export const config = {
planStartDateRange: ['planStartDateStart', 'planStartDateEnd'],
planEndDateRange: ['planEndDateStart', 'planEndDateEnd'],
},
actions: ['copy', 'cancel', 'complete'],
actions: ['copy', 'complete'],
statusProp: 'businessStatus',
statusTextProp: 'businessStatusName',
deleteStatus: ['draft'],
deleteStatus: ['draft', 'waiting_dispatch'],
editStatus: ['draft', 'waiting_dispatch'],
detailButton: true,
detailSections: [
@@ -177,7 +228,7 @@ export const config = {
action: 'dispatch',
label: '调度',
statusProp: 'businessStatus',
status: ['waiting_dispatch'],
status: ['waiting_dispatch', 'dispatching'],
permission: 'transport_plan_edit',
confirm: '确定调度该运输计划?',
},
@@ -185,7 +236,8 @@ export const config = {
};
export const option = {
...createCrudOption([
...createCrudOption(
withSearchPlaceholders([
{
label: '',
prop: 'basicInfoTitle',
@@ -249,6 +301,9 @@ export const option = {
prop: 'dispatchProgress',
formatter: row => formatDispatchProgress(row),
minWidth: 120,
className: 'business-crud-page__dispatch-progress-cell',
overHidden: false,
showOverflowTooltip: false,
addDisplay: false,
editDisplay: false,
viewDisplay: false,
@@ -306,24 +361,22 @@ export const option = {
{
label: '计划开始日期',
prop: 'planStartDate',
sortable: true,
type: 'date',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
span: 6,
order: 350,
minWidth: 130,
minWidth: 150,
},
{
label: '计划结束日期',
prop: 'planEndDate',
sortable: true,
type: 'date',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
span: 6,
order: 340,
minWidth: 130,
minWidth: 150,
},
{
label: '数据来源',
@@ -546,6 +599,7 @@ export const option = {
labelWidth: '0px',
className: 'business-crud-page__full-form-item',
},
]),
])
),
dialogWidth: '96%',
};
src/option/business/waybill-manage.js
+118 -27
View File
@@ -6,6 +6,7 @@ import {
selectRule,
textRule,
waybillStatusOptions,
withSearchPlaceholders,
} from './common';
const transportTypeDict = {
@@ -32,23 +33,34 @@ const parseJsonArray = value => {
}
};
const hasProcessConfig = value => {
if (isEmpty(value)) return false;
if (typeof value !== 'string') {
return Array.isArray(value) ? value.length > 0 : typeof value === 'object';
}
const text = value.trim();
if (!text) return false;
const parseJsonObject = value => {
if (!value) return {};
if (typeof value === 'object' && !Array.isArray(value)) return value;
if (typeof value !== 'string' || !value.trim()) return {};
try {
const result = JSON.parse(text);
return Array.isArray(result)
? result.length > 0
: Boolean(result && Object.keys(result).length);
const result = JSON.parse(value);
return result && typeof result === 'object' && !Array.isArray(result) ? result : {};
} catch (error) {
return true;
return {};
}
};
const parseProcessNodes = value => {
const result = parseJsonArray(value);
if (result.length) return result;
if (!value || typeof value !== 'object' || Array.isArray(value)) return [];
return Array.isArray(value.nodes) ? value.nodes : [];
};
const requiresDriverAcceptConfirmation = processJson =>
parseProcessNodes(processJson).some(
node =>
(node.key === 'accept' || node.name === '接单') &&
node.enabled !== false &&
node.confirmMode === 'yes' &&
node.confirmDriver === true
);
const getFirstValue = (row, props) => {
const prop = props.find(item => !isEmpty(row[item]));
return prop ? row[prop] : '';
@@ -105,6 +117,60 @@ const formatUnitPrice = row => {
const formatAmount = (row, props) => getFirstValue(row, props);
const sumAmount = list =>
list.reduce((sum, item) => {
const value = getFirstValue(item, ['freightAmount', 'amount', 'totalAmount']);
return isEmpty(value) ? sum : sum + Number(value || 0);
}, 0);
const calculateFreightTotal = rows => {
if (!rows.length) return '';
let hasAmountField = false;
const total = rows.reduce((sum, item) => {
const amount = getFirstValue(item, ['freightAmount', 'amount']);
if (!isEmpty(amount)) {
hasAmountField = true;
return sum + Number(amount || 0);
}
if (isEmpty(item?.unitPrice) || isEmpty(item?.quantity)) return sum;
hasAmountField = true;
return sum + Number(item.unitPrice || 0) * Number(item.quantity || 0);
}, 0);
if (!hasAmountField) return '';
return Number.isFinite(total) ? Number(total.toFixed(2)).toString() : '';
};
const formatFreight = row => {
const value = formatAmount(row, ['freight', 'freightAmount', 'transportFee']);
if (!isEmpty(value)) return value;
const freight = parseJsonObject(row.freightJson);
const freightValue = getFirstValue(freight, ['freightAmount', 'transportFee']);
if (!isEmpty(freightValue)) return freightValue;
const total = sumAmount(Array.isArray(freight.freightItems) ? freight.freightItems : []);
return total ? total : '';
};
const formatOtherFeeTotal = row => {
const value = formatAmount(row, ['otherFeeTotal', 'otherAmount', 'otherFeeAmount']);
return Number(value) === -1 ? '' : value;
};
const formatFreightTotal = row => {
const freight = parseJsonObject(row.freightJson);
const freightItems = Array.isArray(freight.freightItems) ? freight.freightItems : [];
const goodsRows = getGoodsRows(row);
const calculated = calculateFreightTotal(freightItems.length ? freightItems : goodsRows);
const otherFee = getFirstValue(freight, ['otherFreightAmount', 'otherFeeTotal']);
const otherFeeTotal = !isEmpty(otherFee) ? otherFee : formatOtherFeeTotal(row);
if (!isEmpty(calculated)) {
const total = Number(calculated || 0) + Number(otherFeeTotal || 0);
return Number.isFinite(total) ? Number(total.toFixed(2)).toString() : calculated;
}
const value = getFirstValue(freight, ['totalFreightAmount', 'totalFreight', 'totalAmount']);
if (!isEmpty(value)) return value;
return formatAmount(row, ['freightTotal', 'totalFreight', 'totalAmount']);
};
const auditColumn = prop => ({ ...auditColumns.find(item => item.prop === prop) });
export const config = {
@@ -120,10 +186,15 @@ export const config = {
},
enableAllDept: false,
enableProjectSelect: true,
projectQueryParams: {
approvalStatuses: 'approved,change_approved',
},
templateCreateTarget: 'waybill-manage',
enableContractSelect: true,
enableShippingPlanSelect: true,
enableShippingInfoForm: true,
enableAttachmentTable: true,
attachmentTitle: '附件',
fixedTransportAddressType: true,
enableTaskInfoForm: true,
enableWaybillFooterFreightSummary: true,
@@ -146,13 +217,14 @@ export const config = {
createTimeRange: ['createTimeStart', 'createTimeEnd'],
},
actions: ['copy', 'cancel', 'reassign', 'complete', 'batchComplete'],
detailButton: true,
statusProp: 'businessStatus',
statusTextProp: 'businessStatusName',
formatStatus(row, prop, defaultText) {
if (
prop === 'businessStatus' &&
row.businessStatus === 'pending' &&
!hasProcessConfig(row.processJson)
!requiresDriverAcceptConfirmation(row.processJson)
) {
return '进行中';
}
@@ -163,7 +235,8 @@ export const config = {
};
export const option = {
...createCrudOption([
...createCrudOption(
withSearchPlaceholders([
{
label: '',
prop: 'basicInfoTitle',
@@ -190,6 +263,8 @@ export const option = {
span: 6,
order: 840,
minWidth: 140,
addDisplay: false,
editDisplay: false,
},
{
label: '总单号',
@@ -200,12 +275,15 @@ export const option = {
span: 6,
order: 830,
minWidth: 140,
addDisplay: false,
editDisplay: false,
},
{
label: '项目',
label: '项目名称',
prop: 'projectName',
formslot: true,
search: true,
searchLabel: '项目',
searchOrder: 22,
span: 6,
order: 890,
@@ -366,7 +444,7 @@ export const option = {
{
label: '运费',
prop: 'freight',
formatter: row => formatAmount(row, ['freight', 'freightAmount', 'transportFee']),
formatter: row => formatFreightTotal(row),
minWidth: 120,
addDisplay: false,
editDisplay: false,
@@ -375,7 +453,7 @@ export const option = {
{
label: '其他费用合计',
prop: 'otherFeeTotal',
formatter: row => formatAmount(row, ['otherFeeTotal', 'otherAmount', 'otherFeeAmount']),
formatter: row => formatOtherFeeTotal(row),
minWidth: 140,
addDisplay: false,
editDisplay: false,
@@ -384,7 +462,7 @@ export const option = {
{
label: '运费合计',
prop: 'freightTotal',
formatter: row => formatAmount(row, ['freightTotal', 'totalFreight', 'totalAmount']),
formatter: row => formatFreightTotal(row),
minWidth: 120,
addDisplay: false,
editDisplay: false,
@@ -400,7 +478,7 @@ export const option = {
rules: textRule('客户合同', 100, true),
},
{
label: '发货计划',
label: '计划名称',
prop: 'planName',
formslot: true,
search: true,
@@ -437,6 +515,8 @@ export const option = {
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
minWidth: 170,
addDisplay: false,
editDisplay: false,
},
{
label: '实际完成时间',
@@ -446,6 +526,8 @@ export const option = {
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
minWidth: 170,
addDisplay: false,
editDisplay: false,
},
{
label: '原始单号',
@@ -673,16 +755,24 @@ export const option = {
viewDisplay: false,
},
{
label: '附件',
label: '',
prop: 'attachmentTitle',
formslot: true,
span: 24,
order: 750,
hide: true,
labelWidth: 0,
},
{
label: '',
prop: 'attachmentsJson',
type: 'textarea',
minRows: 3,
formslot: true,
span: 24,
order: 740,
hide: true,
display: false,
addDisplay: false,
editDisplay: false,
viewDisplay: false,
labelWidth: '0px',
className: 'business-crud-page__full-form-item',
},
{
label: '所属组织',
@@ -735,7 +825,7 @@ export const option = {
display: false,
},
{
label: '发货计划ID',
label: '计划名称ID',
prop: 'planId',
hide: true,
display: false,
@@ -759,7 +849,8 @@ export const option = {
hide: true,
display: false,
},
]),
])
),
dialogWidth: '96%',
dialogTop: '10px',
menuWidth: 280,
src/option/settlement/receivable-payable-detail.js
+126
View File
@@ -0,0 +1,126 @@
export const settlementTypeOptions = [
{ label: '应收', value: 'receivable' },
{ label: '应付', value: 'payable' },
];
export const settlementStatusOptions = [
{ label: '待结算', value: 'pending' },
{ label: '已转预结算', value: 'pre_settled' },
{ label: '已转正式结算', value: 'formal_settled' },
{ label: '已关闭', value: 'closed' },
];
export const searchFields = [
{ label: '单据号', prop: 'documentNo', type: 'input' },
{ label: '生成日期', prop: 'generateDateRange', type: 'daterange' },
{ label: '客户名称', prop: 'customerName', type: 'input' },
{ label: '所属组织', prop: 'deptName', type: 'input' },
{ label: '项目名称', prop: 'projectName', type: 'input' },
{ label: '货物类型', prop: 'cargoType', type: 'input' },
{ label: '货物名称', prop: 'cargoName', type: 'input' },
{ label: '合同编号', prop: 'contractNo', type: 'input' },
{ label: '合同名称', prop: 'contractName', type: 'input' },
{ label: '预结算单号', prop: 'preSettlementNo', type: 'input' },
{ label: '正式结算单号', prop: 'formalSettlementNo', type: 'input' },
{ label: '批次号', prop: 'batchNo', type: 'input' },
{ label: '车号', prop: 'vehicleNo', type: 'input' },
];
export const tableColumns = [
{ label: '单据号', prop: 'documentNo', minWidth: 180, link: true },
{ label: '项目名称', prop: 'projectName', minWidth: 120 },
{ label: '所属组织', prop: 'deptName', minWidth: 120 },
{ label: '费用日期', prop: 'feeDate', minWidth: 120 },
{ label: '客商名称', prop: 'customerName', minWidth: 130 },
{ label: '合同编号', prop: 'contractNo', minWidth: 140 },
{ label: '合同名称', prop: 'contractName', minWidth: 140 },
{ label: '来源', prop: 'sourceType', minWidth: 110 },
{ label: '预结算单号', prop: 'preSettlementNo', minWidth: 140, link: true },
{ label: '正式结算单号', prop: 'formalSettlementNo', minWidth: 140, link: true },
{ label: '运单号', prop: 'waybillNo', minWidth: 140 },
{ label: '车号', prop: 'vehicleNo', minWidth: 120 },
{ label: '运输类型', prop: 'transportType', minWidth: 120 },
{ label: '货物名称', prop: 'cargoName', minWidth: 130 },
{ label: '货物类型', prop: 'cargoType', minWidth: 120 },
{ label: '运输总量', prop: 'transportQuantity', minWidth: 120, align: 'right' },
{ label: '里程（KM）', prop: 'mileage', minWidth: 120, align: 'right' },
{ label: '批次号', prop: 'batchNo', minWidth: 120 },
{ label: '运输单价', prop: 'unitPriceText', minWidth: 120, align: 'right' },
{ label: '运输费', prop: 'freightAmountText', minWidth: 120, align: 'right' },
{ label: '其它费用', prop: 'otherFeeAmountText', minWidth: 120, align: 'right' },
{ label: '费用合计', prop: 'totalAmountText', minWidth: 130, align: 'right' },
{ label: '状态', prop: 'settlementStatusName', minWidth: 120 },
{ label: '创建人', prop: 'createUserName', minWidth: 120 },
{ label: '创建时间', prop: 'createTime', minWidth: 170 },
];
export const feeDetailBaseColumns = [
{ label: '货物名称', prop: 'cargoName', minWidth: 140 },
{ label: '货物类型', prop: 'cargoType', minWidth: 130 },
{ label: '规格', prop: 'specification', minWidth: 120 },
{ label: '型号', prop: 'model', minWidth: 120 },
{ label: '运费计费要素', prop: 'billingFactor', minWidth: 130 },
{ label: '运费计费类型', prop: 'billingType', minWidth: 130 },
{ label: '运输量', prop: 'transportQuantityText', minWidth: 120 },
{ label: '运费计算单位', prop: 'priceUnit', minWidth: 130 },
{ label: '运输单价', prop: 'unitPrice', minWidth: 120, align: 'right' },
{ label: '里程（KM）', prop: 'mileage', minWidth: 120, align: 'right' },
{ label: '运输费', prop: 'freightAmount', minWidth: 120, align: 'right' },
];
export const feeDetailTailColumns = [
{ label: '原总金额', prop: 'originalAmountText', minWidth: 120, align: 'right' },
{ label: '调整金额', prop: 'adjustAmountText', minWidth: 120, align: 'right' },
{ label: '调整后总金额', prop: 'afterAmountText', minWidth: 140, align: 'right' },
{ label: '备注', prop: 'remark', minWidth: 160 },
{ label: '最后录入人', prop: 'updateUserName', minWidth: 120 },
{ label: '最后录入时间', prop: 'updateTime', minWidth: 170 },
];
export const changeRecordColumns = [
{ label: '行号', prop: 'lineNo', minWidth: 120 },
{ label: '货物名称', prop: 'cargoName', minWidth: 140 },
{ label: '变更内容', prop: 'changeContent', minWidth: 260 },
{ label: '调整人', prop: 'adjustUserName', minWidth: 140 },
{ label: '调整原因', prop: 'adjustReason', minWidth: 180 },
{ label: '调整时间', prop: 'adjustTime', minWidth: 170 },
];
export const updateFeeFormFields = [
{ label: '更新范围', prop: 'contractId', required: true },
{ label: '合同计费方案', prop: 'billingPlanId' },
];
export const transferSearchFields = [
{ label: '合同名称', prop: 'contractName', type: 'input' },
{ label: '批次号', prop: 'batchNo', type: 'input' },
{ label: '生成日期', prop: 'generateDateRange', type: 'daterange' },
];
export const generateSearchFields = [
{ label: '运单合同', prop: 'contractId', required: true },
{ label: '计费方案', prop: 'billingPlanId', required: true },
{ label: '批次号', prop: 'batchNo' },
{ label: '运单完成日期', prop: 'finishDateRange', type: 'daterange' },
];
export const generateWaybillColumns = [
{ label: '运单号', prop: 'waybillNo', minWidth: 160, link: true },
{ label: '项目名称', prop: 'projectName', minWidth: 160 },
{ label: '客户/委托方', prop: 'customerName', minWidth: 160 },
{ label: '车牌号/航班号/船号/班列号', prop: 'vehicleNo', minWidth: 190 },
{ label: '司机', prop: 'driverName', minWidth: 120 },
{ label: '承运商', prop: 'carrierName', minWidth: 160 },
{ label: '运输类型', prop: 'transportType', minWidth: 130 },
{ label: '承运类型', prop: 'carrierType', minWidth: 130 },
{ label: '货物信息', prop: 'cargoInfo', minWidth: 160 },
];
export const generatePreviewColumns = [
{ label: '客商名称', prop: 'customerName', minWidth: 160 },
{ label: '运单号', prop: 'waybillNo', minWidth: 160 },
{ label: '车号', prop: 'vehicleNo', minWidth: 140 },
{ label: '货物名称', prop: 'cargoName', minWidth: 140 },
{ label: '货物类型', prop: 'cargoType', minWidth: 140 },
{ label: '规格', prop: 'specification', minWidth: 140 },
];
src/option/transit/exception-disposal.js
+91
View File
@@ -0,0 +1,91 @@
export const exceptionCategoryOptions = [
{
label: '交通异常',
value: 'traffic',
children: [
{ label: '道路拥堵', value: '道路拥堵' },
{ label: '交通事故', value: '交通事故' },
{ label: '道路封闭', value: '道路封闭' },
{ label: '天气影响', value: '天气影响' },
{ label: '其他', value: '交通异常-其他' },
],
},
{
label: '车辆异常',
value: 'vehicle',
children: [
{ label: '车辆故障维修', value: '车辆故障维修' },
{ label: '车辆事故', value: '车辆事故' },
{ label: '爆胎', value: '爆胎' },
{ label: '设备异常', value: '设备异常' },
{ label: '缺油缺电', value: '缺油缺电' },
{ label: '其他', value: '车辆异常-其他' },
],
},
{
label: '货物异常',
value: 'cargo',
children: [
{ label: '货损', value: '货损' },
{ label: '货差', value: '货差' },
{ label: '货物丢失', value: '货物丢失' },
{ label: '包装异常', value: '包装异常' },
{ label: '其他', value: '货物异常-其他' },
],
},
{
label: '其他异常',
value: 'other',
children: [
{ label: '变更路线地址', value: '变更路线地址' },
{ label: '其他', value: '其他异常-其他' },
],
},
];
export const disposalStatusOptions = [
{ label: '待处理', value: 'pending' },
{ label: '处理中', value: 'processing' },
{ label: '已完成', value: 'completed' },
];
export const searchFields = [
{ label: '运单号', prop: 'waybillNo', type: 'input' },
{ label: '车辆', prop: 'vehicleNo', type: 'input' },
{ label: '上报人', prop: 'reporterName', type: 'input' },
{ label: '上报时间', prop: 'reportTimeRange', type: 'daterange' },
{ label: '项目', prop: 'projectName', type: 'input' },
{ label: '承运商', prop: 'carrierName', type: 'input' },
{ label: '异常类型', prop: 'exceptionType', type: 'select', options: exceptionCategoryOptions },
{ label: '状态', prop: 'disposalStatus', type: 'select', options: disposalStatusOptions },
];
export const tableColumns = [
{ label: '运单号', prop: 'waybillNo', minWidth: 160, link: true },
{ label: '项目', prop: 'projectName', minWidth: 160 },
{ label: '车辆', prop: 'vehicleNo', minWidth: 150, link: true },
{ label: '上报人', prop: 'reporterName', minWidth: 120 },
{ label: '异常类型', prop: 'exceptionTypeName', minWidth: 160 },
{ label: '上报说明', prop: 'reportDescription', minWidth: 180 },
{ label: '承运商', prop: 'carrierName', minWidth: 160 },
{ label: '最新跟进说明', prop: 'latestFollowContent', minWidth: 200 },
{ label: '状态', prop: 'disposalStatusName', minWidth: 120 },
];
export const detailFields = [
{ label: '配载单号/总单号', prop: 'loadingOrMasterNo', link: true },
{ label: '运单号', prop: 'waybillNo', link: true },
{ label: '项目', prop: 'projectName', link: true },
{ label: '车牌号', prop: 'vehicleNo', link: true },
{ label: '上报人', prop: 'reporterName' },
{ label: '承运商', prop: 'carrierName' },
{ label: '异常类型', prop: 'exceptionTypeName' },
{ label: '异常原因', prop: 'exceptionReason' },
{ label: '上报说明', prop: 'reportDescription', span: 2 },
];
export const followColumns = [
{ label: '跟进说明', prop: 'followContent', minWidth: 260 },
{ label: '跟进人', prop: 'followUserName', minWidth: 130 },
{ label: '跟进时间', prop: 'followTime', minWidth: 170 },
];
src/option/transit/risk-disposal.js
+50
View File
@@ -0,0 +1,50 @@
export const riskLevelOptions = [
{ label: '低', value: 'low', tagType: 'success' },
{ label: '中', value: 'medium', tagType: 'warning' },
{ label: '高', value: 'high', tagType: 'danger' },
];
export const disposalStatusOptions = [
{ label: '待处理', value: 'pending', tagType: 'warning' },
{ label: '已处理', value: 'processed', tagType: 'success' },
{ label: '已忽略', value: 'ignored', tagType: 'info' },
];
export const disposalMethodOptions = [
{ label: '处理', value: 'process' },
{ label: '忽略', value: 'ignore' },
];
export const searchFields = [
{ label: '规则名称', prop: 'ruleName', type: 'input', placeholder: '请输入' },
{ label: '风险等级', prop: 'riskLevel', type: 'select', placeholder: '全部', options: riskLevelOptions },
{
label: '处理状态',
prop: 'disposalStatus',
type: 'select',
placeholder: '全部',
options: disposalStatusOptions,
},
{ label: '组织', prop: 'deptName', type: 'input', placeholder: '默认展示当前组织，可搜索' },
];
export const tableColumns = [
{ label: '风险编号', prop: 'riskNo', minWidth: 210 },
{ label: '规则名称', prop: 'ruleName', minWidth: 210 },
{ label: '运单号', prop: 'waybillNo', minWidth: 220, link: true },
{ label: '项目名称', prop: 'projectName', minWidth: 160 },
{ label: '风险等级', prop: 'riskLevelName', minWidth: 130, tag: true },
{ label: '运输类型', prop: 'transportType', minWidth: 130 },
{ label: '风险描述', prop: 'riskDescription', minWidth: 310 },
{ label: '处理状态', prop: 'disposalStatusName', minWidth: 130, tag: true },
];
export const detailFields = [
{ label: '风险编号', prop: 'riskNo' },
{ label: '规则名称', prop: 'ruleName' },
{ label: '风险等级', prop: 'riskLevelName', tag: true },
{ label: '运单号', prop: 'waybillNo', link: true },
{ label: '项目名称', prop: 'projectName' },
{ label: '触发时间', prop: 'triggerTime' },
{ label: '风险描述', prop: 'riskDescription', span: 3 },
];
src/option/transit/track-tracking.js
+10
View File
@@ -0,0 +1,10 @@
export const queryTypeOptions = [
{ label: '轨迹查询', value: 'track' },
{ label: '船舶查询', value: 'ship' },
];
export const mapInfoFields = [
{ label: '站点名称', prop: 'siteName' },
{ label: '地址', prop: 'address' },
{ label: '经纬度', prop: 'coordinates' },
];
src/views/business/components/business-crud-page.vue
+1788 -281
View File
File diff suppressed because it is too large Load Diff
src/views/business/components/master-order-dispatch.vue
+72 -11
View File
@@ -76,8 +76,8 @@
<el-table-column type="index" label="序号" width="64" />
<el-table-column label="货物名称" min-width="180"><template #default="{ row }"><el-select v-model="row.sourceIndex" placeholder="请选择总单货物" @change="selectGoods(route, row)"><el-option v-for="item in masterGoods" :key="item.sourceIndex" :label="item.label" :value="item.sourceIndex" /></el-select></template></el-table-column>
<el-table-column label="货物类型" min-width="130"><template #default="{ row }"><el-input :model-value="row.cargoType" readonly /></template></el-table-column>
<el-table-column label="剩余数量" width="120"><template #default="{ row }">{{ formatQuantity(row.remainingQuantity) }}</template></el-table-column>
<el-table-column label="本次数量" width="160"><template #default="{ row }"><el-input :model-value="row.dispatchQuantity" inputmode="decimal" placeholder="请输入" @input="value => handleDispatchQuantityInput(row, value)" /></template></el-table-column>
<el-table-column label="剩余数量" width="120"><template #default="{ row }">{{ formatQuantity(goodsRemainingQuantity(route, row)) }}</template></el-table-column>
<el-table-column label="本次数量" width="160"><template #default="{ row }"><el-input :model-value="row.dispatchQuantity" inputmode="decimal" placeholder="请输入" @input="value => handleDispatchQuantityInput(route, row, value)" /></template></el-table-column>
<el-table-column prop="quantityUnit" label="数量单位" width="110" />
<el-table-column prop="packageType" label="包装" min-width="110" />
<el-table-column prop="brand" label="品牌" min-width="110" />
@@ -204,14 +204,76 @@ export default {
};
},
isRoad(route) { return String(route.transportType || '').includes('公路'); },
remaining(route) { return Math.max(0, this.totalQuantity - Number(route.dispatchedQuantity || 0)); },
remaining(route) {
return Math.max(
0,
this.totalQuantity -
Number(route.dispatchedQuantity || 0) -
this.pendingSegmentQuantity(route)
);
},
formatQuantity(value) { const number = Number(value || 0); return Number.isInteger(number) ? number : number.toFixed(3).replace(/\.?0+$/, ''); },
formatAmount(value) { return Number(value || 0).toFixed(2); },
dispatchWeight(route) { return (route.goods || []).reduce((sum, item) => sum + Number(item.dispatchQuantity || 0), 0); },
freightAmount(route) { return Number(route.unitPrice || 0) * this.dispatchWeight(route); },
handleDispatchQuantityInput(row, value) {
quantityNumber(value) { return Number(value || 0); },
goodsKey(goods = {}, includeUnit = true) {
return [
goods.cargoName || '',
goods.cargoType || '',
includeUnit ? goods.quantityUnit || '' : '',
].join('\u0000');
},
isSameGoods(left = {}, right = {}) {
if (left.sourceIndex !== undefined && right.sourceIndex !== undefined) return Number(left.sourceIndex) === Number(right.sourceIndex);
return left.cargoName === right.cargoName && left.cargoType === right.cargoType && left.quantityUnit === right.quantityUnit;
},
dispatchedGoodsQuantity(route, row) {
const dispatchedGoods = route.dispatchedGoods || {};
return this.quantityNumber(
dispatchedGoods[this.goodsKey(row)] ?? dispatchedGoods[this.goodsKey(row, false)]
);
},
baseGoodsRemainingQuantity(route, row) {
return Math.max(0, this.quantityNumber(row.quantity) - this.dispatchedGoodsQuantity(route, row));
},
pendingSegmentQuantity(route) {
return this.pending.reduce((sum, item) => {
if (item.segmentNo !== route.segmentNo) return sum;
return sum + this.quantityNumber(item.quantity);
}, 0);
},
pendingGoodsQuantity(route, row) {
return this.pending.reduce((sum, item) => {
if (item.segmentNo !== route.segmentNo || !this.isSameGoods(item, row)) return sum;
return sum + this.quantityNumber(item.quantity);
}, 0);
},
editingGoodsQuantity(route, row) {
return (route.goods || []).reduce((sum, item) => {
if (item === row || !this.isSameGoods(item, row)) return sum;
return sum + this.quantityNumber(item.dispatchQuantity);
}, 0);
},
goodsRemainingQuantity(route, row) {
return Math.max(
0,
this.baseGoodsRemainingQuantity(route, row) -
this.pendingGoodsQuantity(route, row) -
this.editingGoodsQuantity(route, row)
);
},
availableDispatchQuantity(route, row) { return this.goodsRemainingQuantity(route, row); },
handleDispatchQuantityInput(route, row, value) {
const [integer = '', decimal = ''] = String(value || '').replace(/[^\d.]/g, '').split('.');
row.dispatchQuantity = decimal || String(value || '').includes('.') ? `${integer}.${decimal.slice(0, 3)}` : integer;
const nextValue = decimal || String(value || '').includes('.') ? `${integer}.${decimal.slice(0, 3)}` : integer;
const availableQuantity = this.availableDispatchQuantity(route, row);
if (Number(nextValue || 0) > availableQuantity) {
row.dispatchQuantity = this.formatQuantity(availableQuantity);
this.$message.warning('本次数量不能超过剩余数量');
return;
}
row.dispatchQuantity = nextValue;
},
handleUnitPriceInput(route, value) {
const [integer = '', decimal = ''] = String(value || '').replace(/[^\d.]/g, '').split('.');
@@ -225,11 +287,10 @@ export default {
contactText(name, phone) { return [name, phone].filter(Boolean).join(' - ') || '-'; },
dateStartLabel(route) { return route.documentType === '计划单' ? '计划开始日期' : '预计发货日期'; },
dateEndLabel(route) { return route.documentType === '计划单' ? '计划结束日期' : '预计完成日期'; },
createGoodsRow(goods = {}, sourceIndex, dispatchedGoods = {}) {
createGoodsRow(goods = {}, sourceIndex) {
return {
...goods,
sourceIndex,
remainingQuantity: Math.max(0, Number(goods.quantity || 0) - Number(dispatchedGoods[`${goods.cargoName || ''}\u0000${goods.cargoType || ''}`] || 0)),
dispatchQuantity: undefined,
};
},
@@ -237,7 +298,7 @@ export default {
selectGoods(route, row) {
const source = (this.master.goods || [])[Number(row.sourceIndex)];
if (!source) return;
Object.assign(row, this.createGoodsRow(source, Number(row.sourceIndex), route.dispatchedGoods || {}));
Object.assign(row, this.createGoodsRow(source, Number(row.sourceIndex)));
},
removeGoods(route, index) { route.goods.splice(index, 1); },
handleCarrierTypeChange(route, value) {
@@ -294,7 +355,7 @@ export default {
addToPending(route, continueDispatch) {
const goods = route.goods.filter(item => Number(item.dispatchQuantity) > 0);
if (!goods.length) return this.$message.warning('请填写本次数量');
if (goods.some(item => Number(item.dispatchQuantity) > Number(item.remainingQuantity))) return this.$message.warning('本次数量不能超过该货物的可调度数量');
if (goods.some(item => Number(item.dispatchQuantity) > this.availableDispatchQuantity(route, item))) return this.$message.warning('本次数量不能超过剩余数量');
if (!route.estimatedStartTime) return this.$message.warning(`请选择${this.dateStartLabel(route)}`);
if (!route.estimatedEndTime) return this.$message.warning(`请选择${this.dateEndLabel(route)}`);
if (route.documentType === '运单') {
@@ -310,7 +371,7 @@ export default {
departureName: route.departureName, departureAddress: route.departureAddress, departureContact: route.departureContact, departurePhone: route.departurePhone,
arrivalName: route.arrivalName, arrivalAddress: route.arrivalAddress, arrivalContact: route.arrivalContact, arrivalPhone: route.arrivalPhone,
estimatedStartTime: route.estimatedStartTime, estimatedEndTime: route.estimatedEndTime,
cargoName: item.cargoName, cargoType: item.cargoType, quantity: item.dispatchQuantity, quantityUnit: item.quantityUnit, packageType: item.packageType, brand: item.brand, specification: item.specification, model: item.model, materialCode: item.materialCode,
sourceIndex: item.sourceIndex, cargoName: item.cargoName, cargoType: item.cargoType, quantity: item.dispatchQuantity, quantityUnit: item.quantityUnit, packageType: item.packageType, brand: item.brand, specification: item.specification, model: item.model, materialCode: item.materialCode,
}));
this.editingId = null;
this.pendingExpanded = true;
@@ -327,7 +388,7 @@ export default {
const sourceIndex = (this.master.goods || []).findIndex(goods => goods.cargoName === item.cargoName && goods.cargoType === item.cargoType);
let goods = route.goods.find(goodsItem => goodsItem.cargoName === item.cargoName && goodsItem.cargoType === item.cargoType);
if (!goods && sourceIndex >= 0) {
goods = this.createGoodsRow(this.master.goods[sourceIndex], sourceIndex, route.dispatchedGoods || {});
goods = this.createGoodsRow(this.master.goods[sourceIndex], sourceIndex);
route.goods.push(goods);
}
if (goods) goods.dispatchQuantity = item.quantity;
src/views/business/components/master-order-editor.vue
+186 -30
View File
@@ -49,13 +49,16 @@
<section>
<div class="section-head">
<h3>收发货信息</h3>
<div class="section-head__actions">
<el-link type="primary" @click="addRoute">新增途经点</el-link>
<el-link type="primary" @click="openRouteDialog">选择线路</el-link>
</div>
</div>
<el-form :model="form" label-position="right" label-width="auto"
><div class="route-steps">
<el-steps direction="vertical" :active="form.routes.length + 1">
<el-step>
<template #icon><span class="route-step-icon">起</span></template>
<template #icon><span class="route-step-icon route-step-icon--start">起</span></template>
<template #description>
<div class="route-node-form">
<el-form-item label="发货地址" required class="route-address-form-item"
@@ -80,7 +83,7 @@
</template>
</el-step>
<el-step v-for="(route, index) in form.routes" :key="index">
<template #icon><span class="route-step-icon">经</span></template>
<template #icon><span class="route-step-icon route-step-icon--middle">经</span></template>
<template #title><div class="route-step-title"><span class="route-segment-label">段{{ index + 1 }}</span><span class="route-title-path">{{ getRouteTitle(index).replace(`段${index + 1}：`, '') }}</span><div class="route-transport-control"><span>运输类型</span><el-select v-model="route.transportType" placeholder="请选择"><el-option v-for="type in transports" :key="type" :label="type" :value="type" /></el-select></div></div></template>
<template #description>
<div class="route-node-form">
@@ -89,12 +92,12 @@
><el-input v-model="route.departureName" class="route-address-name" readonly :disabled="!route.transportType" placeholder="请先选择运输类型" @click="openAddressMap(`route-${index}`)" /><el-input v-model="route.departureAddress" class="route-address-detail" readonly :disabled="!route.transportType" placeholder="请先选择运输类型" @click="openAddressMap(`route-${index}`)" /><el-tooltip content="选择常用地址" placement="top"><el-button class="address-picker-button" type="primary" link :icon="List" :disabled="!route.transportType" @click="openCommonAddress(`route-${index}`)" /></el-tooltip></div
></el-form-item>
<el-form-item label="联系人"><el-input v-model="route.departureContact" placeholder="请输入" /></el-form-item>
<el-form-item label="联系方式"><div class="route-contact-actions"><el-input v-model="route.departurePhone" placeholder="请输入" /><el-tooltip v-if="index === form.routes.length - 1" content="新增途经点" placement="top"><el-button class="route-action-button" type="primary" link @click="addRoute"><el-icon><CirclePlus /></el-icon></el-button></el-tooltip><el-tooltip v-if="form.routes.length > 1" content="删除途经点" placement="top"><el-button class="route-action-button" type="danger" link @click="removeRoute(index)"><el-icon><Remove /></el-icon></el-button></el-tooltip></div></el-form-item>
<el-form-item label="联系方式"><div class="route-contact-actions"><el-input v-model="route.departurePhone" placeholder="请输入" /><el-tooltip v-if="index === form.routes.length - 1" content="新增途经点" placement="top"><el-button class="route-action-button" type="primary" link @click="addRoute"><el-icon><CirclePlus /></el-icon></el-button></el-tooltip><el-tooltip content="删除途经点" placement="top"><el-button class="route-action-button" type="danger" link @click="removeRoute(index)"><el-icon><Remove /></el-icon></el-button></el-tooltip></div></el-form-item>
</div>
</template>
</el-step>
<el-step>
<template #icon><span class="route-step-icon">终</span></template>
<template #icon><span class="route-step-icon route-step-icon--end">终</span></template>
<template #title><div class="route-step-title"><span class="route-segment-label">段{{ form.routes.length + 1 }}</span><span class="route-title-path">{{ getFinalRouteTitle().replace(`段${form.routes.length + 1}：`, '') }}</span><div class="route-transport-control"><span>运输类型</span><el-select v-model="form.finalTransportType" placeholder="请选择"><el-option v-for="type in transports" :key="type" :label="type" :value="type" /></el-select></div></div></template>
<template #description>
<div class="route-node-form">
@@ -155,12 +158,13 @@
><el-input
v-model="row.cargoType"
placeholder="从货物类型获取" /></template></el-table-column
><el-table-column label="数量" width="104" class-name="master-editor__quantity-cell"
><el-table-column label="数量" width="132" class-name="master-editor__quantity-cell"
><template #default="{ row }"
><el-input-number
><el-input
v-model="row.quantity"
:min="0"
controls-position="right" /></template></el-table-column
inputmode="decimal"
placeholder="请输入"
@input="value => handleQuantityInput(row, value)" /></template></el-table-column
><el-table-column label="数量单位" width="120"
><template #default="{ row }"
><el-select v-model="row.quantityUnit"
@@ -200,13 +204,49 @@
</section>
<section>
<h3>附件</h3>
<el-upload
multiple
action="/api/blade-resource/oss/endpoint/put-file"
:headers="uploadHeaders"
:on-success="attach"
><el-button type="primary" plain>上传附件</el-button></el-upload
<div class="master-editor__attachment">
<div class="master-editor__attachment-head">
<vehicle-attachment-upload
v-model="attachmentRows"
:file-types="attachmentFileTypes"
:max-size="500"
:show-tip="false"
:show-file-list="false"
button-text="上传附件"
@change="handleAttachmentChange"
/>
<el-button
type="primary"
:disabled="!attachmentRows.length"
@click="handleAttachmentBatchDownload"
>
批量下载
</el-button>
</div>
<el-table
:data="attachmentRows"
border
class="master-editor__attachment-table"
@selection-change="handleAttachmentSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column label="文件名" min-width="240" align="center" show-overflow-tooltip>
<template #default="{ row }">{{ row.originalName || row.name }}</template>
</el-table-column>
<el-table-column label="文件大小" width="120" align="center">
<template #default="{ row }">{{ formatFileSize(row.size) }}</template>
</el-table-column>
<el-table-column prop="uploadUserName" label="上传人" width="140" align="center" />
<el-table-column prop="uploadTime" label="上传时间" width="170" align="center" sortable />
<el-table-column label="操作" width="120" align="center" fixed="right">
<template #default="{ row, $index }">
<el-link type="danger" @click="removeAttachment($index)">删除</el-link>
<el-link type="primary" @click="downloadAttachment(row)">下载</el-link>
</template>
</el-table-column>
</el-table>
</div>
</section>
<el-dialog
v-model="addressDialogVisible"
@@ -402,9 +442,9 @@ import { getList as getPortTerminalList } from '@/api/base/port-terminal';
import { getList as getRailwayStationList } from '@/api/base/railway-station';
import { getList as getCommonCargoList } from '@/api/business/common-cargo';
import { exportBlob, importBlob } from '@/api/common';
import { downloadXls } from '@/utils/util';
import { getUploadHeaders } from '@/utils/upload';
import { List, Location, Search } from '@element-plus/icons-vue';
import { downloadFileByUrl, downloadXls } from '@/utils/util';
import { List, Search } from '@element-plus/icons-vue';
import { mapGetters } from 'vuex';
const AMAP_KEY = '653b7cf105ad7fb8ec9b2f5198ade315';
const AMAP_SECURITY_CODE = '5aab65c632e48ebae0d0e28f5b28e21a';
@@ -455,7 +495,24 @@ export default {
cargoOptions: [],
cargoImportVisible: false,
cargoImportLoading: false,
uploadHeaders: getUploadHeaders(),
attachmentRows: [],
selectedAttachmentRows: [],
attachmentFileTypes: [
'pdf',
'bmp',
'jpeg',
'png',
'jpg',
'doc',
'docx',
'ppt',
'pptx',
'xlsx',
'xls',
'eml',
'msg',
'zip',
],
transports: ['公路运输', '铁路运输', '水路运输', '航空运输'],
quantityUnitOptions,
form: {
@@ -471,6 +528,7 @@ export default {
};
},
computed: {
...mapGetters(['userInfo']),
lastRouteName() {
return this.form.routes[this.form.routes.length - 1]?.departureName || '途经地';
},
@@ -513,10 +571,23 @@ export default {
? finalSegment.transportType
: detail.finalTransportType || '',
goods: detail.goods || [{ quantityUnit: quantityUnitOptions[0] }],
attachmentsJson: detail.attachmentsJson || '[]',
transportOrganizationType: '多式联运',
};
this.attachmentRows = this.parseJsonArray(this.form.attachmentsJson);
this.selectedAttachmentRows = [];
if (this.form.projectId) await this.loadContracts(this.form.projectId, false);
},
parseJsonArray(value) {
if (!value) return [];
if (Array.isArray(value)) return value;
try {
const data = JSON.parse(value);
return Array.isArray(data) ? data : [];
} catch (error) {
return [];
}
},
getRouteTitle(index) {
const departureName =
index === 0
@@ -980,7 +1051,7 @@ export default {
this.form.routes.push(this.createRoute());
},
removeRoute(index) {
if (this.form.routes.length > 1) this.form.routes.splice(index, 1);
this.form.routes.splice(index, 1);
},
addGoods(index) {
this.form.goods.splice(index + 1, 0, { quantityUnit: quantityUnitOptions[0] });
@@ -988,10 +1059,56 @@ export default {
removeGoods(index) {
if (this.form.goods.length > 1) this.form.goods.splice(index, 1);
},
attach(response) {
const list = JSON.parse(this.form.attachmentsJson || '[]');
list.push(response.data || response);
this.form.attachmentsJson = JSON.stringify(list);
handleQuantityInput(row, value) {
const text = String(value || '').replace(/[^\d.]/g, '');
const [integer = '', ...decimals] = text.split('.');
row.quantity = decimals.length ? `${integer}.${decimals.join('').slice(0, 3)}` : integer;
},
syncAttachmentsJson() {
this.form.attachmentsJson = JSON.stringify(this.attachmentRows);
},
handleAttachmentChange(list) {
const userName = this.userInfo?.realName || this.userInfo?.userName || '';
const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
this.attachmentRows = (list || []).map(item => ({
...item,
description: item.description || '',
uploadUserName: item.uploadUserName || userName,
uploadTime: item.uploadTime || uploadTime,
}));
this.selectedAttachmentRows = [];
this.syncAttachmentsJson();
},
handleAttachmentSelectionChange(rows) {
this.selectedAttachmentRows = rows || [];
},
removeAttachment(index) {
this.attachmentRows.splice(index, 1);
this.selectedAttachmentRows = this.selectedAttachmentRows.filter(item =>
this.attachmentRows.includes(item)
);
this.syncAttachmentsJson();
},
formatFileSize(size) {
const number = Number(size);
if (!number) return '';
if (number < 1024) return `${number}B`;
if (number < 1024 * 1024) return `${(number / 1024).toFixed(1)}KB`;
return `${(number / 1024 / 1024).toFixed(1)}MB`;
},
downloadAttachment(row) {
const url = row.url || row.link;
if (!url) {
this.$message.warning('附件地址为空');
return;
}
downloadFileByUrl(url, row.originalName || row.name || '附件');
},
handleAttachmentBatchDownload() {
const rows = this.selectedAttachmentRows.length
? this.selectedAttachmentRows
: this.attachmentRows;
rows.forEach(row => this.downloadAttachment(row));
},
async save(draft = false) {
if (!draft) {
@@ -1001,7 +1118,6 @@ export default {
if (!this.form.goods.some(item => item.cargoType && item.quantity > 0 && item.quantityUnit))
return this.$message.warning('请至少填写一条有效货物');
if (
!this.form.routes.length ||
this.form.routes.some(item => !item.departureName || !item.transportType) ||
!this.form.finalTransportType
)
@@ -1009,6 +1125,7 @@ export default {
}
const payload = {
...this.form,
attachmentsJson: JSON.stringify(this.attachmentRows),
routes: [
...this.form.routes.map((route, index) => ({ ...route, segmentNo: `段${index + 1}` })),
{
@@ -1024,7 +1141,8 @@ export default {
delete payload.finalTransportType;
const res = await (draft ? api.saveDraft(payload) : api.submit(payload));
this.$message.success('保存成功');
return res.data || res;
// 兼容 Axios 响应及 BladeX 常见的 data.data 两层响应结构。
return res?.data?.data || res?.data || res;
},
async saveDraft() {
await this.save(true);
@@ -1036,7 +1154,12 @@ export default {
},
async createAndDispatch() {
const data = await this.save();
this.$emit('dispatch', data.id);
const id = data?.id || data?.masterOrderId || data?.masterId;
if (!id) {
this.$message.error('保存成功但未获取到总单ID，无法进入调度');
return;
}
this.$emit('dispatch', id);
},
},
};
@@ -1060,15 +1183,15 @@ export default {
.goods-heading {
display: flex;
margin-bottom: 8px;
justify-content: flex-end;
justify-content: flex-start;
align-items: center;
h3 {
margin-right: auto;
margin-bottom: 0;
}
}
.goods-toolbar {
display: flex;
margin-left: auto;
gap: 8px;
}
.goods-actions {
@@ -1076,8 +1199,31 @@ export default {
flex-wrap: wrap;
gap: 8px;
}
:deep(.master-editor__quantity-cell .el-input-number) {
width: 80px;
.master-editor__attachment {
width: 100%;
}
.master-editor__attachment-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.master-editor__attachment-table {
width: 100%;
:deep(.el-table__header th) {
background: #f5f7fa;
color: #303133;
font-weight: 600;
}
:deep(.el-table__cell) {
border-color: #eff1f7;
}
:deep(.el-table__row:nth-child(even) td.el-table__cell) {
background: #fafafa;
}
}
:deep(.master-editor__quantity-cell .el-input) {
width: 108px;
}
.section-head {
display: flex;
@@ -1088,6 +1234,10 @@ export default {
margin-bottom: 0;
}
}
.section-head__actions {
display: flex;
gap: 16px;
}
.route-dialog__search {
margin-bottom: 8px;
padding: 12px 12px 4px;
@@ -1138,6 +1288,12 @@ export default {
font-size: 16px;
font-weight: 600;
line-height: 1;
&--middle {
background: #67c23a;
}
&--end {
background: #e6a23c;
}
}
}
.route-node-form {
src/views/business/components/waybill-import-dialog.vue
+220 -9
View File
@@ -34,19 +34,24 @@
<el-dialog v-model="createVisible" title="新建导入" width="85%" append-to-body destroy-on-close class="waybill-import-create">
<section class="waybill-import-create__form-panel">
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="auto" class="archive-form">
<el-row :gutter="20"><el-col :span="6"><el-form-item label="项目" prop="projectId"><el-select v-model="form.projectId" filterable clearable placeholder="模糊查询后选择" @change="projectChange"><el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="客户" prop="customerName"><el-input v-model="form.customerName" disabled placeholder="自动带出" /></el-form-item></el-col><el-col :span="6"><el-form-item label="客户合同" prop="contractId"><el-select v-model="form.contractId" filterable clearable placeholder="自动带出"><el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运类型" prop="carrierType"><el-select v-model="form.carrierType"><el-option label="承运商" value="承运商" /><el-option label="自运" value="自运" /><el-option label="网货平台" value="网货平台" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运商"><el-select v-model="form.carrierIds" multiple filterable placeholder="自动带出，多个需选择"><el-option v-for="item in carriers" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入状态" prop="status"><el-select v-model="form.status"><el-option label="完成" value="completed" /><el-option label="进行中" value="processing" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入类型" prop="importType"><el-select v-model="form.importType"><el-option label="运单" value="waybill" /><el-option label="结算单" value="settlement" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="发货计划"><el-select v-model="form.planId" clearable filterable placeholder="请选择"><el-option v-for="item in plans" :key="item.id" :label="item.planName" :value="item.id" /></el-select></el-form-item></el-col></el-row>
<el-row :gutter="20"><el-col :span="6"><el-form-item label="项目" prop="projectId"><el-select v-model="form.projectId" filterable clearable placeholder="模糊查询后选择" @change="projectChange"><el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="客户" prop="customerName"><el-input v-model="form.customerName" disabled placeholder="自动带出" /></el-form-item></el-col><el-col :span="6"><el-form-item label="客户合同" prop="contractId"><el-select v-model="form.contractId" filterable clearable placeholder="自动带出" @change="contractChange"><el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运类型" prop="carrierType"><el-select v-model="form.carrierType"><el-option label="承运商" value="承运商" /><el-option label="自运" value="自运" /><el-option label="网货平台" value="网货平台" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运商"><el-select v-model="form.carrierIds" multiple filterable placeholder="自动带出，多个需选择"><el-option v-for="item in carriers" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入状态" prop="status"><el-select v-model="form.status"><el-option label="完成" value="completed" /><el-option label="进行中" value="processing" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入类型" prop="importType"><el-select v-model="form.importType"><el-option label="运单" value="waybill" /><el-option label="结算单" value="settlement" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="计划名称"><el-select v-model="form.planId" clearable filterable placeholder="请选择"><el-option v-for="item in plans" :key="item.id" :label="item.planName" :value="item.id" /></el-select></el-form-item></el-col></el-row>
<el-form-item label="运单明细表" prop="file"><el-upload action="#" accept=".xls,.xlsx" :auto-upload="false" :limit="1" :file-list="files" :on-change="fileChange" :on-remove="fileRemove"><el-button type="primary">添加附件</el-button></el-upload><span class="waybill-import-create__file-tip">请上传运单明细表，仅支持 excel 格式</span><el-link type="primary" @click="downloadTemplate">下载模板</el-link></el-form-item>
</el-form>
<div class="waybill-import-create__form-actions"><el-button @click="createVisible = false">关闭</el-button><el-button @click="saveDraft">保存草稿</el-button><el-button type="primary" @click="confirmImport">确认导入</el-button></div>
</section>
<section class="waybill-import-create__detail-panel" v-if="rows.length"><div class="waybill-import-create__detail-head"><div class="dialog-section-title">导入数据明细</div><el-button type="danger" plain :disabled="!rowSelection.length" @click="removeSelectedRows">批量删除</el-button></div><el-tabs v-model="previewTab"><el-tab-pane :label="`运单数（${rows.length}）`" name="all" /><el-tab-pane :label="`疑似重复（${duplicateRows.length}）`" name="duplicate" /></el-tabs><el-table :data="previewRows" border max-height="440" @selection-change="rowSelection = $event"><el-table-column type="selection" width="55" /><el-table-column type="index" label="序号" width="65" /><el-table-column v-for="column in detailColumns" :key="column.prop" :prop="column.prop" :label="column.label" min-width="140" show-overflow-tooltip /><el-table-column label="操作" width="180" fixed="right"><template #default="{ row }"><el-link type="primary" @click="cancelRow(row)">取消</el-link><el-link type="primary" @click="saveRow(row)">保存</el-link><el-link type="primary" @click="editRow(row)">编辑</el-link><el-link type="danger" @click="deleteRow(row)">删除</el-link></template></el-table-column></el-table></section>
<section class="waybill-import-create__detail-panel" v-if="rows.length"><div class="waybill-import-create__detail-head"><div class="dialog-section-title">导入数据明细</div><el-button type="danger" plain :disabled="!rowSelection.length" @click="removeSelectedRows">批量删除</el-button></div><el-tabs v-model="previewTab"><el-tab-pane :label="`运单数（${rows.length}）`" name="all" /><el-tab-pane :label="`疑似重复（${duplicateRows.length}）`" name="duplicate" /></el-tabs><el-table :data="previewRows" border max-height="440" @selection-change="rowSelection = $event"><el-table-column type="selection" width="55" /><el-table-column type="index" label="序号" width="65" /><el-table-column v-for="column in detailColumns" :key="column.prop" :prop="column.prop" :label="column.label" :min-width="column.minWidth || 150" show-overflow-tooltip><template #default="{ row }"><template v-if="row._editing"><el-select v-if="column.editor === 'transportType'" v-model="row.transportType" clearable filterable placeholder="请选择"><el-option v-for="item in transportTypeOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select><el-select v-else-if="column.editor === 'driver'" v-model="row.driverName" clearable filterable placeholder="请选择" @change="value => handleEditorChange(column, row, value)"><el-option v-for="item in driverOptions" :key="item.id || item.driverName || item.name" :label="item.driverName || item.name" :value="item.driverName || item.name" /></el-select><el-cascader v-else-if="column.editor === 'cargoType'" :model-value="resolveCargoTypePath(row)" :options="cargoTypeOptions" :props="{ label: 'cargoName', value: 'id', children: 'children', emitPath: true }" clearable filterable placeholder="请选择" @change="value => handleEditorChange(column, row, value)" /><el-select v-else-if="column.editor === 'cargoName'" v-model="row.cargoName" clearable filterable placeholder="请选择" @visible-change="visible => visible && loadCommonCargoOptions(row)" @change="value => handleEditorChange(column, row, value)"><el-option v-for="item in getCommonCargoOptions(row)" :key="item.id || item.cargoName || item.name" :label="formatCargoTypeLabel(item)" :value="formatCargoTypeLabel(item)" /></el-select><el-date-picker v-else-if="column.editor === 'datetime'" v-model="row[column.prop]" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" /><el-input v-else-if="column.editor === 'textarea'" v-model="row[column.prop]" type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" :placeholder="`请输入${column.label}`" /><el-input v-else-if="column.editor === 'number'" :model-value="row[column.prop]" inputmode="decimal" :placeholder="`请输入${column.label}`" @input="value => updateEditorValue(column, row, value)" /><el-input v-else v-model="row[column.prop]" :placeholder="`请输入${column.label}`" /></template><span v-else>{{ formatCell(row, column) }}</span></template></el-table-column><el-table-column label="操作" width="180" fixed="right"><template #default="{ row }"><template v-if="row._editing"><el-link type="primary" @click="saveRow(row)">保存</el-link><el-link type="primary" @click="cancelRow(row)">取消</el-link></template><template v-else><el-link type="primary" @click="editRow(row)">编辑</el-link><el-link type="danger" @click="deleteRow(row)">删除</el-link></template></template></el-table-column></el-table></section>
</el-dialog>
</template>
<script setup>
import { computed, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getList as getCargoTypeList } from '@/api/base/cargo-type';
import { getList as getCommonCargoList } from '@/api/business/common-cargo';
import { getList as getContractList } from '@/api/business/contract-manage';
import { getList as getProjectList } from '@/api/business/project-apply';
import { getList as getDriverList } from '@/api/transportCapacity/driver';
import { getDictionary } from '@/api/system/dictbiz';
import * as api from '@/api/business/waybill-manage';
import { downloadXls } from '@/utils/util';
@@ -56,21 +61,162 @@ const visible = computed({ get: () => props.modelValue, set: value => emit('upda
const createVisible = ref(false), detailVisible = ref(false), formRef = ref();
const query = reactive({ batchNo: '', carrierId: '', createUser: '', createTimeRange: [] });
const detailQuery = reactive({ vehicleNo: '', cargoName: '' });
const form = reactive({ projectId: '', customerName: '', contractId: '', carrierType: '承运商', carrierIds: [], status: 'completed', importType: 'waybill', planId: '', file: null });
const form = reactive({ projectId: '', customerName: '', contractId: '', contractName: '', carrierType: '承运商', carrierIds: [], status: 'completed', importType: 'waybill', planId: '', file: null });
const rules = { projectId: [{ required: true, message: '请选择项目' }], customerName: [{ required: true, message: '客户不能为空' }], contractId: [{ required: true, message: '请选择客户合同' }], carrierType: [{ required: true, message: '请选择承运类型' }], status: [{ required: true, message: '请选择导入状态' }], importType: [{ required: true, message: '请选择导入类型' }], file: [{ required: true, message: '请上传明细表' }] };
const batches = ref([]), details = ref([]), rows = ref([]), selected = ref([]), files = ref([]), projects = ref([]), contracts = ref([]), carriers = ref([]), creators = ref([]), plans = ref([]);
const transportTypeOptions = ref([]), cargoTypeOptions = ref([]), cargoTypeFlatOptions = ref([]), commonCargoOptionsMap = ref({}), commonCargoLoadingMap = ref({}), driverOptions = ref([]);
const rowSelection = ref([]), previewTab = ref('all');
const duplicateRows = computed(() => rows.value.filter(row => row._duplicate));
const previewRows = computed(() => previewTab.value === 'duplicate' ? duplicateRows.value : rows.value);
const page = reactive({ current: 1, size: 10, total: 0 }), detailPage = reactive({ current: 1, size: 10, total: 0 });
const detailColumns = [{ prop: 'batchNo', label: '运单批次号' }, { prop: 'originalNo', label: '原始单号' }, { prop: 'vehicleNo', label: '车牌号/航班号/船号/班列号' }, { prop: 'driverName', label: '司机/船长' }, { prop: 'transportType', label: '运输类型' }, { prop: 'cargoName', label: '货物名称' }, { prop: 'cargoType', label: '货物类型' }, { prop: 'quantity', label: '重量' }, { prop: 'departureAddress', label: '发货地址' }, { prop: 'departureContact', label: '发货联系人' }, { prop: 'departurePhone', label: '发货联系人电话' }, { prop: 'arrivalAddress', label: '到货地址' }, { prop: 'arrivalContact', label: '收货联系人' }, { prop: 'arrivalPhone', label: '收货联系人电话' }, { prop: 'startDate', label: '开始时间' }, { prop: 'endDate', label: '结束时间' }, { prop: 'unitPrice', label: '单价' }, { prop: 'freight', label: '运费' }, { prop: 'otherFeeTotal', label: '其他费用合计' }, { prop: 'freightTotal', label: '运费合计' }, { prop: 'remark', label: '备注' }];
const detailColumns = [
{ prop: 'batchNo', label: '运单批次号', editor: 'input', minWidth: 150 },
{ prop: 'originalNo', label: '原始单号', editor: 'input', minWidth: 150 },
{ prop: 'vehicleNo', label: '车牌号/航班号/船号/班列号', editor: 'input', minWidth: 220 },
{ prop: 'driverName', label: '司机/船长', editor: 'driver', minWidth: 170 },
{ prop: 'transportType', label: '运输类型', editor: 'transportType', minWidth: 150 },
{ prop: 'cargoType', label: '货物类型', editor: 'cargoType', minWidth: 220 },
{ prop: 'cargoName', label: '货物名称', editor: 'cargoName', minWidth: 220 },
{ prop: 'quantity', label: '重量', editor: 'number', minWidth: 130 },
{ prop: 'departureAddress', label: '发货地址', editor: 'textarea', minWidth: 260 },
{ prop: 'departureContact', label: '发货联系人', editor: 'input', minWidth: 140 },
{ prop: 'departurePhone', label: '发货联系人电话', editor: 'input', minWidth: 160 },
{ prop: 'arrivalAddress', label: '到货地址', editor: 'textarea', minWidth: 260 },
{ prop: 'arrivalContact', label: '收货联系人', editor: 'input', minWidth: 140 },
{ prop: 'arrivalPhone', label: '收货联系人电话', editor: 'input', minWidth: 160 },
{ prop: 'startDate', label: '开始时间', editor: 'datetime', minWidth: 190 },
{ prop: 'endDate', label: '结束时间', editor: 'datetime', minWidth: 190 },
{ prop: 'unitPrice', label: '单价', editor: 'number', minWidth: 130 },
{ prop: 'freight', label: '运费', editor: 'number', minWidth: 130 },
{ prop: 'otherFeeTotal', label: '其他费用合计', editor: 'number', minWidth: 150 },
{ prop: 'freightTotal', label: '运费合计', editor: 'number', minWidth: 130 },
{ prop: 'remark', label: '备注', editor: 'textarea', minWidth: 180 },
];
const requiredDetailFields = [{ prop: 'vehicleNo', label: '车牌号/航班号/船号/班列号' }, { prop: 'driverName', label: '司机/船长' }, { prop: 'transportType', label: '运输类型' }, { prop: 'cargoName', label: '货物名称' }, { prop: 'cargoType', label: '货物类型' }, { prop: 'departureAddress', label: '发货地址' }, { prop: 'departureContact', label: '发货联系人' }, { prop: 'departurePhone', label: '发货联系人电话' }, { prop: 'arrivalAddress', label: '到货地址' }, { prop: 'arrivalContact', label: '到货联系人' }, { prop: 'arrivalPhone', label: '收货联系人电话' }, { prop: 'startDate', label: '开始时间' }, { prop: 'endDate', label: '结束时间' }, { prop: 'unitPrice', label: '单价' }, { prop: 'freight', label: '运费' }];
const projectQueryParams = { approvalStatuses: 'approved,change_approved' };
const extractRecords = res => {
const data = res?.data || res;
if (Array.isArray(data)) return data;
if (Array.isArray(data?.records)) return data.records;
if (Array.isArray(data?.data)) return data.data;
if (Array.isArray(data?.data?.records)) return data.data.records;
return [];
};
const formatCargoTypeLabel = item => item?.cargoName || item?.name || item?.typeName || item?.label || '';
const buildCargoTypeTree = cargoTypes => {
const flatCargoTypes = [];
const collectCargoTypes = list => {
(list || []).forEach(item => {
flatCargoTypes.push({ ...item, children: undefined });
if (item.children?.length) collectCargoTypes(item.children);
});
};
collectCargoTypes(cargoTypes);
const nodeMap = new Map();
const codeMap = new Map();
flatCargoTypes.forEach(item => {
const id = item.id ?? item.cargoCode ?? item.code;
if (id === undefined || id === null) return;
const node = {
...item,
id: String(id),
cargoName: formatCargoTypeLabel(item),
cargoCode: item.cargoCode || item.code || '',
parentId: item.parentId === undefined || item.parentId === null ? '' : String(item.parentId),
parentCargoCode: item.parentCargoCode || item.parentCode || '',
children: [],
};
nodeMap.set(node.id, node);
if (node.cargoCode) codeMap.set(String(node.cargoCode), node);
});
const rootNodes = [];
nodeMap.forEach(node => {
const parent = nodeMap.get(node.parentId) || codeMap.get(String(node.parentCargoCode || '')) || codeMap.get(String(node.parentId || ''));
if (parent && parent !== node && Number(node.typeLevel) !== 1) parent.children.push(node);
else rootNodes.push(node);
});
const normalize = (cargoType, level = 1, parentPath = []) => {
if (level > 2) return null;
const id = String(cargoType.id);
const path = [...parentPath, id];
const children = level === 1 ? (cargoType.children || []).map(item => normalize(item, level + 1, path)).filter(Boolean) : [];
return { ...cargoType, id, cargoName: formatCargoTypeLabel(cargoType), path, leaf: level === 2, children: children.length ? children : undefined };
};
return rootNodes.map(item => normalize(item, 1)).filter(Boolean);
};
const flattenCargoTypeOptions = options => {
const result = [];
const collect = list => (list || []).forEach(item => {
result.push(item);
if (item.children?.length) collect(item.children);
});
collect(options);
return result;
};
const getCargoTypePathLabels = path => {
let options = cargoTypeOptions.value;
const labels = [];
(path || []).forEach(value => {
const option = (options || []).find(item => String(item.id) === String(value));
if (!option) return;
labels.push(option.cargoName || '');
options = option.children || [];
});
return labels.filter(Boolean);
};
const findCargoTypeByPath = path => {
const id = Array.isArray(path) ? path[path.length - 1] : path;
return cargoTypeFlatOptions.value.find(item => String(item.id) === String(id));
};
const resolveCargoTypePath = row => {
if (Array.isArray(row.cargoTypePath) && row.cargoTypePath.length) return row.cargoTypePath;
const cargoType = cargoTypeFlatOptions.value.find(item => [item.cargoName, item.name, item.typeName, item.cargoCode].some(value => String(value || '') === String(row.cargoType || row.cargoTypeCode || '')));
return cargoType?.path || [];
};
const commonCargoKey = row => {
const path = resolveCargoTypePath(row);
const cargoType = findCargoTypeByPath(path);
return String(cargoType?.cargoCode || cargoType?.code || path.join('/'));
};
const getCommonCargoOptions = row => commonCargoOptionsMap.value[commonCargoKey(row)] || [];
const loadCommonCargoOptions = async row => {
const path = resolveCargoTypePath(row);
const cargoType = findCargoTypeByPath(path);
const key = commonCargoKey(row);
if (!key || commonCargoLoadingMap.value[key]) return;
commonCargoLoadingMap.value = { ...commonCargoLoadingMap.value, [key]: true };
try {
const labels = getCargoTypePathLabels(path);
const res = await getCommonCargoList(1, 500, {
secondCargoTypeName: labels[1] || row.cargoType || '',
secondCargoTypeCode: cargoType?.cargoCode || cargoType?.code || '',
allDept: 0,
});
commonCargoOptionsMap.value = { ...commonCargoOptionsMap.value, [key]: extractRecords(res) };
} finally {
commonCargoLoadingMap.value = { ...commonCargoLoadingMap.value, [key]: false };
}
};
const loadEditorOptions = async () => {
const [dictRes, cargoTypeRes, driverRes] = await Promise.all([
getDictionary({ code: 'transport_type' }),
getCargoTypeList(1, 9999),
getDriverList(1, 9999, {}),
]);
transportTypeOptions.value = extractRecords(dictRes).map(item => ({
label: item.dictValue || item.label,
value: item.dictKey || item.value,
}));
cargoTypeOptions.value = buildCargoTypeTree(extractRecords(cargoTypeRes));
cargoTypeFlatOptions.value = flattenCargoTypeOptions(cargoTypeOptions.value);
driverOptions.value = extractRecords(driverRes);
};
const loadBatches = async () => { const res = await api.getImportBatches({ ...query, current: page.current, size: page.size }); batches.value = res.data?.data?.records || []; page.total = res.data?.data?.total || 0; };
const resetQuery = () => { Object.assign(query, { batchNo: '', carrierId: '', createUser: '', createTimeRange: [] }); page.current = 1; loadBatches(); };
const loadDetails = async () => { const res = await api.getImportDetails({ batchId: detailQuery.batchId, ...detailQuery, current: detailPage.current, size: detailPage.size }); details.value = res.data?.data?.records || []; detailPage.total = res.data?.data?.total || 0; };
const openCreate = async () => {
createVisible.value = true;
const projectRes = await getProjectList(1, 9999, {});
const [projectRes] = await Promise.all([getProjectList(1, 9999, projectQueryParams), loadEditorOptions()]);
projects.value = projectRes.data?.data?.records || [];
api.getImportOptions?.().then(res => {
const data = res.data?.data || {};
@@ -84,7 +230,27 @@ const openDetail = row => { detailQuery.batchId = row.id; detailVisible.value =
const editBatch = row => { openCreate(); Object.assign(form, row); };
const removeBatches = () => api.removeImportBatches(selected.value.map(item => item.id).join(',')).then(loadBatches);
const removeBatch = row => api.removeImportBatches(row.id).then(loadBatches);
const projectChange = id => { const item = projects.value.find(row => row.id === id); form.customerName = item?.customerName || ''; api.getImportContracts?.(id).then(res => { contracts.value = res.data?.data || []; }); };
const projectChange = async id => {
const item = projects.value.find(row => row.id === id);
form.customerName = item?.customerName || item?.customerNames || item?.customer || '';
form.contractId = '';
form.contractName = '';
contracts.value = [];
if (!id) return;
const res = await getContractList(1, 9999, {
projectId: id,
projectName: item?.projectName,
});
contracts.value = res.data?.data?.records || [];
if (contracts.value.length) {
form.contractId = contracts.value[0].id;
form.contractName = contracts.value[0].contractName || '';
}
};
const contractChange = id => {
const item = contracts.value.find(row => row.id === id);
form.contractName = item?.contractName || '';
};
const fileChange = async (file, list) => {
files.value = list.slice(-1); form.file = file.raw;
const XLSX = await import('xlsx');
@@ -96,6 +262,44 @@ const fileChange = async (file, list) => {
rows.value.forEach(row => { row._duplicate = count.get(row._duplicateKey) > 1; });
};
const fileRemove = () => { files.value = []; form.file = null; };
const formatCell = (row, column) => row[column.prop] || '';
const updateEditorValue = (column, row, value) => {
if (column.editor === 'number') {
const [integer = '', decimal = ''] = String(value || '').replace(/[^\d.]/g, '').split('.');
row[column.prop] = decimal || String(value || '').includes('.') ? `${integer}.${decimal.slice(0, 2)}` : integer;
return;
}
row[column.prop] = value;
};
const handleEditorChange = (column, row, value) => {
if (column.editor === 'driver') {
const driver = driverOptions.value.find(item => [item.driverName, item.name].some(name => String(name || '') === String(value || '')));
row.driverName = value || '';
if (driver) row.driverPhone = driver.mobile || driver.phone || driver.driverPhone || row.driverPhone || '';
}
if (column.editor === 'cargoType') {
const path = Array.isArray(value) ? value : [];
const cargoType = findCargoTypeByPath(path);
const labels = getCargoTypePathLabels(path);
row.cargoTypePath = path;
row.cargoType = labels.at(-1) || '';
row.cargoTypeCode = cargoType?.cargoCode || cargoType?.code || cargoType?.id || '';
row.cargoName = '';
row.specification = '';
row.model = '';
loadCommonCargoOptions(row);
}
if (column.editor === 'cargoName') {
const cargo = getCommonCargoOptions(row).find(item => formatCargoTypeLabel(item) === value);
row.cargoName = value || '';
if (cargo) {
row.specification = cargo.specification || cargo.spec || row.specification || '';
row.model = cargo.model || cargo.modelName || row.model || '';
row.packageType = cargo.packageType || row.packageType || '';
row.brand = cargo.brand || row.brand || '';
}
}
};
const downloadTemplate = async () => {
try {
const res = await api.exportImportTemplate();
@@ -119,9 +323,9 @@ const validateImportRows = () => {
}
return true;
};
const editRow = row => { row._editing = true; };
const saveRow = row => { row._editing = false; };
const cancelRow = row => { row._cancelled = true; };
const editRow = row => { row._editSnapshot = JSON.parse(JSON.stringify(row)); row._editing = true; };
const saveRow = row => { row._editing = false; delete row._editSnapshot; };
const cancelRow = row => { if (row._editSnapshot) Object.assign(row, row._editSnapshot); row._editing = false; delete row._editSnapshot; };
const deleteRow = row => { rows.value = rows.value.filter(item => item !== row); };
const removeSelectedRows = () => { const keys = new Set(rowSelection.value.map(row => row._key)); rows.value = rows.value.filter(row => !keys.has(row._key)); rowSelection.value = []; };
const saveDraft = () => api.saveImportDraft({ ...form, rows: rows.value });
@@ -163,5 +367,12 @@ const confirmImport = async () => { await formRef.value?.validate(); if (!valida
&__form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
&__detail-head { display: flex; align-items: center; gap: 24px; margin-bottom: 8px; }
&__file-tip { margin: 0 24px; color: #606266; }
:deep(.el-table .el-input),
:deep(.el-table .el-select),
:deep(.el-table .el-cascader),
:deep(.el-table .el-date-editor) {
width: 100%;
}
}
</style>
src/views/business/loading-manage.vue
+171 -43
View File
@@ -262,22 +262,20 @@
</el-table-column>
<el-table-column label="配载子单号" prop="loadingSubNos" min-width="220">
<template #default="{ row }">
<div class="loading-manage-page__multi-line">
<el-link
v-for="item in splitText(row.loadingSubNos)"
:key="item"
type="primary"
class="loading-manage-page__sub-link"
>{{ item }}</el-link>
</div>
<span class="loading-manage-page__sub-nos">
{{ splitText(row.loadingSubNos).join('，') || '-' }}
</span>
</template>
</el-table-column>
<el-table-column
label="车牌号/航班号/船号/班列号"
prop="vehicleNo"
min-width="210"
min-width="170"
show-overflow-tooltip
/>
>
<template #header>
<span class="loading-manage-page__vehicle-header">车牌号/航班号/船号<br />班列号</span>
</template>
</el-table-column>
<el-table-column label="司机" prop="driverName" min-width="120" show-overflow-tooltip />
<el-table-column label="联系电话" prop="driverPhone" min-width="140" show-overflow-tooltip />
<el-table-column label="承运类型" prop="carrierType" min-width="120" show-overflow-tooltip />
@@ -285,10 +283,21 @@
label="发货地"
prop="departureAddress"
min-width="180"
show-overflow-tooltip
/>
<el-table-column label="途经地" prop="transitAddress" min-width="190" show-overflow-tooltip />
<el-table-column label="到货地" prop="arrivalAddress" min-width="180" show-overflow-tooltip />
>
<template #default="{ row }">
<div class="loading-manage-page__address-cell">{{ formatRouteAddress(row, 'departure') }}</div>
</template>
</el-table-column>
<el-table-column label="途经地" prop="transitAddress" min-width="190">
<template #default="{ row }">
<div class="loading-manage-page__address-cell">{{ formatRouteAddress(row, 'transit') }}</div>
</template>
</el-table-column>
<el-table-column label="到货地" prop="arrivalAddress" min-width="180">
<template #default="{ row }">
<div class="loading-manage-page__address-cell">{{ formatRouteAddress(row, 'arrival') }}</div>
</template>
</el-table-column>
<el-table-column label="承运商" prop="carrierName" min-width="160" show-overflow-tooltip />
<el-table-column
label="运输类型"
@@ -369,7 +378,7 @@
</section-card>
<section-card title="货物信息"><el-table :data="cargoRows" border height="220"><el-table-column type="index" label="序号" width="70"/><el-table-column prop="projectName" label="项目名称" min-width="140"/><el-table-column prop="cargoName" label="货物名称" min-width="140"/><el-table-column prop="cargoType" label="货物类型" min-width="120"/><el-table-column prop="packageType" label="包装" min-width="100"/><el-table-column prop="weight" label="重量（吨）" min-width="110"/><el-table-column prop="volume" label="体积（方）" min-width="110"/><el-table-column prop="quantity" label="数量" min-width="90"/><el-table-column prop="materialCode" label="物料编码" min-width="120"/><el-table-column prop="equipmentCode" label="设备编码" min-width="120"/><el-table-column prop="brand" label="品牌" min-width="120"/><el-table-column prop="specificationModel" label="规格型号" min-width="140"/><el-table-column prop="remark" label="备注" min-width="160"/><el-table-column prop="unitPrice" label="货物单价（元）" min-width="140"/><el-table-column prop="planDate" label="计划日期" min-width="130"/></el-table></section-card>
<section-card title="关联运单信息"><el-table :data="selectedWaybillRows" border><el-table-column type="index" label="序号" width="70"/><el-table-column prop="waybillNo" label="运单号" min-width="150"><template #default="{ row }"><el-link type="primary">{{ row.waybillNo || '-' }}</el-link></template></el-table-column><el-table-column label="配载单号" min-width="150"><template #default>{{ dialogForm.loadingNo || '-' }}</template></el-table-column><el-table-column prop="projectName" label="项目名称" min-width="150"/><el-table-column prop="customerName" label="客户" min-width="140"/><el-table-column prop="departureAddress" label="发货地址" min-width="220" show-overflow-tooltip/><el-table-column prop="arrivalAddress" label="到货地址" min-width="220" show-overflow-tooltip/></el-table></section-card>
<div class="loading-detail__bottom-grid"><section-card title="运输节点"><template #extra><div class="loading-detail__process-actions"><el-select v-model="processProjectId" filterable remote clearable placeholder="切换项目" :remote-method="loadProjectOptions" :loading="projectLoading" @visible-change="visible => visible && loadProjectOptions()" @change="handleProcessProjectChange"><el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName || item.name" :value="item.id" /></el-select><el-button plain @click="handleProcessAction('supplement')">补录执行</el-button><el-button plain @click="handleProcessAction('batch')">批量补录</el-button></div></template><el-timeline v-if="processNodes.length"><el-timeline-item v-for="(item, index) in processNodes" :key="item.id || index" :timestamp="item.time || ''">{{ item.name || item.nodeName || item.label }}</el-timeline-item></el-timeline><el-empty v-else description="暂无运输节点" :image-size="50"/></section-card><section-card title="物流轨迹"><template #extra><div class="loading-detail__track-actions"><el-button plain @click="handleTrackAction('playback')">轨迹回放</el-button><el-button plain @click="handleTrackAction('locate')">实时定位</el-button></div></template><div ref="detailAmap" class="loading-detail__map"></div></section-card></div>
<div class="loading-detail__bottom-grid"><section-card title="运输节点"><template #extra><div class="loading-detail__process-actions"><el-select v-model="processProjectId" filterable placeholder="切换项目" @change="handleProcessProjectChange"><el-option v-for="item in processProjectOptions" :key="item.id" :label="item.projectName" :value="item.id" /></el-select><el-button plain @click="handleProcessAction('supplement')">补录执行</el-button><el-button plain @click="handleProcessAction('batch')">批量补录</el-button></div></template><el-timeline v-if="processNodes.length"><el-timeline-item v-for="(item, index) in processNodes" :key="item.id || index" :timestamp="item.time || ''">{{ item.name || item.nodeName || item.label }}</el-timeline-item></el-timeline><el-empty v-else description="暂无运输节点" :image-size="50"/></section-card><section-card title="物流轨迹"><template #extra><div class="loading-detail__track-actions"><el-button plain @click="handleTrackAction('playback')">轨迹回放</el-button><el-button plain @click="handleTrackAction('locate')">实时定位</el-button></div></template><div ref="detailAmap" class="loading-detail__map"></div></section-card></div>
</div>
<el-form
v-else
@@ -384,7 +393,7 @@
<template #extra>
<el-link v-if="!dialogReadonly" type="primary" @click="openCandidateSearch">筛选</el-link>
</template>
<div class="loading-manage-dialog__candidate-search" v-if="candidateSearchVisible">
<div class="loading-manage-dialog__candidate-search">
<el-row :gutter="16">
<el-col :span="6">
<el-form-item label="运单号">
@@ -424,6 +433,7 @@
/>
</el-form-item>
</el-col>
<template v-if="candidateSearchVisible">
<el-col :span="6">
<el-form-item label="货物名称">
<el-input v-model="candidateQuery.cargoName" clearable placeholder="请输入" />
@@ -562,14 +572,24 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" class="loading-manage-dialog__candidate-actions">
</template>
<el-col
:span="candidateSearchVisible ? 24 : 6"
class="loading-manage-dialog__candidate-actions"
>
<el-button type="primary" @click="handleCandidateSearch">查询</el-button>
<el-button @click="handleCandidateReset">重置</el-button>
<el-link type="primary" @click="candidateSearchVisible = false"
>收起</el-link>
<el-link
type="primary"
@click="candidateSearchVisible = !candidateSearchVisible"
>{{ candidateSearchVisible ? '收起' : '展开' }}</el-link>
</el-col>
</el-row>
</div>
</section-card>
<section-card title="配载信息" class="loading-manage-dialog__load-info-card">
<section-card title="待配载运单">
<el-table
ref="candidateTableRef"
v-loading="candidateLoading"
@@ -736,9 +756,8 @@
<el-table-column prop="cargoName" label="货物名称" min-width="140" />
<el-table-column prop="cargoType" label="货物类型" min-width="140" />
<el-table-column prop="packageType" label="包装" min-width="100" />
<el-table-column prop="weight" label="重量（吨）" min-width="120" />
<el-table-column prop="volume" label="体积（方）" min-width="120" />
<el-table-column prop="quantity" label="数量" min-width="100" />
<el-table-column prop="quantityUnit" label="单位" min-width="100" />
<el-table-column prop="materialCode" label="物料编码" min-width="130" />
<el-table-column prop="equipmentCode" label="设备编码" min-width="130" />
<el-table-column prop="brand" label="品牌" min-width="120" />
@@ -759,7 +778,7 @@
/>
</div>
<div class="loading-manage-dialog__grid">
<el-form-item v-if="dialogForm.carrierType !== '自运'" label="承运商" required>
<el-form-item v-if="!['自运', '网货平台'].includes(dialogForm.carrierType)" label="承运商" required>
<el-select
v-model="dialogForm.carrierName"
clearable
@@ -779,7 +798,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="司机" :required="dialogForm.carrierType === '自运'">
<el-form-item label="司机" :required="['自运', '网货平台'].includes(dialogForm.carrierType)">
<el-select
v-model="dialogForm.driverName"
clearable
@@ -802,7 +821,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="手机号" :required="dialogForm.carrierType === '自运'">
<el-form-item label="手机号" :required="['自运', '网货平台'].includes(dialogForm.carrierType)">
<el-input v-model="dialogForm.driverPhone" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="车牌号" required>
@@ -855,6 +874,7 @@
</el-form-item>
</div>
</section-card>
</section-card>
</el-form>
</div>
@@ -1111,6 +1131,7 @@ export default {
config: loadingManageConfig,
processNodes: [],
processProjectId: '',
processProjectOptions: [],
routeChangeVisible: false,
routeChangeTab: 'change',
routeChangeRows: [],
@@ -1229,6 +1250,30 @@ export default {
.map(item => item.trim())
.filter(Boolean);
},
formatRouteAddress(row, type) {
const prefix = type === 'departure' ? 'departure' : type === 'arrival' ? 'arrival' : 'transit';
const values = [
row[`${prefix}Name`],
row[`${prefix}RegionName`],
row[`${prefix}DistrictName`],
row[`${prefix}Address`],
]
.filter(Boolean)
.flatMap(value => this.splitText(value));
const addressType = [
row[`${prefix}AddressType`],
row[`${prefix}Type`],
row.addressType,
]
.filter(Boolean)
.join('');
const isStation = /港口|码头|机场|铁路|车站|空港/.test(`${addressType}${values[0] || ''}`);
const displayValues = values.filter(
(value, index) => index === 0 || isStation || !row[`${prefix}Name`] || value !== row[`${prefix}Address`]
);
if (type === 'transit') return displayValues.join(',') || '-';
return (isStation ? displayValues[0] : row[`${prefix}Name`] || displayValues[0]) || '-';
},
rowActions(row) {
const status = row.businessStatus;
if (status === 'draft') {
@@ -1286,12 +1331,11 @@ export default {
...createDialogForm(),
...(res.data?.data || res.data || {}),
};
this.processProjectId = this.dialogForm.projectId || '';
await this.loadProjectOptions(this.dialogForm.projectName || '');
await this.restoreWaybillRows(
this.dialogForm.waybillIdsJson,
this.dialogForm.loadingSubNos
);
this.syncProcessProjectOptions();
this.restoreRouteAndCargo();
this.restoreRouteChangeRecords();
await this.loadProcessNodes();
@@ -1326,6 +1370,7 @@ export default {
this.candidateSearchVisible = false;
this.processNodes = [];
this.processProjectId = '';
this.processProjectOptions = [];
},
clearLoadingDialog() {
this.resetDialogData();
@@ -1355,13 +1400,62 @@ export default {
return;
}
try {
const rows = unwrapRecords(await getProcessConfigList(1, 20, { projectId: this.processProjectId, status: 1 }));
const config = rows.find(item => item.nodeConfigJson) || {};
this.processNodes = parseJsonArray(config.nodeConfigJson);
const projectId = String(this.processProjectId);
const rows = unwrapRecords(
await getProcessConfigList(1, 100, { projectIds: projectId, status: 1 })
);
const config =
rows.find(item => {
const projectIds = String(item.projectIds || '')
.split(',')
.map(value => value.trim())
.filter(Boolean);
return projectIds.includes(projectId) && item.nodeConfigJson;
}) || {};
this.processNodes = this.parseProcessConfigNodes(config);
} catch (error) {
this.processNodes = [];
}
},
syncProcessProjectOptions() {
const projectMap = new Map();
this.selectedWaybillRows.forEach(row => {
const id = row.projectId;
if (!id || projectMap.has(String(id))) return;
projectMap.set(String(id), {
id,
projectName: row.projectName || row.projectNames || String(id),
});
});
if (!projectMap.size && this.dialogForm.projectId) {
projectMap.set(String(this.dialogForm.projectId), {
id: this.dialogForm.projectId,
projectName: this.dialogForm.projectName || String(this.dialogForm.projectId),
});
}
this.processProjectOptions = [...projectMap.values()];
this.processProjectId = this.processProjectOptions[0]?.id || '';
},
parseProcessConfigNodes(config = {}) {
let nodes = [];
try {
const parsed =
typeof config.nodeConfigJson === 'string'
? JSON.parse(config.nodeConfigJson)
: config.nodeConfigJson;
nodes = Array.isArray(parsed) ? parsed : parsed?.nodes || [];
} catch (error) {
nodes = [];
}
const includedNodes = String(config.includedNodes || '')
.split(',')
.map(value => value.trim())
.filter(Boolean);
return nodes.filter(
node =>
node.enabled !== false && (!includedNodes.length || includedNodes.includes(node.name))
);
},
async handleProcessProjectChange() {
await this.loadProcessNodes();
},
@@ -1605,7 +1699,7 @@ export default {
this.dialogForm.loadingSubNos = rows
.map(row => row.waybillNo)
.filter(Boolean)
.join('\n');
.join('，');
this.dialogForm.waybillIdsJson = JSON.stringify(rows.map(row => row.id).filter(Boolean));
this.dialogForm.projectName = uniqueText(rows, 'projectName');
this.dialogForm.customerName = uniqueText(rows, 'customerName');
@@ -1697,6 +1791,16 @@ export default {
weight: item.weight || item.cargoWeight || '',
volume: item.volume || item.cargoVolume || '',
quantity: item.quantity || item.cargoQuantity || waybill.quantity || '',
quantityUnit:
item.quantityUnit ||
item.goodsQuantityUnit ||
item.cargoUnit ||
item.unit ||
waybill.quantityUnit ||
waybill.goodsQuantityUnit ||
waybill.cargoUnit ||
waybill.unit ||
'',
planDate: item.planDate || waybill.startDate || '',
unitPrice: item.unitPrice || waybill.unitPrice || '',
materialCode: item.materialCode || '',
@@ -1754,7 +1858,7 @@ export default {
ElMessage.warning('请输入车牌号');
return false;
}
if (this.dialogForm.carrierType === '自运') {
if (['自运', '网货平台'].includes(this.dialogForm.carrierType)) {
if (!this.dialogForm.driverName || !this.dialogForm.driverPhone) {
ElMessage.warning('请输入司机和司机手机号');
return false;
@@ -1855,6 +1959,7 @@ export default {
{
...this.buildQueryParams(this.searchForm),
ids,
exportColumns: JSON.stringify(loadingManageConfig.exportColumns),
},
{
feedback: true,
@@ -1864,7 +1969,7 @@ export default {
});
},
handleCarrierTypeChange() {
if (this.dialogForm.carrierType === '自运') {
if (['自运', '网货平台'].includes(this.dialogForm.carrierType)) {
this.dialogForm.carrierName = '';
}
},
@@ -1991,17 +2096,27 @@ export default {
width: 100%;
}
.loading-manage-page__link,
.loading-manage-page__sub-link {
.loading-manage-page__link {
padding: 0;
min-height: auto;
}
.loading-manage-page__multi-line {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.6;
.loading-manage-page__sub-nos {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.loading-manage-page__address-cell {
line-height: 20px;
white-space: pre-line;
word-break: break-word;
}
.loading-manage-page__vehicle-header {
line-height: 20px;
white-space: nowrap;
}
.loading-manage-page__status {
@@ -2069,12 +2184,12 @@ export default {
.loading-manage-dialog__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0 24px;
}
.loading-manage-dialog__span-2 {
grid-column: span 2;
grid-column: 1 / -1;
}
.loading-manage-dialog__title-action {
@@ -2118,6 +2233,10 @@ export default {
}
@media (max-width: 1200px) {
.loading-manage-dialog__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.loading-manage-dialog__waybill-route-layout {
grid-template-columns: 1fr;
}
@@ -2233,5 +2352,14 @@ export default {
}
.loading-route-change-dialog { .loading-route-change-dialog__original { color: #a8abb2; line-height: 20px; margin-bottom: 4px; }.loading-route-change-dialog__location { cursor: pointer; color: #909399; }.loading-route-change-dialog__hint { color: #909399; }.loading-route-change-dialog__route-list { display: flex; flex-direction: column; gap: 8px; }.loading-route-change-dialog__route-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 24px; align-items: center; gap: 12px; padding: 10px 12px; background: #f5f6f7; cursor: move; }.loading-route-change-dialog__route-type { width: 30px; height: 30px; border-radius: 50%; background: #dcdfe6; text-align: center; line-height: 30px; }.loading-route-change-dialog__tags { display: flex; gap: 4px; }.loading-route-change-dialog__record-content { white-space: normal; overflow-wrap: anywhere; line-height: 22px; } }
.loading-common-address-dialog__toolbar { display: flex; gap: 8px; margin-bottom: 12px; }.loading-common-address-dialog__toolbar .el-input { flex: 1; }
@media (max-width: 900px) { .loading-detail__task-row, .loading-detail__bottom-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
.loading-manage-dialog__grid {
grid-template-columns: 1fr;
}
.loading-detail__task-row,
.loading-detail__bottom-grid {
grid-template-columns: 1fr;
}
}
</style>
src/views/business/master-order.vue
+13 -7
View File
@@ -421,12 +421,13 @@ export default {
}
.master-card {
display: flex;
min-width: 0;
min-height: 150px;
margin-bottom: 8px;
border: 1px solid #eff1f7;
background: #fff;
.card-info {
flex: 0 0 380px;
flex: 0 0 266px;
padding: 18px 20px;
font-size: 14px;
color: #303133;
@@ -446,13 +447,16 @@ export default {
}
.status-tag {
flex-shrink: 0;
font-weight: 600;
}
.route-progress {
flex: 1;
flex: 1 1 auto;
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
overflow: auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
min-height: 170px;
padding: 22px 24px 18px;
border-right: 1px solid #eff1f7;
@@ -529,14 +533,16 @@ export default {
}
}
.card-actions {
width: 110px;
padding: 16px;
width: 88px;
padding: 16px 12px;
header {
margin-bottom: 10px;
font-weight: 600;
}
.el-link {
margin: 0 8px 8px 0;
display: flex;
width: 100%;
margin: 0 0 8px;
}
}
}
src/views/business/voucher-manage.vue
+960
View File
@@ -0,0 +1,960 @@
<template>
<basic-container class="voucher-manage-page">
<section class="voucher-manage-page__search">
<el-form :model="query" label-position="right" label-width="160px">
<div class="voucher-manage-page__search-grid">
<el-form-item label="凭证批次号"
><el-input v-model="query.voucherBatchNo" clearable placeholder="请输入"
/></el-form-item>
<el-form-item label="审核状态"
><el-select v-model="query.auditStatus" clearable placeholder="全部"
><el-option label="待审核" value="待审核" /><el-option
label="审核通过"
value="审核通过" /><el-option label="审核驳回" value="审核驳回" /></el-select
></el-form-item>
<el-form-item label="处理状态"
><el-select v-model="query.processStatus" clearable placeholder="全部"
><el-option label="上传中" value="上传中" /><el-option
label="处理中"
value="处理中" /><el-option label="处理完成" value="处理完成" /></el-select
></el-form-item>
<el-form-item label="运单批次号"
><el-input v-model="query.waybillBatchNo" clearable placeholder="请输入"
/></el-form-item>
<template v-if="searchExpanded">
<el-form-item label="上传来源"
><el-select v-model="query.uploadSource" clearable placeholder="全部"
><el-option label="内部" value="内部" /><el-option
label="承运商"
value="承运商" /></el-select
></el-form-item>
<el-form-item label="承运商"
><el-input v-model="query.carrierName" clearable placeholder="请输入"
/></el-form-item>
<el-form-item label="创建日期"
><el-date-picker
v-model="createRange"
type="daterange"
value-format="YYYY-MM-DD"
range-separator="-"
start-placeholder="请选择"
end-placeholder="请选择"
/></el-form-item>
</template>
<div class="voucher-manage-page__search-actions">
<el-button type="primary" @click="search">查询</el-button
><el-button @click="reset">重置</el-button
><el-link type="primary" @click="searchExpanded = !searchExpanded">{{
searchExpanded ? '收起' : '展开'
}}</el-link>
</div>
</div>
</el-form>
</section>
<section>
<div class="voucher-manage-page__toolbar">
<el-button type="primary" @click="openUpload">批量导入凭证</el-button
><el-button plain @click="openProgress">上传进度</el-button>
</div>
<el-table v-loading="loading" :data="rows" border class="voucher-manage-page__table">
<el-table-column type="selection" width="52" fixed="left" align="center" /><el-table-column
type="index"
label="序号"
width="58"
fixed="left"
align="center"
/>
<el-table-column prop="voucherBatchNo" label="凭证批次号" min-width="150" fixed="left"
><template #default="{ row }"
><el-link class="voucher-manage-page__link" type="primary" @click="view(row)">{{
row.voucherBatchNo
}}</el-link></template
></el-table-column
>
<el-table-column prop="waybillBatchNo" label="运单批次号" min-width="170" /><el-table-column
prop="fileName"
label="文件名"
min-width="200"
show-overflow-tooltip
/>
<el-table-column prop="uploadSource" label="上传来源" width="100" /><el-table-column
prop="carrierName"
label="承运商名称"
min-width="160"
><template #default="{ row }">{{ row.carrierName || '-' }}</template></el-table-column
>
<el-table-column prop="processStatus" label="处理状态" width="120" /><el-table-column
prop="voucherCount"
label="凭证数量"
width="100"
/><el-table-column
prop="relatedWaybillCount"
label="已关联运单"
width="115"
/><el-table-column prop="unRelatedWaybillCount" label="未关联运单" width="115" />
<el-table-column prop="status" label="状态" width="100"
><template #default="{ row }">{{
Number(row.status) === 1 ? '启用' : '停用'
}}</template></el-table-column
><el-table-column prop="createTime" label="创建时间" min-width="170" />
<el-table-column
prop="auditStatus"
label="审核状态"
width="120"
fixed="right"
align="center"
/><el-table-column label="操作" width="320" fixed="right" align="left"
><template #default="{ row }"
><div class="voucher-manage-page__actions">
<el-link
v-if="row.processStatus === '处理完成' && row.auditStatus === '待审核'"
type="primary"
>流程</el-link
><el-link v-if="row.processStatus === '处理完成'" type="primary" @click="view(row)"
>查看</el-link
><el-link
v-if="row.processStatus === '处理完成'"
type="primary"
@click="download(row)"
>下载</el-link
><el-link
v-if="row.processStatus !== '处理完成' || row.auditStatus === '待审核'"
type="primary"
@click="openUpload(row)"
>更换运单批次</el-link
><el-link
v-if="row.processStatus === '上传中' || row.auditStatus === '审核驳回'"
type="danger"
@click="removeRow(row)"
>删除</el-link
>
</div></template
></el-table-column
>
</el-table>
<div class="voucher-manage-page__pagination">
<el-pagination
v-model:current-page="page.current"
v-model:page-size="page.size"
:total="page.total"
:page-sizes="[10, 20, 50]"
layout="total, prev, pager, next, sizes"
@current-change="load"
@size-change="load"
/>
</div>
</section>
</basic-container>
<el-dialog
v-model="uploadVisible"
:title="editing.id ? '更换运单批次' : '批量导入凭证'"
width="1200px"
destroy-on-close
:before-close="beforeUploadDialogClose"
>
<el-form
ref="uploadFormRef"
:model="editing"
:rules="rules"
label-position="right"
label-width="auto"
class="voucher-manage-page__upload-form"
>
<el-form-item label="项目名称" prop="projectId"
><el-select
v-model="editing.projectId"
class="voucher-manage-page__project-select"
clearable
filterable
placeholder="请选择"
@change="changeProject"
><el-option
v-for="item in projectOptions"
:key="item.id"
:label="item.projectName"
:value="item.id" /></el-select
></el-form-item>
<el-form-item label="执行凭证" prop="fileUrl"
><el-upload
action="#"
accept=".zip,.7z"
:auto-upload="false"
:limit="1"
:on-change="uploadVoucher"
:on-remove="clearFile"
><el-button
type="primary"
:loading="uploading"
:disabled="!editing.projectId || uploading"
>上传</el-button
><template #tip
><span class="voucher-manage-page__upload-tip"
>支持 zip、7z 格式，采用分片上传，上传中断后可在“上传进度”继续上传。</span
></template
></el-upload
><el-progress
v-if="uploading || editing.fileTaskId"
:percentage="uploadPercent"
:status="uploadPercent === 100 ? 'success' : undefined"
class="voucher-manage-page__upload-progress"
/></el-form-item>
<el-form-item label="关联运输批次" prop="waybillImportBatchIds"
><el-button type="primary" @click="openBatchDialog">选择</el-button></el-form-item
>
</el-form>
<el-table :data="selectedBatches" border
><el-table-column type="index" label="序号" width="80" /><el-table-column
prop="batchNo"
label="运输批次号"
min-width="220"
/><el-table-column prop="createTime" label="创建时间" min-width="170" /><el-table-column
prop="waybillCount"
label="运单数"
width="120"
/><el-table-column prop="createUserName" label="创建人" min-width="140" /><el-table-column
label="操作"
width="100"
><template #default="{ row }"
><el-link type="danger" @click="removeBatch(row)">删除</el-link></template
></el-table-column
></el-table
>
<template #footer
><el-button @click="closeUploadDialog">取消</el-button
><el-button type="primary" :loading="saving" @click="submitUpload"
>确认上传</el-button
></template
>
</el-dialog>
<el-dialog v-model="batchVisible" title="关联运单批次" width="1200px" destroy-on-close>
<el-form
:model="batchQuery"
label-position="right"
label-width="160px"
class="voucher-manage-page__batch-search"
><el-row :gutter="20"
><el-col :span="12"
><el-form-item label="运单批次号"
><el-input
v-model="batchQuery.batchNo"
clearable
placeholder="请输入" /></el-form-item></el-col
><el-col :span="12"
><el-form-item label="创建日期"
><el-date-picker
v-model="batchCreateRange"
type="daterange"
value-format="YYYY-MM-DD"
range-separator="-" /></el-form-item></el-col
><el-col :span="12"
><el-form-item label="创建人"
><el-input
v-model="batchQuery.createUser"
clearable
placeholder="请输入" /></el-form-item></el-col
><el-col :span="12"
><el-form-item label="运单数"
><el-input-number v-model="batchQuery.waybillCount" :min="0" /></el-form-item></el-col
></el-row>
<div class="voucher-manage-page__search-actions">
<el-button type="primary" @click="loadBatches">查询</el-button
><el-button @click="resetBatchQuery">重置</el-button>
</div></el-form
>
<el-table
ref="batchTableRef"
:data="batchRows"
border
@selection-change="batchSelection = $event"
><el-table-column type="selection" width="56" /><el-table-column
type="index"
label="序号"
width="80" /><el-table-column
prop="batchNo"
label="运单批次号"
min-width="240" /><el-table-column
prop="createTime"
label="创建时间"
min-width="180" /><el-table-column label="运单数" width="120"
><template #default="{ row }">{{ row.waybillCount ?? '-' }}</template></el-table-column
><el-table-column prop="createUserName" label="创建人" min-width="140"
/></el-table>
<div class="voucher-manage-page__pagination">
<el-pagination
v-model:current-page="batchPage.current"
v-model:page-size="batchPage.size"
:total="batchPage.total"
:page-sizes="[10, 20, 50]"
layout="total, prev, pager, next, sizes"
@current-change="loadBatches"
@size-change="loadBatches"
/>
</div>
<template #footer
><el-button @click="batchVisible = false">取消</el-button
><el-button type="primary" @click="confirmBatches">确认</el-button></template
>
</el-dialog>
<el-dialog
v-model="progressVisible"
title="上传进度"
width="1200px"
destroy-on-close
:before-close="beforeProgressDialogClose"
@opened="loadProgress"
>
<section class="voucher-manage-page__progress-search">
<el-form :model="progressQuery" label-position="right" label-width="160px"
><div class="voucher-manage-page__search-grid">
<el-form-item label="凭证批次号"
><el-input
v-model="progressQuery.businessId"
clearable
placeholder="请输入" /></el-form-item
><el-form-item label="文件名称"
><el-input
v-model="progressQuery.attachmentName"
clearable
placeholder="请输入" /></el-form-item
><el-form-item label="上传状态"
><el-select v-model="progressQuery.status" clearable placeholder="全部"
><el-option label="正在上传" value="uploading" /><el-option
label="已暂停"
value="paused" /><el-option label="上传完成" value="completed" /><el-option
label="上传失败"
value="failed" /></el-select
></el-form-item>
<div class="voucher-manage-page__search-actions">
<el-button type="primary" @click="searchProgress">查询</el-button
><el-button @click="resetProgress">重置</el-button>
</div>
</div></el-form
>
</section>
<el-table :data="progressRows" border class="voucher-manage-page__table"
><el-table-column type="selection" width="52" /><el-table-column
type="index"
label="序号"
width="58"
/><el-table-column prop="businessId" label="凭证批次号" min-width="160" /><el-table-column
prop="attachmentName"
label="文件名称"
min-width="250"
show-overflow-tooltip
/><el-table-column prop="suffix" label="文件类型" width="100" /><el-table-column
label="文件大小"
width="120"
><template #default="{ row }">{{ formatSize(row.size) }}</template></el-table-column
><el-table-column prop="createUserName" label="上传人" width="120" /><el-table-column
prop="createTime"
label="上传时间"
min-width="170"
/><el-table-column label="上传进度" min-width="220"
><template #default="{ row }"
><div class="voucher-manage-page__progress-cell">
<el-progress
:percentage="taskPercent(row)"
:stroke-width="10"
:show-text="false"
color="#409eff"
/><span class="voucher-manage-page__progress-value">{{ taskPercent(row) }}%</span>
</div></template
></el-table-column
><el-table-column label="上传状态" width="120"
><template #default="{ row }">{{ taskStatusName(row.status) }}</template></el-table-column
><el-table-column label="操作" width="160" fixed="right"
><template #default="{ row }"
><el-link
v-if="row.status === 'paused' || row.status === 'failed'"
type="primary"
@click="resumeTask(row)"
>继续上传</el-link
><el-link v-if="row.status === 'uploading'" type="danger" @click="pauseTask(row)"
>取消</el-link
></template
></el-table-column
></el-table
>
<div class="voucher-manage-page__pagination">
<el-pagination
v-model:current-page="progressPage.current"
v-model:page-size="progressPage.size"
:total="progressPage.total"
:page-sizes="[10, 20, 50]"
layout="total, prev, pager, next, sizes"
@current-change="loadProgress"
@size-change="loadProgress"
/>
</div>
</el-dialog>
<input
ref="resumeFileInput"
class="voucher-manage-page__hidden-file"
type="file"
accept=".zip,.7z"
@change="resumeFileSelected"
/>
</template>
<script setup>
import { computed, reactive, ref, watch } from 'vue';
import md5 from 'js-md5';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getList as getProjectList } from '@/api/business/project-apply';
import * as api from '@/api/business/voucher-manage';
const loading = ref(false),
rows = ref([]),
createRange = ref([]),
searchExpanded = ref(false),
uploadVisible = ref(false),
batchVisible = ref(false),
progressVisible = ref(false),
uploadFormRef = ref(),
uploading = ref(false),
saving = ref(false),
uploadPercent = ref(0),
resumeFileInput = ref(),
resumeTarget = ref(),
uploadAbortController = ref(),
uploadSession = ref(0),
closingUploadDialog = ref(false),
closingProgressDialog = ref(false),
cancelledTaskIds = ref(new Set()),
uploadCancelled = ref(false),
activeUploadTaskId = ref();
const query = reactive({
voucherBatchNo: '',
auditStatus: '',
processStatus: '',
waybillBatchNo: '',
uploadSource: '',
carrierName: '',
});
const page = reactive({ current: 1, size: 10, total: 0 });
const editing = reactive({
id: '',
voucherBatchNo: '',
projectId: '',
projectName: '',
fileName: '',
fileUrl: '',
fileTaskId: '',
waybillImportBatchIds: [],
});
const projectOptions = ref([]);
const selectedBatches = ref([]),
batchRows = ref([]),
batchSelection = ref([]),
batchCreateRange = ref([]);
const batchQuery = reactive({ batchNo: '', createUser: '', waybillCount: undefined });
const batchPage = reactive({ current: 1, size: 10, total: 0 });
const progressQuery = reactive({ businessId: '', attachmentName: '', status: '' });
const progressPage = reactive({ current: 1, size: 10, total: 0 });
const progressRows = ref([]);
const rules = {
projectId: [{ required: true, message: '请选择项目名称' }],
waybillImportBatchIds: [{ required: true, message: '请关联运输批次' }],
};
const load = async () => {
loading.value = true;
try {
const res = await api.getList(page.current, page.size, {
...query,
createTimeStart: createRange.value?.[0] ? `${createRange.value[0]} 00:00:00` : '',
createTimeEnd: createRange.value?.[1] ? `${createRange.value[1]} 23:59:59` : '',
});
const data = res.data?.data || {};
rows.value = data.records || [];
page.total = data.total || 0;
} finally {
loading.value = false;
}
};
const search = () => {
page.current = 1;
load();
};
const reset = () => {
Object.assign(query, {
voucherBatchNo: '',
auditStatus: '',
processStatus: '',
waybillBatchNo: '',
uploadSource: '',
carrierName: '',
});
createRange.value = [];
search();
};
const loadProjects = async () => {
const res = await getProjectList(1, 9999, { temporaryCreditLimitSelectable: true });
projectOptions.value = res.data?.data?.records || [];
};
const changeProject = projectId => {
editing.projectName = projectOptions.value.find(item => item.id === projectId)?.projectName || '';
};
const openUpload = async row => {
await loadProjects();
Object.assign(editing, {
id: row?.id || '',
voucherBatchNo: row?.voucherBatchNo || '',
projectId: row?.projectId || '',
projectName: row?.projectName || '',
fileName: row?.fileName || '',
fileUrl: row?.fileUrl || '',
fileTaskId: row?.fileTaskId || '',
waybillImportBatchIds: [],
});
uploadPercent.value = 0;
selectedBatches.value = [];
uploadVisible.value = true;
if (row?.waybillBatchNo) {
await loadBatches();
selectedBatches.value = batchRows.value.filter(item =>
row.waybillBatchNo.split(',').includes(item.batchNo)
);
editing.waybillImportBatchIds = selectedBatches.value.map(item => item.id);
}
};
const clearFile = () => Object.assign(editing, { fileName: '', fileUrl: '', fileTaskId: '' });
const stopCurrentUpload = async taskId => {
// 先使整个上传会话失效，阻止 MD5 计算、创建任务等异步流程返回后继续上传。
uploadCancelled.value = true;
uploadSession.value += 1;
uploadAbortController.value?.abort();
const currentTaskId = taskId || activeUploadTaskId.value || editing.fileTaskId;
if (!currentTaskId) return;
cancelledTaskIds.value.add(String(currentTaskId));
try {
await api.pauseFileTask([currentTaskId]);
} catch (error) {
ElMessage.error(error.message || '暂停上传失败');
}
};
const closeUploadDialog = async () => {
if (closingUploadDialog.value) return;
closingUploadDialog.value = true;
try {
await stopCurrentUpload(editing.fileTaskId);
uploadVisible.value = false;
} finally {
closingUploadDialog.value = false;
}
};
const beforeUploadDialogClose = async done => {
if (closingUploadDialog.value) {
done();
return;
}
closingUploadDialog.value = true;
try {
await stopCurrentUpload(editing.fileTaskId);
done();
} finally {
closingUploadDialog.value = false;
}
};
const beforeProgressDialogClose = async done => {
if (closingProgressDialog.value) return;
closingProgressDialog.value = true;
try {
if (uploading.value || activeUploadTaskId.value) {
await stopCurrentUpload(activeUploadTaskId.value);
}
done();
} finally {
closingProgressDialog.value = false;
}
};
const ensureUploadSession = (sessionId, taskId) => {
if (
uploadCancelled.value ||
sessionId !== uploadSession.value ||
(taskId && cancelledTaskIds.value.has(String(taskId)))
) {
throw new DOMException('上传已暂停', 'AbortError');
}
};
const calculateMd5 = async file => {
const buffer = await file.arrayBuffer();
return md5.base64(buffer);
};
const uploadParts = async (file, task, sessionId) => {
uploading.value = true;
activeUploadTaskId.value = task.id;
const abortController = new AbortController();
uploadAbortController.value = abortController;
const chunkSize = task.chunkSize;
try {
for (
let partNumber = Math.max(1, (task.currentIndex || 0) + 1);
partNumber <= task.chunkTotal;
partNumber += 1
) {
ensureUploadSession(sessionId, task.id);
if (abortController.signal.aborted) throw new DOMException('上传已暂停', 'AbortError');
const urlRes = await api.getPartUploadUrl(task.id, partNumber);
ensureUploadSession(sessionId, task.id);
if (abortController.signal.aborted) throw new DOMException('上传已暂停', 'AbortError');
const url = urlRes.data?.data;
const part = file.slice(
(partNumber - 1) * chunkSize,
Math.min(partNumber * chunkSize, file.size)
);
const response = await fetch(url, {
method: 'PUT',
body: part,
signal: abortController.signal,
});
if (!response.ok) throw new Error(`分片${partNumber}上传失败`);
const etag = String(response.headers.get('etag') || '').replaceAll('"', '');
if (!etag) throw new Error('MinIO 未返回分片 ETag，请确认跨域配置已暴露 ETag 响应头');
await api.updateFileTask({ id: task.id, partNumber, etag });
ensureUploadSession(sessionId, task.id);
if (abortController.signal.aborted) throw new DOMException('上传已暂停', 'AbortError');
uploadPercent.value = Math.round((partNumber / task.chunkTotal) * 100);
if (progressVisible.value) await loadProgress();
}
ensureUploadSession(sessionId, task.id);
const fileUrlRes = await api.getFileTaskUrl(task.id);
ensureUploadSession(sessionId, task.id);
editing.fileName = file.name;
editing.fileTaskId = task.id;
editing.fileUrl = fileUrlRes.data?.data || '';
await api.completeUploadFile({
voucherBatchNo: task.businessId,
fileTaskId: task.id,
fileName: file.name,
fileUrl: editing.fileUrl,
});
ElMessage.success('执行凭证上传完成');
} catch (error) {
if (error.name !== 'AbortError')
ElMessage.error(error.message || '上传中断，可在上传进度中继续上传');
throw error;
} finally {
uploading.value = false;
if (uploadAbortController.value === abortController) uploadAbortController.value = undefined;
if (activeUploadTaskId.value === task.id) activeUploadTaskId.value = undefined;
if (progressVisible.value) await loadProgress();
}
};
const ensureUploadDraft = async fileName => {
if (editing.id) return;
if (!editing.projectId) throw new Error('请先选择项目名称');
const res = await api.createUploadDraft({ projectId: editing.projectId, fileName });
const draft = res.data?.data;
if (!draft?.id || !draft?.voucherBatchNo) throw new Error('创建凭证上传记录失败');
Object.assign(editing, {
id: draft.id,
voucherBatchNo: draft.voucherBatchNo,
projectName: draft.projectName,
});
};
const uploadVoucher = async file => {
const raw = file.raw;
if (!raw) return;
uploadCancelled.value = false;
const sessionId = uploadSession.value + 1;
uploadSession.value = sessionId;
try {
if (!resumeTarget.value) await ensureUploadDraft(raw.name);
ensureUploadSession(sessionId);
const md5 = await calculateMd5(raw);
ensureUploadSession(sessionId);
const resumeTask = resumeTarget.value;
let task;
if (resumeTask) {
if (
md5 !== resumeTask.md5 ||
raw.name !== resumeTask.attachmentName ||
raw.size !== Number(resumeTask.size)
) {
ElMessage.error('请选择与上传任务相同的文件');
return;
}
const taskRes = await api.getFileTask(resumeTask.id);
ensureUploadSession(sessionId);
task = taskRes.data?.data;
if (!task || String(task.id) !== String(resumeTask.id)) {
ElMessage.error('上传任务不存在或已失效');
return;
}
await api.resumeFileTask(task.id);
ensureUploadSession(sessionId);
task.status = 'uploading';
if (progressVisible.value) await loadProgress();
} else {
const existingRes = await api.queryFileTask(md5);
ensureUploadSession(sessionId);
task = existingRes.data?.data;
}
const chunkSize = 5 * 1024 * 1024;
if (
!task ||
task.status === 'completed' ||
(!resumeTask && task.businessId !== editing.voucherBatchNo)
) {
const createRes = await api.createFileTask({
md5,
attachmentName: raw.name,
size: raw.size,
chunkSize,
chunkTotal: Math.ceil(raw.size / chunkSize),
force: !!task,
businessType: 'voucher',
businessId: editing.voucherBatchNo,
});
ensureUploadSession(sessionId);
task = createRes.data?.data;
}
editing.fileName = raw.name;
editing.fileTaskId = task.id;
activeUploadTaskId.value = task.id;
cancelledTaskIds.value.delete(String(task.id));
resumeTarget.value = undefined;
await uploadParts(raw, task, sessionId);
} catch (error) {
if (error.name !== 'AbortError')
ElMessage.error(error.message || '上传中断，可在上传进度中继续上传');
}
};
watch(uploadVisible, visible => {
// 兜底处理：右上角、遮罩、Esc 直接修改 v-model 时仍必须停止上传。
if (!visible) void stopCurrentUpload(editing.fileTaskId);
});
const openBatchDialog = async () => {
batchVisible.value = true;
await loadBatches();
};
const loadBatches = async () => {
const res = await api.getWaybillBatches(batchPage.current, batchPage.size, {
batchNo: batchQuery.batchNo,
createUser: batchQuery.createUser,
waybillCount: batchQuery.waybillCount,
createTimeStart: batchCreateRange.value?.[0] ? `${batchCreateRange.value[0]} 00:00:00` : '',
createTimeEnd: batchCreateRange.value?.[1] ? `${batchCreateRange.value[1]} 23:59:59` : '',
});
const data = res.data?.data || {};
batchRows.value = (data.records || []).map(item => ({ ...item, id: item.waybillIds }));
batchPage.total = data.total || 0;
};
const resetBatchQuery = () => {
Object.assign(batchQuery, { batchNo: '', createUser: '', waybillCount: undefined });
batchCreateRange.value = [];
batchPage.current = 1;
loadBatches();
};
const confirmBatches = () => {
const batches = new Map();
batchSelection.value.forEach(item => {
if (!batches.has(item.batchNo)) batches.set(item.batchNo, item);
});
selectedBatches.value = [...batches.values()];
editing.waybillImportBatchIds = selectedBatches.value.flatMap(item =>
String(item.waybillIds || item.id)
.split(',')
.filter(Boolean)
);
batchVisible.value = false;
};
const removeBatch = row => {
selectedBatches.value = selectedBatches.value.filter(item => item.id !== row.id);
editing.waybillImportBatchIds = selectedBatches.value.flatMap(item =>
String(item.waybillIds || item.id)
.split(',')
.filter(Boolean)
);
};
const submitUpload = async () => {
saving.value = true;
try {
if (uploading.value && editing.fileTaskId) {
await api.pauseFileTask([editing.fileTaskId]);
uploadAbortController.value?.abort();
}
const valid = await uploadFormRef.value.validate().catch(() => false);
if (!valid) return;
if (!editing.fileUrl && !editing.fileTaskId) {
ElMessage.warning('请先选择执行凭证');
return;
}
await api.submit({
...editing,
waybillImportBatchIds: selectedBatches.value.flatMap(item =>
String(item.waybillIds || item.id)
.split(',')
.filter(Boolean)
),
});
ElMessage.success('提交成功');
await closeUploadDialog();
load();
} finally {
saving.value = false;
}
};
const openProgress = () => {
progressVisible.value = true;
};
const loadProgress = async () => {
const res = await api.getFileTaskList(progressPage.current, progressPage.size, {
...progressQuery,
businessType: 'voucher',
});
const data = res.data?.data || {};
progressRows.value = data.records || [];
progressPage.total = data.total || 0;
};
const searchProgress = () => {
progressPage.current = 1;
loadProgress();
};
const resetProgress = () => {
Object.assign(progressQuery, { businessId: '', attachmentName: '', status: '' });
searchProgress();
};
const taskPercent = row =>
row.chunkTotal ? Math.round(((row.currentIndex || 0) / row.chunkTotal) * 100) : 0;
const taskStatusName = status =>
({ uploading: '正在上传', paused: '已暂停', completed: '上传完成', failed: '上传失败' }[status] ||
status);
const formatSize = size =>
size >= 1024 ** 3 ? `${(size / 1024 ** 3).toFixed(1)}G` : `${(size / 1024 ** 2).toFixed(1)}M`;
const pauseTask = async row => {
await api.pauseFileTask([row.id]);
ElMessage.success('已取消上传');
loadProgress();
};
const resumeTask = row => {
resumeTarget.value = row;
activeUploadTaskId.value = row.id;
resumeFileInput.value?.click();
};
const resumeFileSelected = event => {
const [raw] = event.target.files || [];
if (raw) uploadVoucher({ raw });
event.target.value = '';
};
const removeRow = row =>
ElMessageBox.confirm(`确认删除凭证批次“${row.voucherBatchNo}”吗？`, '提示', {
type: 'warning',
}).then(async () => {
await api.remove(row.id);
ElMessage.success('删除成功');
load();
});
const view = row => ElMessage.info(`凭证批次：${row.voucherBatchNo}`);
const download = row => window.open(row.fileUrl, '_blank');
load();
</script>
<style lang="scss" scoped>
.voucher-manage-page {
&__search {
padding: 12px 12px 4px;
margin-bottom: 8px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
&__search-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px 24px;
}
&__search-actions {
display: flex;
grid-column: 1 / -1;
justify-content: flex-end;
align-items: center;
gap: 8px;
min-height: 32px;
}
&__toolbar {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 0;
}
&__table {
width: 100%;
}
&__link {
padding: 0;
min-height: auto;
}
&__actions {
display: flex;
flex-wrap: wrap;
gap: 2px 12px;
}
&__pagination {
display: flex;
justify-content: flex-end;
padding: 12px 0 0;
background: #fff;
}
&__project-select {
width: 280px;
}
&__hidden-file {
display: none;
}
&__upload-form :deep(.el-form-item) {
margin-bottom: 16px;
}
&__upload-tip {
margin-left: 16px;
color: #606266;
}
&__progress-cell {
display: flex;
align-items: center;
gap: 8px;
:deep(.el-progress) {
flex: 1;
}
:deep(.el-progress-bar__outer) {
background: #eff1f7;
border-radius: 6px;
}
}
&__progress-value {
min-width: 38px;
color: #303133;
text-align: right;
}
&__batch-search {
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-bottom: 8px;
}
:deep(.el-form-item) {
margin-bottom: 8px;
}
:deep(.el-form-item__label) {
white-space: nowrap;
}
:deep(.el-input),
:deep(.el-select),
:deep(.el-date-editor.el-input),
:deep(.el-date-editor.el-input__wrapper),
:deep(.el-date-editor--daterange) {
width: 100%;
}
:deep(.voucher-manage-page__project-select) {
width: 280px;
}
:deep(.el-table) {
--el-table-border-color: #eff1f7;
--el-table-row-hover-bg-color: #f5f7fa;
}
:deep(.el-table__body tr:nth-child(even) > td) {
background: #fafafa;
}
}
</style>
src/views/settlement/payable-detail.vue
+12
View File
@@ -0,0 +1,12 @@
<template>
<receivable-payable-detail settlement-type="payable" />
</template>
<script>
import ReceivablePayableDetail from './receivable-payable-detail.vue';
export default {
name: 'PayableDetail',
components: { ReceivablePayableDetail },
};
</script>
src/views/settlement/receivable-detail.vue
+12
View File
@@ -0,0 +1,12 @@
<template>
<receivable-payable-detail settlement-type="receivable" />
</template>
<script>
import ReceivablePayableDetail from './receivable-payable-detail.vue';
export default {
name: 'ReceivableDetail',
components: { ReceivablePayableDetail },
};
</script>
src/views/settlement/receivable-payable-detail.vue
+938
View File
@@ -0,0 +1,938 @@
<template>
<basic-container class="settlement-detail-page">
<section class="settlement-detail-page__search">
<el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
<div class="settlement-detail-page__search-grid">
<template v-for="field in visibleSearchFields" :key="field.prop">
<el-form-item :label="field.label">
<el-date-picker
v-if="field.type === 'daterange'"
v-model="query[field.prop]"
type="daterange"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
range-separator="~"
start-placeholder="年/月/日"
end-placeholder="年/月/日"
/>
<el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
</el-form-item>
</template>
<div class="settlement-detail-page__search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="handleReset">重置</el-button>
<el-button :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch" />
</div>
</div>
</el-form>
</section>
<section class="settlement-detail-page__table-panel">
<div class="settlement-detail-page__toolbar">
<div class="settlement-detail-page__toolbar-left">
<el-button type="primary" @click="openGenerateDialog">生成费用</el-button>
<el-button type="primary" @click="openUpdateFeeDialog">更新费用</el-button>
<el-button type="primary" @click="openTransferDialog">批量转结算</el-button>
<el-button type="primary" plain @click="handleExport">导出</el-button>
</div>
<div class="settlement-detail-page__toolbar-right">
<el-tooltip content="刷新" placement="top">
<el-button :icon="Refresh" text @click="loadTable" />
</el-tooltip>
<el-tooltip content="列设置" placement="top">
<el-button :icon="Setting" text @click="noop" />
</el-tooltip>
</div>
</div>
<el-table
v-loading="loading"
:data="rows"
border
class="settlement-detail-page__table"
@selection-change="selectionChange"
>
<el-table-column type="selection" width="52" fixed="left" align="center" />
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
<el-table-column
v-for="column in tableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
:align="column.align || 'center'"
show-overflow-tooltip
>
<template #default="{ row }">
<el-link
v-if="column.link && row[column.prop]"
type="primary"
@click="openDetailDialog(row)"
>
{{ row[column.prop] }}
</el-link>
<span v-else>{{ row[column.prop] || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="220" fixed="right" align="center">
<template #default="{ row }">
<div class="settlement-detail-page__actions">
<el-link v-if="row.settlementStatus === 'pending'" type="primary" @click="openUpdateFeeDialog(row)">
调整
</el-link>
<el-link v-if="row.settlementStatus === 'pending'" type="primary" @click="closeRow(row)">
关闭
</el-link>
<el-link v-else type="primary" disabled>-</el-link>
</div>
</template>
</el-table-column>
</el-table>
<div class="settlement-detail-page__pagination">
<el-pagination
v-model:current-page="page.current"
v-model:page-size="page.size"
:total="page.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="loadTable"
@size-change="handleSizeChange"
/>
</div>
</section>
<el-dialog
v-model="detailDialog.visible"
:title="detailDialog.title"
width="92%"
append-to-body
destroy-on-close
class="settlement-detail-dialog"
>
<el-tabs v-model="detailDialog.activeTab" @tab-change="handleDetailTabChange">
<el-tab-pane label="费用明细" name="fee">
<el-table v-loading="detailDialog.loading" :data="feeRows" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
v-for="column in feeDetailColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
:align="column.align || 'center'"
show-overflow-tooltip
>
<template #default="{ row }">{{ formatCell(row[column.prop]) }}</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="变更记录" name="change">
<el-table v-loading="changeDialog.loading" :data="changeRows" border>
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
v-for="column in changeRecordColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
align="center"
show-overflow-tooltip
/>
</el-table>
<div class="settlement-detail-page__pagination">
<el-pagination
v-model:current-page="changePage.current"
v-model:page-size="changePage.size"
:total="changePage.total"
:page-sizes="[10, 20, 50]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="loadChangeRecords"
@size-change="handleChangeSizeChange"
/>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
<el-dialog v-model="updateFeeDialog.visible" title="更新费用" width="620px" append-to-body>
<el-form
ref="updateFeeFormRef"
:model="updateFeeForm"
:rules="updateFeeRules"
label-position="right"
label-width="auto"
class="settlement-detail-page__dialog-form"
>
<el-form-item label="更新范围" prop="contractId">
<el-select
v-model="updateFeeForm.contractId"
clearable
filterable
placeholder="请选择合同"
>
<el-option
v-for="item in contractOptions"
:key="item.id"
:label="item.contractName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="合同计费方案" prop="billingPlanId">
<el-select v-model="updateFeeForm.billingPlanId" clearable filterable placeholder="请选择">
<el-option
v-for="item in billingPlanOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" :loading="updateFeeDialog.submitting" @click="confirmUpdateFee">
确认
</el-button>
<el-button @click="updateFeeDialog.visible = false">取消</el-button>
</template>
</el-dialog>
<el-dialog v-model="transferDialog.visible" title="批量转结算" width="86%" append-to-body>
<div class="settlement-detail-page__transfer-form">
<el-form :model="transferQuery" inline label-position="right" label-width="120px">
<el-form-item label="转结算类型">
<el-radio-group v-model="transferForm.settlementBillType">
<el-radio label="pre">预结算单</el-radio>
<el-radio label="formal">正式结算单</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<el-form :model="transferQuery" inline label-position="right" label-width="120px">
<el-form-item
v-for="field in transferSearchFields"
:key="field.prop"
:label="field.label"
>
<el-date-picker
v-if="field.type === 'daterange'"
v-model="transferQuery[field.prop]"
type="daterange"
value-format="YYYY-MM-DD"
range-separator="-"
start-placeholder="请选择"
end-placeholder="请选择"
/>
<el-input v-else v-model="transferQuery[field.prop]" clearable placeholder="请输入" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadTransferCandidates">查询</el-button>
<el-button type="primary" @click="confirmTransferSelection">确认选择</el-button>
</el-form-item>
</el-form>
</div>
<el-table
v-loading="transferDialog.loading"
:data="transferRows"
border
@selection-change="transferSelectionChange"
>
<el-table-column type="selection" width="52" align="center" />
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column
v-for="column in tableColumns.slice(0, 13)"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
align="center"
show-overflow-tooltip
/>
</el-table>
<template #footer>
<el-button type="primary" :loading="transferDialog.submitting" @click="submitTransfer">
确认
</el-button>
<el-button @click="transferDialog.visible = false">取消</el-button>
</template>
</el-dialog>
<el-dialog v-model="generateDialog.visible" title="生成费用" width="88%" append-to-body>
<el-form :model="generateQuery" inline label-position="right" label-width="120px">
<el-form-item label="运单合同" required>
<el-select
v-model="generateQuery.contractId"
filterable
clearable
placeholder="请选择合同"
@change="handleGenerateContractChange"
>
<el-option
v-for="item in contractOptions"
:key="item.id"
:label="item.contractName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="计费方案" required>
<el-select v-model="generateQuery.billingPlanId" filterable clearable placeholder="请选择">
<el-option
v-for="item in billingPlanOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="批次号">
<el-input v-model="generateQuery.batchNo" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="运单完成日期">
<el-date-picker
v-model="generateQuery.finishDateRange"
type="daterange"
value-format="YYYY-MM-DD"
range-separator="-"
start-placeholder="请选择"
end-placeholder="请选择"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadGenerateWaybills">查询</el-button>
<el-button @click="resetGenerateQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="generateDialog.loading"
:data="generateRows"
border
@selection-change="generateSelectionChange"
>
<el-table-column type="selection" width="52" align="center" />
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column
v-for="column in generateWaybillColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
align="center"
show-overflow-tooltip
>
<template #default="{ row }">
<el-link v-if="column.link && row[column.prop]" type="primary">
{{ row[column.prop] }}
</el-link>
<span v-else>{{ row[column.prop] || '-' }}</span>
</template>
</el-table-column>
</el-table>
<div class="settlement-detail-page__pagination">
<el-pagination
v-model:current-page="generatePage.current"
v-model:page-size="generatePage.size"
:total="generatePage.total"
:page-sizes="[10, 20, 50]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="loadGenerateWaybills"
@size-change="handleGenerateSizeChange"
/>
</div>
<template #footer>
<el-button type="primary" @click="openGeneratePreview">生成费用</el-button>
<el-button @click="generateDialog.visible = false">取消</el-button>
</template>
</el-dialog>
<el-dialog v-model="previewDialog.visible" title="生成费用明细" width="88%" append-to-body>
<el-table v-loading="previewDialog.loading" :data="previewRows" border>
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column
v-for="column in previewColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
align="center"
show-overflow-tooltip
/>
</el-table>
<div class="settlement-detail-page__pagination">
<el-pagination
v-model:current-page="previewPage.current"
v-model:page-size="previewPage.size"
:total="previewPage.total"
:page-sizes="[10, 20, 50]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="loadGeneratePreview"
@size-change="handlePreviewSizeChange"
/>
</div>
<template #footer>
<el-button type="primary" @click="generateDialog.visible = true">上一步</el-button>
<el-button type="primary" :loading="previewDialog.submitting" @click="submitGenerateFee">
确认
</el-button>
<el-button @click="previewDialog.visible = false">取消</el-button>
</template>
</el-dialog>
</basic-container>
</template>
<script>
import { ArrowDown, ArrowUp, Refresh, Setting } from '@element-plus/icons-vue';
import {
changeRecordColumns,
feeDetailBaseColumns,
feeDetailTailColumns,
generatePreviewColumns,
generateWaybillColumns,
searchFields,
settlementStatusOptions,
tableColumns,
transferSearchFields,
} from '@/option/settlement/receivable-payable-detail';
import * as api from '@/api/settlement/receivable-payable-detail';
import { getList as getContractList } from '@/api/business/contract-manage';
import { exportBlob } from '@/api/common';
import { downloadXls } from '@/utils/util';
export default {
props: {
settlementType: {
type: String,
default: '',
},
},
data() {
return {
ArrowDown,
ArrowUp,
Refresh,
Setting,
searchFields,
tableColumns,
changeRecordColumns,
transferSearchFields,
generateWaybillColumns,
loading: false,
searchExpanded: false,
query: {},
rows: [],
selection: [],
page: { current: 1, size: 10, total: 0 },
detailDialog: { visible: false, title: '费用明细', activeTab: 'fee', row: null, loading: false },
feeRows: [],
dynamicFeeColumns: [],
changeRows: [],
changePage: { current: 1, size: 10, total: 0 },
changeDialog: { loading: false },
updateFeeDialog: { visible: false, submitting: false, row: null },
updateFeeForm: { contractId: '', billingPlanId: '' },
updateFeeRules: {
contractId: [{ required: true, message: '请选择更新范围', trigger: 'change' }],
},
contractOptions: [],
billingPlanOptions: [],
transferDialog: { visible: false, loading: false, submitting: false },
transferQuery: {},
transferForm: { settlementBillType: 'formal' },
transferRows: [],
transferSelection: [],
generateDialog: { visible: false, loading: false },
generateQuery: {},
generateRows: [],
generateSelection: [],
generatePage: { current: 1, size: 10, total: 0 },
previewDialog: { visible: false, loading: false, submitting: false },
previewRows: [],
previewPage: { current: 1, size: 10, total: 0 },
};
},
computed: {
settlementTypeLabel() {
if (this.settlementType === 'receivable') return '应收';
if (this.settlementType === 'payable') return '应付';
return '应收应付';
},
visibleSearchFields() {
return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 7);
},
feeDetailColumns() {
return [...feeDetailBaseColumns, ...this.dynamicFeeColumns, ...feeDetailTailColumns];
},
previewColumns() {
return [...generatePreviewColumns, ...this.dynamicFeeColumns, ...feeDetailTailColumns];
},
},
mounted() {
this.loadContracts();
this.loadTable();
},
methods: {
async loadTable() {
this.loading = true;
try {
const params = this.buildRequestParams(
this.normalizeQuery(this.query, 'generateDateRange', 'generateStartDate', 'generateEndDate')
);
const res = await api.getList(this.page.current, this.page.size, params);
const data = this.unwrapPage(res);
this.rows = (data.records || []).map(this.decorateRow);
this.page.total = data.total || 0;
} finally {
this.loading = false;
}
},
async loadContracts() {
const res = await getContractList(1, 999, { approvalStatus: 'approved' });
const data = this.unwrapPage(res);
this.contractOptions = data.records || [];
},
handleSearch() {
this.page.current = 1;
this.loadTable();
},
handleReset() {
this.query = {};
this.handleSearch();
},
toggleSearch() {
this.searchExpanded = !this.searchExpanded;
},
handleSizeChange() {
this.page.current = 1;
this.loadTable();
},
selectionChange(selection) {
this.selection = selection;
},
async openDetailDialog(row) {
this.detailDialog = { ...this.detailDialog, visible: true, row, title: row.documentNo, activeTab: 'fee' };
await this.loadFeeDetail();
},
async loadFeeDetail() {
if (!this.detailDialog.row) return;
this.detailDialog.loading = true;
try {
const res = await api.getFeeDetail(this.detailDialog.row.id);
const data = res.data?.data || res.data || res || {};
this.dynamicFeeColumns = (data.feeItemNames || []).map((name, index) => ({
label: name,
prop: `feeItem${index}`,
minWidth: 130,
align: 'right',
}));
this.feeRows = (data.records || []).map(row => {
const dynamic = {};
(data.feeItemNames || []).forEach((name, index) => {
dynamic[`feeItem${index}`] = row.feeItems?.[name] || '';
});
return { ...row, ...dynamic };
});
} finally {
this.detailDialog.loading = false;
}
},
handleDetailTabChange(name) {
if (name === 'change') this.loadChangeRecords();
},
async loadChangeRecords() {
if (!this.detailDialog.row) return;
this.changeDialog.loading = true;
try {
const res = await api.getChangeRecords(this.changePage.current, this.changePage.size, {
detailId: this.detailDialog.row.id,
});
const data = this.unwrapPage(res);
this.changeRows = data.records || [];
this.changePage.total = data.total || 0;
} finally {
this.changeDialog.loading = false;
}
},
handleChangeSizeChange() {
this.changePage.current = 1;
this.loadChangeRecords();
},
openUpdateFeeDialog(row) {
this.updateFeeDialog = { ...this.updateFeeDialog, visible: true, row: row || null };
this.updateFeeForm = {
ids: row ? [row.id] : this.selection.map(item => item.id),
settlementType: this.settlementType || undefined,
contractId: row?.contractId || '',
billingPlanId: '',
};
this.syncBillingPlanOptions(this.updateFeeForm.contractId);
},
async confirmUpdateFee() {
await this.$refs.updateFeeFormRef.validate();
await this.$confirm(
'更新费用将使用最新的合同计费规则重新生成费用明细，确认更新费用？',
'确认提示',
{ type: 'warning' }
);
this.updateFeeDialog.submitting = true;
try {
await api.updateFee(this.updateFeeForm);
this.$message.success('更新成功');
this.updateFeeDialog.visible = false;
this.loadTable();
} finally {
this.updateFeeDialog.submitting = false;
}
},
async closeRow(row) {
await this.$confirm('确认关闭该费用明细？', '提示', { type: 'warning' });
await api.updateFee({
ids: [row.id],
closeOnly: true,
settlementType: this.settlementType || undefined,
});
this.$message.success('关闭成功');
this.loadTable();
},
openTransferDialog() {
this.transferDialog.visible = true;
this.transferForm = { settlementBillType: 'formal' };
this.transferQuery = {};
this.transferRows = [];
this.transferSelection = [];
this.loadTransferCandidates();
},
async loadTransferCandidates() {
this.transferDialog.loading = true;
try {
const params = this.buildRequestParams(
this.normalizeQuery(this.transferQuery, 'generateDateRange', 'generateStartDate', 'generateEndDate')
);
const res = await api.getTransferCandidates(1, 50, {
...params,
settlementBillType: this.transferForm.settlementBillType,
});
const data = this.unwrapPage(res);
this.transferRows = (data.records || []).map(this.decorateRow);
} finally {
this.transferDialog.loading = false;
}
},
confirmTransferSelection() {
if (!this.transferSelection.length) {
this.$message.warning('请选择需要转结算的明细');
return;
}
this.$message.success(`已选择${this.transferSelection.length}条明细`);
},
transferSelectionChange(selection) {
this.transferSelection = selection;
},
async submitTransfer() {
if (!this.transferSelection.length) {
this.$message.warning('请选择需要转结算的明细');
return;
}
this.transferDialog.submitting = true;
try {
await api.transferSettlement({
settlementType: this.settlementType || undefined,
settlementBillType: this.transferForm.settlementBillType,
ids: this.transferSelection.map(item => item.id),
});
this.$message.success('转结算成功');
this.transferDialog.visible = false;
this.loadTable();
} finally {
this.transferDialog.submitting = false;
}
},
openGenerateDialog() {
this.generateDialog.visible = true;
this.generateQuery = {};
this.generateRows = [];
this.generateSelection = [];
this.generatePage = { current: 1, size: 10, total: 0 };
},
handleGenerateContractChange(contractId) {
this.syncBillingPlanOptions(contractId);
this.generateQuery.billingPlanId = '';
},
async loadGenerateWaybills() {
if (!this.generateQuery.contractId || !this.generateQuery.billingPlanId) {
this.$message.warning('请选择运单合同和计费方案');
return;
}
this.generateDialog.loading = true;
try {
const params = this.buildRequestParams(
this.normalizeQuery(this.generateQuery, 'finishDateRange', 'finishStartDate', 'finishEndDate')
);
const res = await api.getGenerateWaybills(this.generatePage.current, this.generatePage.size, params);
const data = this.unwrapPage(res);
this.generateRows = data.records || [];
this.generatePage.total = data.total || 0;
} finally {
this.generateDialog.loading = false;
}
},
handleGenerateSizeChange() {
this.generatePage.current = 1;
this.loadGenerateWaybills();
},
resetGenerateQuery() {
this.generateQuery = {};
this.generateRows = [];
this.generateSelection = [];
this.generatePage = { current: 1, size: 10, total: 0 };
},
generateSelectionChange(selection) {
this.generateSelection = selection;
},
openGeneratePreview() {
if (!this.generateSelection.length) {
this.$message.warning('请选择需要生成费用的运单');
return;
}
this.previewDialog.visible = true;
this.generateDialog.visible = false;
this.previewPage.current = 1;
this.loadGeneratePreview();
},
async loadGeneratePreview() {
this.previewDialog.loading = true;
try {
const res = await api.getGeneratePreview(this.previewPage.current, this.previewPage.size, {
settlementType: this.settlementType || undefined,
contractId: this.generateQuery.contractId,
billingPlanId: this.generateQuery.billingPlanId,
waybillIds: this.generateSelection.map(item => item.id).join(','),
});
const data = res.data?.data || res.data || res || {};
this.dynamicFeeColumns = (data.feeItemNames || []).map((name, index) => ({
label: name,
prop: `feeItem${index}`,
minWidth: 130,
align: 'right',
}));
this.previewRows = (data.records || []).map(row => {
const dynamic = {};
(data.feeItemNames || []).forEach((name, index) => {
dynamic[`feeItem${index}`] = row.feeItems?.[name] || '';
});
return { ...row, ...dynamic };
});
this.previewPage.total = data.total || 0;
} finally {
this.previewDialog.loading = false;
}
},
handlePreviewSizeChange() {
this.previewPage.current = 1;
this.loadGeneratePreview();
},
async submitGenerateFee() {
this.previewDialog.submitting = true;
try {
await api.generateFee({
settlementType: this.settlementType || undefined,
contractId: this.generateQuery.contractId,
billingPlanId: this.generateQuery.billingPlanId,
waybillIds: this.generateSelection.map(item => item.id),
});
this.$message.success('生成成功');
this.previewDialog.visible = false;
this.loadTable();
} finally {
this.previewDialog.submitting = false;
}
},
handleExport() {
exportBlob(
'/blade-transport/receivable-payable-detail/export-receivable-payable-detail',
this.buildRequestParams(
this.normalizeQuery(this.query, 'generateDateRange', 'generateStartDate', 'generateEndDate')
),
{ feedback: true }
).then(res => {
downloadXls(
res.data,
`${this.settlementTypeLabel}明细${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`
);
});
},
buildRequestParams(params = {}) {
return this.settlementType ? { ...params, settlementType: this.settlementType } : params;
},
syncBillingPlanOptions(contractId) {
const contract = this.contractOptions.find(item => String(item.id) === String(contractId));
const plans = this.parseJson(contract?.billingPlanJson);
this.billingPlanOptions = plans.length
? plans.map((item, index) => ({
id: item.id || item.planId || item.name || `plan-${index}`,
name: item.name || item.planName || item.billingPlanName || `计费方案${index + 1}`,
}))
: [{ id: 'default', name: '默认计费方案' }];
},
normalizeQuery(source, rangeProp, startProp, endProp) {
const params = { ...source };
const range = params[rangeProp];
delete params[rangeProp];
if (Array.isArray(range)) {
params[startProp] = range[0];
params[endProp] = range[1];
}
return params;
},
decorateRow(row) {
const currency = row.currency || 'RMB';
return {
...row,
unitPriceText: this.money(row.unitPrice, currency),
freightAmountText: this.money(row.freightAmount, currency),
otherFeeAmountText: this.money(row.otherFeeAmount, currency),
totalAmountText: this.money(row.totalAmount, currency),
settlementStatusName:
settlementStatusOptions.find(item => item.value === row.settlementStatus)?.label ||
row.settlementStatus ||
'-',
};
},
money(value, currency) {
if (value === null || value === undefined || value === '') return '-';
return `${Number(value).toFixed(2)} ${currency}`;
},
formatCell(value) {
return value === null || value === undefined || value === '' ? '-' : value;
},
parseJson(value) {
if (!value) return [];
try {
const data = JSON.parse(value);
return Array.isArray(data) ? data : [];
} catch (error) {
return [];
}
},
unwrapPage(res) {
const data = res.data?.data || res.data || res || {};
return data.records ? data : { records: data.records || [], total: data.total || 0 };
},
noop() {},
},
};
</script>
<style scoped lang="scss">
.settlement-detail-page {
color: #303133;
}
.settlement-detail-page__search {
margin-bottom: 8px;
padding: 12px 12px 4px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
:deep(.el-form-item__label) {
min-width: 160px;
white-space: nowrap;
}
}
.settlement-detail-page__search-grid {
display: grid;
grid-template-columns: repeat(7, minmax(220px, 1fr));
gap: 8px 24px;
align-items: start;
:deep(.el-form-item) {
margin-bottom: 8px;
}
:deep(.el-input),
:deep(.el-select),
:deep(.el-date-editor) {
width: 100%;
}
}
.settlement-detail-page__search-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
margin-bottom: 8px;
}
.settlement-detail-page__table-panel {
background: #fff;
}
.settlement-detail-page__toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
background: transparent;
}
.settlement-detail-page__toolbar-left,
.settlement-detail-page__toolbar-right {
display: flex;
align-items: center;
gap: 8px;
}
.settlement-detail-page__table,
.settlement-detail-page :deep(.el-table) {
--el-table-border-color: #eff1f7;
:deep(th.el-table__cell) {
background: #f5f7fa;
}
:deep(.el-table__row:nth-child(even) td.el-table__cell) {
background: #fafafa;
}
}
.settlement-detail-page__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.settlement-detail-page__pagination {
display: flex;
justify-content: flex-end;
padding: 16px 0;
}
.settlement-detail-page__dialog-form {
padding: 16px 20px 0;
:deep(.el-form-item) {
margin-bottom: 16px;
}
:deep(.el-select) {
width: 100%;
}
}
.settlement-detail-page__transfer-form {
margin-bottom: 16px;
}
@media screen and (max-width: 1600px) {
.settlement-detail-page__search-grid {
grid-template-columns: repeat(4, minmax(220px, 1fr));
}
}
@media screen and (max-width: 900px) {
.settlement-detail-page__search-grid {
grid-template-columns: 1fr;
}
}
</style>
src/views/transit/exception-disposal.vue
+559
View File
@@ -0,0 +1,559 @@
<template>
<basic-container class="exception-disposal-page">
<section class="exception-disposal-page__search">
<el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
<div class="exception-disposal-page__search-grid">
<el-form-item v-for="field in searchFields" :key="field.prop" :label="field.label">
<el-date-picker
v-if="field.type === 'daterange'"
v-model="query[field.prop]"
type="daterange"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
start-placeholder="请选择"
end-placeholder="请选择"
range-separator="-"
/>
<el-cascader
v-else-if="field.prop === 'exceptionType'"
v-model="query[field.prop]"
:options="field.options"
clearable
filterable
placeholder="全部"
:props="{ emitPath: false }"
/>
<el-select
v-else-if="field.type === 'select'"
v-model="query[field.prop]"
clearable
placeholder="全部"
>
<el-option
v-for="item in field.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
</el-form-item>
<div class="exception-disposal-page__search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</div>
</el-form>
</section>
<section class="exception-disposal-page__table-panel">
<div class="exception-disposal-page__toolbar">
<div>
<el-button
v-if="permission.exception_disposal_batch_complete"
type="primary"
plain
@click="handleBatchComplete"
>
批量完成
</el-button>
</div>
<div class="exception-disposal-page__toolbar-right">
<el-tooltip content="刷新" placement="top">
<el-button :icon="Refresh" text @click="loadTable" />
</el-tooltip>
<el-tooltip content="表格密度" placement="top">
<el-button :icon="Rank" text @click="noop" />
</el-tooltip>
<el-tooltip content="列设置" placement="top">
<el-button :icon="Setting" text @click="noop" />
</el-tooltip>
</div>
</div>
<el-table
v-loading="loading"
:data="rows"
border
class="exception-disposal-page__table"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="52" fixed="left" align="center" />
<el-table-column type="index" label="序号" width="72" fixed="left" align="center" />
<el-table-column
v-for="column in tableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
align="center"
show-overflow-tooltip
>
<template #default="{ row }">
<el-link v-if="column.link && row[column.prop]" type="primary" @click="openWaybill(row)">
{{ row[column.prop] }}
</el-link>
<el-link
v-else-if="column.prop === 'disposalStatusName'"
:type="statusLinkType(row.disposalStatus)"
@click="openDisposal(row, row.disposalStatus === 'completed' ? 'detail' : 'follow')"
>
{{ row[column.prop] || '-' }}
</el-link>
<span v-else>{{ row[column.prop] || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180" fixed="right" align="center">
<template #default="{ row }">
<div class="exception-disposal-page__actions">
<template v-if="row.disposalStatus !== 'completed'">
<el-link
v-if="permission.exception_disposal_follow"
type="primary"
@click="openDisposal(row, 'follow')"
>
跟进
</el-link>
<el-link
v-if="permission.exception_disposal_complete"
type="primary"
@click="completeRow(row)"
>
完成
</el-link>
</template>
<el-link
v-else-if="permission.exception_disposal_view"
type="primary"
@click="openDisposal(row, 'detail')"
>
详情
</el-link>
</div>
</template>
</el-table-column>
</el-table>
<div class="exception-disposal-page__pagination">
<el-pagination
v-model:current-page="page.current"
v-model:page-size="page.size"
:total="page.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="loadTable"
@size-change="handleSizeChange"
/>
</div>
</section>
<el-dialog
v-model="dialog.visible"
:title="dialog.mode === 'detail' ? '异常详情' : '异常跟进'"
width="960px"
append-to-body
destroy-on-close
>
<div v-loading="dialog.loading" class="exception-disposal-page__dialog">
<div class="dialog-section-title">异常信息</div>
<dl class="exception-disposal-page__detail-grid">
<template v-for="field in detailFields" :key="field.prop">
<div :class="{ 'is-wide': field.span === 2 }">
<dt>{{ field.label }}</dt>
<dd>
<el-link v-if="field.link && detail[field.prop]" type="primary">
{{ detail[field.prop] }}
</el-link>
<span v-else>{{ detail[field.prop] || '-' }}</span>
</dd>
</div>
</template>
</dl>
<div class="dialog-section-title">现场照片</div>
<div class="exception-disposal-page__photos">
<el-image
v-for="(url, index) in photoUrls"
:key="url"
:src="url"
:preview-src-list="photoUrls"
:initial-index="index"
fit="cover"
/>
<el-empty v-if="!photoUrls.length" description="暂无现场照片" :image-size="56" />
</div>
<el-form
v-if="dialog.mode === 'follow'"
ref="followFormRef"
:model="followForm"
:rules="followRules"
label-position="right"
label-width="auto"
class="exception-disposal-page__follow-form"
>
<el-form-item label="跟进说明" prop="followContent">
<el-input
v-model="followForm.followContent"
type="textarea"
maxlength="500"
show-word-limit
:rows="4"
placeholder="请输入"
/>
</el-form-item>
</el-form>
<div class="dialog-section-title">历史跟进</div>
<el-table :data="detail.followRecords || []" border>
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column
v-for="column in followColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
align="center"
show-overflow-tooltip
/>
</el-table>
</div>
<template #footer>
<el-button
v-if="dialog.mode === 'follow' && permission.exception_disposal_follow"
type="primary"
:loading="dialog.submitting"
@click="submitFollow"
>
提交
</el-button>
<el-button
v-if="dialog.mode === 'follow' && permission.exception_disposal_complete"
type="primary"
plain
@click="completeFromDialog"
>
完成
</el-button>
<el-button @click="dialog.visible = false">取消</el-button>
</template>
</el-dialog>
</basic-container>
</template>
<script>
import { Rank, Refresh, Setting } from '@element-plus/icons-vue';
import { mapGetters } from 'vuex';
import {
detailFields,
disposalStatusOptions,
exceptionCategoryOptions,
followColumns,
searchFields,
tableColumns,
} from '@/option/transit/exception-disposal';
import * as api from '@/api/transit/exception-disposal';
export default {
data() {
return {
Rank,
Refresh,
Setting,
searchFields,
tableColumns,
detailFields,
followColumns,
loading: false,
query: {},
rows: [],
selection: [],
page: { current: 1, size: 10, total: 0 },
dialog: { visible: false, mode: 'follow', loading: false, submitting: false },
detail: {},
followForm: { followContent: '' },
followRules: {
followContent: [
{ required: true, message: '请输入跟进说明', trigger: 'blur' },
{ max: 500, message: '跟进说明不能超过500个字符', trigger: 'blur' },
],
},
};
},
computed: {
...mapGetters(['permission']),
photoUrls() {
return this.parsePhotos(this.detail.scenePhotos);
},
},
mounted() {
this.loadTable();
},
methods: {
async loadTable() {
this.loading = true;
try {
const res = await api.getList(this.page.current, this.page.size, this.buildQuery());
const data = this.unwrapPage(res);
this.rows = (data.records || []).map(this.decorateRow);
this.page.total = data.total || 0;
} finally {
this.loading = false;
}
},
buildQuery() {
const params = { ...this.query };
if (Array.isArray(params.reportTimeRange)) {
params.reportStartTime = params.reportTimeRange[0];
params.reportEndTime = params.reportTimeRange[1];
}
delete params.reportTimeRange;
return params;
},
handleSearch() {
this.page.current = 1;
this.loadTable();
},
handleReset() {
this.query = {};
this.handleSearch();
},
handleSizeChange() {
this.page.current = 1;
this.loadTable();
},
handleSelectionChange(selection) {
this.selection = selection;
},
async openDisposal(row, mode) {
this.dialog = { visible: true, mode, loading: true, submitting: false };
this.followForm = { followContent: '' };
try {
const res = await api.getDetail(row.id);
this.detail = this.decorateRow(res.data?.data || res.data || res || {});
} finally {
this.dialog.loading = false;
}
},
async submitFollow() {
await this.$refs.followFormRef.validate();
this.dialog.submitting = true;
try {
await api.follow({ id: this.detail.id, followContent: this.followForm.followContent });
this.$message.success('跟进成功');
this.dialog.visible = false;
this.loadTable();
} finally {
this.dialog.submitting = false;
}
},
async completeRow(row) {
await this.$confirm('确认完成该异常处置？', '提示', { type: 'warning' });
await api.complete({ id: row.id });
this.$message.success('完成成功');
this.loadTable();
},
async completeFromDialog() {
await this.$confirm('确认完成该异常处置？', '提示', { type: 'warning' });
await api.complete({ id: this.detail.id });
this.$message.success('完成成功');
this.dialog.visible = false;
this.loadTable();
},
async handleBatchComplete() {
if (!this.selection.length) {
this.$message.warning('请选择需要完成的异常');
return;
}
await this.$confirm('确认批量完成已选择的异常处置？', '提示', { type: 'warning' });
await api.batchComplete(this.selection.map(item => item.id).join(','));
this.$message.success('批量完成成功');
this.loadTable();
},
openWaybill(row) {
if (row.waybillId) {
this.$router.push({ path: '/business/waybill-manage', query: { detailId: row.waybillId } });
}
},
decorateRow(row) {
return {
...row,
exceptionTypeName: this.exceptionName(row.exceptionType),
disposalStatusName:
disposalStatusOptions.find(item => item.value === row.disposalStatus)?.label ||
row.disposalStatus ||
'-',
};
},
exceptionName(value) {
for (const group of exceptionCategoryOptions) {
const match = group.children.find(item => item.value === value);
if (match) return match.label;
}
return value || '-';
},
statusLinkType(status) {
return status === 'completed' ? 'info' : 'primary';
},
parsePhotos(value) {
if (!value) return [];
try {
const parsed = JSON.parse(value);
if (Array.isArray(parsed)) return parsed.filter(Boolean);
} catch (error) {
return String(value)
.split(',')
.map(item => item.trim())
.filter(Boolean);
}
return [];
},
unwrapPage(res) {
const data = res.data?.data || res.data || res || {};
return data.records ? data : { records: [], total: 0 };
},
noop() {},
},
};
</script>
<style scoped lang="scss">
.exception-disposal-page {
color: #303133;
}
.exception-disposal-page__search {
margin-bottom: 8px;
padding: 12px 12px 4px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.exception-disposal-page__search-grid {
display: grid;
grid-template-columns: repeat(4, minmax(260px, 1fr));
gap: 8px 36px;
:deep(.el-form-item) {
margin-bottom: 8px;
}
:deep(.el-input),
:deep(.el-select),
:deep(.el-cascader),
:deep(.el-date-editor) {
width: 100%;
}
}
.exception-disposal-page__search-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.exception-disposal-page__table-panel {
background: #fff;
}
.exception-disposal-page__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.exception-disposal-page__toolbar-right,
.exception-disposal-page__actions {
display: flex;
align-items: center;
gap: 8px;
}
.exception-disposal-page__table {
--el-table-border-color: #eff1f7;
:deep(th.el-table__cell) {
background: #f5f7fa;
}
:deep(.el-table__row:nth-child(even) td.el-table__cell) {
background: #fafafa;
}
}
.exception-disposal-page__pagination {
display: flex;
justify-content: flex-end;
padding: 16px 0;
}
.exception-disposal-page__dialog {
padding: 4px 0 0;
}
.dialog-section-title {
margin: 12px 0;
padding-left: 12px;
border-left: 4px solid #409eff;
font-size: 16px;
font-weight: 600;
}
.exception-disposal-page__detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 24px;
margin: 0;
div {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
align-items: start;
}
.is-wide {
grid-column: 1 / -1;
}
dt {
color: #606266;
text-align: right;
}
dd {
margin: 0 0 0 12px;
word-break: break-all;
}
}
.exception-disposal-page__photos {
display: flex;
flex-wrap: wrap;
gap: 12px;
min-height: 80px;
:deep(.el-image) {
width: 96px;
height: 96px;
border: 1px solid #eff1f7;
}
}
.exception-disposal-page__follow-form {
margin-top: 16px;
}
@media screen and (max-width: 1200px) {
.exception-disposal-page__search-grid {
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
}
@media screen and (max-width: 760px) {
.exception-disposal-page__search-grid,
.exception-disposal-page__detail-grid {
grid-template-columns: 1fr;
}
}
</style>
src/views/transit/risk-disposal.vue
+504
View File
@@ -0,0 +1,504 @@
<template>
<basic-container class="risk-disposal-page">
<section class="risk-disposal-page__search">
<el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
<div class="risk-disposal-page__search-grid">
<el-form-item v-for="field in searchFields" :key="field.prop" :label="field.label">
<el-select
v-if="field.type === 'select'"
v-model="query[field.prop]"
clearable
:placeholder="field.placeholder"
>
<el-option
v-for="item in field.options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-input
v-else
v-model="query[field.prop]"
clearable
:placeholder="field.placeholder || '请输入'"
/>
</el-form-item>
<div class="risk-disposal-page__search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</div>
</el-form>
</section>
<section class="risk-disposal-page__table-panel">
<div class="risk-disposal-page__toolbar">
<div class="risk-disposal-page__toolbar-left">
<el-button type="primary" plain @click="openBatchDialog('process')">批量处理</el-button>
<el-button type="primary" plain @click="openBatchDialog('ignore')">批量忽略</el-button>
</div>
<div class="risk-disposal-page__toolbar-right">
<el-tooltip content="刷新" placement="top">
<el-button :icon="Refresh" text @click="loadTable" />
</el-tooltip>
<el-tooltip content="表格密度" placement="top">
<el-button :icon="Rank" text @click="noop" />
</el-tooltip>
<el-tooltip content="列设置" placement="top">
<el-button :icon="Setting" text @click="noop" />
</el-tooltip>
</div>
</div>
<el-table
v-loading="loading"
:data="rows"
border
class="risk-disposal-page__table"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="64" fixed="left" align="center" />
<el-table-column type="index" label="序号" width="96" fixed="left" align="center" />
<el-table-column
v-for="column in tableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:min-width="column.minWidth"
align="center"
show-overflow-tooltip
>
<template #default="{ row }">
<el-link v-if="column.link && row[column.prop]" type="primary" @click="openWaybill(row)">
{{ row[column.prop] }}
</el-link>
<el-tag v-else-if="column.tag" :type="tagType(row, column.prop)" effect="plain">
{{ row[column.prop] || '-' }}
</el-tag>
<span v-else>{{ row[column.prop] || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="190" fixed="right" align="center">
<template #default="{ row }">
<div class="risk-disposal-page__actions">
<template v-if="row.disposalStatus === 'pending'">
<el-link type="primary" @click="openDisposal(row, 'process')">处理</el-link>
<el-link type="primary" @click="openDisposal(row, 'ignore')">忽略</el-link>
</template>
<el-link v-else type="primary" @click="openDetail(row)">查看</el-link>
</div>
</template>
</el-table-column>
</el-table>
<div class="risk-disposal-page__pagination">
<el-pagination
v-model:current-page="page.current"
v-model:page-size="page.size"
:total="page.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@current-change="loadTable"
@size-change="handleSizeChange"
/>
</div>
</section>
<el-dialog
v-model="dialog.visible"
:title="dialogTitle"
width="1100px"
append-to-body
destroy-on-close
class="risk-disposal-dialog"
>
<div v-loading="dialog.loading" class="risk-disposal-page__dialog">
<div v-if="!dialog.batch" class="risk-disposal-page__risk-card">
<div
v-for="field in detailFields"
:key="field.prop"
:class="{ 'is-wide': field.span === 3 }"
class="risk-disposal-page__risk-item"
>
<div class="risk-disposal-page__risk-label">{{ field.label }}</div>
<div class="risk-disposal-page__risk-value">
<el-link v-if="field.link && detail[field.prop]" type="primary" @click="openWaybill(detail)">
{{ detail[field.prop] }}
</el-link>
<el-tag v-else-if="field.tag" :type="tagType(detail, field.prop)" effect="plain">
{{ detail[field.prop] || '-' }}
</el-tag>
<span v-else>{{ detail[field.prop] || '-' }}</span>
</div>
</div>
</div>
<el-form
ref="disposeFormRef"
:model="disposeForm"
:rules="dialog.readonly ? {} : disposeRules"
label-position="right"
label-width="auto"
class="risk-disposal-page__dispose-form"
>
<el-form-item label="处理方式" prop="disposalMethod" required>
<el-radio-group v-model="disposeForm.disposalMethod" :disabled="dialog.readonly">
<el-radio
v-for="item in disposalMethodOptions"
:key="item.value"
:label="item.value"
>
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="处置说明" prop="disposalRemark">
<el-input
v-model="disposeForm.disposalRemark"
type="textarea"
maxlength="500"
:rows="4"
:disabled="dialog.readonly"
/>
</el-form-item>
</el-form>
</div>
<template #footer>
<el-button @click="dialog.visible = false">关闭</el-button>
<el-button
v-if="!dialog.readonly"
type="primary"
:loading="dialog.submitting"
@click="submitDisposal"
>
确认
</el-button>
</template>
</el-dialog>
</basic-container>
</template>
<script>
import { Rank, Refresh, Setting } from '@element-plus/icons-vue';
import {
detailFields,
disposalMethodOptions,
disposalStatusOptions,
riskLevelOptions,
searchFields,
tableColumns,
} from '@/option/transit/risk-disposal';
import * as api from '@/api/transit/risk-disposal';
export default {
data() {
return {
Rank,
Refresh,
Setting,
searchFields,
tableColumns,
detailFields,
disposalMethodOptions,
loading: false,
query: {},
rows: [],
selection: [],
page: { current: 1, size: 10, total: 0 },
dialog: {
visible: false,
batch: false,
readonly: false,
loading: false,
submitting: false,
method: 'process',
},
detail: {},
disposeForm: {
disposalMethod: 'process',
disposalRemark: '',
},
disposeRules: {
disposalMethod: [{ required: true, message: '请选择处理方式', trigger: 'change' }],
disposalRemark: [
{ max: 500, message: '处置说明不能超过500个字符', trigger: 'blur' },
],
},
};
},
computed: {
dialogTitle() {
if (this.dialog.readonly) return '风险详情';
return '风险处置';
},
},
mounted() {
this.loadTable();
},
methods: {
async loadTable() {
this.loading = true;
try {
const res = await api.getList(this.page.current, this.page.size, this.buildQuery());
const data = this.unwrapPage(res);
this.rows = (data.records || []).map(this.decorateRow);
this.page.total = data.total || 0;
} finally {
this.loading = false;
}
},
buildQuery() {
return { ...this.query };
},
handleSearch() {
this.page.current = 1;
this.loadTable();
},
handleReset() {
this.query = {};
this.handleSearch();
},
handleSizeChange() {
this.page.current = 1;
this.loadTable();
},
handleSelectionChange(selection) {
this.selection = selection;
},
async openDisposal(row, method) {
this.dialog = {
visible: true,
batch: false,
readonly: false,
loading: true,
submitting: false,
method,
};
this.disposeForm = { disposalMethod: method, disposalRemark: '' };
try {
const res = await api.getDetail(row.id);
this.detail = this.decorateRow(res.data?.data || res.data || res || row);
} finally {
this.dialog.loading = false;
}
},
async openDetail(row) {
this.dialog = {
visible: true,
batch: false,
readonly: true,
loading: true,
submitting: false,
method: row.disposalMethod || 'process',
};
try {
const res = await api.getDetail(row.id);
this.detail = this.decorateRow(res.data?.data || res.data || res || row);
this.disposeForm = {
disposalMethod: this.detail.disposalMethod || this.detail.processMethod || 'process',
disposalRemark: this.detail.disposalRemark || this.detail.processRemark || '',
};
} finally {
this.dialog.loading = false;
}
},
openBatchDialog(method) {
const pendingRows = this.selection.filter(row => row.disposalStatus === 'pending');
if (!pendingRows.length) {
this.$message.warning('请选择待处理风险');
return;
}
this.dialog = {
visible: true,
batch: true,
readonly: false,
loading: false,
submitting: false,
method,
};
this.detail = {};
this.disposeForm = { disposalMethod: method, disposalRemark: '' };
},
async submitDisposal() {
await this.$refs.disposeFormRef.validate();
this.dialog.submitting = true;
try {
const payload = {
disposalMethod: this.disposeForm.disposalMethod,
disposalRemark: this.disposeForm.disposalRemark,
};
if (this.dialog.batch) {
await api.batchDispose({
...payload,
ids: this.selection
.filter(row => row.disposalStatus === 'pending')
.map(row => row.id),
});
} else {
await api.dispose({ ...payload, id: this.detail.id });
}
this.$message.success(this.disposeForm.disposalMethod === 'ignore' ? '忽略成功' : '处理成功');
this.dialog.visible = false;
this.loadTable();
} finally {
this.dialog.submitting = false;
}
},
openWaybill(row) {
if (row.waybillId) {
this.$router.push({ path: '/business/waybill-manage', query: { detailId: row.waybillId } });
}
},
decorateRow(row) {
return {
...row,
riskLevelName: this.optionLabel(riskLevelOptions, row.riskLevel) || row.riskLevelName,
disposalStatusName:
this.optionLabel(disposalStatusOptions, row.disposalStatus) || row.disposalStatusName,
};
},
optionLabel(options, value) {
return options.find(item => item.value === value)?.label || '';
},
tagType(row, prop) {
const options = prop === 'riskLevelName' ? riskLevelOptions : disposalStatusOptions;
const sourceProp = prop === 'riskLevelName' ? 'riskLevel' : 'disposalStatus';
return options.find(item => item.value === row[sourceProp])?.tagType || '';
},
unwrapPage(res) {
const data = res.data?.data || res.data || res || {};
return data.records ? data : { records: [], total: 0 };
},
noop() {},
},
};
</script>
<style scoped lang="scss">
.risk-disposal-page {
color: #303133;
}
.risk-disposal-page__search {
margin-bottom: 8px;
padding: 12px 12px 4px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.risk-disposal-page__search-grid {
display: grid;
grid-template-columns: repeat(4, minmax(260px, 1fr));
gap: 8px 36px;
:deep(.el-form-item) {
margin-bottom: 8px;
}
:deep(.el-input),
:deep(.el-select) {
width: 100%;
}
}
.risk-disposal-page__search-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.risk-disposal-page__table-panel {
background: #fff;
}
.risk-disposal-page__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.risk-disposal-page__toolbar-left,
.risk-disposal-page__toolbar-right,
.risk-disposal-page__actions {
display: flex;
align-items: center;
gap: 8px;
}
.risk-disposal-page__table {
--el-table-border-color: #eff1f7;
:deep(th.el-table__cell) {
background: #f5f7fa;
}
:deep(.el-table__row:nth-child(even) td.el-table__cell) {
background: #fafafa;
}
}
.risk-disposal-page__pagination {
display: flex;
justify-content: flex-end;
padding: 16px 0;
}
.risk-disposal-page__dialog {
padding: 4px 36px 0;
}
.risk-disposal-page__risk-card {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px 48px;
margin: 0 0 72px;
padding: 14px 42px 12px;
border: 1px solid #ebeef5;
border-radius: 8px;
}
.risk-disposal-page__risk-item.is-wide {
grid-column: 1 / -1;
padding-top: 12px;
border-top: 1px solid #dcdfe6;
}
.risk-disposal-page__risk-label {
margin-bottom: 8px;
color: #909399;
font-weight: 600;
}
.risk-disposal-page__risk-value {
min-height: 24px;
color: #303133;
font-size: 16px;
}
.risk-disposal-page__dispose-form {
:deep(.el-form-item) {
margin-bottom: 28px;
}
:deep(.el-textarea) {
max-width: 800px;
}
}
@media screen and (max-width: 1200px) {
.risk-disposal-page__search-grid,
.risk-disposal-page__risk-card {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 768px) {
.risk-disposal-page__search-grid,
.risk-disposal-page__risk-card {
grid-template-columns: 1fr;
}
}
</style>
src/views/transit/track-tracking.vue
+301
View File
@@ -0,0 +1,301 @@
<template>
<basic-container class="track-tracking-page">
<section class="track-tracking-page__search">
<el-form :model="query" label-position="right" label-width="auto" @submit.prevent>
<div class="track-tracking-page__search-row">
<el-form-item label="查询类型" required>
<el-select v-model="query.queryType" placeholder="请选择">
<el-option
v-for="item in queryTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="车牌号" required>
<el-input v-model="query.vehicleNo" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="时间范围" required>
<el-date-picker
v-model="query.timeRange"
type="daterange"
range-separator="-"
start-placeholder="请选择"
end-placeholder="请选择"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-link class="track-tracking-page__ship-link" type="primary" @click="handleShipSearch">
船舶查询
</el-link>
</div>
<div class="track-tracking-page__search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form>
</section>
<section class="track-tracking-page__content">
<div class="track-tracking-page__map-panel">
<div class="track-tracking-page__map-card">
<div class="track-tracking-page__map-info">
<div
v-for="field in mapInfoFields"
:key="field.prop"
class="track-tracking-page__map-info-item"
>
<div class="track-tracking-page__map-info-label">{{ field.label }}</div>
<div class="track-tracking-page__map-info-value">
{{ mapInfo[field.prop] || '-' }}
</div>
</div>
</div>
<div class="track-tracking-page__map-placeholder">
<div class="track-tracking-page__map-placeholder-text">高德地图占位</div>
<div class="track-tracking-page__map-route">
<span class="track-tracking-page__map-point track-tracking-page__map-point--start" />
<span class="track-tracking-page__map-line" />
<span class="track-tracking-page__map-point track-tracking-page__map-point--mid" />
<span class="track-tracking-page__map-line track-tracking-page__map-line--short" />
<span class="track-tracking-page__map-point track-tracking-page__map-point--end" />
</div>
</div>
</div>
</div>
<div class="track-tracking-page__blank-panel" />
</section>
</basic-container>
</template>
<script>
import { getShipTracking, getTrackingMap } from '@/api/transit/track-tracking';
import { mapInfoFields, queryTypeOptions } from '@/option/transit/track-tracking';
export default {
data() {
return {
queryTypeOptions,
mapInfoFields,
query: {
queryType: 'track',
vehicleNo: '',
timeRange: [],
},
mapInfo: {
siteName: 'XX园区A门',
address: '南宁市邕宁区龙岗大道21号',
coordinates: '108.348610;22.721864',
},
};
},
mounted() {
this.loadTracking();
},
methods: {
async loadTracking() {
if (this.query.queryType === 'ship') {
await getShipTracking(this.buildQuery());
return;
}
await getTrackingMap(this.buildQuery());
},
buildQuery() {
const params = { ...this.query };
if (Array.isArray(params.timeRange)) {
params.startTime = params.timeRange[0];
params.endTime = params.timeRange[1];
}
delete params.timeRange;
return params;
},
handleSearch() {
this.loadTracking();
},
handleReset() {
this.query = {
queryType: 'track',
vehicleNo: '',
timeRange: [],
};
this.loadTracking();
},
handleShipSearch() {
this.query.queryType = 'ship';
this.loadTracking();
},
},
};
</script>
<style scoped lang="scss">
.track-tracking-page {
color: #303133;
}
.track-tracking-page__search {
margin-bottom: 24px;
padding: 24px 48px 12px;
background: #fff;
}
.track-tracking-page__search-row {
display: grid;
grid-template-columns: 260px 320px 360px 1fr;
gap: 24px;
align-items: center;
}
.track-tracking-page__ship-link {
justify-self: end;
align-self: center;
font-size: 16px;
font-weight: 600;
}
.track-tracking-page__search-actions {
display: flex;
gap: 16px;
margin-top: 36px;
padding-left: 4px;
}
.track-tracking-page__content {
display: grid;
grid-template-columns: minmax(1100px, 1fr) 1fr;
gap: 32px;
align-items: start;
min-height: 640px;
}
.track-tracking-page__map-panel {
min-height: 640px;
}
.track-tracking-page__map-card {
position: relative;
min-height: 640px;
}
.track-tracking-page__map-info {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
width: 320px;
padding: 24px 28px;
background: rgba(255, 255, 255, 0.92);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.track-tracking-page__map-info-item + .track-tracking-page__map-info-item {
margin-top: 18px;
}
.track-tracking-page__map-info-label {
margin-bottom: 8px;
color: #606266;
font-size: 16px;
}
.track-tracking-page__map-info-value {
color: #303133;
font-size: 18px;
line-height: 1.5;
}
.track-tracking-page__map-placeholder {
position: relative;
width: 100%;
height: 640px;
overflow: hidden;
background:
linear-gradient(0deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
radial-gradient(circle at 12% 30%, rgba(230, 230, 230, 0.9) 0, rgba(230, 230, 230, 0.9) 24%, transparent 24.5%),
radial-gradient(circle at 34% 18%, rgba(235, 235, 235, 0.95) 0, rgba(235, 235, 235, 0.95) 18%, transparent 18.5%),
radial-gradient(circle at 65% 46%, rgba(232, 232, 232, 0.9) 0, rgba(232, 232, 232, 0.9) 26%, transparent 26.5%),
linear-gradient(135deg, #fafafa 0%, #ececec 100%);
border-radius: 0;
}
.track-tracking-page__map-placeholder-text {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
color: rgba(0, 0, 0, 0.28);
font-size: 18px;
transform: translate(-50%, -50%);
}
.track-tracking-page__map-route {
position: absolute;
left: 0;
bottom: 78px;
display: flex;
align-items: center;
width: 100%;
}
.track-tracking-page__map-line {
display: block;
flex: 1;
height: 4px;
background: #1f86ff;
}
.track-tracking-page__map-line--short {
flex: 0.42;
}
.track-tracking-page__map-point {
display: block;
width: 18px;
height: 18px;
margin: 0 -9px;
border-radius: 50%;
background: #67c23a;
box-shadow: 0 0 0 6px rgba(103, 194, 58, 0.18);
}
.track-tracking-page__map-point--start {
margin-left: 76px;
}
.track-tracking-page__map-point--mid {
background: #67c23a;
}
.track-tracking-page__map-point--end {
background: #ff6b6b;
box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.16);
}
.track-tracking-page__blank-panel {
min-height: 640px;
}
:deep(.track-tracking-page__search .el-form-item__label) {
min-width: 96px;
font-size: 16px;
font-weight: 600;
}
:deep(.track-tracking-page__search .el-input),
:deep(.track-tracking-page__search .el-select),
:deep(.track-tracking-page__search .el-date-editor) {
width: 100%;
}
@media screen and (max-width: 1400px) {
.track-tracking-page__search-row {
grid-template-columns: 1fr 1fr 1fr;
}
.track-tracking-page__content {
grid-template-columns: 1fr;
}
}
</style>
src/views/vehicle/customer-archive.vue
+58 -33
View File
@@ -532,6 +532,7 @@
<el-table :data="invoiceTableData" border class="invoice-table">
<el-table-column label="序号" prop="__index" width="90" align="center" />
<el-table-column label="收票方名称" prop="invoiceTitle" min-width="180" />
<el-table-column label="发票类型" prop="invoiceType" min-width="150" />
<el-table-column label="纳税人识别号" prop="taxNo" min-width="180" />
<el-table-column label="开户行名称" prop="bankName" min-width="180" />
<el-table-column label="注册电话" prop="registeredPhone" min-width="150" />
@@ -892,6 +893,12 @@
<el-form-item label="收票方名称" prop="invoiceTitle">
<el-input v-model="invoiceForm.invoiceTitle" maxlength="100" />
</el-form-item>
<el-form-item label="发票类型" prop="invoiceType">
<el-select v-model="invoiceForm.invoiceType" clearable placeholder="请选择">
<el-option label="增值税专用发票" value="增值税专用发票" />
<el-option label="普通发票" value="普通发票" />
</el-select>
</el-form-item>
<el-form-item label="开户行名称" prop="bankName">
<el-select v-model="invoiceForm.bankName" filterable clearable>
<el-option
@@ -919,14 +926,16 @@
<div class="invoice-form__address">
<el-input
v-model="invoiceForm.receiverRegionName"
readonly
maxlength="100"
placeholder="地址控件选择"
placeholder="点击后弹出地图组件"
@click="handleInvoiceReceiverMapPick"
/>
<el-input
v-model="invoiceForm.receiverDetailAddress"
maxlength="255"
placeholder="请输入详细地址"
/>
><template #suffix><el-icon class="invoice-form__address-location" @click="handleInvoiceReceiverMapPick"><Location /></el-icon></template></el-input>
</div>
</el-form-item>
</el-col>
@@ -1218,7 +1227,7 @@ import { downloadXls } from '@/utils/util';
import { getToken } from '@/utils/auth';
import { getUploadHeaders } from '@/utils/upload';
import { normalizeSearchRangeParams } from '@/utils/search-range';
import { ArrowRight } from '@element-plus/icons-vue';
import { ArrowRight, Location } from '@element-plus/icons-vue';
import { ElImageViewer } from 'element-plus';
import { OpenFileViewer } from '@open-file-viewer/vue';
import { fallbackPlugin, imagePlugin, officePlugin, pdfPlugin, textPlugin } from '@open-file-viewer/core';
@@ -1246,6 +1255,7 @@ const qualificationViewerPlugins = [
export default {
components: {
ArrowRight,
Location,
ElImageViewer,
OpenFileViewer,
},
@@ -1306,6 +1316,7 @@ export default {
receiptBox: false,
invoiceBox: false,
readonly: false,
originalAccessType: '',
activeTab: 'scores',
archiveForm: this.emptyArchive(),
currentScore: { details: [] },
@@ -1456,6 +1467,7 @@ export default {
invoiceRules: {
taxNo: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
invoiceTitle: [{ required: true, message: '请输入收票方名称', trigger: 'blur' }],
invoiceType: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
registeredPhone: [{ required: true, message: '请输入注册电话', trigger: 'blur' }],
bankName: [{ required: true, message: '请输入开户行名称', trigger: 'blur' }],
registeredRegionName: [
@@ -1571,6 +1583,7 @@ export default {
type: 'select',
search: true,
searchOrder: 8,
searchPlaceholder: '请选择',
minWidth: 120,
dicData: [
{ label: '临时', value: 'temporary' },
@@ -1676,8 +1689,11 @@ export default {
invoiceDialogTitle() {
return this.invoiceIndex > -1 ? '编辑发票信息' : '新增发票信息';
},
isTemporaryToFormal() {
return Boolean(this.archiveForm.id) && this.originalAccessType === 'temporary' && this.archiveForm.accessType === 'formal';
},
missingQualificationText() {
if (this.archiveForm.accessType !== 'formal') return '';
if (this.archiveForm.accessType !== 'formal' || this.isTemporaryToFormal) return '';
const types = this.qualificationFiles
.filter(item => item.url)
.map(item => item.type || item.name)
@@ -1907,6 +1923,7 @@ export default {
emptyInvoice() {
return {
invoiceTitle: '',
invoiceType: '',
taxNo: '',
bankName: '',
registeredPhone: '',
@@ -1936,27 +1953,12 @@ export default {
value: item.rawLabel,
})),
];
this.applyDefaultDeptSearch(deptColumn);
})
.finally(() => {
this.deptSearchInitialized = true;
this.$nextTick(() => this.onLoad(this.page, this.query));
});
},
applyDefaultDeptSearch(deptColumn) {
if (this.isAdmin) return;
const currentDeptId = this.userInfo.deptId || this.userInfo.dept_id;
const currentDept = this.deptOptions.find(
item => String(item.value) === String(currentDeptId)
);
const deptName = currentDept?.rawLabel || this.userInfo.deptName || this.userInfo.dept_name;
if (!deptName) return;
deptColumn.searchValue = deptName;
this.query = { ...this.query, deptName };
if (this.$refs.crud?.searchForm) {
this.$refs.crud.searchForm.deptName = deptName;
}
},
initRegionOptions() {
getLazyTree().then(res => {
const regions = this.buildRegionTree(res.data.data || []);
@@ -2218,13 +2220,11 @@ export default {
);
},
formatInvoiceReceiverAddress(row = {}) {
return (
row.receiverAddress ||
[row.receiverRegionName, row.receiverDetailAddress]
const address = [row.receiverRegionName, row.receiverDetailAddress]
.map(item => String(item || '').trim())
.filter(Boolean)
.join('')
);
.join('');
return address || row.receiverAddress || '';
},
normalizeContact(contact = {}) {
const contactAddress =
@@ -2305,6 +2305,17 @@ export default {
this.contactMapStatus = '可搜索地址或点击地图选点';
this.contactMapBox = true;
},
handleInvoiceReceiverMapPick() {
this.contactMapTarget = 'invoiceReceiver';
this.contactMapKeyword =
this.invoiceForm.receiverDetailAddress || this.invoiceForm.receiverRegionName || '';
this.contactMapSelected = this.buildContactMapSelection({
address: this.invoiceForm.receiverDetailAddress,
regionName: this.invoiceForm.receiverRegionName,
});
this.contactMapStatus = '可搜索地址或点击地图选点';
this.contactMapBox = true;
},
loadAmap() {
if (window.AMap && window.AMap.Map) {
return Promise.resolve();
@@ -2460,6 +2471,18 @@ export default {
this.contactMapBox = false;
return;
}
if (this.contactMapTarget === 'invoiceReceiver') {
this.invoiceForm.receiverRegionName =
this.contactMapSelected.regionName || this.invoiceForm.receiverRegionName;
this.invoiceForm.receiverDetailAddress = this.formatMapDetailAddress(
this.contactMapSelected.detailAddress || this.invoiceForm.receiverDetailAddress,
this.invoiceForm.receiverRegionName
);
this.invoiceForm.receiverAddress = this.formatInvoiceReceiverAddress(this.invoiceForm);
this.$refs.invoiceForm?.validateField('receiverRegionName');
this.contactMapBox = false;
return;
}
this.contactForm.detailAddress =
this.contactMapSelected.detailAddress || this.contactForm.detailAddress;
this.contactForm.regionName =
@@ -2946,6 +2969,7 @@ export default {
if (row && row.id) {
getDetail(row.id).then(res => {
this.archiveForm = this.normalizeDetail(res.data.data);
this.originalAccessType = this.archiveForm.accessType || '';
this.qualificationFiles = this.parseAttachments(
this.archiveForm.qualificationAttachments
);
@@ -2956,6 +2980,7 @@ export default {
return;
}
this.archiveForm = this.emptyArchive();
this.originalAccessType = '';
this.qualificationFiles = [];
this.qualificationUploadFiles = [];
this.selectedQualificationFiles = [];
@@ -2964,6 +2989,7 @@ export default {
resetArchive() {
this.readonly = false;
this.archiveForm = this.emptyArchive();
this.originalAccessType = '';
this.qualificationFiles = [];
this.qualificationUploadFiles = [];
this.selectedQualificationFiles = [];
@@ -2984,7 +3010,8 @@ export default {
},
validateFormalForApproval(archive) {
if (archive.accessType !== 'formal') return true;
if (!archive.qualificationAttachments) {
const isTemporaryToFormal = Boolean(archive.id) && this.originalAccessType === 'temporary';
if (!isTemporaryToFormal && !archive.qualificationAttachments) {
this.$message.warning('正式客商提交审核前必须维护客商材料');
return false;
}
@@ -3590,7 +3617,7 @@ export default {
});
},
searchReset() {
this.query = this.isAdmin ? {} : { deptName: this.getCurrentDeptName() };
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
@@ -3659,13 +3686,6 @@ export default {
buildQuery(params = {}) {
return normalizeSearchRangeParams({ ...params, ...this.query }, createTimeRangeMap);
},
getCurrentDeptName() {
const currentDeptId = this.userInfo.deptId || this.userInfo.dept_id;
const currentDept = this.deptOptions.find(
item => String(item.value) === String(currentDeptId)
);
return currentDept?.rawLabel || this.userInfo.deptName || this.userInfo.dept_name || '';
},
},
};
</script>
@@ -4027,6 +4047,11 @@ export default {
}
}
.invoice-form__address-location {
cursor: pointer;
color: #909399;
}
.score-detail-table {
width: 100%;
margin-top: 12px;