From d07f76351fa34a0f3b65d6f6f6e784aabd3a0b98 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期一, 21 十月 2024 15:00:34 +0800 Subject: [PATCH] 精简代码 --- src/views/project/yw/systemManage/metricAgentMgr/MetricAgentMgr.vue | 449 ++++++++++++++----------------------------------------- 1 files changed, 114 insertions(+), 335 deletions(-) diff --git a/src/views/project/yw/systemManage/metricAgentMgr/MetricAgentMgr.vue b/src/views/project/yw/systemManage/metricAgentMgr/MetricAgentMgr.vue index 4bd6b44..db7304d 100644 --- a/src/views/project/yw/systemManage/metricAgentMgr/MetricAgentMgr.vue +++ b/src/views/project/yw/systemManage/metricAgentMgr/MetricAgentMgr.vue @@ -1,5 +1,5 @@ <template> - <AMContainer type="card"> + <AHMContainer type="card"> <template #aside> <!-- 鐩綍鏍� --> <LeftTreeByMgr @@ -11,8 +11,9 @@ label: 'group_name', children: 'children', }" + defaultExpandAll :treedata="listTreeData" - title-name="鍒嗙粍鍒楄〃" + title-name="鍦烘櫙鍒楄〃" :show-more-operate="false" :show-add="false" :current-node-key="currentListID" @@ -21,246 +22,136 @@ > </LeftTreeByMgr> </template> - <template #main> - <div class="w100 h100" v-show="tableHasChildren"> - <el-tabs v-model="activeTabName" class="h-full" @tab-change="handleClick"> - <el-tab-pane label="鏁版嵁闆嗙鐞�" name="dataset" class="h-full"> - <div class="h-full"> - <el-table - v-loading="tableLoading" - ref="draggableTableRef" - class="h100" - border - :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" - :data="displayTableData" - highlight-current-row - > - <el-table-column prop="title" label="鍚嶇О" width="300" fixed="left" show-overflow-tooltip> </el-table-column> - <el-table-column label="鍒涘缓浜�" prop="creator" width="100" show-overflow-tooltip> </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" prop="create_time" width="105" show-overflow-tooltip> </el-table-column> - <el-table-column label="鍙戝竷鐘舵��" prop="published" width="85" show-overflow-tooltip> - <template #default="scope"> - <el-tag :type="scope.row.published === SupervisorPublished.Y ? 'primary' : 'info'">{{ - supervisorPublishedMap[scope.row.published] - }}</el-tag> - </template> - </el-table-column> - - <el-table-column label="澶囨敞" prop="note" show-overflow-tooltip> </el-table-column> - <el-table-column label="鎿嶄綔" width="200" fixed="right" show-overflow-tooltip> - <template #default="scope"> - <div class="space-x-3 items-center flex"> - <el-tooltip effect="dark" content="鏌ョ湅鎻愮ず璇�" placement="top"> - <i - class="ywifont ywicon-tishici !text-[21px] text-blue-400 cursor-pointer" - @click="openCopyPrompt(scope.row)" - ></i> - </el-tooltip> - <el-tooltip effect="dark" content="鏌ョ湅鎸囨爣鍚嶇О" placement="top"> - <i - class="ywifont ywicon-zhibiao !text-[17px] text-blue-400 cursor-pointer" - @click="openMetricNameDlg(scope.row)" - ></i> - </el-tooltip> - - <el-tooltip effect="dark" content="瀵硅瘽娴嬭瘯" placement="top"> - <i class="ywifont ywicon-ceshi !text-[20px] text-blue-400 cursor-pointer" @click="openChatTest(scope.row)"></i> - </el-tooltip> - </div> - </template> - </el-table-column> - </el-table> - <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?.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> - </el-tab-pane> - <el-tab-pane label="缁村害绠$悊" name="tagObject" class="h-full"> - <div class="h-full"> - <el-table - v-loading="tableLoading" - ref="draggableTableRef" - class="h100" - border - :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" - :data="tagObjectDData" - highlight-current-row - > - <el-table-column label="鍚嶇О" prop="title" width="200" fixed="left" show-overflow-tooltip> </el-table-column> - <el-table-column label="鎻忚堪" prop="creator" show-overflow-tooltip> </el-table-column> - <el-table-column label="鐘舵��" prop="create_time" width="125" show-overflow-tooltip> </el-table-column> - <el-table-column label="鍒涘缓浜�" prop="published" width="100" show-overflow-tooltip> </el-table-column> - <el-table-column label="鏇存柊鏃堕棿" prop="note" show-overflow-tooltip width="150"> </el-table-column> - <el-table-column label="鎿嶄綔" width="80" fixed="right" show-overflow-tooltip> </el-table-column> - </el-table> - </div> - </el-tab-pane> - <el-tab-pane label="鏈绠$悊" name="terminology" class="h-full"> - <div class="h-full"> - <el-table - v-loading="tableLoading" - ref="draggableTableRef" - class="h100" - border - :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" - :data="terminologyData" - highlight-current-row - > - <el-table-column label="鍚嶇О" prop="title" width="200" fixed="left" show-overflow-tooltip> </el-table-column> - <el-table-column label="杩戜箟璇�" prop="creator" show-overflow-tooltip> </el-table-column> - <el-table-column label="鍒涘缓浜�" prop="create_time" width="125" show-overflow-tooltip> </el-table-column> - <el-table-column label="鏇存柊鏃堕棿" prop="published" width="100" show-overflow-tooltip> </el-table-column> - <el-table-column label="鎻忚堪" prop="note" show-overflow-tooltip width="150"> </el-table-column> - <el-table-column label="鎿嶄綔" width="80" fixed="right" show-overflow-tooltip> </el-table-column> - </el-table> - </div> - </el-tab-pane> - <el-tab-pane label="鏉冮檺绠$悊" name="permission" class="h-full"> - <div class="h-full"> - <div class="flex items-center justify-between set-permission box-border"> - <div class="font-500 text-[16px] text-[#000000e0]">閭�璇锋垚鍛�</div> - </div> - <el-form label-position="top" label-width="auto" :model="permissionForm" class="set-form"> - <el-form-item label="绠$悊鍛樺皢鎷ユ湁涓婚鍩熶笅鎵�鏈夌紪杈戝強璁块棶鏉冮檺" class="set-form-item"> - <el-select v-model="permissionForm.accessPermissions" autocomplete="off" clearable> - <el-option v-for="item in accessPermissionsData" :key="item" :value="parseInt(item)" :label="item.label"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="鎸夌粍缁�"> - <el-select v-model="permissionForm.byOrganization" autocomplete="off" clearable> - <el-option v-for="item in byOrganizationData" :key="item" :value="parseInt(item)" :label="item.label"> </el-option> - </el-select> - </el-form-item> - <el-form-item label="鎸変釜浜�"> - <el-select v-model="permissionForm.byIndividual" autocomplete="off" clearable> - <el-option v-for="item in byIndividualData" :key="item" :value="parseInt(item)" :label="item.label"> </el-option> - </el-select> - </el-form-item> - </el-form> - </div> - </el-tab-pane> - </el-tabs> - </div> - <div class="w100 h100 relative" v-show="!tableHasChildren"> + <template #header> + <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="relative"> + <el-form-item label="鏍囬" prop="title"> + <el-input + v-model="queryParams.title" + style="width: 226.4px" + placeholder="鏍囬" + clearable + @input="() => terminologyQuery()" + /> + </el-form-item> + <el-form-item> + <el-button icon="ele-Refresh" @click="resetQuery">閲嶇疆 </el-button> + </el-form-item> <div class="absolute top-0 right-0 w-[112px] h-[24[x]] bg-white z-50 leading-3 pt-2"> <el-radio-group v-model="canvasRadio" size="small"> <el-radio-button label="鍒楄〃" value="canvas_list" /> <el-radio-button label="鐢诲竷" value="canvas_tu" /> </el-radio-group> </div> - <el-tabs v-model="activeModelName" class="h-full" @tab-change="handleClick"> - <el-tab-pane label="妯″瀷绠$悊" name="modelName" class="h-full"> - <div class="h-full" v-show="canvasRadio === 'canvas_list'"> - <el-table - v-loading="tableLoading" - ref="draggableTableRef" - class="h100" - border - :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" - :data="displayTableData" - highlight-current-row - > - <el-table-column prop="title" label="妯″瀷鍚嶇О" width="300" fixed="left" show-overflow-tooltip> </el-table-column> - <el-table-column label="鑻辨枃鍚嶇О" prop="creator" width="100" show-overflow-tooltip> </el-table-column> - <el-table-column label="鏇存柊鏃堕棿" prop="create_time" width="105" show-overflow-tooltip> </el-table-column> - <el-table-column label="鍙戝竷鐘舵��" prop="published" width="85" show-overflow-tooltip> - <template #default="scope"> - <el-tag :type="scope.row.published === SupervisorPublished.Y ? 'primary' : 'info'">{{ - supervisorPublishedMap[scope.row.published] - }}</el-tag> - </template> - </el-table-column> + </el-form> + </template> + <template #main> + <div class="w100 h100"> + <div class="h-full" v-show="canvasRadio === 'canvas_list'"> + <el-table + v-loading="tableLoading" + ref="draggableTableRef" + class="h100" + border + :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" + :data="displayTableData" + highlight-current-row + > + <el-table-column prop="title" label="鍚嶇О" width="300" fixed="left" show-overflow-tooltip> </el-table-column> + <el-table-column label="鍒涘缓浜�" prop="creator" width="100" show-overflow-tooltip> </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" prop="create_time" width="105" show-overflow-tooltip> </el-table-column> + <el-table-column label="鍙戝竷鐘舵��" prop="published" width="85" show-overflow-tooltip> + <template #default="scope"> + <el-tag :type="scope.row.published === SupervisorPublished.Y ? 'primary' : 'info'">{{ + supervisorPublishedMap[scope.row.published] + }}</el-tag> + </template> + </el-table-column> - <el-table-column label="鍒涘缓浜�" prop="note" show-overflow-tooltip> </el-table-column> - <el-table-column label="鎻忚堪" prop="note" show-overflow-tooltip> </el-table-column> - <el-table-column label="鎿嶄綔" width="200" fixed="right" show-overflow-tooltip> - <template #default="scope"> - <div class="space-x-3 items-center flex"> - <el-tooltip effect="dark" content="鍒犻櫎" placement="top"> - <i - class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer" - @click="deleteModelData(scope.row)" - ></i> - </el-tooltip> - </div> - </template> - </el-table-column> - </el-table> - <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?.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> + <el-table-column label="澶囨敞" prop="note" show-overflow-tooltip> </el-table-column> + <el-table-column label="鎿嶄綔" width="200" fixed="right" show-overflow-tooltip> + <template #default="scope"> + <div class="space-x-3 items-center flex"> + <el-tooltip effect="dark" content="鏌ョ湅鎻愮ず璇�" placement="top"> + <i class="ywifont ywicon-tishici !text-[21px] text-blue-400 cursor-pointer" @click="openCopyPrompt(scope.row)"></i> + </el-tooltip> + <el-tooltip effect="dark" content="鏌ョ湅鎸囨爣鍚嶇О" placement="top"> + <i + class="ywifont ywicon-zhibiao !text-[17px] text-blue-400 cursor-pointer" + @click="openMetricNameDlg(scope.row)" + ></i> + </el-tooltip> + + <el-tooltip effect="dark" content="瀵硅瘽娴嬭瘯" placement="top"> + <i class="ywifont ywicon-ceshi !text-[20px] text-blue-400 cursor-pointer" @click="openChatTest(scope.row)"></i> + </el-tooltip> </div> - <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat> + </template> + </el-table-column> + </el-table> + <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?.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> - <div class="h-full" v-show="canvasRadio === 'canvas_tu'"></div> - </el-tab-pane> - </el-tabs> + <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat> + </div> + </div> + <div class="h-full" v-show="canvasRadio === 'canvas_tu'"></div> </div> </template> <!-- <OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" @update="updateOpt" :groupId="currentListID"></OptDlg> --> <MetricPrompt v-model="infoDlgIsShow" :metricItem="infoDlgMapRow"></MetricPrompt> <MetricName v-model="metricNameIsShow" :metricItem="metricNameMapRow"></MetricName> - </AMContainer> + </AHMContainer> </template> <script setup lang="ts"> import { useDraggable } from '@vueuse/core'; import axios, { CancelTokenSource } from 'axios'; -import { ElMessage } from 'element-plus'; -import { computed, nextTick, onMounted, ref } from 'vue'; +import { computed, nextTick, onMounted, ref, watch } from 'vue'; import { SupervisorPublished, supervisorPublishedMap } from '../../lowCode/sqlAmis/types'; import MetricName from './optDlg/MetricName.vue'; import MetricPrompt from './optDlg/MetricPrompt.vue'; import * as agentGroupApi from '/@/api/ai/agentGroup'; import * as metricApi from '/@/api/metrics'; -import { updatePublishStatus } from '/@/api/supervisorAdmin'; import Chat from '/@/components/chat/Chat.vue'; -import AMContainer from '/@/components/layout/AMContainer.vue'; +import AHMContainer from '/@/components/layout/AHMContainer.vue'; import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue'; -import { usePageDisplay } from '/@/hooks/usePageDisplay'; import { useQueryTable } from '/@/hooks/useQueryTable'; +import { useSearch } from '/@/hooks/useSearch'; import { useCompRef } from '/@/utils/types'; -import { convertListToTree } from '/@/utils/util'; - +import { convertListToTree, debounce } from '/@/utils/util'; +import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics'; //#region ====================== 宸︿晶鏍戞暟鎹紝tree init ====================== const leftTreeRef = useCompRef(LeftTreeByMgr); const treeLoading = ref(false); const listData = ref([]); const currentListID = computed(() => currentNode.value?.group_id); const currentNode = ref(null); - const listTreeData = computed(() => { - const result = convertListToTree(listData.value, { + const byParentData = convertListToTree(listData.value, { 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); + } }); return result; }); @@ -269,15 +160,7 @@ leftTreeRef.value?.treeRef.setCurrentKey(data.id); }); currentNode.value = data; - if (data.children.length > 0) { - // 濡傛灉鏄埗鑺傜偣锛岃烦杞埌鐖惰妭鐐归〉闈� - tableHasChildren.value = true; - getTableData(); - } else { - // 濡傛灉鏄瓙鑺傜偣锛岃烦杞埌瀛愯妭鐐归〉闈� - tableHasChildren.value = false; - getNodeTableData(); - } + getTableData(); }; const getListTreeData = async () => { const res = await agentGroupApi.getSceneGroupTreeByPost(); @@ -291,137 +174,48 @@ } }; //#endregion -//#region ====================== 琛ㄦ牸鏁版嵁锛宼able init ====================== +//#region ====================== 鎸囨爣绠$悊琛ㄦ牸鏁版嵁锛宼able init ====================== const tableLoading = ref(false); const tableData = ref([]); const isDragStatus = ref(false); +const metricStatus = ref(false); const allTableData = ref(null); const getTableData = async () => { if (!allTableData.value) { const res = await metricApi.getMetricAgentListByPost(); allTableData.value = (res.values || []).map((item) => { item.create_time = item.create_time?.slice(0, 10); - return item; }); } - - tableData.value = allTableData.value.filter((item) => item.agent_group === currentListID.value); + tableData.value = allTableData.value; }; //#endregion - //#region ====================== 琛ㄦ牸鏌ヨ銆佹帓搴忥紝search form init ====================== - const queryParams = ref({ title: '', }); -const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => { - displayTableData.value = tableData.value; +const { query: queryTerminology, queryData: showQuotaList } = useSearch(tableData, queryParams); +const displayTableData = computed(() => { + const result = showQuotaList.value.filter((item) => item.agent_group == currentListID.value); + return result ?? []; }); - -//#endregion -//#region ====================== tab鍒囨崲鏁版嵁婧� ====================== -const activeTabName = ref('dataset'); -const tableHasChildren = ref(false); -const handleClick = (tabName) => { - activeTabName.value = tabName; -}; - -//#endregion -//#region ====================== 鏁版嵁瀵硅薄绠$悊 ====================== -const tagObjectDData = ref([]); -//#endregion -//#region ====================== 鏈绠$悊 ====================== -const terminologyData = ref([]); -//#endregion -//#region ====================== 鏉冮檺绠$悊 ====================== -const permissionForm = ref({ - accessPermissions: '', - byOrganization: '', - byIndividual: '', -}); -const accessPermissionsData = ref([]); -const byOrganizationData = ref([]); -const byIndividualData = ref([]); -//#endregion -//#region ====================== 妯″瀷绠$悊(娌℃湁鐖惰妭鐐�) ====================== -const activeModelName = ref('modelName'); -const canvasRadio = ref('canvas_list'); -const deleteModelData = (row) => {}; -const getNodeTableData = () => {}; -//#endregion -//#region ====================== 鏌ヨ蹇嵎閿� ====================== -const queryFormRef = ref(null); -const pressEnterSearch = (ev: KeyboardEvent) => { - if (ev.key === 'Enter') { - handleQueryTable(); - } -}; -usePageDisplay( - () => { - queryFormRef.value?.$el?.addEventListener('keypress', pressEnterSearch); - }, - () => { - queryFormRef.value?.$el?.removeEventListener('keypress', pressEnterSearch); +const terminologyQuery = debounce(queryTerminology); +watch( + () => queryParams.value.title, + (val) => { + terminologyQuery(); } ); +const { resetQuery } = useQueryTable(tableData, queryParams, () => { + showQuotaList.value = tableData.value; +}); //#endregion - -//#region ====================== 娣诲姞淇敼鎿嶄綔 ====================== -const optDlgIsShow = ref(false); -const optDlgMapRow = ref(null); -const openOptDlg = (row?: any) => { - optDlgMapRow.value = row; - optDlgIsShow.value = true; -}; - -const updateOpt = (formValue) => { - const foundIndex = tableData.value.findIndex((item) => item.id === formValue.id); - if (foundIndex > -1) { - tableData.value[foundIndex] = { - ...tableData.value[foundIndex], - ...formValue, - }; - } -}; - -const insertOpt = (newData) => { - tableData.value.unshift({ ...newData, published: SupervisorPublished.N }); -}; +//#region ====================== 妯″瀷绠$悊(娌℃湁鐖惰妭鐐�) ====================== +const canvasRadio = ref('canvas_list'); +const getNodeTableData = () => {}; //#endregion - -const updatePublishedById = (id: string, published: SupervisorPublished) => { - const row = tableData.value.find((item) => item.id === id); - if (row) { - row.published = published; - } -}; -//#region ====================== 鏀瑰彉鍙戝竷鐘舵�� ====================== -const publishStatusChange = async (published: SupervisorPublished, id, index) => { - const res = await updatePublishStatus( - { - id: id, - publish: published, - }, - { - loading: false, - } - ); - const origin = published === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y; - const final = res.publish ?? origin; - if (final === origin) { - ElMessage.warning('鎿嶄綔澶辫触' + (res.fail_msg ? `锛�${res.fail_msg}` : '')); - return; - } - - tableData.value[index].published = final; - - published === SupervisorPublished.Y ? ElMessage.success('鍙戝竷鎴愬姛') : ElMessage.info('宸插彇娑堝彂甯�'); -}; -//#endregion - //#region ====================== Chat 娴嬭瘯 ====================== - const chatRef = useCompRef(Chat); const chatTestMapRow = ref(null); const chatTestIsShow = ref(false); @@ -430,9 +224,6 @@ chatTestIsShow.value = true; nextTick(() => { chatRef.value.clear(); - // setTimeout(() => { - // chatRef.value.autoSend(row.title); - // }, 30); }); }; @@ -440,12 +231,8 @@ chatTestMapRow.value = null; chatTestIsShow.value = false; }; - const draggableChatRef = ref<HTMLElement | null>(null); const chatDragHandlerRef = ref<HTMLDivElement>(null); -const chatDragContainerRef = ref<HTMLDivElement>(null); - -// `style` will be a helper computed for `left: ?px; top: ?px;` const { x, y, style } = useDraggable(draggableChatRef, { handle: chatDragHandlerRef, initialValue: { @@ -470,15 +257,6 @@ return res; }; //#endregion - -//#region ====================== 鏇存柊鍙戝竷鐘舵�� ====================== -// useUpdateData({ -// event: 'supervisor.publish', -// updateFun({ id, published }) { -// updatePublishedById(id, published); -// }, -// }); -//#endregion //#region ====================== prompt鏌ョ湅 ====================== const infoDlgIsShow = ref(false); const infoDlgMapRow = ref([]); @@ -495,6 +273,7 @@ metricNameIsShow.value = true; }; //#endregion + onMounted(() => { getListTreeData(); }); -- Gitblit v1.9.3