YouKeChuanMei_VUE/src/views/mediaLibrary/mediaLogs.vue

<template>
    <el-card class="myDetailCard">
        <template #header>
            <div class="card-header">
                <span>媒体日志</span>
                <el-icon style="float: right;cursor: pointer;" @click="handleClose">
                    <Close />
                </el-icon>
            </div>
        </template>
        <el-row :gutter="10" class="my_row">
            <el-col :span="12">
                <el-form :inline="true" class="searchInputForm">
                    <el-form-item label="">
                        <el-input v-model="queryParams.keyword" placeholder="请输入操作人" :prefix-icon="Search"
                            style="width: 280px;" />
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
                        <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12" style="text-align: right;">
                <el-button-group>
                    <el-button v-for="(item, index) in ToolOptions" :key="index"
                        :type="activeIndex === index ? 'primary' : 'default'" :icon="item"
                        @click="activeIndex = index" />
                </el-button-group>
            </el-col>
        </el-row>

        <el-table v-if="activeIndex == 0" v-loading="loading" :data="activities" height="calc(100vh - 267px)">
            <el-table-column label="序号" align="center" width="80">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="供应商名称" align="left" prop="supplierName" width="230" :show-overflow-tooltip="true" />
            <el-table-column label="操作类型" align="left" prop="type" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="操作人" align="center" prop="user" width="160" :show-overflow-tooltip="true" />
            <el-table-column label="操作时间" align="center" prop="timestamp" width="150"
                :show-overflow-tooltip="true" />
            <el-table-column label="变更字段" align="center" prop="content" min-width="210"
                :show-overflow-tooltip="true" /> 
        </el-table>
        <div v-if="activeIndex == 1">
            <el-timeline style="padding-left: 0;">
                <el-timeline-item v-for="(activity, index) in activities" :key="index"
                    :timestamp="activity.user + '于' + activity.timestamp + activity.type">
                    <div> 变更字段：{{ activity.content }}</div> 
                </el-timeline-item>
            </el-timeline>
        </div>
    </el-card>
</template>
<script setup>
import { onMounted, defineEmits, ref } from 'vue'
import { Close, Grid, Calendar } from '@element-plus/icons-vue'
import { getBusSupplier } from "@/api/supplier"

const emit = defineEmits(['handleShowList']);
const ToolOptions = ref([Grid, Calendar])
const activeIndex = ref(0)
const supplierLogList = ref([])
const loading = ref(false)
const queryParams = ref({
    keyword: undefined
})

const activities = [{
    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
    content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
    timestamp: '2018-04-15',
    user: '优客传媒管理员',
    type: '修改'
},
{
    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
    content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
    timestamp: '2018-04-13',
    user: '优客传媒管理员',
    type: '修改'
},
{
    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
    content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
    timestamp: '2018-04-11',
    user: '优客传媒管理员',
    type: '新增'
},
]

/** 搜索按钮操作 */
const handleQuery = () => {
    getSupplierPageList()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryParams.value = {
        keyword: undefined
    }
    handleQuery()
}
// 关闭
const handleClose = () => {
    emit('handleShowList')
}
</script>
<style lang='scss'>
.el-button,
.el-button.is-round {
    padding: 10px 11px;
}

.el-button-group>.el-button {
    float: left;
    position: relative;
    height: 38px;
    border: 1px solid #DFDFDF;
    background: #ffffff;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #000000;
}

.el-button-group>.el-button--primary {
    background: #1f1f1f;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #FFFFFF;
    border: 1px solid #1f1f1f;
}
</style>