crm-客户：集成操作日志详情组件

2025-11-04 04:08:44 +08:00 · 2023-12-14 18:19:34 +08:00
parent 59c6670775
commit 455688eaa8
5 changed files with 48 additions and 27 deletions
--- a/src/api/crm/customer/index.ts
+++ b/src/api/crm/customer/index.ts
@@ -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 getOperateLog = async (id: number) => {
+  return await request.get({ url: `/crm/customer/operate-log?id=` + id })
+}
--- a/src/views/crm/customer/CustomerForm.vue
+++ b/src/views/crm/customer/CustomerForm.vue
@@ -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'
--- a/src/views/crm/customer/detail/CustomerDetailsHeader.vue
+++ b/src/views/crm/customer/detail/CustomerDetailsHeader.vue
@@ -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 // 加载中
--- a/src/views/crm/customer/detail/CustomerDetailsInfo.vue
+++ b/src/views/crm/customer/detail/CustomerDetailsInfo.vue
@@ -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>
--- a/src/views/crm/customer/detail/index.vue
+++ b/src/views/crm/customer/detail/index.vue
@@ -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,34 @@ 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
+  }
+  logList.value = await CustomerApi.getOperateLog(customerId)
+}
 /** 初始化 */
 const { delView } = useTagsViewStore() // 视图操作
 const { currentRoute } = useRouter() // 路由