!346 feat:新增公共操作日志详情组件

Merge pull request !346 from puhui999/dev-crm
This commit is contained in:
芋道源码 2023-12-30 12:54:53 +00:00 committed by Gitee
commit 631c105f94
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
8 changed files with 252 additions and 27 deletions

View File

@ -67,3 +67,8 @@ export const exportCustomer = async (params) => {
export const queryAllList = async () => {
return await request.get({ url: `/crm/customer/query-all-list` })
}
// 查询客户操作日志
export const getOperateLogPage = async (params) => {
return await request.get({ url: '/crm/customer/operate-log-page', params })
}

View File

@ -23,6 +23,32 @@ export type OperateLogVO = {
resultData: string
}
export type OperateLogV2VO = {
id: number
userNickname: string
traceId: string
userType: number
userId: number
userName: string
type: string
subType: string
bizId: number
action: string
extra: string
requestMethod: string
requestUrl: string
userIp: string
userAgent: string
creator: string
creatorName: string
createTime: Date
// 数据扩展-渲染时使用
title: string // 操作标题(如果为空则取 name 值)
colSize: number // 变更记录行数
contentStrList: string[]
tagsContentList: string[]
}
// 查询操作日志列表
export const getOperateLogPage = (params: PageParam) => {
return request.get({ url: '/system/operate-log/page', params })

View File

@ -0,0 +1,3 @@
import OperateLogV2 from './src/OperateLogV2.vue'
export { OperateLogV2 }

View File

@ -0,0 +1,170 @@
<template>
<div class="p-20px">
<el-timeline>
<el-timeline-item
v-for="(log, index) in logDataList"
: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>
</div>
<template #dot>
<span :style="{ backgroundColor: getUserTypeColor(log.userType) }" class="dot-node-style">
{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
</span>
</template>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script lang="ts" setup>
import { OperateLogV2VO } from '@/api/system/operatelog'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
import { ElTag } from 'element-plus'
const props = defineProps<{
logList: OperateLogV2VO[] //
}>()
defineOptions({ name: 'OperateLogV2' })
/** 获得 userType 颜色 */
const getUserTypeColor = (type: number) => {
const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
switch (dict?.colorType) {
case 'success':
return '#67C23A'
case 'info':
return '#909399'
case 'warning':
return '#E6A23C'
case 'danger':
return '#F56C6C'
}
return '#409EFF'
}
const logDataList = ref<OperateLogV2VO[]>([]) //
// 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>
// 线
:deep(.el-timeline) {
margin: 10px 0 0 160px;
.el-timeline-item__wrapper {
position: relative;
top: -20px;
.el-timeline-item__timestamp {
position: absolute !important;
top: 10px;
left: -150px;
}
}
.el-timeline-right-content {
display: flex;
align-items: center;
min-height: 30px;
padding: 10px;
background-color: #fff;
&::before {
position: absolute;
top: 10px;
left: 13px; /* 将伪元素水平居中 */
border-color: transparent #fff transparent transparent; /* 尖角颜色,左侧朝向 */
border-style: solid;
border-width: 8px; /* 调整尖角大小 */
content: ''; /* 必须设置 content 属性 */
}
}
}
.dot-node-style {
position: absolute;
left: -5px;
display: flex;
width: 20px;
height: 20px;
font-size: 10px;
color: #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
}
</style>

View File

@ -1,11 +1,11 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<Dialog v-model="dialogVisible" :title="dialogTitle">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-row>
<el-col :span="12">
@ -17,7 +17,7 @@
<el-form-item label="所属行业" prop="industryId">
<el-select v-model="formData.industryId" placeholder="请选择所属行业">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -31,7 +31,7 @@
<el-form-item label="客户来源" prop="source">
<el-select v-model="formData.source" placeholder="请选择客户来源">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -43,7 +43,7 @@
<el-form-item label="客户等级" prop="level">
<el-select v-model="formData.level" placeholder="请选择客户等级">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -120,9 +120,9 @@
<el-form-item label="下次联系时间" prop="contactNextTime">
<el-date-picker
v-model="formData.contactNextTime"
placeholder="选择下次联系时间"
type="date"
value-format="x"
placeholder="选择下次联系时间"
/>
</el-form-item>
</el-col>
@ -139,13 +139,13 @@
</el-col>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button :disabled="formLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as CustomerApi from '@/api/crm/customer'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'

View File

@ -14,6 +14,7 @@
<el-button v-hasPermi="['crm:customer:update']" @click="openForm(customer.id)">
编辑
</el-button>
<el-button @click="transfer">转移</el-button>
<el-button>更改成交状态</el-button>
</div>
</div>
@ -26,22 +27,24 @@
<el-descriptions-item label="成交状态">
{{ customer.dealStatus ? '已成交' : '未成交' }}
</el-descriptions-item>
<el-descriptions-item label="负责人">{{ customer.ownerUserName }} </el-descriptions-item>
<el-descriptions-item label="负责人">{{ customer.ownerUserName }}</el-descriptions-item>
<!-- TODO wanwan 首要联系人? -->
<el-descriptions-item label="首要联系人" />
<!-- TODO wanwan 首要联系人电话? -->
<el-descriptions-item label="首要联系人电话">{{ customer.mobile }} </el-descriptions-item>
<el-descriptions-item label="首要联系人电话">{{ customer.mobile }}</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<CustomerForm ref="formRef" @success="emit('refresh')" />
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import * as CustomerApi from '@/api/crm/customer'
import CustomerForm from '../CustomerForm.vue'
defineOptions({ name: 'CustomerDetailsHeader' })
const { customer, loading } = defineProps<{
customer: CustomerApi.CustomerVO //
loading: boolean //

View File

@ -1,6 +1,6 @@
<template>
<ContentWrap>
<el-collapse class="" v-model="activeNames">
<el-collapse v-model="activeNames" class="">
<el-collapse-item name="basicInfo">
<template #title>
<span class="text-base font-bold">基本信息</span>
@ -20,11 +20,11 @@
</el-descriptions-item>
<el-descriptions-item label="手机">{{ customer.mobile }}</el-descriptions-item>
<el-descriptions-item label="电话">{{ customer.telephone }}</el-descriptions-item>
<el-descriptions-item label="邮箱">{{ customer.email }} </el-descriptions-item>
<el-descriptions-item label="QQ">{{ customer.qq }} </el-descriptions-item>
<el-descriptions-item label="微信">{{ customer.wechat }} </el-descriptions-item>
<el-descriptions-item label="网址">{{ customer.website }} </el-descriptions-item>
<el-descriptions-item label="所在地">{{ customer.areaName }} </el-descriptions-item>
<el-descriptions-item label="邮箱">{{ customer.email }}</el-descriptions-item>
<el-descriptions-item label="QQ">{{ customer.qq }}</el-descriptions-item>
<el-descriptions-item label="微信">{{ customer.wechat }}</el-descriptions-item>
<el-descriptions-item label="网址">{{ customer.website }}</el-descriptions-item>
<el-descriptions-item label="所在地">{{ customer.areaName }}</el-descriptions-item>
<el-descriptions-item label="详细地址"
>{{ customer.detailAddress }}
</el-descriptions-item>
@ -38,8 +38,8 @@
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="1">
<el-descriptions-item label="客户描述">{{ customer.description }} </el-descriptions-item>
<el-descriptions-item label="备注">{{ customer.remark }} </el-descriptions-item>
<el-descriptions-item label="客户描述">{{ customer.description }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ customer.remark }}</el-descriptions-item>
</el-descriptions>
</el-collapse-item>
<el-collapse-item name="systemInfo">
@ -47,8 +47,8 @@
<span class="text-base font-bold">系统信息</span>
</template>
<el-descriptions :column="2">
<el-descriptions-item label="负责人">{{ customer.ownerUserName }} </el-descriptions-item>
<el-descriptions-item label="创建人">{{ customer.creatorName }} </el-descriptions-item>
<el-descriptions-item label="负责人">{{ customer.ownerUserName }}</el-descriptions-item>
<el-descriptions-item label="创建人">{{ customer.creatorName }}</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ customer.createTime ? formatDate(customer.createTime) : '空' }}
</el-descriptions-item>
@ -60,15 +60,16 @@
</el-collapse>
</ContentWrap>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import * as CustomerApi from '@/api/crm/customer'
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
defineOptions({ name: 'CustomerDetailsInfo' })
const { customer } = defineProps<{
customer: CustomerApi.CustomerVO //
}>()
const activeNames = ref(['basicInfo', 'systemInfo']) //
</script>
<style scoped lang="scss"></style>
<style lang="scss" scoped></style>

View File

@ -5,7 +5,9 @@
<el-tab-pane label="详细资料">
<CustomerDetailsInfo :customer="customer" />
</el-tab-pane>
<el-tab-pane label="操作日志" lazy>TODO 待开发</el-tab-pane>
<el-tab-pane label="操作日志">
<OperateLogV2 :log-list="logList" />
</el-tab-pane>
<el-tab-pane label="联系人" lazy>
<ContactList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
</el-tab-pane>
@ -38,24 +40,39 @@ import ReceivableList from '@/views/crm/receivable/components/ReceivableList.vue
import ReceivablePlanList from '@/views/crm/receivable/plan/components/ReceivablePlanList.vue' //
import PermissionList from '@/views/crm/permission/components/PermissionList.vue' //
import { BizTypeEnum } from '@/api/crm/permission'
import { OperateLogV2VO } from '@/api/system/operatelog'
defineOptions({ name: 'CrmCustomerDetail' })
const route = useRoute()
const id = Number(route.params.id) //
const loading = ref(true) //
/** 获取详情 */
const customer = ref<CustomerApi.CustomerVO>({} as CustomerApi.CustomerVO) //
const getCustomer = async (id: number) => {
loading.value = true
try {
customer.value = await CustomerApi.getCustomer(id)
await getOperateLog(id)
} finally {
loading.value = false
}
}
const logList = ref<OperateLogV2VO[]>([]) //
/**
* 获取操作日志
*/
const getOperateLog = async (customerId: number) => {
if (!customerId) {
return
}
const data = await CustomerApi.getOperateLogPage({
pageNo: 1,
pageSize: 10,
bizId: customerId
})
logList.value = data.list
}
/** 初始化 */
const { delView } = useTagsViewStore() //
const { currentRoute } = useRouter() //