feat（wms）：新增出库管理

src/api/wms/order/shipment/detail/index.ts

@@ -0,0 +1,25 @@
+// WMS 出库单明细 VO
+export interface ShipmentOrderDetailVO {
+  id?: number
+  orderId?: number
+  itemId?: number
+  itemCode?: string
+  itemName?: string
+  unit?: string
+  skuId?: number
+  skuCode?: string
+  skuName?: string
+  inventoryDetailId?: number
+  warehouseId?: number
+  warehouseName?: string
+  areaId?: number
+  areaName?: string
+  batchNo?: string
+  productionDate?: Date
+  expirationDate?: Date
+  quantity?: number
+  availableQuantity?: number
+  amount?: number
+  remark?: string
+  createTime?: Date
+}

src/api/wms/order/shipment/index.ts

@@ -0,0 +1,77 @@
+import request from '@/config/axios'
+import { ShipmentOrderDetailVO } from './detail'
+
+// WMS 出库单 VO
+export interface ShipmentOrderVO {
+  id?: number
+  no?: string
+  type?: number
+  status?: number
+  bizOrderNo?: string
+  merchantId?: number
+  merchantName?: string
+  remark?: string
+  warehouseId?: number
+  warehouseName?: string
+  areaId?: number
+  areaName?: string
+  totalQuantity?: number
+  totalAmount?: number
+  details?: ShipmentOrderDetailVO[]
+  createTime?: Date
+  creator?: string
+  creatorName?: string
+  updateTime?: Date
+  updater?: string
+  updaterName?: string
+}
+
+// WMS 出库单 API
+export const ShipmentOrderApi = {
+  // 查询出库单分页
+  getShipmentOrderPage: async (params: any) => {
+    return await request.get({ url: '/wms/shipment-order/page', params })
+  },
+
+  // 查询出库单详情
+  getShipmentOrder: async (id: number) => {
+    return await request.get({ url: '/wms/shipment-order/get?id=' + id })
+  },
+
+  // 查询出库单明细
+  getShipmentOrderDetailListByOrderId: async (orderId: number) => {
+    return await request.get({
+      url: '/wms/shipment-order-detail/list-by-order-id?orderId=' + orderId
+    })
+  },
+
+  // 新增出库单
+  createShipmentOrder: async (data: ShipmentOrderVO) => {
+    return await request.post({ url: '/wms/shipment-order/create', data })
+  },
+
+  // 修改出库单
+  updateShipmentOrder: async (data: ShipmentOrderVO) => {
+    return await request.put({ url: '/wms/shipment-order/update', data })
+  },
+
+  // 完成出库
+  completeShipmentOrder: async (id: number) => {
+    return await request.put({ url: '/wms/shipment-order/complete?id=' + id })
+  },
+
+  // 作废出库单
+  cancelShipmentOrder: async (id: number) => {
+    return await request.put({ url: '/wms/shipment-order/cancel?id=' + id })
+  },
+
+  // 删除出库单
+  deleteShipmentOrder: async (id: number) => {
+    return await request.delete({ url: '/wms/shipment-order/delete?id=' + id })
+  },
+
+  // 导出出库单
+  exportShipmentOrder: async (params: any) => {
+    return await request.download({ url: '/wms/shipment-order/export-excel', params })
+  }
+}

src/utils/dict.ts

@@ -221,6 +221,7 @@ export enum DICT_TYPE {
   WMS_INVENTORY_HISTORY_TYPE = 'wms_inventory_history_type', // WMS 库存记录类型
   WMS_ORDER_STATUS = 'wms_order_status', // WMS 单据状态
   WMS_RECEIPT_ORDER_TYPE = 'wms_receipt_order_type', // WMS 入库单类型
+  WMS_SHIPMENT_ORDER_TYPE = 'wms_shipment_order_type', // WMS 出库单类型
 
   // ========== AI - 人工智能模块  ==========
   AI_PLATFORM = 'ai_platform', // AI 平台

src/views/wms/md/merchant/components/MerchantSelect.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import { MerchantApi, MerchantVO } from '@/api/wms/md/merchant'
-import { SupplierMerchantTypeList } from '@/views/wms/utils/constants'
+import { CustomerMerchantTypeList, SupplierMerchantTypeList } from '@/views/wms/utils/constants'
 
 /** WMS 往来企业选择器 */
 defineOptions({ name: 'WmsMerchantSelect', inheritAttrs: false })
@@ -31,6 +31,7 @@ const props = withDefaults(
   defineProps<{
     modelValue?: number
     supplier?: boolean
+    customer?: boolean
     disabled?: boolean
     clearable?: boolean
     placeholder?: string
@@ -57,9 +58,12 @@ const selectValue = computed({
 
 /** 获得可选往来企业列表 */
 const loadSelectableList = async () => {
-  merchantList.value = await MerchantApi.getMerchantSimpleList(
+  const types = props.supplier
-    props.supplier ? { types: SupplierMerchantTypeList } : undefined
+    ? SupplierMerchantTypeList
-  )
+    : props.customer
+      ? CustomerMerchantTypeList
+      : undefined
+  merchantList.value = await MerchantApi.getMerchantSimpleList(types ? { types } : undefined)
   handleFilter('')
 }
 
@@ -85,7 +89,7 @@ const handleChange = (value: number | undefined) => {
 
 /** 供应商开关变化时，重新加载可选列表 */
 watch(
-  () => props.supplier,
+  () => [props.supplier, props.customer],
   () => loadSelectableList()
 )
 

src/views/wms/order/receipt/ReceiptOrderForm.vue

@@ -73,17 +73,31 @@
         </el-col>
         <el-col :span="AREA_ENABLE ? 8 : 16">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="formData.remark" maxlength="255" placeholder="请输入备注" />
+            <el-input
+              v-model="formData.remark"
+              maxlength="255"
+              placeholder="请输入备注"
+              :rows="3"
+              type="textarea"
+            />
           </el-form-item>
         </el-col>
       </el-row>
 
       <div class="mb-12px flex items-center justify-between">
         <span class="text-14px font-bold">入库明细</span>
-        <el-button :disabled="!formData.warehouseId" plain type="primary" @click="handleAddDetail">
+        <el-tooltip
-          <Icon class="mr-5px" icon="ep:plus" />
+          content="请先选择仓库"
-          添加商品
+          :disabled="!!formData.warehouseId"
-        </el-button>
+          placement="top"
+        >
+          <span>
+            <el-button :disabled="!formData.warehouseId" plain type="primary" @click="handleAddDetail">
+              <Icon class="mr-5px" icon="ep:plus" />
+              添加商品
+            </el-button>
+          </span>
+        </el-tooltip>
       </div>
       <el-table :data="formData.details" border empty-text="暂无商品明细">
         <el-table-column label="商品信息" min-width="220">
@@ -221,7 +235,7 @@ import MerchantSelect from '@/views/wms/md/merchant/components/MerchantSelect.vu
 import WarehouseAreaSelect from '@/views/wms/md/warehouse/components/WarehouseAreaSelect.vue'
 import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
 import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
-import { OrderStatusEnum } from '@/views/wms/utils/constants'
+import { OrderStatusEnum, OrderUpdateStatusList } from '@/views/wms/utils/constants'
 import {
   formatQuantity,
   PRICE_PRECISION,
@@ -267,10 +281,15 @@ const skuSelectRef = ref() // 商品 SKU 选择弹窗 Ref
 const totalQuantity = computed(() => sumQuantity(formData.value.details || [], (detail) => detail.quantity))
 const detailTotalAmount = computed(() => sumPrice(formData.value.details || [], (detail) => detail.amount))
 const isPrepareOrder = computed(
-  () => !formData.value.id || formData.value.status === OrderStatusEnum.PREPARE
+  () =>
+    !formData.value.id ||
+    (formData.value.status !== undefined && OrderUpdateStatusList.includes(formData.value.status))
 )
 const isSavedPrepareOrder = computed(
-  () => !!formData.value.id && formData.value.status === OrderStatusEnum.PREPARE
+  () =>
+    !!formData.value.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
 )
 
 /** 打开弹窗 */

src/views/wms/order/receipt/index.vue

@@ -275,7 +275,7 @@
           </el-table>
         </template>
       </el-table-column>
-      <el-table-column v-if="isTableColumnVisible('no')" fixed="left" label="单号/业务单号" width="210">
+      <el-table-column v-if="isTableColumnVisible('no')" fixed="left" label="单号/业务单号" width="290">
         <template #default="scope">
           <div>
             单号：
@@ -346,34 +346,55 @@
         min-width="160"
         prop="merchantName"
       />
-      <el-table-column
+      <el-table-column v-if="isTableColumnVisible('operateInfo')" label="操作信息" min-width="280">
-        v-if="isTableColumnVisible('operateTime')"
-        label="操作时间"
-        min-width="160"
-      >
         <template #default="scope">
-          <div>创建：{{ formatNullableDate(scope.row.createTime, 'MM-DD HH:mm') }}</div>
+          <div>
-          <div>更新：{{ formatNullableDate(scope.row.updateTime, 'MM-DD HH:mm') }}</div>
+            创建：{{ formatNullableDate(scope.row.createTime) }} /
-        </template>
+            {{ scope.row.creatorName || scope.row.creator || '-' }}
-      </el-table-column>
+          </div>
-      <el-table-column v-if="isTableColumnVisible('operator')" label="操作人" min-width="120">
+          <div>
-        <template #default="scope">
+            更新：{{ formatNullableDate(scope.row.updateTime) }} /
-          <div>创建：{{ scope.row.creatorName || scope.row.creator || '-' }}</div>
+            {{ scope.row.updaterName || scope.row.updater || '-' }}
-          <div>更新：{{ scope.row.updaterName || scope.row.updater || '-' }}</div>
+          </div>
         </template>
       </el-table-column>
       <el-table-column v-if="isTableColumnVisible('remark')" label="备注" min-width="160" prop="remark" />
       <el-table-column align="center" fixed="right" label="操作" width="180">
         <template #default="scope">
-          <el-button
+          <el-tooltip
-            v-if="scope.row.status === OrderStatusEnum.PREPARE"
+            :content="getReceiptOrderUpdateTip(scope.row.status)"
-            v-hasPermi="['wms:receipt-order:update']"
+            :disabled="canUpdateReceiptOrder(scope.row.status)"
-            link
+            placement="top"
-            type="primary"
-            @click="openForm('update', scope.row.id)"
           >
-            修改
+            <span>
-          </el-button>
+              <el-button
+                v-hasPermi="['wms:receipt-order:update']"
+                :disabled="!canUpdateReceiptOrder(scope.row.status)"
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+              >
+                修改
+              </el-button>
+            </span>
+          </el-tooltip>
+          <el-tooltip
+            :content="getReceiptOrderDeleteTip(scope.row.status)"
+            :disabled="canDeleteReceiptOrder(scope.row.status)"
+            placement="top"
+          >
+            <span>
+              <el-button
+                v-hasPermi="['wms:receipt-order:delete']"
+                :disabled="!canDeleteReceiptOrder(scope.row.status)"
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+              >
+                删除
+              </el-button>
+            </span>
+          </el-tooltip>
           <el-button
             v-hasPermi="['wms:receipt-order:query']"
             link
@@ -382,15 +403,6 @@
           >
             打印
           </el-button>
-          <el-button
-            v-if="canDeleteReceiptOrder(scope.row.status)"
-            v-hasPermi="['wms:receipt-order:delete']"
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-          >
-            删除
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -417,7 +429,11 @@ import { ReceiptOrderDetailVO } from '@/api/wms/order/receipt/detail'
 import MerchantSelect from '@/views/wms/md/merchant/components/MerchantSelect.vue'
 import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
 import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
-import { OrderStatusEnum } from '@/views/wms/utils/constants'
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList
+} from '@/views/wms/utils/constants'
 import { formatPrice, formatQuantity, PRICE_PRECISION, QUANTITY_PRECISION } from '@/views/wms/utils/format'
 import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import ReceiptOrderDetail from './ReceiptOrderDetail.vue'
@@ -438,8 +454,7 @@ type TableColumnKey =
   | 'warehouse'
   | 'quantityAmount'
   | 'merchant'
-  | 'operateTime'
+  | 'operateInfo'
-  | 'operator'
   | 'remark'
 
 const tableColumnOptions: Array<{ label: string; value: TableColumnKey }> = [
@@ -449,8 +464,7 @@ const tableColumnOptions: Array<{ label: string; value: TableColumnKey }> = [
   { label: '仓库', value: 'warehouse' },
   { label: '数量/金额(元)', value: 'quantityAmount' },
   { label: '供应商', value: 'merchant' },
-  { label: '操作时间', value: 'operateTime' },
+  { label: '操作信息', value: 'operateInfo' },
-  { label: '操作人', value: 'operator' },
   { label: '备注', value: 'remark' }
 ]
 const checkedTableColumns = ref<TableColumnKey[]>([
@@ -460,8 +474,7 @@ const checkedTableColumns = ref<TableColumnKey[]>([
   'warehouse',
   'quantityAmount',
   'merchant',
-  'operateTime',
+  'operateInfo',
-  'operator',
   'remark'
 ])
 const isTableColumnVisible = (column: TableColumnKey) => checkedTableColumns.value.includes(column)
@@ -493,9 +506,33 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const detailMap = reactive<Record<number, ReceiptOrderDetailVO[]>>({}) // 入库单明细缓存
 
+/** 是否允许修改入库单 */
+const canUpdateReceiptOrder = (status?: number) => {
+  return status !== undefined && OrderUpdateStatusList.includes(status)
+}
+
 /** 是否允许删除入库单 */
 const canDeleteReceiptOrder = (status?: number) => {
-  return status !== undefined && [OrderStatusEnum.PREPARE, OrderStatusEnum.CANCELED].includes(status)
+  return status !== undefined && OrderDeleteStatusList.includes(status)
+}
+
+/** 获得入库单修改禁用提示 */
+const getReceiptOrderUpdateTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已入库，无法修改'
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改'
+  }
+  return '当前状态无法修改'
+}
+
+/** 获得入库单删除禁用提示 */
+const getReceiptOrderDeleteTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已入库，无法删除'
+  }
+  return '当前状态无法删除'
 }
 
 /** 查询入库单列表 */

src/views/wms/order/shipment/ShipmentOrderDetail.vue

@@ -0,0 +1,168 @@
+<!-- WMS 出库单详情 -->
+<template>
+  <Dialog v-model="dialogVisible" title="出库单详情" width="1200px">
+    <div v-loading="loading">
+      <div class="mb-16px text-18px font-bold">单据信息</div>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="出库单号">{{ detailData.no || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="单据状态">
+          <dict-tag
+            v-if="detailData.status !== undefined"
+            :type="DICT_TYPE.WMS_ORDER_STATUS"
+            :value="detailData.status"
+          />
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="出库类型">
+          <dict-tag
+            v-if="detailData.type !== undefined"
+            :type="DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE"
+            :value="detailData.type"
+          />
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="仓库">
+          {{ detailData.warehouseName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="客户">
+          {{ detailData.merchantName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="业务单号">
+          {{ detailData.bizOrderNo || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="AREA_ENABLE" label="库区">
+          {{ detailData.areaName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="总数量">
+          {{ formatQuantity(detailData.totalQuantity) || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="总金额">
+          {{ formatPrice(detailData.totalAmount) || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ formatNullableDate(detailData.createTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建人">
+          {{ detailData.creatorName || detailData.creator || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="更新时间">
+          {{ formatNullableDate(detailData.updateTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="更新人">
+          {{ detailData.updaterName || detailData.updater || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :span="2" label="备注">
+          {{ detailData.remark || '-' }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <div class="mb-16px mt-24px text-18px font-bold">商品明细</div>
+      <el-table :data="detailRows" :summary-method="getSummaries" border show-summary>
+        <el-table-column label="商品名称" min-width="180" prop="itemName">
+          <template #default="scope">
+            <div>{{ scope.row.itemName || '-' }}</div>
+            <div v-if="scope.row.itemCode" class="text-12px text-gray-500">
+              商品编号：{{ scope.row.itemCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格名称" min-width="180" prop="skuName">
+          <template #default="scope">
+            <div>{{ scope.row.skuName || '-' }}</div>
+            <div v-if="scope.row.skuCode" class="text-12px text-gray-500">
+              规格编号：{{ scope.row.skuCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="AREA_ENABLE" label="库区" min-width="140" prop="areaName" />
+        <el-table-column v-if="BATCH_ENABLE" label="批号" min-width="140" prop="batchNo" />
+        <el-table-column v-if="BATCH_ENABLE" label="生产日期" width="140">
+          <template #default="scope">
+            {{ formatNullableDate(scope.row.productionDate, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="BATCH_ENABLE" label="过期日期" width="140">
+          <template #default="scope">
+            {{ formatNullableDate(scope.row.expirationDate, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column align="right" label="数量" prop="quantity" width="120">
+          <template #default="scope">
+            {{ formatQuantity(scope.row.quantity) || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="单位" prop="unit" width="100" />
+        <el-table-column align="right" label="单价" prop="unitPrice" width="140">
+          <template #default="scope">
+            {{ formatPrice(scope.row.unitPrice) || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="right" label="总价" prop="amount" width="140">
+          <template #default="scope">
+            {{ formatPrice(scope.row.amount) || '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatNullableDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { ShipmentOrderApi, ShipmentOrderVO } from '@/api/wms/order/shipment'
+import { ShipmentOrderDetailVO } from '@/api/wms/order/shipment/detail'
+import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity
+} from '@/views/wms/utils/format'
+
+/** WMS 出库单详情 */
+defineOptions({ name: 'WmsShipmentOrderDetail' })
+
+interface DetailRow extends ShipmentOrderDetailVO {
+  unitPrice?: number
+}
+
+const loading = ref(false) // 加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailData = ref<ShipmentOrderVO>({}) // 详情数据
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    unitPrice:
+      detail.amount != null && detail.quantity
+        ? Number(detail.amount) / Number(detail.quantity)
+        : undefined
+  }))
+)
+
+const getSummaries = ({ columns, data }: { columns: any[]; data: DetailRow[] }) =>
+  columns.map((column, index) => {
+    if (index === 0) {
+      return '合计'
+    }
+    if (column.property === 'quantity') {
+      return formatSumQuantity(data, (detail) => detail.quantity)
+    }
+    if (column.property === 'amount') {
+      return formatSumPrice(data, (detail) => detail.amount)
+    }
+    return ''
+  })
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  loading.value = true
+  try {
+    detailData.value = await ShipmentOrderApi.getShipmentOrder(id)
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open })
+</script>

src/views/wms/order/shipment/ShipmentOrderForm.vue

@@ -0,0 +1,524 @@
+<!-- WMS 出库单表单 -->
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1280px">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="92px"
+    >
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="出库单号" prop="no">
+            <el-input v-model="formData.no" maxlength="64" placeholder="请输入出库单号" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="出库类型" prop="type">
+            <el-select v-model="formData.type" class="w-1/1" placeholder="请选择出库类型">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="客户" prop="merchantId">
+            <MerchantSelect
+              v-model="formData.merchantId"
+              placeholder="请选择客户"
+              customer
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="业务单号" prop="bizOrderNo">
+            <el-input v-model="formData.bizOrderNo" maxlength="64" placeholder="请输入业务单号" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="仓库" prop="warehouseId">
+            <WarehouseSelect v-model="formData.warehouseId" @change="handleWarehouseChange" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="AREA_ENABLE" :span="8">
+          <el-form-item label="库区" prop="areaId">
+            <WarehouseAreaSelect
+              v-model="formData.areaId"
+              :warehouse-id="formData.warehouseId"
+              @change="handleAreaChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="总数量">
+            <el-input :model-value="formatQuantity(totalQuantity)" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="总金额">
+            <el-input-number
+              v-model="formData.totalAmount"
+              :controls="false"
+              :min="0"
+              :precision="PRICE_PRECISION"
+              class="!w-1/1"
+              placeholder="请输入总金额"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="AREA_ENABLE ? 8 : 16">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="formData.remark"
+              maxlength="255"
+              placeholder="请输入备注"
+              :rows="3"
+              type="textarea"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <div class="mb-12px flex items-center justify-between">
+        <span class="text-14px font-bold">出库明细</span>
+        <el-tooltip
+          content="请先选择仓库"
+          :disabled="!!formData.warehouseId"
+          placement="top"
+        >
+          <span>
+            <el-button :disabled="!formData.warehouseId" plain type="primary" @click="handleAddDetail">
+              <Icon class="mr-5px" icon="ep:plus" />
+              添加商品
+            </el-button>
+          </span>
+        </el-tooltip>
+      </div>
+      <el-table :data="formData.details" border empty-text="暂无商品明细">
+        <el-table-column label="商品信息" min-width="220">
+          <template #default="scope">
+            <div>{{ scope.row.itemName || '-' }}</div>
+            <div v-if="scope.row.itemCode" class="text-12px text-gray-500">
+              商品编号：{{ scope.row.itemCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格信息" min-width="220">
+          <template #default="scope">
+            <div>{{ scope.row.skuName || '-' }}</div>
+            <div v-if="scope.row.skuCode" class="text-12px text-gray-500">
+              规格编号：{{ scope.row.skuCode }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="AREA_ENABLE" label="库区" min-width="140">
+          <template #default="scope">
+            {{ scope.row.areaName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="BATCH_ENABLE" label="批号" min-width="160">
+          <template #default="scope">
+            {{ scope.row.batchNo || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="BATCH_ENABLE" label="生产日期" width="180">
+          <template #default="scope">
+            {{ formatNullableDate(scope.row.productionDate, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column v-if="BATCH_ENABLE" label="过期日期" width="180">
+          <template #default="scope">
+            {{ formatNullableDate(scope.row.expirationDate, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column align="right" label="可用库存" width="120">
+          <template #default="scope">
+            {{ formatQuantity(scope.row.availableQuantity) || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="出库数量" width="160">
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.quantity"
+              :controls="false"
+              :min="0"
+              :precision="QUANTITY_PRECISION"
+              class="!w-1/1"
+              placeholder="数量"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="金额(元)" width="160">
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.amount"
+              :controls="false"
+              :min="0"
+              :precision="PRICE_PRECISION"
+              class="!w-1/1"
+              placeholder="金额"
+              @change="handleDetailAmountChange"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" min-width="180">
+          <template #default="scope">
+            <el-input v-model="scope.row.remark" maxlength="255" placeholder="请输入备注" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="80">
+          <template #default="scope">
+            <el-button link type="danger" @click="handleDeleteDetail(scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <InventorySelect
+        ref="inventorySelectRef"
+        :area-id="formData.areaId"
+        :warehouse-id="formData.warehouseId"
+        @change="handleSelectInventory"
+      />
+    </el-form>
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <div>
+          <el-button
+            v-if="isSavedPrepareOrder"
+            v-hasPermi="['wms:shipment-order:complete']"
+            :disabled="formLoading"
+            type="success"
+            @click="handleComplete"
+          >
+            完成出库
+          </el-button>
+          <el-button
+            v-if="isSavedPrepareOrder"
+            v-hasPermi="['wms:shipment-order:cancel']"
+            :disabled="formLoading"
+            type="danger"
+            @click="handleCancel"
+          >
+            作废
+          </el-button>
+        </div>
+        <div>
+          <el-button v-if="isPrepareOrder" :disabled="formLoading" type="primary" @click="submitForm">
+            保存
+          </el-button>
+          <el-button @click="dialogVisible = false">取 消</el-button>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { FormRules } from 'element-plus'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { ShipmentOrderApi, ShipmentOrderVO } from '@/api/wms/order/shipment'
+import { ShipmentOrderDetailVO } from '@/api/wms/order/shipment/detail'
+import InventorySelect, {
+  InventorySelectRow
+} from '@/views/wms/inventory/components/InventorySelect.vue'
+import MerchantSelect from '@/views/wms/md/merchant/components/MerchantSelect.vue'
+import WarehouseAreaSelect from '@/views/wms/md/warehouse/components/WarehouseAreaSelect.vue'
+import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
+import { formatNullableDate } from '@/utils/formatTime'
+import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
+import { OrderStatusEnum, OrderUpdateStatusList } from '@/views/wms/utils/constants'
+import {
+  formatQuantity,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+  sumPrice,
+  sumQuantity
+} from '@/views/wms/utils/format'
+import { generateOrderNo } from '@/views/wms/utils/order'
+
+/** WMS 出库单表单 */
+defineOptions({ name: 'WmsShipmentOrderForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const originalFormData = ref('') // 表单原始数据快照
+const formData = ref<ShipmentOrderVO>({
+  id: undefined,
+  no: undefined,
+  type: undefined,
+  status: OrderStatusEnum.PREPARE,
+  bizOrderNo: undefined,
+  merchantId: undefined,
+  warehouseId: undefined,
+  areaId: undefined,
+  totalQuantity: 0,
+  totalAmount: 0,
+  remark: undefined,
+  details: []
+})
+const formRules = reactive<FormRules>({
+  no: [{ required: true, message: '出库单号不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '出库类型不能为空', trigger: 'change' }],
+  warehouseId: [{ required: true, message: '仓库不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+const inventorySelectRef = ref() // 库存选择弹窗 Ref
+
+const totalQuantity = computed(() => sumQuantity(formData.value.details || [], (detail) => detail.quantity))
+const detailTotalAmount = computed(() => sumPrice(formData.value.details || [], (detail) => detail.amount))
+const isPrepareOrder = computed(
+  () =>
+    !formData.value.id ||
+    (formData.value.status !== undefined && OrderUpdateStatusList.includes(formData.value.status))
+)
+const isSavedPrepareOrder = computed(
+  () =>
+    !!formData.value.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+)
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const order = await ShipmentOrderApi.getShipmentOrder(id)
+      formData.value = {
+        ...order,
+        details: order.details || []
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+  originalFormData.value = JSON.stringify(buildSubmitData())
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 构建出库明细 */
+const buildDetail = (inventory: InventorySelectRow): ShipmentOrderDetailVO => ({
+  id: undefined,
+  itemId: inventory.itemId,
+  itemCode: inventory.itemCode,
+  itemName: inventory.itemName,
+  unit: inventory.unit,
+  skuId: inventory.skuId,
+  skuCode: inventory.skuCode,
+  skuName: inventory.skuName,
+  inventoryDetailId: inventory.inventoryDetailId,
+  warehouseId: inventory.warehouseId,
+  warehouseName: inventory.warehouseName,
+  areaId: inventory.areaId,
+  areaName: inventory.areaName,
+  batchNo: inventory.batchNo,
+  productionDate: inventory.productionDate,
+  expirationDate: inventory.expirationDate,
+  quantity: undefined,
+  availableQuantity: inventory.availableQuantity,
+  amount: undefined,
+  remark: undefined
+})
+
+/** 添加商品 */
+const handleAddDetail = () => {
+  inventorySelectRef.value?.open()
+}
+
+/** 选择库存 */
+const handleSelectInventory = (inventories: InventorySelectRow[]) => {
+  if (!inventories.length) {
+    return
+  }
+  formData.value.details = formData.value.details || []
+  inventories.forEach((inventory) => {
+    if (isInventorySelected(inventory)) {
+      return
+    }
+    formData.value.details!.push(buildDetail(inventory))
+  })
+  refreshTotalAmount()
+}
+
+/** 判断库存是否已选择 */
+const isInventorySelected = (inventory: InventorySelectRow) => {
+  return (formData.value.details || []).some((detail) => {
+    if (BATCH_ENABLE) {
+      return detail.inventoryDetailId === inventory.inventoryDetailId
+    }
+    return (
+      detail.skuId === inventory.skuId &&
+      detail.warehouseId === inventory.warehouseId &&
+      detail.areaId === inventory.areaId
+    )
+  })
+}
+
+/** 删除明细 */
+const handleDeleteDetail = (index: number) => {
+  formData.value.details?.splice(index, 1)
+  refreshTotalAmount()
+}
+
+/** 仓库变化 */
+const handleWarehouseChange = () => {
+  formData.value.areaId = undefined
+  formData.value.details = []
+  refreshTotalAmount()
+}
+
+/** 库区变化 */
+const handleAreaChange = () => {
+  formData.value.details = []
+  refreshTotalAmount()
+}
+
+/** 明细金额变化 */
+const handleDetailAmountChange = () => {
+  refreshTotalAmount()
+}
+
+/** 汇总明细金额 */
+const refreshTotalAmount = () => {
+  formData.value.totalAmount = detailTotalAmount.value
+}
+
+/** 校验明细 */
+const validateDetails = (required: boolean) => {
+  if (!formData.value.details?.length) {
+    if (required) {
+      message.error('至少包含一条出库明细')
+      return false
+    }
+    return true
+  }
+  for (let i = 0; i < formData.value.details.length; i++) {
+    const detail = formData.value.details[i]
+    if (!detail.skuId) {
+      message.error(`第 ${i + 1} 行明细请选择商品规格`)
+      return false
+    }
+    if (AREA_ENABLE && !detail.areaId) {
+      message.error(`第 ${i + 1} 行明细请选择库区`)
+      return false
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      message.error(`第 ${i + 1} 行明细出库数量必须大于 0`)
+      return false
+    }
+    if (detail.availableQuantity !== undefined && detail.quantity > detail.availableQuantity) {
+      message.error(`第 ${i + 1} 行明细出库数量不能大于可用库存`)
+      return false
+    }
+  }
+  return true
+}
+
+/** 构建提交数据 */
+const buildSubmitData = () =>
+  ({
+    ...formData.value,
+    totalQuantity: totalQuantity.value,
+    totalAmount: formData.value.totalAmount,
+    details: formData.value.details || []
+  }) as ShipmentOrderVO
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  if (!validateDetails(false)) {
+    return
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = buildSubmitData()
+    if (formType.value === 'create') {
+      await ShipmentOrderApi.createShipmentOrder(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ShipmentOrderApi.updateShipmentOrder(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 完成出库：表单修改过则先保存，再完成 */
+const handleComplete = async () => {
+  await formRef.value.validate()
+  if (!validateDetails(true)) {
+    return
+  }
+  try {
+    await message.confirm('确认完成出库？完成后将更新库存。')
+    formLoading.value = true
+    const data = buildSubmitData()
+    if (JSON.stringify(data) !== originalFormData.value) {
+      await ShipmentOrderApi.updateShipmentOrder(data)
+    }
+    await ShipmentOrderApi.completeShipmentOrder(formData.value.id!)
+    message.success('出库成功')
+    dialogVisible.value = false
+    emit('success')
+  } catch {
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 作废出库单 */
+const handleCancel = async () => {
+  try {
+    await message.confirm('确认作废该出库单？作废后不可恢复。')
+    formLoading.value = true
+    await ShipmentOrderApi.cancelShipmentOrder(formData.value.id!)
+    message.success('作废成功')
+    dialogVisible.value = false
+    emit('success')
+  } catch {
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    no: generateOrderNo('CK'),
+    type: undefined,
+    status: OrderStatusEnum.PREPARE,
+    bizOrderNo: undefined,
+    merchantId: undefined,
+    warehouseId: undefined,
+    areaId: undefined,
+    totalQuantity: 0,
+    totalAmount: 0,
+    remark: undefined,
+    details: []
+  }
+  originalFormData.value = ''
+  nextTick(() => formRef.value?.clearValidate())
+}
+</script>

src/views/wms/order/shipment/ShipmentOrderPrint.vue

@@ -0,0 +1,128 @@
+<!-- WMS 出库单打印 -->
+<template>
+  <div class="hidden">
+    <button ref="printButtonRef" v-print="printObj" type="button"></button>
+    <div id="wmsShipmentOrderPrint" class="color-#303133">
+      <h2 class="text-center">出库单</h2>
+      <div class="mb-12px grid grid-cols-3 gap-x-24px gap-y-8px text-14px">
+        <div>出库单号：{{ printData.no || '-' }}</div>
+        <div>
+          出库类型：{{ getDictLabel(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE, printData.type) || '-' }}
+        </div>
+        <div>出库状态：{{ getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) || '-' }}</div>
+        <div>客户：{{ printData.merchantName || '-' }}</div>
+        <div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div v-if="AREA_ENABLE">库区：{{ printData.areaName || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalAmount) || '-' }}</div>
+        <div>创建时间：{{ formatNullableDate(printData.createTime) }}</div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-13px">
+        <thead>
+          <tr>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">商品信息</th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">规格信息</th>
+            <th
+              v-if="AREA_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              库区
+            </th>
+            <th
+              v-if="BATCH_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              批号
+            </th>
+            <th
+              v-if="BATCH_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              生产日期
+            </th>
+            <th
+              v-if="BATCH_ENABLE"
+              class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left"
+            >
+              过期日期
+            </th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">数量</th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">金额(元)</th>
+            <th class="border border-solid border-#dcdfe6 bg-#f5f7fa p-8px text-left">备注</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printData.details || []" :key="detail.id">
+            <td class="border border-solid border-#dcdfe6 p-8px">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-12px">编号：{{ detail.itemCode }}</div>
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-12px">编号：{{ detail.skuCode }}</div>
+            </td>
+            <td v-if="AREA_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ detail.areaName || '-' }}
+            </td>
+            <td v-if="BATCH_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ detail.batchNo || '-' }}
+            </td>
+            <td v-if="BATCH_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ formatNullableDate(detail.productionDate, 'YYYY-MM-DD') }}
+            </td>
+            <td v-if="BATCH_ENABLE" class="border border-solid border-#dcdfe6 p-8px">
+              {{ formatNullableDate(detail.expirationDate, 'YYYY-MM-DD') }}
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px text-right">
+              {{ formatPrice(detail.amount) || '-' }}
+            </td>
+            <td class="border border-solid border-#dcdfe6 p-8px">{{ detail.remark || '-' }}</td>
+          </tr>
+          <tr v-if="!printData.details?.length">
+            <td
+              class="border border-solid border-#dcdfe6 p-8px text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { formatNullableDate } from '@/utils/formatTime'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+import { ShipmentOrderApi, ShipmentOrderVO } from '@/api/wms/order/shipment'
+import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
+import { formatPrice, formatQuantity } from '@/views/wms/utils/format'
+
+/** WMS 出库单打印 */
+defineOptions({ name: 'WmsShipmentOrderPrint' })
+
+const printData = ref<ShipmentOrderVO>({}) // 打印数据
+const printButtonRef = ref<HTMLButtonElement>() // 打印按钮
+const tableColumnCount = computed(() => 5 + (AREA_ENABLE ? 1 : 0) + (BATCH_ENABLE ? 3 : 0))
+const printObj = ref({
+  id: 'wmsShipmentOrderPrint',
+  popTitle: '&nbsp',
+  extraCss: '/print.css',
+  extraHead: '',
+  zIndex: 20003
+})
+
+/** 打印出库单 */
+const print = async (id: number) => {
+  printData.value = await ShipmentOrderApi.getShipmentOrder(id)
+  await nextTick()
+  printButtonRef.value?.click()
+}
+defineExpose({ print })
+</script>

src/views/wms/order/shipment/index.vue

@@ -0,0 +1,649 @@
+<!-- WMS 出库单 -->
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="80px"
+    >
+      <el-form-item label="出库单号" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          class="!w-240px"
+          clearable
+          placeholder="请输入出库单号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="单据状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-240px"
+          clearable
+          placeholder="请选择单据状态"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.WMS_ORDER_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="仓库" prop="warehouseId">
+        <WarehouseSelect
+          v-model="queryParams.warehouseId"
+          class="!w-240px"
+          @change="handleWarehouseChange"
+        />
+      </el-form-item>
+      <el-form-item label="客户" prop="merchantId">
+        <MerchantSelect
+          v-model="queryParams.merchantId"
+          class="!w-240px"
+          placeholder="请选择客户"
+          customer
+        />
+      </el-form-item>
+      <el-form-item label="单据日期" prop="orderDate">
+        <el-date-picker
+          v-model="queryParams.orderDate"
+          :shortcuts="defaultShortcuts"
+          class="!w-240px"
+          end-placeholder="结束时间"
+          start-placeholder="开始时间"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item label="数量" prop="totalQuantityMin">
+        <div class="flex w-240px items-center gap-8px">
+          <el-input-number
+            v-model="queryParams.totalQuantityMin"
+            :controls="false"
+            :min="0"
+            :precision="QUANTITY_PRECISION"
+            class="!w-105px"
+            placeholder="最小值"
+          />
+          <span>至</span>
+          <el-input-number
+            v-model="queryParams.totalQuantityMax"
+            :controls="false"
+            :min="0"
+            :precision="QUANTITY_PRECISION"
+            class="!w-105px"
+            placeholder="最大值"
+          />
+        </div>
+      </el-form-item>
+      <el-form-item label="总金额" prop="totalAmountMin">
+        <div class="flex w-240px items-center gap-8px">
+          <el-input-number
+            v-model="queryParams.totalAmountMin"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-105px"
+            placeholder="最小值"
+          />
+          <span>至</span>
+          <el-input-number
+            v-model="queryParams.totalAmountMax"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-105px"
+            placeholder="最大值"
+          />
+        </div>
+      </el-form-item>
+      <el-form-item label="出库类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          class="!w-240px"
+          clearable
+          placeholder="请选择出库类型"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建用户" prop="creator">
+        <UserSelectV2
+          v-model="queryParams.creator"
+          class="!w-240px"
+          placeholder="请选择创建用户"
+        />
+      </el-form-item>
+      <el-form-item label="更新用户" prop="updater">
+        <UserSelectV2
+          v-model="queryParams.updater"
+          class="!w-240px"
+          placeholder="请选择更新用户"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :shortcuts="defaultShortcuts"
+          class="!w-240px"
+          end-placeholder="结束时间"
+          start-placeholder="开始时间"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item label="更新时间" prop="updateTime">
+        <el-date-picker
+          v-model="queryParams.updateTime"
+          :shortcuts="defaultShortcuts"
+          class="!w-240px"
+          end-placeholder="结束时间"
+          start-placeholder="开始时间"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-popover
+          popper-class="wms-shipment-order-table-setting-popover"
+          trigger="click"
+          width="520"
+        >
+          <template #reference>
+            <el-button>
+              <Icon class="mr-5px" icon="ep:setting" />
+              表格设置
+            </el-button>
+          </template>
+          <el-checkbox-group
+            v-model="checkedTableColumns"
+            class="wms-shipment-order-table-setting grid grid-cols-3 gap-y-14px rounded p-16px"
+          >
+            <el-checkbox
+              v-for="column in tableColumnOptions"
+              :key="column.value"
+              :label="column.value"
+            >
+              {{ column.label }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-popover>
+        <el-button
+          v-hasPermi="['wms:shipment-order:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['wms:shipment-order:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 出库单列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :cell-class-name="'wms-shipment-order-cell'"
+      :data="list"
+      :show-overflow-tooltip="true"
+      border
+      @expand-change="handleExpandChange"
+    >
+      <el-table-column type="expand" width="48">
+        <template #default="scope">
+          <el-table :data="detailMap[scope.row.id] || []" border>
+            <el-table-column label="商品信息" min-width="220">
+              <template #default="detailScope">
+                <div>{{ detailScope.row.itemName || '-' }}</div>
+                <div v-if="detailScope.row.itemCode" class="text-12px text-gray-500">
+                  商品编号：{{ detailScope.row.itemCode }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="规格信息" min-width="220">
+              <template #default="detailScope">
+                <div>{{ detailScope.row.skuName || '-' }}</div>
+                <div v-if="detailScope.row.skuCode" class="text-12px text-gray-500">
+                  规格编号：{{ detailScope.row.skuCode }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="AREA_ENABLE"
+              align="center"
+              label="库区"
+              min-width="140"
+              prop="areaName"
+            />
+            <el-table-column
+              v-if="BATCH_ENABLE"
+              align="center"
+              label="批号"
+              min-width="140"
+              prop="batchNo"
+            />
+            <el-table-column v-if="BATCH_ENABLE" label="生产日期/过期日期" min-width="180">
+              <template #default="detailScope">
+                <div v-if="detailScope.row.productionDate">
+                  生产日期：{{ formatNullableDate(detailScope.row.productionDate, 'YYYY-MM-DD') }}
+                </div>
+                <div v-if="detailScope.row.expirationDate">
+                  过期日期：{{ formatNullableDate(detailScope.row.expirationDate, 'YYYY-MM-DD') }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column align="right" label="出库数量" width="120">
+              <template #default="detailScope">
+                {{ formatQuantity(detailScope.row.quantity) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="right" label="金额(元)" width="120">
+              <template #default="detailScope">
+                {{ formatPrice(detailScope.row.amount) || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" min-width="160" prop="remark" />
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isTableColumnVisible('no')" fixed="left" label="单号/业务单号" width="290">
+        <template #default="scope">
+          <div>
+            单号：
+            <el-button link type="primary" @click="openDetail(scope.row.id)">
+              {{ scope.row.no }}
+            </el-button>
+          </div>
+          <div v-if="scope.row.bizOrderNo" class="text-12px text-gray-500">
+            业务：{{ scope.row.bizOrderNo }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('status')"
+        align="center"
+        fixed="left"
+        label="出库状态"
+        width="110"
+      >
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.WMS_ORDER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('type')"
+        align="center"
+        label="出库类型"
+        width="120"
+      >
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('warehouse')"
+        :label="AREA_ENABLE ? '仓库/库区' : '仓库'"
+        min-width="160"
+      >
+        <template #default="scope">
+          <template v-if="AREA_ENABLE">
+            <div>仓库：{{ scope.row.warehouseName || '-' }}</div>
+            <div>库区：{{ scope.row.areaName || '-' }}</div>
+          </template>
+          <template v-else>
+            {{ scope.row.warehouseName || '-' }}
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('quantityAmount')"
+        label="总数量/总金额(元)"
+        min-width="180"
+      >
+        <template #default="scope">
+          <div class="flex items-center justify-between">
+            <span>数量：</span>
+            <span>{{ formatQuantity(scope.row.totalQuantity) }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span>金额：</span>
+            <span>{{ formatPrice(scope.row.totalAmount) }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="isTableColumnVisible('merchant')"
+        label="客户"
+        min-width="160"
+        prop="merchantName"
+      />
+      <el-table-column v-if="isTableColumnVisible('operateInfo')" label="操作信息" min-width="280">
+        <template #default="scope">
+          <div>
+            创建：{{ formatNullableDate(scope.row.createTime) }} /
+            {{ scope.row.creatorName || scope.row.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatNullableDate(scope.row.updateTime) }} /
+            {{ scope.row.updaterName || scope.row.updater || '-' }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isTableColumnVisible('remark')" label="备注" min-width="160" prop="remark" />
+      <el-table-column align="center" fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-tooltip
+            :content="getShipmentOrderUpdateTip(scope.row.status)"
+            :disabled="canUpdateShipmentOrder(scope.row.status)"
+            placement="top"
+          >
+            <span>
+              <el-button
+                v-hasPermi="['wms:shipment-order:update']"
+                :disabled="!canUpdateShipmentOrder(scope.row.status)"
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+              >
+                修改
+              </el-button>
+            </span>
+          </el-tooltip>
+          <el-tooltip
+            :content="getShipmentOrderDeleteTip(scope.row.status)"
+            :disabled="canDeleteShipmentOrder(scope.row.status)"
+            placement="top"
+          >
+            <span>
+              <el-button
+                v-hasPermi="['wms:shipment-order:delete']"
+                :disabled="!canDeleteShipmentOrder(scope.row.status)"
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+              >
+                删除
+              </el-button>
+            </span>
+          </el-tooltip>
+          <el-button
+            v-hasPermi="['wms:shipment-order:query']"
+            link
+            type="primary"
+            @click="handlePrint(scope.row.id)"
+          >
+            打印
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ShipmentOrderForm ref="formRef" @success="getList" />
+  <ShipmentOrderDetail ref="detailRef" />
+  <ShipmentOrderPrint ref="printRef" />
+</template>
+
+<script lang="ts" setup>
+import { defaultShortcuts, formatNullableDate } from '@/utils/formatTime'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { ShipmentOrderApi, ShipmentOrderVO } from '@/api/wms/order/shipment'
+import { ShipmentOrderDetailVO } from '@/api/wms/order/shipment/detail'
+import MerchantSelect from '@/views/wms/md/merchant/components/MerchantSelect.vue'
+import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
+import { AREA_ENABLE, BATCH_ENABLE } from '@/views/wms/utils/config'
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList
+} from '@/views/wms/utils/constants'
+import { formatPrice, formatQuantity, PRICE_PRECISION, QUANTITY_PRECISION } from '@/views/wms/utils/format'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
+import ShipmentOrderDetail from './ShipmentOrderDetail.vue'
+import ShipmentOrderForm from './ShipmentOrderForm.vue'
+import ShipmentOrderPrint from './ShipmentOrderPrint.vue'
+import download from '@/utils/download'
+
+/** WMS 出库单 */
+defineOptions({ name: 'WmsShipmentOrder' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+type TableColumnKey =
+  | 'no'
+  | 'status'
+  | 'type'
+  | 'warehouse'
+  | 'quantityAmount'
+  | 'merchant'
+  | 'operateInfo'
+  | 'remark'
+
+const tableColumnOptions: Array<{ label: string; value: TableColumnKey }> = [
+  { label: '单号/业务单号', value: 'no' },
+  { label: '出库状态', value: 'status' },
+  { label: '出库类型', value: 'type' },
+  { label: '仓库', value: 'warehouse' },
+  { label: '数量/金额(元)', value: 'quantityAmount' },
+  { label: '客户', value: 'merchant' },
+  { label: '操作信息', value: 'operateInfo' },
+  { label: '备注', value: 'remark' }
+]
+const checkedTableColumns = ref<TableColumnKey[]>([
+  'no',
+  'status',
+  'type',
+  'warehouse',
+  'quantityAmount',
+  'merchant',
+  'operateInfo',
+  'remark'
+])
+const isTableColumnVisible = (column: TableColumnKey) => checkedTableColumns.value.includes(column)
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ShipmentOrderVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const getDefaultQueryParams = () => ({
+  pageNo: 1,
+  pageSize: 10,
+  no: undefined as string | undefined,
+  status: undefined as number | undefined,
+  warehouseId: undefined as number | undefined,
+  merchantId: undefined as number | undefined,
+  orderDate: undefined as string[] | undefined,
+  totalQuantityMin: undefined as number | undefined,
+  totalQuantityMax: undefined as number | undefined,
+  totalAmountMin: undefined as number | undefined,
+  totalAmountMax: undefined as number | undefined,
+  type: undefined as number | undefined,
+  bizOrderNo: undefined as string | undefined,
+  creator: undefined as number | undefined,
+  updater: undefined as number | undefined,
+  createTime: undefined as string[] | undefined,
+  updateTime: undefined as string[] | undefined
+})
+const queryParams = reactive(getDefaultQueryParams())
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const detailMap = reactive<Record<number, ShipmentOrderDetailVO[]>>({}) // 出库单明细缓存
+
+/** 是否允许修改出库单 */
+const canUpdateShipmentOrder = (status?: number) => {
+  return status !== undefined && OrderUpdateStatusList.includes(status)
+}
+
+/** 是否允许删除出库单 */
+const canDeleteShipmentOrder = (status?: number) => {
+  return status !== undefined && OrderDeleteStatusList.includes(status)
+}
+
+/** 获得出库单修改禁用提示 */
+const getShipmentOrderUpdateTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已出库，无法修改'
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改'
+  }
+  return '当前状态无法修改'
+}
+
+/** 获得出库单删除禁用提示 */
+const getShipmentOrderDeleteTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已出库，无法删除'
+  }
+  return '当前状态无法删除'
+}
+
+/** 查询出库单列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ShipmentOrderApi.getShipmentOrderPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  Object.assign(queryParams, getDefaultQueryParams())
+  handleQuery()
+}
+
+/** 仓库变化 */
+const handleWarehouseChange = () => {
+  handleQuery()
+}
+
+/** 展开明细 */
+const handleExpandChange = async (row: ShipmentOrderVO) => {
+  if (!row.id || detailMap[row.id]) {
+    return
+  }
+  detailMap[row.id] = await ShipmentOrderApi.getShipmentOrderDetailListByOrderId(row.id)
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 查看出库单详情 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
+/** 打印出库单 */
+const printRef = ref()
+const handlePrint = (id: number) => {
+  printRef.value.print(id)
+}
+
+/** 删除出库单 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ShipmentOrderApi.deleteShipmentOrder(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ShipmentOrderApi.exportShipmentOrder(queryParams)
+    download.excel(data, '出库单.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await getList()
+})
+</script>
+
+<style scoped>
+:deep(.wms-shipment-order-cell) {
+  vertical-align: top;
+}
+
+:global(.wms-shipment-order-table-setting-popover) {
+  padding: 12px;
+}
+
+:global(.wms-shipment-order-table-setting) {
+  background-color: var(--el-fill-color-light);
+}
+
+:global(.wms-shipment-order-table-setting .el-checkbox) {
+  height: 28px;
+  margin-right: 0;
+}
+
+:global(.wms-shipment-order-table-setting .el-checkbox__label) {
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>

src/views/wms/utils/constants.ts

@@ -5,6 +5,12 @@ export const OrderStatusEnum = {
   CANCELED: 5 // 已作废
 } as const
 
+/** 可修改的单据状态 */
+export const OrderUpdateStatusList: number[] = [OrderStatusEnum.PREPARE]
+
+/** 可删除的单据状态 */
+export const OrderDeleteStatusList: number[] = [OrderStatusEnum.PREPARE, OrderStatusEnum.CANCELED]
+
 /** 往来企业类型枚举 */
 export const MerchantTypeEnum = {
   CUSTOMER: 1, // 客户
@@ -17,3 +23,9 @@ export const SupplierMerchantTypeList = [
   MerchantTypeEnum.SUPPLIER,
   MerchantTypeEnum.CUSTOMER_SUPPLIER
 ]
+
+/** 客户类型的往来企业 */
+export const CustomerMerchantTypeList = [
+  MerchantTypeEnum.CUSTOMER,
+  MerchantTypeEnum.CUSTOMER_SUPPLIER
+]