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