添加操作日志弹窗

src/views/customerFollowUp/index.vue

@@ -4,12 +4,12 @@
             <div class="page_search">
                 <div class="search_content">
                     <div class="content_left">
-                        <SearchBlock :searchList="searchList"  @searchChange="HandleBlockSearchChange">
+                        <SearchBlock :searchList="headerSearchList"  @searchChange="HandleBlockSearchChange">
                             <template #rowItem-time>
                                 <el-date-picker
-                                    v-if="searchParams.time == 'custom'"
+                                    v-if="listSearchParams.time == 'custom'"
                                     style="height: 28px;flex-grow: 0;width: 225px;"
-                                    v-model="startAndEndTime"
+                                    v-model="listSearchParams.startAndEndTime"
                                     type="daterange"
                                     range-separator="至"
                                     start-placeholder="开始日期"
@@ -24,7 +24,7 @@
                             赢单申请
                             <span class="bubble">{{ winnerOrderNum }}</span>
                         </el-button>
-                        <el-button class="button_border">操作日志</el-button>
+                        <el-button class="button_border" @click="OpenOperationLogDialog">操作日志</el-button>
                     </div>
                 </div>
             </div>
@@ -57,6 +57,7 @@
 
         </div>
 
+        <!-- 赢单申请审核弹窗 -->
         <PreviewDialog 
             dialogWidth="1000px"
             class="audit_dialog"
@@ -65,7 +66,6 @@
             :customFooter="true"
             @close="CloseAuditDialog">
             <TabSearch :tabList="tabList" :defaultTabKey="defaultAuditStatus" tab-type="box" />
-
             <ul class="audit_list_container">
                 <li 
                     v-for="(item, index) in auditList" 
@@ -101,14 +101,81 @@
                     </div>
                 </li>
             </ul>
-
-
             <template #close>
                 <el-button @click="CloseAuditDialog" class="button_background" >关闭</el-button>
             </template>
             <template #confirm><i></i></template>
         </PreviewDialog>
 
+        <!-- 操作日志弹窗 -->
+         <PreviewDialog title="操作记录" 
+            class="operation_log_dialog"
+            :customFooter="true"
+            :previewVisible="operationLogDialogVisible" 
+            @close="CloseOperationLogDialog">
+
+
+            <!-- 搜索列表 -->
+            <SearchBlock :searchList="operationLogSearchList" 
+                @searchChange="HandleLogBlockSearchChange">
+                <template #rowItem-time>
+                    <el-date-picker
+                        v-if="logSearchParams.time === 'custom'"
+                        style="height: 28px;flex-grow: 0;width: 225px;"
+                        v-model="logSearchParams.startAndEndTime"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        size="default"
+                    />
+                </template>
+            </SearchBlock>
+
+            <FormSearchGroup :searchList="[
+                    {
+                        key:'queryStr',
+                        type:'input',
+                        placeholder:'请输入关键字搜索',
+                        hidden:false,
+                        defaultValue:'',
+                        disabled:false
+                    }
+                ]" @searchChange="HandleLogBlurSearchChange"/>
+
+
+            <!-- 日志列表 -->
+            <ul class="log_list_container">
+                <li 
+                    v-for="(item, index) in operationLogList" 
+                    :key="item.id"
+                    class="audit_card"
+                >
+                    <!-- 1. 顶部信息栏：时间、学校、产品、状态标签 -->
+                    <div class="card_header">
+                        <div class="header_left">
+                            <span class="time_text">{{ item.operationTime }}</span>
+                            <span class="school_name">{{ item.operatorName }}</span>
+                            <span class="school_name">{{ item.schoolName }}</span>
+                            <span class="product_name">{{ item.operationType }}</span>
+                        </div>
+                    </div>
+
+                    <!-- 3. 底部跟进内容 -->
+                    <div class="card_content">
+                        操作内容：{{ item.operationContent }}
+                    </div>
+                </li>
+            </ul>
+
+
+            <template #close>
+                <el-button @click="CloseOperationLogDialog" class="button_background" >关闭</el-button>
+            </template>
+            <template #confirm><i></i></template>
+
+         </PreviewDialog>
+
     </div>
 </template>
 
@@ -116,7 +183,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
-import {searchList} from './searchBlock'
+import {headerSearchList, operationLogSearchList} from './searchBlock'
 import Table from '@/baseComponents/Table.vue';
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 
@@ -125,7 +192,7 @@ import {tableColumns} from './table'
 import TabSearch from '@/baseComponents/TabSearch.vue';
 
 /**
- * 1. 表格数据有关内容
+ * 1. 默认列表 表格数据有关内容
  */
 const tableData = ref([
     {
@@ -184,20 +251,19 @@ const totalNum = ref(0)
 
 
 /**
- * 2.筛选项有关数据
+ * 2.默认列表 筛选项有关数据
  */
-const startAndEndTime = ref()
-const searchParams = ref({})
+const listSearchParams = ref({})
 const HandleBlockSearchChange = (params,key)=>{
-    searchParams.value = {
-        ...searchParams.value,
+    listSearchParams.value = {
+        ...listSearchParams.value,
         ...params
     }
 }
 const HandleBlurSearchChange = (params,key)=>{
     // console.log('blurl--',params)
-    searchParams.value = {
-        ...searchParams.value,
+    listSearchParams.value = {
+        ...listSearchParams.value,
         ...params
     }
 }
@@ -206,7 +272,6 @@ const HandleBlurSearchChange = (params,key)=>{
  * 3. 赢单申请有关数据
  */
 const winnerOrderNum = ref(5)
-
 // 审核弹窗数据
 const auditDialogVisible = ref(false)
 const defaultAuditStatus = ref(0)
@@ -232,7 +297,6 @@ const tabList = computed(()=>[
     },
 
 ])
-
 const auditList = ref([
     {
         id:'1',
@@ -275,6 +339,76 @@ const OpenAuditDialog = ()=>{
 const CloseAuditDialog = ()=>{
     auditDialogVisible.value = false
 }
+
+/**
+ * 4. 操作日志有关数据
+ */
+const operationLogDialogVisible = ref(false)
+const operationLogList = ref([
+    {
+        id:1,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '编辑学校信息',
+        operationContent: '学校名称【北京109中学】学段【初中】调整为学校名称【北京一零九中学】学段【九年一贯】。'
+    },
+    {
+        id:2,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '删除联系人',
+        operationContent: '删除 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
+    },
+    {
+        id:3,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '新增联系人',
+        operationContent: '新增 姓名【张三】职务【校长】手机电话【17820681226】办公电话【17820681226】备注【文案文案】。'
+    },
+    {
+        id:4,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '编辑联系人',
+        operationContent: '联系人姓名【张三】职务【校长】手机电话【17820681226】备注【文案文案】调整为 联系人姓名【李四】职务【校长】手机电话【17820681226】备注【文案文案】。'
+    },
+    {
+        id:5,
+        operationTime: '26-02-19 19:00',
+        operatorName: '张安顺',
+        schoolName: '北京师达学校',
+        operationType: '转至公海',
+        operationContent: '将客户转至公海。'
+    }
+]);
+
+//操作日志搜索项
+const logSearchParams = ref({})
+const HandleLogBlockSearchChange = (params,key)=>{
+    logSearchParams.value = {
+        ...logSearchParams.value,
+        ...params
+    }
+}
+const HandleLogBlurSearchChange = (params,key)=>{
+    listSearchParams.value = {
+        ...listSearchParams.value,
+        ...params
+    }
+}
+
+const OpenOperationLogDialog = ()=>{
+    operationLogDialogVisible.value = true
+}
+const CloseOperationLogDialog = ()=>{
+    operationLogDialogVisible.value = false
+}
+
 </script>
 
 
@@ -308,23 +442,29 @@ const CloseAuditDialog = ()=>{
 }
 
 
+.operation_log_dialog,
 .audit_dialog{
+    :deep(.custom){
+        display: flex;
+        flex-direction: column;
+        gap:16px;
+    }
+
     :deep(.el-dialog__body){
         max-height: 500px;
         min-height: 500px;
     }
-
 }
+
+.log_list_container,
 .audit_list_container {
     display: flex;
     flex-direction: column;
     gap: 16px;
-    margin-top: 16px;
 
     .audit_card {
         border-radius: 8px 8px 8px 8px;
         border: 1px solid #EBEEF5;
-        padding: 12px 16px;
         display: flex;
         flex-direction: column;
         gap:8px;
@@ -340,7 +480,6 @@ const CloseAuditDialog = ()=>{
                 display: flex;
                 align-items: center;
                 gap:8px;
-                font-size: 14px;
                 font-weight: 600;
                 color: #333333;
 
@@ -381,6 +520,22 @@ const CloseAuditDialog = ()=>{
     }
 }
 
+.audit_list_container{
+    .audit_card{
+        padding: 12px 16px;
+        .header_left {
+            font-size: 14px;
+        }
+    }
+}
+.log_list_container{
+    .audit_card{
+        padding:8px 12px;
+        .header_left{
+            font-size: 12px;
+        }
+    }
+}
 
 
 </style>

src/views/customerFollowUp/searchBlock.ts

@@ -1,6 +1,7 @@
 import { ref } from "vue";
 
-export const searchList = ref([
+// 默认列表头部筛选配置
+export const headerSearchList = ref([
     {
         label: '时间',
         key: 'time',
@@ -121,4 +122,56 @@ export const searchList = ref([
         ],
         defaultValue: 'all'
     }
+]);
+
+
+
+
+// 操作日志筛选配置
+export const operationLogSearchList = ref([
+    {
+        label: '时间',
+        key: 'time',
+        type: 'single',
+        options:[
+            { label: '全部', value: 'all' },
+            { label: '今天', value: 'today' },
+            { label: '昨天', value: 'yesterday' },
+            { label: '近3天', value: 'last3Days' },
+            { label: '近1周', value: 'last1Week' },
+            { label: '近1月', value: 'last1Month' },
+            { label: '自定义', value: 'custom' }
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '小组',
+        key: 'group',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '分组1', value: 'group1' },
+            { label: '分组2', value: 'group2' },
+            { label: '分组3', value: 'group3' },
+            { label: '分组4', value: 'group4' },
+            { label: '分组5', value: 'group5' },
+            { label: '分组6', value: 'group6' },
+        ],
+        defaultValue: 'all'
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '马丁', value: 'martin' },
+            { label: '王诗雅', value: 'wangshiya' },
+            { label: '王梓木', value: 'wangzimu' },
+            { label: '殷思源', value: 'yinsiyuan' },
+            { label: '付文杰', value: 'fuwenjie' },
+            { label: '李润曦', value: 'lirunxi' },
+        ],
+        defaultValue: 'all'
+    },
 ]);