<template>
|
<PageWrapper title="线索" :contentStyle="contentStyle" :class="`${prefixCls}`" dense contentFullHeight fixedHeight>
|
<template #subTitle>
|
<Dropdown
|
:dropMenuList="getDropMenuList"
|
:trigger="['click']"
|
placement="bottom"
|
arrow
|
overlayClassName="multiple-tabs__dropdown w-50"
|
>
|
<div class="cursor-pointer">
|
<span class="mr-2">线索列表</span>
|
<BasicArrow :expand="false" down />
|
</div>
|
</Dropdown>
|
</template>
|
<!-- <template #headerContent>-->
|
<!-- <a-button type="primary" @click="$emit('add')">新增</a-button>-->
|
<!-- </template>-->
|
<template #extra>
|
<a-button shape="round" key="1" type="primary" @click="openNewClues">新建线索</a-button>
|
</template>
|
<!-- <template #headerContent>left</template>-->
|
<Splitpanes class="default-theme" :push-other-panes="false" style="height: 100%">
|
<Pane min-size="12" size="12">
|
<LeftNav></LeftNav>
|
</Pane>
|
<Pane min-size="50" size="88">
|
<ScrollContainer class="p-8">
|
<!-- <div><a-button class="mr-2" type="primary" shape="round" @click="openModal1"> 新建日程 </a-button></div>-->
|
<!-- <div><a-button class="mr-2" type="primary" shape="round" @click="openModal2"> 选择人员 </a-button></div>-->
|
<Table></Table>
|
</ScrollContainer>
|
</Pane>
|
</Splitpanes>
|
<DrawerForm @register="registerDrawer" @success="handleSuccess"></DrawerForm>
|
<NewFollowUp @register="registerNewFollowUp" />
|
<NewSchedule @register="registerNewSchedule" />
|
<PersonnelModal @register="registerPersonnelModal" />
|
<ChangeStatusModal @register="registerChangeStatusModal" />
|
<ReallocateModal @register="registerReallocateModal" />
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
import {PageWrapper} from '@/components/Page';
|
import {computed, onMounted,onUnmounted} from 'vue';
|
import {useDesign} from "@/hooks/web/useDesign";
|
import {Splitpanes, Pane} from 'splitpanes';
|
import 'splitpanes/dist/splitpanes.css';
|
import LeftNav from './components/LeftNav.vue';
|
import Table from './components/Table.vue';
|
import DrawerForm from './components/DrawerForm.vue';
|
import ScrollContainer from "@/components/Container/src/ScrollContainer.vue";
|
|
const [registerDrawer, { openDrawer,setDrawerProps}] = useDrawer();
|
function handleSuccess() {
|
Logger.log('提交drawer成功')
|
}
|
// import {CollapseContainer} from '@/components/Container';
|
// import {Menu, MenuProps} from 'ant-design-vue';
|
// import { DownOutlined } from '@ant-design/icons-vue';
|
import {Dropdown, type DropMenu} from '@/components/Dropdown';
|
import { BasicArrow } from '@/components/Basic';
|
import {useDrawer} from "@/components/Drawer";
|
import {useModal} from "@/components/Modal";
|
import {NewFollowUp} from "@/components/NewFollowUp";
|
import {NewSchedule} from "@/components/NewSchedule";
|
import PersonnelModal from "@/components/NewSchedule/src/PersonnelModal.vue";
|
import ChangeStatusModal from "./components/change-status/index.vue";
|
import ReallocateModal from "./components/reallocate/index.vue";
|
|
const [registerNewFollowUp,{ openModal:openFollowUpModal,setModalProps:setFollowUpModalProps }] = useModal();
|
const [registerNewSchedule, { openModal:openScheduleModal,setModalProps:setScheduleModalProps }] = useModal();
|
const [registerPersonnelModal, { openModal: openPersonnelModal }] = useModal();
|
const [registerChangeStatusModal, { openModal: openChangeStatusModal }] = useModal();
|
const [registerReallocateModal, { openModal: openReallocateModal }] = useModal();
|
|
import EventBus from "@/utils/eventBus";
|
|
|
function openNewClues() {
|
// eventMitter.emit('openNewClues');
|
openDrawer(true, {
|
isUpdate: false,
|
});
|
|
}
|
|
function openModal1() {
|
// openModal(true, {
|
// // data: 'content2',
|
// // info: 'Info',
|
// });
|
EventBus.emit('openScheduleModal',{
|
title:'新建任务12',
|
content:'新建任务内容12'
|
});
|
}
|
function openModal2() {
|
openPersonnelModal(true, {
|
// data: 'content2',
|
// info: 'Info',
|
});
|
}
|
|
onMounted(() => {
|
Logger.log('Hello, 线索页');
|
EventBus.on('openCluesFormDrawer', (data) => {
|
Logger.log('监听openCluesFormDrawer',data);
|
setDrawerProps({
|
zIndex: 100001,
|
})
|
openDrawer(true, {
|
// data: 'content2',
|
// info: 'Info',
|
});
|
});
|
|
EventBus.on('openScheduleModal', (data) => {
|
Logger.log('监听openScheduleModal',data);
|
setScheduleModalProps({
|
zIndex: 1001,
|
})
|
openScheduleModal(true, {
|
// data: 'content2',
|
// info: 'Info',
|
});
|
});
|
|
EventBus.on('openFollowUpModal', (data) => {
|
Logger.log('监听openFollowUpModal',data);
|
setFollowUpModalProps({
|
zIndex: 1001,
|
})
|
openFollowUpModal(true, {
|
// data: 'content2',
|
// info: 'Info',
|
});
|
});
|
|
EventBus.on('openChangeStatusModal', (data) => {
|
Logger.log('监听openChangeStatusModal',data);
|
openChangeStatusModal(true, {
|
data,
|
});
|
});
|
EventBus.on('openReallocateModal', (data) => {
|
Logger.log('监听openReallocateModal',data);
|
openReallocateModal(true, {
|
data,
|
});
|
});
|
});
|
onUnmounted(() => {
|
Logger.log('Goodbye, 线索页');
|
EventBus.off('openCluesFormDrawer',() => {
|
Logger.log('取消监听openCluesFormDrawer');
|
});
|
EventBus.off('openScheduleModal',() => {
|
Logger.log('取消监听openScheduleModal');
|
});
|
EventBus.off('openFollowUpModal',() => {
|
Logger.log('取消监听openFollowUpModal');
|
});
|
EventBus.off('openChangeStatusModal',() => {
|
Logger.log('取消监听openChangeStatusModal');
|
});
|
});
|
const {prefixCls} = useDesign('clues');
|
// const AMenu = Menu;
|
// const AMenuItem = Menu.Item;
|
const contentStyle = {
|
borderTop: '1px solid #ddd',
|
};
|
|
// const openChange = (openKeys: string[]) => {
|
// console.log(666,openKeys);
|
// };
|
|
// const handleMenuClick: MenuProps['onClick'] = e => {
|
// console.log('click', e);
|
// };
|
|
const getDropMenuList = computed(() => {
|
const dropMenuList: DropMenu[] = [
|
{
|
text: '全部线索',
|
event: '1',
|
onClick: () => {
|
console.log('click');
|
},
|
},
|
{
|
text: '我的线索',
|
event: '2',
|
onClick: () => {
|
console.log('click2');
|
},
|
},
|
{
|
text: '关注线索',
|
event: '3',
|
onClick: () => {
|
console.log('click3');
|
},
|
},
|
{
|
text: '未读线索',
|
event: '4',
|
onClick: () => {
|
console.log('click4');
|
},
|
},
|
];
|
|
return dropMenuList;
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
@prefix-cls: ~'@{namespace}-clues';
|
.@{prefix-cls} {
|
.splitpanes__pane {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: var(--component-background-color)
|
}
|
|
:deep(.ant-page-header) {
|
padding: 15px 24px;
|
}
|
}
|
</style>
|
