crm-app-vue3/pages/wareHouse/components/orderList/index.vue

<template>
    <u-popup :show="show" @close="openList" @open="openList" mode="right" customStyle="width: 100vw;">
        <view class="order_list">
            <u-navbar class="nav-bar" title="开单记录" :autoBack="false" :placeholder="true" v-hideNav
                @leftClick="hideList"></u-navbar>
            <view class="search_form">
                <u-search placeholder="请输入品牌名称" v-model="searchInfo.dictLabel" :showCancel="true" @custom="searchOrderList"></u-search>
                <view @click="openSearchModal">
                    <u-icon name="grid" size="20" color="#666666"></u-icon>
                </view>
            </view>
            <!-- 筛选 -->
            <u-popup mode="bottom" :round="10" :show="searchShow" closeable @close="closeSearchModal">
                <u-form class="search_pop" labelPosition="left" :model="searchInfo" ref="uForm">
                    <u-form-item label="时间范围" labelWidth="70" @click="openTimePicker">
                        <Cell :val="searchInfo.time" :isDelete="true" :border="true" @handleClear="clear('time')"></Cell>
                        <jtimePickerPopup :isShowShortTimeList="true" shortTimeTitle="快捷时间" :shortTimeList="shortTimeList"
                            :isShowSeletTimeTitle="true" seletTimeTitle="时间选择" cancelText="取消" confirmText="确认"
                            :endSelectMonth="-1" :endSelectDay="-1" beginTimePlaceHolder='开始时间' endTimePlaceHolder="结束时间"
                            :isDateTypeRange="true" :isShowSelectedTimeEcho="true" @confirm="getSelectTime" :defaultSelect="0"
                            ref="jtimePickerPopupRef">
					    </jtimePickerPopup>
                    </u-form-item>
                    <u-form-item label="开单人" @click="openRecyclePersonPicker" labelWidth="70">
                        <Cell :val="searchInfo.recyclePerson" :isDelete="true" :border="true" @handleClear="clear('recyclePerson')"></Cell>
                        <PersonPicker ref="recyclePersonPickerRef" title="请选择开单人" @selectPerson="handleSelectRecyclePerson"></PersonPicker>
                    </u-form-item>
                    <u-form-item label="物品分类" labelWidth="70">
                        <TabSelect :tabList="typeList" :echoInfo="searchInfo.type" :colNum="4" mode="multiple" labelKey="dictLabel" valueKey="dictValue" @tabChange="handleTabChangeType"></TabSelect>
                    </u-form-item>
                </u-form>
                <view class="btns">
                    <u-button text="重置" @click="resetForm"></u-button>
                    <u-button type="primary" text="确定" @click="submitSearch"></u-button>
                </view>
            </u-popup>
            <!-- 删除二次确认 -->
            <u-modal :show="deleteShow" title="确认要删除该订单吗？" :showCancelButton="true" @confirm="confirmDelete" @cancel="cancelDelete"></u-modal>
            <!-- 编辑弹窗 -->
            <OrderListEdit ref="orderListEditRef" title="编辑" :orderInfo="curInfo" @confirm="confirmEdit"></OrderListEdit>
            <scroll-view class="list_wrap" scroll-y @scrolltolower="loadMore" enable-back-to-top>
                <view class="order_item" v-for="(item, index) in orderList" :key="index">
                    <u-swipe-action>
                        <u-swipe-action-item :options="swipeOptions" @click="(e) => handleSwipeClick(e, item)">
                             <view class="order_col_1">
                                <view class="order_info title">品牌：{{ item.dictLabel || '-' }}</view>
                             </view>
                            <view class="order_col_2">
                                <view class="order_info">付款方式：{{ payTypeFormatter(item.payType) || '-' }}</view>
                                <view class="order_info">开单人：{{ item.recyclePerson || '-' }}</view>
                                <view class="order_info">开单数量：{{ item.quantity || '-' }}</view>
                                <view class="order_info">开单日期：{{ orderDateFormatter(item.orderDate) || '-' }}</view>
                                <view class="order_info">订单类型：{{ orderTypeFormatter(item.orderType) || '-' }}</view>
                                <view class="order_info">商品分类：{{ typeFormatter(item.type) || '-' }}</view>
                                <view class="order_info money">成交金额：{{ item.dealPrice || '-' }}元</view>
                                <view class="order_info money">实收总计：{{ item.amountReceived || '-' }}元</view>
                            </view>
                            <view class="order_col_1">
                                <view class="order_info">开单备注：{{ item.orderRemark || '-' }}</view>
                                <view class="order_info">收货地址：{{ item.address || '-' }}</view>
                                <view class="order_info">售后保障配置：{{ afterSaleTabFormatter(item.afterSaleTab) || '-' }}</view>
                                <view class="order_info scroll_img">支付凭证图片：
                                    <ImgsRowScroll v-if="item.payTypeProofPicFileList.length > 0" imgMode="aspectFill"
                                        :totalWidth="400" :images="item.payTypeProofPicFileList" :previewEnabled="true"
                                        :imageWidth="150" :imageHeight="150"></ImgsRowScroll>
                                    <text v-else>暂无图片</text>
                                </view>
                            </view>
                        </u-swipe-action-item>
                    </u-swipe-action>
                </view>
                <u-empty v-if="orderList.length === 0" mode="search"></u-empty>

            </scroll-view>
        </view>
    </u-popup>
</template>

<script>
import ImgsRowScroll from '@/components/imgs-row-scroll/index.vue'
import { afterSaleTabList,paymentTabList,shortTimeList } from '../../js/public.js'
import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
import Cell from '@/components/custom-cell/index.vue'
import PersonPicker from '@/components/person-picker/index.vue'
import TabSelect from '@/components/custom-tab-select/index.vue'
import OrderListEdit from './edit.vue'
export default {
    name: 'OrderList',
    components: {
        ImgsRowScroll,
        jtimePickerPopup,
        Cell,
        PersonPicker,
        TabSelect,
        OrderListEdit,
    },
    data() {
        return {
            show: false,
            orderList: [],
            searchInfo: {
                pageNum: 1,
                pageSize: 10,
                dictLabel: '',
                time: '',
                startTime: '',
                endTime: '',
                recyclePerson: '',
                recyclePersonId: '',
                type:[]
            },
            total: 0,
            orderTypeList: [],
            typeList: [],
            searchShow: false,
            deleteShow: false,
            shortTimeList: shortTimeList,
            swipeOptions: [
                {
                    text: '编辑',
                    style: {
                        backgroundColor: '#409eff'
                    }
                },
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                },
            ],
            curInfo: {},
            // payTypeProofPicFileList: ['https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/28/1769587638946-mosaic-1769587638729.jpeg','https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/28/1769587638946-mosaic-1769587638729.jpeg','https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/28/1769587638946-mosaic-1769587638729.jpeg','https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/28/1769587638946-mosaic-1769587638729.jpeg','https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/28/1769587638946-mosaic-1769587638729.jpeg'],
        }
    },
    props: {
    },
    emits: [],
    methods: {
        confirmEdit(){
            this.searchOrderList()
        },
        handleSwipeClick(e, item) {
            this.curInfo = item;
            this.$nextTick(()=>{
                if(e.index == 0){
                    this.$refs.orderListEditRef.showModal();
                } else if(e.index == 1){//删除
                    this.deleteShow = true;
                }
            })
        },
        confirmDelete() {
            uni.$u.api.wareHouseOrderDelete({
                id: this.curInfo.id
            }).then(() => {
                uni.$u.toast('删除成功');
                this.deleteShow = false;
                this.show = false;
                this.searchOrderList();
            }).catch(err => {
                uni.$u.toast(err || '删除失败');
            });
        },
        cancelDelete(){
            this.deleteShow = false;
        },
        clear(val){
            if(val == 'time'){
                this.searchInfo.time = '';
                this.searchInfo.startTime = '';
                this.searchInfo.endTime = '';
            }
            if(val == 'recyclePerson'){
                this.searchInfo.recyclePerson = '';
                this.searchInfo.recyclePersonId = '';
            }
        },
        getSelectTime(val) {
            this.searchInfo.startTime = this.$dayjs(val.beginTime).format('YYYY-MM-DD');
            this.searchInfo.endTime = this.$dayjs(val.endTime).format('YYYY-MM-DD');
            this.searchInfo.time = this.$dayjs(val.beginTime).format('YYYY-MM-DD') + ' 至 ' + this.$dayjs(val.endTime).format('YYYY-MM-DD');
            this.searchOrderList();
        },
        openSearchModal() {
            this.searchShow = true;
            this.$nextTick(() => {
                this.$refs.jtimePickerPopupRef.handleInit();
            })
        },
        closeSearchModal() {
            this.searchShow = false;
        },
        openTimePicker() {
            this.$refs.jtimePickerPopupRef.pickerShow();
        },
        openRecyclePersonPicker() {
            this.$refs.recyclePersonPickerRef.open();
        },
        handleSelectRecyclePerson(person) {
            this.searchInfo.recyclePerson = person.label;
            this.searchInfo.recyclePersonId = person.id;
        },
        handleTabChangeType(val){
            this.searchInfo.type = val
        },
        loadMore() {
            if (this.orderList.length >= this.total){
                uni.$u.toast('没有更多了');
                return;
            };
            this.searchInfo.pageNum++;
            this.getOrderList();
        },
        payTypeFormatter(type) {
            return paymentTabList.find(tab => tab.value == type)?.name || '-';
        },
        afterSaleTabFormatter(tabs) {
            let tabNames = [];
            tabs.forEach(item => {
                tabNames.push(afterSaleTabList.find(tab => tab.value == item)?.name || '-');
            })
            return tabNames.join('、');
        },
        async getOrderType(){
            this.orderTypeList = await this.$getDicts("crm_sendOrder_type");
        },
         orderTypeFormatter(type) {
            const obj = this.orderTypeList.find(item => item.dictValue == type) || {};
            return obj.dictLabel || '-';
        },
        async getTypeList(){
            this.typeList = await this.$getDicts("crm_form_category");
        },
        typeFormatter(type) {
            const obj = this.typeList.find(item => item.dictValue == type) || {};
            return obj.dictLabel || '-';
        },
        orderDateFormatter(date) {
            if (!date) return '-';
            return this.$dayjs(date).format('YYYY-MM-DD');
        },
        searchOrderList() {
            this.searchInfo.pageNum = 1;
            this.getOrderList();
        },
        submitSearch() {
            this.searchShow = false;
            this.searchOrderList();
        },
        resetForm() {
            this.searchInfo.time = ''
            this.searchInfo.startTime = ''
            this.searchInfo.endTime = ''
            this.searchInfo.recyclePerson = ''
            this.searchInfo.recyclePersonId = ''
            this.searchInfo.type = []
        },
        getOrderList() {
            uni.$u.api.wareHouseOrderList({
                pageNum: this.searchInfo.pageNum,
                pageSize: this.searchInfo.pageSize,
                dictLabel: this.searchInfo.dictLabel || '',
                startTime: this.searchInfo.startTime || '',
                endTime: this.searchInfo.endTime || '',
                recyclePerson: this.searchInfo.recyclePerson || '',
                recyclePersonId: this.searchInfo.recyclePersonId || '',
                type: this.searchInfo.type || [],
            }).then(res => {
                if(res.rows.length == 0){
                    uni.$u.toast("暂无订单");
                    this.orderList = [];
                    this.total = 0;
                    return;
                }
                if (this.searchInfo.pageNum === 1) {
                    this.orderList = res.rows;
                } else {
                    this.orderList = this.orderList.concat(res.rows);
                }
                this.total = res.total || 0;
            })
        },
        openList() {
            this.show = true;
            this.resetForm();
            this.searchInfo.pageNum = 1;
            this.searchInfo.pageSize = 10;
            this.getOrderList();
            this.getOrderType();
            this.getTypeList();
        },
        hideList() {
            this.show = false;
        },
    }
}
</script>

<style lang="scss" scoped>
@import '../../styles/orderList/index.scss';
</style>