补充媒体导出界面

src/assets/styles/ruoyi.scss

@@ -413,7 +413,7 @@ h6 {
   background: #ffc63d;
   color: #000000;
 }
- 
+
 .my-downAllFile-btn {
   width: 140px;
   height: 34px;
@@ -513,6 +513,21 @@ h6 {
   }
 }
 
+.myUpdate_popover {
+  min-width: 430px !important;
+  border-radius: 6px !important;
+  padding: 8px !important;
+  background: #FFFFFF !important;
+  box-shadow: 0 0 8px 0 #00328214 !important;
+
+  .el-popper__arrow,
+  .el-popper__arrow:before {
+    display: none;
+  }
+
+
+}
+
 .popBtns {
   width: 100%;
   line-height: 30px;
@@ -980,6 +995,13 @@ h6 {
   height: calc(100vh - 240px);
 }
 
+.myLogCard .el-card__body {
+  padding: 20px 20px 0 20px !important;
+  overflow-y: auto;
+  width: 100%;
+  height: calc(100vh - 165px);
+}
+
 .myDetailCard .el-card__body {
   padding: 30px 30px 0 30px !important;
   overflow-y: auto;
@@ -1059,6 +1081,41 @@ h6 {
   border-top: 1px solid #58585830 !important;
 }
 
+// 弹窗tab页
+.my_dialog .el-tabs__nav-wrap:after {
+  height: 0px;
+}
+
+.my_dialog .el-tabs__item {
+  align-items: center;
+  box-sizing: border-box;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 22px;
+  color: #1E1E1E;
+  display: flex;
+  padding: 0 20px;
+}
+
+.my_dialog .el-tabs__item.is-active,
+.el-tabs__item:hover {
+  font-family: Microsoft YaHei;
+  font-weight: 600;
+  font-size: 22px;
+  color: #1E1E1E;
+}
+
+.my_dialog .el-tabs__active-bar {
+  height: 3px;
+  background: #1a75e6;
+  bottom: 0;
+  left: 0;
+  list-style: none;
+  position: absolute;
+  transition: width var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier), transform var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+  z-index: 1;
+}
+
 // 表单录入样式 
 .myInsertForm .el-form-item--default {
   margin-bottom: 20px;
@@ -1294,4 +1351,67 @@ h6 {
   font-size: 18px;
   color: #000000;
   padding: 6px 20px;
+}
+
+// 时间轴
+.my-time-line .el-timeline-item__timestamp.is-top {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  width: 110px;
+  height: 24px;
+  border-radius: 12px 12px 12px 12px;
+  background: #1a75e6;
+  font-family: Arial;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 26px;
+  color: #FEFEFF;
+  margin-bottom: 0px;
+  padding-top: 0px;
+}
+
+.my-time-line .el-timeline-item {
+  padding-bottom: 34px;
+  position: relative;
+}
+
+.my-time-line .el-timeline-item__content {
+  display: inline-table;
+  padding-left: 16px;
+  width: calc(100% - 110px);
+}
+
+.my-time-line .el-timeline-item__wrapper {
+  padding-left: 34px;
+  position: relative;
+  top: 0px;
+}
+
+.my-time-line .el-timeline-item__tail {
+  border-left: 1px solid #FFC63D;
+  height: 100%;
+  left: 11px;
+  top: 8px;
+  position: absolute;
+}
+
+.my-time-line .el-timeline-item__node--normal {
+  height: 24px;
+  left: 0px;
+  width: 24px;
+}
+
+.my-time-line .el-timeline-item__node {
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+
+  background-image: url('../images/time-line-icon.png');
+  background-size: cover;
 }

src/views/mediaLibrary/exportDialog.vue

@@ -0,0 +1,133 @@
+<template>
+    <!-- 导出对话框 -->
+    <el-dialog :title="exportTitle" v-model="exportOpen" width="800px" class="my_dialog" align-center
+        :destroy-on-close="true" :close-on-click-modal="false">
+        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane label="媒体基础信息" name="first">
+                <div class="my_dialog_itemHeader">
+                    <el-row :gutter="10">
+                        <el-col :span="12">选择导出字段</el-col>
+                        <el-col :span="12" style="text-align: right;">
+                            <el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
+                                @change="handleCheckAllChange">
+                                全选
+                            </el-checkbox>
+                        </el-col>
+                    </el-row>
+                </div>
+
+                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
+                    @change="handleCheckedCitiesChange">
+                    <el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
+                        {{ city.label }}
+                    </el-checkbox>
+                </el-checkbox-group>
+
+                <div class="my_dialog_itemHeader">附件选项</div>
+                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities2"
+                    @change="handleCheckedCitiesChange2">
+                    <el-checkbox v-for="city in cities2" :key="city.value" :label="city.label" :value="city.value">
+                        {{ city.label }}
+                    </el-checkbox>
+                </el-checkbox-group>
+            </el-tab-pane>
+            <el-tab-pane label="媒体报价信息" name="second">
+                <div class="my_dialog_itemHeader">
+                    <el-row :gutter="10">
+                        <el-col :span="12">选择导出字段</el-col>
+                        <el-col :span="12" style="text-align: right;">
+                            <el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
+                                @change="handleCheckAllChange">
+                                全选
+                            </el-checkbox>
+                        </el-col>
+                    </el-row>
+                </div>
+
+                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
+                    @change="handleCheckedCitiesChange">
+                    <el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
+                        {{ city.label }}
+                    </el-checkbox>
+                </el-checkbox-group>
+            </el-tab-pane>
+        </el-tabs>
+
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button class="my-cancel-btn" @click="exportOpen = false">取 消</el-button>
+                <el-button class="my-confirm-btn" type="primary" @click="handleSubmitExport">确 定</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script setup name="Post">
+import { onMounted, ref } from 'vue';
+
+const exportTitle = ref('导出')
+const exportOpen = ref(false)
+const activeName = ref('first')
+
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const checkedCities = ref(['Shanghai'])
+const cities = [
+    { label: '字段名', value: 'Shanghai' },
+    { label: '字段名', value: 'begnjing' },
+    { label: '字段名', value: 'chongq' },
+    { label: '字段名', value: 'sdag' },
+    { label: '字段名', value: 'Shanghai1' },
+    { label: '字段名', value: 'begnjing2' },
+    { label: '字段名', value: 'chongq3' },
+    { label: '字段名', value: 'sdag4' },
+    { label: '字段名', value: 'Shanghai5' },
+    { label: '字段名', value: 'begnjing6' },
+    { label: '字段名', value: 'chongq7' },
+    { label: '字段名', value: 'sdag8' },
+    { label: '字段名', value: 'Shanghai9' },
+    { label: '字段名', value: 'begnjing10' },
+    { label: '字段名', value: 'chongq11' },
+    { label: '字段名', value: 'sdag12' },
+]
+
+
+const checkedCities2 = ref([])
+const cities2 = [
+    { label: '包含附件', value: 'fujian' },
+]
+
+// 全选操作
+const handleCheckAllChange = (val) => {
+    checkedCities.value = []
+    if (val) {
+        cities.forEach(element => {
+            checkedCities.value.push(element.value)
+        });
+    }
+    isIndeterminate.value = false
+}
+// 单个选择字段
+const handleCheckedCitiesChange = (value) => {
+    console.log('单选操作', value)
+    const checkedCount = value.length
+    checkAll.value = checkedCount === cities.length
+    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
+}
+// 选择附件
+const handleCheckedCitiesChange2 = (value) => {
+
+}
+// 切换选项卡
+const handleClick = (tab, event) => {
+    console.log(tab, event)
+    activeName.value = tab
+}
+const handleSubmitExport = () => {
+
+}
+
+// 暴露方法\属性给父组件
+defineExpose({
+    exportOpen,
+});
+</script>

src/views/mediaLibrary/index.vue

@@ -198,7 +198,7 @@
                                 <img :src="otherbg" />
                                 <template #reference>
                                     <span class="mediaNameLabel" @click="handleOpenDetail">{{ scope.row.mediaName
-                                    }}</span>
+                                        }}</span>
                                 </template>
                             </el-popover>
 
@@ -277,6 +277,7 @@
         <history-data ref="historyDataRef" />
         <down-files ref="downFileRef" />
         <view-file-dialog ref="viewFileRef" />
+        <export-dialog ref="exportDialogRef" />
 
         <!-- 废除对话框 -->
         <el-dialog title="废除" v-model="abolishOpen" width="650px" class="my_dialog" align-center
@@ -330,7 +331,24 @@
                     {{ tag.mediaName }}
                 </el-tag>
             </div>
-            <div class="my_dialog_itemHeader">选择需要写入方案的媒体字段</div>
+            <div class="my_dialog_itemHeader">
+                <el-row :gutter="10">
+                    <el-col :span="12">选择需要写入方案的媒体字段</el-col>
+                    <el-col :span="12" style="text-align: right;">
+                        <el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
+                            @change="handleCheckAllChange">
+                            全选
+                        </el-checkbox>
+                    </el-col>
+                </el-row>
+            </div>
+
+            <el-checkbox-group class="checkAllChose" style="margin-top: 30px;" v-model="checkedCities"
+                @change="handleCheckedCitiesChange">
+                <el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
+                    {{ city.label }}
+                </el-checkbox>
+            </el-checkbox-group>
             <template #footer>
                 <div class="dialog-footer">
                     <el-button class="my-cancel-btn" @click="exportPPT.open = false">取 消</el-button>
@@ -358,6 +376,7 @@ import mediaLogs from "./mediaLogs.vue";
 import historyData from "./historyData.vue"
 import downFiles from './downFiles.vue';
 import viewFileDialog from '@/components/ViewFile/index.vue'
+import exportDialog from './exportDialog.vue';
 
 const bgStore = useBackgroundStore()
 const { proxy } = getCurrentInstance()
@@ -383,6 +402,30 @@ const abolishOpen = ref(false)
 const historyDataRef = ref(null)
 const downFileRef = ref(null)
 const viewFileRef = ref(null)
+const exportDialogRef = ref(null)
+// 导出PPT勾选字段
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const checkedCities = ref(['Shanghai'])
+const cities = [
+    { label: '字段名', value: 'Shanghai' },
+    { label: '字段名', value: 'begnjing' },
+    { label: '字段名', value: 'chongq' },
+    { label: '字段名', value: 'sdag' },
+    { label: '字段名', value: 'Shanghai1' },
+    { label: '字段名', value: 'begnjing2' },
+    { label: '字段名', value: 'chongq3' },
+    { label: '字段名', value: 'sdag4' },
+    { label: '字段名', value: 'Shanghai5' },
+    { label: '字段名', value: 'begnjing6' },
+    { label: '字段名', value: 'chongq7' },
+    { label: '字段名', value: 'sdag8' },
+    { label: '字段名', value: 'Shanghai9' },
+    { label: '字段名', value: 'begnjing10' },
+    { label: '字段名', value: 'chongq11' },
+    { label: '字段名', value: 'sdag12' },
+]
+
 
 // 归属选项
 const supplierList = ref([])
@@ -607,13 +650,33 @@ const handleViewPhoto = () => {
 
 /** 导出Excel按钮操作 */
 const handleExportExcel = () => {
-
+    exportDialogRef.value.exportOpen = true
+    nextTick(() => {
+        // historyDataRef.value.initHistoryCharLine()
+    })
 }
 /** 导出PPT按钮操作 */
 const handleExportPPT = (key) => {
     exportPPT.title = '导出PPT'
     exportPPT.open = true
 }
+// 全选操作
+const handleCheckAllChange = (val) => {
+    checkedCities.value = []
+    if (val) {
+        cities.forEach(element => {
+            checkedCities.value.push(element.value)
+        });
+    }
+    isIndeterminate.value = false
+}
+// 单个选择字段
+const handleCheckedCitiesChange = (value) => {
+    console.log('单选操作', value)
+    const checkedCount = value.length
+    checkAll.value = checkedCount === cities.length
+    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
+}
 // 导出ppt实现代码
 const handleSubmitExportPPT = () => {
     exportPPT.open = false
@@ -725,11 +788,43 @@ onMounted(() => {
 .chosedMediaNamsConter {
     width: 100%;
     min-height: 60px;
-    border-radius: 4px;
     background: #ffffff;
-    border: 1px solid #EEEEEE;
-    margin-top: 10px;
-    margin-bottom: 30px;
     padding: 10px 0;
 }
+
+.checkAllChose .el-checkbox__label {
+    display: inline-block;
+    font-size: var(--el-checkbox-font-size);
+    line-height: 1;
+    padding-left: 8px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #1E1E1E;
+}
+
+.checkAllChose .el-checkbox__input.is-checked .el-checkbox__inner,
+.checkAllChose .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #1A75E6;
+    border-color: #1A75E6;
+}
+
+.checkAllChose .el-checkbox__inner {
+    background: #ffffff;
+    border: 1px solid #ACACAC;
+    border-radius: 2px;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+}
+
+.checkAllChose .el-checkbox__inner:after {
+    height: 8px;
+    left: 5px;
+}
+
+.checkAllChose .el-checkbox__input.is-checked+.el-checkbox__label {
+    color: #1E1E1E;
+}
 </style>

src/views/mediaLibrary/mediaLogs.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card class="myDetailCard">
+    <el-card class="myLogCard">
         <template #header>
             <div class="card-header">
                 <span>媒体日志</span>
@@ -8,7 +8,7 @@
                 </el-icon>
             </div>
         </template>
-        <el-row :gutter="10" class="my_row">
+        <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="">
@@ -24,13 +24,15 @@
             <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" />
+                        :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 - 267px)">
+        <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 }}
@@ -39,16 +41,53 @@
             <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-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 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 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>
@@ -57,19 +96,28 @@
 <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([Grid, Calendar])
+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; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
+    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ;其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
     content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
     timestamp: '2018-04-15',
     user: '优客传媒管理员',
@@ -117,21 +165,73 @@ const handleClose = () => {
 .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;
+    height: 30px;
+    border: 1px solid #9C9C9C;
+    border-radius: 15px;
+    background: #9c9c9c1a;
 }
 
 .el-button-group>.el-button--primary {
-    background: #1f1f1f;
+    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: 600;
-    color: #FFFFFF;
-    border: 1px solid #1f1f1f;
+    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>

src/views/supplier/supplierLogs.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card class="myDetailCard">
+    <el-card class="myLogCard">
         <template #header>
             <div class="card-header">
                 <span>供应商日志</span>
@@ -8,7 +8,7 @@
                 </el-icon>
             </div>
         </template>
-        <el-row :gutter="10" class="my_row">
+        <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="">
@@ -24,13 +24,15 @@
             <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" />
+                        :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 - 267px)">
+        <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 }}
@@ -39,16 +41,53 @@
             <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-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">
+                <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 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 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>
@@ -57,19 +96,28 @@
 <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([Grid, Calendar])
+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; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
+    content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ;其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
     content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
     timestamp: '2018-04-15',
     user: '优客传媒管理员',
@@ -117,21 +165,73 @@ const handleClose = () => {
 .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;
+    height: 30px;
+    border: 1px solid #9C9C9C;
+    border-radius: 15px;
+    background: #9c9c9c1a;
 }
 
 .el-button-group>.el-button--primary {
-    background: #1f1f1f;
+    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: 600;
-    color: #FFFFFF;
-    border: 1px solid #1f1f1f;
+    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>