1
This commit is contained in:
weiwei committed
1 parent
46940bdc88
commit
5e02999ab2
9 files changed
+124
-116
No files matched your search
@@ -3,26 +3,28 @@
|
||||
<el-dialog
|
||||
v-model="erpSpuSelectDialogVisible"
|
||||
title="选择商品"
|
||||
width="70%"
|
||||
width="80%"
|
||||
:close-on-click-modal="false"
|
||||
draggable
|
||||
@close="erpSpuSelectDialogVisible = false"
|
||||
>
|
||||
<!-- <el-row>
|
||||
<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
|
||||
<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="categoryId">
|
||||
<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
|
||||
<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-row>
|
||||
<el-table
|
||||
ref="spuMultipleTableRef"
|
||||
:data="spuDataList"
|
||||
@@ -32,30 +34,42 @@
|
||||
@row-click="rowClick"
|
||||
:row-style="{ cursor: 'pointer' }"
|
||||
>
|
||||
<el-table-column type="selection" width="40" align="center" fixed="left" />
|
||||
<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
|
||||
<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="barcode" label="自编码/条码" min-width="100px" 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 />
|
||||
<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
|
||||
<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 />
|
||||
<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
|
||||
<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="stock" label="库存" min-width="100px" align="center" show-overflow-tooltip />
|
||||
<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
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-model:current-page="foodQueryForm.current"
|
||||
v-model:page-size="foodQueryForm.size"
|
||||
v-model:current-page="queryForm.current"
|
||||
v-model:page-size="queryForm.size"
|
||||
:total="total"
|
||||
/> -->
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="erpSpuSelectDialogVisible = false">取消</el-button>
|
||||
@@ -67,6 +81,8 @@
|
||||
<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"])
|
||||
@@ -79,22 +95,52 @@ const props = withDefaults(
|
||||
},
|
||||
)
|
||||
|
||||
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 {
|
||||
spuListLoading.value = true
|
||||
const { code, data } = await getErpSpuPage().finally(() => (spuListLoading.value = false))
|
||||
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 target = spuDataList.value.filter((row: any) => props.selectedSpuRows.some((item: any) => row.erpSpuId === item.erpSpuId))
|
||||
target.forEach((row: any) => nextTick(() => spuMultipleTableRef.value!.toggleRowSelection(row)))
|
||||
// 保存当前已选中的行
|
||||
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 = []
|
||||
@@ -102,6 +148,21 @@ const openDialog = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变化
|
||||
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)
|
||||
@@ -112,11 +173,37 @@ const rowClick = (row: any) => {
|
||||
const handleSelectDialogConfirm = () => {
|
||||
const $table = spuMultipleTableRef.value
|
||||
if ($table) {
|
||||
const selectionRows = spuMultipleTableRef.value.getSelectionRows()
|
||||
emit("getSelectedSpuRows", selectionRows)
|
||||
// 获取所有选中的行，包括其他页面的选择
|
||||
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,
|
||||
})
|
||||
|
||||
Reference in new issue
Block a user