添加客户操作记录弹窗

src/baseComponents/PreviewDialog.vue

@@ -127,4 +127,9 @@ const HandleConfirmCheck = async () => {
     }
 }
 
+:deep(.el-dialog__footer){
+    line-height: 1;
+    height: auto !important;
+}
+
 </style>

src/components/FollowCard.vue

@@ -13,6 +13,7 @@
                     <template v-if="item.headerTags?.length > 0">
                         <el-tag v-for="(tag,index) in item.headerTags" 
                                 :key="index" 
+                                :disable-transitions="true"
                                 type="success" effect="light" size="small" 
                                 class="status_tag">
                             {{ tag }}

src/views/myCustomer/myCustomerDetail/index.vue

@@ -4,7 +4,7 @@
             <template #topRight>
                 <div class="header_content">
                     <span>{{ customerBaseMsg.schoolName }}</span>
-                    <el-tag type="success" effect="light" size="small" class="status_tag">
+                    <el-tag type="success" effect="light" size="small" :disable-transitions="true" class="status_tag">
                         {{ customerBaseMsg.customerType }}
                     </el-tag>
                 </div>
@@ -23,7 +23,7 @@
                     <el-button class="button_refresh"><img :src="editIcon" alt=""> 编辑</el-button>
                     <el-button class="button_refresh"><img :src="poepleMoveIcon" alt=""> 转至公海</el-button>
                     <el-button class="button_refresh" @click="OpenTransferFormDialog"><img :src="exchangeIcon" alt="" > 转让</el-button>
-                    <el-button class="button_refresh"><img :src="logIcon" alt=""> 操作记录</el-button>
+                    <el-button class="button_refresh" @click="OpenOperationRecordDialog"><img :src="logIcon" alt=""> 操作记录</el-button>
                 </div>
             </template>
         </TopBackNav>
@@ -44,18 +44,41 @@
 
     <!-- 转让 弹窗 -->
     <FormDialog title="转让" :visible="transferFormDialogVisible" 
-        :submit-loading="transFormDialogSubmitLoading" 
+        :submit-loading="transferFormDialogSubmitLoading" 
         :default-form-data="transferDefaultFormData" 
         :formItemList="formItemList"
         @close="CloseTransferFormDialog"
         @confirm="HandleTransferFormDialogConfirm">
     </FormDialog>
 
+    <!-- 操作记录 弹窗 -->
+    <PreviewDialog 
+        class="operation_dialog"
+        title="操作记录"
+        :previewVisible="operationRecordDialogVisible"
+        :customFooter="true"
+        @close="CloseOperationRecordDialog">
+
+        <SearchBlock :searchList="operationRecordSearchList"></SearchBlock>
+
+        <FollowCard :card-list="finalOperationLogRenderData">
+            <template #operation><i></i></template>
+        </FollowCard>
+
+        <Pagination :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"></Pagination>
+
+
+        <template #close>
+            <el-button @click="CloseOperationRecordDialog" class="button_background" >关闭</el-button>
+        </template>
+        <template #confirm><i></i></template>
+    </PreviewDialog>
+
 
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import TopBackNav from '@/baseComponents/TopBackNav.vue';
 import addIcon from '@/assets/icon/add.svg';
 import peopleEditIcon from '@/assets/icon/people_edit.png'
@@ -69,7 +92,12 @@ import FormDialog from '@/baseComponents/FormDialog.vue';
 import {formItemList} from './formDialog'
 import ContactDetail from './contactDetail/index.vue'
 import CustomerStatusOverview from './customerStatusOverview/index.vue'
+import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
 
+import {operationRecordSearchList} from './searchBlock'
+import FollowCard from '@/components/FollowCard.vue';
+import Pagination from '@/baseComponents/Pagination.vue';
 
 const customerBaseMsg = ref({
   schoolName: '北京市第一零九中学',
@@ -90,15 +118,14 @@ const HandleTabChange = (val)=>{
 }
 
 
-// 转让弹窗相关内容
+/**  转让弹窗相关内容及操作  */
 const transferFormDialogVisible = ref(false)
-const transFormDialogSubmitLoading = ref(false)
+const transferFormDialogSubmitLoading = ref(false)
 const transferDefaultFormData = ref({
     schoolName: '北京市第一零九中学',
     currentOwner: '张三',
     newOwner:'',
 })
-
 const OpenTransferFormDialog=()=>{
     console.log('打开转让弹窗')
     transferFormDialogVisible.value = true
@@ -107,11 +134,9 @@ const OpenTransferFormDialog=()=>{
 const CloseTransferFormDialog=()=>{
     transferFormDialogVisible.value = false
 }
-
 const HandleTransferFormDialogConfirm = ()=>{
     CloseTransferFormDialog()
 }
-
 // 获取归属人列表
 const GetOwnerList = ()=>{
     formItemList.value = formItemList.value.map(item=>{
@@ -137,7 +162,82 @@ const GetOwnerList = ()=>{
 }
 
 
+/**  操作记录相关内容及操作 */
+const operationRecordDialogVisible = ref(false)
+const OpenOperationRecordDialog=()=>{
+    console.log('打开操作记录弹窗')
+    operationRecordDialogVisible.value = true
+}
+const CloseOperationRecordDialog=()=>{
+    operationRecordDialogVisible.value = 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 finalOperationLogRenderData = computed(()=>{
+    return operationLogList.value.map(item=>{
+        return {
+            headerTitleList:[
+                item.operationTime,
+                item.operatorName,
+                item.schoolName,
+                item.operationType
+            ],
+            headerTags:[],
+            middleDesc:[],
+            bottomDesc:`操作内容：${item.operationContent}`
+        }
+    })
+})
+
+/** 分页参数 有关数据 */
+const currentPage = ref(1)
+const pageSize = ref(20)
+const totalNum = ref(0)
 
 
 </script>
@@ -199,4 +299,10 @@ const GetOwnerList = ()=>{
         overflow: auto;
     }
 }
+
+.operation_dialog{
+    .follow_card{
+        margin-top: 16px;
+    }
+}
 </style>

src/views/myCustomer/myCustomerDetail/searchBlock.ts

@@ -0,0 +1,35 @@
+import { ref } from "vue";
+
+
+export const operationRecordSearchList = 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: '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'
+    },
+])