root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Merge pull request !329 from puhui999/dev-crm
This commit is contained in:
芋道源码 2023-11-25 02:24:45 +00:00 committed by Gitee
commit c6192a1918
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
7 changed files with 223 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/crm/permission/index.ts
View File

@ -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 })
}
// 修改团队成员权限级别

10
src/utils/dict.ts
View File

@ -1,8 +1,8 @@
/**
* 数据字典工具类
*/
import { useDictStoreWithOut } from '@/store/modules/dict'
import { ElementPlusInfoType } from '@/types/elementPlus'
import {useDictStoreWithOut} from '@/store/modules/dict'
import {ElementPlusInfoType} from '@/types/elementPlus'
const dictStore = useDictStoreWithOut()
@ -195,5 +195,9 @@ export enum DICT_TYPE {
CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry',
CRM_CUSTOMER_LEVEL = 'crm_customer_level',
CRM_CUSTOMER_SOURCE = 'crm_customer_source',
CRM_PRODUCT_STATUS = 'crm_product_status'
CRM_PRODUCT_STATUS = 'crm_product_status',
// ========== CRM - 数据权限模块 ==========
CRM_BIZ_TYPE = 'crm_biz_type', // 数据模块类型
CRM_PERMISSION_LEVEL = 'crm_permission_level' // 用户数据权限类型
}

14
src/views/crm/components/CrmPermissionForm.vue
View File

@ -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' })

80
src/views/crm/components/CrmTeamList.vue → src/views/crm/components/CrmPermissionList.vue
View File

@ -1,7 +1,7 @@
<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

8
src/views/crm/components/index.ts
View File

@ -1,4 +1,4 @@
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 }

39
src/views/crm/customer/detail/index.vue
View File

@ -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' })

17
src/views/crm/customer/index.vue
View File

@ -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()
}