| | |
| | | </div> |
| | | <div class="pc-mouldboard column exampleSlide"> |
| | | <div class="header flex items-center justify-center"> |
| | | <div |
| | | <!-- <div |
| | | class="box-border flex w-[234px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]" |
| | | > |
| | | <div |
| | | class="tabbar-item" |
| | | :class="state.activeName === item.ID ? 'set-tabbar-active' : ''" |
| | | :class="activeGroupType.value === item.ID ? 'set-tabbar-active' : ''" |
| | | @click="handleTabClick(item)" |
| | | v-for="item in state.tabNameList" |
| | | :key="item.ID" |
| | | > |
| | | {{ item.Name }} |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | <i |
| | | class="ywifont ywicon-guanbi text-[#999] text-[18px] absolute right-[14px] top-5 cursor-pointer" |
| | | @click="handleCloseTemplate" |
| | | ></i> |
| | | </div> |
| | | |
| | | <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 1"> |
| | | <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="activeGroupType == '业务场景'"> |
| | | <div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px]"> |
| | | <div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl"> |
| | | <el-input v-model="queryParams.sample_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable> |
| | |
| | | v-for="(item, index) in state.customBusinessList" |
| | | :key="index" |
| | | :class="{ 'set-group-label-active': state.activeBusinessName === item.group_id }" |
| | | class="flex items-center" |
| | | class="flex items-center border border-solid border-[#b2b2b2] rounded-xl mx-[3px] leading-6" |
| | | @click="handleBusinessClick(item)" |
| | | > |
| | | <span class="set-group-name">{{ item.group_name }}</span> |
| | |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="overflow-hidden min-h-[38px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center" |
| | | class="overflow-hidden min-h-[34px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center bg-[#f5f7fd]" |
| | | > |
| | | <div |
| | | v-for="(itemChildren, index) in state.customBusinessChildList" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 2"> |
| | | <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="activeGroupType == '办公助手'"> |
| | | <div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px]"> |
| | | <div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl"> |
| | | <el-input v-model="officeParams.template_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable> |
| | |
| | | v-for="(item, index) in state.customOfficeList" |
| | | :key="index" |
| | | :class="{ 'set-group-label-active': state.activeOfficeName === item.group_id }" |
| | | class="flex items-center" |
| | | class="flex items-center border border-solid border-[#b2b2b2] rounded-xl mx-[3px] leading-6" |
| | | @click="handleOfficeClick(item)" |
| | | > |
| | | <span class="set-group-name">{{ item.group_name }}</span> |
| | |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="overflow-hidden min-h-[38px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center" |
| | | class="overflow-hidden min-h-[34px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center bg-[#f5f7fd]" |
| | | > |
| | | <div |
| | | v-for="(itemChildren, index) in state.customOfficeChildList" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 3"> |
| | | <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="activeGroupType == '知识库'"> |
| | | <div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px]"> |
| | | <div class="flex items-center w100 h-[30px] border border-solid border-[#b2b2b2] transition-[border-color 1s] rounded-2xl"> |
| | | <el-input v-model="queryParams.sample_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable> |
| | |
| | | v-for="(item, index) in state.knowledgeBaseList" |
| | | :key="index" |
| | | :class="{ 'set-group-label-active': state.activeKnowledgeName === item.group_id }" |
| | | class="flex items-center" |
| | | class="flex items-center border border-solid border-[#b2b2b2] rounded-xl mx-[3px] leading-6" |
| | | @click="handleKnowledgeClick(item)" |
| | | > |
| | | <span class="set-group-name">{{ item.group_name }}</span> |
| | |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="overflow-hidden min-h-[38px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center" |
| | | class="overflow-hidden min-h-[34px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center bg-[#f5f7fd]" |
| | | > |
| | | <div |
| | | v-for="(itemChildren, index) in state.customKnowledgeChildList" |
| | |
| | | import { computed, reactive, ref, watch } from 'vue'; |
| | | import { getSectionList, getSelectSample, getUserTemplateList } from '/@/api/ai/chat'; |
| | | import { useSearch } from '/@/hooks/useSearch'; |
| | | import { activeRoomId, activeSampleId, activeSectionAId, sectionAList, setRoomConfig } from '/@/stores/chatRoom'; |
| | | import { activeGroupType, activeRoomId, activeSampleId, activeSectionAId, sectionAList, setRoomConfig } from '/@/stores/chatRoom'; |
| | | import { convertListToTree, debounce } from '/@/utils/util'; |
| | | import { OptClassificationMap, classificationEnum } from '/@/views/types/processDrawing/index'; |
| | | let state = reactive({ |
| | | tabNameList: [ |
| | | { ID: 1, Name: '业务场景' }, |
| | | { ID: 2, Name: '办公助手' }, |
| | | { ID: 3, Name: '知识库' }, |
| | | ], |
| | | activeName: 1, |
| | | activeBusinessName: '', //场景 |
| | | activeBusinessChildName: '', |
| | | customBusinessList: [], |
| | |
| | | }; |
| | | //#endregion |
| | | //#region ====================== 默认选择第一个的场景的子场景 ====================== |
| | | //tags标签切换 |
| | | const handleTabClick = async (item) => { |
| | | state.activeName = item.ID; |
| | | if (state.activeName == 2) { |
| | | if (state.listInstructExpand) return; |
| | | await getUserTemplate(); |
| | | state.listInstructExpand = true; |
| | | } |
| | | tagListClick(sectionAList.value); |
| | | }; |
| | | |
| | | //场景子场景 |
| | | const handleBusinessClick = (item) => { |
| | | state.activeBusinessName = item.group_id; |
| | |
| | | await getMainSectionList().finally(() => { |
| | | loadingData.value = false; |
| | | }); |
| | | if (state.activeName == 1 || state.activeName == 3) { |
| | | if (activeGroupType.value == '业务场景' || activeGroupType.value == '知识库') { |
| | | if (state.listSampleExpand) return; |
| | | await getSelectListSample(); |
| | | state.listSampleExpand = true; |
| | |
| | | officeList.push(item); |
| | | } |
| | | }); |
| | | switch (state.activeName) { |
| | | case 1: |
| | | switch (activeGroupType.value) { |
| | | case '业务场景': |
| | | const treeBusinessList = convertListToTree(businessList, { |
| | | ID: 'group_id', |
| | | Children: 'Children', |
| | |
| | | state.customBusinessChildList = treeBusinessList[0].Children; //默认选中第一个业务场景的第一个子场景的数据源 |
| | | state.activeBusinessChildName = treeBusinessList[0].Children[0].group_id; |
| | | break; |
| | | case 2: |
| | | case '办公助手': |
| | | const treeOfficeList = convertListToTree(officeList, { |
| | | ID: 'group_id', |
| | | Children: 'Children', |
| | |
| | | state.customOfficeChildList = treeOfficeList[0].Children; //默认选中第一个办公助手的第一个子场景的数据源 |
| | | state.activeOfficeChildName = treeOfficeList[0].Children[0].group_id; //默认选中第一个办公助手的第一个子场景 |
| | | break; |
| | | case 3: |
| | | case '知识库': |
| | | const treeTagList = convertListToTree(selectTagList, { |
| | | ID: 'group_id', |
| | | Children: 'Children', |
| | |
| | | }; |
| | | //#endregion |
| | | |
| | | watch( |
| | | () => activeGroupType.value, |
| | | async (val) => { |
| | | if (val == '办公助手') { |
| | | if (state.listInstructExpand) return; |
| | | await getUserTemplate(); |
| | | state.listInstructExpand = true; |
| | | } |
| | | tagListClick(sectionAList.value); |
| | | }, |
| | | { |
| | | immediate: true, |
| | | } |
| | | ); |
| | | defineExpose({ getTableData }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | |
| | | .set-group-name { |
| | | margin: 0px 7px; |
| | | white-space: nowrap; |
| | | border: 1px solid #999; |
| | | border-radius: 0.75rem; |
| | | padding: 0 6px; |
| | | line-height: 22px; |
| | | // border: 1px solid #999; |
| | | // border-radius: 0.75rem; |
| | | // padding: 0 6px; |
| | | // line-height: 22px; |
| | | } |
| | | } |
| | | } |
| | |
| | | max-height: 180px; |
| | | } |
| | | .set-group-label-active { |
| | | border-color: #161616; |
| | | color: #000; |
| | | } |
| | | .set-label-active { |