feat（wms）：统一 4 个订单界面的样式和代码风格

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

@@ -1,12 +1,13 @@
 <!-- WMS 盘库单 -->
 <template>
   <ContentWrap>
+    <!-- 搜索工作栏 -->
     <el-form
       ref="queryFormRef"
       :inline="true"
       :model="queryParams"
       class="-mb-15px"
-      label-width="90px"
+      label-width="80px"
     >
       <el-form-item label="盘库单号" prop="no">
         <el-input
@@ -188,6 +189,7 @@
     </el-form>
   </ContentWrap>
 
+  <!-- 盘库单列表 -->
   <ContentWrap>
     <el-table
       v-loading="loading"
@@ -198,51 +200,55 @@
       @expand-change="handleExpandChange"
     >
       <el-table-column type="expand" width="48">
-        <template #default="{ row }">
+        <template #default="scope">
-          <el-table :data="detailMap[row.id] || []" border>
+          <el-table :data="detailMap[scope.row.id] || []" border>
             <el-table-column label="商品信息" min-width="220">
-              <template #default="{ row: detail }">
+              <template #default="detailScope">
-                <div>{{ detail.itemName || '-' }}</div>
+                <div>{{ detailScope.row.itemName || '-' }}</div>
-                <div v-if="detail.itemCode" class="text-12px text-gray-500">
+                <div v-if="detailScope.row.itemCode" class="text-12px text-gray-500">
-                  商品编号：{{ detail.itemCode }}
+                  商品编号：{{ detailScope.row.itemCode }}
                 </div>
               </template>
             </el-table-column>
             <el-table-column label="规格信息" min-width="220">
-              <template #default="{ row: detail }">
+              <template #default="detailScope">
-                <div>{{ detail.skuName || '-' }}</div>
+                <div>{{ detailScope.row.skuName || '-' }}</div>
-                <div v-if="detail.skuCode" class="text-12px text-gray-500">
+                <div v-if="detailScope.row.skuCode" class="text-12px text-gray-500">
-                  规格编号：{{ detail.skuCode }}
+                  规格编号：{{ detailScope.row.skuCode }}
                 </div>
               </template>
             </el-table-column>
             <el-table-column align="right" label="账面数量" width="120">
-              <template #default="{ row: detail }">{{ formatQuantity(detail.quantity) }}</template>
+              <template #default="detailScope">
+                {{ formatQuantity(detailScope.row.quantity) }}
+              </template>
             </el-table-column>
             <el-table-column align="right" label="实盘数量" width="120">
-              <template #default="{ row: detail }">{{
+              <template #default="detailScope">
-                formatQuantity(detail.checkQuantity)
+                {{ formatQuantity(detailScope.row.checkQuantity) }}
-              }}</template>
+              </template>
             </el-table-column>
             <el-table-column align="right" label="单价(元)" width="120">
-              <template #default="{ row: detail }">{{ formatPrice(detail.price) }}</template>
+              <template #default="detailScope">
+                {{ formatPrice(detailScope.row.price) }}
+              </template>
             </el-table-column>
             <el-table-column align="right" label="实际金额(元)" width="140">
-              <template #default="{ row: detail }">{{
+              <template #default="detailScope">
-                formatPrice(getDetailActualPrice(detail))
+                {{ formatPrice(getDetailActualPrice(detailScope.row)) }}
-              }}</template>
+              </template>
             </el-table-column>
             <el-table-column align="right" label="盈亏数量" width="120">
-              <template #default="{ row: detail }">
+              <template #default="detailScope">
-                <span :class="getLossClass(getDetailDifferenceQuantity(detail))">
+                <span :class="getLossClass(getDetailDifferenceQuantity(detailScope.row))">
-                  {{ formatQuantity(getDetailDifferenceQuantity(detail)) }}
+                  {{ formatQuantity(getDetailDifferenceQuantity(detailScope.row)) }}
                 </span>
               </template>
             </el-table-column>
             <el-table-column align="right" label="实际盈亏金额(元)" width="160">
-              <template #default="{ row: detail }">
+              <template #default="detailScope">
-                <span :class="getLossClass(getDetailDifferencePrice(detail))">
+                <span :class="getLossClass(getDetailDifferencePrice(detailScope.row))">
-                  {{ formatPrice(getDetailDifferencePrice(detail)) }}
+                  {{ formatPrice(getDetailDifferencePrice(detailScope.row)) }}
                 </span>
               </template>
             </el-table-column>
@@ -250,9 +256,11 @@
         </template>
       </el-table-column>
       <el-table-column v-if="isTableColumnVisible('no')" fixed="left" label="单号" width="210">
-        <template #default="{ row }">
+        <template #default="scope">
           单号：
-          <el-button link type="primary" @click="openDetail(row.id)">{{ row.no }}</el-button>
+          <el-button link type="primary" @click="openDetail(scope.row.id)">
+            {{ scope.row.no }}
+          </el-button>
         </template>
       </el-table-column>
       <el-table-column
@@ -262,13 +270,13 @@
         label="盘库状态"
         width="110"
       >
-        <template #default="{ row }">
+        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.WMS_ORDER_STATUS" :value="row.status" />
+          <dict-tag :type="DICT_TYPE.WMS_ORDER_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column v-if="isTableColumnVisible('warehouse')" label="仓库" min-width="180">
-        <template #default="{ row }">
+        <template #default="scope">
-          {{ row.warehouseName || '-' }}
+          {{ scope.row.warehouseName || '-' }}
         </template>
       </el-table-column>
       <el-table-column
@@ -276,38 +284,38 @@
         label="盈亏/金额(元)"
         min-width="200"
       >
-        <template #default="{ row }">
+        <template #default="scope">
           <div class="flex items-center justify-between">
             <span>盈亏数：</span>
-            <span :class="getLossClass(row.totalQuantity)">{{
+            <span :class="getLossClass(scope.row.totalQuantity)">{{
-              formatQuantity(row.totalQuantity)
+              formatQuantity(scope.row.totalQuantity)
             }}</span>
           </div>
           <div class="flex items-center justify-between">
             <span>总金额：</span>
-            <span>{{ formatPrice(row.totalPrice) }}</span>
+            <span>{{ formatPrice(scope.row.totalPrice) }}</span>
           </div>
           <div class="flex items-center justify-between">
             <span>实际金额：</span>
-            <span>{{ formatPrice(row.actualPrice) }}</span>
+            <span>{{ formatPrice(scope.row.actualPrice) }}</span>
           </div>
           <div class="flex items-center justify-between">
             <span>盈亏金额：</span>
-            <span :class="getLossClass(getDifferencePrice(row))">{{
+            <span :class="getLossClass(getDifferencePrice(scope.row))">{{
-              formatPrice(getDifferencePrice(row))
+              formatPrice(getDifferencePrice(scope.row))
             }}</span>
           </div>
         </template>
       </el-table-column>
       <el-table-column v-if="isTableColumnVisible('operateInfo')" label="操作信息" min-width="280">
-        <template #default="{ row }">
+        <template #default="scope">
           <div>
-            创建：{{ formatNullableDate(row.createTime) }} /
+            创建：{{ formatNullableDate(scope.row.createTime) }} /
-            {{ row.creatorName || row.creator || '-' }}
+            {{ scope.row.creatorName || scope.row.creator || '-' }}
           </div>
           <div>
-            更新：{{ formatNullableDate(row.updateTime) }} /
+            更新：{{ formatNullableDate(scope.row.updateTime) }} /
-            {{ row.updaterName || row.updater || '-' }}
+            {{ scope.row.updaterName || scope.row.updater || '-' }}
           </div>
         </template>
       </el-table-column>
@@ -318,36 +326,36 @@
         prop="remark"
       />
       <el-table-column align="center" fixed="right" label="操作" width="150">
-        <template #default="{ row }">
+        <template #default="scope">
           <el-tooltip
-            :content="getUpdateTip(row.status)"
+            :content="getCheckOrderUpdateTip(scope.row.status)"
-            :disabled="canUpdate(row.status)"
+            :disabled="canUpdateCheckOrder(scope.row.status)"
             placement="top"
           >
             <span>
               <el-button
                 v-hasPermi="['wms:check-order:update']"
-                :disabled="!canUpdate(row.status)"
+                :disabled="!canUpdateCheckOrder(scope.row.status)"
                 link
                 type="primary"
-                @click="openForm('update', row.id)"
+                @click="openForm('update', scope.row.id)"
               >
                 修改
               </el-button>
             </span>
           </el-tooltip>
           <el-tooltip
-            :content="getDeleteTip(row.status)"
+            :content="getCheckOrderDeleteTip(scope.row.status)"
-            :disabled="canDelete(row.status)"
+            :disabled="canDeleteCheckOrder(scope.row.status)"
             placement="top"
           >
             <span>
               <el-button
                 v-hasPermi="['wms:check-order:delete']"
-                :disabled="!canDelete(row.status)"
+                :disabled="!canDeleteCheckOrder(scope.row.status)"
                 link
                 type="danger"
-                @click="handleDelete(row.id)"
+                @click="handleDelete(scope.row.id)"
               >
                 删除
               </el-button>
@@ -357,13 +365,14 @@
             v-hasPermi="['wms:check-order:query']"
             link
             type="primary"
-            @click="handlePrint(row.id)"
+            @click="handlePrint(scope.row.id)"
           >
             打印
           </el-button>
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页 -->
     <Pagination
       v-model:limit="queryParams.pageSize"
       v-model:page="queryParams.pageNo"
@@ -372,6 +381,7 @@
     />
   </ContentWrap>
 
+  <!-- 表单弹窗：添加/修改 -->
   <CheckOrderForm ref="formRef" @success="getList" />
   <CheckOrderDetail ref="detailRef" />
   <CheckOrderPrint ref="printRef" />
@@ -405,8 +415,8 @@ import download from '@/utils/download'
 /** WMS 盘库单 */
 defineOptions({ name: 'WmsCheckOrder' })
 
-const message = useMessage()
+const message = useMessage() // 消息弹窗
-const { t } = useI18n()
+const { t } = useI18n() // 国际化
 
 type TableColumnKey = 'no' | 'status' | 'warehouse' | 'quantityAmount' | 'operateInfo' | 'remark'
 
@@ -428,9 +438,9 @@ const checkedTableColumns = ref<TableColumnKey[]>([
 ])
 const isTableColumnVisible = (column: TableColumnKey) => checkedTableColumns.value.includes(column)
 
-const loading = ref(true)
+const loading = ref(true) // 列表的加载中
-const list = ref<CheckOrderVO[]>([])
+const list = ref<CheckOrderVO[]>([]) // 列表的数据
-const total = ref(0)
+const total = ref(0) // 列表的总页数
 const getDefaultQueryParams = () => ({
   pageNo: 1,
   pageSize: 10,
@@ -450,27 +460,50 @@ const getDefaultQueryParams = () => ({
   updateTime: undefined as string[] | undefined
 })
 const queryParams = reactive(getDefaultQueryParams())
-const queryFormRef = ref()
+const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false)
+const exportLoading = ref(false) // 导出的加载中
-const detailMap = reactive<Record<number, CheckOrderDetailVO[]>>({})
+const detailMap = reactive<Record<number, CheckOrderDetailVO[]>>({}) // 盘库单明细数据
 
-const canUpdate = (status?: number) =>
+/** 是否允许修改盘库单 */
-  status !== undefined && OrderUpdateStatusList.includes(status)
+const canUpdateCheckOrder = (status?: number) => {
-const canDelete = (status?: number) =>
+  return status !== undefined && OrderUpdateStatusList.includes(status)
-  status !== undefined && OrderDeleteStatusList.includes(status)
+}
-const getUpdateTip = (status?: number) => {
+
-  if (status === OrderStatusEnum.FINISHED) return '已盘库，无法修改'
+/** 是否允许删除盘库单 */
-  if (status === OrderStatusEnum.CANCELED) return '已作废，无法修改'
+const canDeleteCheckOrder = (status?: number) => {
+  return status !== undefined && OrderDeleteStatusList.includes(status)
+}
+
+/** 获得盘库单修改禁用提示 */
+const getCheckOrderUpdateTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已盘库，无法修改'
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改'
+  }
   return '当前状态无法修改'
 }
-const getDeleteTip = (status?: number) => {
+
-  if (status === OrderStatusEnum.FINISHED) return '已盘库，无法删除'
+/** 获得盘库单删除禁用提示 */
+const getCheckOrderDeleteTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已盘库，无法删除'
+  }
   return '当前状态无法删除'
 }
-const getDifferencePrice = (row: CheckOrderVO) =>
+
-  roundPrice(Number(row.actualPrice || 0) - Number(row.totalPrice || 0))
+/** 计算盘库单盈亏金额 */
-const getDetailDifferenceQuantity = (detail: CheckOrderDetailVO) =>
+const getDifferencePrice = (row: CheckOrderVO) => {
-  Number(detail.checkQuantity || 0) - Number(detail.quantity || 0)
+  return roundPrice(Number(row.actualPrice || 0) - Number(row.totalPrice || 0))
+}
+
+/** 计算明细盈亏数量 */
+const getDetailDifferenceQuantity = (detail: CheckOrderDetailVO) => {
+  return Number(detail.checkQuantity || 0) - Number(detail.quantity || 0)
+}
+
+/** 计算明细实际金额 */
 const getDetailActualPrice = (detail: CheckOrderDetailVO) => {
   if (
     detail.checkQuantity === undefined ||
@@ -482,6 +515,8 @@ const getDetailActualPrice = (detail: CheckOrderDetailVO) => {
   }
   return roundPrice(Number(detail.checkQuantity) * Number(detail.price))
 }
+
+/** 计算明细盈亏金额 */
 const getDetailDifferencePrice = (detail: CheckOrderDetailVO) => {
   if (detail.price === undefined || detail.price === null) {
     return undefined
@@ -489,6 +524,7 @@ const getDetailDifferencePrice = (detail: CheckOrderDetailVO) => {
   return roundPrice(getDetailDifferenceQuantity(detail) * Number(detail.price))
 }
 
+/** 查询盘库单列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -499,44 +535,76 @@ const getList = async () => {
     loading.value = false
   }
 }
+
+/** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
+
+/** 重置按钮操作 */
 const resetQuery = () => {
   Object.assign(queryParams, getDefaultQueryParams())
   handleQuery()
 }
-const handleExpandChange = async (row: CheckOrderVO) => {
+
-  if (!row.id || detailMap[row.id]) return
+/** 展开明细 */
+const handleExpandChange = async (row: CheckOrderVO, expandedRows: CheckOrderVO[]) => {
+  if (!row.id || !expandedRows.some((item) => item.id === row.id)) {
+    return
+  }
+  delete detailMap[row.id]
   detailMap[row.id] = await CheckOrderApi.getCheckOrderDetailListByOrderId(row.id)
 }
 
+/** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => formRef.value.open(type, id)
+const openForm = (type: string, id?: number) => {
-const detailRef = ref()
+  formRef.value.open(type, id)
-const openDetail = (id: number) => detailRef.value.open(id)
+}
-const printRef = ref()
-const handlePrint = (id: number) => printRef.value.print(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 CheckOrderApi.deleteCheckOrder(id)
     message.success(t('common.delSuccess'))
+    // 刷新列表
     await getList()
   } catch {}
 }
+
+/** 导出按钮操作 */
 const handleExport = async () => {
   try {
+    // 导出的二次确认
     await message.exportConfirm()
+    // 发起导出
     exportLoading.value = true
     const data = await CheckOrderApi.exportCheckOrder(queryParams)
     download.excel(data, '盘库单.xls')
+  } catch {
   } finally {
     exportLoading.value = false
   }
 }
 
-onMounted(() => getList())
+/** 初始化 */
+onMounted(async () => {
+  await getList()
+})
 </script>

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

@@ -1,12 +1,13 @@
 <!-- WMS 移库单 -->
 <template>
   <ContentWrap>
+    <!-- 搜索工作栏 -->
     <el-form
       ref="queryFormRef"
       :inline="true"
       :model="queryParams"
       class="-mb-15px"
-      label-width="90px"
+      label-width="80px"
     >
       <el-form-item label="移库单号" prop="no">
         <el-input
@@ -172,6 +173,7 @@
     </el-form>
   </ContentWrap>
 
+  <!-- 移库单列表 -->
   <ContentWrap>
     <el-table
       v-loading="loading"
@@ -182,42 +184,48 @@
       @expand-change="handleExpandChange"
     >
       <el-table-column type="expand" width="48">
-        <template #default="{ row }">
+        <template #default="scope">
-          <el-table :data="detailMap[row.id] || []" border>
+          <el-table :data="detailMap[scope.row.id] || []" border>
             <el-table-column label="商品信息" min-width="220">
-              <template #default="{ row: detail }">
+              <template #default="detailScope">
-                <div>{{ detail.itemName || '-' }}</div>
+                <div>{{ detailScope.row.itemName || '-' }}</div>
-                <div v-if="detail.itemCode" class="text-12px text-gray-500">
+                <div v-if="detailScope.row.itemCode" class="text-12px text-gray-500">
-                  商品编号：{{ detail.itemCode }}
+                  商品编号：{{ detailScope.row.itemCode }}
                 </div>
               </template>
             </el-table-column>
             <el-table-column label="规格信息" min-width="220">
-              <template #default="{ row: detail }">
+              <template #default="detailScope">
-                <div>{{ detail.skuName || '-' }}</div>
+                <div>{{ detailScope.row.skuName || '-' }}</div>
-                <div v-if="detail.skuCode" class="text-12px text-gray-500">
+                <div v-if="detailScope.row.skuCode" class="text-12px text-gray-500">
-                  规格编号：{{ detail.skuCode }}
+                  规格编号：{{ detailScope.row.skuCode }}
                 </div>
               </template>
             </el-table-column>
             <el-table-column align="right" label="移库数量" width="120">
-              <template #default="{ row: detail }">{{ formatQuantity(detail.quantity) }}</template>
+              <template #default="detailScope">
+                {{ formatQuantity(detailScope.row.quantity) }}
+              </template>
             </el-table-column>
             <el-table-column align="right" label="单价(元)" width="120">
-              <template #default="{ row: detail }">{{ formatPrice(detail.price) || '-' }}</template>
+              <template #default="detailScope">
+                {{ formatPrice(detailScope.row.price) || '-' }}
+              </template>
             </el-table-column>
             <el-table-column align="right" label="金额(元)" width="120">
-              <template #default="{ row: detail }">{{
+              <template #default="detailScope">
-                formatPrice(getDetailTotalPrice(detail)) || '-'
+                {{ formatPrice(getDetailTotalPrice(detailScope.row)) || '-' }}
-              }}</template>
+              </template>
             </el-table-column>
           </el-table>
         </template>
       </el-table-column>
       <el-table-column v-if="isTableColumnVisible('no')" fixed="left" label="单号" width="210">
-        <template #default="{ row }">
+        <template #default="scope">
           单号：
-          <el-button link type="primary" @click="openDetail(row.id)">{{ row.no }}</el-button>
+          <el-button link type="primary" @click="openDetail(scope.row.id)">
+            {{ scope.row.no }}
+          </el-button>
         </template>
       </el-table-column>
       <el-table-column
@@ -227,8 +235,8 @@
         label="移库状态"
         width="110"
       >
-        <template #default="{ row }">
+        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.WMS_ORDER_STATUS" :value="row.status" />
+          <dict-tag :type="DICT_TYPE.WMS_ORDER_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column
@@ -236,8 +244,8 @@
         label="来源仓库"
         min-width="180"
       >
-        <template #default="{ row }">
+        <template #default="scope">
-          {{ row.sourceWarehouseName || '-' }}
+          {{ scope.row.sourceWarehouseName || '-' }}
         </template>
       </el-table-column>
       <el-table-column
@@ -245,8 +253,8 @@
         label="目标仓库"
         min-width="180"
       >
-        <template #default="{ row }">
+        <template #default="scope">
-          {{ row.targetWarehouseName || '-' }}
+          {{ scope.row.targetWarehouseName || '-' }}
         </template>
       </el-table-column>
       <el-table-column
@@ -254,26 +262,26 @@
         label="总数量/总金额(元)"
         min-width="180"
       >
-        <template #default="{ row }">
+        <template #default="scope">
           <div class="flex items-center justify-between">
             <span>数量：</span>
-            <span>{{ formatQuantity(row.totalQuantity) }}</span>
+            <span>{{ formatQuantity(scope.row.totalQuantity) }}</span>
           </div>
           <div class="flex items-center justify-between">
             <span>金额：</span>
-            <span>{{ formatPrice(row.totalPrice) }}</span>
+            <span>{{ formatPrice(scope.row.totalPrice) }}</span>
           </div>
         </template>
       </el-table-column>
       <el-table-column v-if="isTableColumnVisible('operateInfo')" label="操作信息" min-width="280">
-        <template #default="{ row }">
+        <template #default="scope">
           <div>
-            创建：{{ formatNullableDate(row.createTime) }} /
+            创建：{{ formatNullableDate(scope.row.createTime) }} /
-            {{ row.creatorName || row.creator || '-' }}
+            {{ scope.row.creatorName || scope.row.creator || '-' }}
           </div>
           <div>
-            更新：{{ formatNullableDate(row.updateTime) }} /
+            更新：{{ formatNullableDate(scope.row.updateTime) }} /
-            {{ row.updaterName || row.updater || '-' }}
+            {{ scope.row.updaterName || scope.row.updater || '-' }}
           </div>
         </template>
       </el-table-column>
@@ -284,36 +292,36 @@
         prop="remark"
       />
       <el-table-column align="center" fixed="right" label="操作" width="150">
-        <template #default="{ row }">
+        <template #default="scope">
           <el-tooltip
-            :content="getUpdateTip(row.status)"
+            :content="getMovementOrderUpdateTip(scope.row.status)"
-            :disabled="canUpdate(row.status)"
+            :disabled="canUpdateMovementOrder(scope.row.status)"
             placement="top"
           >
             <span>
               <el-button
                 v-hasPermi="['wms:movement-order:update']"
-                :disabled="!canUpdate(row.status)"
+                :disabled="!canUpdateMovementOrder(scope.row.status)"
                 link
                 type="primary"
-                @click="openForm('update', row.id)"
+                @click="openForm('update', scope.row.id)"
               >
                 修改
               </el-button>
             </span>
           </el-tooltip>
           <el-tooltip
-            :content="getDeleteTip(row.status)"
+            :content="getMovementOrderDeleteTip(scope.row.status)"
-            :disabled="canDelete(row.status)"
+            :disabled="canDeleteMovementOrder(scope.row.status)"
             placement="top"
           >
             <span>
               <el-button
                 v-hasPermi="['wms:movement-order:delete']"
-                :disabled="!canDelete(row.status)"
+                :disabled="!canDeleteMovementOrder(scope.row.status)"
                 link
                 type="danger"
-                @click="handleDelete(row.id)"
+                @click="handleDelete(scope.row.id)"
               >
                 删除
               </el-button>
@@ -322,6 +330,7 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页 -->
     <Pagination
       v-model:limit="queryParams.pageSize"
       v-model:page="queryParams.pageNo"
@@ -330,6 +339,7 @@
     />
   </ContentWrap>
 
+  <!-- 表单弹窗：添加/修改 -->
   <MovementOrderForm ref="formRef" @success="getList" />
   <MovementOrderDetail ref="detailRef" />
 </template>
@@ -359,8 +369,8 @@ import download from '@/utils/download'
 /** WMS 移库单 */
 defineOptions({ name: 'WmsMovementOrder' })
 
-const message = useMessage()
+const message = useMessage() // 消息弹窗
-const { t } = useI18n()
+const { t } = useI18n() // 国际化
 
 type TableColumnKey =
   | 'no'
@@ -391,9 +401,9 @@ const checkedTableColumns = ref<TableColumnKey[]>([
 ])
 const isTableColumnVisible = (column: TableColumnKey) => checkedTableColumns.value.includes(column)
 
-const loading = ref(true)
+const loading = ref(true) // 列表的加载中
-const list = ref<MovementOrderVO[]>([])
+const list = ref<MovementOrderVO[]>([]) // 列表的数据
-const total = ref(0)
+const total = ref(0) // 列表的总页数
 const getDefaultQueryParams = () => ({
   pageNo: 1,
   pageSize: 10,
@@ -412,24 +422,40 @@ const getDefaultQueryParams = () => ({
   updateTime: undefined as string[] | undefined
 })
 const queryParams = reactive(getDefaultQueryParams())
-const queryFormRef = ref()
+const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false)
+const exportLoading = ref(false) // 导出的加载中
-const detailMap = reactive<Record<number, MovementOrderDetailVO[]>>({})
+const detailMap = reactive<Record<number, MovementOrderDetailVO[]>>({}) // 移库单明细数据
 
-const canUpdate = (status?: number) =>
+/** 是否允许修改移库单 */
-  status !== undefined && OrderUpdateStatusList.includes(status)
+const canUpdateMovementOrder = (status?: number) => {
-const canDelete = (status?: number) =>
+  return status !== undefined && OrderUpdateStatusList.includes(status)
-  status !== undefined && OrderDeleteStatusList.includes(status)
+}
-const getUpdateTip = (status?: number) => {
+
-  if (status === OrderStatusEnum.FINISHED) return '已移库，无法修改'
+/** 是否允许删除移库单 */
-  if (status === OrderStatusEnum.CANCELED) return '已作废，无法修改'
+const canDeleteMovementOrder = (status?: number) => {
+  return status !== undefined && OrderDeleteStatusList.includes(status)
+}
+
+/** 获得移库单修改禁用提示 */
+const getMovementOrderUpdateTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已移库，无法修改'
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改'
+  }
   return '当前状态无法修改'
 }
-const getDeleteTip = (status?: number) => {
+
-  if (status === OrderStatusEnum.FINISHED) return '已移库，无法删除'
+/** 获得移库单删除禁用提示 */
+const getMovementOrderDeleteTip = (status?: number) => {
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已移库，无法删除'
+  }
   return '当前状态无法删除'
 }
 
+/** 查询移库单列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -440,48 +466,78 @@ const getList = async () => {
     loading.value = false
   }
 }
+
+/** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
+
+/** 重置按钮操作 */
 const resetQuery = () => {
   Object.assign(queryParams, getDefaultQueryParams())
   handleQuery()
 }
+
+/** 计算明细金额 */
 const getDetailTotalPrice = (detail: MovementOrderDetailVO) => {
   if (!detail.quantity || detail.price === undefined || detail.price === null) {
     return undefined
   }
   return Number(detail.quantity) * Number(detail.price)
 }
-const handleExpandChange = async (row: MovementOrderVO) => {
+
-  if (!row.id || detailMap[row.id]) return
+/** 展开明细 */
+const handleExpandChange = async (row: MovementOrderVO, expandedRows: MovementOrderVO[]) => {
+  if (!row.id || !expandedRows.some((item) => item.id === row.id)) {
+    return
+  }
+  delete detailMap[row.id]
   detailMap[row.id] = await MovementOrderApi.getMovementOrderDetailListByOrderId(row.id)
 }
 
+/** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => formRef.value.open(type, id)
+const openForm = (type: string, id?: number) => {
-const detailRef = ref()
+  formRef.value.open(type, id)
-const openDetail = (id: number) => detailRef.value.open(id)
+}
 
+/** 查看移库单详情 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
+/** 删除移库单 */
 const handleDelete = async (id: number) => {
   try {
+    // 删除的二次确认
     await message.delConfirm()
+    // 发起删除
     await MovementOrderApi.deleteMovementOrder(id)
     message.success(t('common.delSuccess'))
+    // 刷新列表
     await getList()
   } catch {}
 }
+
+/** 导出按钮操作 */
 const handleExport = async () => {
   try {
+    // 导出的二次确认
     await message.exportConfirm()
+    // 发起导出
     exportLoading.value = true
     const data = await MovementOrderApi.exportMovementOrder(queryParams)
     download.excel(data, '移库单.xls')
+  } catch {
   } finally {
     exportLoading.value = false
   }
 }
 
-onMounted(() => getList())
+/** 初始化 */
+onMounted(async () => {
+  await getList()
+})
 </script>

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

@@ -477,7 +477,7 @@ const getDefaultQueryParams = () => ({
 const queryParams = reactive(getDefaultQueryParams())
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
-const detailMap = reactive<Record<number, ReceiptOrderDetailVO[]>>({}) // 入库单明细缓存
+const detailMap = reactive<Record<number, ReceiptOrderDetailVO[]>>({}) // 入库单明细数据
 
 /** 是否允许修改入库单 */
 const canUpdateReceiptOrder = (status?: number) => {
@@ -546,10 +546,11 @@ const getDetailTotalPrice = (detail: ReceiptOrderDetailVO) => {
 }
 
 /** 展开明细 */
-const handleExpandChange = async (row: ReceiptOrderVO) => {
+const handleExpandChange = async (row: ReceiptOrderVO, expandedRows: ReceiptOrderVO[]) => {
-  if (!row.id || detailMap[row.id]) {
+  if (!row.id || !expandedRows.some((item) => item.id === row.id)) {
     return
   }
+  delete detailMap[row.id]
   detailMap[row.id] = await ReceiptOrderApi.getReceiptOrderDetailListByOrderId(row.id)
 }
 

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

@@ -477,7 +477,7 @@ const getDefaultQueryParams = () => ({
 const queryParams = reactive(getDefaultQueryParams())
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
-const detailMap = reactive<Record<number, ShipmentOrderDetailVO[]>>({}) // 出库单明细缓存
+const detailMap = reactive<Record<number, ShipmentOrderDetailVO[]>>({}) // 出库单明细数据
 
 /** 是否允许修改出库单 */
 const canUpdateShipmentOrder = (status?: number) => {
@@ -546,10 +546,11 @@ const getDetailTotalPrice = (detail: ShipmentOrderDetailVO) => {
 }
 
 /** 展开明细 */
-const handleExpandChange = async (row: ShipmentOrderVO) => {
+const handleExpandChange = async (row: ShipmentOrderVO, expandedRows: ShipmentOrderVO[]) => {
-  if (!row.id || detailMap[row.id]) {
+  if (!row.id || !expandedRows.some((item) => item.id === row.id)) {
     return
   }
+  delete detailMap[row.id]
   detailMap[row.id] = await ShipmentOrderApi.getShipmentOrderDetailListByOrderId(row.id)
 }