| 提交 | 用户 | age | ||
| ec4248 | 1 | <template> |
| S | 2 | <PageWrapper title="线索" :contentStyle="contentStyle" :class="`${prefixCls}`" dense |
| 3 | contentFullHeight fixedHeight> | |
| 4 | <template #subTitle> | |
| 5 | <Dropdown | |
| 6 | :dropMenuList="getDropMenuList" | |
| 7 | :trigger="['click']" | |
| 8 | placement="bottom" | |
| 9 | arrow | |
| 10 | overlayClassName="multiple-tabs__dropdown w-50" | |
| 11 | > | |
| 12 | <div class="cursor-pointer"> | |
| 13 | <span class="mr-2">线索列表</span> | |
| 14 | <BasicArrow :expand="false" down /> | |
| 15 | </div> | |
| 16 | </Dropdown> | |
| 17 | </template> | |
| 18 | <!-- <template #headerContent>--> | |
| 19 | <!-- <a-button type="primary" @click="$emit('add')">新增</a-button>--> | |
| 20 | <!-- </template>--> | |
| 21 | <template #extra> | |
| 7b684b | 22 | <a-button shape="round" key="1" type="primary" @click="openNewClues">新建线索</a-button> |
| ec4248 | 23 | </template> |
| S | 24 | <!-- <template #headerContent>left</template>--> |
| 25 | <Splitpanes class="default-theme" :push-other-panes="false" style="height: 100%"> | |
| 26 | <Pane min-size="12" size="12"> | |
| 27 | <LeftNav></LeftNav> | |
| 28 | </Pane> | |
| 29 | <Pane min-size="50" size="88"> | |
| 30 | <ScrollContainer class="p-8"> | |
| 31 | <Table></Table> | |
| 32 | </ScrollContainer> | |
| 33 | </Pane> | |
| 34 | </Splitpanes> | |
| 7b684b | 35 | <DrawerForm @register="registerDrawer" @success="handleSuccess"></DrawerForm> |
| ec4248 | 36 | </PageWrapper> |
| S | 37 | </template> |
| 38 | ||
| 39 | <script lang="ts" setup> | |
| 40 | import {PageWrapper} from '@/components/Page'; | |
| 7b684b | 41 | import {computed, onMounted} from 'vue'; |
| ec4248 | 42 | import {useDesign} from "@/hooks/web/useDesign"; |
| S | 43 | import {Splitpanes, Pane} from 'splitpanes'; |
| 44 | import 'splitpanes/dist/splitpanes.css'; | |
| 45 | import LeftNav from './components/LeftNav.vue'; | |
| 46 | import Table from './components/Table.vue'; | |
| 7b684b | 47 | import DrawerForm from './components/DrawerForm.vue'; |
| ec4248 | 48 | import ScrollContainer from "@/components/Container/src/ScrollContainer.vue"; |
| S | 49 | |
| 7b684b | 50 | const [registerDrawer, { openDrawer }] = useDrawer(); |
| S | 51 | function handleSuccess() { |
| 52 | Logger.log('提交drawer成功') | |
| 53 | } | |
| ec4248 | 54 | // import {CollapseContainer} from '@/components/Container'; |
| S | 55 | // import {Menu, MenuProps} from 'ant-design-vue'; |
| 56 | // import { DownOutlined } from '@ant-design/icons-vue'; | |
| 57 | import {Dropdown, type DropMenu} from '@/components/Dropdown'; | |
| 58 | import { BasicArrow } from '@/components/Basic'; | |
| 7b684b | 59 | import {useDrawer} from "@/components/Drawer"; |
| S | 60 | |
| 61 | // import { mitt } from '@/utils/mitt'; | |
| 62 | // const eventMitter = mitt(); | |
| 63 | // | |
| 64 | // eventMitter.on('openNewClues', () => { | |
| 65 | // Logger.log('openNewClues'); | |
| 66 | // }); | |
| 67 | function openNewClues() { | |
| 68 | // eventMitter.emit('openNewClues'); | |
| 69 | openDrawer(true, { | |
| 70 | isUpdate: false, | |
| 71 | }); | |
| 72 | ||
| 73 | } | |
| 74 | ||
| ec4248 | 75 | |
| S | 76 | onMounted(() => { |
| 77 | Logger.log('Hello, 线索页'); | |
| 7b684b | 78 | |
| ec4248 | 79 | }); |
| S | 80 | const {prefixCls} = useDesign('clues'); |
| 81 | // const AMenu = Menu; | |
| 82 | // const AMenuItem = Menu.Item; | |
| 83 | const contentStyle = { | |
| 84 | borderTop: '1px solid #ddd', | |
| 85 | }; | |
| 86 | ||
| 87 | // const openChange = (openKeys: string[]) => { | |
| 88 | // console.log(666,openKeys); | |
| 89 | // }; | |
| 90 | ||
| 91 | // const handleMenuClick: MenuProps['onClick'] = e => { | |
| 92 | // console.log('click', e); | |
| 93 | // }; | |
| 94 | ||
| 95 | const getDropMenuList = computed(() => { | |
| 96 | const dropMenuList: DropMenu[] = [ | |
| 97 | { | |
| 98 | text: '全部线索', | |
| 99 | event: '1', | |
| 100 | onClick: () => { | |
| 101 | console.log('click'); | |
| 102 | }, | |
| 103 | }, | |
| 104 | { | |
| 105 | text: '我的线索', | |
| 106 | event: '2', | |
| 107 | onClick: () => { | |
| 108 | console.log('click2'); | |
| 109 | }, | |
| 110 | }, | |
| 111 | { | |
| 112 | text: '关注线索', | |
| 113 | event: '3', | |
| 114 | onClick: () => { | |
| 115 | console.log('click3'); | |
| 116 | }, | |
| 117 | }, | |
| 118 | { | |
| 119 | text: '未读线索', | |
| 120 | event: '4', | |
| 121 | onClick: () => { | |
| 122 | console.log('click4'); | |
| 123 | }, | |
| 124 | }, | |
| 125 | ]; | |
| 126 | ||
| 127 | return dropMenuList; | |
| 128 | }); | |
| 129 | ||
| 130 | </script> | |
| 131 | ||
| 132 | <style lang="less" scoped> | |
| 133 | @prefix-cls: ~'@{namespace}-clues'; | |
| 134 | .@{prefix-cls} { | |
| 135 | .splitpanes__pane { | |
| 136 | display: flex; | |
| 137 | justify-content: center; | |
| 138 | align-items: center; | |
| 139 | background-color: var(--component-background-color) | |
| 140 | } | |
| 141 | ||
| 7450a2 | 142 | :deep(.ant-page-header) { |
| ec4248 | 143 | padding: 15px 24px; |
| S | 144 | } |
| 145 | } | |
| 146 | </style> | |
