<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">
|
<Table></Table>
|
</ScrollContainer>
|
</Pane>
|
</Splitpanes>
|
<DrawerForm @register="registerDrawer" @success="handleSuccess"></DrawerForm>
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
import {PageWrapper} from '@/components/Page';
|
import {computed, onMounted} 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 }] = 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 { mitt } from '@/utils/mitt';
|
// const eventMitter = mitt();
|
//
|
// eventMitter.on('openNewClues', () => {
|
// Logger.log('openNewClues');
|
// });
|
function openNewClues() {
|
// eventMitter.emit('openNewClues');
|
openDrawer(true, {
|
isUpdate: false,
|
});
|
|
}
|
|
|
onMounted(() => {
|
Logger.log('Hello, 线索页');
|
|
});
|
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>
|
