feat: 将创建入库单抽取为组件

src/views/warehouse/components/ReceiptProductDialog.vue

+<template>
+  <ElDialog
+    :model-value="visible"
+    :title="title"
+    width="85%"
+    :close-on-click-modal="false"
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <div class="dialog-form">
+      <ElForm
+        ref="editFormRef"
+        :model="editForm"
+        :rules="rules"
+        inline
+        label-width="90px"
+      >
+        <ElFormItem label="入库单号" prop="account">
+          <ElInput :model-value="editForm.inNo" placeholder="系统自动生成" clearable disabled />
+        </ElFormItem>
+        <ElFormItem label="工厂：" prop="factoryCode">
+          <span>{{ editForm.factoryCode }}</span>
+        </ElFormItem>
+        <ElFormItem label="仓库" prop="warehouseId" required>
+          <ElSelect
+            v-model="warehouseIdModel"
+            clearable
+            :disabled="disableWarehouse"
+            placeholder="请选择仓库"
+            style="width: 160px"
+            @change="emit('warehouse-change', warehouseIdModel)"
+          >
+            <ElOption
+              v-for="item in warehouseList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="备注" prop="remark" style="width: 45%">
+          <ElInput v-model="remarkModel" placeholder="请输入备注" clearable />
+        </ElFormItem>
+      </ElForm>
+      <ElTable
+        size="small"
+        :data="otherPurchaseData"
+        height="500px"
+        border
+        @selection-change="emit('selection-change', $event)"
+      >
+        <ElTableColumn
+          type="selection"
+          width="70"
+          header-align="center"
+          align="center"
+        />
+        <ElTableColumn
+          show-overflow-tooltip
+          width="60"
+          align="center"
+          label="序号"
+          type="index"
+        />
+        <ElTableColumn
+          show-overflow-tooltip
+          align="center"
+          width="100"
+          label="SKU图片"
+          prop="skuImage"
+        >
+          <template #default="{ row }">
+            <ImageView :src="row.skuImage" width="40px" height="40px" />
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          show-overflow-tooltip
+          align="center"
+          width="140"
+          label="库存SKU"
+          prop="warehouseSku"
+        />
+        <ElTableColumn
+          show-overflow-tooltip
+          align="center"
+          width="160"
+          label="商品名称"
+          prop="skuName"
+        />
+        <ElTableColumn
+          show-overflow-tooltip
+          align="center"
+          label="款号"
+          prop="productNo"
+        />
+        <ElTableColumn align="center" label="入库数量" prop="buyStored">
+          <template #default="{ row }">
+            <el-input
+              v-model.number="row.buyStored"
+              placeholder="入库数量"
+              style="width: 120px"
+              clearable
+              size="small"
+              @input="emit('set-cost-price', row)"
+            />
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          align="center"
+          width="80"
+          label="币种"
+          prop="currencyName"
+        />
+        <ElTableColumn
+          width="100"
+          align="center"
+          label="成本价"
+          prop="costPrice"
+        />
+        <ElTableColumn
+          align="center"
+          width="100"
+          label="总成本"
+          prop="totalPrice"
+        />
+        <ElTableColumn align="center" label="库位" prop="locationCode">
+          <template #default="{ row }">
+            <ElSelect
+              v-model="row.locationId"
+              clearable
+              placeholder="请输入库位"
+              style="width: 120px"
+              filterable
+              @change="emit('location-change', row.locationId, row)"
+            >
+              <ElOption
+                v-for="item in locationList"
+                :key="item.locationId"
+                :label="item.locationCode"
+                :value="item.locationId"
+              />
+            </ElSelect>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          align="center"
+          width="100"
+          label="所属客户"
+          prop="userMark"
+        />
+        <ElTableColumn
+          show-overflow-tooltip
+          align="center"
+          width="140"
+          label="备注"
+          prop="remark"
+        >
+          <template #default="{ row }">
+            <ElInput v-model.trim="row.remark" clearable size="small" />
+          </template>
+        </ElTableColumn>
+      </ElTable>
+    </div>
+    <template #footer>
+      <div class="product-dialog-footer">
+        <div style="display: flex; align-items: center">
+          <span
+            v-if="showUserMarkFilter"
+            style="margin-right: 10px; font-style: 13px; color: gray"
+            >搜索：</span
+          >
+          <el-select
+            v-if="showUserMarkFilter"
+            :model-value="userMark"
+            size="small"
+            style="width: 100px"
+            @update:model-value="emit('update:userMark', $event)"
+          >
+            <el-option
+              v-for="user in userMarkList"
+              :key="user.userId"
+              :label="user.userMark"
+              :value="user.userId"
+            />
+          </el-select>
+          <el-input
+            v-if="showUserMarkFilter"
+            :model-value="selectSku"
+            placeholder="库存SKU"
+            style="width: 200px; margin: 0 10px"
+            clearable
+            size="small"
+            @update:model-value="emit('update:selectSku', $event)"
+          />
+          <el-popover placement="top-start" width="1200" trigger="click">
+            <div v-if="skuData.length > 0" style="height: 50vh">
+              <ElTable size="small" :data="filterSkuData" height="100%" border>
+                <ElTableColumn
+                  show-overflow-tooltip
+                  width="60"
+                  align="center"
+                  label="序号"
+                  type="index"
+                />
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  label="SKU图片"
+                  width="100"
+                  prop="image"
+                >
+                  <template #default="{ row }">
+                    <ImageView :src="row.skuImage" width="40px" height="40px" />
+                  </template>
+                </ElTableColumn>
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  label="商品名称"
+                  width="200"
+                  prop="productName"
+                />
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  width="200"
+                  label="库存SKU"
+                  prop="warehouseSku"
+                />
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  label="款号"
+                  prop="productNo"
+                />
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  label="币种"
+                  width="80"
+                  prop="currencyName"
+                />
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  label="成本价"
+                  width="80"
+                  prop="costPrice"
+                />
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  label="库位"
+                  prop="locationCode"
+                />
+                <ElTableColumn
+                  show-overflow-tooltip
+                  align="center"
+                  label="所属客户"
+                  prop="userMark"
+                />
+                <ElTableColumn
+                  width="80"
+                  align="center"
+                  header-align="center"
+                  label="操作"
+                >
+                  <template #default="{ row }">
+                    <el-icon :size="32" color="#67C23A" class="cursor-pointer">
+                      <CirclePlusFilled @click="emit('sku-add', row)" />
+                    </el-icon>
+                  </template>
+                </ElTableColumn>
+              </ElTable>
+            </div>
+            <template #reference>
+              <el-button
+                type="primary"
+                size="small"
+                style="width: 90px"
+                @click="emit('query-sku')"
+              >
+                查询
+              </el-button>
+            </template>
+          </el-popover>
+          <el-button
+            v-if="showBatchAddButton"
+            style="margin-left: 6px"
+            type="success"
+            size="small"
+            @click="emit('batch-add')"
+          >
+            批量新增
+          </el-button>
+          <el-button
+            type="danger"
+            style="margin-left: 10px"
+            size="small"
+            @click="emit('delete')"
+          >
+            删除
+          </el-button>
+          <el-button
+            v-if="showImportButton"
+            type="primary"
+            style="margin-left: 10px"
+            size="small"
+            @click="emit('import')"
+          >
+            导入
+          </el-button>
+        </div>
+        <div>
+          <el-button
+            size="small"
+            style="margin-left: 10px"
+            @click="emit('update:visible', false)"
+          >
+            取消
+          </el-button>
+          <el-button type="primary" size="small" @click="emit('save')">
+            保存
+          </el-button>
+        </div>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import { CirclePlusFilled } from '@element-plus/icons-vue'
+import { computed, ref } from 'vue'
+import ImageView from '@/components/ImageView.vue'
+import type {
+  InterProductList,
+  InterWarehouseDetail,
+  InterskuList,
+  ILocation,
+} from '@/types/api/warehouse'
+
+interface WarehouseInfo {
+  id?: string | number
+  name: string
+}
+
+interface UserMark {
+  userId: number
+  userMark: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    title: string
+    disableWarehouse?: boolean
+    showUserMarkFilter?: boolean
+    showBatchAddButton?: boolean
+    showImportButton?: boolean
+    editForm: InterWarehouseDetail
+    rules: Record<string, unknown>
+    warehouseList: WarehouseInfo[]
+    otherPurchaseData: InterProductList[]
+    locationList: ILocation[]
+    userMarkList: UserMark[]
+    userMark: number
+    selectSku: string
+    skuData: InterskuList[]
+    filterSkuData: InterskuList[]
+  }>(),
+  {
+    disableWarehouse: false,
+    showUserMarkFilter: true,
+    showBatchAddButton: true,
+    showImportButton: true,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'update:userMark', value: number): void
+  (e: 'update:selectSku', value: string): void
+  (e: 'update:remark', value: string): void
+  (e: 'update:warehouseId', value: number | string | undefined): void
+  (e: 'warehouse-change', value: number | string | undefined): void
+  (e: 'selection-change', value: InterProductList[]): void
+  (e: 'set-cost-price', value: InterProductList): void
+  (
+    e: 'location-change',
+    value: number | null | undefined,
+    row: InterProductList,
+  ): void
+  (e: 'query-sku'): void
+  (e: 'sku-add', value: InterskuList): void
+  (e: 'batch-add'): void
+  (e: 'delete'): void
+  (e: 'import'): void
+  (e: 'save'): void
+}>()
+
+const editFormRef = ref()
+const warehouseIdModel = computed({
+  get: () => props.editForm.warehouseId,
+  set: (value: number | string | undefined) =>
+    emit('update:warehouseId', value),
+})
+const remarkModel = computed({
+  get: () => props.editForm.remark || '',
+  set: (value: string) => emit('update:remark', value.trim()),
+})
+
+const validateForm = async () => {
+  await editFormRef.value?.validate()
+}
+
+defineExpose({
+  validateForm,
+})
+</script>
+
+<style lang="scss" scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.product-dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  margin: 8px 0;
+}
+</style>

src/views/warehouse/hooks/useReceiptProductDialog.ts

+import { computed, ref, type Ref } from 'vue'
+import BigNumber from 'bignumber.js'
+import { ElMessage } from 'element-plus'
+import { getBySkuAndUserMarkApi } from '@/api/warehouse'
+import type {
+  InterProductList,
+  InterWarehouseDetail,
+  InterskuList,
+} from '@/types/api/warehouse'
+
+interface UserMark {
+  userId: number
+  userMark: string
+  userName: string
+}
+
+interface UseReceiptProductDialogOptions {
+  editForm: Ref<InterWarehouseDetail>
+  otherPurchaseData: Ref<InterProductList[]>
+  userMark: Ref<number>
+  batchUserMark: Ref<number>
+  importUserMark: Ref<number>
+  selectSku: Ref<string>
+  userMarkList: Ref<UserMark[]>
+}
+
+export function useReceiptProductDialog(options: UseReceiptProductDialogOptions) {
+  const {
+    editForm,
+    otherPurchaseData,
+    userMark,
+    batchUserMark,
+    importUserMark,
+    selectSku,
+    userMarkList,
+  } = options
+
+  const skuData = ref<InterskuList[]>([])
+
+  const setCostPrice = (item: InterProductList) => {
+    if (item.costPrice !== 0 && !item.costPrice) {
+      ElMessage.warning('商品成本价为空，请完善商品成本价')
+      return
+    }
+    const buyStored = item.buyStored ?? 0
+    const costPrice = item.costPrice ?? 0
+    const amount = new BigNumber(buyStored).multipliedBy(costPrice).toFixed(2)
+    item.totalPrice = Number(amount)
+  }
+
+  const getUserMarkText = (
+    customerId: number,
+    mode: 'query' | 'create' = 'query',
+  ): string | null => {
+    const item = userMarkList.value.find((e) => e.userId === customerId)
+    if (customerId === 0) {
+      return mode === 'query' ? null : ''
+    }
+    return item?.userMark || null
+  }
+
+  const batchAddCommodity = async (
+    sku: string,
+    type: '1' | '2' | '3',
+  ): Promise<InterskuList[]> => {
+    if (!editForm.value.warehouseId) {
+      ElMessage.error('请选择仓库')
+      return []
+    }
+    try {
+      let userValue: number = 0
+      if (type === '1') {
+        userValue = userMark.value
+      } else if (type === '2') {
+        userValue = batchUserMark.value
+      } else if (type === '3') {
+        userValue = importUserMark.value
+      }
+      const user = getUserMarkText(userValue, 'query')
+      const res = await getBySkuAndUserMarkApi(editForm.value.warehouseId, sku, user)
+      const arr: InterskuList[] = res.data || []
+      const ids: Record<string, boolean> = {}
+      for (const item of otherPurchaseData.value) {
+        if (item.warehouseSku !== undefined) {
+          ids[item.warehouseSku] = true
+        }
+      }
+      return arr.filter((currentItem: InterskuList) => {
+        return currentItem.sku === undefined || !ids[currentItem.sku]
+      })
+    } catch (e) {
+      console.error(e)
+      return []
+    }
+  }
+
+  const selectbySku = async () => {
+    if (!editForm.value.warehouseId) return ElMessage.error('请选择仓库')
+    try {
+      const user = getUserMarkText(userMark.value, 'query')
+      const res = await getBySkuAndUserMarkApi(
+        editForm.value.warehouseId,
+        selectSku.value,
+        user,
+      )
+      skuData.value = res.data || []
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  const skudblclick = (val: InterskuList) => {
+    const {
+      locationCode = '',
+      costPrice = null,
+      productNo = '',
+      warehouseSku = '',
+      productName = '',
+      skuImage = '',
+      locationId = null,
+      currencyName = '',
+      currencyCode = null,
+    } = val || {}
+
+    const lastItem =
+      otherPurchaseData.value[otherPurchaseData.value.length - 1] || null
+    if (lastItem && lastItem.currencyName) {
+      if (!currencyName || currencyName !== lastItem.currencyName) {
+        ElMessage.error('添加的商品币种需一致')
+        return
+      }
+    }
+    const item = userMarkList.value.find((e) => e.userId === userMark.value)
+    otherPurchaseData.value = [
+      ...JSON.parse(JSON.stringify(otherPurchaseData.value)),
+      {
+        skuImage,
+        warehouseSku,
+        customerId: userMark.value !== 0 ? userMark.value : null,
+        customerName: userMark.value !== 0 ? item?.userName || '' : null,
+        userMark: userMark.value !== 0 ? item?.userMark : null,
+        skuName: productName,
+        productNo,
+        locationCode: locationCode ?? '',
+        locationId: locationId ?? null,
+        costPrice,
+        buyStored: null,
+        totalPrice: null,
+        currencyName,
+        currencyCode,
+      },
+    ]
+
+    const skuSet = new Set(
+      otherPurchaseData.value.map((item: InterProductList) => item.warehouseSku),
+    )
+    skuData.value = skuData.value.filter((item: InterskuList) => !skuSet.has(item.sku))
+  }
+
+  const filterSkuData = computed(() => {
+    const skuList = otherPurchaseData.value.map((el) => el.warehouseSku)
+    const item = userMarkList.value.find((u) => u.userId === userMark.value)
+    return skuData.value
+      .filter((el) => !skuList.includes(el.warehouseSku))
+      .map((e) => {
+        return {
+          ...e,
+          userMark: userMark.value === 0 ? '' : item?.userMark,
+        }
+      })
+  })
+
+  return {
+    skuData,
+    setCostPrice,
+    batchAddCommodity,
+    selectbySku,
+    skudblclick,
+    filterSkuData,
+  }
+}

src/views/warehouse/receiptDoc.vue

@@ -490,327 +490,37 @@
       </div>
     </div>
   </ElDialog>
-  <ElDialog
-    v-model="newDialogVisible"
+  <ReceiptProductDialog
+    ref="receiptProductDialogRef"
+    v-model:visible="newDialogVisible"
+    v-model:user-mark="userMark"
+    v-model:select-sku="selectSku"
     :title="formId ? '编辑' : '新增'"
-    width="85%"
-    :close-on-click-modal="false"
-  >
-    <div class="dialog-form">
-      <ElForm
-        ref="editFormRef"
-        :model="editForm"
+    :disable-warehouse="!!formId"
+    :edit-form="editForm"
     :rules="rules"
-        inline
-        label-width="90px"
-      >
-        <ElFormItem label="入库单号" prop="account">
-          <ElInput v-model.trim="editForm.inNo" clearable disabled />
-        </ElFormItem>
-        <ElFormItem label="工厂：" prop="factoryCode">
-          <span>{{ editForm.factoryCode }}</span>
-        </ElFormItem>
-        <ElFormItem label="仓库" prop="warehouseId" required>
-          <ElSelect
-            v-model="editForm.warehouseId"
-            clearable
-            :disabled="formId"
-            placeholder="请选择仓库"
-            style="width: 160px"
-            @change="handleWarehouseChange(editForm.warehouseId)"
-          >
-            <ElOption
-              v-for="item in warehouseList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></ElOption>
-          </ElSelect>
-        </ElFormItem>
-        <ElFormItem label="备注" prop="remark" style="width: 45%">
-          <ElInput
-            v-model.trim="editForm.remark"
-            placeholder="请输入备注"
-            clearable
-          />
-        </ElFormItem>
-      </ElForm>
-      <ElTable
-        size="small"
-        :data="otherPurchaseData"
-        height="500px"
-        border
+    :warehouse-list="warehouseList"
+    :other-purchase-data="otherPurchaseData"
+    :location-list="locationList"
+    :user-mark-list="userMarkList"
+    :sku-data="skuData"
+    :filter-sku-data="filterSkuData"
+    :show-user-mark-filter="true"
+    :show-batch-add-button="true"
+    :show-import-button="true"
+    @warehouse-change="handleWarehouseChange"
     @selection-change="productSelectionChange"
-      >
-        <ElTableColumn
-          type="selection"
-          width="70"
-          header-align="center"
-          align="center"
-        ></ElTableColumn>
-        <ElTableColumn
-          show-overflow-tooltip
-          width="60"
-          align="center"
-          label="序号"
-          type="index"
-        ></ElTableColumn>
-        <ElTableColumn
-          show-overflow-tooltip
-          align="center"
-          width="100"
-          label="SKU图片"
-          prop="skuImage"
-        >
-          <template #default="{ row }">
-            <ImageView :src="row.skuImage" width="40px" height="40px" />
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          show-overflow-tooltip
-          align="center"
-          width="140"
-          label="库存SKU"
-          prop="warehouseSku"
-        >
-        </ElTableColumn>
-
-        <ElTableColumn
-          show-overflow-tooltip
-          align="center"
-          width="160"
-          label="商品名称"
-          prop="skuName"
-        />
-        <ElTableColumn
-          show-overflow-tooltip
-          align="center"
-          label="款号"
-          prop="productNo"
-        />
-        <ElTableColumn align="center" label="入库数量" prop="buyStored">
-          <template #default="{ row }">
-            <el-input
-              v-model.number="row.buyStored"
-              placeholder="入库数量"
-              style="width: 120px"
-              clearable
-              size="small"
-              @input="setCostPrice(row)"
-            ></el-input>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          align="center"
-          width="80"
-          label="币种"
-          prop="currencyName"
-        />
-        <ElTableColumn
-          width="100"
-          align="center"
-          label="成本价"
-          prop="costPrice"
-        />
-        <ElTableColumn
-          align="center"
-          width="100"
-          label="总成本"
-          prop="totalPrice"
-        />
-        <ElTableColumn align="center" label="库位" prop="locationCode">
-          <template #default="{ row }">
-            <!-- <span v-if="formId&&row.locationCode">{{ row.locationCode }}</span> -->
-            <ElSelect
-              v-model="row.locationId"
-              clearable
-              placeholder="请输入库位"
-              style="width: 120px"
-              filterable
-              @change="handleLocationChange(row.locationId, row)"
-            >
-              <ElOption
-                v-for="item in locationList"
-                :key="item.locationId"
-                :label="item.locationCode"
-                :value="item.locationId"
-              ></ElOption>
-            </ElSelect>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          align="center"
-          width="100"
-          label="所属客户"
-          prop="userMark"
-        />
-        <ElTableColumn
-          show-overflow-tooltip
-          align="center"
-          width="140"
-          label="备注"
-          prop="remark"
-        >
-          <template #default="{ row }">
-            <ElInput v-model.trim="row.remark" clearable size="small" />
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <template #footer>
-      <div class="product-dialog-footer">
-        <div style="display: flex; align-items: center">
-          <span style="margin-right: 10px; font-style: 13px; color: gray"
-            >搜索：</span
-          >
-          <el-select v-model="userMark" size="small" style="width: 100px">
-            <el-option
-              v-for="user in userMarkList"
-              :key="user.userId"
-              :label="user.userMark"
-              :value="user.userId"
-            ></el-option>
-          </el-select>
-          <el-input
-            v-model.trim="selectSku"
-            placeholder="库存SKU"
-            style="width: 200px; margin: 0 10px"
-            clearable
-            size="small"
-          ></el-input>
-          <el-popover placement="top-start" width="1200" trigger="click">
-            <div v-if="skuData.length > 0" style="height: 50vh">
-              <ElTable size="small" :data="filterSkuData" height="100%" border>
-                <ElTableColumn
-                  show-overflow-tooltip
-                  width="60"
-                  align="center"
-                  label="序号"
-                  type="index"
-                />
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  label="SKU图片"
-                  width="100"
-                  prop="image"
-                >
-                  <template #default="{ row }">
-                    <ImageView :src="row.skuImage" width="40px" height="40px" />
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  label="商品名称"
-                  width="200"
-                  prop="productName"
+    @set-cost-price="setCostPrice"
+    @location-change="handleLocationChange"
+    @query-sku="selectbySku"
+    @sku-add="skudblclick"
+    @batch-add="addPurchase"
+    @delete="deleteOtherWarehousing"
+    @import="importData"
+    @update:remark="updateEditRemark"
+    @update:warehouse-id="updateEditWarehouseId"
+    @save="addOtherCurrency"
   />
-
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  width="200"
-                  label="库存SKU"
-                  prop="warehouseSku"
-                />
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  label="款号"
-                  prop="productNo"
-                />
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  label="币种"
-                  width="80"
-                  prop="currencyName"
-                />
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  label="成本价"
-                  width="80"
-                  prop="costPrice"
-                />
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  label="库位"
-                  prop="locationCode"
-                />
-                <ElTableColumn
-                  show-overflow-tooltip
-                  align="center"
-                  label="所属客户"
-                  prop="userMark"
-                />
-                <ElTableColumn
-                  width="80"
-                  align="center"
-                  header-align="center"
-                  label="操作"
-                >
-                  <template #default="{ row }">
-                    <el-icon :size="32" color="#67C23A" class="cursor-pointer">
-                      <CirclePlusFilled @click="skudblclick(row)" />
-                    </el-icon>
-                  </template>
-                </ElTableColumn>
-              </ElTable>
-            </div>
-            <template #reference>
-              <el-button
-                type="primary"
-                size="small"
-                style="width: 90px"
-                @click="selectbySku()"
-              >
-                查询
-              </el-button>
-            </template>
-          </el-popover>
-          <el-button
-            style="margin-left: 6px"
-            type="success"
-            size="small"
-            @click="addPurchase"
-          >
-            批量新增
-          </el-button>
-          <el-button
-            type="danger"
-            style="margin-left: 10px"
-            size="small"
-            @click="deleteOtherWarehousing()"
-          >
-            删除
-          </el-button>
-          <el-button
-            type="primary"
-            style="margin-left: 10px"
-            size="small"
-            @click="importData"
-          >
-            导入
-          </el-button>
-        </div>
-        <div>
-          <el-button
-            size="small"
-            style="margin-left: 10px"
-            @click="newDialogVisible = false"
-          >
-            取消
-          </el-button>
-          <el-button type="primary" size="small" @click="addOtherCurrency()">
-            保存
-          </el-button>
-        </div>
-      </div>
-    </template>
-  </ElDialog>
   <ElDialog
     v-model="exportVisible"
     title="导出选项"
@@ -920,12 +630,13 @@
 
 <script setup lang="ts">
 import { ElMessage, ElRadioGroup, ElTree } from 'element-plus'
-import { CirclePlusFilled } from '@element-plus/icons-vue'
 import splitDiv from '@/components/splitDiv/splitDiv.vue'
 import { ElTable } from 'element-plus'
+import ReceiptProductDialog from './components/ReceiptProductDialog.vue'
 import usePageList from '@/utils/hooks/usePageList'
 import { checkUpdateParams, AnyObject } from '@/utils/hooks/commonUtil'
 import { useValue } from '@/utils/hooks/useValue'
+import { useReceiptProductDialog } from './hooks/useReceiptProductDialog'
 import {
   getInRecordStatusTree,
   warehouseInRecordListPageApi,
@@ -942,9 +653,7 @@ import {
   warehouseInfo,
   InRecordBatchCheckPrintApi,
   factoryWarehouseInventoryPrint,
-  warehouseInRecordExport,
-  getLocalFactoryList,
-  getBySkuAndUserMarkApi,
+  warehouseInRecordExport, getLocalFactoryList,
 } from '@/api/warehouse'
 import { filePath } from '@/api/axios.ts'
 import BigNumber from 'bignumber.js'
@@ -955,7 +664,6 @@ import {
   InterWarehousePage,
   InterWarehouseTree,
   InterProductList,
-  InterskuList,
   ILocation,
   InterWarehouseDetail,
 } from '@/types/api/warehouse'
@@ -1140,18 +848,6 @@ const {
     ).then((res) => res.data),
 })
 
-const setCostPrice = (item: InterProductList) => {
-  if (item.costPrice !== 0 && !item.costPrice) {
-    ElMessage.warning('商品成本价为空，请完善商品成本价')
-    return
-  }
-  if (item) {
-    const buyStored = item.buyStored ?? 0
-    const costPrice = item.costPrice ?? 0
-    const amount = new BigNumber(buyStored).multipliedBy(costPrice).toFixed(2)
-    item.totalPrice = Number(amount)
-  }
-}
 const getTreeNum = async () => {
   try {
     const res = await getInRecordStatusTree()
@@ -1214,48 +910,6 @@ async function handlePrintProductTag() {
   window.open(filePath + res.message, '_blank')
 }
 
-const batchAddCommodity = async (
-  sku: string,
-  type: string,
-): Promise<InterskuList[]> => {
-  if (!editForm.value.warehouseId) {
-    ElMessage.error('请选择仓库')
-    return []
-  }
-  try {
-    let userValue: string | number = ''
-    if (type === '1') {
-      userValue = userMark.value
-    } else if (type === '2') {
-      userValue = batchUserMark.value
-    } else if (type === '3') {
-      userValue = importUserMark.value
-    }
-    const item = userMarkList.value.find((e) => e.userId === userValue)
-    const user = userValue === 0 ? null : item?.userMark
-    const res = await getBySkuAndUserMarkApi(
-      editForm.value.warehouseId,
-      sku,
-      user,
-    )
-    const arr: InterskuList[] = res.data || []
-    const ids: Record<string, boolean> = {}
-    // 过滤掉商品列表已经加了的
-    for (const item of otherPurchaseData.value) {
-      if (item.warehouseSku !== undefined) {
-        ids[item.warehouseSku] = true
-      }
-    }
-    // 使用 filter 方法过滤掉已经存在的 SKU
-    const filteredArr = arr.filter((currentItem: InterskuList) => {
-      return currentItem.sku === undefined || !ids[currentItem.sku]
-    })
-    return filteredArr
-  } catch (e) {
-    console.error(e)
-    return []
-  }
-}
 
 interface InterImportData {
   warehouseSku: string
@@ -1436,74 +1090,6 @@ const rowClick = (row: InterWarehousePage) => {
   currentRow.value = row
   tabsClick()
 }
-const skuData = ref<InterskuList[]>([])
-const selectbySku = async () => {
-  if (!editForm.value.warehouseId) return ElMessage.error('请选择仓库')
-  try {
-    const item = userMarkList.value.find((e) => e.userId === userMark.value)
-    const user = userMark.value === 0 ? null : item?.userMark
-    const res = await getBySkuAndUserMarkApi(
-      editForm.value.warehouseId,
-      selectSku.value,
-      user,
-    )
-    skuData.value = res.data || []
-  } catch (e) {
-    console.error(e)
-  }
-}
-const skudblclick = (val: InterskuList) => {
-  // 使用可选链和空值合并运算符处理可能的null值
-  const {
-    locationCode = '',
-    costPrice = null,
-    productNo = '',
-    warehouseSku = '',
-    productName = '',
-    skuImage = '',
-    locationId = null,
-    currencyName = '',
-    currencyCode = null,
-  } = val || {}
-
-  // 币种一致性校验
-  const lastItem =
-    otherPurchaseData.value[otherPurchaseData.value.length - 1] || null
-  if (lastItem && lastItem.currencyName) {
-    if (!currencyName || currencyName !== lastItem.currencyName) {
-      ElMessage.error(`添加的商品币种需一致`)
-      return
-    }
-  }
-  const item = userMarkList.value.find((e) => e.userId === userMark.value)
-  otherPurchaseData.value = [
-    ...JSON.parse(JSON.stringify(otherPurchaseData.value)),
-    {
-      skuImage,
-      warehouseSku,
-      customerId: userMark.value !== 0 ? userMark.value : null,
-      customerName: userMark.value !== 0 ? item?.userName || '' : null,
-      userMark: userMark.value !== 0 ? item?.userMark : null,
-      skuName: productName,
-      productNo,
-      locationCode: locationCode ?? '', // 确保空值处理
-      locationId: locationId ?? null, // 确保空值处理
-      costPrice,
-      buyStored: null,
-      totalPrice: null,
-      currencyName,
-      currencyCode,
-    },
-  ]
-
-  // 使用filter代替forEach+splice，时间复杂度从O(n^2)降到O(n)
-  const skuSet = new Set(
-    otherPurchaseData.value.map((item: InterProductList) => item.warehouseSku),
-  )
-  skuData.value = skuData.value.filter(
-    (item: InterskuList) => !skuSet.has(item.sku),
-  )
-}
 const tabsClick = async () => {
   if (!currentRow.value) {
     detailList.value = []
@@ -1526,11 +1112,35 @@ const [editForm, resetEditForm] = useValue<InterWarehouseDetail>({
   factoryId: 0,
   productList: [],
 })
+const updateEditRemark = (value: string) => {
+  editForm.value.remark = value
+}
+const updateEditWarehouseId = (value: number | string | undefined) => {
+  editForm.value.warehouseId = value
+}
 const newDialogVisible = ref(false)
-const editFormRef = ref()
+const receiptProductDialogRef = ref<{
+  validateForm: () => Promise<void>
+} | null>(null)
 const editForm2 = ref({})
 const formId = ref<number | undefined>(undefined)
 const otherPurchaseData = ref<InterProductList[]>([])
+const {
+  skuData,
+  setCostPrice,
+  batchAddCommodity,
+  selectbySku,
+  skudblclick,
+  filterSkuData,
+} = useReceiptProductDialog({
+  editForm,
+  otherPurchaseData,
+  userMark,
+  batchUserMark,
+  importUserMark,
+  selectSku,
+  userMarkList,
+})
 
 const getUserMark = async () => {
   const { data } = await getLocalFactoryList()
@@ -1699,8 +1309,6 @@ watch(
   },
 )
 const addOtherCurrency = async () => {
-  console.log(11111)
-
   const loading = ElLoading.service({
     fullscreen: true,
     text: '操作中...',
@@ -1708,7 +1316,7 @@ const addOtherCurrency = async () => {
   })
   try {
     try {
-      await editFormRef.value?.validate()
+      await receiptProductDialogRef.value?.validateForm()
     } catch {
       return
     }
@@ -1746,19 +1354,6 @@ const addOtherCurrency = async () => {
   }
 }
 
-const filterSkuData = computed(() => {
-  const skuList = otherPurchaseData.value.map((el) => el.warehouseSku)
-  // console.log(skuList, skuData.value)
-  const item = userMarkList.value.find((u) => u.userId === userMark.value)
-  return skuData.value
-    .filter((el) => !skuList.includes(el.warehouseSku))
-    .map((e) => {
-      return {
-        ...e,
-        userMark: userMark.value === 0 ? '' : item?.userMark,
-      }
-    })
-})
 const addSection = async () => {
   const params = { ...editForm.value }
   params.productList = otherPurchaseData.value
@@ -1974,7 +1569,10 @@ const fetchLocationList = async (query: string) => {
 }
 // 输入2秒后再调用接口(节流)
 // const handleLocationSearch = debounce(fetchLocationList, 2000)
-const handleLocationChange = (val: number, row: InterProductList) => {
+const handleLocationChange = (
+  val: number | null | undefined,
+  row: InterProductList,
+) => {
   const found = locationList.value.find(
     (item: InterProductList) => item.locationId === val,
   )
@@ -2016,10 +1614,6 @@ onMounted(() => {
   text-align: center;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .header-filter-form {
   :deep(.el-form-item) {
     margin-right: 14px;
@@ -2027,12 +1621,6 @@ onMounted(() => {
   }
 }
 
-.product-dialog-footer {
-  display: flex;
-  justify-content: space-between;
-  margin: 8px 0;
-}
-
 $border: solid 1px #ddd;
 
 .send-order-list {