358 lines
9.1 KiB
Vue
358 lines
9.1 KiB
Vue
<template>
|
|
<my-model ref="model" :title="title" :borderRadius="16" @confirm="submit" :confirmClickClose="false">
|
|
<template #desc>
|
|
<view>
|
|
<uni-forms ref="refform" label-position="left" :model="form" label-align="left" :label-width="400"
|
|
:rules="rules">
|
|
<view class="form">
|
|
<view class="border-bottom u-p-b-10 u-p-t-10">
|
|
<uni-forms-item required label="" name="areaId">
|
|
<template #label>
|
|
<view class="u-text-left ">
|
|
<text class="color-red">*</text>
|
|
<text class="color-333 u-font-28">选择区域</text>
|
|
</view>
|
|
</template>
|
|
<picker @change="areaChange"
|
|
:value="area.selIndex"
|
|
range-key="name" :range="area.list">
|
|
<view class=" u-flex u-row-between u-relative ">
|
|
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
|
|
<view class="u-flex-1">
|
|
<uni-easyinput :inputBorder="false" paddingNone v-model="area.sel.name"
|
|
placeholder="请选择区域"></uni-easyinput>
|
|
|
|
</view>
|
|
<uni-icons type="right" size="18" color="#999"></uni-icons>
|
|
</view>
|
|
|
|
</picker>
|
|
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="border-bottom u-p-b-10 u-p-t-10">
|
|
<uni-forms-item required label="" name="status">
|
|
<template #label>
|
|
<view class="u-text-left ">
|
|
<!-- <text class="color-red">*</text> -->
|
|
<text class="color-333 u-font-28">桌台状态</text>
|
|
</view>
|
|
</template>
|
|
<picker @change="statusChange" range-key="label"
|
|
:value="status.selIndex"
|
|
:range="status.list">
|
|
<view class=" u-flex u-row-between u-relative ">
|
|
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
|
|
<view class="u-flex-1">
|
|
<uni-easyinput :inputBorder="false" paddingNone v-model="status.sel.label"
|
|
placeholder="请选择桌台状态"></uni-easyinput>
|
|
</view>
|
|
<uni-icons type="right" size="18" color="#999"></uni-icons>
|
|
</view>
|
|
|
|
</picker>
|
|
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="border-bottom u-p-b-10">
|
|
<uni-forms-item required label="" name="name">
|
|
<template #label>
|
|
<view class="u-text-left">
|
|
<text class="color-333 u-font-28">桌台名称</text>
|
|
<!-- <text class="color-red">*</text> -->
|
|
</view>
|
|
</template>
|
|
<view class="u-flex-1">
|
|
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
|
placeholder="请输入桌台名称"></uni-easyinput>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
|
|
<view class="border-bottom u-p-b-10">
|
|
<uni-forms-item required label="" name="maxCapacity">
|
|
<template #label>
|
|
<view class="u-text-left">
|
|
<text class="color-333 u-font-28">客座数</text>
|
|
<!-- <text class="color-red">*</text> -->
|
|
</view>
|
|
</template>
|
|
<view class="u-flex-1">
|
|
<uni-number-box v-model="form.maxCapacity"></uni-number-box>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="border-bottom u-p-b-10">
|
|
<uni-forms-item required label="" name="isPredate">
|
|
<template #label>
|
|
<view class="u-text-left">
|
|
<text class="color-333 u-font-28">网络预定开关</text>
|
|
<!-- <text class="color-red">*</text> -->
|
|
</view>
|
|
</template>
|
|
<view class="u-flex-1 u-flex u-row-right">
|
|
<my-switch v-model="form.isPredate"></my-switch>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="border-bottom u-p-b-10">
|
|
<uni-forms-item required label="" name="types">
|
|
<template #label>
|
|
<view class="u-text-left">
|
|
<text class="color-333 u-font-28">类型</text>
|
|
<!-- <text class="color-red">*</text> -->
|
|
</view>
|
|
</template>
|
|
<view class="u-flex-1">
|
|
<my-tabs @change="tabsChange" :list="tabs.list" v-model="tabs.sel"></my-tabs>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<view class="border-bottom u-p-b-10">
|
|
<uni-forms-item required label="" name="types">
|
|
<template #label>
|
|
<view class="u-text-left">
|
|
<text class="color-333 u-font-28">清台管理</text>
|
|
<!-- <text class="color-red">*</text> -->
|
|
</view>
|
|
</template>
|
|
<view class="u-flex-1">
|
|
<my-tabs @change="autoClearsChange" :list="autoClears.list" v-model="form.autoClear"></my-tabs>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<template v-if="tabs.sel==1">
|
|
<view class=" u-p-b-10">
|
|
<uni-forms-item required label="" >
|
|
<template #label>
|
|
<view class="u-text-left">
|
|
<text class="color-333 u-font-28">每小时收费</text>
|
|
<!-- <text class="color-red">*</text> -->
|
|
</view>
|
|
</template>
|
|
<view class="u-flex-1">
|
|
<uni-easyinput :inputBorder="false" paddingNone v-model="form.perhour" type="number"
|
|
placeholder="请输入每小时收费"></uni-easyinput>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class=" u-p-b-10">
|
|
<uni-forms-item required label="" >
|
|
<template #label>
|
|
<view class="u-text-left">
|
|
<text class="color-333 u-font-28">最低消费</text>
|
|
<!-- <text class="color-red">*</text> -->
|
|
</view>
|
|
</template>
|
|
<view class="u-flex-1">
|
|
<uni-easyinput :inputBorder="false" paddingNone v-model="form.amount" type="number"
|
|
placeholder="请输入最低消费"></uni-easyinput>
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</uni-forms>
|
|
</view>
|
|
</template>
|
|
|
|
</my-model>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
$tableArea,$table
|
|
} from '@/http/yskApi/table.js'
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted
|
|
} from 'vue';
|
|
import {
|
|
$status
|
|
} from '@/commons/table-status.js'
|
|
import {objToArrary} from '@/commons/utils/returrn-data.js'
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
const emits= defineEmits(['update'])
|
|
const tabs=reactive({
|
|
list:['低消','计时'],
|
|
sel:1
|
|
})
|
|
//清台管理
|
|
const autoClears=reactive({
|
|
list:['手动清台','自动清台']
|
|
})
|
|
function autoClearsChange(i){
|
|
form.autoClearsChange=i
|
|
}
|
|
const status = reactive({
|
|
list:objToArrary($status),
|
|
sel: '',
|
|
selIndex:0
|
|
})
|
|
console.log(status.list);
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '编辑桌台'
|
|
}
|
|
})
|
|
const model = ref(null)
|
|
const area = reactive({
|
|
list: [],
|
|
sel: '',
|
|
selIndex:0
|
|
})
|
|
async function getArea() {
|
|
const {
|
|
content
|
|
} = await $tableArea.get({
|
|
page: 0,
|
|
size: 300
|
|
})
|
|
area.list = content.map(v => {
|
|
return {
|
|
...v,
|
|
name: v.name,
|
|
value: v.id,
|
|
label: v.name
|
|
}
|
|
})
|
|
console.log(area.list);
|
|
|
|
}
|
|
|
|
function tabsChange(e){
|
|
if(e){
|
|
form.type=2
|
|
}else{
|
|
form.type=0
|
|
}
|
|
}
|
|
function statusChange(e){
|
|
status.sel = status.list[e.detail.value]
|
|
form.status = status.sel.key
|
|
}
|
|
function areaChange(e) {
|
|
console.log(e);
|
|
area.sel = area.list[e.detail.value]
|
|
form.areaId = area.sel.id
|
|
}
|
|
onMounted(()=>{
|
|
getArea()
|
|
})
|
|
function open(tableData) {
|
|
Object.assign(form,tableData)
|
|
getArea()
|
|
model.value.open()
|
|
if(tableData){//编辑
|
|
const {areaId,type}=tableData
|
|
area.sel=area.list.find(v=>v.id==areaId)
|
|
area.selIndex=area.list.findIndex(v=>v.id==areaId)
|
|
status.sel=status.list.find(v=>v.key==tableData.status)
|
|
status.selIndex=status.list.findIndex(v=>v.key==tableData.status)
|
|
tabs.sel=form.type==2?1:0
|
|
}
|
|
}
|
|
|
|
function close() {
|
|
model.value.close()
|
|
}
|
|
defineExpose({
|
|
open,
|
|
close
|
|
})
|
|
|
|
|
|
function unitChange(e) {
|
|
units.current = e.detail.value
|
|
form.unit = units.list[e.detail.value].name
|
|
}
|
|
|
|
const refform = ref(null)
|
|
const form = reactive({
|
|
id: '',
|
|
name: '',
|
|
areaId: '',
|
|
status:'',
|
|
maxCapacity: 0,
|
|
isPredate: 1,
|
|
type: 2,
|
|
perhour: 0,
|
|
amount: 0
|
|
})
|
|
// 校验规则
|
|
const rules = {
|
|
areaId: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请选择区域'
|
|
}]
|
|
},
|
|
name: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入桌台名称'
|
|
}]
|
|
}
|
|
}
|
|
|
|
function submit() {
|
|
refform.value.validate(res => {
|
|
console.log(res)
|
|
console.log(form);
|
|
$table.update({...form,qrcode:form.tableId}).then(Response=>{
|
|
infoBox.showSuccessToast('更新成功')
|
|
close()
|
|
emits('update')
|
|
})
|
|
}).catch(err => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
const page = reactive({
|
|
type: 'add'
|
|
})
|
|
|
|
function cancel() {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.border-bottom {
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.form {
|
|
margin-top: 32rpx;
|
|
background-color: #fff;
|
|
padding: 32rpx 24rpx 32rpx 24rpx;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
|
.u-text-left {
|
|
min-width: 160rpx;
|
|
}
|
|
|
|
// background-color: transparent;
|
|
}
|
|
|
|
::v-deep.uni-forms-item {
|
|
min-height: 80rpx;
|
|
}
|
|
|
|
::v-deep.uni-forms-item .uni-forms-item__label {
|
|
font-size: 28rpx !important;
|
|
}
|
|
|
|
::v-deep.uni-easyinput__placeholder-class {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
::v-deep.uni-forms-item__error {
|
|
display: none;
|
|
}
|
|
</style> |