修改 客户标签样式 个人信息添加邮箱 修复关闭全部页面404

This commit is contained in:
浅念
2025-07-31 17:26:36 +08:00
parent ea1dbb7af4
commit b50f650565
3 changed files with 70 additions and 29 deletions
+9 -8
View File
@@ -4,7 +4,7 @@ import { HOME_PAGE } from '@/router/routesAlias'
import { router } from '@/router' import { router } from '@/router'
import { LocationQueryRaw, Router } from 'vue-router' import { LocationQueryRaw, Router } from 'vue-router'
import { WorkTab } from '@/types' import { WorkTab } from '@/types'
import { useUserStore } from '@/store/modules/user'
interface WorktabState { interface WorktabState {
current: Partial<WorkTab> current: Partial<WorkTab>
opened: WorkTab[] opened: WorkTab[]
@@ -144,6 +144,7 @@ export const useWorktabStore = defineStore(
* 关闭指定的选项卡 * 关闭指定的选项卡
*/ */
const removeTab = (path: string): void => { const removeTab = (path: string): void => {
const { home_page } = useUserStore()
const targetTab = getTab(path) const targetTab = getTab(path)
const targetIndex = findTabIndex(path) const targetIndex = findTabIndex(path)
@@ -167,9 +168,9 @@ export const useWorktabStore = defineStore(
// 如果关闭后无标签页,跳转首页 // 如果关闭后无标签页,跳转首页
if (!hasOpenedTabs.value) { if (!hasOpenedTabs.value) {
if (path !== HOME_PAGE) { if (path !== home_page) {
current.value = {} current.value = {}
safeRouterPush({ path: HOME_PAGE }) safeRouterPush({ path: home_page })
} }
return return
} }
@@ -287,12 +288,12 @@ export const useWorktabStore = defineStore(
*/ */
const removeAll = (): void => { const removeAll = (): void => {
const hasFixedTabs = opened.value.some((tab) => tab.fixedTab) const hasFixedTabs = opened.value.some((tab) => tab.fixedTab)
const { home_page } = useUserStore()
// 获取可关闭的标签页 // 获取可关闭的标签页
const closableTabs = opened.value.filter((tab) => { const closableTabs = opened.value.filter((tab) => {
if (!isTabClosable(tab)) return false if (!isTabClosable(tab)) return false
// 如果有固定标签,则所有可关闭的都可以关闭;否则保留首页 // 如果有固定标签,则所有可关闭的都可以关闭;否则保留首页
return hasFixedTabs || tab.path !== HOME_PAGE return hasFixedTabs || tab.path !== home_page
}) })
if (closableTabs.length === 0) { if (closableTabs.length === 0) {
@@ -305,18 +306,18 @@ export const useWorktabStore = defineStore(
// 保留不可关闭的标签页和首页(当没有固定标签时) // 保留不可关闭的标签页和首页(当没有固定标签时)
opened.value = opened.value.filter((tab) => { opened.value = opened.value.filter((tab) => {
return !isTabClosable(tab) || (!hasFixedTabs && tab.path === HOME_PAGE) return !isTabClosable(tab) || (!hasFixedTabs && tab.path === home_page)
}) })
// 处理激活状态 // 处理激活状态
if (!hasOpenedTabs.value) { if (!hasOpenedTabs.value) {
current.value = {} current.value = {}
safeRouterPush({ path: HOME_PAGE }) safeRouterPush({ path: home_page })
return return
} }
// 选择激活的标签页:优先首页,其次第一个可用标签 // 选择激活的标签页:优先首页,其次第一个可用标签
const homeTab = opened.value.find((tab) => tab.path === HOME_PAGE) const homeTab = opened.value.find((tab) => tab.path === home_page)
const targetTab = homeTab || opened.value[0] const targetTab = homeTab || opened.value[0]
current.value = targetTab current.value = targetTab
+54 -19
View File
@@ -22,12 +22,20 @@
<span class="filter-label">{{ item.name }}</span> <span class="filter-label">{{ item.name }}</span>
<div class="filter-tags"> <div class="filter-tags">
<span <span
:class="['tag-itemall', { 'tag-active': tagActiveMap[item.id] === '' }]"
@click="handleTagClick(item.id, '')"
>全部</span
>
<span
class="tag-items"
v-for="item1 in item.tags" v-for="item1 in item.tags"
:key="item1.id" :key="item1.id"
:class="['tag-item', { 'tag-active': tagActiveMap[item.id] === item1.id }]"
@click="handleTagClick(item.id, item1.id)" @click="handleTagClick(item.id, item1.id)"
> >
{{ item1.name }}({{ item1.count }}) <span :class="['tag-item', { 'tag-active': tagActiveMap[item.id] === item1.id }]">
{{ item1.name }}
</span>
<el-badge :value="item1.count" :max="99" class="itemtag" type="primary"> </el-badge>
</span> </span>
</div> </div>
</div> </div>
@@ -38,12 +46,20 @@
<span class="filter-label">{{ item.name }}</span> <span class="filter-label">{{ item.name }}</span>
<div class="filter-tags"> <div class="filter-tags">
<span <span
:class="['tag-itemall', { 'tag-active': tagActiveMap[item.id] === '' }]"
@click="handleTagClick(item.id, '')"
>全部</span
>
<span
class="tag-items"
v-for="item1 in item.tags" v-for="item1 in item.tags"
:key="item1.id" :key="item1.id"
:class="['tag-item', { 'tag-active': tagActiveMap[item.id] === item1.id }]"
@click="handleTagClick(item.id, item1.id)" @click="handleTagClick(item.id, item1.id)"
> >
{{ item1.name }}({{ item1.count }}) <span :class="['tag-item', { 'tag-active': tagActiveMap[item.id] === item1.id }]">
{{ item1.name }}
</span>
<el-badge :value="item1.count" :max="99" class="itemtag" type="primary"> </el-badge>
</span> </span>
</div> </div>
</div> </div>
@@ -156,12 +172,19 @@
{ label: '近三天', value: '1' }, { label: '近三天', value: '1' },
{ label: '近七天', value: '2' } { label: '近七天', value: '2' }
] ]
// 获取列表数据
const tagActiveMap = reactive<{ [groupId: string]: string }>({})
//获取标签 //获取标签
type TagGroup = { id: string; name: string; tags: { id: string; name: string; count: number }[] } type TagGroup = { id: string; name: string; tags: { id: string; name: string; count: number }[] }
const tagGroups = ref<TagGroup[]>([]) const tagGroups = ref<TagGroup[]>([])
const tagGrouplistfn = async () => { const tagGrouplistfn = async () => {
const res = await CrmService.tagGrouplist({ scene: 'customers' }) const res = await CrmService.tagGrouplist({ scene: 'customers' })
tagGroups.value = res || [] tagGroups.value = res || []
tagGroups.value.forEach((group) => {
if (group.tags && Array.isArray(group.tags)) {
tagActiveMap[group.id] = ''
}
})
} }
// 计算前3组和更多组 // 计算前3组和更多组
// eslint-disable-next-line vue/valid-define-props // eslint-disable-next-line vue/valid-define-props
@@ -179,8 +202,6 @@
pagination.currentPage = 1 pagination.currentPage = 1
gettableList() gettableList()
}) })
// 获取列表数据
const tagActiveMap = reactive<{ [groupId: string]: string }>({})
const gettableList = async () => { const gettableList = async () => {
loading.value = true loading.value = true
try { try {
@@ -242,11 +263,11 @@
} }
// 标签选中状态,key为组id,值为选中的标签id // 标签选中状态,key为组id,值为选中的标签id
function handleTagClick(groupId: string, tagId: string) { function handleTagClick(groupId: string, tagId: string) {
if (tagActiveMap[groupId] === tagId) { // if (tagActiveMap[groupId] === tagId) {
tagActiveMap[groupId] = '' // 取消选中 // tagActiveMap[groupId] = '' // 取消选中
} else { // } else {
tagActiveMap[groupId] = tagId // 选中 tagActiveMap[groupId] = tagId // 选中
} // }
pagination.currentPage = 1 pagination.currentPage = 1
gettableList() gettableList()
} }
@@ -270,6 +291,13 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-badge) {
--el-badge-size: 16px;
}
.itemtag {
margin-top: -16px;
margin-left: -13px;
}
:deep(.el-table__header th) { :deep(.el-table__header th) {
background: #f7f9fa !important; background: #f7f9fa !important;
color: #333; color: #333;
@@ -350,10 +378,6 @@
color: #333; color: #333;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
span {
margin-right: 20px;
}
} }
.customer-tabs { .customer-tabs {
@@ -395,19 +419,30 @@
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
.tag-items {
.tag-item {
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
padding: 5px 10px; padding: 5px 10px;
margin-right: 8px;
transition: background 0.2s; transition: background 0.2s;
min-width: 100px; min-width: 100px;
display: inline-block; display: inline-block;
margin-right: 30px;
}
.tag-item {
border-radius: 4px;
padding: 5px 10px;
}
.tag-itemall {
border-radius: 4px;
padding: 5px 10px;
margin-right: 20px;
} }
.tag-active { .tag-active {
background: #3471ff; background: #3471ff;
color: #fff; color: #fff;
} }
.tag-active :deep(.el-badge__content) {
color: #3471ff !important; /* 文字颜色 */
background-color: #fff !important; /* 背景色 */
}
</style> </style>
+7 -2
View File
@@ -11,7 +11,7 @@
" "
/> />
<h2 class="name">{{ userInfo.name }}</h2> <h2 class="name">{{ userInfo.name }}</h2>
<p class="des">sn:{{ userInfo.sn }}</p> <p class="des">SN:{{ userInfo.sn }}</p>
<div class="outer-info"> <div class="outer-info">
<div class="info-row"> <div class="info-row">
<span class="info-label">电 话:</span> <span class="info-label">电 话:</span>
@@ -80,7 +80,7 @@
<ElRow> <ElRow>
<ElFormItem label="联系方式" prop="phone"> <ElFormItem label="联系方式" prop="phone">
<ElInput v-model="form.phone" :disabled="!isEdit" /> <ElInput v-model="form.phone" disabled />
</ElFormItem> </ElFormItem>
<ElFormItem label="职务" prop="position" class="right-input"> <ElFormItem label="职务" prop="position" class="right-input">
<ElInput v-model="form.position" :disabled="!isEdit" /> <ElInput v-model="form.position" :disabled="!isEdit" />
@@ -107,6 +107,11 @@
</el-select> </el-select>
</ElFormItem> </ElFormItem>
</ElRow> </ElRow>
<ElRow>
<ElFormItem label="邮箱" prop="email">
<ElInput v-model="form.email" :disabled="!isEdit" />
</ElFormItem>
</ElRow>
<ElRow> <ElRow>
<ElFormItem <ElFormItem
label="二维码" label="二维码"