优化打印 订单新增桌号和时间筛选

src/views/order/components/add.vue

@@ -6,8 +6,8 @@
 
             <div class="demo_tabs_boxitem_one">
                 <div class=""
-                    style="width: 100px; height: 70px;border-radius: 10px; background:rgb(186 200 239); display: flex; justify-content: center; align-items: center;">
-                    <div>{{ item.zdNo || "pos" }}</div>
+                    style="width: 100px; height: 70px;border-radius: 4px; background:rgb(186 200 239); display: flex; justify-content: center; align-items: center;">
+                    <div>{{ item.tableName || "pos" }}</div>
                 </div>
                 <!-- <el-image style="width: 100px; height: 70px;border-radius: 10px;" :src="item.imgUrl" fit="scale-down" /> -->
                 <div class="demo_tabs_boxitem_oneone">
@@ -64,17 +64,15 @@ const clickitemboxshow = (e) => {
 <style scoped lang="scss">
 .demo_tabs_box {
     width: 100%;
-    padding: 10px 20px;
     height: 82%;
     overflow: auto;
 
     .demo_tabs_boxitem {
         width: 100%;
-        padding: 6px 16px;
-        border-radius: 6px;
+        padding: 10px 0;
         display: flex;
         justify-content: space-between;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid #ececec;
         position: relative;
 
         .demo_tabs_boxitem_oneyt {

src/views/order/components/dateRange.vue

@@ -0,0 +1,78 @@
+<template>
+    <el-date-picker v-model="dateVlaue" type="daterange" :editable="false" :shortcuts="shortcuts" range-separator="至"
+        start-placeholder="开始时间" end-placeholder="结束时间" :clearable="false" @change="dateConfirm" />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { dayjs } from 'element-plus'
+
+const emits = defineEmits(['success'])
+
+const shortcuts = [
+    {
+        text: '今天',
+        value: () => {
+            return [
+                dayjs()
+                    .startOf("day"),
+                dayjs()
+                    .endOf("day")
+            ]
+        },
+    },
+    {
+        text: '本月',
+        value: () => {
+            return [
+                dayjs()
+                    .startOf("month"),
+                dayjs()
+                    .endOf("month")
+            ]
+        },
+    },
+    {
+        text: '最近三个月',
+        value: () => {
+            return [
+                dayjs()
+                    .add(-3, "M"),
+                dayjs()
+                    .endOf("month")
+            ]
+        },
+    },
+    {
+        text: '本年',
+        value: () => {
+            return [
+                dayjs()
+                    .startOf("year"),
+                dayjs()
+                    .endOf("year")
+            ]
+        },
+    },
+]
+
+const dateVlaue = ref([dayjs(), dayjs()])
+const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
+
+// 确认选择时间
+function dateConfirm(value) {
+    // console.log(value);
+    emits('success', [
+        dayjs(value[0]).format(format[0]),
+        dayjs(value[1]).format(format[1]),
+    ])
+}
+
+onMounted(() => {
+    // 创建组件后执行一次时间传递
+    emits('success', [
+        dayjs(dateVlaue[0]).format(format[0]),
+        dayjs(dateVlaue[1]).format(format[1]),
+    ])
+})
+</script>