<template>
|
<div :class="prefixCls">
|
<Row :class="`${prefixCls}-top`">
|
<Col :span="4" :class="`${prefixCls}-col`">
|
<div :class="`${prefixCls}-top__avatar`">
|
<img width="50" :src="avatar" />
|
</div>
|
</Col>
|
<Col :span="20" :class="`${prefixCls}-col`">
|
<div class="mb-10px">
|
<div class="mb-5px">
|
Vben
|
<Icon
|
icon="majesticons:open"
|
class="mr-15px cursor-pointer"
|
@click=""
|
:style="{ color: 'hotpink' }"
|
:size="16"
|
/>
|
</div>
|
<div>海纳百川，有容乃大</div>
|
</div>
|
<div class="mb-10px flex">
|
<div>
|
<span>跟进人：</span>
|
<span>111</span>
|
</div>
|
<div class="ml-10px flex">
|
<span>线索评分<BasicHelp :text="['评分规则：1，评分=各维度分数（所打分数*该维度权重）的总和；', '2，如只有首次评分，则以首次评分为准；如有两次评分，则取两次评分的平均值。']"/>：</span>
|
<span>10</span>
|
</div>
|
</div>
|
<div class="">
|
<template v-for="tag in tags" :key="tag">
|
<Tag class="mb-2">
|
{{ tag }}
|
</Tag>
|
</template>
|
<TagSelector class="pb-10px"></TagSelector>
|
<a-popconfirm title="Title" >
|
<Icon
|
icon="uil:focus-add"
|
class="mr-15px cursor-pointer"
|
@click=""
|
:style="{ color: 'hotpink' }"
|
:size="20"
|
/>
|
<template #description>
|
|
</template>
|
</a-popconfirm>
|
<!-- <a-dropdown :trigger="['click']">-->
|
<!-- <template #overlay>-->
|
<!-- <TagSelector></TagSelector>-->
|
<!-- </template>-->
|
<!-- </a-dropdown>-->
|
</div>
|
|
</Col>
|
<!-- <Col :span="8" :class="`${prefixCls}-col`">-->
|
<!-- <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpand="false">-->
|
<!-- <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">-->
|
<!-- <Icon :icon="team.icon" :color="team.color" />-->
|
<!-- <span>{{ team.title }}</span>-->
|
<!-- </div>-->
|
<!-- </CollapseContainer>-->
|
<!-- </Col>-->
|
</Row>
|
<div :class="`${prefixCls}-bottom`">
|
<Tabs>
|
<template v-for="item in achieveList" :key="item.key">
|
<TabPane :tab="item.name">
|
|
<ScrollContainer class="scroll-wrap">
|
<component :is="tabs[item.component]" />
|
</ScrollContainer>
|
|
</TabPane>
|
</template>
|
</Tabs>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import Icon from '@/components/Icon/Icon.vue';
|
import { Col, Row, Tabs, Tag } from 'ant-design-vue';
|
import { computed } from 'vue';
|
import Dynamic from './Dynamic.vue';
|
import Detail from './Detail.vue';
|
import Schedule from './Schedule.vue';
|
|
import headerImg from '@/assets/images/header.jpg';
|
import { useUserStore } from '@/store/modules/user';
|
import { achieveList, tags } from './data';
|
import {BasicHelp} from "@/components/Basic";
|
import ScrollContainer from "@/components/Container/src/ScrollContainer.vue";
|
import {TagSelector} from "@/components/TagSelector";
|
|
const userStore = useUserStore();
|
const TabPane = Tabs.TabPane;
|
const tabs = {
|
Detail,
|
Dynamic,
|
Schedule,
|
};
|
const prefixCls = 'clues-drawer';
|
const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
|
</script>
|
<style lang="less" scoped>
|
.clues-drawer {
|
&-col:not(:last-child) {
|
padding: 0 10px;
|
|
//&:not(:last-child) {
|
// border-right: 1px dashed rgb(206 206 206 / 50%);
|
//}
|
}
|
|
&-top {
|
//margin: 16px 16px 12px;
|
//padding: 10px;
|
border-radius: 3px;
|
background-color: @component-background;
|
|
&__avatar {
|
text-align: center;
|
|
img {
|
margin: auto;
|
border-radius: 50%;
|
}
|
|
span {
|
display: block;
|
font-size: 20px;
|
font-weight: 500;
|
}
|
|
div {
|
margin-top: 3px;
|
font-size: 12px;
|
}
|
}
|
|
&__detail {
|
margin-top: 15px;
|
padding-left: 20px;
|
}
|
|
&__team {
|
&-item {
|
display: inline-block;
|
padding: 4px 24px;
|
}
|
|
span {
|
margin-left: 3px;
|
}
|
}
|
}
|
|
&-bottom {
|
//margin: 0 16px 16px;
|
//padding: 10px;
|
border-radius: 3px;
|
background-color: @component-background;
|
}
|
.scroll-wrap{
|
height: calc(100vh - 290px);
|
}
|
}
|
</style>
|
