jiaoyi-vue/src/views/merchant/order/after/components/table.vue

<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="订单编号" width="260" fixed="left" prop="goods_id">
            <template #default="scope">
                <div class="order-name">
                    <span>{{ scope.row.order_sn }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="投诉事项" prop="types" width="220">
            <template #default="scope">
                {{ scope.row.question?scope.row.question:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="types" width="100">
            <template #default="scope">
                {{ scope.row.mobile?scope.row.mobile:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="商品编码" width="340" prop="name">
            <template #default="scope">
                <div class="goods-img">
                    <div class="name">
                        <span>{{ scope.row.orders?scope.row.orders.product_id:'-' }}</span>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="types" width="160" align="left">
            <template #default="scope">
                <div class="order-name" v-if="scope.row.status == 0">
                    <span>待处理</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 1">
                    <span>已完成</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="发起时间" prop="create_at" width="160"></el-table-column>
        <el-table-column label="处理时间" prop="last_at" width="160">
            <template #default="scope">
                {{ scope.row.last_at?scope.row.last_at:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="left" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button size="small" text @click="table_view(scope.row)">详情</el-button>
                    <el-button type="danger" v-if="scope.row.status==0" text size="small" @click="table_del(scope.row)">回复</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <orderDetail ref="orderDetail" @success="orderSuccess"></orderDetail>
    <formMain ref="formMain" @success="orderSuccess"></formMain>
</template>

<script>
import orderDetail from "./detail";
import formMain from "./form";
export default {
    components:{
        orderDetail,formMain
    },
    data(){
        return {
            list: {
                apiObj: this.$API.merComplaint.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{}
        }
    },
    methods: {
        orderSuccess(){
            this.$refs.table.refresh()
        },
        table_view(data){
            this.$nextTick(() => {
                this.$refs.orderDetail.open("edit").setData(data)
            })
        },
        table_del(data){
            this.$nextTick(() => {
                this.$refs.formMain.open("edit").setData(data)
            })
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        selectionChange(event){
            this.dataSelect = [];
            var arr = [];
            var arrCompany = [];
            event.forEach(function(val,index){
                arr[index] = val.id;
                arrCompany[index] = val;
            });
            this.dataSelectFull = arrCompany;
            this.dataSelect = arr;
            this.$emit("success",this.dataSelect);
            this.$emit("successFull",this.dataSelectFull);
        },
    }
}
</script>

<style>
.order-name span{display: block;}
.order-name span.dec{color: #999;font-size: 12px;}
.goods-img{display: flex;gap: 5px;}
.goods-img .name span{display: block;}
.goods-img .name span.dec{color: #999;font-size: 12px;}
.goods-price,.price{display: flex;align-items: center;gap: 5px;font-size: 14px;}
.goods-price .del{text-decoration: line-through;}
.goods-price span{background-color: #fff !important;
    border: 1px solid #d3d9e0 !important;
    border-radius: 4px;
    box-sizing: border-box;
    color: #6c737a !important;
    display: inline-flex;
    flex: none;
    font-size: 12px;
    line-height: 18px !important;
    padding: 1px 6px !important;text-decoration: none;}
</style>