139 lines
4.3 KiB
Vue
139 lines
4.3 KiB
Vue
<template>
|
||
<el-dialog v-model="showAddTable" :title="addTabForm.id ? '编辑桌型' : '新增桌型'" top="10vh" @closed="addTabFormReset">
|
||
<el-form ref="AddTabFormRef" :model="addTabForm" :rules="addTabFormRules" label-position="left"
|
||
label-width="100">
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="addTabForm.name" placeholder="请输入名称" />
|
||
</el-form-item>
|
||
<el-form-item label="描述" prop="note">
|
||
<el-input v-model="addTabForm.note" placeholder="请输入描述，例如1-2人" />
|
||
</el-form-item>
|
||
<el-form-item label="等待时间" prop="waitTime">
|
||
<el-input v-model="addTabForm.waitTime" placeholder="0">
|
||
<template #append>分钟/1桌</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="号码前缀" prop="prefix">
|
||
<el-input v-model="addTabForm.prefix" placeholder="请输入英文字母，不支持中文" />
|
||
</el-form-item>
|
||
<el-form-item label="开始号码" prop="start">
|
||
<el-input v-model="addTabForm.start" placeholder="请输入开始号码" />
|
||
</el-form-item>
|
||
<el-form-item label="过号保留">
|
||
<el-input v-model="addTabForm.nearNum" :disabled="!addTabForm.isPostpone" placeholder="临近几桌提醒">
|
||
<template #prepend>
|
||
<el-checkbox v-model="addTabForm.isPostpone" :true-value="1" :false-value="0" label="开启顺延" />
|
||
</template>
|
||
<template #append>桌</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="footer" style="display: flex;">
|
||
<el-button style="width: 100%" @click="showAddTable = false">
|
||
取消
|
||
</el-button>
|
||
<el-button type="primary" style="width: 100%" :loading="addTabFormLoading" @click="addTabConfirmHandle">
|
||
确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ElMessage } from 'element-plus'
|
||
import { ref, onMounted } from 'vue'
|
||
import { addCallTable } from '@/api/queue.js'
|
||
import { useUser } from "@/store/user.js"
|
||
const store = useUser()
|
||
|
||
const emits = defineEmits(['success'])
|
||
|
||
const showAddTable = ref(false)
|
||
const addTabFormLoading = ref(false)
|
||
const AddTabFormRef = ref(null)
|
||
const resetAddTabForm = ref({})
|
||
const addTabForm = ref({
|
||
name: '',
|
||
note: '',
|
||
waitTime: '',
|
||
prefix: '',
|
||
start: '',
|
||
isPostpone: 0,
|
||
nearNum: ''
|
||
})
|
||
|
||
const addTabFormRules = ref({
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur',
|
||
}
|
||
],
|
||
waitTime: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur',
|
||
}
|
||
],
|
||
prefix: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur',
|
||
}
|
||
],
|
||
start: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur',
|
||
}
|
||
],
|
||
})
|
||
|
||
// 初始化
|
||
function addTabFormReset() {
|
||
addTabForm.value = { ...resetAddTabForm.value }
|
||
AddTabFormRef.value.resetFields()
|
||
}
|
||
|
||
// 提交
|
||
function addTabConfirmHandle() {
|
||
AddTabFormRef.value.validate(async valid => {
|
||
try {
|
||
if (valid) {
|
||
addTabFormLoading.value = true
|
||
addTabForm.value.shopId = store.userInfo.shopId
|
||
if (addTabForm.value.id) {
|
||
addTabForm.value.callTableId = addTabForm.value.id
|
||
}
|
||
const res = await addCallTable(addTabForm.value)
|
||
addTabFormLoading.value = false
|
||
showAddTable.value = false
|
||
ElMessage.success(addTabForm.value.id ? '编辑成功' : '添加成功')
|
||
emits('success')
|
||
}
|
||
} catch (error) {
|
||
addTabFormLoading.value = false
|
||
console.log(error);
|
||
}
|
||
})
|
||
}
|
||
|
||
function show(obj) {
|
||
if (obj && obj.id) {
|
||
addTabForm.value = { ...obj }
|
||
}
|
||
showAddTable.value = true
|
||
}
|
||
|
||
defineExpose({
|
||
show
|
||
})
|
||
|
||
onMounted(() => {
|
||
resetAddTabForm.value = { ...addTabForm.value }
|
||
})
|
||
</script> |