<template>
|
<div :class="prefixCls" >
|
<div class="mb-20px">
|
<a-button type="primary" shape="round" block @click="openFollowUpModal">
|
<template #icon>
|
<PlusCircleOutlined />
|
</template>
|
添加跟进
|
</a-button>
|
</div>
|
<div ref="loadingEl">
|
<div class="mb-20px flex justify-between flex-items-center">
|
<span class="font-bold">共 {{totalData}} 条</span>
|
<TreeSelect
|
v-model:value="currentDynamicType"
|
:dropdownStyle="{color: 'red'}"
|
style="width: 120px"
|
placeholder="Please select"
|
:allow-clear="false"
|
:bordered="false"
|
tree-default-expand-all
|
:tree-data="dynamicTypeTree"
|
@change="handleDynamicTypeChange"
|
>
|
</TreeSelect>
|
</div>
|
<Timeline >
|
<TimelineItem v-for="item in dynamicList" :key="item.id">
|
<Row>
|
<Col span="16" class="c-gray-4">
|
{{item.cluesName}}
|
</Col>
|
<Col :offset="2" span="6" class="c-gray-4">
|
{{item.privateTime}}
|
</Col>
|
</Row>
|
<div>
|
{{item.failStatusName}}
|
</div>
|
<div>
|
<ImagePreviewGroup>
|
<template v-for="(img,index) in item.imageList" :key="index">
|
<Image :width="100" class="pr-10px" :src="img" />
|
</template>
|
</ImagePreviewGroup>
|
</div>
|
</TimelineItem>
|
</Timeline>
|
</div>
|
|
<!-- show-size-changer-->
|
<!-- show-quick-jumper-->
|
<!-- :show-total="total => `共 ${total} 条数据`"-->
|
<Pagination
|
class="text-right"
|
v-model:current="currentPage"
|
v-model:page-size="pageSize"
|
:total="totalData"
|
responsive
|
show-less-items
|
:pageSizeOptions="['10','20', '30', '50']"
|
@change="handlePageChange"
|
/>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { Timeline,Row,Col,ImagePreviewGroup,Image,Pagination,TreeSelect } from 'ant-design-vue';
|
import Icon from '@/components/Icon/Icon.vue';
|
import { applicationList } from './data';
|
import {cluesDynamicApi} from "@/api/clues/dynamic";
|
import {ref,unref,getCurrentInstance} from "vue";
|
import {useLoading} from "@/components/Loading";
|
import {PlusCircleOutlined} from "@ant-design/icons-vue";
|
import {treeOptionsListApi} from "@/api/demo/tree";
|
import EventBus from "@/utils/eventBus";
|
const TimelineItem = Timeline.Item;
|
|
const prefixCls = 'clues-tab-dynamic';
|
|
let dynamicList = ref([] as any[]);
|
let totalData = ref(0);
|
|
let currentPage = ref(1);
|
let pageSize = ref(10);
|
|
const handlePageChange = (current: number, size: number) => {
|
currentPage.value = current;
|
pageSize.value = size;
|
// console.log('PageChange',currentPage, pageSize);
|
getCluesDynamicData();
|
};
|
|
// 打开跟进弹窗
|
const openFollowUpModal = () => {
|
Logger.log('openFollowUpModal...');
|
EventBus.emit('openFollowUpModal', {
|
title: '新建任务',
|
content: '新建任务内容'
|
});
|
};
|
// let _this = getCurrentInstance();
|
|
// 动态类型treeData
|
let currentDynamicType = ref('0-0');
|
let dynamicTypeTree = ref([]);
|
getTreeData();
|
async function getTreeData() {
|
try {
|
const data = await treeOptionsListApi();
|
dynamicTypeTree.value = data?.list || [];
|
Logger.log('treeOptionsListApi...dynamicTypeTree', dynamicTypeTree);
|
} catch (e) {
|
Logger.error(e);
|
} finally {
|
|
}
|
}
|
function handleDynamicTypeChange(value: any) {
|
Logger.log('handleDynamicTypeChange...', value);
|
}
|
|
// 动态列表加载
|
const loadingEl = ref<ElRef>(null);
|
const [openWrapLoading, closeWrapLoading] = useLoading({
|
target: loadingEl,
|
props: {
|
tip: '加载中...',
|
absolute: true,
|
},
|
});
|
// 动态列表数据
|
setTimeout(()=>{
|
getCluesDynamicData();
|
},50)
|
async function getCluesDynamicData(){
|
openWrapLoading();
|
let params = {
|
page: currentPage.value,
|
pageSize: pageSize.value,
|
};
|
try {
|
// cluesDynamicApi(params).then(res => {
|
//
|
// })
|
let res = await cluesDynamicApi(params)
|
Logger.log('cluesDynamicApi...',res);
|
// console.log(_this);
|
// _this.$set(dynamicList,res.items)
|
dynamicList.value = res.items;
|
totalData.value = res.total;
|
|
} catch (e) {
|
Logger.error(e);
|
} finally {
|
closeWrapLoading();
|
}
|
}
|
</script>
|
<style lang="less">
|
.clues-tab-dynamic {
|
.ant-select-arrow{
|
color: #000;
|
}
|
}
|
</style>
|
