cashier_admin_app/pagesOrder/index/index.vue

152 lines
3.6 KiB
Vue

<template>
<view class="min-page bg-gray u-font-28">
<up-sticky offset-top="0">
<view class="top">
<view class="search bg-fff u-p-t-32 u-p-l-28 u-p-r-28 u-p-b-32">
<up-search v-bind="search" v-model="search.val" @search="searchConfirm" @clear="searchConfirm" @custom="searchConfirm"></up-search>
</view>
<filter-vue @clearUser="clearQueryUser" @updateStatus="updateQuery('status',$event)" v-model:time="order.data.query.createdAt" :user="user" :type="option.type"></filter-vue>
</view>
</up-sticky>
<order-list @printOrder="onPrintOrder" :hasAjax="order.data.hasAjax" :list="order.data.list"></order-list>
<template v-if="order.data.list.length>0">
<my-pagination @change="pageChange" :totalElements="order.data.total"></my-pagination>
</template>
<view style="height: 100rpx;"></view>
</view>
</template>
<script setup>
import {onLoad,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
import * as Api from '@/http/yskApi/order.js'
import {queryAllShopUser} from '@/http/yskApi/shop-user.js'
import LIST from '@/commons/class/list.js'
import {$printOrder} from '@/http/yskApi/Instead.js'
import filterVue from './compoents/filter.vue';
import orderList from './compoents/order-list.vue';
import infoBox from '@/commons/utils/infoBox.js'
import {
reactive, ref, watch
} from 'vue';
import {getTodayTimestamps} from '@/commons/utils/dayjs-time.js';
const search = reactive({
val: '',
placeholder: '搜索单号/商品名称',
shape: 'square',
inputStyle: {
borderRadius: '12rpx'
},
actionStyle: {
textAlign: 'right'
}
})
const today = getTodayTimestamps();
const order=new LIST({
list: [],
query: {
createdAt: [today.start,today.end],
id: "",
orderNo: "",
orderType: "0",
page: 0,
pageSize: 10,
payType: "",
productName: "",
status: "",
userId:''
}
})
console.log(order.data);
function clearQueryUser(){
order.setQuery('userId','')
}
function pageChange(e){
const newPage=e-1
order.setVal('page',newPage)
order.setQuery('page',newPage)
init()
}
function updateQuery(key,e){
order.setQuery(key,e)
}
watch(()=>order.data.query.createdAt,(newval)=>{
init()
})
watch(()=>order.data.query.status,(newval)=>{
init()
})
watch(()=>order.data.query.userId,(newval)=>{
init()
})
function searchConfirm(){
order.setQuery('page',0)
init()
}
async function init() {
console.log(order.data.query);
const {content,totalElements}=await Api.tbOrderInfoData({...order.data.query,page:order.data.query.page,keyword:search.val})
uni.stopPullDownRefresh()
order.setVal('list',content)
console.log(order.data.list);
order.setVal('total',totalElements)
order.setVal('hasAjax',true)
}
onPullDownRefresh(()=>{
order.setQuery('page',0)
init()
})
let user=ref({
userId:''
})
const option=reactive({type:''})
onLoad((opt)=>{
Object.assign(option,opt)
if(opt&&JSON.stringify(opt)!='{}'){
order.setQuery('userId',opt.userId?opt.userId:'')
if(opt.userId){
queryAllShopUser({id:opt.userId}).then(res=>{
user.value=res.content[0]||opt
})
}
}
})
onShow(init)
async function printOrder(item){
try{
console.log(item);
const res= await $printOrder({
tableId:item.tableId
})
infoBox.showToast('已发送打印请求')
}catch(e){
console.log(e);
infoBox.showToast('发送打印请求失败')
//TODO handle the exception
}
}
function onPrintOrder(e){
console.log(e);
uni.showModal({
title: '提示',
content: '是否打印该订单',
success(res) {
if (res.confirm) {
printOrder(e)
}
}
})
}
</script>
<style>
.top {
background-color: #E5E5E5;
}
</style>