Skip to content

F
factory_front
Commit 9ffc5cd7 by qinjianhui
Options

feat: 共享库存接口联调

parent 6f4145aa
Showing with 271 additions and 53 deletions
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,
)
}
src/types/api/warehouse/warehouseRuleSetting.ts
export interface SearchForm {
startTime: string
endTime: string
warehouseSku: string
warehouseGroupName: string
createStartTime: string
createEndTime: string
warehouseSpu: string
groupName: string
status: number
}
export interface WarehouseRuleSettingData {
id?: number
createTime?: string
warehouseSku?: string
warehouseGroupName?: string
warehouseSpu?: string
groupName?: string
status?: number
skuList?: WarehouseRuleSpuItem[]
}
export interface WarehouseRuleSpuItem {
warehouseSpu: string
productName: string
spuImage?: string
sortNo: number
dataVersion?: number
id?: number
sortOrder?: number
warehouseSku?: string
warehouseSpu?: string
productName?: string
imgUrl?: string
}
export interface EditForm {
id?: number
warehouseGroupName?: string
status?: number
groupName?: string
status?: boolean
spuList?: WarehouseRuleSpuItem[]
skuList?: WarehouseRuleSpuItem[]
}
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"
:inactive-value="0"
:active-value="true"
: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>
<ElButton type="primary" @click="handleSave"> 保存 </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: '',
status: 1,
groupName: '',
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 = () => {
// TODO: 调用接口查询库存SPU并添加到列表
const handleSearchSpu = async () => {
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: 调用保存接口
emit('saved')
const editId = editForm.value.id
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>
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' }> = {
1: { label: '启用', type: 'success' },
0: { label: '禁用', type: 'info' },
const statusMap: Record<'true' | 'false', { label: string; type: 'success' | 'info' }> = {
true: { label: '启用', type: 'success' },
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 }
}
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: '',
endTime: '',
warehouseSku: '',
warehouseGroupName: '',
createStartTime: '',
createEndTime: '',
warehouseSpu: '',
groupName: '',
status: 1,
})
const dateRange = ref([])
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment