oms/src/views/audit/store/components/liveView.vue

<template>
    <el-drawer v-loading="load" title="查看生命周期" :visible.sync="drawer" @close="close" :direction="direction" size="50%">
        <div class="content">
            <el-row :gutter="20">
                <el-col :span="8">
                    名称：{{ liveData.material?.name }}
                </el-col>
                <el-col :span="8">
                    规格：{{ liveData.material?.materialSpec }}
                </el-col>

                <el-col :span="8">
                    编号：{{ liveData.materialSku?.skuCode }}
                </el-col>
                <el-col :span="8">
                    分类：{{ liveData.materialCategory?.name }}
                </el-col>
                <el-col :span="8">
                    仓库：
                </el-col>
                <el-col :span="8">
                    仓位：
                </el-col>
                <el-col :span="8">
                    供应商：
                </el-col>
                <el-col :span="8">
                    供应商编号：
                </el-col>
            </el-row>
            <p>OMS登记环节</p>
            <by-table :propConfig="tableConfig1" ref="table1" />
            <p>WMS仓储环节</p>
            <by-table :propConfig="tableConfig1" ref="table2" />
            <p>WMS物流运输环节</p>
            <by-table :propConfig="tableConfig1" ref="table3" />
        </div>
    </el-drawer>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import api from "@/api/currency";

@Component({ components: {} })
export default class LiveView extends Vue {
    drawer = false;
    direction = 'rtl'
    data: any = {};
    liveData: any = {};
    isSuccess = false;
    load = false;
    tableConfig1: any = {
        attr: {
            size: 'mini',
            align: 'left',
            seq: true
        },
        columns: [{
            title: '事项',
            field: 'matter'
        }, {
            title: '来源',
            field: 'source'
        }, {
            title: '操作人',
            field: 'operator'
        }, {
            title: '时间',
            field: 'createTime',
        }]
    }
    setShow(v: boolean) {
        this.drawer = v;
    }
    async setItem(data: any) {
        this.data = data
        //console.info('data', data, this.data)
        const res = await api.showLifeCycle({ id: this.data.id })
        if (res.code === 200) {
            this.liveData = res.data;
            (this.$refs.table2 as any).setValue(this.liveData.warehousingList);
            (this.$refs.table3 as any).setValue(this.liveData.logisticsList);
            (this.$refs.table1 as any).setValue([
                { matter: '创建商品', source: 'OMS', operator: '管理员', time: '2025-07-06 10:01:22' },
                { matter: '录入商品编号', source: 'OMS', operator: '管理员', time: '2025-07-06 10:05:43' },
                { matter: '设置商品类别', source: 'OMS', operator: '管理员', time: '2025-07-06 10:10:32' },
                { matter: '登记供应商', source: 'OMS', operator: '管理员', time: '2025-07-06 10:11:16' },
            ]);
        } else {
            this.$message.error(res.msg)
        }
    }
    close() {
        if (this.isSuccess) {
            this.$emit('handleSuccess');
        }
    }

}
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    background-color: #FFF;

    .order-top {
        padding-bottom: 16px;
        display: flex;
        justify-content: center;
    }
}

.deli-footer {
    height: 80px;
    width: 100%;
    box-shadow: 0 -5px 10px #EEE;
    padding: 0 16px 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    background-color: #FFF;
    left: 0;
    bottom: 0;
    z-index: 10;

    .d-left {
        width: 50%;

        .estimate-total {
            font-size: 14px;
            padding-bottom: 4px;

            .total {
                font-size: 16px;
                color: #F00;
            }

            .detail {
                color: #1684FC;
                padding-left: 16px;
                cursor: pointer;
            }
        }
    }

    .send-btn {
        width: 120px;
        height: 40px;
        line-height: 40px;
        margin-left: 16px;
        border-radius: 8px;
        background: linear-gradient(129.2deg, rgba(22, 132, 252, 1) 9.81%, rgba(93, 167, 249, 1) 97.4%);
        color: rgba(255, 255, 255, 100);
        font-size: 14px;
        text-align: center;
        box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 100);
        cursor: pointer;
    }

    .stopBtn {
        opacity: 0.7;
    }

    .btn-box {
        width: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

.space {
    height: 80px;
    width: 100%;
    margin-top: 16px;
}
</style>