序号

wujingjing

2024-12-31 8d83544ff6e123df4facf40c446e7d9bf4a522b6

 src/views/project/yw/systemManage/questionMgr/RecommendQuestions.vue

@@ -11,13 +11,14 @@
               label: 'group_name',
               children: 'children',
            }"
            :treedata="listTreeData"
            sample_title-name="分组列表"
            :treedata="listLeftData"
            title-name="场景列表"
            :show-more-operate="false"
            :show-add="false"
            :current-node-key="currentListID"
            :node-icon="() => 'ele-Document'"
            @click="handleClickNode"
            defaultExpandAll
         >
         </LeftTreeByMgr>
      </template>
@@ -42,7 +43,7 @@
            <div class="mt10 overflow-auto h100" v-show="finalTerminologyList.length > 0">
               <div class="w100 pb-[20px]" v-for="item in finalTerminologyList" :key="item.sample_id">
                  <div
                     class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]"
                     class="cursor-pointer flex box-border p-[12px] w-full rounded bg-[#f5f7fd] transition-[background-color .2s]"
                     @click="changeExample(item)"
                  >
                     <i
@@ -55,8 +56,30 @@
                           {{ item.sample_question }}
                        </div>
                     </div>
                     <div class="ml-6 min-w-0 flex items-center">
                        <el-tooltip effect="dark" content="对话测试" placement="top">
                           <i class="ywifont ywicon-ceshi !text-[20px] text-blue-400 cursor-pointer" @click="openChatTest(item)"></i>
                        </el-tooltip>
                     </div>
                  </div>
               </div>
            </div>
            <div
               v-if="chatTestIsShow"
               ref="draggableChatRef"
               :style="style"
               class="fixed z-50 w-[700px] h-[800px] flex flex-col bg-[rgb(239,244,253)] right-0 bottom-0 rounded-lg"
            >
               <div ref="chatDragHandlerRef" class="flex-0">
                  <div class="flex items-center justify-between py-2 px-4">
                     <div class="font-bold cursor-move">
                        WI水务智能管家——【{{ chatTestMapRow?.sample_title }}】测试
                        <!-- <img src="/static/images/logo/logo-mini.svg" width="10" height="10" /> -->
                     </div>
                     <i class="ywifont ywicon-guanbi font-[10px] font-bold cursor-pointer" @click="closeChatTest"></i>
                  </div>
               </div>
               <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat>
            </div>
            <div class="w100 h100" v-show="finalTerminologyList.length == 0"><el-empty description="暂无数据" class="h100" /></div>
         </div>
@@ -82,56 +105,71 @@
//#region ====================== 左侧树数据，tree init ======================
const leftTreeRef = useCompRef(LeftTreeByMgr);
const treeLoading = ref(false);
const listData = ref([]);
const listLeftData = ref([]);
const currentListID = computed(() => currentNode.value?.group_id);
const currentNode = ref(null);
const listTreeData = computed(() => {
   const byParentData = convertListToTree(listData.value, {
const handleClickNode = (data) => {
   nextTick(() => {
      leftTreeRef.value?.treeRef.setCurrentKey(data.group_id);
   });
   currentNode.value = data;
   terminologyData.value = data.sampleList;
};

//#endregion
//#region ====================== 推荐问题 ======================
const terminologyData = ref([]); //显示的数据源
//获取场景list
const initData = async () => {
   const [treeData, sampleData] = await Promise.all([agentGroupApi.getSceneGroupTreeByPost(), get_scene_group_sample()]);
   const tree_Data = treeData.groups ?? [];
   const sample_Data = sampleData.samples ?? [];
   let result = [];
   let new_tree_Data = [];
   tree_Data.forEach((node, index) => {
      if (
         node.group_type != OptClassificationMap[classificationEnum.Office] &&
         node.group_type != OptClassificationMap[classificationEnum.Knowledge]
      ) {
         new_tree_Data.push(node);
      }
   });

   new_tree_Data.forEach((node, index) => {
      node.sampleList = [];
      sample_Data.forEach((sample, index) => {
         sample.Icon = '/static/images/wave/ChatImg.png';
         sample.BgColor = randomHexColor();
         if (node.group_id == sample.group_id) {
            node.sampleList.push(sample);
         }
      });
      if (node.p_group_id) {
         node.group_name = `${node.group_name} (${node.sampleList.length})`;
      }
   });

   const byParentData = convertListToTree(new_tree_Data, {
      ID: 'group_id',
      ParentID: 'p_group_id',
      Children: 'children',
   });
   const result = [];
   byParentData.forEach((item) => {
      if (
         item.group_type != OptClassificationMap[classificationEnum.Office] &&
         item.group_type != OptClassificationMap[classificationEnum.Knowledge]
      ) {
         result.push(item);
      if (item.children && item.children.length > 0) {
         item.children.forEach((child_node) => {
            item.sampleList = item.sampleList.concat(child_node.sampleList);
         });
      }
      result.push(item);

      item.group_name = `${item.group_name} (${item.sampleList.length})`;
   });
   return result;
});
const handleClickNode = (data) => {
   nextTick(() => {
      leftTreeRef.value?.treeRef.setCurrentKey(data.id);
   });
   currentNode.value = data;
   getTableData();
   listLeftData.value = byParentData;
   const firstListTreeNode = byParentData[0];
   terminologyData.value = firstListTreeNode.sampleList;
   currentNode.value = firstListTreeNode;
};
const getListTreeData = async () => {
   const res = await agentGroupApi.getSceneGroupTreeByPost();
   listData.value = res.groups || [];
   const firstListTreeNode = listTreeData.value[0];
   if (firstListTreeNode) {
      handleClickNode(firstListTreeNode);
   } else {
      terminologyData.value = [];
      currentNode.value = null;
   }
};
//#endregion
//#region ====================== 推荐问题 ======================
const terminologyData = ref([]);
//获取场景list
const getTableData = async () => {
   const res = await get_scene_group_sample();
   res.samples.forEach((sample, index) => {
      sample.Icon = '/static/images/wave/ChatImg.png';
      sample.BgColor = randomHexColor();
   });
   terminologyData.value = res.samples;
};

//随机生成颜色
const randomHexColor = () => {
   return `#${Math.floor(Math.random() * 16777215)
@@ -142,6 +180,7 @@
const changeExample = (item) => {
   openChatTest(item);
};

//#endregion
//#region ====================== 表格查询、排序，search form init ======================
const queryParams = ref({
@@ -149,7 +188,7 @@
});
const { query: queryTerminology, queryData: showTerminologyList } = useSearch(terminologyData, queryParams);
const finalTerminologyList = computed(() => {
   const result = showTerminologyList.value.filter((item) => item.group_id == currentListID.value);
   const result = showTerminologyList.value;
   return result ?? [];
});
const terminologyQuery = debounce(queryTerminology);
@@ -206,8 +245,8 @@
   return res;
};
//#endregion
onMounted(() => {
   getListTreeData();
onMounted(async () => {
   initData();
});
</script>
<style scoped lang="scss">