修改商品选择和修改字段命名
This commit is contained in:
weiwei committed
1 parent
490d1ae51d
commit
3f61ca4c26
9 files changed
+73
-141
No files matched your search
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="选择商品" width="80%" :close-on-click-modal="false" draggable @close="dialogVisible = false">
|
||||
<el-row>
|
||||
<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
|
||||
<el-form-item label="商品名称" prop="productName">
|
||||
<el-input placeholder="请输入商品名称" v-model="queryForm.productName" />
|
||||
</el-form-item>
|
||||
<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>
|
||||
<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="tableRef"
|
||||
border
|
||||
:data="dataList"
|
||||
v-loading="loading"
|
||||
:row-key="(row:any) => row.id"
|
||||
:reserve-selection="true"
|
||||
@row-click="rowClick"
|
||||
:row-style="{ cursor: 'pointer' }"
|
||||
>
|
||||
<el-table-column type="selection" width="50" 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="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="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogConfirm" :disabled="loading">确认</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 emit = defineEmits(["getSelectedRows"])
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
selectedRows: any[]
|
||||
}>(),
|
||||
{
|
||||
selectedRows: () => [],
|
||||
},
|
||||
)
|
||||
|
||||
const { status } = useDict("status")
|
||||
const queryRef = ref()
|
||||
const tableRef = ref() // 对话框多选表格ref
|
||||
const loading = ref(false) // 对话框多选表格loading
|
||||
const dialogVisible = ref(false)
|
||||
const queryForm = reactive<any>({
|
||||
productCode: "",
|
||||
barcode: "",
|
||||
productName: "",
|
||||
})
|
||||
const total = ref<number>(0)
|
||||
const dataList = ref<any[]>([]) // 对话框多选表格数据
|
||||
const supermarketCategory = ref<any>([]) // 商品分类
|
||||
const supermarketBrand = ref<any>([]) // 商品品牌
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = async () => {
|
||||
dialogVisible.value = true
|
||||
getDataListAndSelect()
|
||||
}
|
||||
|
||||
// 获取商品数据并且勾选
|
||||
const getDataListAndSelect = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const { code, data } = await getErpSpuPage(queryForm)
|
||||
if (code === 0) {
|
||||
dataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
|
||||
total.value = data.total
|
||||
|
||||
// 保存当前已选中的行
|
||||
// const currentSelectedRows = tableRef.value?.getSelectionRows() || []
|
||||
// 清空表格数据后重新设置
|
||||
nextTick(() => {
|
||||
// 合并当前页面数据中的已选行和之前保存的已选行
|
||||
const rowsToSelect = [...props.selectedRows.filter((row) => dataList.value.some((item) => item.erpSpuId === row.erpSpuId))]
|
||||
// 去重
|
||||
// const uniqueRowsToSelect = Array.from(new Map(rowsToSelect.map((row) => [row.erpSpuId, row])).values())
|
||||
// 为匹配的行设置选中状态
|
||||
rowsToSelect.forEach((row) => {
|
||||
const targetRow = dataList.value.find((item) => item.erpSpuId === row.erpSpuId)
|
||||
targetRow && tableRef.value?.toggleRowSelection(targetRow, true)
|
||||
})
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
dataList.value = []
|
||||
} finally {
|
||||
loading.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)
|
||||
tableRef.value.toggleRowSelection(row)
|
||||
}
|
||||
|
||||
// 商品选择对话框确认
|
||||
const dialogConfirm = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
// 获取所有选中的行，包括其他页面的选择
|
||||
const currentSelectedRows = $table.getSelectionRows()
|
||||
// 合并当前选中的行和之前已选的行（排除当前页面的行）
|
||||
const allSelectedRows = [
|
||||
...currentSelectedRows,
|
||||
...props.selectedRows.filter((row) => !dataList.value.some((item) => item.erpSpuId === row.erpSpuId)),
|
||||
]
|
||||
dialogVisible.value = false
|
||||
emit("getSelectedRows", allSelectedRows)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in new issue
Block a user