| 提交 | 用户 | age | ||
| ec4248 | 1 | <template> |
| 0884a2 | 2 | <PageWrapper title="线索" :contentStyle="contentStyle" :class="`${prefixCls}`" dense contentFullHeight fixedHeight> |
| ec4248 | 3 | <template #subTitle> |
| S | 4 | <Dropdown |
| 5 | :dropMenuList="getDropMenuList" | |
| 6 | :trigger="['click']" | |
| 7 | placement="bottom" | |
| 8 | arrow | |
| 9 | overlayClassName="multiple-tabs__dropdown w-50" | |
| 10 | > | |
| 11 | <div class="cursor-pointer"> | |
| 12 | <span class="mr-2">线索列表</span> | |
| 13 | <BasicArrow :expand="false" down /> | |
| 14 | </div> | |
| 15 | </Dropdown> | |
| 16 | </template> | |
| 17 | <!-- <template #headerContent>--> | |
| 18 | <!-- <a-button type="primary" @click="$emit('add')">新增</a-button>--> | |
| 19 | <!-- </template>--> | |
| 20 | <template #extra> | |
| 7b684b | 21 | <a-button shape="round" key="1" type="primary" @click="openNewClues">新建线索</a-button> |
| ec4248 | 22 | </template> |
| S | 23 | <!-- <template #headerContent>left</template>--> |
| 24 | <Splitpanes class="default-theme" :push-other-panes="false" style="height: 100%"> | |
| 25 | <Pane min-size="12" size="12"> | |
| 26 | <LeftNav></LeftNav> | |
| 27 | </Pane> | |
| 28 | <Pane min-size="50" size="88"> | |
| 29 | <ScrollContainer class="p-8"> | |
| abcc94 | 30 | <!-- <div><a-button class="mr-2" type="primary" shape="round" @click="openModal1"> 新建日程 </a-button></div>--> |
| S | 31 | <!-- <div><a-button class="mr-2" type="primary" shape="round" @click="openModal2"> 选择人员 </a-button></div>--> |
| ec4248 | 32 | <Table></Table> |
| S | 33 | </ScrollContainer> |
| 34 | </Pane> | |
| 35 | </Splitpanes> | |
| 7b684b | 36 | <DrawerForm @register="registerDrawer" @success="handleSuccess"></DrawerForm> |
| abcc94 | 37 | <NewFollowUp @register="registerNewFollowUp" /> |
| S | 38 | <NewSchedule @register="registerNewSchedule" /> |
| 0884a2 | 39 | <PersonnelModal @register="registerPersonnelModal" /> |
| abcc94 | 40 | <ChangeStatusModal @register="registerChangeStatusModal" /> |
| S | 41 | <ReallocateModal @register="registerReallocateModal" /> |
| ec4248 | 42 | </PageWrapper> |
| S | 43 | </template> |
| 44 | ||
| 45 | <script lang="ts" setup> | |
| 46 | import {PageWrapper} from '@/components/Page'; | |
| 0884a2 | 47 | import {computed, onMounted,onUnmounted} from 'vue'; |
| ec4248 | 48 | import {useDesign} from "@/hooks/web/useDesign"; |
| S | 49 | import {Splitpanes, Pane} from 'splitpanes'; |
| 50 | import 'splitpanes/dist/splitpanes.css'; | |
| 51 | import LeftNav from './components/LeftNav.vue'; | |
| 52 | import Table from './components/Table.vue'; | |
| 7b684b | 53 | import DrawerForm from './components/DrawerForm.vue'; |
| ec4248 | 54 | import ScrollContainer from "@/components/Container/src/ScrollContainer.vue"; |
| S | 55 | |
| b5c161 | 56 | const [registerDrawer, { openDrawer,setDrawerProps}] = useDrawer(); |
| 7b684b | 57 | function handleSuccess() { |
| S | 58 | Logger.log('提交drawer成功') |
| 59 | } | |
| ec4248 | 60 | // import {CollapseContainer} from '@/components/Container'; |
| S | 61 | // import {Menu, MenuProps} from 'ant-design-vue'; |
| 62 | // import { DownOutlined } from '@ant-design/icons-vue'; | |
| 63 | import {Dropdown, type DropMenu} from '@/components/Dropdown'; | |
| 64 | import { BasicArrow } from '@/components/Basic'; | |
| 7b684b | 65 | import {useDrawer} from "@/components/Drawer"; |
| 0884a2 | 66 | import {useModal} from "@/components/Modal"; |
| abcc94 | 67 | import {NewFollowUp} from "@/components/NewFollowUp"; |
| S | 68 | import {NewSchedule} from "@/components/NewSchedule"; |
| 0884a2 | 69 | import PersonnelModal from "@/components/NewSchedule/src/PersonnelModal.vue"; |
| abcc94 | 70 | import ChangeStatusModal from "./components/change-status/index.vue"; |
| S | 71 | import ReallocateModal from "./components/reallocate/index.vue"; |
| 7b684b | 72 | |
| abcc94 | 73 | const [registerNewFollowUp,{ openModal:openFollowUpModal,setModalProps:setFollowUpModalProps }] = useModal(); |
| S | 74 | const [registerNewSchedule, { openModal:openScheduleModal,setModalProps:setScheduleModalProps }] = useModal(); |
| 0884a2 | 75 | const [registerPersonnelModal, { openModal: openPersonnelModal }] = useModal(); |
| abcc94 | 76 | const [registerChangeStatusModal, { openModal: openChangeStatusModal }] = useModal(); |
| S | 77 | const [registerReallocateModal, { openModal: openReallocateModal }] = useModal(); |
| 0884a2 | 78 | |
| S | 79 | import EventBus from "@/utils/eventBus"; |
| 80 | ||
| 81 | ||
| 7b684b | 82 | function openNewClues() { |
| S | 83 | // eventMitter.emit('openNewClues'); |
| 84 | openDrawer(true, { | |
| 85 | isUpdate: false, | |
| 86 | }); | |
| 87 | ||
| 88 | } | |
| 89 | ||
| 0884a2 | 90 | function openModal1() { |
| S | 91 | // openModal(true, { |
| 92 | // // data: 'content2', | |
| 93 | // // info: 'Info', | |
| 94 | // }); | |
| 95 | EventBus.emit('openScheduleModal',{ | |
| 96 | title:'新建任务12', | |
| 97 | content:'新建任务内容12' | |
| 98 | }); | |
| 99 | } | |
| 100 | function openModal2() { | |
| 101 | openPersonnelModal(true, { | |
| 102 | // data: 'content2', | |
| 103 | // info: 'Info', | |
| 104 | }); | |
| 105 | } | |
| ec4248 | 106 | |
| S | 107 | onMounted(() => { |
| 108 | Logger.log('Hello, 线索页'); | |
| b5c161 | 109 | EventBus.on('openCluesFormDrawer', (data) => { |
| S | 110 | Logger.log('监听openCluesFormDrawer',data); |
| 111 | setDrawerProps({ | |
| 112 | zIndex: 100001, | |
| 113 | }) | |
| 114 | openDrawer(true, { | |
| 115 | // data: 'content2', | |
| 116 | // info: 'Info', | |
| 117 | }); | |
| 118 | }); | |
| 119 | ||
| 0884a2 | 120 | EventBus.on('openScheduleModal', (data) => { |
| abcc94 | 121 | Logger.log('监听openScheduleModal',data); |
| S | 122 | setScheduleModalProps({ |
| 0884a2 | 123 | zIndex: 1001, |
| S | 124 | }) |
| abcc94 | 125 | openScheduleModal(true, { |
| 0884a2 | 126 | // data: 'content2', |
| S | 127 | // info: 'Info', |
| abcc94 | 128 | }); |
| S | 129 | }); |
| 130 | ||
| 131 | EventBus.on('openFollowUpModal', (data) => { | |
| 132 | Logger.log('监听openFollowUpModal',data); | |
| 133 | setFollowUpModalProps({ | |
| 134 | zIndex: 1001, | |
| 135 | }) | |
| 136 | openFollowUpModal(true, { | |
| 137 | // data: 'content2', | |
| 138 | // info: 'Info', | |
| 139 | }); | |
| 140 | }); | |
| 141 | ||
| 142 | EventBus.on('openChangeStatusModal', (data) => { | |
| 143 | Logger.log('监听openChangeStatusModal',data); | |
| 144 | openChangeStatusModal(true, { | |
| 145 | data, | |
| 146 | }); | |
| 147 | }); | |
| 148 | EventBus.on('openReallocateModal', (data) => { | |
| 149 | Logger.log('监听openReallocateModal',data); | |
| 150 | openReallocateModal(true, { | |
| 151 | data, | |
| 0884a2 | 152 | }); |
| S | 153 | }); |
| 154 | }); | |
| 155 | onUnmounted(() => { | |
| 156 | Logger.log('Goodbye, 线索页'); | |
| b5c161 | 157 | EventBus.off('openCluesFormDrawer',() => { |
| S | 158 | Logger.log('取消监听openCluesFormDrawer'); |
| 159 | }); | |
| 0884a2 | 160 | EventBus.off('openScheduleModal',() => { |
| S | 161 | Logger.log('取消监听openScheduleModal'); |
| 162 | }); | |
| abcc94 | 163 | EventBus.off('openFollowUpModal',() => { |
| S | 164 | Logger.log('取消监听openFollowUpModal'); |
| 165 | }); | |
| 166 | EventBus.off('openChangeStatusModal',() => { | |
| 167 | Logger.log('取消监听openChangeStatusModal'); | |
| 168 | }); | |
| ec4248 | 169 | }); |
| S | 170 | const {prefixCls} = useDesign('clues'); |
| 171 | // const AMenu = Menu; | |
| 172 | // const AMenuItem = Menu.Item; | |
| 173 | const contentStyle = { | |
| 174 | borderTop: '1px solid #ddd', | |
| 175 | }; | |
| 176 | ||
| 177 | // const openChange = (openKeys: string[]) => { | |
| 178 | // console.log(666,openKeys); | |
| 179 | // }; | |
| 180 | ||
| 181 | // const handleMenuClick: MenuProps['onClick'] = e => { | |
| 182 | // console.log('click', e); | |
| 183 | // }; | |
| 184 | ||
| 185 | const getDropMenuList = computed(() => { | |
| 186 | const dropMenuList: DropMenu[] = [ | |
| 187 | { | |
| 188 | text: '全部线索', | |
| 189 | event: '1', | |
| 190 | onClick: () => { | |
| 191 | console.log('click'); | |
| 192 | }, | |
| 193 | }, | |
| 194 | { | |
| 195 | text: '我的线索', | |
| 196 | event: '2', | |
| 197 | onClick: () => { | |
| 198 | console.log('click2'); | |
| 199 | }, | |
| 200 | }, | |
| 201 | { | |
| 202 | text: '关注线索', | |
| 203 | event: '3', | |
| 204 | onClick: () => { | |
| 205 | console.log('click3'); | |
| 206 | }, | |
| 207 | }, | |
| 208 | { | |
| 209 | text: '未读线索', | |
| 210 | event: '4', | |
| 211 | onClick: () => { | |
| 212 | console.log('click4'); | |
| 213 | }, | |
| 214 | }, | |
| 215 | ]; | |
| 216 | ||
| 217 | return dropMenuList; | |
| 218 | }); | |
| 219 | ||
| 220 | </script> | |
| 221 | ||
| 222 | <style lang="less" scoped> | |
| 223 | @prefix-cls: ~'@{namespace}-clues'; | |
| 224 | .@{prefix-cls} { | |
| 225 | .splitpanes__pane { | |
| 226 | display: flex; | |
| 227 | justify-content: center; | |
| 228 | align-items: center; | |
| 229 | background-color: var(--component-background-color) | |
| 230 | } | |
| 231 | ||
| 7450a2 | 232 | :deep(.ant-page-header) { |
| ec4248 | 233 | padding: 15px 24px; |
| S | 234 | } |
| 235 | } | |
| 236 | </style> | |
