CRM系统前端
查看 | 历史 | 提交 | 提交对比
Sanakey
6 天以前 cb165187ddcf5d9cfd8aad97a2868d0343b14bd9
提交 | 用户 | age
f353bc 1 <template>
S 2   <div :class="prefixCls" >
3     <div class="mb-20px">
cb1651 4       <div class="mb-10px flex justify-between flex-items-center">
S 5         <div class="relative">
6           <a-dropdown :trigger="['click']">
7             <a-tooltip placement="top">
8               <template #title>
9                 <span>切换商机</span>
10               </template>
11               <Icon
12                 icon="iconamoon:swap"
13                 class="cursor-pointer"
14                 @click=""
15                 :size="16"
16               />
17             </a-tooltip>
18             <template #overlay>
19               <a-menu
20                 v-model:selectedKeys="selectedBusinessTitleKeys"
21                 style="width: 220px"
22                 @click="handleBusinessTitleClick"
23                 :items="businessTitleArray"
24               >
25               </a-menu>
26             </template>
27           </a-dropdown>
28           <span class="font-bold ml-5px">{{ businessTitle }}</span>
29         </div>
30         <a-dropdown :trigger="['click']">
31           <MoreOutlined class="cursor-pointer mr-10px"/>
32           <template #overlay>
33             <a-menu>
34               <a-menu-item key="0" @click="editBusiness">
35                 <span >编辑商机信息</span>
36               </a-menu-item>
37               <a-menu-item key="1" @click="addBusiness">
38                 <span>新建商机</span>
39               </a-menu-item>
40               <a-menu-item key="2" @click="removeBusiness">删除商机</a-menu-item>
41             </a-menu>
42           </template>
43         </a-dropdown>
44       </div>
45       <a-row :gutter="12">
46         <a-col :span="10" class="font-size-13px">
47           销售金额 <span class="c-gray-4">CNY 0.00</span>
48         </a-col>
49         <a-col :span="10" class="font-size-13px">
50           结束日期 <span class="c-red-5">2024-10-30</span>
51         </a-col>
52         <a-col :span="4" class="font-size-13px">
53           备注 <span class="c-gray-4">--</span>
54         </a-col>
55       </a-row>
56     </div>
57     <div class="mb-20px">
f353bc 58       <a-button type="primary" shape="round" block @click="openFollowUpModal">
S 59         <template #icon>
60           <PlusCircleOutlined />
61         </template>
62         添加跟进
63       </a-button>
64     </div>
cb1651 65     <div class="mb-20px">
S 66       <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal>
67       <div class="mb-10px flex justify-between flex-items-center">
68         <span class="font-bold">计划日程</span>
69         <a-button shape="round" @click="openScheduleModal">添加日程</a-button>
f353bc 70       </div>
cb1651 71       <div>
S 72         <template v-for="(item,index) in scheduleList" :key="item.id">
73           <a-row class="cursor-pointer mb-10px" :gutter="12" @click="handleScheduleRowClick" :data-index="index">
74             <a-col span="10" >
75               <a-avatar class="mb-3px" :size="10" :style="'background-color:'+ item.color" ></a-avatar>
76               <span class="ml-5px c-blue">{{ item.beginTime }}</span>
77             </a-col>
78             <a-col span="14">
79               <span>{{ item.cluesName }}</span>
80             </a-col>
81           </a-row>
82         </template>
83       </div>
84     </div>
85     <div ref="loadingEl">
86       <div class="mb-20px flex justify-between flex-items-center">
87         <span class="font-bold">历史动态</span>
88
89 <!--        <a-tree-select-->
90 <!--          v-model:value="currentDynamicType"-->
91 <!--          :dropdownStyle="{color: 'red'}"-->
92 <!--          style="width: 120px"-->
93 <!--          placeholder="Please select"-->
94 <!--          :allow-clear="false"-->
95 <!--          :bordered="false"-->
96 <!--          tree-default-expand-all-->
97 <!--          :tree-data="dynamicTypeTree"-->
98 <!--          @change="handleDynamicTypeChange"-->
99 <!--        >-->
100 <!--        </a-tree-select>-->
101       </div>
102       <div class="mb-20px">
103         <a-radio-group size="default" v-model:value="currentDynamicType">
104           <a-radio-button value="0">全部({{totalData}})</a-radio-button>
105           <a-radio-button value="1">跟进记录({{totalData}})</a-radio-button>
106           <a-radio-button value="2">往来邮件({{totalData}})</a-radio-button>
107           <a-radio-button value="3">聊天记录({{totalData}})</a-radio-button>
108           <a-radio-button value="4">其他({{totalData}})</a-radio-button>
109         </a-radio-group>
110 <!--        <a-button type="primary">全部({{totalData}})</a-button>-->
111 <!--        <a-button type="primary">跟进记录({{totalData}})</a-button>-->
112 <!--        <a-button type="primary">往来邮件({{totalData}})</a-button>-->
113 <!--        <a-button type="primary">聊天记录({{totalData}})</a-button>-->
114 <!--        <a-button type="primary">其他({{totalData}})</a-button>-->
115
116       </div>
117       <a-timeline >
118         <a-timeline-item v-for="item in dynamicList" :key="item.id">
119           <a-row>
120             <a-col span="16" class="c-gray-4">
f353bc 121               {{item.cluesName}}
cb1651 122             </a-col>
S 123             <a-col :offset="2" span="6" class="c-gray-4">
f353bc 124               {{item.privateTime}}
cb1651 125             </a-col>
S 126           </a-row>
f353bc 127           <div>
S 128             {{item.failStatusName}}
129           </div>
130           <div>
cb1651 131             <a-image-preview-group>
f353bc 132               <template v-for="(img,index) in item.imageList" :key="index">
cb1651 133                 <a-image :width="100" class="pr-10px" :src="img" />
f353bc 134               </template>
cb1651 135             </a-image-preview-group>
f353bc 136           </div>
cb1651 137         </a-timeline-item>
S 138       </a-timeline>
f353bc 139     </div>
S 140
141 <!--    show-size-changer-->
142 <!--    show-quick-jumper-->
143 <!--    :show-total="total => `共 ${total} 条数据`"-->
cb1651 144     <a-pagination
f353bc 145       class="text-right"
S 146       v-model:current="currentPage"
147       v-model:page-size="pageSize"
148       :total="totalData"
149       responsive
150       show-less-items
151       :pageSizeOptions="['10','20', '30', '50']"
152       @change="handlePageChange"
153     />
154   </div>
155 </template>
156 <script lang="ts" setup>
cb1651 157 import {
S 158   Timeline,
159   Row,
160   Col,
161   ImagePreviewGroup,
162   Image,
163   Pagination,
164   TreeSelect,
165 } from 'ant-design-vue';
f353bc 166   import Icon from '@/components/Icon/Icon.vue';
S 167   import { applicationList } from './data';
168   import {cluesDynamicApi} from "@/api/clues/dynamic";
169   import {ref,unref,getCurrentInstance} from "vue";
170   import {useLoading} from "@/components/Loading";
cb1651 171   import {PlusCircleOutlined, PlusOutlined, SettingOutlined} from "@ant-design/icons-vue";
f353bc 172   import {treeOptionsListApi} from "@/api/demo/tree";
S 173   import EventBus from "@/utils/eventBus";
cb1651 174   import {MoreOutlined} from "@ant-design/icons-vue";
S 175   import {BasicHelp} from "@/components/Basic";
176   import {log} from "vxe-table";
177   import {useModal} from "@/components/Modal";
178   import ScheduleDetailModal from "@/views/clues/components/drawer/ScheduleDetail.vue";
179   import {projectList} from "@/views/clues/components/drawer/data";
180   import {cluesListApi} from "@/api/clues/table";
181   // const TimelineItem = Timeline.Item;
f353bc 182
cb1651 183   const prefixCls = 'customer-tab-dynamic';
f353bc 184
cb1651 185   let scheduleList = ref([] as any[]);
f353bc 186   let dynamicList = ref([] as any[]);
S 187   let totalData = ref(0);
188
189   let currentPage = ref(1);
190   let pageSize = ref(10);
cb1651 191
S 192
f353bc 193
S 194   const handlePageChange = (current: number, size: number) => {
195     currentPage.value = current;
196     pageSize.value = size;
197     // console.log('PageChange',currentPage, pageSize);
198     getCluesDynamicData();
199   };
200
201   // 打开跟进弹窗
202   const openFollowUpModal = () => {
203     Logger.log('openFollowUpModal...');
204     EventBus.emit('openFollowUpModal', {
205       title: '新建任务',
206       content: '新建任务内容'
207     });
208   };
209   // let _this = getCurrentInstance();
210
cb1651 211   let businessTitle = ref('新商机');
S 212   let selectedBusinessTitleKeys = ref('1');
213   let businessTitleArray = ref([
214     {
215       key: '1',
216       label: '新商机',
217       title: '新商机',
218     },
219     {
220       key: '2',
221       label: '订单确认',
222       title: '订单确认',
223     },
224     {
225       key: '3',
226       label: '有意向',
227       title: '有意向',
228     },
229     {
230       key: '4',
231       label: '测试新的机会',
232       title: '测试新的机会',
233     },
234   ]);
235   function handleBusinessTitleClick(e){
236     Logger.log('handleBusinessTitleClick',e);
237     selectedBusinessTitleKeys.value = e?.key;
238     businessTitle.value = e?.item?.title;
239   }
240
241   // 日程相关
242   const [registerScheduleModal, {openModal, setModalProps}] = useModal();
243   const openScheduleModal = () => {
244     Logger.log('点击openScheduleModal');
245     EventBus.emit('openScheduleModal', {
246       title: '新建任务',
247       content: '新建任务内容'
248     });
249   };
250   function handleScheduleRowClick(e) {
251     let index = e?.currentTarget?.dataset?.index;
252     Logger.log('handleScheduleRowClick', scheduleList.value[index]);
253     openModal(true, {
254       // record,
255       // isUpdate: true,
256     });
257   }
258   getCustomerScheduleList();
259   async function getCustomerScheduleList(){
260     let params = {
261       page: 1,
262       pageSize: 10,
263     };
264     try {
265       let res = await cluesListApi(params)
266       Logger.log('cluesListApi...',res);
267       // console.log(_this);
268       // _this.$set(dynamicList,res.items)
269       scheduleList.value = res.items;
270
271     } catch (e) {
272       Logger.error(e);
273     } finally {
274     }
275   }
276
277
f353bc 278   // 动态类型treeData
cb1651 279   let currentDynamicType = ref('0');
f353bc 280   let dynamicTypeTree = ref([]);
S 281   getTreeData();
282   async function getTreeData() {
283     try {
284       const data = await treeOptionsListApi();
285       dynamicTypeTree.value = data?.list || [];
286       Logger.log('treeOptionsListApi...dynamicTypeTree', dynamicTypeTree);
287     } catch (e) {
288       Logger.error(e);
289     } finally {
290
291     }
292   }
293   function handleDynamicTypeChange(value: any) {
294     Logger.log('handleDynamicTypeChange...', value);
295   }
296
297   // 动态列表加载
cb1651 298   const loadingEl = ref<ElRef>(null);
f353bc 299   const [openWrapLoading, closeWrapLoading] = useLoading({
cb1651 300     target: loadingEl,
f353bc 301     props: {
S 302       tip: '加载中...',
303       absolute: true,
304     },
305   });
306   // 动态列表数据
cb1651 307   setTimeout(()=>{
S 308     getCustomerDynamicList();
309   },50)
310   async function getCustomerDynamicList(){
f353bc 311     openWrapLoading();
S 312     let params = {
313       page: currentPage.value,
314       pageSize: pageSize.value,
315     };
316     try {
317       // cluesDynamicApi(params).then(res => {
318       //
319       // })
320       let res = await cluesDynamicApi(params)
321       Logger.log('cluesDynamicApi...',res);
322       // console.log(_this);
323       // _this.$set(dynamicList,res.items)
324       dynamicList.value = res.items;
325       totalData.value = res.total;
326
327     } catch (e) {
328       Logger.error(e);
329     } finally {
330       closeWrapLoading();
331     }
332   }
cb1651 333
S 334
f353bc 335 </script>
S 336 <style lang="less">
cb1651 337   .customer-tab-dynamic {
f353bc 338     .ant-select-arrow{
S 339       color: #000;
340     }
341   }
342 </style>