feat: 快速创建出库单功能开发

.cursor/rules/factory-rule.mdc

@@ -13,6 +13,7 @@ Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite
 - 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
 - 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
 - `ElDialog`组件中`footer`插槽都放在中间位置
+- 写入表格`columns`时，如果需要对齐，使用`align`属性，数字相关的列, `align`属性值为`right`，长度一致的列, `align`属性值为`center`, 长度不一致的列, `align`属性值为`left`
 
 ## 接口相关
 

src/views/order/factoryOrderNew/component/PickFailDialog.vue

@@ -19,7 +19,9 @@
       <TableView
         :paginated-data="tableData"
         :columns="columns"
+        selectionable
         serial-numberable
+        @selection-change="handleSelectionChange"
       >
         <template #skuImage="{ row }">
           <el-image
@@ -53,39 +55,43 @@
           <ElButton @click="visible = false">取消</ElButton>
         </span>
         <span class="item">
-          <ElButton
-            type="primary"
-            :loading="submitLoading"
-            @click="handleCreateOutbound"
-          >
+          <ElButton type="primary" @click="handleCreateOutbound">
             快速创建出库单
           </ElButton>
         </span>
       </div>
     </template>
   </ElDialog>
+
+  <CreateOutboundDialog
+    ref="createOutboundDialogRef"
+    @success="() => {
+      visible = false
+      emit('success')
+    }"
+  />
 </template>
 
 <script setup lang="tsx">
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import {
-  createOutboundOrderApi,
   applyForReplenishByIdApi,
 } from '@/api/factoryOrderNew'
 import type { operateOrderListData } from '@/types/api/factoryOrderNew'
 import TableView from '@/components/TableView.vue'
 import _ from 'lodash'
+import CreateOutboundDialog from './CreateOutboundDialog.vue'
 
 const emit = defineEmits<{
   success: []
 }>()
 
 const visible = ref(false)
-const submitLoading = ref(false)
 const tableData = ref<operateOrderListData[]>([])
 const orderIds = ref<(number | string)[]>([])
 const dialogTitle = ref('拣胚失败')
+const selections = ref<operateOrderListData[]>([])
 const columns = [
   {
     key: 'warehouseName',
@@ -196,6 +202,10 @@ const columns = [
   },
 ]
 
+const handleSelectionChange = (selection: operateOrderListData[]) => {
+  selections.value = selection
+}
+
 const open = async (
   ids: (number | string)[],
   options?: { title?: string; submitType?: string },
@@ -224,18 +234,54 @@ const handleClose = () => {
   tableData.value = []
 }
 
-const handleCreateOutbound = async () => {
-  submitLoading.value = true
-  try {
-    await createOutboundOrderApi(orderIds.value)
-    ElMessage.success('创建出库单成功')
-    visible.value = false
-    emit('success')
-  } catch (e: unknown) {
-    ElMessage.error((e as Error)?.message || '创建出库单失败')
-  } finally {
-    submitLoading.value = false
+const createOutboundDialogRef = ref<InstanceType<
+  typeof CreateOutboundDialog
+> | null>(null)
+
+const handleCreateOutbound = () => {
+  if (selections.value.length === 0) {
+    ElMessage.warning('请至少选择一条数据')
+    return
+  }
+
+  const warehouseIds = _.uniq(
+    selections.value
+      .map((item) => item.warehouseId)
+      .filter((id) => id !== undefined && id !== null),
+  )
+
+  if (warehouseIds.length !== 1) {
+    ElMessage.warning('请选择相同仓库的库存SKU！')
+    return
+  }
+
+  const warehouseId = warehouseIds[0] as number | string
+  const firstSelection = selections.value[0] as operateOrderListData & {
+    warehouseName?: string
   }
+  const warehouseName = firstSelection.warehouseName
+
+  const items = selections.value.map((item) => {
+    const row = item as operateOrderListData & {
+      thirdSkuCode?: string
+      inventory?: number
+      producingQuantity?: number
+    }
+
+    return {
+      thirdSkuCode: row.thirdSkuCode || '',
+      suggestOutQuantity: _.subtract(
+        Number(row.inventory ?? 0),
+        Number(row.producingQuantity ?? 0),
+      ),
+    }
+  })
+
+  createOutboundDialogRef.value?.open({
+    warehouseId,
+    warehouseName,
+    items,
+  })
 }
 
 defineExpose({ open })