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 服务地址 # ADMIN 服务地址
# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上 # 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://pjcloud.center.takin.cc/
VITE_ADMIN_PROXY_PATH = http://localhost:9999/ # VITE_ADMIN_PROXY_PATH = http://localhost:9999/
#VITE_ADMIN_PROXY_PATH = http://192.168.101.29: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://123.156.230.15:8089/api # 线上
# VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc # VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
VITE_IMAGE_BASE_PATH = http://localhost:9999 # VITE_IMAGE_BASE_PATH = http://localhost:9999
#VITE_IMAGE_BASE_PATH = http://192.168.101.29: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 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-form>
</el-row> </el-row>
<div style="overflow: auto; max-height: 60vh"> <el-table
<el-table ref="foodMultipleTableRef"
ref="foodMultipleTableRef" :data="foodDataList"
:data="foodDataList" v-loading="loading"
v-loading="loading" @select="handleSelect"
@selection-change="selectionChangeHandle" @select-all="handleSelectAll"
> @selection-change="selectionChangeHandle"
<el-table-column type="selection" width="40" align="center" /> :row-key="(row:any) => row.id"
<el-table-column type="index" label="#" width="50" align="center" /> :reserve-selection="true"
<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> <el-table-column type="selection" width="40" align="center" />
<template #default="{ row }"> <el-table-column type="index" label="#" width="50" align="center" />
{{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }} <el-table-column prop="name" label="商品名称" width="100px" align="center" show-overflow-tooltip />
</template> <el-table-column prop="categoryId" label="商品分类" width="100px" align="center" show-overflow-tooltip>
</el-table-column> <template #default="{ row }">
<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip> {{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }}
<template #default="scope"> </template>
<preview-image :src="scope.row.picUrl" /> </el-table-column>
</template> <el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
</el-table-column> <template #default="scope">
<el-table-column prop="sort" label="排序字段" align="center" show-overflow-tooltip /> <preview-image :src="scope.row.picUrl" />
<el-table-column prop="status" label="上架状态" align="center" show-overflow-tooltip> </template>
<template #default="scope"> </el-table-column>
<dict-tag :options="spu_status" :value="scope.row.status" /> <el-table-column prop="sort" label="排序字段" align="center" show-overflow-tooltip />
</template> <el-table-column prop="status" label="上架状态" align="center" show-overflow-tooltip>
</el-table-column> <template #default="scope">
<el-table-column prop="price" label="商品价格" align="center" show-overflow-tooltip> <dict-tag :options="spu_status" :value="scope.row.status" />
<template #default="scope"> </template>
{{ displayPrice(scope.row.price) }} </el-table-column>
</template> <el-table-column prop="price" label="商品价格" align="center" show-overflow-tooltip>
</el-table-column> <template #default="scope">
<el-table-column prop="marketPrice" label="市场价" align="center" show-overflow-tooltip> {{ displayPrice(scope.row.price) }}
<template #default="scope"> </template>
{{ displayPrice(scope.row.marketPrice) }} </el-table-column>
</template> <el-table-column prop="marketPrice" label="市场价" align="center" show-overflow-tooltip>
</el-table-column> <template #default="scope">
<el-table-column prop="costPrice" label="成本价" align="center" show-overflow-tooltip /> {{ displayPrice(scope.row.marketPrice) }}
<el-table-column prop="stock" label="库存" align="center" show-overflow-tooltip /> </template>
<el-table-column prop="salesCount" label="商品销量" align="center" show-overflow-tooltip /> </el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip /> <el-table-column prop="costPrice" label="成本价" align="center" show-overflow-tooltip />
</el-table> <el-table-column prop="stock" label="库存" align="center" show-overflow-tooltip />
</div> <el-table-column prop="salesCount" label="商品销量" align="center" show-overflow-tooltip />
<!-- <pagination <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
</el-table>
<pagination
@size-change="sizeChangeHandle" @size-change="sizeChangeHandle"
@current-change="currentChangeHandle" @current-change="currentChangeHandle"
v-model:current-page="foodQueryForm.current" v-model:current-page="foodQueryForm.current"
v-model:page-size="foodQueryForm.size" v-model:page-size="foodQueryForm.size"
:total="total" :total="total"
/> --> />
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
@@ -188,7 +190,7 @@ const spuIds = computed(() => selectedFood.value?.map((item: any) => item.id))
// 菜品查询表单 // 菜品查询表单
const foodQueryForm = reactive<any>({ const foodQueryForm = reactive<any>({
current: 1, current: 1,
size: 9999, size: 10,
startTime: "", startTime: "",
hourType: undefined, hourType: undefined,
}) })
@@ -196,23 +198,40 @@ const foodQueryForm = reactive<any>({
const foodDataList = ref<any>([]) const foodDataList = ref<any>([])
const total = ref(0) // 菜品总数 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) => { const selectionChangeHandle = (objs: any) => {
// console.log("aaaaaaa", objs) // selectObjs.value = 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
} }
// 清空搜索条件 // 清空搜索条件
@@ -221,7 +240,7 @@ const resetQuery = () => {
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
foodQueryForm.current = 1 foodQueryForm.current = 1
foodQueryForm.size = 9999 foodQueryForm.size = 10
getDataListAndSelect() getDataListAndSelect()
} }
@@ -250,13 +269,23 @@ const getDataListAndSelect = async () => {
foodDataList.value = res.data.records foodDataList.value = res.data.records
total.value = res.data.total 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) { // 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)) // 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))) // target.forEach((row: any) => nextTick(() => foodMultipleTableRef.value!.toggleRowSelection(row)))
} else { // } else {
foodMultipleTableRef.value!.clearSelection() // foodMultipleTableRef.value!.clearSelection()
} // }
} }
} }
@@ -268,7 +297,7 @@ const openDialog = (id: string, time?: string, hourType?: number, merchantId?: n
// 重置表单数据 // 重置表单数据
dataFormRef.value?.resetFields() dataFormRef.value?.resetFields()
foodQueryForm.current = 1 foodQueryForm.current = 1
foodQueryForm.size = 9999 foodQueryForm.size = 10
selectObjs.value = [] selectObjs.value = []
selectedFood.value = [] selectedFood.value = []
foodDataList.value = [] foodDataList.value = []
@@ -303,9 +332,11 @@ const getcanteenDailyMenuData = (id: string) => {
// 点击选择菜品 // 点击选择菜品
const handleClickSelect = async () => { const handleClickSelect = async () => {
queryRef.value?.resetFields() queryRef.value?.resetFields()
foodQueryForm.current = 1
foodQueryForm.size = 10
selectDialogVisible.value = true selectDialogVisible.value = true
selectObjs.value = selectedFood.value selectObjs.value = [...selectedFood.value]
await getDataListAndSelect() // 获取菜品数据并且勾选表格行 await getDataListAndSelect() // 获取菜品数据并且勾选表格行
try { try {
@@ -319,7 +350,7 @@ const handleClickSelect = async () => {
// 选择菜品点击确认 // 选择菜品点击确认
const handleSelectDialogConfirm = () => { const handleSelectDialogConfirm = () => {
selectDialogVisible.value = false selectDialogVisible.value = false
selectedFood.value = selectObjs.value selectedFood.value = [...selectObjs.value]
} }
// 移除预览 // 移除预览