opt: 海康任务取消

src/api/task.ts

@@ -136,6 +136,17 @@ export function cancelChain(chainCode: string, reason?: string) {
   )
 }
 
+/** 业务取消（MachineTaskController POST /task/cancel，@RequestBody MachineCancelReqDTO） */
+export function cancelTaskByBusinessNo(businessNo: string, reason?: string) {
+  return request.post<
+    never,
+    { code: number; data: string[] | null }
+  >('/api/robot/external/admin/machine-task/task/cancel', {
+    businessNo,
+    ...(reason != null && reason !== '' ? { reason } : {}),
+  })
+}
+
 export function deleteTask(taskCode: string) {
   return request.post<never, { code: number; data: boolean }>(
     '/api/robot/external/admin/machine-task/task/delete',

src/views/generate/TaskGenerateView.vue

@@ -1,13 +1,32 @@
 <template>
   <div class="page-container">
-    <el-card shadow="hover" :class="{ 'm-gen-card': isMobile }">
+    <el-card shadow="never" :class="['gen-page-card', { '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-row :gutter="isMobile ? 0 : 20" class="gen-layout">
-        <!-- 入库 -->
+        <el-col :xs="24" :sm="24" :md="8" :lg="7" class="gen-nav-col">
-        <el-tab-pane label="入库" name="inbound">
+          <nav class="gen-type-nav" aria-label="任务类型">
+            <button
+              v-for="opt in taskTypeNavItems"
+              :key="opt.key"
+              type="button"
+              :class="['gen-type-nav__item', { 'is-active': panelKey === opt.key }]"
+              @click="selectPanel(opt.key)"
+            >
+              {{ opt.label }}
+            </button>
+          </nav>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="16" :lg="17" class="gen-panel-col">
+          <div class="gen-panel-surface">
+            <header class="gen-panel-head">
+              <h2 class="gen-panel-head__title">{{ currentTaskLabel }}</h2>
+            </header>
+            <div class="gen-panel-body">
+          <!-- 入库 -->
+          <div v-show="isPanel('inbound')" class="gen-form-wrap">
           <el-form :model="inboundForm" :label-width="formLabelWidth" :label-position="labelPos" class="gen-form">
             <el-row :gutter="gutter">
               <el-col :span="colSpan">
@@ -62,10 +81,10 @@
               <el-button type="primary" :loading="loading" @click="handleInbound" :style="isMobile ? 'width:100%' : ''">提交入库</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 出库(等待) -->
+          <!-- 出库(等待) -->
-        <el-tab-pane label="出库(等待)" name="outboundWait">
+          <div v-show="isPanel('outboundWait')" class="gen-form-wrap">
           <el-form :model="outboundWaitForm" :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="outboundWaitForm.warehouse" /></el-form-item></el-col>
@@ -85,10 +104,10 @@
               <el-button type="primary" :loading="loading" @click="handleOutboundBatch('wait')" :style="isMobile ? 'width:100%' : ''">提交出库(等待)</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 拣货出库(新模版) -->
+          <!-- 拣货出库(新模版) -->
-        <el-tab-pane label="拣货出库(新模版)" name="outboundWaitNew">
+          <div v-show="isPanel('outboundWaitNew')" class="gen-form-wrap">
           <el-form :model="outboundWaitNewForm" :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="outboundWaitNewForm.warehouse" /></el-form-item></el-col>
@@ -108,10 +127,10 @@
               <el-button type="primary" :loading="loading" @click="handleOutboundBatch('waitNew')" :style="isMobile ? 'width:100%' : ''">提交拣货出库(新模版)</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 出库(不等待) -->
+          <!-- 出库(不等待) -->
-        <el-tab-pane label="出库(不等待)" name="outboundNoWait">
+          <div v-show="isPanel('outboundNoWait')" class="gen-form-wrap">
           <el-form :model="outboundNoWaitForm" :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="outboundNoWaitForm.warehouse" /></el-form-item></el-col>
@@ -130,10 +149,10 @@
               <el-button type="primary" :loading="loading" @click="handleOutboundBatch('noWait')" :style="isMobile ? 'width:100%' : ''">提交出库(不等待)</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 直出模式(新模版) -->
+          <!-- 直出模式(新模版) -->
-        <el-tab-pane label="直出模式(新模版)" name="outboundNoWaitNew">
+          <div v-show="isPanel('outboundNoWaitNew')" class="gen-form-wrap">
           <el-form :model="outboundNoWaitNewForm" :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="outboundNoWaitNewForm.warehouse" /></el-form-item></el-col>
@@ -152,10 +171,10 @@
               <el-button type="primary" :loading="loading" @click="handleOutboundBatch('noWaitNew')" :style="isMobile ? 'width:100%' : ''">提交直出模式(新模版)</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 移库 -->
+          <!-- 移库 -->
-        <el-tab-pane label="移库" name="move">
+          <div v-show="isPanel('move')" class="gen-form-wrap">
           <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>
@@ -174,10 +193,10 @@
               <el-button type="primary" :loading="loading" @click="handleMoveBatch" :style="isMobile ? 'width:100%' : ''">提交移库</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 释放信号 -->
+          <!-- 释放信号 -->
-        <el-tab-pane label="释放信号" name="release">
+          <div v-show="isPanel('release')" class="gen-form-wrap">
           <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>
@@ -190,10 +209,10 @@
               <el-button type="primary" :loading="loading" @click="handleRelease" :style="isMobile ? 'width:100%' : ''">发送释放信号</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 绑定站点 -->
+          <!-- 绑定站点 -->
-        <el-tab-pane label="绑定站点" name="bindStation">
+          <div v-show="isPanel('bindStation')" class="gen-form-wrap">
           <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>
@@ -204,10 +223,10 @@
               <el-button type="primary" :loading="loading" @click="handleBindStation" :style="isMobile ? 'width:100%' : ''">绑定站点</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 解绑站点 -->
+          <!-- 解绑站点 -->
-        <el-tab-pane label="解绑站点" name="releaseStation">
+          <div v-show="isPanel('releaseStation')" class="gen-form-wrap">
           <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>
@@ -218,10 +237,10 @@
               <el-button type="warning" :loading="loading" @click="handleReleaseStation" :style="isMobile ? 'width:100%' : ''">解绑站点</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
 
-        <!-- 取消任务 -->
+          <!-- 取消任务（按仓库+容器，后台任务生成接口） -->
-        <el-tab-pane label="取消任务" name="cancel">
+          <div v-show="isPanel('cancel')" class="gen-form-wrap">
           <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>
@@ -233,8 +252,24 @@
               <el-button type="danger" :loading="loading" @click="handleCancel" :style="isMobile ? 'width:100%' : ''">取消任务</el-button>
             </el-form-item>
           </el-form>
-        </el-tab-pane>
+        </div>
-      </el-tabs>
+
+          <!-- 业务取消（按业务跟踪号） -->
+          <div v-show="isPanel('businessCancel')" class="gen-form-wrap">
+          <el-form :model="businessCancelForm" :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="businessCancelForm.businessNo" placeholder="与任务链业务追踪号一致" /></el-form-item></el-col>
+              <el-col :span="colSpan"><el-form-item label="取消原因"><el-input v-model="businessCancelForm.reason" type="textarea" :rows="2" /></el-form-item></el-col>
+            </el-row>
+            <el-form-item>
+              <el-button type="danger" :loading="loading" @click="handleBusinessCancel" :style="isMobile ? 'width:100%' : ''">业务取消任务</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
     </el-card>
 
     <!-- 结果展示 -->
@@ -273,6 +308,7 @@ import {
     type ReleaseReq,
     type ReleaseStationReq,
 } from '@/api/generate'
+import { cancelTaskByBusinessNo } from '@/api/task'
 import { useDevice } from '@/composables/useDevice'
 import { ElMessage } from 'element-plus'
 import { computed, reactive, ref } from 'vue'
@@ -283,7 +319,35 @@ 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 taskTypeNavItems: { key: string; label: string }[] = [
+  { key: 'inbound', label: '入库' },
+  { key: 'outboundWait', label: '出库(等待)' },
+  { key: 'outboundWaitNew', label: '拣货出库(新模版)' },
+  { key: 'outboundNoWait', label: '出库(不等待)' },
+  { key: 'outboundNoWaitNew', label: '直出模式(新模版)' },
+  { key: 'move', label: '移库' },
+  { key: 'release', label: '释放信号' },
+  { key: 'bindStation', label: '绑定站点' },
+  { key: 'releaseStation', label: '解绑站点' },
+  { key: 'cancel', label: '取消任务(仓+容器)' },
+  { key: 'businessCancel', label: '业务取消' },
+]
+
+const panelKey = ref('inbound')
+
+const currentTaskLabel = computed(
+  () => taskTypeNavItems.find((i) => i.key === panelKey.value)?.label ?? '任务生成',
+)
+
+function selectPanel(key: string) {
+  panelKey.value = key
+}
+
+function isPanel(name: string) {
+  return panelKey.value === name
+}
+
 const loading = ref(false)
 const resultVisible = ref(false)
 const resultTitle = ref('')
@@ -323,6 +387,7 @@ const releaseForm = reactive<ReleaseReq>({ warehouse: '', container: '', taskCha
 const bindForm = reactive<BindStationReq>({ warehouse: '', container: '', station: '' })
 const releaseStationForm = reactive<ReleaseStationReq>({ warehouse: '', container: '', station: '' })
 const cancelForm = reactive<CancelReq>({ warehouse: '', container: '' })
+const businessCancelForm = reactive({ businessNo: '', reason: '' })
 
 function showResult(title: string, type: 'success' | 'error', detail?: unknown) {
   resultTitle.value = title
@@ -483,6 +548,25 @@ async function handleCancel() {
     loading.value = false
   }
 }
+
+async function handleBusinessCancel() {
+  if (!businessCancelForm.businessNo?.trim()) {
+    return ElMessage.warning('请填写业务跟踪号')
+  }
+  loading.value = true
+  try {
+    const res = await cancelTaskByBusinessNo(
+      businessCancelForm.businessNo.trim(),
+      businessCancelForm.reason?.trim() || undefined,
+    )
+    showResult('业务取消已提交', 'success', res.data)
+    ElMessage.success('业务取消已提交')
+  } catch (e) {
+    showResult('业务取消失败', 'error', e)
+  } finally {
+    loading.value = false
+  }
+}
 </script>
 
 <style scoped>
@@ -492,13 +576,26 @@ async function handleCancel() {
   gap: 16px;
 }
 
-.card-title {
+.gen-page-card {
-  font-weight: 600;
+  border-radius: 12px;
-  font-size: 16px;
+  border: 1px solid var(--el-border-color-lighter);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
 }
 
-.gen-form {
+.gen-page-card :deep(.el-card__header) {
-  padding: 16px 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  padding: 16px 20px;
+}
+
+.gen-page-card :deep(.el-card__body) {
+  padding: 20px 20px 24px;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: 0.02em;
+  color: var(--el-text-color-primary);
 }
 
 .result-card {
@@ -555,33 +652,243 @@ async function handleCancel() {
   padding: 12px;
 }
 
-.m-tabs :deep(.el-tabs__header) {
+.gen-layout {
-  overflow-x: auto;
+  align-items: stretch;
-  -webkit-overflow-scrolling: touch;
 }
 
-.m-tabs :deep(.el-tabs__nav) {
+.gen-nav-col {
-  flex-wrap: nowrap;
+  margin-bottom: 0;
 }
 
-.m-tabs :deep(.el-tabs__item) {
+.gen-panel-col {
-  padding: 0 12px;
+  min-width: 0;
-  font-size: 13px;
 }
 
-.m-tabs .gen-form {
+/* 扁平类型列表 */
-  padding: 12px 0 0;
+.gen-type-nav {
-}
+  display: flex;
-
-.m-tabs .outbound-item {
-  padding: 12px 10px 0;
-}
-
-.m-tabs .outbound-actions {
   flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+  overflow-y: auto;
+  background: linear-gradient(165deg, #f8f9fc 0%, #f2f4f8 100%);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 
-.m-tabs .outbound-actions .el-button {
+/* 桌面：左右列同高，侧栏与表单区纵向铺满 */
+@media (min-width: 768px) {
+  .gen-layout {
+    min-height: min(72vh, 580px);
+  }
+
+  .gen-nav-col {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .gen-type-nav {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .gen-panel-col {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .gen-panel-surface {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.gen-type-nav__item {
+  display: block;
   width: 100%;
+  margin: 0;
+  padding: 11px 14px;
+  border: none;
+  border-radius: 9px;
+  text-align: left;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--el-text-color-regular);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.gen-type-nav__item:hover {
+  color: var(--el-text-color-primary);
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.gen-type-nav__item.is-active {
+  font-weight: 600;
+  color: var(--el-color-primary);
+  background: #fff;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.08),
+    0 0 0 1px var(--el-color-primary-light-7);
+}
+
+.gen-type-nav__item:focus-visible {
+  outline: 2px solid var(--el-color-primary-light-5);
+  outline-offset: 2px;
+}
+
+/* 右侧表单区 */
+.gen-panel-surface {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--el-border-color-lighter);
+  background: var(--el-bg-color);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+}
+
+.gen-panel-head {
+  flex-shrink: 0;
+  padding: 16px 22px 14px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  background: linear-gradient(180deg, var(--el-fill-color-blank) 0%, var(--el-bg-color) 100%);
+}
+
+.gen-panel-head__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--el-text-color-primary);
+}
+
+.gen-panel-body {
+  flex: 1;
+  padding: 16px 20px 22px;
+  overflow: auto;
+  background: var(--el-fill-color-lighter);
+}
+
+/* 单块表单：内层卡片 + 统一控件样式 */
+.gen-form-wrap {
+  min-height: 80px;
+  padding: 22px 24px 24px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-extra-light);
+  border-radius: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.gen-form-wrap :deep(.gen-form) {
+  padding: 0;
+  max-width: 960px;
+}
+
+.gen-form-wrap :deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+.gen-form-wrap :deep(.el-form-item__label) {
+  font-weight: 500;
+  color: var(--el-text-color-regular);
+  line-height: 1.4;
+}
+
+.gen-form-wrap :deep(.el-input__wrapper) {
+  border-radius: 8px;
+  transition: box-shadow 0.15s ease;
+}
+
+.gen-form-wrap :deep(.el-select .el-input__wrapper) {
+  border-radius: 8px;
+}
+
+.gen-form-wrap :deep(.el-textarea__inner) {
+  border-radius: 8px;
+  padding: 10px 12px;
+  line-height: 1.5;
+}
+
+.gen-form-wrap :deep(.el-input-number .el-input__wrapper) {
+  border-radius: 8px;
+}
+
+/* 提交区：与字段区分隔 */
+.gen-form-wrap :deep(.el-form-item:last-child) {
+  margin-bottom: 0;
+  margin-top: 4px;
+  padding-top: 20px;
+  border-top: 1px dashed var(--el-border-color-lighter);
+}
+
+.gen-form-wrap :deep(.el-form-item:last-child .el-form-item__content) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.gen-form-wrap :deep(.el-form-item:last-child .el-button) {
+  min-width: 120px;
+  border-radius: 8px;
+  padding: 10px 20px;
+}
+
+@media (max-width: 767px) {
+  .gen-nav-col {
+    margin-bottom: 14px;
+  }
+
+  .gen-type-nav {
+    max-height: 240px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px;
+  }
+
+  .gen-type-nav__item {
+    width: auto;
+    flex: 1 1 calc(50% - 4px);
+    min-width: calc(50% - 4px);
+    text-align: center;
+    font-size: 13px;
+    padding: 10px 8px;
+  }
+
+  .gen-panel-surface {
+    min-height: 0;
+  }
+
+  .gen-panel-head {
+    padding: 14px 16px 12px;
+  }
+
+  .gen-panel-body {
+    padding: 12px 12px 16px;
+  }
+
+  .gen-form-wrap {
+    padding: 16px 14px 18px;
+    border-radius: 8px;
+  }
+
+  .gen-form-wrap :deep(.el-form-item) {
+    margin-bottom: 16px;
+  }
+
+  .gen-form-wrap :deep(.el-form-item:last-child .el-button) {
+    min-width: 0;
+    width: 100%;
+  }
 }
 </style>