init
This commit is contained in:
commit
23ed07daed
|
|
@ -0,0 +1,2 @@
|
|||
# 开发环境 — 留空，走 vite.config.ts 中的 proxy
|
||||
VITE_API_BASE=
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# 生产环境
|
||||
VITE_API_BASE=https://api.baoshi56.com
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# 测试环境（SIT）
|
||||
VITE_API_BASE=https://sit-api.baoshi56.com
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,7 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<object, object, unknown>
|
||||
export default component
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>机器任务管理后台</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "robot-admin-web",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"build:test": "vue-tsc -b && vite build --mode test",
|
||||
"build:prod": "vue-tsc -b && vite build --mode production",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0",
|
||||
"pinia": "^2.3.0",
|
||||
"axios": "^1.7.9",
|
||||
"element-plus": "^2.9.1",
|
||||
"@element-plus/icons-vue": "^2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"typescript": "~5.7.0",
|
||||
"vite": "^6.0.0",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||
<rect width="32" height="32" rx="6" fill="#409EFF"/>
|
||||
<path d="M16 6a3 3 0 0 1 3 3v2h1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H12a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h1V9a3 3 0 0 1 3-3zm-2 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm4 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export interface LoginResult {
|
||||
token: string
|
||||
expirationTime: number
|
||||
activate: boolean
|
||||
userVO: {
|
||||
id: number
|
||||
name: string
|
||||
avatar: string
|
||||
temporary: boolean
|
||||
certified: boolean
|
||||
}
|
||||
version: string
|
||||
}
|
||||
|
||||
export function login(username: string, password: string) {
|
||||
return request.post<never, { code: number; data: LoginResult; message: string }>(
|
||||
'/api/user/login',
|
||||
{ username, password },
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export interface ElevatorVO {
|
||||
id: number
|
||||
hkOutPoint: string
|
||||
hkInPoint: string
|
||||
zsOutPoint: string
|
||||
zsInPoint: string
|
||||
enable: boolean
|
||||
workingTask: string
|
||||
currentOutboundTask: string
|
||||
currentInboundTask: string
|
||||
taskQueue: string[]
|
||||
queueSize: number
|
||||
}
|
||||
|
||||
export function getElevatorList() {
|
||||
return request.get<never, { code: number; data: ElevatorVO[] }>(
|
||||
'/api/robot/admin/machine-task/elevator/list',
|
||||
)
|
||||
}
|
||||
|
||||
export function getElevatorDetail(id: number) {
|
||||
return request.get<never, { code: number; data: ElevatorVO }>(
|
||||
`/api/robot/admin/machine-task/elevator/${id}`,
|
||||
)
|
||||
}
|
||||
|
||||
export function enableElevator(id: number) {
|
||||
return request.get<never, { code: number; data: boolean }>(
|
||||
`/api/robot/admin/machine-task/elevator/enable/${id}`,
|
||||
)
|
||||
}
|
||||
|
||||
export function disableElevator(id: number) {
|
||||
return request.get<never, { code: number; data: boolean }>(
|
||||
`/api/robot/admin/machine-task/elevator/disable/${id}`,
|
||||
)
|
||||
}
|
||||
|
||||
export function clearElevator(id: number) {
|
||||
return request.get<never, { code: number; data: boolean }>(
|
||||
`/api/robot/admin/machine-task/elevator/clear/${id}`,
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const BASE = '/api/robot/admin/machine-generate'
|
||||
|
||||
export interface MachineBaseReq {
|
||||
warehouse: string
|
||||
container: string
|
||||
shelfDirection?: string
|
||||
sku?: string
|
||||
businessNo?: string
|
||||
priority?: number
|
||||
}
|
||||
|
||||
export interface InboundReq extends MachineBaseReq {
|
||||
targetType?: string
|
||||
targetCode?: string
|
||||
stationCode?: string
|
||||
}
|
||||
|
||||
export interface OutboundReq extends MachineBaseReq {
|
||||
targetType?: string
|
||||
targetCode?: string
|
||||
targetPoint?: string
|
||||
}
|
||||
|
||||
export interface MoveReq extends MachineBaseReq {
|
||||
targetType?: string
|
||||
targetCode?: string
|
||||
targetLevel?: number
|
||||
}
|
||||
|
||||
export interface ReleaseReq extends MachineBaseReq {
|
||||
taskChainCode: string
|
||||
targetType?: string
|
||||
targetCode?: string
|
||||
}
|
||||
|
||||
export interface BindStationReq {
|
||||
warehouse: string
|
||||
container: string
|
||||
station: string
|
||||
}
|
||||
|
||||
export interface ReleaseStationReq {
|
||||
warehouse: string
|
||||
container: string
|
||||
station: string
|
||||
}
|
||||
|
||||
export interface CancelReq extends MachineBaseReq {
|
||||
reason?: string
|
||||
}
|
||||
|
||||
export function generateInbound(data: InboundReq) {
|
||||
return request.post<never, { code: number; data: string }>(`${BASE}/inbound`, data)
|
||||
}
|
||||
|
||||
export function generateOutboundWait(data: OutboundReq[]) {
|
||||
return request.post<never, { code: number; data: Record<string, string> }>(`${BASE}/outboundWait`, data)
|
||||
}
|
||||
|
||||
export function generateOutboundNoWait(data: OutboundReq[]) {
|
||||
return request.post<never, { code: number; data: Record<string, string> }>(`${BASE}/outboundNoWait`, data)
|
||||
}
|
||||
|
||||
export function generateMove(data: MoveReq) {
|
||||
return request.post<never, { code: number; data: string }>(`${BASE}/move`, data)
|
||||
}
|
||||
|
||||
export function generateRelease(data: ReleaseReq) {
|
||||
return request.post<never, { code: number; data: boolean }>(`${BASE}/release`, data)
|
||||
}
|
||||
|
||||
export function generateBindStation(data: BindStationReq) {
|
||||
return request.post<never, { code: number; data: boolean }>(`${BASE}/bindStation`, data)
|
||||
}
|
||||
|
||||
export function generateReleaseStation(data: ReleaseStationReq) {
|
||||
return request.post<never, { code: number; data: boolean }>(`${BASE}/releaseStation`, data)
|
||||
}
|
||||
|
||||
export function generateCancel(data: CancelReq) {
|
||||
return request.post<never, { code: number; data: string[] }>(`${BASE}/cancel`, data)
|
||||
}
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
import axios from 'axios'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export interface TaskChainVO {
|
||||
id: number
|
||||
code: string
|
||||
warehouse: string
|
||||
firstTaskVendor: string
|
||||
status: string
|
||||
type: string
|
||||
businessNo: string
|
||||
description: string
|
||||
sourceLocation: string
|
||||
sourcePoint: string
|
||||
sourceContainer: string
|
||||
targetType: string
|
||||
targetCode: string
|
||||
targetLocation: string
|
||||
targetPoint: string
|
||||
elevatorId: number
|
||||
priority: number
|
||||
executionTime: number
|
||||
completeTime?: string
|
||||
cancelReason: string
|
||||
cancelTime: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
export interface TaskVO {
|
||||
id: number
|
||||
chainCode: string
|
||||
code: string
|
||||
machineCallCode: string
|
||||
vendor: string
|
||||
status: string
|
||||
type: string
|
||||
exceptionReason: string
|
||||
sourceLocation: string
|
||||
sourcePoint: string
|
||||
sourceContainer: string
|
||||
targetLocation: string
|
||||
targetPoint: string
|
||||
targetType: string
|
||||
targetCode: string
|
||||
executionTime: number
|
||||
startTime: string
|
||||
completeTime: string
|
||||
cancelReason: string
|
||||
cancelTime: string
|
||||
batchNo: number
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
export interface TaskChainDetailVO extends TaskChainVO {
|
||||
tasks: TaskVO[]
|
||||
}
|
||||
|
||||
export interface PageResult<T> {
|
||||
records: T[]
|
||||
total: number
|
||||
size: number
|
||||
current: number
|
||||
pages: number
|
||||
}
|
||||
|
||||
export interface ChainQueryParams {
|
||||
page: number
|
||||
size: number
|
||||
code?: string
|
||||
warehouse?: string
|
||||
status?: string
|
||||
type?: string
|
||||
businessNo?: string
|
||||
sourceContainer?: string
|
||||
startTime?: string
|
||||
endTime?: string
|
||||
}
|
||||
|
||||
export function getChainPage(params: ChainQueryParams) {
|
||||
return request.get<never, { code: number; data: PageResult<TaskChainVO> }>(
|
||||
'/api/robot/admin/machine-task/chain/page',
|
||||
{ params },
|
||||
)
|
||||
}
|
||||
|
||||
export interface TaskChainStatsVO {
|
||||
inProgress: number
|
||||
waiting: number
|
||||
completedToday: number
|
||||
failedToday: number
|
||||
}
|
||||
|
||||
export function getChainStats() {
|
||||
return request.get<never, { code: number; data: TaskChainStatsVO }>(
|
||||
'/api/robot/admin/machine-task/chain/stats',
|
||||
)
|
||||
}
|
||||
|
||||
export function getChainDetail(code: string) {
|
||||
return request.get<never, { code: number; data: TaskChainDetailVO }>(
|
||||
`/api/robot/admin/machine-task/chain/detail/${code}`,
|
||||
)
|
||||
}
|
||||
|
||||
export function dispatchScan(warehouse: string) {
|
||||
return request.get<never, { code: number; data: boolean }>(
|
||||
'/api/robot/admin/machine-task/dispatch/scan',
|
||||
{ params: { warehouse } },
|
||||
)
|
||||
}
|
||||
|
||||
export function dispatchExecute(warehouse: string, chainCode: string) {
|
||||
return request.get<never, { code: number; data: boolean }>(
|
||||
'/api/robot/admin/machine-task/dispatch/execute',
|
||||
{ params: { warehouse, chainCode } },
|
||||
)
|
||||
}
|
||||
|
||||
export const taskStatusOptions = [
|
||||
{ value: 'CREATED', label: '已创建' },
|
||||
{ value: 'READY', label: '准备就绪' },
|
||||
{ value: 'IN_PROGRESS', label: '进行中' },
|
||||
{ value: 'WAITING_WAKE', label: '待唤醒' },
|
||||
{ value: 'WAITING_RELEASE', label: '待释放' },
|
||||
{ value: 'COMPLETED', label: '已完成' },
|
||||
{ value: 'CANCELED', label: '已取消' },
|
||||
{ value: 'FAILED', label: '失败' },
|
||||
]
|
||||
|
||||
export function cancelChain(chainCode: string, reason?: string) {
|
||||
return request.post<never, { code: number; data: boolean }>(
|
||||
'/api/robot/admin/machine-task/chain/cancel',
|
||||
null,
|
||||
{ params: { chainCode, reason } },
|
||||
)
|
||||
}
|
||||
|
||||
export function deleteTask(taskCode: string) {
|
||||
return request.post<never, { code: number; data: boolean }>(
|
||||
'/api/robot/admin/machine-task/task/delete',
|
||||
null,
|
||||
{ params: { taskCode } },
|
||||
)
|
||||
}
|
||||
|
||||
export function forceTaskStatus(taskCode: string, status: string) {
|
||||
return request.post<never, { code: number; data: boolean }>(
|
||||
'/api/robot/admin/machine-task/task/forceStatus',
|
||||
null,
|
||||
{ params: { taskCode, status } },
|
||||
)
|
||||
}
|
||||
|
||||
// ==================== 模拟回调 ====================
|
||||
|
||||
export interface CallbackScenario {
|
||||
key: string
|
||||
label: string
|
||||
url: string
|
||||
fields: CallbackField[]
|
||||
}
|
||||
|
||||
export interface CallbackField {
|
||||
name: string
|
||||
label: string
|
||||
type: 'string' | 'select' | 'number' | 'boolean'
|
||||
options?: { value: string; label: string }[]
|
||||
}
|
||||
|
||||
const hkFields: CallbackField[] = [
|
||||
{ name: 'robotTaskCode', label: '任务编号(任务链编号)', type: 'string' },
|
||||
{ name: 'singleRobotCode', label: '机器人标识', type: 'string' },
|
||||
{ name: 'currentSeq', label: '当前执行顺序', type: 'string' },
|
||||
]
|
||||
|
||||
const zsTaskStatusOptions = [
|
||||
{ value: 'RUNNING', label: '执行中' },
|
||||
{ value: 'FINISHED', label: '已完成' },
|
||||
{ value: 'TERMINATED', label: '取消' },
|
||||
{ value: 'PENDING', label: '挂起' },
|
||||
]
|
||||
|
||||
const zsTaskStepOptions = [
|
||||
{ value: '', label: '无' },
|
||||
{ value: 'CHAIN', label: '托盘到达输送' },
|
||||
{ value: 'IN_LIFTER', label: '托盘进提升机' },
|
||||
{ value: 'OUT_LIFTER', label: '托盘出提升机' },
|
||||
{ value: 'VEHICLE_MOVE', label: '四向车搬运' },
|
||||
]
|
||||
|
||||
const zsTaskInfoBackFields: CallbackField[] = [
|
||||
{ name: 'taskCode', label: '任务编号(任务链编号)', type: 'string' },
|
||||
{ name: 'palletCode', label: '托盘码', type: 'string' },
|
||||
{ name: 'status', label: '任务状态', type: 'select', options: zsTaskStatusOptions },
|
||||
{ name: 'taskStep', label: '任务步骤', type: 'select', options: zsTaskStepOptions },
|
||||
{ name: 'hasPick', label: '是否取货', type: 'boolean' },
|
||||
{ name: 'start', label: '取货点', type: 'string' },
|
||||
{ name: 'end', label: '放货点', type: 'string' },
|
||||
{ name: 'actualStart', label: '实际取货点', type: 'string' },
|
||||
{ name: 'actualEnd', label: '实际放货点', type: 'string' },
|
||||
{ name: 'statusCode', label: '取消原因', type: 'string' },
|
||||
{ name: 'pendingCode', label: '挂起原因', type: 'string' },
|
||||
]
|
||||
|
||||
const zsExceptionFields: CallbackField[] = [
|
||||
{ name: 'location', label: '点位ID', type: 'string' },
|
||||
{ name: 'palletCode', label: '托盘码', type: 'string' },
|
||||
{ name: 'reason', label: '异常原因', type: 'string' },
|
||||
]
|
||||
|
||||
const zsPalletCodeInFields: CallbackField[] = [
|
||||
{ name: 'location', label: '点位ID', type: 'string' },
|
||||
{ name: 'palletCode', label: '托盘码', type: 'string' },
|
||||
{ name: 'warehouseCode', label: '仓库编号', type: 'string' },
|
||||
{ name: 'weigth', label: '物料重量(g)', type: 'number' },
|
||||
{ name: 'longLevel', label: '长度等级', type: 'number' },
|
||||
{ name: 'widthLevel', label: '宽度等级', type: 'number' },
|
||||
{ name: 'highLevel', label: '高度等级', type: 'number' },
|
||||
]
|
||||
|
||||
const hkArriveWcs: CallbackScenario = {
|
||||
key: 'arriveWcs', label: 'AGV到达立库提升机',
|
||||
url: '/api/robot/external/hk/arriveWcs', fields: hkFields,
|
||||
}
|
||||
const hkArriveStation: CallbackScenario = {
|
||||
key: 'arriveStation', label: 'AGV到达工作站点',
|
||||
url: '/api/robot/external/hk/arriveStation', fields: hkFields,
|
||||
}
|
||||
|
||||
export const callbackScenarioMap: Record<string, CallbackScenario[]> = {
|
||||
HK_INBOUND: [hkArriveWcs],
|
||||
HK_MOVE: [hkArriveWcs],
|
||||
HK_OUTBOUND_WAIT: [hkArriveWcs, hkArriveStation],
|
||||
HK_ARRIVE_STATION: [hkArriveStation],
|
||||
HK_PICK_PALLET: [{ key: 'pickPalletDone', label: 'AGV完成取货', url: '/api/robot/external/hk/pickPalletDone', fields: hkFields }],
|
||||
HK_PUT_PALLET: [{ key: 'putPalletDone', label: 'AGV完成放货', url: '/api/robot/external/hk/putPalletDone', fields: hkFields }],
|
||||
HK_LEAVE_START_POINT: [{ key: 'leaveStartPoint', label: 'AGV离开起点', url: '/api/robot/external/hk/leaveStartPoint', fields: hkFields }],
|
||||
ZS_INBOUND: [{ key: 'taskInfoBack', label: '任务状态回传', url: '/api/robot/external/zs/wms/taskInfoBack', fields: zsTaskInfoBackFields }],
|
||||
ZS_OUTBOUND: [{ key: 'taskInfoBack', label: '任务状态回传', url: '/api/robot/external/zs/wms/taskInfoBack', fields: zsTaskInfoBackFields }],
|
||||
ZS_MOVE: [{ key: 'taskInfoBack', label: '任务状态回传', url: '/api/robot/external/zs/wms/taskInfoBack', fields: zsTaskInfoBackFields }],
|
||||
ZS_OUTER_DETECT: [{ key: 'exceptionPickUpNotify', label: '外形检测异常', url: '/api/robot/external/zs/wms/exceptionPickUpNotify', fields: zsExceptionFields }],
|
||||
ZS_APPLY_INBOUND: [{ key: 'palletCodeIn', label: '请求入库', url: '/api/robot/external/zs/wms/palletCodeIn', fields: zsPalletCodeInFields }],
|
||||
}
|
||||
|
||||
export function sendMockCallback(url: string, data: Record<string, unknown>) {
|
||||
const base = import.meta.env.VITE_API_BASE || ''
|
||||
const token = localStorage.getItem('token')
|
||||
return axios.post(`${base}${url}`, data, {
|
||||
headers: {
|
||||
Authorization: token || '',
|
||||
Source: 'web',
|
||||
},
|
||||
timeout: 15000,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||
<rect width="32" height="32" rx="6" fill="#409EFF"/>
|
||||
<path d="M16 6a3 3 0 0 1 3 3v2h1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H12a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h1V9a3 3 0 0 1 3-3zm-2 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm4 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
|
|
@ -0,0 +1,29 @@
|
|||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
const isMobile = ref(false)
|
||||
let listenerCount = 0
|
||||
|
||||
function update() {
|
||||
isMobile.value = window.innerWidth < MOBILE_BREAKPOINT
|
||||
}
|
||||
|
||||
export function useDevice() {
|
||||
onMounted(() => {
|
||||
if (listenerCount === 0) {
|
||||
update()
|
||||
window.addEventListener('resize', update)
|
||||
}
|
||||
listenerCount++
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
listenerCount--
|
||||
if (listenerCount === 0) {
|
||||
window.removeEventListener('resize', update)
|
||||
}
|
||||
})
|
||||
|
||||
return { isMobile }
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* 任务链状态映射与颜色配置
|
||||
* @author zouzhiwen
|
||||
*/
|
||||
|
||||
export const chainStatusMap: Record<string, string> = {
|
||||
CREATED: '已创建',
|
||||
WAITING: '等待资源',
|
||||
READY: '可执行',
|
||||
IN_PROGRESS: '进行中',
|
||||
COMPLETED: '已完成',
|
||||
CANCELED: '已取消',
|
||||
FAILED: '失败',
|
||||
}
|
||||
|
||||
export type ChainStatusTagType = 'success' | 'info' | 'warning' | 'danger' | ''
|
||||
|
||||
export function getChainStatusTag(status: string): { type: ChainStatusTagType; effect?: 'dark' | 'plain' } {
|
||||
const config: Record<string, { type: ChainStatusTagType; effect?: 'dark' | 'plain' }> = {
|
||||
CREATED: { type: 'info' }, // 灰色实心 - 待处理
|
||||
WAITING: { type: 'warning' },
|
||||
READY: { type: '' },
|
||||
IN_PROGRESS: { type: '', effect: 'dark' },
|
||||
COMPLETED: { type: 'success' },
|
||||
CANCELED: { type: 'info', effect: 'plain' }, // 灰色描边 - 已取消
|
||||
FAILED: { type: 'danger' },
|
||||
}
|
||||
return config[status] || { type: 'info' }
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
/**
|
||||
* 子任务状态映射与颜色配置
|
||||
* @author zouzhiwen
|
||||
*/
|
||||
|
||||
export const taskStatusMap: Record<string, string> = {
|
||||
CREATED: '已创建',
|
||||
READY: '准备就绪',
|
||||
IN_PROGRESS: '进行中',
|
||||
WAITING_WAKE: '待唤醒',
|
||||
WAITING_RELEASE: '待释放',
|
||||
COMPLETED: '已完成',
|
||||
CANCELED: '已取消',
|
||||
FAILED: '失败',
|
||||
}
|
||||
|
||||
export type TaskStatusTagType = 'success' | 'info' | 'warning' | 'danger' | ''
|
||||
|
||||
export function getTaskStatusTag(status: string): { type: TaskStatusTagType; effect?: 'dark' | 'plain' } {
|
||||
const config: Record<string, { type: TaskStatusTagType; effect?: 'dark' | 'plain' }> = {
|
||||
CREATED: { type: 'info' }, // 灰色实心 - 待处理
|
||||
READY: { type: '' },
|
||||
IN_PROGRESS: { type: '', effect: 'dark' },
|
||||
WAITING_WAKE: { type: 'warning' },
|
||||
WAITING_RELEASE: { type: 'warning' },
|
||||
COMPLETED: { type: 'success' },
|
||||
CANCELED: { type: 'info', effect: 'plain' }, // 灰色描边 - 已取消
|
||||
FAILED: { type: 'danger' },
|
||||
}
|
||||
return config[status] || { type: 'info' }
|
||||
}
|
||||
|
|
@ -0,0 +1,643 @@
|
|||
<template>
|
||||
<!-- ========== PC 端布局 ========== -->
|
||||
<el-container v-if="!isMobile" class="layout-container">
|
||||
<el-aside :width="isCollapse ? '64px' : '220px'" class="layout-aside">
|
||||
<div class="logo-area">
|
||||
<img src="@/assets/logo.svg" alt="logo" class="logo-icon" />
|
||||
<span v-show="!isCollapse" class="logo-text">机器任务管理</span>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
router
|
||||
background-color="#001529"
|
||||
text-color="#ffffffa6"
|
||||
active-text-color="#ffffff"
|
||||
class="aside-menu"
|
||||
>
|
||||
<el-menu-item index="/dashboard">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<template #title>首页</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/task/chain">
|
||||
<el-icon><List /></el-icon>
|
||||
<template #title>任务链管理</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/elevator">
|
||||
<el-icon><SetUp /></el-icon>
|
||||
<template #title>提升机管理</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/generate">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<template #title>任务生成</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header class="layout-header">
|
||||
<div class="header-left">
|
||||
<el-icon class="collapse-btn" @click="isCollapse = !isCollapse">
|
||||
<Fold v-if="!isCollapse" />
|
||||
<Expand v-else />
|
||||
</el-icon>
|
||||
<el-tooltip content="刷新当前页" placement="bottom">
|
||||
<el-icon class="refresh-btn" @click="refreshCurrentTab"><Refresh /></el-icon>
|
||||
</el-tooltip>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="currentTitle">{{ currentTitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="user-info">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>{{ userName }}</span>
|
||||
<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
<!-- PC 端标签栏 -->
|
||||
<div v-if="tabsStore.tabs.length > 0" class="layout-tabs">
|
||||
<div class="tabs-scroll">
|
||||
<template v-for="(t, index) in tabsStore.tabs" :key="t.path">
|
||||
<div
|
||||
v-if="dragFromIndex >= 0 && dragOverIndex === index"
|
||||
class="tab-drop-indicator"
|
||||
/>
|
||||
<div
|
||||
:class="['tab-item', { 'tab-active': route.path === t.path, 'tab-dragging': dragFromIndex === index }]"
|
||||
draggable="true"
|
||||
@click="goTab(t.path)"
|
||||
@contextmenu.prevent="showTabMenu($event, t.path, index)"
|
||||
@dragstart="onTabDragStart($event, index)"
|
||||
@dragover.prevent="onTabDragOver($event, index)"
|
||||
@dragleave="onTabDragLeave"
|
||||
@drop.prevent="onTabDrop($event, index)"
|
||||
@dragend="onTabDragEnd"
|
||||
>
|
||||
<el-tooltip :content="t.title" placement="top" :show-after="300">
|
||||
<span class="tab-title">{{ t.title }}</span>
|
||||
</el-tooltip>
|
||||
<span class="tab-close" @click.stop="closeTab(t.path)">×</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="tabMenuVisible"
|
||||
class="tab-context-menu"
|
||||
:style="{ left: tabMenuX + 'px', top: tabMenuY + 'px' }"
|
||||
@mousedown.stop
|
||||
>
|
||||
<div class="tab-menu-item" @mousedown.prevent.stop="closeOthersTab">关闭其他</div>
|
||||
<div
|
||||
v-if="hasRightTabs"
|
||||
class="tab-menu-item"
|
||||
@mousedown.prevent.stop="closeRightTab"
|
||||
>
|
||||
关闭右边
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-main class="layout-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="keepAliveNames" :max="20">
|
||||
<component :is="Component" :key="componentKey" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<!-- ========== 移动端布局 ========== -->
|
||||
<div v-else class="mobile-layout">
|
||||
<header class="mobile-header">
|
||||
<span class="mobile-header-title">{{ currentTitle || '首页' }}</span>
|
||||
<div class="mobile-header-actions">
|
||||
<el-icon class="mobile-refresh-btn" @click="refreshCurrentTab"><Refresh /></el-icon>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<el-icon class="mobile-header-avatar"><User /></el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mobile-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="keepAliveNames" :max="20">
|
||||
<component :is="Component" :key="componentKey" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</main>
|
||||
|
||||
<nav class="mobile-tab-bar">
|
||||
<router-link
|
||||
v-for="tab in tabs"
|
||||
:key="tab.path"
|
||||
:to="tab.path"
|
||||
:class="['tab-item', { 'tab-active': activeTab === tab.path }]"
|
||||
>
|
||||
<el-icon :size="22"><component :is="tab.icon" /></el-icon>
|
||||
<span class="tab-label">{{ tab.label }}</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useDevice } from '@/composables/useDevice'
|
||||
import { Monitor, List, SetUp, Plus, Fold, Expand, User, ArrowDown, Refresh } from '@element-plus/icons-vue'
|
||||
import { useTabsStore } from '@/stores/tabs'
|
||||
|
||||
const { isMobile } = useDevice()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const tabsStore = useTabsStore()
|
||||
const refreshKeys = ref<Record<string, number>>({})
|
||||
const tabMenuVisible = ref(false)
|
||||
const tabMenuX = ref(0)
|
||||
const tabMenuY = ref(0)
|
||||
const tabMenuPath = ref('')
|
||||
const tabMenuIndex = ref(-1)
|
||||
const dragFromIndex = ref(-1)
|
||||
const dragOverIndex = ref(-1)
|
||||
|
||||
const hasRightTabs = computed(() => tabMenuIndex.value >= 0 && tabMenuIndex.value < tabsStore.tabs.length - 1)
|
||||
|
||||
const componentKey = computed(() => {
|
||||
const k = refreshKeys.value[route.path] ?? 0
|
||||
return `${route.fullPath}-${k}`
|
||||
})
|
||||
|
||||
function refreshCurrentTab() {
|
||||
refreshKeys.value[route.path] = (refreshKeys.value[route.path] ?? 0) + 1
|
||||
}
|
||||
|
||||
const keepAliveNames = ['DashboardView', 'TaskChainList', 'TaskChainDetail', 'ElevatorList', 'TaskGenerateView']
|
||||
|
||||
// 必须在 watch 之前恢复，否则 watch 的 immediate 会先执行并覆盖 storage
|
||||
const activePath = tabsStore.restoreFromStorage()
|
||||
if (activePath && activePath !== route.path) {
|
||||
router.replace(activePath).then(() => {
|
||||
tabsStore.enableSave()
|
||||
})
|
||||
} else {
|
||||
tabsStore.enableSave()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (route.path.startsWith('/login')) return
|
||||
tabsStore.addOrSwitch(route)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function goTab(path: string) {
|
||||
if (route.path === path) return
|
||||
router.push(path)
|
||||
}
|
||||
|
||||
function closeTab(path: string) {
|
||||
const idx = tabsStore.tabs.findIndex((t) => t.path === path)
|
||||
if (idx < 0) return
|
||||
const next = tabsStore.tabs[idx - 1] ?? tabsStore.tabs[idx + 1]
|
||||
const nextPath = next ? next.path : '/dashboard'
|
||||
tabsStore.remove(path)
|
||||
if (route.path === path) {
|
||||
router.push(nextPath)
|
||||
}
|
||||
tabsStore.saveToStorage(route.path === path ? nextPath : route.path)
|
||||
}
|
||||
|
||||
function showTabMenu(e: MouseEvent, path: string, index: number) {
|
||||
tabMenuPath.value = path
|
||||
tabMenuIndex.value = index
|
||||
tabMenuX.value = e.clientX
|
||||
tabMenuY.value = e.clientY
|
||||
tabMenuVisible.value = true
|
||||
}
|
||||
|
||||
function closeOthersTab() {
|
||||
const path = tabMenuPath.value
|
||||
tabMenuVisible.value = false
|
||||
if (tabsStore.tabs.length <= 1) return
|
||||
tabsStore.closeOthers(path)
|
||||
if (route.path !== path) {
|
||||
router.push(path)
|
||||
}
|
||||
tabsStore.saveToStorage(path)
|
||||
}
|
||||
|
||||
function closeRightTab() {
|
||||
const path = tabMenuPath.value
|
||||
const idx = tabMenuIndex.value
|
||||
tabMenuVisible.value = false
|
||||
tabMenuIndex.value = -1
|
||||
if (idx < 0 || idx >= tabsStore.tabs.length - 1) return
|
||||
const closedPaths = tabsStore.tabs.slice(idx + 1).map((t) => t.path)
|
||||
tabsStore.closeRight(idx)
|
||||
const needNav = closedPaths.includes(route.path)
|
||||
if (needNav) {
|
||||
router.push(path)
|
||||
}
|
||||
tabsStore.saveToStorage(needNav ? path : route.path)
|
||||
}
|
||||
|
||||
function hideTabMenu() {
|
||||
tabMenuVisible.value = false
|
||||
}
|
||||
|
||||
function onTabDragStart(e: DragEvent, index: number) {
|
||||
dragFromIndex.value = index
|
||||
e.dataTransfer!.effectAllowed = 'move'
|
||||
e.dataTransfer!.setData('text/plain', String(index))
|
||||
}
|
||||
|
||||
function onTabDragOver(e: DragEvent, index: number) {
|
||||
e.dataTransfer!.dropEffect = 'move'
|
||||
dragOverIndex.value = index
|
||||
}
|
||||
|
||||
function onTabDragLeave() {
|
||||
dragOverIndex.value = -1
|
||||
}
|
||||
|
||||
function onTabDragEnd() {
|
||||
dragFromIndex.value = -1
|
||||
dragOverIndex.value = -1
|
||||
}
|
||||
|
||||
function onTabDrop(_e: DragEvent, toIndex: number) {
|
||||
const fromIndex = dragFromIndex.value
|
||||
if (fromIndex >= 0 && fromIndex !== toIndex) {
|
||||
tabsStore.reorder(fromIndex, toIndex)
|
||||
tabsStore.saveToStorage(route.path)
|
||||
}
|
||||
dragFromIndex.value = -1
|
||||
dragOverIndex.value = -1
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', hideTabMenu)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', hideTabMenu)
|
||||
})
|
||||
const userStore = useUserStore()
|
||||
const isCollapse = ref(false)
|
||||
|
||||
const tabs = [
|
||||
{ path: '/dashboard', label: '首页', icon: Monitor },
|
||||
{ path: '/task/chain', label: '任务链', icon: List },
|
||||
{ path: '/elevator', label: '提升机', icon: SetUp },
|
||||
{ path: '/generate', label: '生成', icon: Plus },
|
||||
]
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
const path = route.path
|
||||
if (path.startsWith('/task/chain')) return '/task/chain'
|
||||
return path
|
||||
})
|
||||
|
||||
const activeTab = computed(() => {
|
||||
const path = route.path
|
||||
if (path.startsWith('/task/chain')) return '/task/chain'
|
||||
return path
|
||||
})
|
||||
|
||||
const currentTitle = computed(() => (route.meta.title as string) || '')
|
||||
const userName = computed(() => userStore.user?.name || '管理员')
|
||||
|
||||
function handleCommand(command: string) {
|
||||
if (command === 'logout') {
|
||||
userStore.logout()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== PC 端 ===== */
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.layout-aside {
|
||||
background-color: #001529;
|
||||
transition: width 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #ffffff1a;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aside-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
padding: 0 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.layout-tabs {
|
||||
background: #f5f7fa;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-context-menu {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
min-width: 120px;
|
||||
padding: 4px 0;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.tab-menu-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-menu-item:hover {
|
||||
background: #f5f7fa;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.tabs-scroll {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 0 8px;
|
||||
}
|
||||
|
||||
.tab-drop-indicator {
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
background: #409eff;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
animation: tab-drop-pulse 0.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes tab-drop-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.layout-tabs .tab-item.tab-dragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: #909399;
|
||||
background: #e9ecef;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-item:hover {
|
||||
color: #606266;
|
||||
background: #dee2e6;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-item.tab-active {
|
||||
background: #fff;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.04);
|
||||
border-bottom: 2px solid #409eff;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-item.tab-active:hover {
|
||||
background: #fff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-title {
|
||||
font-size: 13px;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 20px;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 2px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
color: #c0c4cc;
|
||||
transition: color 0.2s;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-item:hover .tab-close {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.layout-tabs .tab-close:hover {
|
||||
color: #f56c6c;
|
||||
background: rgba(245, 108, 108, 0.1);
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
background: #f0f2f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ===== 移动端 ===== */
|
||||
.mobile-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-header-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.mobile-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-refresh-btn {
|
||||
font-size: 20px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-refresh-btn:active {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.mobile-header-avatar {
|
||||
font-size: 22px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.mobile-tab-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 56px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ebeef5;
|
||||
flex-shrink: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
text-decoration: none;
|
||||
color: #909399;
|
||||
transition: color 0.2s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './styles/global.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(ElementPlus, { locale: zhCn })
|
||||
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/login/LoginView.vue'),
|
||||
meta: { public: true },
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/layouts/AdminLayout.vue'),
|
||||
redirect: '/dashboard',
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('@/views/dashboard/DashboardView.vue'),
|
||||
meta: { title: '首页' },
|
||||
},
|
||||
{
|
||||
path: 'task/chain',
|
||||
name: 'TaskChainList',
|
||||
component: () => import('@/views/task/TaskChainList.vue'),
|
||||
meta: { title: '任务链管理' },
|
||||
},
|
||||
{
|
||||
path: 'task/chain/:code',
|
||||
name: 'TaskChainDetail',
|
||||
component: () => import('@/views/task/TaskChainDetail.vue'),
|
||||
meta: { title: '任务链详情' },
|
||||
},
|
||||
{
|
||||
path: 'elevator',
|
||||
name: 'ElevatorList',
|
||||
component: () => import('@/views/elevator/ElevatorList.vue'),
|
||||
meta: { title: '提升机管理' },
|
||||
},
|
||||
{
|
||||
path: 'generate',
|
||||
name: 'TaskGenerate',
|
||||
component: () => import('@/views/generate/TaskGenerateView.vue'),
|
||||
meta: { title: '任务生成' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
router.beforeEach((to, _from, next) => {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!to.meta.public && !token) {
|
||||
next('/login')
|
||||
} else if (to.path === '/login' && token) {
|
||||
next('/')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||
|
||||
const TABS_STORAGE_KEY = 'robot-admin-tabs'
|
||||
|
||||
export interface TabItem {
|
||||
path: string
|
||||
title: string
|
||||
}
|
||||
|
||||
interface StoredTabs {
|
||||
tabs: TabItem[]
|
||||
activePath: string
|
||||
}
|
||||
|
||||
function getTabTitle(route: RouteLocationNormalizedLoaded): string {
|
||||
const code = route.params?.code as string | undefined
|
||||
if (code) {
|
||||
return code
|
||||
}
|
||||
return (route.meta?.title as string) || '未命名'
|
||||
}
|
||||
|
||||
export const useTabsStore = defineStore('tabs', {
|
||||
state: () => ({
|
||||
tabs: [] as TabItem[],
|
||||
saveEnabled: false,
|
||||
}),
|
||||
actions: {
|
||||
addOrSwitch(route: RouteLocationNormalizedLoaded) {
|
||||
const path = route.path
|
||||
const title = getTabTitle(route)
|
||||
const idx = this.tabs.findIndex((t) => t.path === path)
|
||||
if (idx >= 0) {
|
||||
this.tabs[idx].title = title
|
||||
} else {
|
||||
this.tabs.push({ path, title })
|
||||
}
|
||||
if (this.saveEnabled) {
|
||||
this.saveToStorage(route.path)
|
||||
}
|
||||
},
|
||||
enableSave() {
|
||||
this.saveEnabled = true
|
||||
},
|
||||
remove(path: string) {
|
||||
const idx = this.tabs.findIndex((t) => t.path === path)
|
||||
if (idx >= 0) {
|
||||
this.tabs.splice(idx, 1)
|
||||
}
|
||||
},
|
||||
reorder(fromIndex: number, toIndex: number) {
|
||||
if (fromIndex < 0 || fromIndex >= this.tabs.length || toIndex < 0 || toIndex >= this.tabs.length) return
|
||||
const [item] = this.tabs.splice(fromIndex, 1)
|
||||
this.tabs.splice(toIndex, 0, item)
|
||||
},
|
||||
closeOthers(path: string) {
|
||||
this.tabs = this.tabs.filter((t) => t.path === path)
|
||||
},
|
||||
closeRight(pathOrIndex: string | number) {
|
||||
const idx =
|
||||
typeof pathOrIndex === 'number'
|
||||
? pathOrIndex
|
||||
: this.tabs.findIndex((t) => t.path === pathOrIndex)
|
||||
if (idx >= 0 && idx < this.tabs.length - 1) {
|
||||
this.tabs.splice(idx + 1)
|
||||
}
|
||||
},
|
||||
getTabTitle(route: RouteLocationNormalizedLoaded) {
|
||||
return getTabTitle(route)
|
||||
},
|
||||
saveToStorage(activePath: string) {
|
||||
try {
|
||||
const data: StoredTabs = { tabs: [...this.tabs], activePath }
|
||||
sessionStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(data))
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
},
|
||||
restoreFromStorage(): string | null {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(TABS_STORAGE_KEY)
|
||||
if (!raw) return null
|
||||
const data = JSON.parse(raw) as StoredTabs
|
||||
if (Array.isArray(data.tabs) && data.tabs.length > 0) {
|
||||
this.tabs = data.tabs
|
||||
return data.activePath || data.tabs[0]?.path || null
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return null
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { login as loginApi } from '@/api/auth'
|
||||
import router from '@/router'
|
||||
|
||||
export interface UserInfo {
|
||||
id: number
|
||||
name: string
|
||||
avatar: string
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
const token = ref(localStorage.getItem('token') || '')
|
||||
const user = ref<UserInfo | null>(parseStoredUser())
|
||||
|
||||
function parseStoredUser(): UserInfo | null {
|
||||
try {
|
||||
const stored = localStorage.getItem('user')
|
||||
return stored ? JSON.parse(stored) : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function login(username: string, password: string) {
|
||||
const res = await loginApi(username, password)
|
||||
const data = res.data
|
||||
token.value = data.token
|
||||
user.value = {
|
||||
id: data.userVO.id,
|
||||
name: data.userVO.name,
|
||||
avatar: data.userVO.avatar,
|
||||
}
|
||||
localStorage.setItem('token', data.token)
|
||||
localStorage.setItem('user', JSON.stringify(user.value))
|
||||
}
|
||||
|
||||
function logout() {
|
||||
token.value = ''
|
||||
user.value = null
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
function isLoggedIn(): boolean {
|
||||
return !!token.value
|
||||
}
|
||||
|
||||
return { token, user, login, logout, isLoggedIn }
|
||||
})
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #303133;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import router from '@/router'
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE || '',
|
||||
timeout: 15000,
|
||||
})
|
||||
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers['Authorization'] = token
|
||||
}
|
||||
config.headers['Source'] = 'web'
|
||||
return config
|
||||
},
|
||||
(error) => Promise.reject(error),
|
||||
)
|
||||
|
||||
const AUTH_FAIL_CODES = [401, 600]
|
||||
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
const res = response.data
|
||||
if (res.code !== undefined && res.code !== 200) {
|
||||
if (AUTH_FAIL_CODES.includes(res.code)) {
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
ElMessage.error(res.message || '登录已失效，请重新登录')
|
||||
router.push('/login')
|
||||
} else {
|
||||
ElMessage.error(res.message || '请求失败')
|
||||
}
|
||||
return Promise.reject(new Error(res.message || '请求失败'))
|
||||
}
|
||||
return res
|
||||
},
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
router.push('/login')
|
||||
}
|
||||
ElMessage.error(error.message || '网络错误')
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
export default request
|
||||
|
|
@ -0,0 +1,365 @@
|
|||
<template>
|
||||
<div class="dashboard">
|
||||
<!-- ========== PC 端 ========== -->
|
||||
<template v-if="!isMobile">
|
||||
<el-row :gutter="20" class="stat-row">
|
||||
<el-col :span="6" v-for="s in statCards" :key="s.label">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">{{ s.label }}</div>
|
||||
<div class="stat-value">{{ s.value }}</div>
|
||||
</div>
|
||||
<el-icon class="stat-icon" :style="{ color: s.color }"><component :is="s.icon" /></el-icon>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>最近任务链</span>
|
||||
<el-button text type="primary" @click="$router.push('/task/chain')">查看全部</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="recentChains" stripe size="small">
|
||||
<el-table-column prop="code" label="任务链编号" min-width="160" />
|
||||
<el-table-column prop="type" label="类型" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small">{{ typeMap[row.type] || row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-bind="getChainStatusTag(row.status)" size="small">
|
||||
{{ chainStatusMap[row.status] || row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sourceContainer" label="源容器" width="130" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" />
|
||||
<el-table-column label="操作" width="80" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button text type="primary" size="small" @click="$router.push(`/task/chain/${row.code}`)">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>提升机状态</span>
|
||||
<el-button text type="primary" @click="$router.push('/elevator')">管理</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-for="e in elevators" :key="e.id" class="elevator-item">
|
||||
<div class="elevator-header">
|
||||
<span class="elevator-name">提升机 #{{ e.id }}</span>
|
||||
<el-tag :type="e.enable ? 'success' : 'danger'" size="small">
|
||||
{{ e.enable ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="elevator-detail">
|
||||
<span>工作任务: {{ e.workingTask || '空闲' }}</span>
|
||||
</div>
|
||||
<div class="elevator-detail">
|
||||
<span>队列长度: {{ e.queueSize }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="elevators.length === 0" description="暂无数据" :image-size="60" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<!-- ========== 移动端 ========== -->
|
||||
<template v-else>
|
||||
<!-- 统计卡片 2x2 -->
|
||||
<div class="m-stat-grid">
|
||||
<div v-for="s in statCards" :key="s.label" class="m-stat-card" :style="{ borderLeftColor: s.color }">
|
||||
<div class="m-stat-value">{{ s.value }}</div>
|
||||
<div class="m-stat-label">{{ s.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近任务链 -->
|
||||
<div class="m-section">
|
||||
<div class="m-section-header">
|
||||
<span class="m-section-title">最近任务链</span>
|
||||
<el-button text type="primary" size="small" @click="$router.push('/task/chain')">全部</el-button>
|
||||
</div>
|
||||
<div
|
||||
v-for="row in recentChains"
|
||||
:key="row.code"
|
||||
class="m-recent-item"
|
||||
@click="$router.push(`/task/chain/${row.code}`)"
|
||||
>
|
||||
<div class="m-recent-top">
|
||||
<span class="m-recent-code">{{ row.code }}</span>
|
||||
<el-tag v-bind="getChainStatusTag(row.status)" size="small">
|
||||
{{ chainStatusMap[row.status] || row.status }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="m-recent-bottom">
|
||||
<el-tag size="small" type="info">{{ typeMap[row.type] || row.type }}</el-tag>
|
||||
<span class="m-recent-time">{{ row.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="recentChains.length === 0" description="暂无数据" :image-size="48" />
|
||||
</div>
|
||||
|
||||
<!-- 提升机状态 -->
|
||||
<div class="m-section">
|
||||
<div class="m-section-header">
|
||||
<span class="m-section-title">提升机状态</span>
|
||||
<el-button text type="primary" size="small" @click="$router.push('/elevator')">管理</el-button>
|
||||
</div>
|
||||
<div v-for="e in elevators" :key="e.id" class="m-elevator-item">
|
||||
<div class="m-elevator-top">
|
||||
<span class="m-elevator-name">提升机 #{{ e.id }}</span>
|
||||
<el-tag :type="e.enable ? 'success' : 'danger'" size="small">
|
||||
{{ e.enable ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="m-elevator-detail">{{ e.workingTask || '空闲' }}</div>
|
||||
</div>
|
||||
<el-empty v-if="elevators.length === 0" description="暂无数据" :image-size="48" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'DashboardView' })
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { Loading, Clock, CircleCheck, CircleClose } from '@element-plus/icons-vue'
|
||||
import { getChainPage, getChainStats, type TaskChainVO } from '@/api/task'
|
||||
import { getElevatorList, type ElevatorVO } from '@/api/elevator'
|
||||
import { chainStatusMap, getChainStatusTag } from '@/constants/chainStatus'
|
||||
import { useDevice } from '@/composables/useDevice'
|
||||
|
||||
const { isMobile } = useDevice()
|
||||
const stats = reactive({ inProgress: 0, waiting: 0, completed: 0, failed: 0 })
|
||||
const recentChains = ref<TaskChainVO[]>([])
|
||||
const elevators = ref<ElevatorVO[]>([])
|
||||
|
||||
const statCards = computed(() => [
|
||||
{ label: '进行中任务链', value: stats.inProgress, color: '#409eff', icon: Loading },
|
||||
{ label: '等待中任务链', value: stats.waiting, color: '#e6a23c', icon: Clock },
|
||||
{ label: '今日完成', value: stats.completed, color: '#67c23a', icon: CircleCheck },
|
||||
{ label: '今日失败', value: stats.failed, color: '#f56c6c', icon: CircleClose },
|
||||
])
|
||||
|
||||
const typeMap: Record<string, string> = {
|
||||
INBOUND: '入库', QUICK_PALLET_INBOUND: '托盘快速入库',
|
||||
OUTBOUND: '出库', OUTBOUND_NO_WAIT: '出库(不等待)', MOVE: '移库',
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const [chainRes, elevatorRes, statsRes] = await Promise.all([
|
||||
getChainPage({ page: 1, size: 10 }),
|
||||
getElevatorList(),
|
||||
getChainStats(),
|
||||
])
|
||||
recentChains.value = chainRes.data.records || []
|
||||
elevators.value = elevatorRes.data || []
|
||||
const s = statsRes.data
|
||||
stats.inProgress = s.inProgress
|
||||
stats.waiting = s.waiting
|
||||
stats.completed = s.completedToday
|
||||
stats.failed = s.failedToday
|
||||
} catch { /* request interceptor handles errors */ }
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== PC ===== */
|
||||
.stat-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 40px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.elevator-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.elevator-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.elevator-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.elevator-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.elevator-detail {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ===== 移动端 ===== */
|
||||
.m-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.m-stat-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
border-left: 3px solid;
|
||||
}
|
||||
|
||||
.m-stat-value {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.m-stat-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.m-section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.m-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.m-recent-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f5f7fa;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.m-recent-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.m-recent-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.m-recent-code {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.m-recent-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.m-recent-time {
|
||||
font-size: 11px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.m-elevator-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f5f7fa;
|
||||
}
|
||||
|
||||
.m-elevator-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.m-elevator-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.m-elevator-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.m-elevator-detail {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<!-- ========== PC 端 ========== -->
|
||||
<template v-if="!isMobile">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>提升机管理</span>
|
||||
<el-button type="primary" size="small" :loading="refreshing" @click="loadData">
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="elevator in elevators" :key="elevator.id" :span="12">
|
||||
<el-card shadow="hover" class="elevator-card">
|
||||
<template #header>
|
||||
<div class="elevator-card-header">
|
||||
<div class="elevator-title">
|
||||
<span>提升机 #{{ elevator.id }}</span>
|
||||
<el-tag :type="elevator.enable ? 'success' : 'danger'" size="small">
|
||||
{{ elevator.enable ? '已启用' : '已禁用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="elevator-actions">
|
||||
<el-button
|
||||
v-if="elevator.enable"
|
||||
type="warning" size="small" plain
|
||||
@click="handleDisable(elevator)"
|
||||
>禁用</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="success" size="small" plain
|
||||
@click="handleEnable(elevator)"
|
||||
>启用</el-button>
|
||||
<el-button
|
||||
type="danger" size="small" plain
|
||||
@click="handleClear(elevator)"
|
||||
>清空任务</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="海康出库点位">{{ elevator.hkOutPoint }}</el-descriptions-item>
|
||||
<el-descriptions-item label="海康入库点位">{{ elevator.hkInPoint }}</el-descriptions-item>
|
||||
<el-descriptions-item label="智世出库点位">{{ elevator.zsOutPoint }}</el-descriptions-item>
|
||||
<el-descriptions-item label="智世入库点位">{{ elevator.zsInPoint }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-divider content-position="left">运行状态</el-divider>
|
||||
|
||||
<el-descriptions :column="1" border size="small">
|
||||
<el-descriptions-item label="当前工作任务链">
|
||||
<template v-if="elevator.workingTask">
|
||||
<el-link type="primary" @click="goChainDetail(elevator.workingTask)">
|
||||
{{ elevator.workingTask }}
|
||||
</el-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag type="success" size="small">空闲</el-tag>
|
||||
</template>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-empty v-if="elevators.length === 0 && !refreshing" description="暂无提升机数据" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<!-- ========== 移动端 ========== -->
|
||||
<template v-else>
|
||||
<div class="m-elevator-header">
|
||||
<span class="m-elevator-title">提升机管理</span>
|
||||
<el-button type="primary" size="small" round :loading="refreshing" @click="loadData">刷新</el-button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="elevator in elevators"
|
||||
:key="elevator.id"
|
||||
class="m-elevator-card"
|
||||
>
|
||||
<div class="m-elevator-card-top">
|
||||
<div class="m-elevator-name-row">
|
||||
<span class="m-elevator-name">提升机 #{{ elevator.id }}</span>
|
||||
<el-tag :type="elevator.enable ? 'success' : 'danger'" size="small">
|
||||
{{ elevator.enable ? '已启用' : '已禁用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="m-elevator-status">
|
||||
<span v-if="elevator.workingTask" class="m-working" @click="goChainDetail(elevator.workingTask)">
|
||||
{{ elevator.workingTask }}
|
||||
</span>
|
||||
<el-tag v-else type="success" size="small">空闲</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-elevator-points">
|
||||
<div class="m-point-row">
|
||||
<span class="m-point-label">海康出/入库</span>
|
||||
<span class="m-point-value">{{ elevator.hkOutPoint }} / {{ elevator.hkInPoint }}</span>
|
||||
</div>
|
||||
<div class="m-point-row">
|
||||
<span class="m-point-label">智世出/入库</span>
|
||||
<span class="m-point-value">{{ elevator.zsOutPoint }} / {{ elevator.zsInPoint }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-elevator-card-actions">
|
||||
<el-button
|
||||
v-if="elevator.enable"
|
||||
type="warning" size="small" plain round
|
||||
@click="handleDisable(elevator)"
|
||||
>禁用</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="success" size="small" plain round
|
||||
@click="handleEnable(elevator)"
|
||||
>启用</el-button>
|
||||
<el-button
|
||||
type="danger" size="small" plain round
|
||||
@click="handleClear(elevator)"
|
||||
>清空任务</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="elevators.length === 0 && !refreshing" description="暂无提升机数据" :image-size="48" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'ElevatorList' })
|
||||
import {
|
||||
clearElevator,
|
||||
disableElevator,
|
||||
enableElevator,
|
||||
getElevatorList,
|
||||
type ElevatorVO,
|
||||
} from '@/api/elevator'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useDevice } from '@/composables/useDevice'
|
||||
|
||||
const { isMobile } = useDevice()
|
||||
const router = useRouter()
|
||||
const elevators = ref<ElevatorVO[]>([])
|
||||
const refreshing = ref(false)
|
||||
|
||||
async function loadData() {
|
||||
refreshing.value = true
|
||||
try {
|
||||
const res = await getElevatorList()
|
||||
elevators.value = res.data || []
|
||||
} catch { /* handled by interceptor */ } finally {
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goChainDetail(code: string) {
|
||||
router.push(`/task/chain/${code}`)
|
||||
}
|
||||
|
||||
async function handleEnable(elevator: ElevatorVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认启用提升机 #${elevator.id}？`, '确认')
|
||||
await enableElevator(elevator.id)
|
||||
ElMessage.success('已启用')
|
||||
loadData()
|
||||
} catch { /* cancelled */ }
|
||||
}
|
||||
|
||||
async function handleDisable(elevator: ElevatorVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认禁用提升机 #${elevator.id}？`, '警告', { type: 'warning' })
|
||||
await disableElevator(elevator.id)
|
||||
ElMessage.success('已禁用')
|
||||
loadData()
|
||||
} catch { /* cancelled */ }
|
||||
}
|
||||
|
||||
async function handleClear(elevator: ElevatorVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认清空提升机 #${elevator.id} 的工作任务？此操作不可恢复。`,
|
||||
'危险操作',
|
||||
{ type: 'error' },
|
||||
)
|
||||
await clearElevator(elevator.id)
|
||||
ElMessage.success('已清空')
|
||||
loadData()
|
||||
} catch { /* cancelled */ }
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== 公共 ===== */
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ===== PC ===== */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.elevator-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.elevator-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.elevator-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.elevator-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== 移动端 ===== */
|
||||
.m-elevator-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.m-elevator-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.m-elevator-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.m-elevator-card-top {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-elevator-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.m-elevator-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.m-elevator-status {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.m-working {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
word-break: break-all;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.m-elevator-points {
|
||||
background: #f8f9fb;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-point-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.m-point-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.m-point-value {
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.m-elevator-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,483 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<el-card shadow="hover" :class="{ 'm-gen-card': isMobile }">
|
||||
<template #header>
|
||||
<span class="card-title">任务生成</span>
|
||||
</template>
|
||||
|
||||
<el-tabs v-model="activeTab" :type="isMobile ? 'card' : 'border-card'" :class="{ 'm-tabs': isMobile }">
|
||||
<!-- 入库 -->
|
||||
<el-tab-pane label="入库" name="inbound">
|
||||
<el-form :model="inboundForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="仓库编码" required>
|
||||
<el-input v-model="inboundForm.warehouse" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="容器编码" required>
|
||||
<el-input v-model="inboundForm.container" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="目标类型">
|
||||
<el-select v-model="inboundForm.targetType" clearable placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="目标编码">
|
||||
<el-input v-model="inboundForm.targetCode" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="站点编号">
|
||||
<el-input v-model="inboundForm.stationCode" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="业务追踪号">
|
||||
<el-input v-model="inboundForm.businessNo" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="SKU">
|
||||
<el-input v-model="inboundForm.sku" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="优先级">
|
||||
<el-input-number v-model="inboundForm.priority" :min="0" :controls="false" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="colSpan">
|
||||
<el-form-item label="货架方向">
|
||||
<el-input v-model="inboundForm.shelfDirection" placeholder="AB面" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="handleInbound" :style="isMobile ? 'width:100%' : ''">提交入库</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 出库(等待) -->
|
||||
<el-tab-pane label="出库(等待)" name="outboundWait">
|
||||
<div class="gen-form">
|
||||
<div v-for="(item, idx) in outboundWaitList" :key="idx" class="outbound-item">
|
||||
<div class="outbound-item-header">
|
||||
<span class="outbound-item-title">出库项 #{{ idx + 1 }}</span>
|
||||
<el-button v-if="outboundWaitList.length > 1" text type="danger" size="small" @click="outboundWaitList.splice(idx, 1)">移除</el-button>
|
||||
</div>
|
||||
<el-form :model="item" :label-width="formLabelWidth" :label-position="labelPos">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="obColSpan"><el-form-item label="仓库编码" required><el-input v-model="item.warehouse" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="容器编码" required><el-input v-model="item.container" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="目标类型"><el-select v-model="item.targetType" clearable style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="目标编码"><el-input v-model="item.targetCode" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="目标点位"><el-input v-model="item.targetPoint" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="业务追踪号"><el-input v-model="item.businessNo" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="优先级"><el-input-number v-model="item.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="outbound-actions">
|
||||
<el-button @click="addOutboundItem(outboundWaitList)">添加出库项</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="handleOutbound('wait')">提交出库(等待)</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 出库(不等待) -->
|
||||
<el-tab-pane label="出库(不等待)" name="outboundNoWait">
|
||||
<div class="gen-form">
|
||||
<div v-for="(item, idx) in outboundNoWaitList" :key="idx" class="outbound-item">
|
||||
<div class="outbound-item-header">
|
||||
<span class="outbound-item-title">出库项 #{{ idx + 1 }}</span>
|
||||
<el-button v-if="outboundNoWaitList.length > 1" text type="danger" size="small" @click="outboundNoWaitList.splice(idx, 1)">移除</el-button>
|
||||
</div>
|
||||
<el-form :model="item" :label-width="formLabelWidth" :label-position="labelPos">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="obColSpan"><el-form-item label="仓库编码" required><el-input v-model="item.warehouse" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="容器编码" required><el-input v-model="item.container" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="目标类型"><el-select v-model="item.targetType" clearable style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="目标编码"><el-input v-model="item.targetCode" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="目标点位"><el-input v-model="item.targetPoint" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="业务追踪号"><el-input v-model="item.businessNo" /></el-form-item></el-col>
|
||||
<el-col :span="obColSpan"><el-form-item label="优先级"><el-input-number v-model="item.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="outbound-actions">
|
||||
<el-button @click="addOutboundItem(outboundNoWaitList)">添加出库项</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="handleOutbound('noWait')">提交出库(不等待)</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 移库 -->
|
||||
<el-tab-pane label="移库" name="move">
|
||||
<el-form :model="moveForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="moveForm.warehouse" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="容器编码" required><el-input v-model="moveForm.container" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="moveForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="moveForm.targetCode" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="指定楼层"><el-input-number v-model="moveForm.targetLevel" :min="1" :max="6" :controls="false" clearable placeholder="不填则自动推荐" style="width: 100%" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="moveForm.businessNo" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="优先级"><el-input-number v-model="moveForm.priority" :min="0" :controls="false" style="width: 100%" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="handleMove" :style="isMobile ? 'width:100%' : ''">提交移库</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 释放信号 -->
|
||||
<el-tab-pane label="释放信号" name="release">
|
||||
<el-form :model="releaseForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="colSpan"><el-form-item label="任务链编号" required><el-input v-model="releaseForm.taskChainCode" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="releaseForm.warehouse" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="容器编码"><el-input v-model="releaseForm.container" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="目标类型"><el-select v-model="releaseForm.targetType" clearable placeholder="请选择" style="width: 100%"><el-option v-for="t in targetTypes" :key="t.value" :label="t.label" :value="t.value" /></el-select></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="目标编码"><el-input v-model="releaseForm.targetCode" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="handleRelease" :style="isMobile ? 'width:100%' : ''">发送释放信号</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 绑定站点 -->
|
||||
<el-tab-pane label="绑定站点" name="bindStation">
|
||||
<el-form :model="bindForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="bindForm.warehouse" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="容器编码" required><el-input v-model="bindForm.container" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="站点编码" required><el-input v-model="bindForm.station" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="loading" @click="handleBindStation" :style="isMobile ? 'width:100%' : ''">绑定站点</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 解绑站点 -->
|
||||
<el-tab-pane label="解绑站点" name="releaseStation">
|
||||
<el-form :model="releaseStationForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="releaseStationForm.warehouse" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="容器编码" required><el-input v-model="releaseStationForm.container" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="站点编码" required><el-input v-model="releaseStationForm.station" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="warning" :loading="loading" @click="handleReleaseStation" :style="isMobile ? 'width:100%' : ''">解绑站点</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 取消任务 -->
|
||||
<el-tab-pane label="取消任务" name="cancel">
|
||||
<el-form :model="cancelForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
|
||||
<el-row :gutter="gutter">
|
||||
<el-col :span="colSpan"><el-form-item label="仓库编码" required><el-input v-model="cancelForm.warehouse" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="容器编码" required><el-input v-model="cancelForm.container" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="取消原因"><el-input v-model="cancelForm.reason" /></el-form-item></el-col>
|
||||
<el-col :span="colSpan"><el-form-item label="业务追踪号"><el-input v-model="cancelForm.businessNo" /></el-form-item></el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="danger" :loading="loading" @click="handleCancel" :style="isMobile ? 'width:100%' : ''">取消任务</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<!-- 结果展示 -->
|
||||
<el-card v-if="resultVisible" shadow="hover" class="result-card">
|
||||
<template #header>
|
||||
<div class="result-header">
|
||||
<span>执行结果</span>
|
||||
<el-button text type="info" size="small" @click="resultVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-alert :title="resultTitle" :type="resultType" :closable="false" show-icon>
|
||||
<pre v-if="resultDetail" class="result-detail">{{ resultDetail }}</pre>
|
||||
</el-alert>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'TaskGenerateView' })
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useDevice } from '@/composables/useDevice'
|
||||
import {
|
||||
generateInbound, generateOutboundWait, generateOutboundNoWait,
|
||||
generateMove, generateRelease, generateBindStation,
|
||||
generateReleaseStation, generateCancel,
|
||||
type InboundReq, type OutboundReq, type MoveReq,
|
||||
type ReleaseReq, type BindStationReq, type ReleaseStationReq, type CancelReq,
|
||||
} from '@/api/generate'
|
||||
|
||||
const { isMobile } = useDevice()
|
||||
const colSpan = computed(() => (isMobile.value ? 24 : 12))
|
||||
const obColSpan = computed(() => (isMobile.value ? 24 : 8))
|
||||
const gutter = computed(() => (isMobile.value ? 0 : 20))
|
||||
const formLabelWidth = computed(() => (isMobile.value ? '' : '120px'))
|
||||
const labelPos = computed<'top' | 'right'>(() => (isMobile.value ? 'top' : 'right'))
|
||||
|
||||
const activeTab = ref('inbound')
|
||||
const loading = ref(false)
|
||||
const resultVisible = ref(false)
|
||||
const resultTitle = ref('')
|
||||
const resultType = ref<'success' | 'error'>('success')
|
||||
const resultDetail = ref('')
|
||||
|
||||
const targetTypes = [
|
||||
{ value: 'AREA', label: '库区' },
|
||||
{ value: 'LOCATION', label: '库位' },
|
||||
{ value: 'STATION', label: '站点' },
|
||||
{ value: 'CONTAINER', label: '容器' },
|
||||
]
|
||||
|
||||
const inboundForm = reactive<InboundReq>({ warehouse: '', container: '' })
|
||||
const outboundWaitList = ref<OutboundReq[]>([{ warehouse: '', container: '' }])
|
||||
const outboundNoWaitList = ref<OutboundReq[]>([{ warehouse: '', container: '' }])
|
||||
const moveForm = reactive<MoveReq>({ warehouse: '', container: '' })
|
||||
|
||||
function addOutboundItem(list: OutboundReq[]) {
|
||||
list.push({ warehouse: '', container: '' })
|
||||
}
|
||||
const releaseForm = reactive<ReleaseReq>({ warehouse: '', container: '', taskChainCode: '' })
|
||||
const bindForm = reactive<BindStationReq>({ warehouse: '', container: '', station: '' })
|
||||
const releaseStationForm = reactive<ReleaseStationReq>({ warehouse: '', container: '', station: '' })
|
||||
const cancelForm = reactive<CancelReq>({ warehouse: '', container: '' })
|
||||
|
||||
function showResult(title: string, type: 'success' | 'error', detail?: unknown) {
|
||||
resultTitle.value = title
|
||||
resultType.value = type
|
||||
resultDetail.value = detail != null ? JSON.stringify(detail, null, 2) : ''
|
||||
resultVisible.value = true
|
||||
}
|
||||
|
||||
async function handleInbound() {
|
||||
if (!inboundForm.warehouse || !inboundForm.container) {
|
||||
return ElMessage.warning('请填写仓库编码和容器编码')
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await generateInbound({ ...inboundForm })
|
||||
showResult(`入库任务链已创建: ${res.data}`, 'success')
|
||||
ElMessage.success('入库任务链已创建')
|
||||
} catch (e) {
|
||||
showResult('入库失败', 'error', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleOutbound(mode: 'wait' | 'noWait') {
|
||||
const list = mode === 'wait' ? outboundWaitList.value : outboundNoWaitList.value
|
||||
if (list.some(item => !item.warehouse || !item.container)) {
|
||||
return ElMessage.warning('请填写每一项的仓库编码和容器编码')
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const fn = mode === 'wait' ? generateOutboundWait : generateOutboundNoWait
|
||||
const res = await fn(list.map(item => ({ ...item })))
|
||||
showResult('出库任务链已创建', 'success', res.data)
|
||||
ElMessage.success('出库任务链已创建')
|
||||
} catch (e) {
|
||||
showResult('出库失败', 'error', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMove() {
|
||||
if (!moveForm.warehouse || !moveForm.container) {
|
||||
return ElMessage.warning('请填写仓库编码和容器编码')
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await generateMove({ ...moveForm })
|
||||
showResult(`移库任务链已创建: ${res.data}`, 'success')
|
||||
ElMessage.success('移库任务链已创建')
|
||||
} catch (e) {
|
||||
showResult('移库失败', 'error', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRelease() {
|
||||
if (!releaseForm.taskChainCode || !releaseForm.warehouse) {
|
||||
return ElMessage.warning('请填写任务链编号和仓库编码')
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
await generateRelease({ ...releaseForm })
|
||||
showResult('释放信号已发送', 'success')
|
||||
ElMessage.success('释放信号已发送')
|
||||
} catch (e) {
|
||||
showResult('释放失败', 'error', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleBindStation() {
|
||||
if (!bindForm.warehouse || !bindForm.container || !bindForm.station) {
|
||||
return ElMessage.warning('请填写所有必填项')
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
await generateBindStation({ ...bindForm })
|
||||
showResult('站点绑定成功', 'success')
|
||||
ElMessage.success('站点绑定成功')
|
||||
} catch (e) {
|
||||
showResult('绑定失败', 'error', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReleaseStation() {
|
||||
if (!releaseStationForm.warehouse || !releaseStationForm.container || !releaseStationForm.station) {
|
||||
return ElMessage.warning('请填写所有必填项')
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
await generateReleaseStation({ ...releaseStationForm })
|
||||
showResult('站点解绑成功', 'success')
|
||||
ElMessage.success('站点解绑成功')
|
||||
} catch (e) {
|
||||
showResult('解绑失败', 'error', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
if (!cancelForm.warehouse || !cancelForm.container) {
|
||||
return ElMessage.warning('请填写仓库编码和容器编码')
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await generateCancel({ ...cancelForm })
|
||||
showResult('任务取消成功', 'success', res.data)
|
||||
ElMessage.success('任务取消成功')
|
||||
} catch (e) {
|
||||
showResult('取消失败', 'error', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.gen-form {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-detail {
|
||||
margin: 8px 0 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.outbound-item {
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.outbound-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.outbound-item-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.outbound-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 8px 0 16px;
|
||||
}
|
||||
|
||||
/* ===== 移动端 ===== */
|
||||
.m-gen-card :deep(.el-card__body) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.m-gen-card :deep(.el-card__header) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.m-tabs :deep(.el-tabs__header) {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.m-tabs :deep(.el-tabs__nav) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.m-tabs :deep(.el-tabs__item) {
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.m-tabs .gen-form {
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.m-tabs .outbound-item {
|
||||
padding: 12px 10px 0;
|
||||
}
|
||||
|
||||
.m-tabs .outbound-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.m-tabs .outbound-actions .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<img src="@/assets/logo.svg" alt="logo" class="login-logo" />
|
||||
<h1 class="login-title">机器任务管理后台</h1>
|
||||
<p class="login-subtitle">宝时智能仓管理系统</p>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
size="large"
|
||||
@keyup.enter="handleLogin"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名"
|
||||
:prefix-icon="User"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
class="login-btn"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登 录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider>或</el-divider>
|
||||
|
||||
<el-button text type="info" class="token-link" @click="tokenDialogVisible = true">
|
||||
手动设置 Token
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="tokenDialogVisible" title="手动设置 Token" width="420px" destroy-on-close>
|
||||
<el-input
|
||||
v-model="manualToken"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="粘贴已有的 Token"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button @click="tokenDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSetToken">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { Lock, User } from '@element-plus/icons-vue'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const formRef = ref<FormInstance>()
|
||||
const loading = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const tokenDialogVisible = ref(false)
|
||||
const manualToken = ref('')
|
||||
|
||||
function handleSetToken() {
|
||||
const token = manualToken.value.trim()
|
||||
if (!token) {
|
||||
ElMessage.warning('Token 不能为空')
|
||||
return
|
||||
}
|
||||
localStorage.setItem('token', token)
|
||||
tokenDialogVisible.value = false
|
||||
ElMessage.success('Token 已设置')
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
async function handleLogin() {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
await userStore.login(form.username, form.password)
|
||||
ElMessage.success('登录成功')
|
||||
router.push('/')
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : '登录失败'
|
||||
ElMessage.error(msg)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 400px;
|
||||
max-width: calc(100vw - 32px);
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 28px 20px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.token-link {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,937 @@
|
|||
<template>
|
||||
<div class="page-container" v-loading="loading">
|
||||
<!-- ========== PC 端 ========== -->
|
||||
<template v-if="!isMobile">
|
||||
<el-page-header @back="$router.back()" class="page-header">
|
||||
<template #content>
|
||||
<span class="page-title">任务链详情 - {{ chain?.code }}</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<template v-if="chain">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">
|
||||
<span>基本信息</span>
|
||||
<el-tag v-bind="getChainStatusTag(chain.status)" size="default">
|
||||
{{ chainStatusMap[chain.status] || chain.status }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="card-header-actions">
|
||||
<el-button
|
||||
v-if="canCancel(chain.status)"
|
||||
type="danger" size="small" :loading="canceling"
|
||||
@click="handleCancelChain"
|
||||
>取消任务链</el-button>
|
||||
<el-button
|
||||
v-if="canExecuteNext(chain.status)"
|
||||
type="warning" size="small" :loading="executing"
|
||||
@click="handleExecuteNext"
|
||||
>执行下一步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item label="任务链编号">{{ chain.code }}</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">
|
||||
<el-tag size="small">{{ typeMap[chain.type] || chain.type }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="仓库">{{ chain.warehouse }}</el-descriptions-item>
|
||||
<el-descriptions-item label="首任务厂商">{{ chain.firstTaskVendor || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="优先级">{{ chain.priority }}</el-descriptions-item>
|
||||
<el-descriptions-item label="提升机">
|
||||
{{ chain.elevatorId ? `#${chain.elevatorId}` : '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="业务追踪号">{{ chain.businessNo || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="描述">{{ chain.description || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="执行时间">
|
||||
{{ chain.executionTime ? `${chain.executionTime}s` : '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="源库位">{{ chain.sourceLocation || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="源点位">{{ chain.sourcePoint || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="源容器">{{ chain.sourceContainer || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标类型">{{ chain.targetType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标编号">{{ chain.targetCode || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标库位">{{ chain.targetLocation || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标点位">{{ chain.targetPoint || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ chain.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="完成时间">{{ chain.completeTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item v-if="chain.cancelReason" label="取消原因" :span="2">
|
||||
{{ chain.cancelReason }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="chain.cancelTime" label="取消时间">
|
||||
{{ chain.cancelTime }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" class="task-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>子任务列表 ({{ tasks.length }})</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
:type="timelineType(task.status)"
|
||||
:hollow="task.status === 'CREATED'"
|
||||
size="large"
|
||||
>
|
||||
<el-card shadow="never" class="task-item-card">
|
||||
<div class="task-item-header">
|
||||
<div class="task-item-title">
|
||||
<span class="task-code">{{ task.code }}</span>
|
||||
<el-tag size="small" class="task-type-tag">{{ task.type }}</el-tag>
|
||||
<el-tag size="small" type="info">{{ task.vendor }}</el-tag>
|
||||
<el-tag size="small" type="info">批次 {{ task.batchNo }}</el-tag>
|
||||
</div>
|
||||
<div class="task-status-area">
|
||||
<el-tag v-bind="getTaskStatusTag(task.status)" size="small">
|
||||
{{ taskStatusMap[task.status] || task.status }}
|
||||
</el-tag>
|
||||
<el-button
|
||||
v-if="canMockCallback(task)"
|
||||
text type="success" size="small"
|
||||
@click="openMockCallback(task)"
|
||||
>模拟回调</el-button>
|
||||
<el-button text type="danger" size="small" @click="handleDeleteTask(task)">
|
||||
删除
|
||||
</el-button>
|
||||
<el-dropdown trigger="click" @command="(cmd: string) => handleForceStatus(task, cmd)">
|
||||
<el-button text type="primary" size="small">变更状态</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="opt in statusOptions"
|
||||
:key="opt.value"
|
||||
:command="opt.value"
|
||||
:disabled="opt.value === task.status"
|
||||
>{{ opt.label }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-descriptions :column="3" size="small" class="task-desc">
|
||||
<el-descriptions-item label="机器调用码">{{ task.machineCallCode || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="源库位">{{ task.sourceLocation || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="源点位">{{ task.sourcePoint || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="源容器">{{ task.sourceContainer || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标库位">{{ task.targetLocation || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标点位">{{ task.targetPoint || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="目标编码">{{ task.targetCode || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开始时间">{{ task.startTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="完成时间">{{ task.completeTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="执行时间">
|
||||
{{ task.executionTime ? `${task.executionTime}s` : '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ task.createTime || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item v-if="task.remark" label="备注">{{ task.remark }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-alert
|
||||
v-if="task.exceptionReason"
|
||||
:title="task.exceptionReason"
|
||||
type="error" :closable="false" show-icon class="task-error"
|
||||
/>
|
||||
<el-alert
|
||||
v-if="task.cancelReason"
|
||||
:title="`取消原因: ${task.cancelReason}`"
|
||||
type="warning" :closable="false" show-icon class="task-error"
|
||||
/>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
|
||||
<el-empty v-if="tasks.length === 0" description="暂无子任务" />
|
||||
</el-card>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- ========== 移动端 ========== -->
|
||||
<template v-else>
|
||||
<!-- 顶部返回栏 -->
|
||||
<div class="m-nav-bar">
|
||||
<el-icon class="m-back-btn" @click="$router.back()"><ArrowLeft /></el-icon>
|
||||
<span class="m-nav-title">任务链详情</span>
|
||||
<div style="width: 24px;" />
|
||||
</div>
|
||||
|
||||
<template v-if="chain">
|
||||
<!-- 状态和操作 -->
|
||||
<div class="m-status-banner" :class="`m-status-banner--${chain.status}`">
|
||||
<div class="m-status-banner-top">
|
||||
<el-tag v-bind="getChainStatusTag(chain.status)" size="default" effect="dark">
|
||||
{{ chainStatusMap[chain.status] || chain.status }}
|
||||
</el-tag>
|
||||
<span class="m-chain-type">{{ typeMap[chain.type] || chain.type }}</span>
|
||||
</div>
|
||||
<div class="m-chain-code-mobile">{{ chain.code }}</div>
|
||||
<div class="m-status-actions">
|
||||
<el-button
|
||||
v-if="canCancel(chain.status)"
|
||||
type="danger" size="small" round :loading="canceling"
|
||||
@click="handleCancelChain"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
v-if="canExecuteNext(chain.status)"
|
||||
type="warning" size="small" round :loading="executing"
|
||||
@click="handleExecuteNext"
|
||||
>执行下一步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息分组 -->
|
||||
<div class="m-section">
|
||||
<div class="m-section-title">基本信息</div>
|
||||
<div class="m-info-grid">
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">仓库</span>
|
||||
<span class="m-info-value">{{ chain.warehouse }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">首任务厂商</span>
|
||||
<span class="m-info-value">{{ chain.firstTaskVendor || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">优先级</span>
|
||||
<span class="m-info-value">{{ chain.priority }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">提升机</span>
|
||||
<span class="m-info-value">{{ chain.elevatorId ? `#${chain.elevatorId}` : '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">业务追踪号</span>
|
||||
<span class="m-info-value">{{ chain.businessNo || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">执行时间</span>
|
||||
<span class="m-info-value">{{ chain.executionTime ? `${chain.executionTime}s` : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-section">
|
||||
<div class="m-section-title">位置信息</div>
|
||||
<div class="m-info-grid">
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">源库位</span>
|
||||
<span class="m-info-value">{{ chain.sourceLocation || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">源点位</span>
|
||||
<span class="m-info-value">{{ chain.sourcePoint || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">源容器</span>
|
||||
<span class="m-info-value">{{ chain.sourceContainer || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">目标类型</span>
|
||||
<span class="m-info-value">{{ chain.targetType || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">目标编号</span>
|
||||
<span class="m-info-value">{{ chain.targetCode || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">目标库位</span>
|
||||
<span class="m-info-value">{{ chain.targetLocation || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-section">
|
||||
<div class="m-section-title">时间</div>
|
||||
<div class="m-info-grid m-info-grid-1">
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">创建时间</span>
|
||||
<span class="m-info-value">{{ chain.createTime }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">完成时间</span>
|
||||
<span class="m-info-value">{{ chain.completeTime || '-' }}</span>
|
||||
</div>
|
||||
<div v-if="chain.cancelReason" class="m-info-item">
|
||||
<span class="m-info-label">取消原因</span>
|
||||
<span class="m-info-value" style="color: #f56c6c;">{{ chain.cancelReason }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子任务列表 -->
|
||||
<div class="m-section">
|
||||
<div class="m-section-title">子任务 ({{ tasks.length }})</div>
|
||||
|
||||
<div
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
class="m-task-card"
|
||||
>
|
||||
<div class="m-task-card-top">
|
||||
<div class="m-task-card-tags">
|
||||
<el-tag v-bind="getTaskStatusTag(task.status)" size="small">
|
||||
{{ taskStatusMap[task.status] || task.status }}
|
||||
</el-tag>
|
||||
<el-tag size="small" type="info">{{ task.type }}</el-tag>
|
||||
<el-tag size="small" type="info">{{ task.vendor }}</el-tag>
|
||||
</div>
|
||||
<el-icon class="m-task-more" @click="openTaskActions(task)"><MoreFilled /></el-icon>
|
||||
</div>
|
||||
<div class="m-task-code">{{ task.code }}</div>
|
||||
|
||||
<div class="m-info-grid">
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">源容器</span>
|
||||
<span class="m-info-value">{{ task.sourceContainer || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">目标点位</span>
|
||||
<span class="m-info-value">{{ task.targetPoint || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">机器调用码</span>
|
||||
<span class="m-info-value">{{ task.machineCallCode || '-' }}</span>
|
||||
</div>
|
||||
<div class="m-info-item">
|
||||
<span class="m-info-label">批次</span>
|
||||
<span class="m-info-value">{{ task.batchNo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="task.createTime" class="m-task-time">{{ task.createTime }}</div>
|
||||
|
||||
<el-alert
|
||||
v-if="task.exceptionReason"
|
||||
:title="task.exceptionReason"
|
||||
type="error" :closable="false" show-icon style="margin-top: 8px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="tasks.length === 0" description="暂无子任务" :image-size="48" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 移动端子任务操作面板 -->
|
||||
<el-drawer
|
||||
v-model="taskActionDrawerVisible"
|
||||
direction="btt"
|
||||
size="auto"
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="m-action-sheet">
|
||||
<div class="m-action-sheet-title">{{ actionTask?.code }}</div>
|
||||
<div class="m-action-list">
|
||||
<div
|
||||
v-if="actionTask && canMockCallback(actionTask)"
|
||||
class="m-action-item"
|
||||
@click="taskActionDrawerVisible = false; openMockCallback(actionTask!)"
|
||||
>
|
||||
<el-icon color="#67c23a"><VideoPlay /></el-icon>
|
||||
<span>模拟回调</span>
|
||||
</div>
|
||||
<div class="m-action-item" @click="taskActionDrawerVisible = false; openStatusPicker()">
|
||||
<el-icon color="#409eff"><Switch /></el-icon>
|
||||
<span>变更状态</span>
|
||||
</div>
|
||||
<div class="m-action-item m-action-danger" @click="taskActionDrawerVisible = false; handleDeleteTask(actionTask!)">
|
||||
<el-icon color="#f56c6c"><Delete /></el-icon>
|
||||
<span>删除子任务</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-action-cancel" @click="taskActionDrawerVisible = false">取消</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 移动端变更状态选择 -->
|
||||
<el-drawer
|
||||
v-model="statusPickerVisible"
|
||||
direction="btt"
|
||||
size="auto"
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="m-action-sheet">
|
||||
<div class="m-action-sheet-title">变更为</div>
|
||||
<div class="m-action-list">
|
||||
<div
|
||||
v-for="opt in statusOptions"
|
||||
:key="opt.value"
|
||||
:class="['m-action-item', { 'm-action-item-disabled': opt.value === actionTask?.status }]"
|
||||
@click="opt.value !== actionTask?.status && onPickStatus(opt.value)"
|
||||
>
|
||||
<span>{{ opt.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-action-cancel" @click="statusPickerVisible = false">取消</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<!-- ========== 共用弹窗 ========== -->
|
||||
<!-- 模拟回调：选择场景 -->
|
||||
<el-dialog
|
||||
v-model="scenarioDialogVisible"
|
||||
title="选择回调场景"
|
||||
:width="isMobile ? '90%' : '400px'"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-radio-group v-model="selectedScenarioKey" class="scenario-radio-group">
|
||||
<el-radio
|
||||
v-for="s in currentScenarios"
|
||||
:key="s.key"
|
||||
:value="s.key"
|
||||
border
|
||||
class="scenario-radio-item"
|
||||
>{{ s.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<template #footer>
|
||||
<el-button @click="scenarioDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :disabled="!selectedScenarioKey" @click="confirmScenario">
|
||||
下一步
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 模拟回调：填写参数 -->
|
||||
<el-dialog
|
||||
v-model="callbackDialogVisible"
|
||||
:title="`模拟回调 - ${activeScenario?.label}`"
|
||||
:width="isMobile ? '95%' : '520px'"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="callbackForm" :label-width="isMobile ? '100px' : '140px'" size="default">
|
||||
<el-form-item v-for="field in activeScenario?.fields" :key="field.name" :label="field.label">
|
||||
<el-select
|
||||
v-if="field.type === 'select'"
|
||||
v-model="callbackForm[field.name]"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in field.options"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-switch v-else-if="field.type === 'boolean'" v-model="callbackForm[field.name]" />
|
||||
<el-input-number
|
||||
v-else-if="field.type === 'number'"
|
||||
v-model="callbackForm[field.name]"
|
||||
:controls="false"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-input v-else v-model="callbackForm[field.name]" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="callbackDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="callbackSubmitting" @click="submitMockCallback">
|
||||
发送回调
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'TaskChainDetail' })
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ArrowLeft, MoreFilled, VideoPlay, Switch, Delete } from '@element-plus/icons-vue'
|
||||
import { useDevice } from '@/composables/useDevice'
|
||||
import { chainStatusMap, getChainStatusTag } from '@/constants/chainStatus'
|
||||
import { taskStatusMap, getTaskStatusTag } from '@/constants/taskStatus'
|
||||
import {
|
||||
cancelChain, deleteTask, dispatchExecute, forceTaskStatus, getChainDetail, taskStatusOptions,
|
||||
callbackScenarioMap, sendMockCallback,
|
||||
type CallbackScenario, type TaskChainDetailVO, type TaskVO,
|
||||
} from '@/api/task'
|
||||
|
||||
const { isMobile } = useDevice()
|
||||
const route = useRoute()
|
||||
const loading = ref(false)
|
||||
const executing = ref(false)
|
||||
const canceling = ref(false)
|
||||
const chain = ref<TaskChainDetailVO | null>(null)
|
||||
const tasks = ref<TaskVO[]>([])
|
||||
const statusOptions = taskStatusOptions
|
||||
|
||||
const cancelableStatuses = ['CREATED', 'WAITING', 'READY', 'IN_PROGRESS']
|
||||
function canCancel(status: string) {
|
||||
return cancelableStatuses.includes(status)
|
||||
}
|
||||
|
||||
function canExecuteNext(status: string) {
|
||||
return status === 'IN_PROGRESS' || status === 'CREATED' || status === 'READY'
|
||||
}
|
||||
|
||||
// ==================== 移动端子任务操作 ====================
|
||||
const taskActionDrawerVisible = ref(false)
|
||||
const statusPickerVisible = ref(false)
|
||||
const actionTask = ref<TaskVO | null>(null)
|
||||
|
||||
function openTaskActions(task: TaskVO) {
|
||||
actionTask.value = task
|
||||
taskActionDrawerVisible.value = true
|
||||
}
|
||||
|
||||
function openStatusPicker() {
|
||||
statusPickerVisible.value = true
|
||||
}
|
||||
|
||||
function onPickStatus(targetStatus: string) {
|
||||
statusPickerVisible.value = false
|
||||
if (actionTask.value) {
|
||||
handleForceStatus(actionTask.value, targetStatus)
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 操作逻辑（共用） ====================
|
||||
async function handleCancelChain() {
|
||||
if (!chain.value) return
|
||||
try {
|
||||
const result = await ElMessageBox.prompt('请输入取消原因', '取消任务链', {
|
||||
confirmButtonText: '确认取消',
|
||||
cancelButtonText: '返回',
|
||||
type: 'warning',
|
||||
inputPlaceholder: '取消原因（可选）',
|
||||
})
|
||||
const reason = (result as { value: string }).value
|
||||
canceling.value = true
|
||||
await cancelChain(chain.value.code, reason || undefined)
|
||||
ElMessage.success('任务链已取消')
|
||||
await loadData()
|
||||
} catch { /* cancelled */ } finally {
|
||||
canceling.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleExecuteNext() {
|
||||
if (!chain.value) return
|
||||
try {
|
||||
await ElMessageBox.confirm('确认手动执行该任务链的下一步？', '确认', { type: 'warning' })
|
||||
executing.value = true
|
||||
await dispatchExecute(chain.value.warehouse, chain.value.code)
|
||||
ElMessage.success('执行已触发')
|
||||
await loadData()
|
||||
} catch { /* cancelled */ } finally {
|
||||
executing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 模拟回调 ====================
|
||||
const scenarioDialogVisible = ref(false)
|
||||
const callbackDialogVisible = ref(false)
|
||||
const callbackSubmitting = ref(false)
|
||||
const selectedScenarioKey = ref('')
|
||||
const currentScenarios = ref<CallbackScenario[]>([])
|
||||
const activeScenario = ref<CallbackScenario | null>(null)
|
||||
const callbackForm = ref<Record<string, unknown>>({})
|
||||
|
||||
function canMockCallback(task: TaskVO): boolean {
|
||||
if (task.status !== 'CREATED' && task.status !== 'IN_PROGRESS') return false
|
||||
return !!callbackScenarioMap[task.type]?.length
|
||||
}
|
||||
|
||||
function openMockCallback(task: TaskVO) {
|
||||
const scenarios = callbackScenarioMap[task.type]
|
||||
if (!scenarios?.length) return
|
||||
currentScenarios.value = scenarios
|
||||
if (scenarios.length === 1) {
|
||||
activeScenario.value = scenarios[0]
|
||||
callbackForm.value = {}
|
||||
callbackDialogVisible.value = true
|
||||
} else {
|
||||
selectedScenarioKey.value = ''
|
||||
scenarioDialogVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function confirmScenario() {
|
||||
const scenario = currentScenarios.value.find(s => s.key === selectedScenarioKey.value)
|
||||
if (!scenario) return
|
||||
scenarioDialogVisible.value = false
|
||||
activeScenario.value = scenario
|
||||
callbackForm.value = {}
|
||||
callbackDialogVisible.value = true
|
||||
}
|
||||
|
||||
async function submitMockCallback() {
|
||||
if (!activeScenario.value) return
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认发送「${activeScenario.value.label}」模拟回调？`,
|
||||
'模拟回调',
|
||||
{ type: 'warning' },
|
||||
)
|
||||
callbackSubmitting.value = true
|
||||
const data: Record<string, unknown> = {}
|
||||
for (const field of activeScenario.value.fields) {
|
||||
const val = callbackForm.value[field.name]
|
||||
if (val !== undefined && val !== '' && val !== null) {
|
||||
data[field.name] = val
|
||||
}
|
||||
}
|
||||
await sendMockCallback(activeScenario.value.url, data)
|
||||
ElMessage.success('回调已发送')
|
||||
callbackDialogVisible.value = false
|
||||
await loadData()
|
||||
} catch { /* cancelled */ } finally {
|
||||
callbackSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteTask(task: TaskVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认删除子任务 ${task.code}？此操作不可恢复。`,
|
||||
'删除子任务',
|
||||
{ type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' },
|
||||
)
|
||||
await deleteTask(task.code)
|
||||
ElMessage.success('子任务已删除')
|
||||
await loadData()
|
||||
} catch { /* cancelled */ }
|
||||
}
|
||||
|
||||
async function handleForceStatus(task: TaskVO, targetStatus: string) {
|
||||
const label = statusOptions.find(o => o.value === targetStatus)?.label || targetStatus
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认将子任务 ${task.code} 的状态强制变更为「${label}」？此操作绕过状态机，请谨慎操作。`,
|
||||
'强制变更状态',
|
||||
{ type: 'warning' },
|
||||
)
|
||||
await forceTaskStatus(task.code, targetStatus)
|
||||
ElMessage.success('状态已变更')
|
||||
await loadData()
|
||||
} catch { /* cancelled */ }
|
||||
}
|
||||
|
||||
// ==================== 映射 ====================
|
||||
const typeMap: Record<string, string> = {
|
||||
INBOUND: '入库', QUICK_PALLET_INBOUND: '托盘快速入库',
|
||||
OUTBOUND: '出库', OUTBOUND_NO_WAIT: '出库(不等待)', MOVE: '移库',
|
||||
}
|
||||
function timelineType(status: string) {
|
||||
const map: Record<string, string> = {
|
||||
CREATED: 'info', READY: 'primary', IN_PROGRESS: 'primary',
|
||||
WAITING_WAKE: 'warning', WAITING_RELEASE: 'warning',
|
||||
COMPLETED: 'success', CANCELED: 'info', FAILED: 'danger',
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const code = route.params.code as string
|
||||
if (!code) return
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getChainDetail(code)
|
||||
chain.value = res.data
|
||||
tasks.value = res.data.tasks || []
|
||||
} catch { /* handled by interceptor */ } finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== 公共 ===== */
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ===== PC ===== */
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 16px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.task-item-card {
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.task-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.task-item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-code {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.task-status-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-type-tag {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.task-desc {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.task-error {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.scenario-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scenario-radio-item {
|
||||
margin: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ===== 移动端 ===== */
|
||||
.m-nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.m-back-btn {
|
||||
font-size: 22px;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.m-nav-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.m-status-banner {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.m-status-banner-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.m-chain-type {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.m-chain-code-mobile {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
word-break: break-all;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-status-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.m-section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.m-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
.m-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px 12px;
|
||||
}
|
||||
|
||||
.m-info-grid-1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.m-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.m-info-label {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.m-info-value {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.m-task-card {
|
||||
background: #f8f9fb;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-task-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.m-task-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.m-task-card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.m-task-more {
|
||||
font-size: 20px;
|
||||
color: #909399;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.m-task-code {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.m-task-time {
|
||||
font-size: 11px;
|
||||
color: #c0c4cc;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ===== 移动端操作面板 ===== */
|
||||
.m-action-sheet {
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.m-action-sheet-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
text-align: center;
|
||||
padding: 4px 0 16px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.m-action-list {
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
.m-action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border-bottom: 1px solid #f8f9fb;
|
||||
}
|
||||
|
||||
.m-action-item:active {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.m-action-item-disabled {
|
||||
color: #c0c4cc;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.m-action-danger span {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.m-action-cancel {
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
font-size: 15px;
|
||||
color: #909399;
|
||||
cursor: pointer;
|
||||
border-top: 8px solid #f5f7fa;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,621 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<!-- ========== PC 端 ========== -->
|
||||
<template v-if="!isMobile">
|
||||
<el-card shadow="hover" class="filter-card">
|
||||
<el-form :model="query" inline>
|
||||
<el-form-item label="任务链编号">
|
||||
<el-input v-model="query.code" placeholder="请输入" clearable style="width: 180px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="query.status" placeholder="全部" clearable style="width: 140px">
|
||||
<el-option v-for="(label, value) in chainStatusMap" :key="value" :label="label" :value="value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="query.type" placeholder="全部" clearable style="width: 160px">
|
||||
<el-option v-for="(label, value) in typeMap" :key="value" :label="label" :value="value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务追踪号">
|
||||
<el-input v-model="query.businessNo" placeholder="请输入" clearable style="width: 180px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="源容器">
|
||||
<el-input v-model="query.sourceContainer" placeholder="请输入" clearable style="width: 150px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 360px"
|
||||
/>
|
||||
<el-button link type="primary" class="quick-date-btn" @click="setToday">今日</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" class="table-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>任务链列表</span>
|
||||
<div>
|
||||
<el-button type="success" size="small" @click="handleScan">手动扫描执行</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column prop="code" label="任务链编号" min-width="170" show-overflow-tooltip />
|
||||
<el-table-column prop="type" label="类型" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small">{{ typeMap[row.type] || row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-bind="getChainStatusTag(row.status)" size="small">
|
||||
{{ chainStatusMap[row.status] || row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="firstTaskVendor" label="首任务厂商" width="100" />
|
||||
<el-table-column prop="businessNo" label="业务追踪号" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="sourceContainer" label="源容器" width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="targetLocation" label="目标库位" width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="priority" label="优先级" width="80" align="center" />
|
||||
<el-table-column prop="elevatorId" label="提升机" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.elevatorId ? `#${row.elevatorId}` : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="executionTime" label="执行时间" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.executionTime ? `${row.executionTime}s` : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" />
|
||||
<el-table-column prop="completeTime" label="完成时间" width="170">
|
||||
<template #default="{ row }">
|
||||
{{ row.completeTime || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="140" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button text type="primary" size="small" @click="goDetail(row.code)">详情</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 'CREATED' || row.status === 'READY'"
|
||||
text type="warning" size="small"
|
||||
@click="handleExecute(row)"
|
||||
>
|
||||
执行
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-wrap">
|
||||
<el-pagination
|
||||
v-model:current-page="query.page"
|
||||
v-model:page-size="query.size"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="loadData"
|
||||
@current-change="loadData"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<!-- ========== 移动端 ========== -->
|
||||
<template v-else>
|
||||
<!-- 搜索栏 -->
|
||||
<div class="m-search-bar">
|
||||
<el-input
|
||||
v-model="query.code"
|
||||
placeholder="搜索任务链编号"
|
||||
clearable
|
||||
:prefix-icon="Search"
|
||||
@keyup.enter="handleSearch"
|
||||
@clear="handleSearch"
|
||||
/>
|
||||
<el-badge :value="activeFilterCount" :hidden="activeFilterCount === 0" :max="9">
|
||||
<el-button :icon="Filter" circle @click="filterDrawerVisible = true" />
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<!-- 日期快筛 -->
|
||||
<div class="m-date-tabs">
|
||||
<span
|
||||
:class="['m-status-chip', { 'm-status-chip-active': isTodayFilter }]"
|
||||
@click="setToday"
|
||||
>今日</span>
|
||||
<span
|
||||
:class="['m-status-chip', { 'm-status-chip-active': !dateRange?.length }]"
|
||||
@click="clearDateRange"
|
||||
>全部</span>
|
||||
</div>
|
||||
|
||||
<!-- 状态快筛 -->
|
||||
<div class="m-status-tabs">
|
||||
<span
|
||||
v-for="(label, value) in { '': '全部', ...chainStatusMap }"
|
||||
:key="value"
|
||||
:class="['m-status-chip', { 'm-status-chip-active': query.status === value }]"
|
||||
@click="onStatusChip(value as string)"
|
||||
>{{ label }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 卡片列表 -->
|
||||
<div v-loading="loading" class="m-card-list">
|
||||
<div
|
||||
v-for="row in tableData"
|
||||
:key="row.code"
|
||||
class="m-chain-card"
|
||||
@click="goDetail(row.code)"
|
||||
>
|
||||
<div class="m-chain-card-top">
|
||||
<span class="m-chain-code">{{ row.code }}</span>
|
||||
<el-tag v-bind="getChainStatusTag(row.status)" size="small">
|
||||
{{ chainStatusMap[row.status] || row.status }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="m-chain-card-body">
|
||||
<div class="m-chain-field">
|
||||
<span class="m-field-label">类型</span>
|
||||
<el-tag size="small" type="info">{{ typeMap[row.type] || row.type }}</el-tag>
|
||||
</div>
|
||||
<div v-if="row.sourceContainer" class="m-chain-field">
|
||||
<span class="m-field-label">源容器</span>
|
||||
<span class="m-field-value">{{ row.sourceContainer }}</span>
|
||||
</div>
|
||||
<div v-if="row.targetLocation" class="m-chain-field">
|
||||
<span class="m-field-label">目标库位</span>
|
||||
<span class="m-field-value">{{ row.targetLocation }}</span>
|
||||
</div>
|
||||
<div v-if="row.elevatorId" class="m-chain-field">
|
||||
<span class="m-field-label">提升机</span>
|
||||
<span class="m-field-value">#{{ row.elevatorId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-chain-card-footer">
|
||||
<span class="m-chain-time">{{ row.createTime }}</span>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="!loading && tableData.length === 0" description="暂无数据" />
|
||||
</div>
|
||||
|
||||
<!-- 移动端分页 -->
|
||||
<div class="m-pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="query.page"
|
||||
:total="total"
|
||||
:page-size="query.size"
|
||||
layout="prev, slot, next"
|
||||
small
|
||||
@current-change="loadData"
|
||||
>
|
||||
<span class="m-page-info">{{ query.page }} / {{ Math.max(Math.ceil(total / query.size), 1) }}</span>
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<!-- 筛选抽屉 -->
|
||||
<el-drawer
|
||||
v-model="filterDrawerVisible"
|
||||
title="筛选条件"
|
||||
direction="btt"
|
||||
size="auto"
|
||||
:with-header="true"
|
||||
>
|
||||
<el-form :model="query" label-position="top">
|
||||
<el-form-item label="创建时间">
|
||||
<div class="m-drawer-date-actions">
|
||||
<el-button :type="isTodayFilter ? 'primary' : 'default'" @click="setToday">今日</el-button>
|
||||
<el-button @click="clearDateRange">清空</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务链编号">
|
||||
<el-input v-model="query.code" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="query.type" placeholder="全部" clearable style="width: 100%">
|
||||
<el-option v-for="(label, value) in typeMap" :key="value" :label="label" :value="value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务追踪号">
|
||||
<el-input v-model="query.businessNo" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="源容器">
|
||||
<el-input v-model="query.sourceContainer" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="m-drawer-footer">
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
<el-button type="primary" @click="filterDrawerVisible = false; handleSearch()">确认筛选</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'TaskChainList' })
|
||||
import { dispatchExecute, dispatchScan, getChainPage, type TaskChainVO } from '@/api/task'
|
||||
import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
|
||||
import { Search, Filter, ArrowRight } from '@element-plus/icons-vue'
|
||||
import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useDevice } from '@/composables/useDevice'
|
||||
import { chainStatusMap, getChainStatusTag } from '@/constants/chainStatus'
|
||||
|
||||
const { isMobile } = useDevice()
|
||||
const router = useRouter()
|
||||
const tableRef = ref<TableInstance>()
|
||||
const loading = ref(false)
|
||||
const tableData = ref<TaskChainVO[]>([])
|
||||
const total = ref(0)
|
||||
const dateRange = ref<string[]>([])
|
||||
const filterDrawerVisible = ref(false)
|
||||
|
||||
function onHeaderDblClick(e: MouseEvent) {
|
||||
const th = (e.target as HTMLElement).closest('th')
|
||||
if (!th || !tableRef.value) return
|
||||
const colId = Array.from(th.classList).find((c) => c.startsWith('el-table_'))
|
||||
if (!colId) return
|
||||
|
||||
const el = tableRef.value.$el as HTMLElement
|
||||
const cells = el.querySelectorAll<HTMLElement>(`.el-table__body .${colId} .cell`)
|
||||
if (!cells.length) return
|
||||
|
||||
const measure = document.createElement('span')
|
||||
measure.style.cssText = 'visibility:hidden;position:absolute;white-space:nowrap;'
|
||||
document.body.appendChild(measure)
|
||||
|
||||
let maxWidth = 0
|
||||
cells.forEach((cell) => {
|
||||
const style = getComputedStyle(cell)
|
||||
measure.style.fontSize = style.fontSize
|
||||
measure.style.fontFamily = style.fontFamily
|
||||
measure.style.fontWeight = style.fontWeight
|
||||
measure.innerHTML = cell.innerHTML
|
||||
maxWidth = Math.max(maxWidth, measure.offsetWidth)
|
||||
})
|
||||
document.body.removeChild(measure)
|
||||
|
||||
if (maxWidth > 0) {
|
||||
const columns = (tableRef.value as unknown as { store: { states: { columns: { value: { id: string; realWidth: number; width: number }[] } } } }).store.states.columns.value
|
||||
const col = columns.find((c) => c.id === colId)
|
||||
if (col) {
|
||||
const newWidth = Math.min(Math.max(maxWidth + 32, 80), 800)
|
||||
col.width = newWidth
|
||||
col.realWidth = newWidth
|
||||
nextTick(() => tableRef.value?.doLayout())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let headerEl: HTMLElement | null = null
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (tableRef.value) {
|
||||
headerEl = (tableRef.value.$el as HTMLElement).querySelector('.el-table__header-wrapper')
|
||||
headerEl?.addEventListener('dblclick', onHeaderDblClick)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
headerEl?.removeEventListener('dblclick', onHeaderDblClick)
|
||||
})
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
code: '',
|
||||
status: '',
|
||||
type: '',
|
||||
businessNo: '',
|
||||
sourceContainer: '',
|
||||
})
|
||||
|
||||
const activeFilterCount = computed(() => {
|
||||
let n = 0
|
||||
if (query.type) n++
|
||||
if (query.businessNo) n++
|
||||
if (query.sourceContainer) n++
|
||||
if (dateRange.value?.length) n++
|
||||
return n
|
||||
})
|
||||
|
||||
const isTodayFilter = computed(() => {
|
||||
const range = dateRange.value
|
||||
if (!range?.length || range.length < 2) return false
|
||||
const today = new Date()
|
||||
const start = range[0]
|
||||
const end = range[1]
|
||||
const todayStr = today.toISOString().slice(0, 10)
|
||||
return start?.startsWith(todayStr) && end?.startsWith(todayStr)
|
||||
})
|
||||
|
||||
function getTodayRange(): [string, string] {
|
||||
const d = new Date()
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
return [`${y}-${m}-${day} 00:00:00`, `${y}-${m}-${day} 23:59:59`]
|
||||
}
|
||||
|
||||
function setToday() {
|
||||
dateRange.value = getTodayRange()
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
function clearDateRange() {
|
||||
dateRange.value = []
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const typeMap: Record<string, string> = {
|
||||
INBOUND: '入库', QUICK_PALLET_INBOUND: '托盘快速入库',
|
||||
OUTBOUND: '出库', OUTBOUND_NO_WAIT: '出库(不等待)', MOVE: '移库',
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
...query,
|
||||
startTime: dateRange.value?.[0] || undefined,
|
||||
endTime: dateRange.value?.[1] || undefined,
|
||||
}
|
||||
const res = await getChainPage(params)
|
||||
tableData.value = res.data.records || []
|
||||
if (res.data.total > 0) {
|
||||
total.value = res.data.total
|
||||
}
|
||||
} catch { /* handled by interceptor */ } finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
query.page = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
query.code = ''
|
||||
query.status = ''
|
||||
query.type = ''
|
||||
query.businessNo = ''
|
||||
query.sourceContainer = ''
|
||||
dateRange.value = []
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
function onStatusChip(value: string) {
|
||||
query.status = value
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
function goDetail(code: string) {
|
||||
router.push(`/task/chain/${code}`)
|
||||
}
|
||||
|
||||
async function handleScan() {
|
||||
try {
|
||||
const result = await ElMessageBox.prompt('请输入仓库编码', '手动扫描执行', {
|
||||
confirmButtonText: '执行',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /\S+/,
|
||||
inputErrorMessage: '仓库编码不能为空',
|
||||
})
|
||||
if (typeof result === 'object' && 'value' in result) {
|
||||
await dispatchScan(result.value)
|
||||
ElMessage.success('扫描执行已触发')
|
||||
loadData()
|
||||
}
|
||||
} catch { /* cancelled */ }
|
||||
}
|
||||
|
||||
async function handleExecute(row: TaskChainVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认手动执行任务链 ${row.code}？`, '确认', { type: 'warning' })
|
||||
await dispatchExecute(row.warehouse, row.code)
|
||||
ElMessage.success('执行已触发')
|
||||
loadData()
|
||||
} catch { /* cancelled */ }
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== 公共 ===== */
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ===== PC ===== */
|
||||
.filter-card :deep(.el-card__body) {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* ===== 移动端 ===== */
|
||||
.m-search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.m-status-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.m-status-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.m-status-chip {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 12px;
|
||||
border-radius: 14px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
background: #f0f2f5;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.m-status-chip-active {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.m-card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.m-chain-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.m-chain-card:active {
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.m-chain-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-chain-code {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.m-chain-card-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-chain-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.m-field-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.m-field-value {
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.m-chain-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.m-chain-time {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.m-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.m-page-info {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.m-drawer-footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.m-drawer-footer .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quick-date-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.m-date-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.m-drawer-date-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"root":["./src/main.ts","./src/api/auth.ts","./src/api/elevator.ts","./src/api/generate.ts","./src/api/task.ts","./src/composables/usedevice.ts","./src/constants/chainstatus.ts","./src/constants/taskstatus.ts","./src/router/index.ts","./src/stores/tabs.ts","./src/stores/user.ts","./src/utils/request.ts","./src/app.vue","./src/layouts/adminlayout.vue","./src/views/dashboard/dashboardview.vue","./src/views/elevator/elevatorlist.vue","./src/views/generate/taskgenerateview.vue","./src/views/login/loginview.vue","./src/views/task/taskchaindetail.vue","./src/views/task/taskchainlist.vue","./env.d.ts"],"version":"5.7.3"}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://sit-api.baoshi56.com',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': '/src',
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue