qimall/addons/CloudStock/backend/views/agent/dispense-order-management.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-list-page');
ComponentHelper::loadComponentView('com-list-table');
ComponentHelper::loadComponentView('com-user-info');
ComponentHelper::loadComponentView('com-export-dialog');
$diyPath = dirname(__DIR__) . '/components';

?>

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
            ref="table"
            :api="'cloud-stock/agent/dispense-order-management'"
            @selection-change="handleSelectionChange"
            :search-list="searchList"
            @search="handleSearch"
    >
        <el-table-column prop="user" align="center" min-width="180" label="代理商">
            <template slot-scope="scope">
                <com-user-info :user="scope.row.user"></com-user-info>
            </template>
        </el-table-column>

        <el-table-column align="center" prop="counts" label="配货总次数"></el-table-column>
        <el-table-column align="center" prop="num" label="配货商品数量">
            <template slot-scope="scope">
                {{scope.row.num}}
                <el-button circle size="mini" type="text" @click="showDetail(scope.row)" v-if="scope.row.num>0">
                    查看详情
                </el-button>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="money" label="配货商品总金额(元)"></el-table-column>

        <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
                <el-button circle size="mini" type="text" @click="toDispenseOrderManagement(scope.row)">
                    配货明细
                </el-button>
            </template>
        </el-table-column>
        <template slot="header-left">
            <com-export-dialog
                    style="margin-left: 20px "
                    :field_list='exportList'
                    :action_url='export_url'
                    :params="searchInfo">
            </com-export-dialog>
        </template>
    </com-list-table>
    <el-dialog title="商品详情" :visible.sync="dialogTableVisible" center width="30%">
        <el-table :data="gridData">
            <el-table-column prop="name" label="商品信息">
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <div style="margin-right:10px;"><img :src="scope.row.goods.cover_pic"
                                                             style="width: 40px;height: 40px;display: block;"/>
                        </div>
                        <div>
                            <div style="text-align: left;line-height: 16px;">
                                {{scope.row.goods.goods_name}}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="num" label="商品数量" align="center"></el-table-column>
        </el-table>
    </el-dialog>
</com-list-page>


<script>
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '配货管理',
                    router: '',
                }
            ],
            searchList: [
                {
                    key: 'keyword',
                    title: '请输入用户昵称/手机号搜索',
                    type: 'text',
                },
                {
                    key: 'date',
                    title: '日期',
                    type: 'date-picker',
                    valueFormat: 'yyyy-MM-dd',
                },
            ],
            btnLoad: false,
            apply_edit: false,
            dialogTableVisible: false,
            id: 0,
            start: '',
            end: '',
            gridData: [],
            export_url: 'cloud-stock/agent/dispense-order-management',     // 导出路径
            exportList: {},
            searchInfo: {
                keyword: '',
                date: [],
            },
        },
        mounted() {
            this.getExportList();
        },
        methods: {
            toDispenseOrderManagement(row) {
                let params = {
                    r: 'cloud-stock/order/index',
                    keyword: row.user_id,
                    type: 1,
                    list_type: 'dispense_order',
                    start: this.start,
                    end: this.end,
                };
                navigateTo(params, true);
            },
            showDetail(row) {
                this.dialogTableVisible = true;
                let self = this;
                request({
                    params: {
                        r: 'cloud-stock/agent/get-detail',
                        user_id: row.user_id,
                        start: self.start,
                        end: self.end,
                    },
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code === 0) {
                        self.gridData = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },

            handleSelectionChange(val) {
                console.log(val);
                this.multipleSelection = val;
            },
            handleSearch(keyword) {
                this.searchInfo.keyword = keyword.keyword;
                this.searchInfo.date.push(keyword.date[0]);
                this.searchInfo.date.push(keyword.date[1]);
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                let status = data ? parseInt(data.status) : '';
                switch (type) {
                    case 'status':
                        let self = this;
                        self.listLoading = true;
                        request({
                            params: {
                                r: 'cloud-stock/price-difference-gift-package/switch-status',
                            },
                            method: 'post',
                            data: {
                                id: id,
                                status: status,
                            }
                        }).then(e => {
                            self.listLoading = false;
                            if (e.data.code === 0) {
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                            self.getList();
                        }).catch(e => {
                            console.log(e);
                        });
                        break;

                    default:
                        break;
                }
            },
            getList() {
                this.$refs.table.handleSearch();
            },
            batchActivation(status) {
                if (!this.multipleSelection || this.multipleSelection.length == 0) {
                    this.$message.error('请选择要操作的数据');
                    return;
                }
                var ids = [];
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    ids.push(this.multipleSelection[i].id);
                }
                let self = this;
                self.$confirm('选中的数据，是否批量启用?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'cloud-stock/price-difference-gift-package/switch-status',
                        },
                        method: 'post',
                        data: {
                            id: ids,
                            status: status,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            this.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            getExportList() {
                this.listLoading = true;
                let params = {
                    r: 'cloud-stock/agent/get-export-list',
                };
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.exportList = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },


        }
    })
</script>