✨ CRM：完善回款的详情

src/api/crm/receivable/index.ts

@@ -5,14 +5,24 @@ export interface ReceivableVO {
   no: string
   planId: number
   customerId: number
+  customerName?: string
   contractId: number
+  contract?: {
+    no: string
+    totalPrice: number
+  }
   auditStatus: number
   processInstanceId: number
   returnTime: Date
   returnType: string
   price: number
   ownerUserId: number
+  ownerUserName?: string
   remark: string
+  creator: string // 创建人
+  creatorName?: string // 创建人名称
+  createTime: Date // 创建时间
+  updateTime: Date // 更新时间
 }
 
 // 查询回款列表

src/router/modules/remaining.ts

@@ -546,11 +546,22 @@ const remainingRouter: AppRouteRecordRaw[] = [
           title: '回款计划详情',
           noCache: true,
           hidden: true,
-          activeMenu: '/crm/contract'
+          activeMenu: '/crm/receivable-plan'
         },
         component: () => import('@/views/crm/receivable/plan/detail/index.vue')
       },
       {
+        path: 'receivable/detail/:id',
+        name: 'CrmReceivableDetail',
+        meta: {
+          title: '回款详情',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/crm/receivable'
+        },
+        component: () => import('@/views/crm/receivable/detail/index.vue')
+      },
+      {
         path: 'contact/detail/:id',
         name: 'CrmContactDetail',
         meta: {

src/views/crm/receivable/detail/ReceivableDetailsHeader.vue

+<template>
+  <div>
+    <div class="flex items-start justify-between">
+      <div>
+        <el-col>
+          <el-row>
+            <span class="text-xl font-bold">{{ receivable.no }}</span>
+          </el-row>
+        </el-col>
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="vertical">
+      <el-descriptions-item label="客户名称">
+        {{ receivable.customerName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="合同金额">
+        {{ erpPriceInputFormatter(receivable.contract?.totalPrice) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="回款日期">
+        {{ formatDate(receivable.returnTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="回款金额">
+        {{ erpPriceInputFormatter(receivable.price) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="负责人">
+        {{ receivable.ownerUserName }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as ReceivableApi from '@/api/crm/receivable'
+import { formatDate } from '@/utils/formatTime'
+import { erpPriceInputFormatter } from '@/utils'
+
+const { receivable } = defineProps<{ receivable: ReceivableApi.ReceivableVO }>()
+</script>

src/views/crm/receivable/detail/ReceivableDetailsInfo.vue

+<template>
+  <ContentWrap>
+    <el-collapse v-model="activeNames">
+      <el-collapse-item name="basicInfo">
+        <template #title>
+          <span class="text-base font-bold">基本信息</span>
+        </template>
+        <el-descriptions :column="4">
+          <el-descriptions-item label="回款编号">{{ receivable.no }}</el-descriptions-item>
+          <el-descriptions-item label="客户名称">
+            {{ receivable.customerName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="合同编号">
+            {{ receivable.contract?.no }}
+          </el-descriptions-item>
+          <el-descriptions-item label="回款日期">
+            {{ formatDate(receivable.returnTime, 'YYYY-MM-DD') }}
+          </el-descriptions-item>
+          <el-descriptions-item label="回款金额">
+            {{ erpPriceInputFormatter(receivable.price) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="回款方式">
+            <dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE" :value="receivable.returnType" />
+          </el-descriptions-item>
+          <el-descriptions-item label="备注">{{ receivable.remark }}</el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+      <el-collapse-item name="systemInfo">
+        <template #title>
+          <span class="text-base font-bold">系统信息</span>
+        </template>
+        <el-descriptions :column="4">
+          <el-descriptions-item label="负责人">
+            {{ receivable.ownerUserName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人">
+            {{ receivable.creatorName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">
+            {{ formatDate(receivable.createTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间">
+            {{ formatDate(receivable.updateTime) }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+    </el-collapse>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import * as ReceivableApi from '@/api/crm/receivable'
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { erpPriceInputFormatter } from '@/utils'
+
+const { receivable } = defineProps<{
+  receivable: ReceivableApi.ReceivableVO
+}>()
+
+// 展示的折叠面板
+const activeNames = ref(['basicInfo', 'systemInfo'])
+</script>

src/views/crm/receivable/detail/index.vue

+<template>
+  <ReceivableDetailsHeader v-loading="loading" :receivable="receivable">
+    <el-button v-if="permissionListRef?.validateWrite" @click="openForm('update', receivable.id)">
+      编辑
+    </el-button>
+  </ReceivableDetailsHeader>
+  <el-col>
+    <el-tabs>
+      <el-tab-pane label="详细资料">
+        <ReceivableDetailsInfo :receivable="receivable" />
+      </el-tab-pane>
+      <el-tab-pane label="操作日志">
+        <OperateLogV2 :log-list="logList" />
+      </el-tab-pane>
+      <el-tab-pane label="团队成员">
+        <PermissionList
+          ref="permissionListRef"
+          :biz-id="receivable.id!"
+          :biz-type="BizTypeEnum.CRM_RECEIVABLE"
+          :show-action="true"
+          @quit-team="close"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </el-col>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ReceivableForm ref="formRef" @success="getReceivable(receivable.id)" />
+</template>
+<script lang="ts" setup>
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as ReceivableApi from '@/api/crm/receivable'
+import ReceivableDetailsHeader from './ReceivableDetailsHeader.vue'
+import ReceivableDetailsInfo from './ReceivableDetailsInfo.vue'
+import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 团队成员列表（权限）
+import { BizTypeEnum } from '@/api/crm/permission'
+import { OperateLogV2VO } from '@/api/system/operatelog'
+import { getOperateLogPage } from '@/api/crm/operateLog'
+import ReceivableForm from '@/views/crm/receivable/ReceivableForm.vue'
+
+defineOptions({ name: 'CrmReceivablePlanDetail' })
+
+const message = useMessage()
+
+const receivableId = ref(0) // 回款编号
+const loading = ref(true) // 加载中
+const receivable = ref<ReceivableApi.ReceivableVO>({} as ReceivableApi.ReceivableVO) // 回款详情
+const permissionListRef = ref<InstanceType<typeof PermissionList>>() // 团队成员列表 Ref
+
+/** 获取详情 */
+const getReceivable = async (id: number) => {
+  loading.value = true
+  try {
+    receivable.value = await ReceivableApi.getReceivable(id)
+    await getOperateLog(id)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 编辑 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 获取操作日志 */
+const logList = ref<OperateLogV2VO[]>([]) // 操作日志列表
+const getOperateLog = async (receivableId: number) => {
+  if (!receivableId) {
+    return
+  }
+  const data = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_RECEIVABLE,
+    bizId: receivableId
+  })
+  logList.value = data.list
+}
+
+/** 关闭窗口 */
+const { delView } = useTagsViewStore() // 视图操作
+const { currentRoute } = useRouter() // 路由
+const close = () => {
+  delView(unref(currentRoute))
+}
+
+/** 初始化 */
+const { params } = useRoute()
+onMounted(async () => {
+  if (!params.id) {
+    message.warning('参数错误，回款不能为空！')
+    close()
+    return
+  }
+  receivableId.value = params.id as unknown as number
+  await getReceivable(receivableId.value)
+})
+</script>

src/views/crm/receivable/index.vue

@@ -72,7 +72,13 @@
       <el-tab-pane label="下属负责的" name="3" />
     </el-tabs>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
-      <el-table-column align="center" fixed="left" label="回款编号" prop="no" width="180" />
+      <el-table-column align="center" fixed="left" label="回款编号" prop="no" width="180">
+        <template #default="scope">
+          <el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
+            {{ scope.row.no }}
+          </el-link>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="客户名称" prop="customerName" width="120">
         <template #default="scope">
           <el-link

src/views/crm/receivable/plan/detail/index.vue

@@ -45,7 +45,7 @@ defineOptions({ name: 'CrmReceivablePlanDetail' })
 
 const message = useMessage()
 
-const receivablePlanId = ref(0) // 线索编号
+const receivablePlanId = ref(0) // 回款计划编号
 const loading = ref(true) // 加载中
 const receivablePlan = ref<ReceivablePlanApi.ReceivablePlanVO>(
   {} as ReceivablePlanApi.ReceivablePlanVO