!329 完善团队成员公共组件,crm-客户：集成团队成员

Merge pull request !329 from puhui999/dev-crm

src/api/crm/permission/index.ts

@@ -6,9 +6,9 @@ export interface PermissionVO {
   bizType: number | undefined // Crm 类型
   bizId: number | undefined // Crm 类型数据编号
   level: number | undefined // 权限级别
-  deptName?: string // 部门名称 // 岗位名称数组 TODO @puhui999：数组？
+  deptName?: string // 部门名称
   nickname?: string // 用户昵称
-  postNames?: string // 岗位名称数组 TODO @puhui999：数组？
+  postNames?: string[] // 岗位名称数组
   createTime?: Date
 }
 
@@ -19,7 +19,7 @@ export const getPermissionList = async (params) => {
 
 // 新增团队成员
 export const createPermission = async (data: PermissionVO) => {
-  return await request.post({ url: `/crm/permission/add`, data })
+  return await request.post({ url: `/crm/permission/create`, data })
 }
 
 // 修改团队成员权限级别

src/views/crm/components/CrmPermissionForm.vue

@@ -19,9 +19,14 @@
       </el-form-item>
       <el-form-item label="权限级别" prop="level">
         <el-radio-group v-model="formData.level">
-          <!-- TODO @puhui999：搞个字典配置？然后这里 remove 掉负责人 -->
-          <el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio>
-          <el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio>
+          <template
+            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PERMISSION_LEVEL)"
+            :key="dict.value"
+          >
+            <el-radio v-if="dict.value != CrmPermissionLevelEnum.OWNER" :label="dict.value">
+              {{ dict.label }}
+            </el-radio>
+          </template>
         </el-radio-group>
       </el-form-item>
     </el-form>
@@ -34,7 +39,8 @@
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
 import * as PermissionApi from '@/api/crm/permission'
-import { CrmPermissionLevelEnum } from './index'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CrmPermissionLevelEnum } from '@/views/crm/components/index'
 
 defineOptions({ name: 'CrmPermissionForm' })
 

src/views/crm/components/CrmTeamList.vue → src/views/crm/components/CrmPermissionList.vue

 <template>
   <!-- 操作栏 -->
   <el-row justify="end">
-    <el-button type="primary" @click="handleAdd">
+    <el-button type="primary" @click="openForm">
       <Icon class="mr-5px" icon="ep:plus" />
       新增
     </el-button>
@@ -9,7 +9,7 @@
       <Icon class="mr-5px" icon="ep:edit" />
       编辑
     </el-button>
-    <el-button @click="handleRemove">
+    <el-button @click="handleDelete">
       <Icon class="mr-5px" icon="ep:delete" />
       移除
     </el-button>
@@ -30,45 +30,32 @@
     <el-table-column align="center" label="岗位" prop="postNames" />
     <el-table-column align="center" label="权限级别" prop="level">
       <template #default="{ row }">
-        <el-tag>{{ getLevelName(row.level) }}</el-tag>
+        <dict-tag :type="DICT_TYPE.CRM_PERMISSION_LEVEL" :value="row.level" />
       </template>
     </el-table-column>
     <el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
   </el-table>
-  <CrmPermissionForm ref="crmPermissionFormRef" />
+  <CrmPermissionForm ref="permissionFormRef" @success="getList" />
 </template>
 <script lang="ts" setup>
-// TODO @puhui999：改成 CrmPermissionList
 import { dateFormatter } from '@/utils/formatTime'
 import { ElTable } from 'element-plus'
 import * as PermissionApi from '@/api/crm/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import CrmPermissionForm from './CrmPermissionForm.vue'
 import { CrmPermissionLevelEnum } from './index'
+import { DICT_TYPE } from '@/utils/dict'
 
-defineOptions({ name: 'CrmTeam' })
+defineOptions({ name: 'CrmPermissionList' })
 
 const message = useMessage() // 消息
 
 const props = defineProps<{
-  bizType: number
-  bizId: number
+  bizType: number // 模块类型
+  bizId: number // 模块数据编号
 }>()
 const loading = ref(true) // 列表的加载中
-const list = ref<PermissionApi.PermissionVO[]>([
-  // TODO 测试数据
-  {
-    id: 1, // 数据权限编号
-    userId: 1, // 用户编号
-    bizType: 1, // Crm 类型
-    bizId: 1, // Crm 类型数据编号
-    level: 1, // 权限级别
-    deptName: '研发部门', // 部门名称
-    nickname: '芋道源码', // 用户昵称
-    postNames: '全栈开发工程师', // 岗位名称数组
-    createTime: new Date()
-  }
-]) // 列表的数据
+const list = ref<PermissionApi.PermissionVO[]>([]) // 列表的数据
 
 /** 查询列表 */
 const getList = async () => {
@@ -83,40 +70,28 @@ const getList = async () => {
     loading.value = false
   }
 }
-
-// TODO @puhui999：字典格式化
-/**
- * 获得权限级别名称
- * @param level 权限级别
- */
-const getLevelName = computed(() => (level: number) => {
-  switch (level) {
-    case CrmPermissionLevelEnum.OWNER:
-      return '负责人'
-    case CrmPermissionLevelEnum.READ:
-      return '只读'
-    case CrmPermissionLevelEnum.WRITE:
-      return '读写'
-    default:
-      break
-  }
-})
-// TODO @puhui999：空行稍微注意下哈；一些注释补齐下；
-const multipleSelection = ref<PermissionApi.PermissionVO[]>([])
+const multipleSelection = ref<PermissionApi.PermissionVO[]>([]) // 选择的团队成员
 const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
   multipleSelection.value = val
 }
-// TODO @puhui999：一些变量命名，看看有没可能跟列表界面的 index.vue 保持他统一的风格；
-const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>()
+
+const permissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>() // 权限表单 Ref
+/**
+ * 编辑团队成员
+ */
 const handleEdit = () => {
   if (multipleSelection.value?.length === 0) {
     message.warning('请先选择团队成员后操作！')
     return
   }
   const ids = multipleSelection.value?.map((item) => item.id)
-  crmPermissionFormRef.value?.open('update', props.bizType, props.bizId, ids)
+  permissionFormRef.value?.open('update', props.bizType, props.bizId, ids)
 }
-const handleRemove = async () => {
+
+/**
+ * 移除团队成员
+ */
+const handleDelete = async () => {
   if (multipleSelection.value?.length === 0) {
     message.warning('请先选择团队成员后操作！')
     return
@@ -129,11 +104,18 @@ const handleRemove = async () => {
     ids
   })
 }
-const handleAdd = () => {
-  crmPermissionFormRef.value?.open('create', props.bizType, props.bizId)
+
+/**
+ * 添加团队成员
+ */
+const openForm = () => {
+  permissionFormRef.value?.open('create', props.bizType, props.bizId)
 }
 
-const userStore = useUserStoreWithOut()
+const userStore = useUserStoreWithOut() // 用户信息缓存
+/**
+ * 退出团队
+ */
 const handleQuit = async () => {
   const permission = list.value.find(
     (item) => item.userId === userStore.getUser.id && item.level === CrmPermissionLevelEnum.OWNER

src/views/crm/components/index.ts

-import CrmTeam from './CrmTeamList.vue'
+import CrmPermissionList from './CrmPermissionList.vue'
 
 enum CrmBizTypeEnum {
   CRM_LEADS = 1, // 线索
@@ -9,9 +9,7 @@ enum CrmBizTypeEnum {
 }
 
 enum CrmPermissionLevelEnum {
-  OWNER = 1, // 负责人
-  READ = 2, // 读
-  WRITE = 3 // 写
+  OWNER = 1 // 负责人
 }
 
-export { CrmTeam, CrmBizTypeEnum, CrmPermissionLevelEnum }
+export { CrmPermissionList, CrmBizTypeEnum, CrmPermissionLevelEnum }

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

@@ -8,7 +8,7 @@
       </div>
       <div>
         <!-- 右上：按钮 -->
-        <el-button @click="openForm('update', customer.id)" v-hasPermi="['crm:customer:update']">
+        <el-button v-hasPermi="['crm:customer:update']" @click="openForm('update', customer.id)">
           编辑
         </el-button>
         <el-button>更改成交状态</el-button>
@@ -16,31 +16,31 @@
     </div>
     <el-row class="mt-10px">
       <el-button>
-        <Icon icon="ph:calendar-fill" class="mr-5px" />
+        <Icon class="mr-5px" icon="ph:calendar-fill" />
         创建任务
       </el-button>
       <el-button>
-        <Icon icon="carbon:email" class="mr-5px" />
+        <Icon class="mr-5px" icon="carbon:email" />
         发送邮件
       </el-button>
       <el-button>
-        <Icon icon="system-uicons:contacts" class="mr-5px" />
+        <Icon class="mr-5px" icon="system-uicons:contacts" />
         创建联系人
       </el-button>
       <el-button>
-        <Icon icon="ep:opportunity" class="mr-5px" />
+        <Icon class="mr-5px" icon="ep:opportunity" />
         创建商机
       </el-button>
       <el-button>
-        <Icon icon="clarity:contract-line" class="mr-5px" />
+        <Icon class="mr-5px" icon="clarity:contract-line" />
         创建合同
       </el-button>
       <el-button>
-        <Icon icon="icon-park:income-one" class="mr-5px" />
+        <Icon class="mr-5px" icon="icon-park:income-one" />
         创建回款
       </el-button>
       <el-button>
-        <Icon icon="fluent:people-team-add-20-filled" class="mr-5px" />
+        <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
         添加团队成员
       </el-button>
     </el-row>
@@ -75,20 +75,32 @@
       <el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
       <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
       <el-tab-pane label="联系人" lazy>
-        <template #label> 联系人<el-badge class="item" type="primary" /> </template>
+        <template #label>
+          联系人
+          <el-badge class="item" type="primary" />
+        </template>
         联系人
       </el-tab-pane>
       <el-tab-pane label="团队成员" lazy>
-        <template #label> 团队成员<el-badge class="item" type="primary" /> </template>
-        团队成员
+        <template #label>
+          团队成员
+          <el-badge class="item" type="primary" />
+        </template>
+        <CrmPermissionList :biz-id="customer.id" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />
       </el-tab-pane>
       <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
       <el-tab-pane label="合同" lazy>
-        <template #label> 合同<el-badge class="item" type="primary" /> </template>
+        <template #label>
+          合同
+          <el-badge class="item" type="primary" />
+        </template>
         合同
       </el-tab-pane>
       <el-tab-pane label="回款" lazy>
-        <template #label> 回款<el-badge class="item" type="primary" /> </template>
+        <template #label>
+          回款
+          <el-badge class="item" type="primary" />
+        </template>
         回款
       </el-tab-pane>
       <el-tab-pane label="回访" lazy> 回访</el-tab-pane>
@@ -100,7 +112,7 @@
   <CustomerForm ref="formRef" @success="getCustomerData(id)" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ElMessage } from 'element-plus'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as CustomerApi from '@/api/crm/customer'
@@ -108,6 +120,7 @@ import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue
 import { DICT_TYPE } from '@/utils/dict'
 import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
 import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
+import { CrmBizTypeEnum, CrmPermissionList } from '@/views/crm/components'
 
 defineOptions({ name: 'CustomerDetail' })
 

src/views/crm/customer/index.vue

@@ -121,7 +121,7 @@
       <el-table-column align="center" label="手机" prop="mobile" width="120" />
       <el-table-column align="center" label="详细地址" prop="detailAddress" width="200" />
       <el-table-column align="center" label="负责人" prop="ownerUserName" />
-      <el-table-column align="center" label="所属部门" prop="ownerUserDept" />
+      <el-table-column align="center" label="所属部门" prop="ownerUserDeptName" />
       <el-table-column align="center" label="创建人" prop="creatorName" />
       <el-table-column
         :formatter="dateFormatter"
@@ -185,8 +185,6 @@
       @pagination="getList"
     />
   </ContentWrap>
-  <!-- TODO 方便查看效果 TODO 芋艿：先注释了，避免演示环境报错 -->
-  <!--  <CrmTeam :biz-id="1" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />-->
 
   <!-- 表单弹窗：添加/修改 -->
   <CustomerForm ref="formRef" @success="getList" />
@@ -198,7 +196,6 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CustomerApi from '@/api/crm/customer'
 import CustomerForm from './CustomerForm.vue'
-import { CrmBizTypeEnum, CrmTeam } from '@/views/crm/components'
 
 defineOptions({ name: 'CrmCustomer' })
 
@@ -211,11 +208,12 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  name: null,
-  mobile: null,
-  industryId: null,
-  level: null,
-  source: null
+  pool: false,
+  name: '',
+  mobile: '',
+  industryId: undefined,
+  level: undefined,
+  source: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -241,6 +239,7 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
+  queryParams.pool = false
   handleQuery()
 }