升级版本相关修改，台桌增加预约

src/views/table/components/subscribe.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-dialog
+    title="预约"
+    :visible.sync="dialogVisible"
+    width="400px"
+    @open="tbShopAreaGet"
+    @close="reset"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="left"
+    >
+
+      <el-form-item label="就餐人数" prop="number">
+        <el-input-number v-model="form.number" :min="1" controls-position="right" />
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="form.phone" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
+      </el-form-item>
+      <el-form-item label="联系人" prop="name">
+        <el-input v-model="form.name" placeholder="请输入联系人姓名" />
+      </el-form-item>
+      <el-form-item label="就餐时间" prop="time">
+        <el-time-picker v-model="form.time" value-format="HH:mm:ss" placeholder="选择时间" style="width: 100%;" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button
+        type="primary"
+        :loading="loading"
+        @click="onSubmitHandle"
+      >确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { $fastCreateTable } from '@/api/table'
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      resetForm: '',
+      loading: false,
+      form: {
+        id: '',
+        number: 1,
+        name: '',
+        phone: '',
+        time: ''
+      },
+      rules: {
+        number: [
+          {
+            required: true,
+            message: '请选择就餐人数',
+            trigger: ['blur']
+          }
+        ],
+        phone: [
+          {
+            required: true,
+            message: '请输入联系方式',
+            trigger: ['blur']
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: '请输入联系人姓名',
+            trigger: ['blur']
+          }
+        ],
+        time: [
+          {
+            required: true,
+            message: '请选择时间',
+            trigger: ['change']
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.resetForm = { ...this.form }
+  },
+  methods: {
+    onSubmitHandle() {
+      this.$refs.form.validate(async(valid) => {
+        if (valid) {
+          this.loading = true
+          try {
+            const res = await $fastCreateTable(
+              {
+                ...this.form,
+                qrcode: this.form.tableId,
+                shopId: localStorage.getItem('shopId')
+              },
+              this.form.id ? 'put' : 'post'
+            )
+            this.$emit('success', res)
+            this.close()
+            this.$notify({
+              title: '成功',
+              message: `预约成功`,
+              type: 'success'
+            })
+            this.loading = false
+          } catch (error) {
+            this.loading = false
+            console.log(error)
+          }
+        }
+      })
+    },
+    show(obj) {
+      this.dialogVisible = true
+      if (obj && obj.id) {
+        this.form = JSON.parse(JSON.stringify(obj))
+      }
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    reset() {
+      this.form = { ...this.resetForm }
+    }
+
+  }
+}
+</script>