first
This commit is contained in:
339
pageTable/index/components/add-table.vue
Normal file
339
pageTable/index/components/add-table.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
Reference in New Issue
Block a user