对接台桌列表

src/components/takeFoodCode.vue

@@ -1,13 +1,80 @@
 <!-- 取餐号组件 -->
 <template>
-    <el-dialog title="修改取餐号" v-model="dialogVisible">
-        <el-input v-model="number" placeholder="请输入取餐号"></el-input>
+    <el-dialog title="修改取餐号" width="600" v-model="dialogVisible" @open="opne">
+        <el-input v-model="number" placeholder="请输入取餐号" readonly></el-input>
+        <div class="keybord_wrap">
+            <div v-for="item in 9" :key="item">
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(item)">{{ item }}</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" disabled style="width: 100%;">.</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(0)">0</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" icon="CloseBold" style="width: 100%;" @click="delHandle"></el-button>
+            </div>
+        </div>
+        <div class="footer">
+            <el-button type="primary" style="width: 100%;" @click="confirmHandle">确认</el-button>
+        </div>
     </el-dialog>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, defineExpose, defineEmits } from 'vue';
 
 const dialogVisible = ref(false)
 const number = ref('')
-</script>
+
+const emit = defineEmits(['success'])
+
+function show() {
+    dialogVisible.value = true
+}
+
+function opne() {
+    number.value = ''
+}
+
+// 输入
+function inputHandle(n) {
+    number.value += n
+}
+
+// 删除
+function delHandle() {
+    if (!number.value) return
+    number.value = number.value.substring(0, number.value.length - 1)
+}
+
+// 确认
+function confirmHandle() {
+    emit('success', number.value)
+    dialogVisible.value = false
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-input__inner) {
+    height: 70px;
+    font-size: 36px;
+}
+
+.keybord_wrap {
+    padding: 20px 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    gap: 20px;
+
+    :deep(.el-button--large) {
+        height: 70px;
+    }
+}
+</style>