zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

每日菜品选择改为分页并保存勾选状态

Browse Source
This commit is contained in:
ctw committed 2025-01-16 18:24:43 +08:00
1 parent 3872bfd959
commit 611f1d634d
2 files changed
+107 -74
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env.development
+6 -4
View File
@@ -10,14 +10,16 @@ ENV = 'development'
# ADMIN 服务地址
# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上
# VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
VITE_ADMIN_PROXY_PATH = http://localhost:9999/
#VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
# VITE_ADMIN_PROXY_PATH = http://localhost:9999/
VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
# VITE_ADMIN_PROXY_PATH = http://59.202.170.152:81/api # 正式环境
# 图片访问基础地址
# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api # 线上
# VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
VITE_IMAGE_BASE_PATH = http://localhost:9999
#VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
# VITE_IMAGE_BASE_PATH = http://localhost:9999
VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
# VITE_IMAGE_BASE_PATH = http://59.202.170.152:81/api/ # 正式环境
# 代码生成服务地址
VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
src/views/canteen/canteenDailyMenu/form.vue
+101 -70
View File
@@ -92,55 +92,57 @@
</el-form>
</el-row>
<div style="overflow: auto; max-height: 60vh">
<el-table
ref="foodMultipleTableRef"
:data="foodDataList"
v-loading="loading"
@selection-change="selectionChangeHandle"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="50" align="center" />
<el-table-column prop="name" label="商品名称" width="100px" align="center" show-overflow-tooltip />
<el-table-column prop="categoryId" label="商品分类" width="100px" align="center" show-overflow-tooltip>
<template #default="{ row }">
{{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }}
</template>
</el-table-column>
<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
<template #default="scope">
<preview-image :src="scope.row.picUrl" />
</template>
</el-table-column>
<el-table-column prop="sort" label="排序字段" align="center" show-overflow-tooltip />
<el-table-column prop="status" label="上架状态" align="center" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="spu_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格" align="center" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.price) }}
</template>
</el-table-column>
<el-table-column prop="marketPrice" label="市场价" align="center" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.marketPrice) }}
</template>
</el-table-column>
<el-table-column prop="costPrice" label="成本价" align="center" show-overflow-tooltip />
<el-table-column prop="stock" label="库存" align="center" show-overflow-tooltip />
<el-table-column prop="salesCount" label="商品销量" align="center" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
</el-table>
</div>
<!-- <pagination
<el-table
ref="foodMultipleTableRef"
:data="foodDataList"
v-loading="loading"
@select="handleSelect"
@select-all="handleSelectAll"
@selection-change="selectionChangeHandle"
:row-key="(row:any) => row.id"
:reserve-selection="true"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="50" align="center" />
<el-table-column prop="name" label="商品名称" width="100px" align="center" show-overflow-tooltip />
<el-table-column prop="categoryId" label="商品分类" width="100px" align="center" show-overflow-tooltip>
<template #default="{ row }">
{{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }}
</template>
</el-table-column>
<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
<template #default="scope">
<preview-image :src="scope.row.picUrl" />
</template>
</el-table-column>
<el-table-column prop="sort" label="排序字段" align="center" show-overflow-tooltip />
<el-table-column prop="status" label="上架状态" align="center" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="spu_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格" align="center" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.price) }}
</template>
</el-table-column>
<el-table-column prop="marketPrice" label="市场价" align="center" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.marketPrice) }}
</template>
</el-table-column>
<el-table-column prop="costPrice" label="成本价" align="center" show-overflow-tooltip />
<el-table-column prop="stock" label="库存" align="center" show-overflow-tooltip />
<el-table-column prop="salesCount" label="商品销量" align="center" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
</el-table>
<pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
v-model:current-page="foodQueryForm.current"
v-model:page-size="foodQueryForm.size"
:total="total"
/> -->
/>
<template #footer>
<div class="dialog-footer">
@@ -188,7 +190,7 @@ const spuIds = computed(() => selectedFood.value?.map((item: any) => item.id))
// 菜品查询表单
const foodQueryForm = reactive<any>({
current: 1,
size: 9999,
size: 10,
startTime: "",
hourType: undefined,
})
@@ -196,23 +198,40 @@ const foodQueryForm = reactive<any>({
const foodDataList = ref<any>([])
const total = ref(0) // 菜品总数
// 用来单击后保存数据状态
function handleSelect(selectedRows: any[], row: any) {
selectObjs.value.findIndex((item: any) => item.id === row.id) === -1
? // selectObjs.value.indexOf(row) === -1
selectObjs.value.push(row)
: selectObjs.value.splice(
// selectObjs.value.indexOf(row)
selectObjs.value.findIndex((item: any) => item.id === row.id),
1,
)
console.log(selectObjs.value)
}
// 用来执行全选和反全选的数据状态保存
function handleSelectAll(selectedRows: any[]) {
if (selectedRows.length > 0) {
selectedRows.forEach((row: any) => {
if (selectObjs.value.indexOf(row) === -1) {
selectObjs.value.push(row)
}
})
} else {
foodDataList.value.forEach((row: any) => {
const index = selectObjs.value.indexOf(row)
if (index !== -1) {
selectObjs.value.splice(index, 1)
}
})
}
console.log(selectObjs.value)
}
// 菜品表格多选
const selectionChangeHandle = (objs: any) => {
// console.log("aaaaaaa", objs)
// const add = objs.filter((row: any) => !temp.some((item: any) => item.id == row.id))
// console.log(add)
// const remove = temp.filter((item: any) => !objs.some((row: any) => row.id == item.id))
// console.log(remove)
// temp = [...objs]
// if (add.length > 0 && remove.length <= 0) {
// // 添加勾选
// return (selectObjs.value = [...selectObjs.value, ...add])
// }
// if (add.length <= 0 && remove.length > 0) {
// // 取消勾选
// selectObjs.value = selectObjs.value.filter((item: any) => !remove.some((row: any) => row.id == item.id))
// }
selectObjs.value = objs
// selectObjs.value = objs
}
// 清空搜索条件
@@ -221,7 +240,7 @@ const resetQuery = () => {
// 清空多选
selectObjs.value = []
foodQueryForm.current = 1
foodQueryForm.size = 9999
foodQueryForm.size = 10
getDataListAndSelect()
}
@@ -250,13 +269,23 @@ const getDataListAndSelect = async () => {
foodDataList.value = res.data.records
total.value = res.data.total
// nextTick(() => {
// foodDataList.value.forEach((row: any) => {
// const index = selectObjs.value.indexOf(row)
const target = foodDataList.value.filter((row: any) => selectObjs.value.some((item: any) => row.id === item.id))
target.forEach((row: any) => nextTick(() => foodMultipleTableRef.value!.toggleRowSelection(row)))
// foodMultipleTableRef.value.toggleRowSelection(row, index !== -1)
// })
// })
// 转换菜品表格多选的选择状态
if (foodDataList.value && foodDataList.value.length > 0 && selectedFood.value.length > 0) {
const target = foodDataList.value.filter((row: any) => selectedFood.value.some((item: any) => row.id === item.id))
target.forEach((row: any) => nextTick(() => foodMultipleTableRef.value!.toggleRowSelection(row)))
} else {
foodMultipleTableRef.value!.clearSelection()
}
// if (foodDataList.value && foodDataList.value.length > 0 && selectedFood.value.length > 0) {
// const target = foodDataList.value.filter((row: any) => selectedFood.value.some((item: any) => row.id === item.id))
// target.forEach((row: any) => nextTick(() => foodMultipleTableRef.value!.toggleRowSelection(row)))
// } else {
// foodMultipleTableRef.value!.clearSelection()
// }
}
}
@@ -268,7 +297,7 @@ const openDialog = (id: string, time?: string, hourType?: number, merchantId?: n
// 重置表单数据
dataFormRef.value?.resetFields()
foodQueryForm.current = 1
foodQueryForm.size = 9999
foodQueryForm.size = 10
selectObjs.value = []
selectedFood.value = []
foodDataList.value = []
@@ -303,9 +332,11 @@ const getcanteenDailyMenuData = (id: string) => {
// 点击选择菜品
const handleClickSelect = async () => {
queryRef.value?.resetFields()
foodQueryForm.current = 1
foodQueryForm.size = 10
selectDialogVisible.value = true
selectObjs.value = selectedFood.value
selectObjs.value = [...selectedFood.value]
await getDataListAndSelect() // 获取菜品数据并且勾选表格行
try {
@@ -319,7 +350,7 @@ const handleClickSelect = async () => {
// 选择菜品点击确认
const handleSelectDialogConfirm = () => {
selectDialogVisible.value = false
selectedFood.value = selectObjs.value
selectedFood.value = [...selectObjs.value]
}
// 移除预览