添加操作记录弹窗接口调用

src/baseComponents/Pagination.vue

@@ -1,12 +1,14 @@
 <template>
     <div class="page_pagination" v-if="!(hidePagination)">
-        <!-- background layout="sizes, prev, pager, next"  -->
+        <slot name="paginationDesc"></slot>
+
         <el-pagination 
         :hide-on-single-page="props.hidesinglePage"
         :current-page="props.currentPage" 
         :page-size="props.pageSize" 
         :page-sizes="[20, 50, 100]" 
-        background layout="prev, pager, next" 
+        background 
+        :layout="(showPageSize ? 'sizes,' : '') + 'prev, pager, next'" 
         :total="Number(props.totalNum)" 
         @current-change="(val)=>emit('paginationChange',{type:'currentPage',val})" 
         @size-change="(val)=>emit('paginationChange',{type:'pageSize',val})" />
@@ -27,6 +29,10 @@ const props = defineProps({
         type:Number,
         default:1
     },
+    showPageSize:{
+        type:Boolean,
+        default:false
+    },
     pageSize:{
         type:Number,
         default:20

src/components/FollowCard.vue

@@ -35,8 +35,8 @@
                 <span v-for="(desc,index) in item.middleDesc" :key="index">{{ desc }}</span>
             </div>
             <!-- 3. 底部内容 -->
-            <div class="card_content">
-                {{ item.bottomDesc }}
+            <div class="card_content" >
+                <span v-html="item?.bottomDesc"></span>
             </div>
             <slot name="additional" :row="item"></slot>
         </li>

src/views/highSeasCustomer/highSeasCustomerDetail/contactDetail/index.vue

@@ -36,6 +36,7 @@
         @confirm="HandleUpdateConcactPeople">
     </ConcactPeopleFormDialog>
 
+    <!-- 删除联系人弹窗 -->
     <Dialog :visible="deleteDialogVisible" 
         :submitLoading="deleteDialogSubmitLoading"
         @close="CloseDeleteDialog"

src/views/highSeasCustomer/highSeasCustomerDetail/index.vue

@@ -43,11 +43,20 @@
             :previewVisible="operationRecordDialogVisible"
             :customFooter="true"
             @close="CloseOperationRecordDialog">
-            <SearchBlock :searchList="operationRecordSearchList"></SearchBlock>
+            <SearchBlock :searchList="operationRecordSearchList" 
+                @searchChange="HandleOperationLogSearchChange">
+            </SearchBlock>
             <FollowCard :card-list="finalOperationLogRenderData">
                 <template #operation><i></i></template>
             </FollowCard>
-            <Pagination :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"></Pagination>
+            <Pagination :currentPage="currentPage" 
+                :pageSize="pageSize" :totalNum="totalNum"
+                :showPageSize="true"
+                @paginationChange="HandleLogPaginationChange">
+                <template #paginationDesc>
+                    <span style="flex: 1 1;color: #666666;">共 {{totalNum}} 条数据</span>
+                </template>
+            </Pagination>
             <template #close>
                 <el-button @click="CloseOperationRecordDialog" class="button_background" >关闭</el-button>
             </template>
@@ -253,90 +262,53 @@ const HandleSchoolDialogConfirm = async (params)=>{
 
 
 /** 4. 操作记录相关内容及操作 */
+// 操作记录弹窗
 const operationRecordDialogVisible = ref(false)
+// 打开
 const OpenOperationRecordDialog = async ()=>{
-    console.log('打开操作记录弹窗')
     operationRecordDialogVisible.value = true
-
     await GetOperationList()
 }
+// 关闭
 const CloseOperationRecordDialog=()=>{
     operationRecordDialogVisible.value = false
+    searchParams.value = {
+        personnel:'all'
+    }
 }
 
-
-
-/**  操作记录有关数据  */
-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 finalOperationLogRenderData = ref([])
 //  分页参数 有关数据 *
 const currentPage = ref(1)
 const pageSize = ref(20)
 const totalNum = ref(0)
-
+const searchParams = ref({
+    personnel:'all'
+})
+// 搜索条件变化
+const HandleOperationLogSearchChange = async (params,key)=>{
+    searchParams.value = {
+        ...searchParams.value,
+        ...params,
+    }
+    await GetOperationList()
+}
+// 分页变化
+const HandleLogPaginationChange = async (params)=>{
+    const {type,val} = params
+    if(type == 'currentPage'){
+        currentPage.value = val
+    }else if(type == 'pageSize'){
+        pageSize.value = val
+    }
+    await GetOperationList()
+}
+//获取日志列表
 const GetOperationList = async ()=>{
     let params = {
-        customerId: route.params.id,
-        "operUserId": '',
-        // "groupId": 0,
-        // "startDate": "",
-        // "endDate": "",
+        customerId: route.query.id,
+        operUserId: searchParams.value.personnel == 'all' ? '' : searchParams.value.personnel,
         pageNum: currentPage.value,
         pageSize: pageSize.value
     }
@@ -345,24 +317,97 @@ const GetOperationList = async ()=>{
        const {data:operationData, dateData, groupData, memberData} =  res?.data
        totalNum.value = operationData.total
 
-       finalOperationLogRenderData = operationData.records.map(item=>{
-        return {
-            headerTitleList:[
-                item.operDatetime,
-                item.operName,
-                item.operationType
-            ],
-            headerTags:[],
-            middleDesc:[],
-            bottomDesc:`操作内容：${item.operationContent}`
-        }
-       })
+        let memberOption = memberData?.map(item=>{
+            return {
+                label:item.username,
+                value:item.id
+            }
+        }) || []
+        operationRecordSearchList.value = operationRecordSearchList.value.map(item=>{
+            if(item.key=='personnel'){
+                item.options = [
+                    { label: '全部', value: 'all' },
+                    ...memberOption
+                ]
+                item.defaultValue = searchParams.value.personnel
+            }
+            return item
+        })
 
 
-    }
 
+        finalOperationLogRenderData.value = operationData.records.map(item=>{
+            let operationName = OperationNumToName(item.operAction)
+            //操作概览
+            let operationAim = ''
+            if(item.operDataType === 1){  //联系人
+                // 增  改  删
+                if([11,12,13].includes(item.operAction)){
+                    operationAim = '联系人'
+                }else{
+                    operationAim = ''
+                }
+            }else if(item.operDataType === 0){ //客户
+                if([12].includes(item.operAction)){
+                    operationAim = '学校信息'
+                }else{
+                    operationAim = ''
+                }
+                // 这两个 记录的结果待完善
+                // case 1:
+                //     return '跟进'
+                // case 2:
+                //     return '转让'
+            }
+
+            // 具体操作信息
+            // 增  改  删
+            let operationDetail = ''
+            let content = item.content.split(',')
+            if([11,12,13].includes(item.operAction)){
+                if(item.operAction === 12){
+                    operationDetail = content[0] + ` <span style="color:#2E64FA">调整为</span> ` + content[1]
+                }else if(item.operAction === 11){
+                    operationDetail =  `<span style="color:#2E64FA">新增</span> ` + content[0]  
+                }else if(item.operAction === 13){
+                    operationDetail =  `<span style="color:#F56C6C">删除</span> ` + content[0]  
+                }
+            }else{
+                operationDetail = content[0]
+            }
+            return {
+                headerTitleList:[
+                    item.operDatetime,
+                    item.operName,
+                    operationName+operationAim,
+                ],
+                headerTags:[],
+                middleDesc:[],
+                bottomDesc:`操作内容：${operationDetail}`
+            }
+        })
+    }
 }
 
+// 0-认领，1-跟进，2-转让，3-转到公海,11-新增，12-修改，13-删除
+const OperationNumToName = (num)=>{
+    switch(num){
+        case 0:
+            return '认领'
+        case 1:
+            return '跟进'
+        case 2:
+            return '转让'
+        case 3:
+            return '转至公海'
+        case 11:
+            return '新增'
+        case 12:
+            return '编辑'
+        case 13:
+            return '删除'
+    }
+}
 
 /**
  * 5. 认领 有关操作

src/views/highSeasCustomer/highSeasCustomerDetail/searchBlock.ts

@@ -6,15 +6,7 @@ export const operationRecordSearchList = ref([
         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' },
-        ],
+        options: [],
         defaultValue: 'all'
     },
 ])