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

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>

src/views/order/index.vue

@@ -5,8 +5,9 @@
         <el-tab-pane label="全部" name="">
           <div class="demo_tabs_div">
             <el-input v-model="ordereData.orderNo" placeholder="请输入订单号查询" @input="inputChange" clearable
-              @focus="global.updateData(false)" @blur="global.updateData(true)" />
+              @focus="global.updateData(false)" @blur="global.updateData(true)" style="width: 50%;" />
             <!-- <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button> -->
+            <dateRange @success="dateConfirm" />
           </div>
           <add :loading="loadingboxshow" :ordereData="ordereData" @emititemboxshow="emititemboxshow"
             v-if="ordereData.list.length">
@@ -279,6 +280,7 @@ import add from "@/views/order/components/add.vue";
 import cashTable from "@/views/order/components/cashTable.vue";
 import { clearNoNum } from "@/utils";
 import md5 from "js-md5";
+import dateRange from './components/dateRange.vue'
 
 import { useGlobal } from "@/store/global.js";
 
@@ -313,6 +315,13 @@ const handlerecharge = () => {
 
 const buttonloading = ref(); //loading
 
+// 确认选择时间
+function dateConfirm(time) {
+  ordereData.startTime = time[0]
+  ordereData.endTime = time[1]
+  asyncorderfindOrder();
+}
+
 // 获取支付密码
 async function passwordSuccess(pwd) {
   try {
@@ -533,6 +542,8 @@ const ordereData = reactive({
   status: "",
   total: "",
   orderNo: "",
+  startTime: '',
+  endTime: ''
 });
 const asyncorderfindOrder = async () => {
   //获取流水
@@ -543,6 +554,8 @@ const asyncorderfindOrder = async () => {
       size: ordereData.size,
       page: ordereData.page,
       orderNo: ordereData.orderNo,
+      startTime: ordereData.startTime,
+      endTime: ordereData.endTime
     });
     ordereData.total = res.total;
     ordereData.list = res.list;
@@ -582,7 +595,6 @@ const callNumberHandle = async () => {
 
 onMounted(() => {
   // resetMembrform.value = { ...membrform.value }
-  asyncorderfindOrder();
 });
 </script>
 
@@ -643,6 +655,7 @@ onMounted(() => {
       .demo_tabs_div {
         padding: 0 20px;
         display: flex;
+        gap: 10px;
       }
 
       .demo_tabs_box {