客户详情完善

src/components/OperateLogV2/src/OperateLogV2.vue

@@ -2,36 +2,14 @@
   <div class="p-20px">
     <el-timeline>
       <el-timeline-item
-        v-for="(log, index) in logDataList"
+        v-for="(log, index) in logList"
         :key="index"
         :timestamp="formatDate(log.createTime)"
         placement="top"
       >
         <div class="el-timeline-right-content">
-          <el-row>
-            <el-col :span="24" class="mb-10px">
-              =======================
-              <el-tag class="mr-10px" type="success">{{ log.userName }}</el-tag>
-              <span>{{ log.title }}</span>
-              =======================
-            </el-col>
-            <!-- 先处理一下有几行-->
-            <template v-for="colNum in log.colSize" :key="colNum + 'col'">
-              <el-col :span="24" class="mb-10px">
-                <!-- 处理每一行-->
-                <template
-                  v-for="(tagVal, index2) in log.tagsContentList.slice(
-                    (colNum - 1) * 3,
-                    3 * colNum
-                  )"
-                  :key="index2"
-                >
-                  <el-tag class="mx-10px"> {{ tagVal }}</el-tag>
-                  <span>{{ log.contentStrList[index2] }}</span>
-                </template>
-              </el-col>
-            </template>
-          </el-row>
+          <el-tag class="mr-10px" type="success">{{ log.userName }}</el-tag>
+          {{ log.action }}
         </div>
         <template #dot>
           <span :style="{ backgroundColor: getUserTypeColor(log.userType) }" class="dot-node-style">
@@ -51,11 +29,13 @@ import { ElTag } from 'element-plus'
 
 defineOptions({ name: 'OperateLogV2' })
 
-const props = defineProps<{
+interface Props {
   logList: OperateLogV2VO[] // 操作日志列表
-}>()
+}
 
-const logDataList = ref<OperateLogV2VO[]>([]) // 操作日志列表
+withDefaults(defineProps<Props>(), {
+  logList: () => []
+})
 
 /** 获得 userType 颜色 */
 const getUserTypeColor = (type: number) => {
@@ -72,57 +52,6 @@ const getUserTypeColor = (type: number) => {
   }
   return '#409EFF'
 }
-
-// 提取 tag 所需内容和位置
-const renderTags = (content: string) => {
-  let newStr = unref(content).slice() // 去掉引用
-  newStr = newStr.replaceAll('【】', '【空】').replaceAll('；', '') // 处理掉分号 特殊：处理一下空的情况
-  const regex = /【([^【】]+)】/g
-  const fg = '|' // 原始位置替换符号
-  let match: any[] | null
-  let matchStr: string[] = []
-  let oldStr: string[] = []
-  while ((match = regex.exec(newStr)) !== null) {
-    matchStr.push(match[1]) // 提取值
-    oldStr.push(match[0]) // 原值
-  }
-  // 为什么重新循环不放在 while 中一起是因为替换重新赋值过后 match 值就不准确了
-  oldStr.forEach((item) => {
-    newStr = newStr.replace(item, fg)
-  })
-  return [newStr.split(fg), matchStr]
-}
-
-const initLog = () => {
-  logDataList.value = props.logList.map((logItem) => {
-    const keyValue = renderTags(logItem.action)
-    // 挂载数据
-    logItem.contentStrList = keyValue[0]
-    if (keyValue[0][0] === '从') {
-      logItem.title = logItem.subType
-    } else {
-      logItem.title = keyValue[0][0]
-      logItem.contentStrList.splice(0, 1)
-    }
-    logItem.colSize = keyValue[0].length / 3 // 变更记录行数
-    logItem.tagsContentList = keyValue[1]
-    return logItem
-  })
-}
-
-watch(
-  () => props.logList.length,
-  (newObj) => {
-    if (newObj) {
-      initLog()
-      console.log(logDataList.value)
-    }
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
 </script>
 
 <style lang="scss" scoped>