| 提交 | 用户 | age | ||
| ec4248 | 1 | <template> |
| 45b43f | 2 | <div :class="prefixCls" > |
| abcc94 | 3 | <div class="mb-20px"> |
| S | 4 | <a-button type="primary" shape="round" block @click="openFollowUpModal"> |
| 5 | <template #icon> | |
| 6 | <PlusCircleOutlined /> | |
| 7 | </template> | |
| 8 | 添加跟进 | |
| 9 | </a-button> | |
| 10 | </div> | |
| cb1651 | 11 | <div ref="loadingEl"> |
| abcc94 | 12 | <div class="mb-20px flex justify-between flex-items-center"> |
| S | 13 | <span class="font-bold">共 {{totalData}} 条</span> |
| 14 | <TreeSelect | |
| 15 | v-model:value="currentDynamicType" | |
| 16 | :dropdownStyle="{color: 'red'}" | |
| 17 | style="width: 120px" | |
| 18 | placeholder="Please select" | |
| 19 | :allow-clear="false" | |
| 20 | :bordered="false" | |
| 21 | tree-default-expand-all | |
| 22 | :tree-data="dynamicTypeTree" | |
| 23 | @change="handleDynamicTypeChange" | |
| 24 | > | |
| 25 | </TreeSelect> | |
| 26 | </div> | |
| 45b43f | 27 | <Timeline > |
| S | 28 | <TimelineItem v-for="item in dynamicList" :key="item.id"> |
| 29 | <Row> | |
| 30 | <Col span="16" class="c-gray-4"> | |
| 31 | {{item.cluesName}} | |
| 32 | </Col> | |
| abcc94 | 33 | <Col :offset="2" span="6" class="c-gray-4"> |
| 45b43f | 34 | {{item.privateTime}} |
| S | 35 | </Col> |
| 36 | </Row> | |
| 37 | <div> | |
| 38 | {{item.failStatusName}} | |
| 39 | </div> | |
| 40 | <div> | |
| 41 | <ImagePreviewGroup> | |
| 42 | <template v-for="(img,index) in item.imageList" :key="index"> | |
| 43 | <Image :width="100" class="pr-10px" :src="img" /> | |
| 44 | </template> | |
| 45 | </ImagePreviewGroup> | |
| 46 | </div> | |
| 47 | </TimelineItem> | |
| 48 | </Timeline> | |
| 49 | </div> | |
| 50 | ||
| 51 | <!-- show-size-changer--> | |
| 52 | <!-- show-quick-jumper--> | |
| abcc94 | 53 | <!-- :show-total="total => `共 ${total} 条数据`"--> |
| 45b43f | 54 | <Pagination |
| abcc94 | 55 | class="text-right" |
| 45b43f | 56 | v-model:current="currentPage" |
| S | 57 | v-model:page-size="pageSize" |
| 58 | :total="totalData" | |
| 59 | responsive | |
| 60 | show-less-items | |
| 61 | :pageSizeOptions="['10','20', '30', '50']" | |
| 62 | @change="handlePageChange" | |
| 63 | /> | |
| 7450a2 | 64 | </div> |
| ec4248 | 65 | </template> |
| S | 66 | <script lang="ts" setup> |
| abcc94 | 67 | import { Timeline,Row,Col,ImagePreviewGroup,Image,Pagination,TreeSelect } from 'ant-design-vue'; |
| ec4248 | 68 | import Icon from '@/components/Icon/Icon.vue'; |
| S | 69 | import { applicationList } from './data'; |
| 7450a2 | 70 | import {cluesDynamicApi} from "@/api/clues/dynamic"; |
| 45b43f | 71 | import {ref,unref,getCurrentInstance} from "vue"; |
| S | 72 | import {useLoading} from "@/components/Loading"; |
| abcc94 | 73 | import {PlusCircleOutlined} from "@ant-design/icons-vue"; |
| S | 74 | import {treeOptionsListApi} from "@/api/demo/tree"; |
| 75 | import EventBus from "@/utils/eventBus"; | |
| 7450a2 | 76 | const TimelineItem = Timeline.Item; |
| S | 77 | |
| 78 | const prefixCls = 'clues-tab-dynamic'; | |
| 79 | ||
| 80 | let dynamicList = ref([] as any[]); | |
| 45b43f | 81 | let totalData = ref(0); |
| 7450a2 | 82 | |
| 45b43f | 83 | let currentPage = ref(1); |
| S | 84 | let pageSize = ref(10); |
| 85 | ||
| 86 | const handlePageChange = (current: number, size: number) => { | |
| 87 | currentPage.value = current; | |
| 88 | pageSize.value = size; | |
| 89 | // console.log('PageChange',currentPage, pageSize); | |
| 90 | getCluesDynamicData(); | |
| 7450a2 | 91 | }; |
| 45b43f | 92 | |
| abcc94 | 93 | // 打开跟进弹窗 |
| S | 94 | const openFollowUpModal = () => { |
| 95 | Logger.log('openFollowUpModal...'); | |
| 96 | EventBus.emit('openFollowUpModal', { | |
| 97 | title: '新建任务', | |
| 98 | content: '新建任务内容' | |
| 99 | }); | |
| 100 | }; | |
| 45b43f | 101 | // let _this = getCurrentInstance(); |
| abcc94 | 102 | |
| S | 103 | // 动态类型treeData |
| 104 | let currentDynamicType = ref('0-0'); | |
| 105 | let dynamicTypeTree = ref([]); | |
| 106 | getTreeData(); | |
| 107 | async function getTreeData() { | |
| 108 | try { | |
| 109 | const data = await treeOptionsListApi(); | |
| 110 | dynamicTypeTree.value = data?.list || []; | |
| 111 | Logger.log('treeOptionsListApi...dynamicTypeTree', dynamicTypeTree); | |
| 112 | } catch (e) { | |
| 113 | Logger.error(e); | |
| 114 | } finally { | |
| 115 | ||
| 116 | } | |
| 117 | } | |
| 118 | function handleDynamicTypeChange(value: any) { | |
| 119 | Logger.log('handleDynamicTypeChange...', value); | |
| 120 | } | |
| 121 | ||
| 122 | // 动态列表加载 | |
| cb1651 | 123 | const loadingEl = ref<ElRef>(null); |
| 45b43f | 124 | const [openWrapLoading, closeWrapLoading] = useLoading({ |
| cb1651 | 125 | target: loadingEl, |
| 45b43f | 126 | props: { |
| S | 127 | tip: '加载中...', |
| 128 | absolute: true, | |
| 129 | }, | |
| 130 | }); | |
| abcc94 | 131 | // 动态列表数据 |
| cb1651 | 132 | setTimeout(()=>{ |
| S | 133 | getCluesDynamicData(); |
| 134 | },50) | |
| 45b43f | 135 | async function getCluesDynamicData(){ |
| S | 136 | openWrapLoading(); |
| 137 | let params = { | |
| 138 | page: currentPage.value, | |
| 139 | pageSize: pageSize.value, | |
| 140 | }; | |
| 141 | try { | |
| 142 | // cluesDynamicApi(params).then(res => { | |
| 143 | // | |
| 144 | // }) | |
| 145 | let res = await cluesDynamicApi(params) | |
| 7450a2 | 146 | Logger.log('cluesDynamicApi...',res); |
| 45b43f | 147 | // console.log(_this); |
| S | 148 | // _this.$set(dynamicList,res.items) |
| 149 | dynamicList.value = res.items; | |
| 150 | totalData.value = res.total; | |
| 151 | ||
| 152 | } catch (e) { | |
| 153 | Logger.error(e); | |
| 154 | } finally { | |
| 155 | closeWrapLoading(); | |
| 156 | } | |
| 7450a2 | 157 | } |
| ec4248 | 158 | </script> |
| S | 159 | <style lang="less"> |
| abcc94 | 160 | .clues-tab-dynamic { |
| S | 161 | .ant-select-arrow{ |
| 162 | color: #000; | |
| ec4248 | 163 | } |
| S | 164 | } |
| 165 | </style> | |
