qimall/addons/Happiness/agent/views/move/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>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="all">
            </el-tab-pane>
            <el-tab-pane label="待调货" name="0">
            </el-tab-pane>
            <el-tab-pane label="已调货" name="1">
            </el-tab-pane>
            <el-tab-pane label="已拒绝" name="2">
            </el-tab-pane>
        </el-tabs>
        <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 v-model="search_data.keyword" placeholder="请输入小店名称/ID"
                                      size="small"></el-input>
                        </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="小店ID" width="200" prop="store_id" align="center">
                </el-table-column>
                <el-table-column label="小店信息" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="user_img" flex="cross:center">
                            <el-image class="default-avatar" :src="scope.row.logo_img">
                                <div slot="error" class="image-slot">
                                    <com-image style="float: left;margin-right: 10px;" mode="aspectFill" :src="scope
                                    .row.logo_img"></com-image>
                                </div>
                            </el-image>
                            <div>{{scope.row.store_name}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="调货信息" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="table-info-img-text">
                            <el-image class="table-info-img " :src="scope.row.goods_image">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="table-info-text">
                                <div>{{scope.row.goods_name}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="调货数量" width="200" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.total_num}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="价格" width="200" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.total_price}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="200" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.remark}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="调货小店ID" width="200" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.give_store_id?scope.row.give_store_id:''}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="调货小店信息" align="center" width="200">
                    <template slot-scope="scope">
                        <div class="user_img" flex="cross:center" v-if="scope.row.giveStore">
                            <el-image class="default-avatar" :src="scope.row.giveStore.logo_img">
                                <div slot="error" class="image-slot">
                                    <com-image style="float: left;margin-right: 10px;" mode="aspectFill" :src="scope
                                    .row.giveStore.logo_img"></com-image>
                                </div>
                            </el-image>
                            <div>{{scope.row.giveStore.store_name}}</div>
                        </div>
                    </template>
                </el-table-column>

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

                <el-table-column label="操作" width="200" fixed="right" align="center">
                    <template slot-scope="scope">
                        <template>
                            <el-button v-if="scope.row.order_status==0" type="text"
                                       size="small" @click="confirm(scope
                            .row,1)">同意
                            </el-button>
                            <el-button v-if="scope.row.order_status==0" type="text"
                                       size="small" @click="confirm(scope
                            .row,0)">拒绝
                            </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="audit_title" :visible.sync="dialogAuditVisible" width="1200px">
            <el-form ref="auditForm" :model="auditForm" label-width="120px">
                <el-table :data="attr_list" stripe v-loading="listLoading" size="small"
                          style="margin-bottom: 15px; width: 100%">
                    <el-table-column label="商品图片" width="200" align="center">
                        <template slot-scope="scope">
                            <el-image class="default-avatar" :src="scope.row.attr.pic_url?scope.row.attr
                            .pic_url:scope.row.goods.cover_pic">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品规格" width="200">
                        <template slot-scope="scope">
                            <div>{{scope.row.attr.name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格ID" width="200">
                        <template slot-scope="scope">
                            <div>{{scope.row.attr.id}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="调货数量" width="200">
                        <template slot-scope="scope">
                            <div>{{scope.row.num}}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-form-item label="选择调货的小店" v-if="auditForm.audit_status==1">
                    <el-select v-model="auditForm.store_id" placeholder="请选择" size="mini">
                        <el-option v-for="item in give_store_list" :key="item.id" :label="item.store_name"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="auditForm.remark" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button size="mini" @click="dialogAuditVisible = false">取消</el-button>
                <el-button size="mini" type="primary" @click="audit">确定</el-button>
            </div>

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

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

                detail: [],
                dialogExpressVisible: false,
                dialogAuditVisible: false,
                express_list: [],
                audit_title: '',
                auditForm: {
                    remark: '',
                    audit_status: '',
                    store_id: '',
                    id: ''
                },
                give_store_list:[],
                attr_list:[]
            };
        },
        mounted: function () {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function () {
                return !isEmpty(this.search_data.keyword)
            }
        },
        methods: {
            handleClick()
            {
                this.page=1
                this.getList()
            },
            confirm(row, status) {
                if (status == 1) {
                    this.audit_title = '是否同意调货';

                }
                if (status == 0) {
                    this.audit_title = '是否拒绝调货';
                }
                this.auditForm.id = row.id
                this.auditForm.audit_status = status
                this.dialogAuditVisible = true
                this.btnLoading = true
                this.attr_list=[]
                this.give_store_list=[]
                this.$request({
                    params: {
                        r: 'happiness/agent/move/move',
                        id: row.id
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.attr_list=e.data.data.goods_list
                        this.give_store_list=e.data.data.store_list
                        this.btnLoading = false;
                    } else {
                        this.$message.error(e.data.msg);
                        this.btnLoading = false;
                    }
                }).catch(e => {
                });

            },
            audit() {
                let self = this
                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'happiness/agent/move/move'
                    },
                    data: self.auditForm,
                    method: 'post',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.getList();
                        this.btnLoading = false;
                        this.dialogAuditVisible=false;
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                        this.btnLoading = false;
                    }
                }).catch(e => {
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getList(id) {
                let self = this;
                let basic_params = {
                    r: 'happiness/agent/move/index',
                    page: self.page,
                    status: self.activeName
                };
                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.keyword = '';
                this.getList();
            }
        }
    })
</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;
    }

    .user_img {
        position: relative;
        margin-right: 8px;
        /* height: 50px;
        width: 50px; */
    }

    .default-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 8px;
    }
</style>