| 提交 | 用户 | age | ||
| ec4248 | 1 | <template> |
| S | 2 | <div :class="prefixCls"> |
| 3 | <Row :class="`${prefixCls}-top`"> | |
| 4 | <Col :span="4" :class="`${prefixCls}-col`"> | |
| 5 | <div :class="`${prefixCls}-top__avatar`"> | |
| 6 | <img width="50" :src="avatar" /> | |
| 7 | </div> | |
| 8 | </Col> | |
| 9 | <Col :span="20" :class="`${prefixCls}-col`"> | |
| 10 | <div class="mb-10px"> | |
| 11 | <div class="mb-5px"> | |
| b5c161 | 12 | {{cluesData.homepage || cluesData.cluesName}} |
| ec4248 | 13 | <Icon |
| S | 14 | icon="majesticons:open" |
| 15 | class="mr-15px cursor-pointer" | |
| 16 | @click="" | |
| 17 | :style="{ color: 'hotpink' }" | |
| 18 | :size="16" | |
| 19 | /> | |
| 20 | </div> | |
| b5c161 | 21 | <div>{{cluesData.cluesName}}</div> |
| ec4248 | 22 | </div> |
| S | 23 | <div class="mb-10px flex"> |
| 24 | <div> | |
| 25 | <span>跟进人：</span> | |
| b5c161 | 26 | <span>{{cluesData.createUserName||'--'}}</span> |
| ec4248 | 27 | </div> |
| S | 28 | <div class="ml-10px flex"> |
| 29 | <span>线索评分<BasicHelp :text="['评分规则：1，评分=各维度分数（所打分数*该维度权重）的总和；', '2，如只有首次评分，则以首次评分为准；如有两次评分，则取两次评分的平均值。']"/>：</span> | |
| b5c161 | 30 | <span>{{'--'}}</span> |
| ec4248 | 31 | </div> |
| S | 32 | </div> |
| 33 | <div class=""> | |
| b5c161 | 34 | <template v-for="tag in cluesData.tagList" :key="tag"> |
| S | 35 | <Tag class="mb-2" :color="tag.color"> |
| 36 | {{ tag.name }} | |
| ec4248 | 37 | </Tag> |
| S | 38 | </template> |
| b5c161 | 39 | <TagSelector v-model:tags-value="tagsValue" class="pb-10px inline-block mt-10px"></TagSelector> |
| ec4248 | 40 | </div> |
| S | 41 | |
| 42 | </Col> | |
| 43 | <!-- <Col :span="8" :class="`${prefixCls}-col`">--> | |
| 44 | <!-- <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpand="false">--> | |
| 45 | <!-- <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">--> | |
| 46 | <!-- <Icon :icon="team.icon" :color="team.color" />--> | |
| 47 | <!-- <span>{{ team.title }}</span>--> | |
| 48 | <!-- </div>--> | |
| 49 | <!-- </CollapseContainer>--> | |
| 50 | <!-- </Col>--> | |
| 51 | </Row> | |
| 52 | <div :class="`${prefixCls}-bottom`"> | |
| 53 | <Tabs> | |
| b5c161 | 54 | <template v-for="item in tabList" :key="item.key"> |
| ec4248 | 55 | <TabPane :tab="item.name"> |
| abcc94 | 56 | |
| S | 57 | <ScrollContainer class="scroll-wrap"> |
| 58 | <component :is="tabs[item.component]" /> | |
| 59 | </ScrollContainer> | |
| 60 | ||
| ec4248 | 61 | </TabPane> |
| S | 62 | </template> |
| 63 | </Tabs> | |
| 64 | </div> | |
| 65 | </div> | |
| 66 | </template> | |
| 67 | ||
| 68 | <script lang="ts" setup> | |
| 69 | import Icon from '@/components/Icon/Icon.vue'; | |
| 70 | import { Col, Row, Tabs, Tag } from 'ant-design-vue'; | |
| b5c161 | 71 | import {computed,ref} from 'vue'; |
| ec4248 | 72 | import Dynamic from './Dynamic.vue'; |
| S | 73 | import Detail from './Detail.vue'; |
| 74 | import Schedule from './Schedule.vue'; | |
| 75 | ||
| 76 | import headerImg from '@/assets/images/header.jpg'; | |
| 77 | import { useUserStore } from '@/store/modules/user'; | |
| b5c161 | 78 | import { tabList, tags } from './data'; |
| ec4248 | 79 | import {BasicHelp} from "@/components/Basic"; |
| abcc94 | 80 | import ScrollContainer from "@/components/Container/src/ScrollContainer.vue"; |
| S | 81 | import {TagSelector} from "@/components/TagSelector"; |
| b5c161 | 82 | import {useCluesRowStore} from "@/store/modules/cluesRowData"; |
| ec4248 | 83 | |
| S | 84 | const userStore = useUserStore(); |
| 85 | const TabPane = Tabs.TabPane; | |
| 86 | const tabs = { | |
| 87 | Detail, | |
| 88 | Dynamic, | |
| 89 | Schedule, | |
| 90 | }; | |
| 91 | const prefixCls = 'clues-drawer'; | |
| 92 | const avatar = computed(() => userStore.getUserInfo.avatar || headerImg); | |
| b5c161 | 93 | |
| S | 94 | let cluesData = ref({}); |
| 95 | const cluesRowStore= useCluesRowStore(); | |
| 96 | cluesData.value = cluesRowStore.getRowData; | |
| 97 | Logger.log('父组件cluesData',cluesData); | |
| 98 | ||
| 99 | ||
| 100 | ||
| 101 | let tagsValue = ref([]); | |
| 102 | const selectedTags = ref([{name:'好说话',color:'pink'}, {name:'有礼貌',color:'red'}, {name:'初步意向',color:'red'}, {name:'已联系',color:'red'}]); | |
| 103 | tagsValue.value = selectedTags.value.map((item) => item.name); | |
| 104 | Logger.log('父组件tagsValue',tagsValue.value); | |
| ec4248 | 105 | </script> |
| S | 106 | <style lang="less" scoped> |
| 107 | .clues-drawer { | |
| 108 | &-col:not(:last-child) { | |
| 109 | padding: 0 10px; | |
| 110 | ||
| 111 | //&:not(:last-child) { | |
| 112 | // border-right: 1px dashed rgb(206 206 206 / 50%); | |
| 113 | //} | |
| 114 | } | |
| 115 | ||
| 116 | &-top { | |
| 117 | //margin: 16px 16px 12px; | |
| 118 | //padding: 10px; | |
| 119 | border-radius: 3px; | |
| 120 | background-color: @component-background; | |
| 121 | ||
| 122 | &__avatar { | |
| 123 | text-align: center; | |
| 124 | ||
| 125 | img { | |
| 126 | margin: auto; | |
| 127 | border-radius: 50%; | |
| 128 | } | |
| 129 | ||
| 130 | span { | |
| 131 | display: block; | |
| 132 | font-size: 20px; | |
| 133 | font-weight: 500; | |
| 134 | } | |
| 135 | ||
| 136 | div { | |
| 137 | margin-top: 3px; | |
| 138 | font-size: 12px; | |
| 139 | } | |
| 140 | } | |
| 141 | ||
| 142 | &__detail { | |
| 143 | margin-top: 15px; | |
| 144 | padding-left: 20px; | |
| 145 | } | |
| 146 | ||
| 147 | &__team { | |
| 148 | &-item { | |
| 149 | display: inline-block; | |
| 150 | padding: 4px 24px; | |
| 151 | } | |
| 152 | ||
| 153 | span { | |
| 154 | margin-left: 3px; | |
| 155 | } | |
| 156 | } | |
| 157 | } | |
| 158 | ||
| 159 | &-bottom { | |
| 160 | //margin: 0 16px 16px; | |
| 161 | //padding: 10px; | |
| 162 | border-radius: 3px; | |
| 163 | background-color: @component-background; | |
| 164 | } | |
| abcc94 | 165 | .scroll-wrap{ |
| cb1651 | 166 | height: calc(100vh - 310px); |
| abcc94 | 167 | } |
| cb1651 | 168 | //:deep(.scrollbar__wrap) { |
| S | 169 | // padding: 10px !important; |
| 170 | //} | |
| ec4248 | 171 | } |
| S | 172 | </style> |
