1.修复购物车清空已下单商品的问题
2.转桌/并桌只显示已下单商品
This commit is contained in:
203
src/views/home/components/tableMerging.vue
Normal file
203
src/views/home/components/tableMerging.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<!-- 合并/转桌 -->
|
||||
<template>
|
||||
<el-dialog title="转桌/并桌" width="700px" v-model="visible" @closed="onClose" top="10vh">
|
||||
<div class="scroll_y">
|
||||
<el-form :model="form" ref="formRef" :rules="rules" label-position="top">
|
||||
<el-form-item label="转入台桌" prop="targetTableId">
|
||||
<el-select v-model="form.targetTableId" style="width: 200px;" placeholder="请选择目标台桌">
|
||||
<el-option :label="item.name" :value="item.qrcode" v-for="item in tableList"
|
||||
:key="item.qrcode"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="转入类型">
|
||||
<el-radio-group v-model="form.isFull">
|
||||
<el-radio :value="false" border>转桌（可将部分商品转入）</el-radio>
|
||||
<el-radio :value="true" border>并桌（并台会将全部购物车商品转入）</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="转入商品" prop="cartIds" v-if="!form.isFull">
|
||||
<div v-for="item in props.data" style="width: 100%;">
|
||||
<div>{{ `第${item.placeNum}次下单` }}</div>
|
||||
<el-table ref="tableRefs" :data="item.info" border>
|
||||
<el-table-column type="selection" align="center" width="50px"></el-table-column>
|
||||
<el-table-column label="名称" prop="name"></el-table-column>
|
||||
<el-table-column label="数量" prop="number"></el-table-column>
|
||||
<el-table-column label="规格" prop="skuName"></el-table-column>
|
||||
<el-table-column label="价格" prop="salePrice"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer" style="display: flex;">
|
||||
<el-button style="width: 100%" @click="visible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" style="width: 100%" :loading="loading" @click="confirmHandle">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { queryShopTable } from '@/api/table.js'
|
||||
import { orderSwitcht } from '@/api/product.js'
|
||||
import { useUser } from "@/store/user.js"
|
||||
import { useGlobal } from '@/store/global.js'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const store = useUser()
|
||||
const global = useGlobal()
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const props = reactive({
|
||||
data: []
|
||||
})
|
||||
|
||||
const emits = defineEmits(['success'])
|
||||
|
||||
const tableRefs = ref([])
|
||||
|
||||
const list = ref([])
|
||||
|
||||
const loading = ref(false)
|
||||
const formRef = ref(null)
|
||||
const resetForm = ref({})
|
||||
const form = ref({
|
||||
shopId: store.userInfo.shopId,
|
||||
masterId: '',
|
||||
orderId: '',
|
||||
cartIds: [],
|
||||
isFull: false,
|
||||
currentTableId: '',
|
||||
targetTableId: '',
|
||||
})
|
||||
|
||||
const rules = ref({
|
||||
targetTableId: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
trigger: 'change',
|
||||
}
|
||||
],
|
||||
cartIds: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
let arr = []
|
||||
props.data.map((item, index) => {
|
||||
arr.push(...tableRefs.value[index].getSelectionRows())
|
||||
})
|
||||
|
||||
if (!arr.length) {
|
||||
ElMessage.error('至少选择一个商品')
|
||||
callback(new Error('至少选择一个商品'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const tableList = ref([])
|
||||
// 获取台桌列表
|
||||
async function queryShopTableAjax() {
|
||||
try {
|
||||
const res = await queryShopTable({
|
||||
shopId: store.userInfo.shopId,
|
||||
areaId: '',
|
||||
status: '',
|
||||
page: 1,
|
||||
pageSize: 100
|
||||
})
|
||||
tableList.value = res.list.filter(item => item.qrcode != props.data[0].info[0].tableId && item.status == 'using')
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 提交
|
||||
function confirmHandle() {
|
||||
formRef.value.validate(async valid => {
|
||||
try {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
form.value.masterId = props.data[0].info[0].masterId
|
||||
form.value.orderId = props.data[0].info[0].orderId
|
||||
form.value.currentTableId = props.data[0].info[0].tableId
|
||||
|
||||
if (!form.value.isFull) {
|
||||
let arr = []
|
||||
props.data.map((item, index) => {
|
||||
arr.push(...tableRefs.value[index].getSelectionRows())
|
||||
})
|
||||
form.value.cartIds = arr.map(item => item.id)
|
||||
}
|
||||
|
||||
await orderSwitcht(form.value)
|
||||
loading.value = false
|
||||
|
||||
// 更新台桌信息
|
||||
global.setOrderTable(tableList.value.find(item => item.qrcode == form.value.targetTableId))
|
||||
|
||||
visible.value = false
|
||||
|
||||
emits('success', { isTemporary: true })
|
||||
}
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
console.log(error);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
form.value = { ...resetForm.value }
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
|
||||
function show(data) {
|
||||
props.data = data
|
||||
visible.value = true
|
||||
queryShopTableAjax()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
resetForm.value = { ...form.value }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$btmH: 50px;
|
||||
|
||||
.scroll_y {
|
||||
height: 50vh;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $btmH;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: $btmH;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: $btmH*-1;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user