print-web/src/views/merchant/order/index/components/table.vue

<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id" @dataChange="getTotal">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="订单编号" width="200" prop="order_sn" fixed="left">
            <template #default="scope">
                {{scope.row.order_sn}}
            </template>
        </el-table-column>
        <el-table-column label="下单用户" prop="openid" width="240"></el-table-column>
        <el-table-column label="订单状态" prop="certificate_id" width="120">
            <template #default="scope">
                {{ status[scope.row.status] }}
            </template>
        </el-table-column>
        <el-table-column label="订单金额" prop="money" width="120">
            <template #default="scope">
                <div class="price" v-if="scope.row.money > scope.row.discount">
                    <el-tag>{{ $TOOL.money(scope.row.discount) }}</el-tag>
                    <div class="del">{{ $TOOL.money(scope.row.money) }}</div>
                </div>
                <div class="price" v-else>
                    <el-tag>{{ $TOOL.money(scope.row.money) }}</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="额外加价" prop="money" width="120">
            <template #default="scope">
                {{ $TOOL.money(scope.row.extra_money) }}
            </template>
        </el-table-column>
        <el-table-column label="支付方式" prop="money">
            <template #default="scope">
                <el-tag>{{ payStatus[scope.row.pay_type] }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="打印机" prop="money" width="180">
            <template #default="scope">
                {{ scope.row.print_name }}
            </template>
        </el-table-column>
        <el-table-column label="取件方式" prop="money" width="120">
            <template #default="scope">
                {{ ostatus[scope.row.package] }}
            </template>
        </el-table-column>
        <el-table-column label="取件号" prop="package_sn" width="120"></el-table-column>
        <el-table-column label="失败原因" prop="money" width="180">
            <template #default="scope">
                {{ scope.row.reason?scope.row.reason:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="支付时间" prop="pay_at" width="180">
            <template #default="scope">
                {{ scope.row.pay_at?scope.row.pay_at:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="打印时间" prop="pay_at" width="180">
            <template #default="scope">
                {{ scope.row.print_at?scope.row.print_at:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_at" width="180">
            <template #default="scope">
                {{ scope.row.create_at }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="right" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button text type="warning" size="small" @click="table_edit(scope.row)">详情</el-button>
                    <el-button text type="danger" size="small" @click="table_del(scope.row, scope.$index)">退款</el-button>
                    <!-- <el-popconfirm title="确定要退款吗？" @confirm="table_del(scope.row, scope.$index)" v-if="scope.row.status > 0">
                        <template #reference>
                            <el-button text type="danger" size="small">退款</el-button>
                        </template>
                    </el-popconfirm>     -->                
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <formMain ref="formMain" @success="handleSuccess"></formMain>
    <refundMain ref="refundMain" @success="handleSuccess"></refundMain>
</template>

<script>
import formMain from "./detail";
import refundMain from "./refund";
export default {
    components: {
        formMain,refundMain
    },
    props: {
        type: { type: String, default: "1" }
    },
    data(){
        return {
            colorData:['','彩色','黑白'],
            duplexData:['','单面','双面'],
            list: {
                apiObj: this.$API.mOrder.list
            },
            status: ['待支付','待打印', '打印失败', '已打印','申请退款','退款失败','已退款'],
            ostatus: ['-','店内打印', '远程自取', '商家配送'],
            payStatus:['-','微信','会员卡'],
            visible:false,
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{}
        }
    },
    methods:{
        async getTotal(){
            var resp = await this.$API.mOrder.total.get(this.searchKey);
            if (resp.code == 1) {
                this.$emit("total",resp.data.total,this.searchKey);
            }
        },
        table_edit(data){
            this.$nextTick(() => {
                this.$refs.formMain.open("edit",this.type).setData(data)
            })
        },
        table_del(data){
            this.$nextTick(() => {
                this.$refs.refundMain.open("edit").setData(data)
            })
            // this.$confirm("确定要对整笔订单进行退款吗","退款确认",{type: 'warning'}).then(async ()=>{
            //     var resp = await this.$API.mOrder.refund.post({"id":data.id});
            //     if (resp.code == 0) {
            //         return this.$message.error(resp.msg)
            //     }
            //     this.$message.success(resp.msg)
            //     this.$refs.table.refresh()
            // }).catch(()=>{});
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
    }
}
</script>

<style>
.price{display: flex;align-items: center;}
.del{text-decoration: line-through;margin-left: 5px;color: #f00;}
</style>