hx-mini-web/src/views/store/order/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="订单编号" prop="order_id" width="220" fixed="left">
            <template #default="scope">
                <span v-if="scope.row.order_id">{{ scope.row.order_id }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="订单类型" prop="status" width="120">
            <template #default="scope">
                <div class="status-danger" v-if="scope.row.service_type==1"><sc-status-indicator type="danger"></sc-status-indicator> 预约</div>
                <div class="status-success" v-if="scope.row.service_type==2"><sc-status-indicator type="success"></sc-status-indicator> 快递</div>
            </template>
        </el-table-column>
        <el-table-column label="收货地址" prop="company_id" width="120">
            <template #default="scope">
                <el-popover :width="200" placement="top-start" v-if="scope.row.service_type==2">
                    <template #reference>
                        <div class="el-text">
                            {{ scope.row.mobile }}
                            <div class="desc" v-copy="'联系人:'+scope.row.username+'联系电话:'+scope.row.mobile+'联系地址:'+scope.row.region+scope.row.address"><span>一键复制</span></div>
                        </div>
                    </template>
                    <div class="flex-tags-size">
                        <span>联系人</span>{{scope.row.username?scope.row.username:'-'}}<br><br>
                        <span>联系电话</span>{{scope.row.mobile?scope.row.mobile:'-'}}<br><br>
                        <span>联系地址</span>{{scope.row.region?scope.row.region:'-'}}{{scope.row.address?scope.row.address:'-'}}
                    </div>
                </el-popover>
                <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="商品ID" prop="out_id" width="150">
            <template #default="scope">
                <span v-if="scope.row.product_id">{{ scope.row.product_id }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="商品信息" prop="product_name" width="220">
            <template #default="scope">
                <div class="el-text" v-if="scope.row.product_name">
                    {{ scope.row.product_name }}
                    <div class="desc"><span>{{ scope.row.sku }}</span></div>
                </div>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="数量" prop="count" width="100">
            <template #default="scope">
                <span>{{ scope.row.parent.count }}件</span>
            </template>
        </el-table-column>
        <el-table-column label="订单金额" prop="order_amount" width="150">
            <template #default="scope">
                <span v-if="scope.row.parent.order_amount">￥{{ scope.row.parent.order_amount }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="支付金额" prop="pay_amount" width="150">
            <template #default="scope">
                <span v-if="scope.row.parent.pay_amount">￥{{ scope.row.parent.pay_amount }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="180">
            <template #default="scope">
                <div class="status-danger" v-if="scope.row.express_status==0"><sc-status-indicator type="danger"></sc-status-indicator> 待发货</div>
                <div class="status-success" v-if="scope.row.express_status==1"><sc-status-indicator type="success"></sc-status-indicator> 待核销</div>
                <div class="status-danger" v-if="scope.row.express_status==2"><sc-status-indicator type="danger"></sc-status-indicator> 已完成</div>
                <div class="status-info" v-if="scope.row.express_status==3"><sc-status-indicator type="info"></sc-status-indicator> 已取消</div>
                <div class="status-info" v-if="scope.row.express_status==4"><sc-status-indicator type="info"></sc-status-indicator> 退款审核</div>
                <div class="status-info" v-if="scope.row.express_status==5"><sc-status-indicator type="info"></sc-status-indicator> 拒绝退款</div>
                <div v-if="scope.row.status==5 && scope.row.remark">{{ scope.row.remark }}</div>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
        <el-table-column label="操作" width="200" align="right" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button text type="warning" size="small" @click="table_log(scope.row)">订单记录</el-button>
                    <el-button text type="warning" size="small" @click="table_express(scope.row)" v-if="scope.row.express_status==0">呼叫快递</el-button>
                    <el-button text type="warning" size="small" v-if="scope.row.express_status==1" @click="table_print(scope.row)">打印面单</el-button>
                    <el-button text type="success" size="small" @click="table_end(scope.row)" v-if="scope.row.express_status==1">手动核销</el-button>
                    <el-button text type="success" size="small" @click="table_passwd(scope.row)" v-if="scope.row.express_status==0 && scope.row.service_type==2">更新地址</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <addMain ref="addMain" @success="handleSuccess"></addMain>
    <logMain ref="logMain" @success="handleSuccess"></logMain>
</template>

<script>
import addMain from "@/views/manage/components/send";
import logMain from '@/views/store/order/components/log'
export default {
    components: {
        addMain,logMain
    },
    props: {
        status: { type: String, default: "1" }
    },
    data(){
        return {
            list: {
                apiObj: this.$API.storeOrder.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{
                ex_status:this.status
            }
        }
    },
    methods: {
        async table_print(data){
            var resp = await this.$API.store.hook.get();
            var url = resp.data.url+"print/view?order="+data.order_id
            window.open(url,"_blank")
        },
        table_passwd(row){
            return this.$message.success("暂未开放");
            this.$nextTick(() => {
                this.$refs.formMain.open("edit").setData(row)
            })
        },
        table_end(data){
            return this.$message.success("暂未开放");
            this.$confirm(`核销后该笔订单即为完成，如客户需退款只能通过来客后台进行操作，当前后台不支持核销后退款操作，确定要执行吗？`, '提示', {
                type: 'warning'
            }).then(async () => {
                var loading = this.$loading();
                var resp = await this.$API.order.end.post({"order_id":data.order_id});
                loading.close();
                if (resp.code !== 1) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(() => {

            })
        },
        table_express(data){
            return this.$message.success("暂未开放");
            this.$confirm(`呼叫快递成功后，可进入【待核销】栏目进行打印快递面单，如已接通云打印可忽略`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                var loading = this.$loading();
                var resp = await this.$API.merOrder.express.post({"id":data.id});
                loading.close();
                if (resp.code == 0) {
                    return this.$message.warning(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(()=>{})
        },
        table_log(data){
            this.$nextTick(() => {
                this.$refs.logMain.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>
.desc{
    color: #999;
    font-size: 12px;
}
.flex-btn{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.flex-tags {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.flex-btn .el-button.is-text{
    margin-left: 0;
}
.flex-tags-size{
    font-size: 12px;
}
.flex-tags-size span{
    display: block;
    margin-bottom: 5px;
    color: #999;
}
</style>