用户管理页面调整

wujingjing

2025-01-13 0bb7dffa90bfa3bd5ad04b75da9c31d21347c668

 src/views/project/yw/systemManage/metricAgentMgr/MetricAgentMgr.vue

@@ -1,263 +1,233 @@
<template>
   <HMContainer type="card">
   <AHMContainer type="card">
      <template #aside>
         <!-- 目录树 -->
         <LeftTreeByMgr
            v-loading="treeLoading"
            class="h100"
            ref="leftTreeRef"
            :defaultProps="{
               id: 'group_id',
               label: 'group_name',
               children: 'children',
            }"
            defaultExpandAll
            :treedata="listTreeData"
            title-name="场景列表"
            :show-more-operate="false"
            :show-add="false"
            :current-node-key="currentListID"
            :node-icon="() => 'ele-Document'"
            @click="handleClickNode"
         >
         </LeftTreeByMgr>
      </template>
      <template #header>
         <el-form ref="queryFormRef" :inline="true" :model="queryParams">
         <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 />
               <el-input
                  v-model="queryParams.title"
                  style="width: 226.4px"
                  placeholder="标题"
                  clearable
                  @input="() => terminologyQuery()"
               />
            </el-form-item>

            <el-form-item>
               <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
               <el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
               <!-- <el-button icon="ele-Plus" @click="openOptDlg()"> 添加 </el-button> -->
            </el-form-item>
         </el-form>
      </template>
      <template #main>
         <div class="h-full" ref="chatDragContainerRef">
            <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 type="expand" fixed="left">
                  <template #default="scope">
                     <div class="ml-16">
                        <h3>指标页面</h3>
                        <div v-if="scope.row.supervisor">
                           <div class="py-3">
                              页面提示词：<span class="">{{ scope.row.supervisor.prompt }}</span>
                           </div>
                           <el-table class="w-2/3" :data="scope.row.supervisor.args" border>
                              <el-table-column prop="name" label="名称" show-overflow-tooltip> </el-table-column>
                              <el-table-column prop="prompt" label="参数提示词" show-overflow-tooltip> </el-table-column>
                              <el-table-column prop="check" label="缺省值" show-overflow-tooltip> </el-table-column>
                           </el-table>
         <div class="w100 h100">
            <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 type="index" label="序号" width="55" fixed="left" align="center"></el-table-column>

                  <el-table-column prop="title" label="名称" width="300" fixed="left" show-overflow-tooltip> </el-table-column>
                  <el-table-column label="调用方式" prop="inner_call" width="100" show-overflow-tooltip>
                     <template #default="scope">
                        {{ scope.row.inner_call === 'Y' ? '内部' : '外部' }}
                     </template>
                  </el-table-column>

                  <el-table-column label="创建人" prop="create_user" 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-duoweidu !text-[17px] text-blue-400 cursor-pointer"
                                 @click="gotoAgentGraph(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>
                  </template>
               </el-table-column>
               -->
               <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>

                        <!-- <el-tooltip
                           effect="dark"
                           :content="scope.row.published === SupervisorPublished.Y ? '取消发布' : '发布'"
                           placement="top"
                        >
                           <i
                              class="ywifont !text-[20px] cursor-pointer"
                              :class="[
                                 scope.row.published === SupervisorPublished.Y ? 'ywicon-quxiaofabu text-red-400' : 'ywicon-fabu text-blue-400',
                              ]"
                              @click="
                                 publishStatusChange(
                                    scope.row.published === SupervisorPublished.Y ? SupervisorPublished.N : SupervisorPublished.Y,
                                    scope.row.id,
                                    scope.$index
                                 )
                              "
                           ></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="编辑" placement="top">
                           <i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer" @click="openOptDlg(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top">
                           <i
                              class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
                              @click="
                                 () => {
                                    deleteCurrentRow(scope.row, '页面', metricApi.deleteSupervisor, () => {
                                       const foundIndex = tableData.findIndex((item) => item === scope.row);
                                       foundIndex > -1 && tableData.splice(foundIndex, 1);
                                    });
                                 }
                              "
                           ></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>
                  <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat>
               </div>
               <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat>
            </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>
   </HMContainer>
   </AHMContainer>
</template>

<script setup lang="ts">
import { useDraggable } from '@vueuse/core';

import { onMounted, ref } from 'vue';
import { usePageDisplay } from '/@/hooks/usePageDisplay';
import { useQueryTable } from '/@/hooks/useQueryTable';
// import { useTableSort } from '/@/hooks/useTableSort';
// import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
import { ElMessage } from 'element-plus';
import { nextTick } from 'vue';
import * as metricApi from '/@/api/metrics';
import { updatePublishStatus } from '/@/api/supervisorAdmin';
import Chat from '/@/components/chat/Chat.vue';
import { useCompRef } from '/@/utils/types';

import axios, { CancelTokenSource } from 'axios';
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 HMContainer from '/@/components/layout/HMContainer.vue';

//#region ====================== 表格数据，table init ======================
import * as agentGroupApi from '/@/api/ai/agentGroup';
import * as metricApi from '/@/api/metrics';
import Chat from '/@/components/chat/Chat.vue';
import AHMContainer from '/@/components/layout/AHMContainer.vue';
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
import { useQueryTable } from '/@/hooks/useQueryTable';
import { useSearch } from '/@/hooks/useSearch';
import { gotoRoute } from '/@/utils/route';
import { useCompRef } from '/@/utils/types';
import { convertListToTree, debounce, travelTree } 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 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;
});
const handleClickNode = (data) => {
   nextTick(() => {
      leftTreeRef.value?.treeRef.setCurrentKey(data.id);
   });
   currentNode.value = data;
   getTableData();
};
const getListTreeData = async () => {
   const res = await agentGroupApi.getSceneGroupTreeByPost();
   listData.value = res.groups || [];
   const firstListTreeNode = listTreeData.value[0];
   if (firstListTreeNode) {
      handleClickNode(firstListTreeNode);
   } else {
      tableData.value = [];
      currentNode.value = null;
   }
};
//#endregion
//#region ====================== 指标管理表格数据，table init ======================
const tableLoading = ref(false);
const tableData = ref([]);
const isDragStatus = ref(false);
const metricStatus = ref(false);
const allTableData = ref(null);
const getLenById = (data: any[], id: string, value: any) => {
   return data.filter((item) => item.agent_group === id || value.children?.some((treeItem) => treeItem.group_id === item.agent_group))
      .length;
};
const getTableData = async () => {
   const res = await metricApi.getMetricAgentListByPost();
   allTableData.value = (res.values || []).map((item) => {
      item.create_time = item.create_time?.slice(0, 10);

      return item;
   });
   tableData.value = res?.values ?? [];
   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;
      });
      travelTree(listTreeData.value, (value, index, array, parent) => {
         const len = getLenById(allTableData.value, value.group_id, value);
         value.group_name = `${value.group_name} (${len})`;
      });
   }
   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 ====================== 查询快捷键 ======================
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();
   }
);
//#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 });
};
//#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('已取消发布');
};
const { resetQuery } = useQueryTable(tableData, queryParams, () => {
   showQuotaList.value = tableData.value;
});
//#endregion

//#region ====================== Chat 测试 ======================

const chatRef = useCompRef(Chat);
const chatTestMapRow = ref(null);
const chatTestIsShow = ref(false);
@@ -266,9 +236,6 @@
   chatTestIsShow.value = true;
   nextTick(() => {
      chatRef.value.clear();
      // setTimeout(() => {
      //    chatRef.value.autoSend(row.title);
      // }, 30);
   });
};

@@ -276,12 +243,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: {
@@ -306,15 +269,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([]);
@@ -330,9 +284,35 @@
   metricNameMapRow.value = row;
   metricNameIsShow.value = true;
};

const gotoAgentGraph = (row) => {
   gotoRoute({
      name: 'AgentGraph',
      query: {
         id: row.id,
      },
   });
};
//#endregion

onMounted(() => {
   getTableData();
   getListTreeData();
});
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.set-permission {
   padding-block: 16px;
   padding-block-end: 0;
}
.set-form {
   display: block;
   box-sizing: border-box;
   height: 100%;
   padding-block: 16px;
   .set-form-item {
      font-weight: 500;
      color: #667085;
      font-size: 14px;
   }
}
</style>