From c7952b15f492b9a5cde213a71a7aa41c00e1726d Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 15 十月 2024 12:07:45 +0800
Subject: [PATCH] 重新构建高级示例
---
src/views/types/processDrawing/index.ts | 14 ++
src/components/drawer/CustomDrawer.vue | 255 +++++++++++++++++++++++++++++++++-----------------
2 files changed, 182 insertions(+), 87 deletions(-)
diff --git a/src/components/drawer/CustomDrawer.vue b/src/components/drawer/CustomDrawer.vue
index 2543f6a..174dcfa 100644
--- a/src/components/drawer/CustomDrawer.vue
+++ b/src/components/drawer/CustomDrawer.vue
@@ -30,27 +30,25 @@
<el-input v-model="queryParams.sample_title" placeholder="鎼滅储鏇村" class="set-input" :prefix-icon="Search" clearable>
</el-input>
</div>
- <div class="mt20 w100 relative" v-show="state.customTagList.length > 0">
+ <div class="mt20 w100 relative" v-show="state.businessTagList.length > 0">
<div class="set_custom_label">
<div class="chanel-tags">
- <div v-for="(item, index) in state.customTagList" :key="index" @click="handleLabelClick(item)">
- <span class="set-group-name" :class="{ 'set-group-label-active': state.activeLabelName === item.group_id }">{{
- item.group_name
- }}</span>
+ <div v-for="(item, index) in state.businessTagList" :key="index" class="flex items-center">
+ <span class="set-group-name">{{ item.group_name }}</span>
+ <div
+ class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center"
+ >
+ <div
+ v-for="(itemChildren, index) in item.Children"
+ :key="index"
+ :class="{ 'set-label-active': state.activeBusinessChildName === itemChildren.group_id }"
+ @click="handleLabelChildClick(itemChildren)"
+ class="cursor-pointer rounded-xl bg-[#e0e7f] text-[#b2b2b2] text-[12px] transition-[background-color .1s, color .1s, border-color .1s]"
+ >
+ <el-divider direction="vertical" />{{ itemChildren.group_name }}
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div
- class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center pt-2"
- >
- <div
- v-for="(itemChildren, index) in state.customTagChildList"
- :key="index"
- :class="{ 'set-label-active': state.activeLabelChildName === itemChildren.group_id }"
- @click="handleLabelChildClick(itemChildren)"
- class="cursor-pointer m-[5px] py-[5px] pl-[10px] pr-[14px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
- >
- {{ itemChildren.group_name }}
</div>
</div>
<div class="mt20 w100" v-show="finalSampleList.length > 0">
@@ -83,18 +81,26 @@
</el-input>
</div>
<div class="mt20 w100 relative" v-show="state.customOfficeList.length > 0">
- <div class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]">
- <div
- v-for="item in state.customOfficeList"
- :key="item.group_id"
- :class="{ 'set-label-active': state.activeInstructName === item.group_id }"
- @click="handleInstructClick(item)"
- class="cursor-pointer m-[5px] py-[5px] px-[10px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
- >
- {{ item.group_name }}
+ <div class="set_custom_label">
+ <div class="chanel-tags">
+ <div v-for="(item, index) in state.customOfficeList" :key="index" class="flex items-center">
+ <span class="set-group-name">{{ item.group_name }}</span>
+ <div
+ class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center"
+ >
+ <div
+ v-for="(itemChildren, index) in item.Children"
+ :key="index"
+ :class="{ 'set-label-active': state.activeOfficeChildName === itemChildren.group_id }"
+ @click="handleOfficeChildClick(itemChildren)"
+ class="cursor-pointer rounded-xl bg-[#e0e7f] text-[#b2b2b2] text-[12px] transition-[background-color .1s, color .1s, border-color .1s]"
+ >
+ <el-divider direction="vertical" />{{ itemChildren.group_name }}
+ </div>
+ </div>
+ </div>
</div>
</div>
-
<div class="mt20 w100">
<div class="w100 pb-[20px] flex overflow-auto flex-col" v-for="item in showInstructList" :key="item.group_id">
<div class="bg-[#f5f7fd] p-[12px] transition-[background-color .2s] flex flex-col rounded-2xl">
@@ -112,7 +118,56 @@
</div>
</div>
</div>
-
+ <div class="box-border w-[354px] flex-1 min-h-0 bg-[#e0e7fb]" v-show="state.activeName == 3">
+ <div class="flex flex-col w100 h100 pt-0 pr-[15px] pb-0 pl-[20px] overflow-auto">
+ <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>
+ </el-input>
+ </div>
+ <div class="mt20 w100 relative" v-show="state.knowledgeBaseList.length > 0">
+ <div class="set_custom_label">
+ <div class="chanel-tags">
+ <div v-for="(item, index) in state.knowledgeBaseList" :key="index" class="flex items-center">
+ <span class="set-group-name">{{ item.group_name }}</span>
+ <div
+ class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center"
+ >
+ <div
+ v-for="(itemChildren, index) in item.Children"
+ :key="index"
+ :class="{ 'set-label-active': state.activeKnowledgeChildName === itemChildren.group_id }"
+ @click="handleKnowledgeChildClick(itemChildren)"
+ class="cursor-pointer rounded-xl bg-[#e0e7f] text-[#b2b2b2] text-[12px] transition-[background-color .1s, color .1s, border-color .1s]"
+ >
+ <el-divider direction="vertical" />{{ itemChildren.group_name }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mt20 w100" v-show="finalKnowledgeList.length > 0">
+ <div class="w100 pb-[20px]" v-for="item in finalKnowledgeList" :key="item.sample_id">
+ <div
+ class="cursor-pointer flex box-border p-[12px] w100 rounded bg-[#f5f7fd] transition-[background-color .2s]"
+ @click="changeExample(item)"
+ >
+ <i
+ class="myiconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]"
+ :style="`background-color:${item.BgColor}`"
+ ></i>
+ <div class="ml-6 flex-1 min-w-0">
+ <div class="text-sm text-[#000] m-0 p-0 font-bold">{{ item.sample_title }}</div>
+ <div class="mt-[6px] text-[13px] text-[#666] h-[20px] whitespace-nowrap text-ellipsis overflow-hidden">
+ {{ item.sample_question }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mt20 w100" v-show="finalKnowledgeList.length == 0"><el-empty description="鏆傛棤鏁版嵁" /></div>
+ </div>
+ </div>
+ </div>
<el-dialog v-model="state.useInstructDialog" :title="state.instructInfo?.template_title" width="500" :before-close="handleClose">
<el-input v-model="state.inputInstruct" :rows="10" type="textarea"></el-input>
<template #footer>
@@ -133,15 +188,17 @@
import { useSearch } from '/@/hooks/useSearch';
import { 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: 1, Name: '涓氬姟鍦烘櫙' },
+ { ID: 2, Name: '鍔炲叕鍔╂墜' },
+ { ID: 3, Name: '鐭ヨ瘑搴�' },
],
activeName: 1,
- activeLabelName: 'office_summarize', //榛樿閫夋嫨绗竴涓�
- activeLabelChildName: '',
- activeInstructName: 'office_assistant', //榛樿閫夋嫨绗竴涓�
+ activeBusinessChildName: '', //鍦烘櫙
+ activeOfficeChildName: '', //鍔炲叕
+ activeKnowledgeChildName: '', //鐭ヨ瘑搴�
useInstructDialog: false,
instructInfo: {},
inputInstruct: '', //鍙慨鏀规寚浠�
@@ -151,9 +208,10 @@
listInstructLoading: false,
listSampleExpand: false,
listInstructExpand: false,
- customTagList: [],
+ knowledgeBaseList: [],
customTagChildList: [],
customOfficeList: [],
+ businessTagList: [],
});
const instructContentList = ref([]); //鎸囦护鍒楄〃
const exampleList = ref([]); //绀轰緥鍒楄〃
@@ -204,28 +262,21 @@
//鍒囨崲鍒版寚浠�/鎻愰棶
const handleTabClick = (item) => {
state.activeName = item.ID;
+ tagListClick(sectionAList.value);
getTableData();
};
-//鏍囩鐐瑰嚮浜嬩欢(鎻愰棶绀轰緥) 涓诲満鏅�
-const handleLabelClick = (item) => {
- state.activeLabelName = item.group_id;
- state.customTagChildList = item.Children;
- if (item.Children.length > 0) {
- state.activeLabelChildName = item.Children[0].group_id ?? '';
- } else {
- state.activeLabelChildName = '';
- state.customTagChildList = [];
- }
-};
-//娆″満鏅�
+//鍦烘櫙瀛愬満鏅�
const handleLabelChildClick = (item) => {
- state.activeLabelChildName = item.group_id;
+ state.activeBusinessChildName = item.group_id;
};
-//鏍囩鐐瑰嚮浜嬩欢(鎸囦护妯℃澘)
-const handleInstructClick = (item) => {
- state.activeInstructName = item.group_id;
+//鍔炲叕瀛愬満鏅�
+const handleOfficeChildClick = (item) => {
+ state.activeOfficeChildName = item.group_id;
};
-
+//鐭ヨ瘑搴撳瓙鍦烘櫙
+const handleKnowledgeChildClick = (item) => {
+ state.activeKnowledgeChildName = item.group_id;
+};
const toggleShow = async () => {
isShow.value = !isShow.value;
if (!isShow.value) {
@@ -254,13 +305,14 @@
sectionItem.Icon = iconList[index];
});
sectionAList.value = res.groups;
+ tagListClick(sectionAList.value);
};
const loadingData = ref(false);
const getTableData = async () => {
loadingData.value = true;
try {
- if (state.activeName == 1) {
+ if (state.activeName == 1 || state.activeName == 3) {
if (state.listSampleExpand) return;
await getSelectListSample();
state.listSampleExpand = true;
@@ -293,14 +345,14 @@
handleClose();
};
//#endregion
-//#region ====================== 鎼滅储妯℃澘/鎸囦护 ======================
+//#region ====================== 鎼滅储鍦烘櫙/鍔炲叕/鐭ヨ瘑搴� ======================
const queryParams = ref({
sample_title: '',
});
const { query: querySample, queryData: showSampleList } = useSearch(exampleList, queryParams);
const debounceQuery = debounce(querySample);
const finalSampleList = computed(() => {
- const result = showSampleList.value.filter((item) => item.group_id == state.activeLabelChildName);
+ const result = showSampleList.value.filter((item) => item.group_id == state.activeBusinessChildName);
return result ?? [];
});
watch(
@@ -309,7 +361,7 @@
debounceQuery();
}
);
-//鎸囦护
+//鍔炲叕
const instructParams = ref({
template_title: '',
});
@@ -323,6 +375,23 @@
instructQuery();
}
);
+//鐭ヨ瘑搴�
+const knowledgeParams = ref({
+ template_title: '',
+});
+const { query: queryKnowledge, queryData: showKnowledgeList } = useSearch(exampleList, knowledgeParams);
+const finalKnowledgeList = computed(() => {
+ const result = showKnowledgeList.value.filter((item) => item.group_id == state.activeKnowledgeChildName);
+ return result ?? [];
+});
+const knowledgeQuery = debounce(queryKnowledge);
+
+watch(
+ () => instructParams.value.template_title,
+ (val) => {
+ knowledgeQuery();
+ }
+);
//#endregion
//#region ====================== 鑾峰彇tag ======================
@@ -331,36 +400,54 @@
if (val.length > 0) {
const selectTagList = [];
const officeList = [];
+ const businessList = [];
val.forEach((item) => {
- if (item.group_id != 'office_assistant') {
+ if (item.group_type == OptClassificationMap[classificationEnum.Business]) {
+ businessList.push(item);
+ } else if (item.group_type == OptClassificationMap[classificationEnum.Knowledge]) {
selectTagList.push(item);
- } else {
+ } else if (
+ item.group_type != OptClassificationMap[classificationEnum.Business] &&
+ item.group_type != OptClassificationMap[classificationEnum.Knowledge]
+ ) {
officeList.push(item);
}
});
- const treeTagList = convertListToTree(selectTagList, {
- ID: 'group_id',
- Children: 'Children',
- ParentID: 'p_group_id',
- });
- state.customTagList = treeTagList;
- state.customOfficeList = officeList;
+ switch (state.activeName) {
+ case 1:
+ const treeBusinessList = convertListToTree(businessList, {
+ ID: 'group_id',
+ Children: 'Children',
+ ParentID: 'p_group_id',
+ });
+ state.activeBusinessChildName = treeBusinessList[0].Children[0].group_id ?? '';
+ state.businessTagList = treeBusinessList; //涓氬姟鍦烘櫙
+ break;
+ case 2:
+ const treeOfficeList = convertListToTree(officeList, {
+ ID: 'group_id',
+ Children: 'Children',
+ ParentID: 'p_group_id',
+ });
+ state.activeOfficeChildName = treeOfficeList[0].Children[0].group_id ?? '';
+ state.customOfficeList = treeOfficeList; //鍔炲叕鍔╂墜
+ break;
+ case 3:
+ const treeTagList = convertListToTree(selectTagList, {
+ ID: 'group_id',
+ Children: 'Children',
+ ParentID: 'p_group_id',
+ });
+ state.knowledgeBaseList = treeTagList; //鐭ヨ瘑搴�
+ state.activeKnowledgeChildName = treeTagList[0].Children[0].group_id ?? '';
+ break;
+ }
} else {
- state.customTagList = [];
+ state.knowledgeBaseList = [];
state.customOfficeList = [];
+ state.businessTagList = [];
}
};
-
-watch(
- () => sectionAList.value,
- (val) => {
- tagListClick(val);
- },
- {
- immediate: true,
- }
-);
-
//#endregion
defineExpose({ getTableData });
@@ -376,9 +463,8 @@
z-index: 100;
}
.set_custom_label {
- padding-top: 2px;
- padding-bottom: 2px;
- height: 70px;
+ // height: 141px;
+ min-height: 53px;
box-sizing: border-box;
background-color: #f2f4f8;
border-bottom: 1px solid #eee;
@@ -386,19 +472,16 @@
width: 100%;
position: relative;
overflow: hidden;
- display: flex;
font-size: 12px;
- color: #9b9b9b;
+ color: #000;
line-height: 26px;
- flex-wrap: wrap;
padding: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
- height: 62px;
+ height: 100%;
.set-group-name {
margin: 0px 7px;
- cursor: pointer;
white-space: nowrap;
}
}
@@ -488,8 +571,6 @@
color: #1c86ff;
}
.set-label-active {
- border-color: #1c86ff;
- background-color: #ccdcfb;
color: #1c86ff;
}
.example-body {
diff --git a/src/views/types/processDrawing/index.ts b/src/views/types/processDrawing/index.ts
index d91bdc6..ea13a7c 100644
--- a/src/views/types/processDrawing/index.ts
+++ b/src/views/types/processDrawing/index.ts
@@ -58,3 +58,17 @@
[ConvertTypeEnum.Null]: '鏃�',
[ConvertTypeEnum.Dict]: '瀛楀吀',
};
+// 涓氬姟鍒嗙被
+export enum classificationEnum {
+ /** @description 涓氬姟 */
+ Business = 1,
+ /** @description 鍔炲叕 */
+ Office = 2,
+ /** @description 鐭ヨ瘑 */
+ Knowledge = 3,
+}
+export const OptClassificationMap = {
+ [classificationEnum.Business]: '涓氬姟鍦烘櫙',
+ [classificationEnum.Office]: '鍔炲叕鍔╂墜',
+ [classificationEnum.Knowledge]: '鐭ヨ瘑搴�',
+};
--
Gitblit v1.9.3