crm：完善数据权限的界面

src/views/crm/customer/detail/CustomerBasicInfo.vue

@@ -1,18 +0,0 @@
-<template>
-  <el-col>
-    <el-row>
-      <span class="text-xl font-bold">{{ customer.name }}</span>
-    </el-row>
-  </el-col>
-  <el-col class="mt-10px">
-    <!-- TODO 标签 -->
-    <!--    <Icon icon="ant-design:tag-filled" />-->
-  </el-col>
-</template>
-<script setup lang="ts">
-import * as CustomerApi from '@/api/crm/customer'
-
-const { customer } = defineProps<{
-  customer: CustomerApi.CustomerVO
-}>()
-</script>

src/views/crm/customer/detail/CustomerDetailsHeader.vue

@@ -3,7 +3,11 @@
     <div class="flex items-start justify-between">
       <div>
         <!-- 左上：客户基本信息 -->
-        <CustomerBasicInfo :customer="customer" />
+        <el-col>
+          <el-row>
+            <span class="text-xl font-bold">{{ customer.name }}</span>
+          </el-row>
+        </el-col>
       </div>
       <div>
         <!-- 右上：按钮 -->
@@ -15,29 +19,13 @@
     </div>
     <!-- TODO 芋艿： -->
     <el-row class="mt-10px">
+      <el-button> <Icon class="mr-5px" icon="ph:calendar-fill" /> 创建任务 </el-button>
+      <el-button> <Icon class="mr-5px" icon="carbon:email" /> 发送邮件 </el-button>
+      <el-button> <Icon class="mr-5px" icon="ep:opportunity" /> 创建商机 </el-button>
+      <el-button> <Icon class="mr-5px" icon="clarity:contract-line" />创建合同 </el-button>
+      <el-button> <Icon class="mr-5px" icon="icon-park:income-one" />创建回款 </el-button>
       <el-button>
-        <Icon class="mr-5px" icon="ph:calendar-fill" />
-        创建任务
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="carbon:email" />
-        发送邮件
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="ep:opportunity" />
-        创建商机
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="clarity:contract-line" />
-        创建合同
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="icon-park:income-one" />
-        创建回款
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
-        添加团队成员
+        <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" /> 添加团队成员
       </el-button>
     </el-row>
   </div>
@@ -49,15 +37,11 @@
       <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>
 
@@ -65,15 +49,13 @@
   <CustomerForm ref="formRef" @success="emit('refresh')" />
 </template>
 <script setup lang="ts">
-import * as CustomerApi from '@/api/crm/customer'
 import { DICT_TYPE } from '@/utils/dict'
-// TODO @wanwan：是不是把 CustomerBasicInfo 也放进来。
-import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue'
-import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
+import * as CustomerApi from '@/api/crm/customer'
+import CustomerForm from '../CustomerForm.vue'
 
 const { customer, loading } = defineProps<{
-  customer: CustomerApi.CustomerVO
-  loading: boolean
+  customer: CustomerApi.CustomerVO // 客户信息
+  loading: boolean // 加载中
 }>()
 
 /** 修改操作 */

src/views/crm/customer/detail/CustomerDetailsInfo.vue

@@ -18,29 +18,15 @@
           <el-descriptions-item label="客户等级">
             <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
           </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.detailAddress }}
+          <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.detailAddress }}
           </el-descriptions-item>
           <el-descriptions-item label="下次联系时间">
             {{
@@ -52,12 +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">
@@ -65,12 +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>
@@ -88,10 +66,9 @@ import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 
 const { customer } = defineProps<{
-  customer: CustomerApi.CustomerVO
+  customer: CustomerApi.CustomerVO // 客户明细
 }>()
 
-// 展示的折叠面板
-const activeNames = ref(['basicInfo', 'systemInfo'])
+const activeNames = ref(['basicInfo', 'systemInfo']) // 展示的折叠面板
 </script>
 <style scoped lang="scss"></style>

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

@@ -1,16 +1,16 @@
 <template>
-  <CustomerDetailsHeader :customer="customer" :loading="loading" @refresh="getCustomerData(id)" />
+  <CustomerDetailsHeader :customer="customer" :loading="loading" @refresh="getCustomer(id)" />
   <el-col>
     <el-tabs>
       <el-tab-pane label="详细资料">
-        <CustomerDetails :customer="customer" />
+        <CustomerDetailsInfo :customer="customer" />
       </el-tab-pane>
       <el-tab-pane label="操作日志" lazy>TODO 待开发</el-tab-pane>
       <el-tab-pane label="联系人" lazy>
         <ContactList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
       </el-tab-pane>
       <el-tab-pane label="团队成员" lazy>
-        <CrmPermissionList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
+        <PermissionList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
       </el-tab-pane>
       <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
       <el-tab-pane label="合同" lazy>TODO 待开发</el-tab-pane>
@@ -20,31 +20,24 @@
     </el-tabs>
   </el-col>
 </template>
-
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as CustomerApi from '@/api/crm/customer'
-import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
-import { CrmPermissionList } from '@/views/crm/components'
-import ContactList from '@/views/crm/contact/components/ContactList.vue'
-import CustomerDetailsHeader from './CustomerDetailsHeader.vue'
+import CustomerDetailsInfo from './CustomerDetailsInfo.vue' // 客户明细 - 详细信息
+import CustomerDetailsHeader from './CustomerDetailsHeader.vue' // 客户明细 - 头部
+import ContactList from '@/views/crm/contact/components/ContactList.vue' // 联系人列表
+import PermissionList from '@/views/crm/permission/components/PermissionList.vue' // 权限列表
 import { BizTypeEnum } from '@/api/crm/permission'
 
-defineOptions({ name: 'CustomerDetail' })
+defineOptions({ name: 'CrmCustomerDetail' })
 
-const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
-const { currentRoute } = useRouter() // 路由
-const id = Number(route.params.id)
+const id = Number(route.params.id) // 客户编号
 const loading = ref(true) // 加载中
 
-/**
- * 获取详情
- *
- * @param id 客户编号
- */
+/** 获取详情 */
 const customer = ref<CustomerApi.CustomerVO>({} as CustomerApi.CustomerVO) // 客户详情
-const getCustomerData = async (id: number) => {
+const getCustomer = async (id: number) => {
   loading.value = true
   try {
     customer.value = await CustomerApi.getCustomer(id)
@@ -53,15 +46,15 @@ const getCustomerData = async (id: number) => {
   }
 }
 
-/**
- * 初始化
- */
+/** 初始化 */
+const { delView } = useTagsViewStore() // 视图操作
+const { currentRoute } = useRouter() // 路由
 onMounted(() => {
   if (!id) {
     ElMessage.warning('参数错误，客户不能为空！')
     delView(unref(currentRoute))
     return
   }
-  getCustomerData(id)
+  getCustomer(id)
 })
 </script>

src/views/crm/customer/index.vue

@@ -72,17 +72,10 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon class="mr-5px" icon="ep:search" />
-          搜索
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon class="mr-5px" icon="ep:refresh" />
-          重置
-        </el-button>
+        <el-button @click="handleQuery"> <Icon class="mr-5px" icon="ep:search" /> 搜索 </el-button>
+        <el-button @click="resetQuery"> <Icon class="mr-5px" icon="ep:refresh" />重置 </el-button>
         <el-button v-hasPermi="['crm:customer:create']" type="primary" @click="openForm('create')">
-          <Icon class="mr-5px" icon="ep:plus" />
-          新增
+          <Icon class="mr-5px" icon="ep:plus" /> 新增
         </el-button>
         <el-button
           v-hasPermi="['crm:customer:export']"
@@ -91,8 +84,7 @@
           type="success"
           @click="handleExport"
         >
-          <Icon class="mr-5px" icon="ep:download" />
-          导出
+          <Icon class="mr-5px" icon="ep:download" /> 导出
         </el-button>
       </el-form-item>
     </el-form>
@@ -102,7 +94,13 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
       <el-table-column align="center" label="编号" prop="id" />
-      <el-table-column align="center" label="客户名称" prop="name" width="160" />
+      <el-table-column align="center" label="客户名称" prop="name" width="160">
+        <template #default="scope">
+          <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
+            {{ scope.row.name }}
+          </el-link>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="所属行业" prop="industryId" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
@@ -157,7 +155,6 @@
       <!--  TODO @wanwan 距进入公海天数    -->
       <el-table-column align="center" fixed="right" label="操作" min-width="150">
         <template #default="scope">
-          <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
           <el-button
             v-hasPermi="['crm:customer:update']"
             link