hx-mini-web/src/views/manage/order/components/log.vue

<template>
    <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
        <el-container class="flex-column" v-loading="loading">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{ titleMap[mode] }}</div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-timeline>
                    <el-timeline-item :timestamp="item.create_at" center placement="top"  v-for="(item,index) in logData" :key="index">
                        <el-card shadow="never">
                            <template #header>{{ item.title }}</template>
                            <p>{{ item.remark }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-main>
            <el-footer style="text-align: right;">
                <el-button @click="visible=false" >关 闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
export default {
    data(){
        return {
            loading: false,
            mode:"add",
            titleMap:{
                add:"订单记录",
                edit:"订单记录"
            },
            visible: false,
            isSaveing: false,
            logData:[]
        }
    },
    methods:{
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.getLogData(data);
        },
        async getLogData(order){
            this.loading = true;
            var resp = await this.$API.order.log.get({"order":order.order_id});
            this.loading = false;
            this.logData = resp.data;
        }
    }
}
</script>