xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加用户页面 客户页面接口 等

Browse Source
This commit is contained in:
浅念
2025-08-05 18:25:32 +08:00
parent 7542d80e38
commit 3e24d1905f
7 changed files with 771 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/admin/customer/customeraudit.vue
+57 -82
View File
@@ -2,14 +2,16 @@
<div class="customer-page">
<!-- 顶部操作栏 -->
<div class="customer-toolbar boxshadow">
<el-button type="primary" @click="goAdd" v-if="hasAuth('crm_customer@add')">
<el-icon><Plus /> </el-icon>
添加
</el-button>
<div class="customer-search-group">
<el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
<el-select v-model="selectValue">
<el-option v-for="v in selectOptions" :key="v.value" :label="v.label" :value="v.value">
<el-select
v-model="selectValue"
style="min-width: 120px"
filterable
multiple
collapse-tags
placeholder="请选择跟单人"
>
<el-option v-for="v in userOptions" :key="v.id" :label="v.name" :value="v.id">
</el-option>
</el-select>
</div>
@@ -74,14 +76,6 @@
</div>
</div>
<div class="boxshadow">
<!-- Tab切换 -->
<el-tabs v-model="activeTab" class="customer-tabs">
<el-tab-pane label="全部" name=""></el-tab-pane>
<el-tab-pane label="跟进中" name="0"></el-tab-pane>
<el-tab-pane label="已成交" name="1"></el-tab-pane>
<el-tab-pane label="已丢失" name="2"></el-tab-pane>
</el-tabs>
<!-- 表格 -->
<ArtTable
ref="tableRef"
@@ -129,27 +123,10 @@
type="primary"
underline="never"
style="margin-right: 8px"
@click="goEdit(scope.row)"
v-if="hasAuth('crm_customer@show')"
@click="goaudit(scope.row)"
v-if="hasAuth('customer_audit@audet')"
>
<i class="iconfont-sys"> &#xe70f;</i>查看
</el-link>
<el-link
type="primary"
underline="never"
style="margin-right: 8px"
@click="goAddFollow(scope.row)"
v-if="hasAuth('crm_customer@follow_add')"
>
<i class="iconfont-sys">&#xe6bf;</i> 跟进
</el-link>
<el-link
type="danger"
underline="never"
@click="delectfn(scope.row)"
v-if="hasAuth('crm_customer@follow_delete')"
>
<i class="iconfont-sys">&#xe6d4;</i> 删除
<i class="iconfont-sys">&#xe6bf;</i> 审核
</el-link>
</template>
</el-table-column>
@@ -160,32 +137,50 @@
<el-dialog v-model="detailDialogVisible" title="详情">
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
</el-dialog>
<el-dialog v-model="audetDialogVisible" title="审核" width="360px">
<el-form :model="audetForm" label-width="0">
<el-form-item>
<el-select v-model="audetForm.scene" filterable placeholder="请选择" style="width: 100%">
<el-option label="彻底删除" value="delete" />
<el-option label="恢复至公海" value="report" />
</el-select>
</el-form-item>
<div style="display: flex; justify-content: space-around; margin-top: 24px">
<el-button @click="audetDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleAudetSubmit">确定</el-button>
</div>
</el-form>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { CrmService } from '@/api/crmApi'
import { useAuth } from '@/composables/useAuth'
import { manageService } from '@/api/adminApi'
const { hasAuth } = useAuth()
const searchValue = ref('')
const selectValue = ref('')
const activeTab = ref('')
const selectValue = ref<string[]>([])
const showMore = ref(false)
const loading = ref(false)
const detailDialogVisible = ref(false)
const audetDialogVisible = ref(false)
const detailRow = ref<any>(null)
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
const selectOptions = [
{ label: '全部', value: '' },
{ label: '当天', value: '0' },
{ label: '近三天', value: '1' },
{ label: '近七天', value: '2' }
]
const audetForm = reactive({
id: '',
scene: ''
})
const userOptions = ref<any>()
const getuserList = async () => {
// 这里调用获取用户列表的接口
const res = await manageService.presetusers()
userOptions.value = res || []
// return res || []
}
// 获取列表数据
const tagActiveMap = reactive<{ [groupId: string]: string }>({})
//获取标签
@@ -208,11 +203,12 @@
// 表格数据
const tableData = ref<any[]>([])
onMounted(() => {
getuserList()
gettableList()
tagGrouplistfn()
})
// tabs 切换联动
watch([activeTab, searchValue, selectValue], () => {
watch([selectValue], () => {
pagination.currentPage = 1
gettableList()
})
@@ -222,18 +218,19 @@
const { currentPage, pageSize } = pagination
const params: any = {
current: currentPage,
size: pageSize
size: pageSize,
scene: 'audit'
}
if (selectValue.value && selectValue.value.length) {
params.user_id = selectValue.value.join(',')
}
if (searchValue.value) params.keyword = searchValue.value
if (selectValue.value) params.follow_last = selectValue.value
if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
// 标签参数，所有选中的标签id组成数组
const selectedTagIds = Object.values(tagActiveMap).filter(Boolean)
if (selectedTagIds.length) {
params.tag_id = selectedTagIds
}
console.log(params)
const { data, current, size, total } = await CrmService.getcustomerList(params)
const { data, current, size, total } = await manageService.getcrmCustomerList(params)
tableData.value = data.map((item: any) => ({
...item
}))
@@ -259,21 +256,16 @@
if (status === 2) return 'status-lost'
return ''
}
const router = useRouter()
function goAdd() {
router.push('/crmpc/customer/add')
//审核
const goaudit = async (row: any) => {
audetForm.id = row.id
audetDialogVisible.value = true
}
function goEdit(row: any) {
router.push({
path: '/crmpc/customer/show',
query: { id: row.id }
})
}
function goAddFollow(row: any) {
router.push({
path: '/crmpc/customer/followadd',
query: { id: row.id } // 可带客户名等参数
})
const handleAudetSubmit = async () => {
const res = await manageService.crmCustomerAudit(audetForm)
ElMessage.success(res?.message || '设置成功！')
audetDialogVisible.value = false
gettableList()
}
// 标签选中状态，key为组id，值为选中的标签id
function handleTagClick(groupId: string, tagId: string) {
@@ -285,23 +277,6 @@
pagination.currentPage = 1
gettableList()
}
//删除
const delectfn = (row: any) => {
ElMessageBox.confirm('确定要删除此用户吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
const res = await CrmService.getcustomerdelete({ id: row.id })
ElMessage.success(res?.message || '提交成功！')
gettableList()
// 你可以在这里调用接口或做后续处理
})
.catch(() => {
// 用户点击了取消
})
}
function processImages(html: string) {
const parser = new DOMParser()
const doc = parser.parseFromString(html, 'text/html')
src/views/admin/customer/index.vue
+227 -86
View File
@@ -2,17 +2,22 @@
<div class="customer-page">
<!-- 顶部操作栏 -->
<div class="customer-toolbar boxshadow">
<el-button type="primary" @click="goAdd" v-if="hasAuth('crm_customer@add')">
<el-icon><Plus /> </el-icon>
添加
</el-button>
<div class="customer-search-group">
<el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
<el-select v-model="selectValue">
<el-option v-for="v in selectOptions" :key="v.value" :label="v.label" :value="v.value">
<el-select
v-model="selectValue"
style="min-width: 120px"
filterable
multiple
collapse-tags
placeholder="请选择跟单人"
>
<el-option v-for="v in userOptions" :key="v.id" :label="v.name" :value="v.id">
</el-option>
</el-select>
</div>
<el-button type="primary" @click="exportfn" v-if="hasAuth('customer@export')">
<i class="iconfont-sys">&#xe89f;</i> 导出
</el-button>
</div>
<!-- 筛选标签 -->
@@ -74,14 +79,13 @@
</div>
</div>
<div class="boxshadow">
<!-- Tab切换 -->
<el-tabs v-model="activeTab" class="customer-tabs">
<el-tab-pane label="全部" name=""></el-tab-pane>
<el-tab-pane label="跟进中" name="0"></el-tab-pane>
<el-tab-pane label="已成交" name="1"></el-tab-pane>
<el-tab-pane label="已丢失" name="2"></el-tab-pane>
</el-tabs>
<el-button
type="primary"
@click="plzyDialogVisible = true"
v-if="hasAuth('customer@transfer') && selectedRows.length > 0"
>
<i class="iconfont-sys">&#xe794;</i> 批量转移
</el-button>
<!-- 表格 -->
<ArtTable
ref="tableRef"
@@ -91,11 +95,13 @@
:currentPage="pagination.currentPage"
:pageSize="pagination.pageSize"
:total="pagination.total"
@selection-change="handleSelectionChange"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
lass="customer-table"
>
<template #default>
<el-table-column type="selection" width="55px" align="center"></el-table-column>
<el-table-column prop="contacts" label="客户名称" align="center" />
<el-table-column prop="magnitude_txt" label="客户商机" align="center" />
<el-table-column prop="channel_name" label="渠道" align="center" />
@@ -111,8 +117,9 @@
</span>
</template>
</el-table-column>
<el-table-column prop="follow_next" label="下次跟进时间"></el-table-column>
<el-table-column prop="enter_user_name" label="录单人"></el-table-column>
<el-table-column prop="user_name" label="跟单人"></el-table-column>
<el-table-column prop="follow_next" label="下次跟进时间"></el-table-column>
<el-table-column prop="created_at" label="创建时间"></el-table-column>
<el-table-column fixed="right" label="操作" width="200px" align="center">
<template #default="scope">
@@ -121,7 +128,7 @@
underline="never"
style="margin-right: 8px"
@click="onDetail(scope.row)"
v-if="hasAuth('crm_customer@show')"
v-if="hasAuth('customer@detail')"
>
<i class="iconfont-sys"> &#xe70f;</i>详情
</el-link>
@@ -129,27 +136,10 @@
type="primary"
underline="never"
style="margin-right: 8px"
@click="goEdit(scope.row)"
v-if="hasAuth('crm_customer@show')"
@click="gotransfer(scope.row)"
v-if="hasAuth('customer@transfer')"
>
<i class="iconfont-sys"> &#xe70f;</i>查看
</el-link>
<el-link
type="primary"
underline="never"
style="margin-right: 8px"
@click="goAddFollow(scope.row)"
v-if="hasAuth('crm_customer@follow_add')"
>
<i class="iconfont-sys">&#xe6bf;</i> 跟进
</el-link>
<el-link
type="danger"
underline="never"
@click="delectfn(scope.row)"
v-if="hasAuth('crm_customer@follow_delete')"
>
<i class="iconfont-sys">&#xe6d4;</i> 删除
<i class="iconfont-sys"> &#xe794;</i>转移
</el-link>
</template>
</el-table-column>
@@ -157,35 +147,125 @@
</ArtTable>
</div>
</div>
<el-dialog v-model="detailDialogVisible" title="详情">
<!-- 详情对话框 -->
<el-dialog v-model="detailDialogVisible" title="详情" width="700px">
<div class="detail-info-table">
<div class="row">
<div>客户名称：{{ detailRow.contacts }}</div>
<div>电话：{{ detailRow.phone }}</div>
<div>国家：{{ detailRow.country_name }}</div>
</div>
<div class="row">
<div>渠道：{{ detailRow.channel_name }}</div>
<div>邮箱：{{ detailRow.email }}</div>
<div>WhatsApp：{{ detailRow.WhatsApp }}</div>
</div>
<div class="row">
<div>发布人：{{ detailRow.enter_user_name }}</div>
<div>跟单人：{{ detailRow.user_name }}</div>
<div>录单时间：{{ detailRow.created_at }}</div>
</div>
<div class="row">
<div>
等级：
<span>
{{ detailRow.magnitude_txt }}
</span>
</div>
<div>
状态：<span>{{ detailRow.grade_txt }}</span>
</div>
<div>
跟进状态：<span>{{ detailRow.follow_txt }}</span>
</div>
</div>
</div>
<div class="dtitle">详情内容</div>
<div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
</el-dialog>
<!-- 转移跟单对话框 -->
<el-dialog v-model="zyDialogVisible" title="转移" width="360px">
<el-form :model="zyForm" label-width="0">
<el-form-item>
<el-select
v-model="zyForm.user_id"
filterable
placeholder="请选择转移人"
style="width: 100%"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<div style="display: flex; justify-content: space-around; margin-top: 24px">
<el-button @click="zyDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handlezySubmit">确定</el-button>
</div>
</el-form>
</el-dialog>
<!-- 批量转移对话框 -->
<el-dialog v-model="plzyDialogVisible" title="批量转移" width="360px">
<el-form :model="plzyForm" label-width="0">
<el-form-item>
<el-select
v-model="plzyForm.user_id"
filterable
placeholder="请选择转移人"
style="width: 100%"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<div style="display: flex; justify-content: space-around; margin-top: 24px">
<el-button @click="plzyDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleplzySubmit">确定</el-button>
</div>
</el-form>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { CrmService } from '@/api/crmApi'
import { manageService } from '@/api/adminApi'
import { useAuth } from '@/composables/useAuth'
const { hasAuth } = useAuth()
const searchValue = ref('')
const selectValue = ref('')
const activeTab = ref('')
const selectValue = ref<string[]>([])
const showMore = ref(false)
const loading = ref(false)
const detailDialogVisible = ref(false)
const zyDialogVisible = ref(false)
const plzyDialogVisible = ref(false)
const detailRow = ref<any>(null)
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: 0
})
const selectOptions = [
{ label: '全部', value: '' },
{ label: '当天', value: '0' },
{ label: '近三天', value: '1' },
{ label: '近七天', value: '2' }
]
const plzyForm = reactive({
customer_id: '',
user_id: ''
})
const zyForm = reactive({
customer_id: '',
user_id: ''
})
const userOptions = ref<any>()
const getuserList = async () => {
// 这里调用获取用户列表的接口
const res = await manageService.presetusers()
userOptions.value = res || []
// return res || []
}
// 获取列表数据
const tagActiveMap = reactive<{ [groupId: string]: string }>({})
//获取标签
@@ -208,11 +288,12 @@
// 表格数据
const tableData = ref<any[]>([])
onMounted(() => {
getuserList()
gettableList()
tagGrouplistfn()
})
// tabs 切换联动
watch([activeTab, searchValue, selectValue], () => {
watch([selectValue], () => {
pagination.currentPage = 1
gettableList()
})
@@ -224,16 +305,16 @@
current: currentPage,
size: pageSize
}
if (searchValue.value) params.keyword = searchValue.value
if (selectValue.value) params.follow_last = selectValue.value
if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
if (selectValue.value && selectValue.value.length) {
params.user_id = selectValue.value.join(',')
}
// 标签参数，所有选中的标签id组成数组
const selectedTagIds = Object.values(tagActiveMap).filter(Boolean)
if (selectedTagIds.length) {
params.tag_id = selectedTagIds
}
console.log(params)
const { data, current, size, total } = await CrmService.getcustomerList(params)
const { data, current, size, total } = await manageService.getcrmCustomerList(params)
tableData.value = data.map((item: any) => ({
...item
}))
@@ -259,21 +340,36 @@
if (status === 2) return 'status-lost'
return ''
}
const router = useRouter()
function goAdd() {
router.push('/crmpc/customer/add')
}
function goEdit(row: any) {
router.push({
path: '/crmpc/customer/show',
query: { id: row.id }
})
}
function goAddFollow(row: any) {
router.push({
path: '/crmpc/customer/followadd',
query: { id: row.id } // 可带客户名等参数
})
//导出
const exportfn = () => {
const { currentPage, pageSize } = pagination
const params: any = {
current: currentPage,
size: pageSize,
user_id: selectValue.value.join(','),
tag_id: Object.values(tagActiveMap).filter(Boolean)
}
// manageService.crmCustomerExport(params)
try {
// 1. 调用接口，获取blob
// const res = await manageService.crmCustomerExport(params)
const urls =
import.meta.env.VITE_API_URL +
`/admin/crm/customer/export?current=${params.currentPage}&size=${params.pageSize}&user_id=${params.user_id}&tag_id=${params.tag_id}`
// 2. 创建blob对象
// const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 或根据后端实际类型调整
// 3. 创建下载链接
const url = urls
const link = document.createElement('a')
link.href = url
link.download = '客户数据.xlsx' // 可自定义文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
} catch (e) {
ElMessage.error('导出失败')
}
}
// 标签选中状态，key为组id，值为选中的标签id
function handleTagClick(groupId: string, tagId: string) {
@@ -285,23 +381,6 @@
pagination.currentPage = 1
gettableList()
}
//删除
const delectfn = (row: any) => {
ElMessageBox.confirm('确定要删除此用户吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
const res = await CrmService.getcustomerdelete({ id: row.id })
ElMessage.success(res?.message || '提交成功！')
gettableList()
// 你可以在这里调用接口或做后续处理
})
.catch(() => {
// 用户点击了取消
})
}
function processImages(html: string) {
const parser = new DOMParser()
const doc = parser.parseFromString(html, 'text/html')
@@ -316,6 +395,38 @@
detailRow.value = row
detailDialogVisible.value = true
}
const gotransfer = (row: any) => {
zyForm.customer_id = row.id
zyDialogVisible.value = true
}
// 转移
const handlezySubmit = async () => {
const res = await manageService.crmCustomerTransfer({
customer_id: zyForm.customer_id,
user_id: zyForm.user_id
})
ElMessage.success(res?.message || '转移成功！')
zyDialogVisible.value = false
gettableList()
}
// 选中的行数据
const selectedRows = ref<any[]>([])
// 处理表格行选择变化
const handleSelectionChange = (selection: any[]) => {
selectedRows.value = selection
}
// 批量转移
const handleplzySubmit = async () => {
if (selectedRows.value.length === 0) {
ElMessage.warning('请至少选择一条记录')
return
}
plzyForm.customer_id = selectedRows.value.map((item) => item.id).join(',')
const res = await manageService.crmCustomerTransfer(plzyForm)
ElMessage.success(res?.message || '批量转移成功！')
plzyDialogVisible.value = false
gettableList()
}
</script>
<style scoped lang="scss">
@@ -473,5 +584,35 @@
color: #3471ff !important; /* 文字颜色 */
background-color: #fff !important; /* 背景色 */
}
.detail-info-table {
padding-left: 15px;
.row {
display: flex;
justify-content: flex-start;
margin-bottom: 6px;
> div {
flex: 1;
min-width: 0;
margin-right: 16px;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.dtitle {
line-height: 40px;
color: #333;
font-size: 16px;
font-weight: bold;
padding-left: 15px;
}
.detils-content {
padding-left: 15px;
img {
max-width: 100% !important;
}
}
</style>