feat: 共享库存接口联调

9ffc5cd7 · qinjianhui · 6f4145aa · 9ffc5cd7 · 9ffc5cd7 · 9ffc5cd7
Commit 9ffc5cd7 authored Jun 30, 2026 by qinjianhui
5 changed files
--- a/src/api/warehouse/warehouseRuleSetting.ts
+++ b/src/api/warehouse/warehouseRuleSetting.ts
-import { BasePaginationData } from '@/types/api'
+import { BasePaginationData, BaseRespData } from '@/types/api'
 import axios from '../axios'
-import { SearchForm, WarehouseRuleSettingData } from '@/types/api/warehouse/warehouseRuleSetting'
+import {
+  EditForm,
+  SearchForm,
+  WarehouseRuleSettingData,
+} from '@/types/api/warehouse/warehouseRuleSetting'
+import { IgoodsType } from '@/views/supply/supplierManagement/types'
 export function getWarehouseRuleSettingListApi(
  data: SearchForm,
  page: number,
  pageSize: number,
 ) {
  return axios.post<never, BasePaginationData<WarehouseRuleSettingData>>(
-    'warehouseRuleSetting/list_page',
+    '/factory/sharedInventoryGroup/list-page',
    { ...data, page, pageSize },
  )
 }
+export function getQuerySpuApi(warehouseSpu: string) {
+  return axios.post<never, BaseRespData<IgoodsType>>(
+    '/factory/sharedInventorySku/query-spu',
+    { warehouseSpu },
+  )
+}
+export function addSharedInventoryGroupApi(
+  data: EditForm,
+) {
+  return axios.post<never, BaseRespData<void>>(
+    '/factory/sharedInventoryGroup/add',
+    data,
+  )
+}
+export function updateSharedInventoryGroupApi(
+  data: EditForm,
+) {
+  return axios.post<never, BaseRespData<void>>(
+    '/factory/sharedInventoryGroup/update',
+    data,
+  )
+}
--- a/src/types/api/warehouse/warehouseRuleSetting.ts
+++ b/src/types/api/warehouse/warehouseRuleSetting.ts
 export interface SearchForm {
-  startTime: string
+  createStartTime: string
-  endTime: string
+  createEndTime: string
-  warehouseSku: string
+  warehouseSpu: string
-  warehouseGroupName: string
+  groupName: string
  status: number
 }
 export interface WarehouseRuleSettingData {
  id?: number
  createTime?: string
-  warehouseSku?: string
+  warehouseSpu?: string
-  warehouseGroupName?: string
+  groupName?: string
  status?: number
+  skuList?: WarehouseRuleSpuItem[]
 }
 export interface WarehouseRuleSpuItem {
-  warehouseSpu: string
+  dataVersion?: number
-  productName: string
+  id?: number
-  spuImage?: string
+  sortOrder?: number
-  sortNo: number
+  warehouseSku?: string
+  warehouseSpu?: string
+  productName?: string
+  imgUrl?: string
 }
 export interface EditForm {
  id?: number
-  warehouseGroupName?: string
+  groupName?: string
-  status?: number
+  status?: boolean
  spuList?: WarehouseRuleSpuItem[]
+  skuList?: WarehouseRuleSpuItem[]
 }
--- a/src/views/warehouse/warehouseRuleSetting/components/EditDialog.vue
+++ b/src/views/warehouse/warehouseRuleSetting/components/EditDialog.vue
@@ -10,13 +10,13 @@
      <div class="section-title">分组基础信息</div>
      <ElFormItem
        label="库存组名称"
-        prop="warehouseGroupName"
+        prop="groupName"
        :rules="[
          { required: true, message: '请输入库存组名称', trigger: 'blur' },
        ]"
      >
        <ElInput
-          v-model="editForm.warehouseGroupName"
+          v-model="editForm.groupName"
          clearable
          placeholder="请输入库存组名称"
          style="width: 100%"
@@ -29,8 +29,8 @@
      >
        <ElSwitch
          v-model="editForm.status"
-          :active-value="1"
+          :active-value="true"
-          :inactive-value="0"
+          :inactive-value="false"
          style="--el-switch-on-color: #42b983"
        />
      </ElFormItem>
@@ -44,7 +44,38 @@
          style="width: 200px"
          @keyup.enter="handleSearchSpu"
        />
-        <ElButton type="primary" @click="handleSearchSpu">查询</ElButton>
+        <ElPopover
+          v-model:visible="popoverVisible"
+          placement="bottom-start"
+          :width="600"
+          trigger="manual"
+          popper-class="spu-search-popover"
+        >
+          <template #reference>
+            <ElButton type="primary" @click="handleSearchSpu"> 查询 </ElButton>
+          </template>
+          <div class="popover-table">
+            <TableView
+              :paginated-data="spuSearchResultList"
+              :columns="spuSearchTableColumns"
+              size="small"
+            >
+              <template #spuImage="{ row }">
+                <ImageView :src="row.imgUrl" width="40px" height="40px" />
+              </template>
+              <template #operation="{ row }">
+                <ElButton
+                  type="success"
+                  circle
+                  size="small"
+                  @click="handleAddSpu(row)"
+                >
+                  <ElIcon><Plus /></ElIcon>
+                </ElButton>
+              </template>
+            </TableView>
+          </div>
+        </ElPopover>
      </div>
      <div class="spu-drag-tip">
        <el-icon style="color: #409eff; font-size: 16px"><Warning /></el-icon
@@ -65,11 +96,11 @@
              @dragover.prevent
              @drop="handleDrop(index)"
            >
-              {{ row.sortNo }}
+              {{ row.sortOrder }}
            </span>
          </template>
          <template #spuImage="{ row }">
-            <ImageView :src="row.spuImage" width="40px" height="40px" />
+            <ImageView :src="row.imgUrl" width="40px" height="40px" />
          </template>
          <template #operation="{ index }">
            <ElButton link type="danger" @click="handleRemoveSpu(index)">
@@ -82,26 +113,29 @@
    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleCancel">取消</ElButton>
-        <ElButton type="primary" :loading="saving" @click="handleSave">
+        <ElButton type="primary" @click="handleSave"> 保存 </ElButton>
-          保存
-        </ElButton>
      </div>
    </template>
  </ElDialog>
 </template>
 <script setup lang="ts">
+import {
+  addSharedInventoryGroupApi,
+  getQuerySpuApi,
+  updateSharedInventoryGroupApi,
+} from '@/api/warehouse/warehouseRuleSetting'
 import ImageView from '@/components/ImageView.vue'
 import TableView from '@/components/TableView.vue'
 import {
  EditForm,
  WarehouseRuleSpuItem,
 } from '@/types/api/warehouse/warehouseRuleSetting'
-import { Warning } from '@element-plus/icons-vue'
+import { Plus, Warning } from '@element-plus/icons-vue'
 import { useWarehouseRuleSettingTableColumns } from '../hooks/useWarehouseRuleSettingTableColumns'
 const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
-  (e: 'saved'): void
+  (e: 'saveSuccess'): void
 }>()
 const props = defineProps<{
  visible: boolean
@@ -117,21 +151,25 @@ const dialogVisible = computed({
 const createDefaultForm = (): EditForm => ({
  id: undefined,
-  warehouseGroupName: '',
+  groupName: '',
-  status: 1,
+  status: true,
  spuList: [],
 })
 const editForm = ref<EditForm>(createDefaultForm())
 const editFormRef = ref()
 const spuSearchKeyword = ref('')
-const saving = ref(false)
+const spuSearchResultList = ref<WarehouseRuleSpuItem[]>([])
+const popoverVisible = ref(false)
 const dragIndex = ref<number | null>(null)
-const { spuTableColumns } = useWarehouseRuleSettingTableColumns()
+const { spuTableColumns, spuSearchTableColumns } =
+  useWarehouseRuleSettingTableColumns()
 const resetFields = () => {
  editForm.value = createDefaultForm()
  spuSearchKeyword.value = ''
+  spuSearchResultList.value = []
+  popoverVisible.value = false
  dragIndex.value = null
  nextTick(() => {
    editFormRef.value?.clearValidate()
@@ -141,7 +179,7 @@ const resetFields = () => {
 const updateSortNo = (list: WarehouseRuleSpuItem[]) => {
  return list.map((item, index) => ({
    ...item,
-    sortNo: index + 1,
+    sortOrder: index + 1,
  }))
 }
@@ -160,8 +198,73 @@ const handleDrop = (index: number) => {
  dragIndex.value = null
 }
-const handleSearchSpu = () => {
+const handleSearchSpu = async () => {
-  // TODO: 调用接口查询库存SPU并添加到列表
+  const keyword = spuSearchKeyword.value.trim()
+  if (!keyword) {
+    ElMessage.warning('请输入库存SPU')
+    popoverVisible.value = false
+    return
+  }
+  const loading = ElLoading.service({
+    lock: true,
+    text: '加载中...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+  try {
+    const res = await getQuerySpuApi(keyword)
+    if (res.code !== 200) {
+      popoverVisible.value = false
+      spuSearchKeyword.value = ''
+      return
+    }
+    spuSearchResultList.value = [
+      {
+        warehouseSpu: res.data.sku,
+        imgUrl: res.data.imgUrl,
+        productName: res.data.name,
+        id: Number(res.data.id) ?? undefined,
+      },
+    ]
+    if (spuSearchResultList.value.length === 0) {
+      ElMessageBox.alert('未查询到SPU数据', '提示', {
+        type: 'warning',
+      })
+      popoverVisible.value = false
+    } else {
+      popoverVisible.value = true
+    }
+  } catch (error) {
+    console.error(error)
+    spuSearchKeyword.value = ''
+    popoverVisible.value = false
+  } finally {
+    loading.close()
+  }
+}
+const handleAddSpu = (row: WarehouseRuleSpuItem) => {
+  if (
+    editForm.value.spuList?.some(
+      (item) => item.warehouseSpu === row.warehouseSpu,
+    )
+  ) {
+    ElMessage.warning('该SPU已添加')
+    return
+  }
+  editForm.value.spuList = updateSortNo([
+    ...(editForm.value.spuList ?? []),
+    {
+      warehouseSpu: row.warehouseSpu,
+      productName: row.productName,
+      imgUrl: row.imgUrl,
+    },
+  ])
+  spuSearchResultList.value = spuSearchResultList.value.filter(
+    (item) => item.warehouseSpu !== row.warehouseSpu,
+  )
+  if (spuSearchResultList.value.length === 0) {
+    popoverVisible.value = false
+  }
 }
 const handleRemoveSpu = (index: number) => {
@@ -179,13 +282,40 @@ const handleSave = async () => {
  if (!valid) {
    return
  }
-  saving.value = true
+  if (!editForm.value.spuList?.length) {
+    ElMessageBox.alert('请添加组内SPU', '提示', {
+      type: 'warning',
+    })
+    return
+  }
+  const loading = ElLoading.service({
+    lock: true,
+    text: '加载中...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
  try {
-    // TODO: 调用保存接口
+    const editId = editForm.value.id
-    emit('saved')
+    const request = editId
+      ? updateSharedInventoryGroupApi
+      : addSharedInventoryGroupApi
+    const res = await request({
+      groupName: editForm.value.groupName!,
+      status: !!editForm.value.status,
+      skuList: editForm.value.spuList.map((item) => ({
+        warehouseSpu: item.warehouseSpu!,
+        sortOrder: item.sortOrder!,
+      })),
+    })
+    if (res.code !== 200) {
+      return
+    }
+    ElMessage.success('保存成功')
+    emit('saveSuccess')
    dialogVisible.value = false
+  } catch (error) {
+    console.error(error)
  } finally {
-    saving.value = false
+    loading.close()
  }
 }
@@ -243,4 +373,16 @@ defineExpose({
  justify-content: center;
  gap: 10px;
 }
+.popover-table {
+  height: 200px;
+}
+</style>
+<style lang="scss">
+.spu-search-popover {
+  .el-button.is-circle {
+    padding: 6px;
+  }
+}
 </style>
--- a/src/views/warehouse/warehouseRuleSetting/hooks/useWarehouseRuleSettingTableColumns.tsx
+++ b/src/views/warehouse/warehouseRuleSetting/hooks/useWarehouseRuleSettingTableColumns.tsx
 import { ElButton, ElTag } from 'element-plus'
 import type { WarehouseRuleSettingData } from '@/types/api/warehouse/warehouseRuleSetting'
-const statusMap: Record<number, { label: string; type: 'success' | 'info' }> = {
+const statusMap: Record<'true' | 'false', { label: string; type: 'success' | 'info' }> = {
-  1: { label: '启用', type: 'success' },
+  true: { label: '启用', type: 'success' },
-  0: { label: '禁用', type: 'info' },
+  false: { label: '禁用', type: 'info' },
 }
 export interface UseWarehouseRuleSettingTableColumnsOptions {
@@ -16,13 +16,23 @@ export function useWarehouseRuleSettingTableColumns(
  const columns = computed(() => [
    {
      label: '库存组名称',
-      prop: '',
+      prop: 'groupName',
      align: 'left',
    },
    {
      label: '共享库存SPU',
-      prop: '',
+      prop: 'warehouseSpu',
      align: 'left',
+      render: (row: WarehouseRuleSettingData) => {
+        const spuList = [
+          ...new Set(
+            (row.skuList ?? [])
+              .map((item) => item.warehouseSpu)
+              .filter(Boolean),
+          ),
+        ]
+        return <span>{spuList.join(',')}</span>
+      },
    },
    {
      label: '创建时间',
@@ -36,7 +46,7 @@ export function useWarehouseRuleSettingTableColumns(
      width: 100,
      align: 'center',
      render: (row: WarehouseRuleSettingData) => {
-        const status = statusMap[row.status ?? -1]
+        const status = statusMap[row.status ? 'true' : 'false']
        return status ? (
          <ElTag type={status.type}>{status.label}</ElTag>
        ) : (
@@ -95,5 +105,31 @@ export function useWarehouseRuleSettingTableColumns(
      slot: 'operation',
    },
  ])
-  return { columns, spuTableColumns }
+  const spuSearchTableColumns = computed(() => [
+    {
+      label: '图片',
+      width: 80,
+      align: 'center',
+      slot: 'spuImage',
+    },
+    {
+      label: '库存SPU',
+      prop: 'warehouseSpu',
+      minWidth: 120,
+      align: 'center',
+    },
+    {
+      label: '商品名称',
+      prop: 'productName',
+      minWidth: 160,
+      align: 'left',
+    },
+    {
+      label: '操作',
+      width: 80,
+      align: 'center',
+      slot: 'operation',
+    },
+  ])
+  return { columns, spuTableColumns, spuSearchTableColumns }
 }
--- a/src/views/warehouse/warehouseRuleSetting/index.vue
+++ b/src/views/warehouse/warehouseRuleSetting/index.vue
@@ -29,9 +29,9 @@
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </ElFormItem>
-          <ElFormItem label="库存SKU">
+          <ElFormItem label="库存SPU">
            <ElInput
-              v-model="searchForm.warehouseSku"
+              v-model="searchForm.warehouseSpu"
              clearable
              placeholder="库存SKU"
              style="width: 140px"
@@ -39,7 +39,7 @@
          </ElFormItem>
          <ElFormItem label="库存组名称">
            <ElInput
-              v-model="searchForm.warehouseGroupName"
+              v-model="searchForm.groupName"
              clearable
              placeholder="库存组名称"
              style="width: 140px"
@@ -98,7 +98,11 @@
      </div>
    </div>
  </div>
-  <EditFormDialog ref="editFormRef" v-model:visible="editDialogVisible" />
+  <EditFormDialog
+    ref="editFormRef"
+    v-model:visible="editDialogVisible"
+    @save-success="search"
+  />
 </template>
 <script lang="ts" setup>
 import { getWarehouseRuleSettingListApi } from '@/api/warehouse/warehouseRuleSetting'
@@ -112,10 +116,10 @@ import { ElDatePicker, ElFormItem } from 'element-plus'
 import { useWarehouseRuleSettingTableColumns } from './hooks/useWarehouseRuleSettingTableColumns'
 import EditFormDialog from './components/EditDialog.vue'
 const [searchForm, resetSearchForm] = useValue<SearchForm>({
-  startTime: '',
+  createStartTime: '',
-  endTime: '',
+  createEndTime: '',
-  warehouseSku: '',
+  warehouseSpu: '',
-  warehouseGroupName: '',
+  groupName: '',
  status: 1,
 })
 const dateRange = ref([])