qimall/addons/Happiness/backend/views/store-voucher-order/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>提货管理</span>
        </div>
        <div class="table-body">
            <div>
                <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                    <div class="flex">
                        <el-form-item label="">
                            <el-input placeholder="请输入小店ID|昵称" v-model="search_data.store_keyword"
                                      clearable></el-input>
                        </el-form-item>
                        <el-form-item label="提货时间">
                            <el-date-picker v-model="dates" size="small" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="selectedDates"> </el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                            <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <el-table :data="list" stripe v-loading="listLoading" size="small" style="margin-bottom: 15px; width: 100%">
                <el-table-column label="提货时间" width="200" prop="money">
                    <template slot-scope="scope">
                        <div v-if="scope.row.created_at>0">{{scope.row.created_at | dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="order_no" label="提货批次" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.order_no}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="收货人信息" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>收货人姓名: {{scope.row.user_name}}</div>
                        <div>手机号: {{scope.row.mobile}}</div>
                        <div>地址: {{scope.row.address}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="配送方式" align="center">
                        <div>物流配送</div>
                </el-table-column>
                <el-table-column prop="store_id" label="小店ID" align="center"></el-table-column>
                <el-table-column label="小店名称" width="200" prop="store_name">
                    <template slot-scope="scope">
                        <div>{{scope.row.store.store_name}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="状态" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>{{scope.row.order_status_text}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" align="center" width="200">
                    <template slot-scope="scope">
                        <template>
                            <el-button v-if="scope.row.order_status==0" type="text" size="small" @click="audit(scope.row)">审核</el-button>
                            <el-button v-if="scope.row.order_status==1" type="text" size="small" @click="send(scope.row)">确认发货</el-button>
                            <el-button v-if="scope.row.order_status==2" type="text" size="small" @click="send(scope.row)">继续发货</el-button>
                            <el-button v-if="scope.row.order_status>=1" type="text" size="small" @click="express
                            (scope.row)">发货详情</el-button>
                            <el-button v-if="scope.row.order_status>=1" type="text" size="small" @click="showGoods(scope.row)">查看商品</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
        <el-dialog title="是否允许提货" :visible.sync="dialogVisible" width="500px">
            <el-form :inline="true" :model="auditForm" size="small" class="demo-form-inline">
                <!--提货的商品-->
                <div>
                <el-table :data="detail.goods" stripe size="small" style="margin-bottom: 15px; width: 100%">
                    <el-table-column label="商品图片" width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.cover_pic">
                                <img :src="scope.row.cover_pic" style="width: 50px;heightheight: 50px;">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="200">
                        <template slot-scope="scope">
                            <div>{{scope.row.goods_name}}{{scope.row.goods_attr_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="提货数量">
                        <template slot-scope="scope">
                            <div>{{scope.row.num}}件</div>
                        </template>
                    </el-table-column>
                </el-table>
                </div>
                <div style="margin-top: 20px">
                <el-input v-if="auditForm.status==0" placeholder="请输入备注" v-model="auditForm.remark" type="textarea"
                          clearable></el-input>
                </div>
                <div style="margin-top: 20px;text-align: center">
                <el-radio-group v-model="auditForm.status">
                    <el-radio label="1">允许提货</el-radio>
                    <el-radio label="0">拒绝提货</el-radio>
                </el-radio-group>
                </div>
                <div style="margin-top: 20px;text-align: center">
                <el-button size="mini" type="primary" :loading="btnLoading" @click="handle('audit',auditForm)">提交</el-button>
                <el-button size="mini" @click="dialogVisible=false">取消</el-button>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog title="确认发货" :visible.sync="dialogSendVisible" width="1200px">
            <el-form :inline="true" :model="sendForm" size="small" class="demo-form-inline">
                <el-form-item label="发货单号">
                    <el-input size="small" v-model="sendForm.express_no" placeholder="请输入发货单号"></el-input>
                </el-form-item>
                <el-form-item label="物流公司">
                    <el-input size="small" v-model="sendForm.express_company" placeholder="请输入物流公司"></el-input>
                </el-form-item>
                <el-table :data="sendForm.goods" stripe size="small" style="margin-bottom: 15px; width: 100%">
                    <el-table-column label="商品图片" width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.cover_pic">
                                <img :src="scope.row.cover_pic" style="width: 50px;heightheight: 50px;">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="200">
                        <template slot-scope="scope">
                            <div>{{scope.row.goods_name}}{{scope.row.goods_attr_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="提货数量">
                        <template slot-scope="scope">
                            <div>{{scope.row.leave_num}}件</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="生产日期">
                        <template slot-scope="scope">
                            <el-date-picker size="small" style="width: 150px" v-model="scope.row.create_date"
                                            size="small"
                                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"> </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column label="保质期">
                        <template slot-scope="scope">
                            <el-input style="width: 100px" size="small" v-model="scope.row.save_day"
                                      type="number">
                            </el-input>
                            天
                        </template>
                    </el-table-column>
                    <el-table-column label="过期时间" >
                        <template slot-scope="scope">
                            <div v-if="scope.row.create_date && scope.row.save_day">
                                <!-- 显示计算结果并同时更新数据模型 -->
                                {{ updateAndShowExpireDate(scope.row, scope.$index) }}
                            </div>
                            <div v-else>
                                {{ scope.row.expire_date }}
                            </div>
                        </template>

                    </el-table-column>
                    <el-table-column label="发货数量">
                        <template slot-scope="scope">
                            <el-input style="width: 100px" size="small" v-model="scope.row.send_num" placeholder="发货数量" :min="1"
                                       :max="scope.row.leave_num" type="number" clearable></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px;text-align: center">
                    <el-button size="mini" type="primary" :loading="btnLoading" @click="handle('send',sendForm)">提交</el-button>
                    <el-button size="mini" @click="dialogSendVisible=false">取消</el-button>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog title="发货详情" :visible.sync="dialogExpressVisible" width="1200px">
            <div v-for="(item,index) in express_list">
                <div style="margin-left: 10px"><span style="margin-right: 50px">物流单号:{{item
                        .express_no}}</span><span>物流公司:{{item
                    .express_company}}</span></div>
                <el-table :data="item.goods" stripe size="small" style="margin-bottom: 15px; width: 100%">
                    <el-table-column label="商品图片" width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.cover_pic">
                                <img :src="scope.row.cover_pic" style="width: 50px;heightheight: 50px;">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="200">
                        <template slot-scope="scope">
                            <div>{{scope.row.goods_name}}{{scope.row.goods_attr_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="提货数量">
                        <template slot-scope="scope">
                            <div>{{scope.row.buy_num}}件</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="生产日期">
                        <template slot-scope="scope">
                            <div>{{scope.row.create_date | dateTimeFormat("Y-m-d")}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="保质期">
                        <template slot-scope="scope">
                            <div>{{scope.row.save_day}}天</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="过期时间" >
                        <template slot-scope="scope">
                            <div>{{scope.row.expire_date | dateTimeFormat("Y-m-d")}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发货数量">
                        <template slot-scope="scope">
                            <div>{{scope.row.num}}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 20px;text-align: center">
                <el-button size="mini" @click="dialogExpressVisible=false">取消</el-button>
            </div>

        </el-dialog>
        <el-dialog title="查看商品" :visible.sync="dialogGoodsVisible" width="1200px">
            <el-table :data="detail.goods" stripe size="small" style="margin-bottom: 15px; width: 100%">
                <el-table-column label="商品图片" width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cover_pic">
                            <img :src="scope.row.cover_pic" style="width: 50px;heightheight: 50px;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="200">
                    <template slot-scope="scope">
                        <div>{{scope.row.goods_name}}{{scope.row.goods_attr_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="提货数量">
                    <template slot-scope="scope">
                        <div>{{scope.row.num}}件</div>
                    </template>
                </el-table-column>
                                <el-table-column label="剩余待发数量">
                    <template slot-scope="scope">
                        <div>{{scope.row.leave_num}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px;text-align: center">
                <el-button size="mini" @click="dialogGoodsVisible=false">取消</el-button>
            </div>

        </el-dialog>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                search_data: {
                    store_keyword:'',
                    start_time:'',
                    end_time:''
                },
                btnLoading:false,
                list: [],
                dates: null,
                page: 1,
                pageCount: 0,
                listLoading: false,

                auditForm:{
                    id:'',
                    remark:'',
                    status:'1',
                },
                sendForm:{
                    id:'',
                    express_company:'',
                    express_no:'',
                    goods:[]
                },
                detail:[],
                dialogVisible:false,
                dialogSendVisible:false,
                dialogExpressVisible:false,
                dialogGoodsVisible:false,
                express_list:[],
            };
        },
        mounted: function() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.store_keyword) || !isEmpty(this.search_data.start_time) || !isEmpty(this.search_data
                    .end_time);
            }
        },
        methods: {
            // 添加更新并显示过期日期的方法
            updateAndShowExpireDate(row, index) {
                const expireDate = this.getComputedExpireDate(row.create_date, row.save_day);
                // 更新数据模型
                this.$set(this.sendForm.goods[index], 'expire_date', expireDate);
                // 返回显示值
                return expireDate;
            },
            // 计算过期日期显示值
            getComputedExpireDate(createDate, saveDay) {
                if (!createDate || !saveDay) return '';
                try {
                    let date = new Date(createDate);
                    date.setDate(date.getDate() + parseInt(saveDay));
                    return date.toISOString().split('T')[0];
                } catch (e) {
                    return '';
                }
            },

            // 选中时间
            selectedDates(e) {
                if (e) {
                    this.search_data.start_time = e[0];
                    this.search_data.end_time = e[1];
                } else {
                    this.search_data.start_time = '';
                    this.search_data.end_time = '';
                    this.dates = null;
                }
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getDetail(id,type)
            {
                let self = this;
                request({
                    params: {
                        r: 'happiness/store-voucher-order/detail',
                        id: id,
                    },
                    method: 'get',
                }).then(e => {
                    if(e.data.code === 0)
                    {
                        self.detail=e.data.data;
                        if(type=='send')
                        {
                            self.sendForm.goods=[]
                            for(let i in e.data.data.goods)
                            {
                                if(e.data.data.goods[i].leave_num>0)
                                {
                                    self.sendForm.goods.push({
                                        goods_id:e.data.data.goods[i].goods_id,
                                        goods_name:e.data.data.goods[i].goods_name,
                                        goods_attr_name:e.data.data.goods[i].goods_attr_name,
                                        leave_num:e.data.data.goods[i].leave_num,
                                        attr_id:e.data.data.goods[i].attr_id,
                                        send_num:0,
                                        create_date:'',
                                        expire_date:'',
                                        save_day:'',
                                        id:e.data.data.goods[i].id,
                                        cover_pic:e.data.data.goods[i].cover_pic,
                                    })
                                }

                            }
                        }
                        if(type=='audit')
                        {
                            self.auditForm.goods=e.data.data.goods;
                        }
                    }
                    else
                    {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            express(row)
            {
                this.dialogExpressVisible=true;
                let self = this;
                let basic_params = {
                    r: 'happiness/store-voucher-order/express',
                    id:row.id
                };
                request({
                    params: basic_params,
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code === 0) {
                        self.express_list = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });

            },
            audit(row)
            {
                this.auditForm.id=row.id;
                this.getDetail(row.id,'audit');
                this.dialogVisible=true;
            },
            send(row)
            {
                this.sendForm.id=row.id;
                this.getDetail(row.id,'send');
                this.dialogSendVisible=true;
            },
            showGoods(row)
            {
                this.sendForm.id=row.id;
                this.getDetail(row.id,'goods');
                this.dialogGoodsVisible=true;
            },
            getList(id) {
                let self = this;
                let basic_params = {
                    r: 'happiness/store-voucher-order/index',
                    page: self.page,
                };
                params = Object.assign(basic_params, this.search_data);
                if (self.listLoading === false) {
                    self.listLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.list = e.data.data.list;
                            self.pageCount = e.data.data.page_count;

                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {

                    });
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },
            clearSearch() {
                this.search_data.store_keyword = null;
                this.search_data.start_time = null;
                this.search_data.end_time = null;
                this.dates = null;
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                let user_id = data ? parseInt(data.user_id) : '';
                switch (type) {
                    case 'audit':
                        //确认提示
                        this.btnLoading=true;
                        this.$request({
                            params: {
                                r: 'happiness/store-voucher-order/switch-status'
                            },
                            data:this.auditForm,
                            method: 'post',
                        }).then(e => {
                            if (e.data.code === 0) {
                                if(this.auditForm.status==1)
                                {
                                    this.$message.success('审核通过');
                                }
                                else
                                {
                                    this.$message.success('已拒绝');
                                }

                                this.getList();
                                this.btnLoading=false;
                                this.dialogVisible=false;
                            } else {
                                this.$message.error(e.data.msg);
                                this.btnLoading=false;
                            }

                        }).catch(e => {
                        });
                        break;
                    case 'send':
                        //确认提示
                        this.btnLoading=true;
                        this.$request({
                            params: {
                                r: 'happiness/store-voucher-order/send'
                            },
                            data:this.sendForm,
                            method: 'post',
                        }).then(e => {
                            if (e.data.code === 0) {
                                this.$message.success('发货成功');
                                this.getList();
                                this.btnLoading=false;
                                this.dialogSendVisible=false;
                            } else {
                                this.$message.error(e.data.msg);
                                this.btnLoading=false;
                            }

                        }).catch(e => {
                        });
                        break;
                }
            },
        }
    })
</script>

<style>
    .flex {
        display: flex;
        align-items: center;
    }
    .stat_details{
        padding: 0 0 20px;
        display: flex;
    }
    .stat_details .order_module{
        flex: 1;
        background: #F2F2F2;
        margin: 0 5px;
        padding: 20px 25px;
    }

    .order_module{
        display: flex;
        flex-direction: column;
    }

    .order_module:last-child{
        margin-right: 0;
    }

    .order_module:first-child{
        margin-left: 0;
    }

    .price{
        font-size: 14px;
        flex: 1;
        word-break: break-all;
    }

    .oirder_modul_title{
        font-size: 12px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
    ..el-input__inner{
        border-right: 1px solid #EBEEF5;
    }

    .oirder_modul_title .text{
        margin-right: 10px;
    }
    .stat_icon{
        font-size: 19px;
        color: #BFBFBF;
    }
</style>