From bd7247878bf5258bf5c1f9deefbfa6c9ade066e3 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期四, 05 九月 2024 15:38:10 +0800 Subject: [PATCH] Merge branch 'master' of http://47.103.154.90:83/r/WI/Web.Admin.V1.0 --- src/views/project/yw/dataManage/knowledge/AddKnowledge.vue | 250 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 239 insertions(+), 11 deletions(-) diff --git a/src/views/project/yw/dataManage/knowledge/AddKnowledge.vue b/src/views/project/yw/dataManage/knowledge/AddKnowledge.vue index c2f84ac..c15c905 100644 --- a/src/views/project/yw/dataManage/knowledge/AddKnowledge.vue +++ b/src/views/project/yw/dataManage/knowledge/AddKnowledge.vue @@ -113,19 +113,70 @@ :model="state.knowledgeFile" label-width="120px" label-position="left" + class="h100" ref="knowledgeFileRef" :rules="knowledgeFormRules" > <el-divider content-position="left"><span class="text-[18px] font-[500]">閫夋嫨鏂囦欢</span></el-divider> - + <div class="flex items-start gap-[16px] max-h-[686px] min-h-[360px] set-file-height"> + <div class="min-h-[360px] h100 set_file_left"> + <div class="font-[500] mb-2">璇烽�夋嫨鏂囨。</div> + <div class="left_content"> + <div class="file_menu"> + <LeftTreeByMgr + title-name="绫荤洰" + ref="leftTreeRef" + :treedata="state.knowledgeBaseData" + :current-node-key="currentListID" + :defaultProps="{ + children: 'Children', + label: 'title', + id: 'id', + }" + @click="handleClickNode" + > + </LeftTreeByMgr> + </div> + <div class="file_table"> + <el-table + :data="state.fileData" + border + @select="handleSelectItem" + highlight-current-row + ref="multipleTableRef" + :class="{ 'hidden-checkbox-all': state.isRadio }" + @select-all=" + (selection) => { + handleSelectAll(selection, state.fileData); + } + " + > + <el-table-column type="selection" width="55" /> + <el-table-column prop="name" label="鏂囦欢鍚嶇О" /> + </el-table> + </div> + </div> + </div> + <div class="set_file_right"> + <div class="h100"> + <div class="font-[500] mb-[12px]">宸查�夋枃妗{ multipleSelection.length }}/50涓�</div> + <div class="selected_file"> + <div v-for="(item, index) in multipleSelection" :key="index" class="set_file_item"> + <span class="set_file_name">{{ item.name }}</span> + <span class="ywifont ywicon-guanbi set_file_close" @click="handleRemoveItem(item)"></span> + </div> + </div> + </div> + </div> + </div> <el-divider content-position="left"><span class="text-[18px]">鏁版嵁澶勭悊</span></el-divider> - <el-form-item label="閰嶇疆妯″紡:"> + <el-form-item label="鏂囨。鍒囧垎chunk:"> <div class="flex-auto flex flex-col"> <div class="flex"> - <div v-for="(item, index) in state.configurationList" :key="index"> + <div v-for="(item, index) in state.segmentationList" :key="index"> <div class="bg-[#fff] border-[1px] border-solid border-[#d8d9e6] py-[12px] w-[215px] mr-[10px] px-[16px] rounded-lg cursor-pointer" - :class="{ activeColor: state.knowledgeForm.configurationMode === item.ID }" + :class="{ activeColor: state.knowledgeForm.segmentationMode === item.ID }" @click="activeConfigurationType(item.ID)" > <div class="flex items-center"> @@ -133,7 +184,7 @@ <img :src="item.ImageURL" class="w-[40px] h-[40px] mr-[10px]" /> </div> <div class="data_right"> - <el-radio v-model="state.knowledgeForm.configurationMode" size="large" :label="item.ID"> + <el-radio v-model="state.knowledgeForm.segmentationMode" size="large" :label="item.ID"> <span class="font-[500] text[16px]">{{ item.Name }}</span> </el-radio> @@ -168,10 +219,13 @@ <script setup lang="ts"> import { ElMessage, type FormRules } from 'element-plus'; import moment from 'moment'; -import { reactive, ref } from 'vue'; +import { computed, nextTick, reactive, ref } from 'vue'; import { useRouter } from 'vue-router'; import { add_docvector_name } from '/@/api/knowledge/docvector'; +import { get_knowledge_group_list, list_knowledge_file } from '/@/api/knowledge/group'; +import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue'; import mittBus from '/@/utils/mitt'; +import { convertListToTree } from '/@/utils/util'; // 瀹氫箟鍙橀噺鍐呭 const state = reactive({ soliderValue: 0, @@ -181,6 +235,7 @@ prompt: '', dataType: 1, configurationMode: 1, + segmentationMode: 1, }, knowledgeFile: {}, dataTypeList: [ @@ -196,7 +251,7 @@ ImageURL: 'static/images/knowledge/data_type_2.png', DemoDesc: '閫夋嫨鏁版嵁绠$悊鍔熻兘涓凡鍒涘缓鐨勬暟鎹〃', }, - ], + ], //鏁版嵁绫诲瀷 configurationList: [ { ID: 1, @@ -209,6 +264,20 @@ Name: '鑷畾涔�', ImageURL: 'static/images/knowledge/data_type_4.png', DemoDesc: '瀹屽叏寮�鏀剧殑绂荤嚎鐭ヨ瘑搴撻厤缃紝鎸夌収妫�绱㈤渶姹傝嚜鐢遍厤缃紝鑾峰緱鎺ㄧ悊鏁堟灉鍜屾椂寤舵柟闈㈢殑涓嶅悓浣撻獙', + }, + ], //閰嶇疆妯″紡 + segmentationList: [ + { + ID: 1, + Name: '鏅鸿兘鍒囧垎', + ImageURL: 'static/images/knowledge/data_type_3.png', + DemoDesc: '鍦ㄩ�氱敤鏂囨。涓婄殑鏈�浼榗hunk鍒囧垎鏂规硶锛岀粡杩囪瘎娴嬪彲鍦ㄥ鏁版枃妗d笂鑾峰緱鏈�浣崇殑妫�绱㈡晥鏋�', + }, + { + ID: 3, + Name: '鑷畾涔夊垏鍒�', + ImageURL: 'static/images/knowledge/data_type_4.png', + DemoDesc: '瀹屽叏寮�鏀剧殑chunk鍒囧垎閰嶇疆锛屾寜鐓у疄闄呮枃妗f儏鍐佃嚜鐢遍厤缃紝閫氳繃璋冭瘯鑾峰緱鏇村ソ鐨勬绱㈡晥鏋�', }, ], modeList: [ @@ -242,6 +311,9 @@ }, ], showKnowledgeForm: false, + knowledgeBaseData: [], //鐭ヨ瘑搴撶被鐩� + fileData: [], //鏂囦欢鏁版嵁婧� + isRadio: false, //鏄惁鍗曢�� }); const knowledgeFormRules = reactive<FormRules>({ title: [ @@ -261,6 +333,8 @@ }); const knowledgeFormRef = ref(); const router = useRouter(); + +//#region ====================== 鐭ヨ瘑搴撹〃鍗曟搷浣� ====================== //杩斿洖 const handleExitFlow = () => { //鏄惁鏄剧ず杩斿洖 @@ -282,10 +356,14 @@ const valid = await knowledgeFormRef.value.validate().catch(() => {}); if (!valid) return; state.showKnowledgeForm = true; + getFileTreeData(true); }; const backKnowledge = () => { state.showKnowledgeForm = false; }; +//#endregion +//#region ====================== 绌虹煡璇嗗簱鐨勫垱寤� ====================== + //鍒涘缓涓�涓┖鐭ヨ瘑搴� const emptyKnowledgeBase = async () => { var currentTime = moment().format('YYYY-MM-DD HH:mm:ss'); @@ -306,11 +384,91 @@ router.push({ name: 'Knowledge' }); } }; +//瀵煎叆瀹屾垚 const importCompleted = () => { return; ElMessage.success('瀵煎叆瀹屾垚'); router.push({ name: 'Knowledge' }); }; +//#endregion +//#region ====================== 鐭ヨ瘑搴撴枃浠朵笂浼� ========== +const treeLoading = ref(false); +const currentTreeNode = ref(null); +const leftTreeRef = ref(null); +const currentListID = computed(() => currentTreeNode.value?.id); +//鑾峰彇鏂囦欢鍒楄〃 +const getFileTreeData = async (selectFirst = false) => { + treeLoading.value = true; + const res = await get_knowledge_group_list().finally(() => { + treeLoading.value = false; + }); + if (res?.json_ok) { + const resData = (res.values || []) as []; + state.knowledgeBaseData = convertListToTree(resData, { + ID: 'id', + Children: 'Children', + ParentID: 'parent', + }); + if (selectFirst) { + const firstListTreeNode = state.knowledgeBaseData[0]; + if (firstListTreeNode) { + handleClickNode(firstListTreeNode); + } else { + state.fileData = []; + multipleSelection.value = []; + } + } else { + currentTreeNode.value && handleClickNode(currentTreeNode.value); + } + } +}; +const handleClickNode = (data: any) => { + multipleSelection.value = []; + nextTick(() => { + leftTreeRef.value?.treeRef.setCurrentKey(data.id); + }); + currentTreeNode.value = data; + getFileTableData(); +}; +//鑾峰彇鏂囦欢琛ㄦ牸鍒楄〃 +const getFileTableData = async () => { + const res = await list_knowledge_file({ + group_id: currentListID.value, + }).finally(() => {}); + if (res?.json_ok) { + const resData = (res.values || []) as []; + state.fileData = resData; + } else { + ElMessage.error('鑾峰彇鏂囨。鍒楄〃澶辫触' + (res?.json_msg ? `锛�${JSON.stringify(res.json_msg)}` : '')); + } +}; +let multipleSelection = ref([]); +const multipleTableRef = ref(null); +//琛ㄦ牸鍗曢�夊拰澶氶�� +const handleSelectAll = (selection: any[], pageSelectionData: any[]) => { + let checked = selection.length ? true : false; // selection涓虹┖鏁扮粍鏃朵唬琛ㄥ彇娑堝叏閫� + if (checked) { + let mIds = multipleSelection.value.map((v) => v.id); + let filterData = pageSelectionData.filter((v) => { + // 绛涢�夊嚭闈為噸澶嶉」 + return !mIds.includes(v.id); + }); + multipleSelection.value = multipleSelection.value.concat(filterData); + } else { + let pIds = pageSelectionData.map((v) => v.id); + multipleSelection.value = multipleSelection.value.filter((v) => !pIds.includes(v.id)); + } +}; + +const handleSelectItem = (selection: any[], row) => { + multipleSelection.value = selection; +}; +// 绉婚櫎宸查�夋枃浠� +const handleRemoveItem = (item) => { + multipleSelection.value = multipleSelection.value.filter((v) => v.id !== item.id); + multipleTableRef.value.toggleRowSelection(item, false); +}; +//#endregion </script> <style scoped lang="scss"> .set-form-height { @@ -357,10 +515,80 @@ margin-top: 12px; padding: 16px 24px; } -.slider-demo-block { - max-width: 600px; - display: flex; - align-items: center; +.set-file-height { + height: calc(100% - 48px); +} +.set_file_left { + border: 1px solid #e7e8ee; + border-radius: 12px; + flex: 1; + padding: 12px 16px 16px; + box-sizing: border-box; + .left_content { + align-items: flex-start; + display: flex; + gap: 12px; + height: calc(100% - 29px); + .file_menu { + flex-shrink: 0; + height: 100%; + overflow-y: auto; + border: 1px solid #e7e8ee; + border-radius: 6px; + max-height: 627px; + padding: 20px; + width: 280px; + } + .file_table { + flex-shrink: 0; + height: 100%; + overflow-y: auto; + border-radius: 8px 8px 0 0; + flex: 1; + } + } +} +.set_file_right { + border: 1px solid #e7e8ee; + border-radius: 6px; + flex-shrink: 0; + height: 100%; + padding: 12px 16px 16px; + width: 417px; + min-height: 360px; +} +.selected_file { + max-height: calc(100% - 36px); + overflow-y: auto; + box-sizing: border-box; + .set_file_item { + align-items: center; + background: linear-gradient(0deg, #f7f8fe, #f7f8fe), #fff; + border-radius: 8px; + display: flex; + font-size: 12px; + gap: 8px; + height: 40px; + justify-content: space-between; + padding: 0 16px; + margin-bottom: 9px; + .set_file_name { + max-width: calc(100% - 22px); + } + .set_file_close { + color: #878aab; + cursor: pointer; + flex-shrink: 0; + font-size: 14px; + align-items: center; + display: inline-flex; + justify-content: center; + } + } +} +.hidden-checkbox-all :deep(.el-table__header .el-table-column--selection .el-checkbox) { + // 闅愯棌鍏ㄩ�塩heckbox + display: none; } </style> <style> -- Gitblit v1.9.3