| | |
| | | <div class="w100 h100 overflow-hidden"> |
| | | <div class="pc-chatRoom w100 h100"> |
| | | <div class="homeBox w100 h-full"> |
| | | <div class="flex items-center flex-column mt-20"> |
| | | <div class="flex items-center h-full overflow-hidden"> |
| | | <div class="flex items-center flex-column"> |
| | | <waterTop /> |
| | | <div v-if="isLoginStatus"> |
| | | <waterCenter /> |
| | | <waterBottom /> |
| | | </div> |
| | | <div v-else> |
| | | <el-empty></el-empty> |
| | | </div> |
| | | <waterTop ref="topRef" /> |
| | | <waterCenter |
| | | @advanceExampleClick="advanceExampleClick" |
| | | :isShowAdvanceExample="state.isShowAdvanceExample" |
| | | ref="waterCenterRef" |
| | | @updateChatInput="updateChatInput" |
| | | /> |
| | | <waterBottom @tagListClick="tagListClick" /> |
| | | </div> |
| | | |
| | | <CustomDrawer |
| | | v-model:isShow="state.isShowAdvanceExample" |
| | | ref="customDrawerrRef" |
| | | @updateChatInput="updateChatInput" |
| | | :customTagList="state.customTagList" |
| | | :customOfficeList="state.customOfficeList" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <!-- <p class="declare"> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { ref } from 'vue'; |
| | | import { reactive, ref } from 'vue'; |
| | | import waterBottom from './component/waterRight/bottom.vue'; |
| | | import waterCenter from './component/waterRight/center.vue'; |
| | | import waterTop from './component/waterRight/top.vue'; |
| | | import { accessSessionKey } from '/@/utils/request'; |
| | | import { Local } from '/@/utils/storage'; |
| | | const isLoginStatus = ref(!!Local.get(accessSessionKey)); |
| | | import CustomDrawer from '/@/components/drawer/CustomDrawer.vue'; |
| | | let state = reactive({ |
| | | isShowAdvanceExample: false, |
| | | customTagList: [], |
| | | customOfficeList: [], |
| | | }); |
| | | |
| | | const topRef = ref(null); |
| | | const waterCenterRef = ref(null); |
| | | const customDrawerrRef = ref(null); |
| | | const updateChatInput = (val) => { |
| | | topRef.value.updateChatInput(val); |
| | | }; |
| | | const advanceExampleClick = (status: boolean) => { |
| | | state.isShowAdvanceExample = status; |
| | | if (status) { |
| | | customDrawerrRef.value.getTableData(); |
| | | } |
| | | }; |
| | | const tagListClick = (val) => { |
| | | if (val.length > 0) { |
| | | const selectTagList = []; |
| | | const officeList = []; |
| | | val.forEach((item) => { |
| | | if (item.section_id != 'office_assistant') { |
| | | selectTagList.push(item); |
| | | } else { |
| | | officeList.push(item); |
| | | } |
| | | }); |
| | | state.customTagList = selectTagList; |
| | | state.customOfficeList = officeList; |
| | | } else { |
| | | state.customTagList = []; |
| | | state.customOfficeList = []; |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .pc-chat_room { |
| | |
| | | width: 100%; |
| | | padding: 18px; |
| | | } |
| | | |
| | | .layout-logo-medium-img { |
| | | width: 28px; |
| | | margin-right: 7px; |