211 lines
7.3 KiB
Vue
211 lines
7.3 KiB
Vue
<template>
|
|
<!-- 商品选择对话框 -->
|
|
<el-dialog
|
|
v-model="erpSpuSelectDialogVisible"
|
|
title="选择商品"
|
|
width="80%"
|
|
:close-on-click-modal="false"
|
|
draggable
|
|
@close="erpSpuSelectDialogVisible = false"
|
|
>
|
|
<el-row>
|
|
<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
|
|
<el-form-item label="货号" prop="productCode">
|
|
<el-input placeholder="请输入货号" v-model="queryForm.productCode" />
|
|
</el-form-item>
|
|
<el-form-item label="自编码/条码" prop="barcode">
|
|
<el-input placeholder="请输入自编码/条码" v-model="queryForm.barcode" />
|
|
</el-form-item>
|
|
<el-form-item label="商品名称" prop="productName">
|
|
<el-input placeholder="请输入商品名称" v-model="queryForm.productName" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
<el-table
|
|
ref="spuMultipleTableRef"
|
|
:data="spuDataList"
|
|
v-loading="spuListLoading"
|
|
:row-key="(row:any) => row.id"
|
|
:reserve-selection="true"
|
|
@row-click="rowClick"
|
|
:row-style="{ cursor: 'pointer' }"
|
|
>
|
|
<el-table-column type="selection" width="40" fixed="left" align="center" />
|
|
<el-table-column type="index" label="#" width="50" fixed="left" align="center" />
|
|
<el-table-column prop="productName" label="商品名称" min-width="150px" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="picUrl" label="封面图" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<preview-image @click.stop :src="scope.row.picUrl" />
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="barcode" label="自编码/条码" min-width="150px" align="center" show-overflow-tooltip />-->
|
|
<el-table-column prop="stock" label="库存" min-width="80px" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
|
|
<!-- <el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip>-->
|
|
<!-- <template #default="scope">-->
|
|
<!-- {{ supermarketBrand?.find((item: any) => item.id === scope.row.brandId)?.name }}-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ supermarketCategory?.find((item: any) => item.id === scope.row.categoryId)?.name }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />-->
|
|
<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<dict-tag :options="status" :value="scope.row.status" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
@size-change="sizeChangeHandle"
|
|
@current-change="currentChangeHandle"
|
|
v-model:current-page="queryForm.current"
|
|
v-model:page-size="queryForm.size"
|
|
:total="total"
|
|
/>
|
|
|
|
<template #footer>
|
|
<el-button @click="erpSpuSelectDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue"
|
|
import { getErpSpuPage } from "/@/api/supermarketerp/common"
|
|
import { getSupermarketCategory, getSupermarketBrand } from "/@/api/supermarketerp/supermarketSpu"
|
|
import { useDict } from "/@/hooks/dict"
|
|
|
|
const erpSpuSelectDialogVisible = defineModel()
|
|
const emit = defineEmits(["getSelectedSpuRows"])
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
selectedSpuRows: any[]
|
|
}>(),
|
|
{
|
|
selectedSpuRows: () => [],
|
|
},
|
|
)
|
|
|
|
const { status } = useDict("status")
|
|
const queryRef = ref()
|
|
const spuMultipleTableRef = ref() // 对话框多选表格ref
|
|
const spuListLoading = ref(false) // 对话框多选表格loading
|
|
const queryForm = reactive<any>({
|
|
productCode: "",
|
|
barcode: "",
|
|
productName: "",
|
|
})
|
|
const total = ref<number>(0)
|
|
const spuDataList = ref<any[]>([]) // 对话框多选表格数据
|
|
const supermarketCategory = ref<any>([]) // 商品分类
|
|
const supermarketBrand = ref<any>([]) // 商品品牌
|
|
|
|
// 打开弹窗
|
|
const openDialog = async () => {
|
|
erpSpuSelectDialogVisible.value = true
|
|
getDataListAndSelect()
|
|
}
|
|
|
|
// 获取商品数据并且勾选
|
|
const getDataListAndSelect = async () => {
|
|
spuListLoading.value = true
|
|
try {
|
|
const { code, data } = await getErpSpuPage(queryForm).finally(() => (spuListLoading.value = false))
|
|
if (code === 0) {
|
|
spuDataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
|
|
total.value = data.total
|
|
|
|
// 保存当前已选中的行
|
|
const currentSelectedRows = spuMultipleTableRef.value?.getSelectionRows() || []
|
|
// 清空表格数据后重新设置
|
|
nextTick(() => {
|
|
// 合并当前页面数据中的已选行和之前保存的已选行
|
|
const rowsToSelect = [
|
|
...currentSelectedRows,
|
|
...props.selectedSpuRows.filter((row) => spuDataList.value.some((item) => item.erpSpuId === row.erpSpuId)),
|
|
]
|
|
// 去重
|
|
const uniqueRowsToSelect = Array.from(new Map(rowsToSelect.map((row) => [row.erpSpuId, row])).values())
|
|
// 为匹配的行设置选中状态
|
|
uniqueRowsToSelect.forEach((row) => {
|
|
const targetRow = spuDataList.value.find((item) => item.erpSpuId === row.erpSpuId)
|
|
targetRow && spuMultipleTableRef.value?.toggleRowSelection(targetRow, true)
|
|
})
|
|
})
|
|
}
|
|
} catch (error) {
|
|
spuDataList.value = []
|
|
spuListLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 分页变化
|
|
const sizeChangeHandle = (val: number) => {
|
|
queryForm.size = val
|
|
getDataListAndSelect()
|
|
}
|
|
const currentChangeHandle = (val: number) => {
|
|
queryForm.current = val
|
|
getDataListAndSelect()
|
|
}
|
|
|
|
const resetQuery = () => {
|
|
queryRef.value?.resetFields()
|
|
getDataListAndSelect()
|
|
}
|
|
|
|
// 点击商品列表表格行
|
|
const rowClick = (row: any) => {
|
|
console.log("clicked-row", row)
|
|
spuMultipleTableRef.value.toggleRowSelection(row)
|
|
}
|
|
|
|
// 商品选择对话框确认
|
|
const handleSelectDialogConfirm = () => {
|
|
const $table = spuMultipleTableRef.value
|
|
if ($table) {
|
|
// 获取所有选中的行，包括其他页面的选择
|
|
const currentSelectedRows = $table.getSelectionRows()
|
|
// 合并当前选中的行和之前已选的行（排除当前页面的行）
|
|
const allSelectedRows = [
|
|
...currentSelectedRows,
|
|
...props.selectedSpuRows.filter((row) => !spuDataList.value.some((item) => item.erpSpuId === row.erpSpuId)),
|
|
]
|
|
// 去重
|
|
const uniqueSelectedRows = Array.from(new Map(allSelectedRows.map((row) => [row.erpSpuId, row])).values())
|
|
|
|
emit("getSelectedSpuRows", uniqueSelectedRows)
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
// 获取商品分类
|
|
try {
|
|
const res = await getSupermarketCategory()
|
|
supermarketCategory.value = res.data
|
|
} catch (error) {
|
|
supermarketCategory.value = []
|
|
}
|
|
// 获取商品品牌
|
|
try {
|
|
const res = await getSupermarketBrand()
|
|
supermarketBrand.value = res.data
|
|
} catch (error) {
|
|
supermarketBrand.value = []
|
|
}
|
|
})
|
|
|
|
defineExpose({
|
|
openDialog,
|
|
})
|
|
</script>
|