bailicangdu / vue2-manage

A admin template based on vue + element-ui. 基于vue + element-ui的后台管理系统基于 vue + element-ui 的后台管理系统
https://cangdu.org/manage/
GNU General Public License v2.0
13.49k stars 4.33k forks source link

请教一下 会员电话和会员订的餐名怎么才能同时get到? #190

Open xiaobaixxx opened 3 years ago

xiaobaixxx commented 3 years ago
<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <el-table
                :data="tableData"
                @expand='expand'
                :expand-row-keys='expendRow'
                :row-key="row => row.index"
                style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="用户名" >
                                <span>{{ props.row.user_name }}</span>
                            </el-form-item>
                            <el-form-item label="店铺名称">
                                <span>{{ props.row.restaurant_name }}</span>
                            </el-form-item>
                            <el-form-item label="收货地址">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                            <el-form-item label="店铺 ID">
                                <span>{{ props.row.restaurant_id }}</span>
                            </el-form-item>
                            <el-form-item label="店铺地址">
                                <span>{{ props.row.restaurant_address }}</span>
                            </el-form-item>
                            <el-form-item label="餐">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    label="订单 ID"
                    prop="id">
                </el-table-column>
                <el-table-column
                    label="总价格"
                    prop="total_amount">
                </el-table-column>
                <el-table-column
                    label="店铺"
                    prop="restaurant_name">
                </el-table-column>

               <el-table-column
                    label="餐"
                    prop="name">
                </el-table-column>
                <el-table-column
                    label="会员电话"
                    prop="phone">
                </el-table-column>

                <el-table-column
                    label="订单时间"
                    prop="formatted_created_at">
                </el-table-column>
                <el-table-column
                    label="订单状态"
                    prop="status">
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
   import {getOrderList, getOrderCount, getResturantDetail, getUserInfo, getAddressById} from** '@/api/getData'
    export default {
        data(){
            return {
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
                restaurant_id: null,
                expendRow: [],
            }
        },
        components: {
            headTop,
        },
        created(){
            this.restaurant_id = this.$route.query.restaurant_id;
            this.initData();

        },
        mounted(){

        },

        methods: {
            async initData(){
                try{
                    const countData = await getOrderCount({restaurant_id: this.restaurant_id});
                    const countDataFoods = await getFoodsCount({restaurant_id: this.restaurant_id});
                    if (countData.status&&countDataFoods.status == 1) {
                        this.count = countData.count;
                        this.count = countDataFoods.count;

                    }else{
                        throw new Error('获取数据失败');
                    }
                    this.getOrders() && this.getFoods();

                }catch(err){
                    console.log('获取数据失败', err);
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.getOrders()
            },
            async getOrders(){
                const Orders = await getOrderList({offset: this.offset, limit: this.limit, restaurant_id: this.restaurant_id});
                this.tableData = [];
                Orders.forEach((item, index) => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.total_amount = item.total_amount;
                    tableData.status = item.status_bar.title;
                    tableData.user_id = item.user_id;
                    tableData.restaurant_id = item.restaurant_id;
                    tableData.restaurant_name = item.restaurant_name;
                    tableData.address_id = item.address_id;
                    tableData.index = index;
                    tableData.formatted_created_at = item.formatted_created_at;
                   //表格不相同
                    tableData.phone = item.phone;
                    //便利name的值
                    tableData.name = item.name;
                    this.tableData.push(tableData);
                })

            },

            async expand(row, status){
                if (status) {
                    const restaurant = await getResturantDetail(row.restaurant_id);
                    const userInfo = await getUserInfo(row.user_id);
                    const addressInfo = await getAddressById(row.address_id);

                    this.tableData.splice(row.index, 1, {...row, ...{restaurant_name: restaurant.name, restaurant_address: restaurant.address, address: addressInfo.address, user_name: userInfo.username}});
                    this.$nextTick(() => {
                        this.expendRow.push(row.index);
                    })
                }else{
                    const index = this.expendRow.indexOf(row.index);
                    this.expendRow.splice(index, 1)
                }
            },
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';
    .table_container{
        padding: 20px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>