237 lines
9.4 KiB
Vue
237 lines
9.4 KiB
Vue
<template>
|
|
<el-card class="myLogCard">
|
|
<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" style="margin-top: 0;">
|
|
<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'" @click="activeIndex = index">
|
|
<img v-if="index == 0" :src="activeIndex === index ? item.activeIcon : item.defaultIcon" />
|
|
<img v-if="index == 1" :src="activeIndex === index ? item.activeIcon : item.defaultIcon" />
|
|
</el-button>
|
|
</el-button-group>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table v-if="activeIndex == 0" v-loading="loading" :data="activities" height="calc(100vh - 250px)">
|
|
<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="left" prop="content" min-width="210" >
|
|
<template #default="scope">
|
|
<el-popover popper-class="myUpdate_popover" placement="bottom-start">
|
|
<el-table :data="detailTable" height="230px">
|
|
<el-table-column label="字段名称" align="left" prop="type" min-width="100"
|
|
:show-overflow-tooltip="true" />
|
|
<el-table-column label="变更前" align="left" prop="type" min-width="100"
|
|
:show-overflow-tooltip="true" />
|
|
<el-table-column label="变更后" align="left" prop="type" min-width="100"
|
|
:show-overflow-tooltip="true" />
|
|
</el-table>
|
|
<template #reference>
|
|
<span class="updatefiter" @click="handleOpenDetail(scope.row.supplierId)">{{
|
|
scope.row.content
|
|
}}</span>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="activeIndex == 1">
|
|
<el-timeline class="my-time-line" style="padding-left: 0;">
|
|
<el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top"
|
|
:timestamp="activity.timestamp">
|
|
<div class="logsTitle mb20"><span class="mr10">{{ activity.user }}</span><span>{{ activity.type
|
|
}}</span>
|
|
</div>
|
|
<ul class="defaultUL">
|
|
<li>
|
|
<span class="logsLable">变更字段：</span>
|
|
<el-popover popper-class="myUpdate_popover" placement="bottom-start">
|
|
<el-table :data="detailTable" height="230px">
|
|
<el-table-column label="字段名称" align="left" prop="type" min-width="100"
|
|
:show-overflow-tooltip="true" />
|
|
<el-table-column label="变更前" align="left" prop="type" min-width="100"
|
|
:show-overflow-tooltip="true" />
|
|
<el-table-column label="变更后" align="left" prop="type" min-width="100"
|
|
:show-overflow-tooltip="true" />
|
|
</el-table>
|
|
<template #reference>
|
|
<span class="updatefiter">{{ activity.content }}</span>
|
|
</template>
|
|
</el-popover>
|
|
|
|
</li>
|
|
</ul>
|
|
</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 iconList from '@/assets/images/iconList.png'
|
|
import iconTimeLine from '@/assets/images/iconTimeLine.png'
|
|
import iconListChose from '@/assets/images/iconListChose.png'
|
|
import iconTimeLineChose from '@/assets/images/iconTimeLineChose.png'
|
|
import { getBusSupplier } from "@/api/supplier"
|
|
|
|
const emit = defineEmits(['handleShowList']);
|
|
const ToolOptions = ref([
|
|
{ defaultIcon: iconList, activeIcon: iconListChose },
|
|
{ defaultIcon: iconTimeLine, activeIcon: iconTimeLineChose }
|
|
])
|
|
const activeIndex = ref(0)
|
|
const supplierLogList = ref([])
|
|
const detailTable = ref([])
|
|
const loading = ref(false)
|
|
const queryParams = ref({
|
|
keyword: undefined
|
|
})
|
|
|
|
const activities = [{
|
|
content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ;其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 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: 30px;
|
|
border: 1px solid #9C9C9C;
|
|
border-radius: 15px;
|
|
background: #9c9c9c1a;
|
|
}
|
|
|
|
.el-button-group>.el-button--primary {
|
|
background: #1a75e61a;
|
|
border: 1px solid #1A75E6;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.el-button-group .el-button--primary:last-child {
|
|
border-left-color: #1A75E6;
|
|
}
|
|
|
|
.el-button-group .el-button--primary:first-child {
|
|
border-right-color: #1A75E6;
|
|
}
|
|
|
|
.updatefiter {
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #1A75E6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.updatefiter:hover {
|
|
text-decoration: underline solid #1A75E6 1px;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
.logsTitle {
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #636262;
|
|
}
|
|
|
|
.defaultUL {
|
|
list-style: none;
|
|
padding-left: 0px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.defaultUL li {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.defaultUL li::before {
|
|
content: "•";
|
|
color: #1A75E6;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.logsLable {
|
|
color: #00316E;
|
|
}
|
|
|
|
.logsValue {
|
|
color: #1A75E6;
|
|
}
|
|
</style> |