From f9cba7fdc9d60bbb2eee6d4eeff3556daea3e2ef Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 12 十二月 2024 16:35:25 +0800
Subject: [PATCH] feat(flow): 优化流程编辑功能
---
src/views/project/yw/dataManage/workFlowMgr/WorkFlowIndex.vue | 289 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 190 insertions(+), 99 deletions(-)
diff --git a/src/views/project/yw/dataManage/workFlowMgr/WorkFlowIndex.vue b/src/views/project/yw/dataManage/workFlowMgr/WorkFlowIndex.vue
index 14a7318..ff4dc6d 100644
--- a/src/views/project/yw/dataManage/workFlowMgr/WorkFlowIndex.vue
+++ b/src/views/project/yw/dataManage/workFlowMgr/WorkFlowIndex.vue
@@ -1,6 +1,7 @@
<template>
<AHMContainer type="card">
<template #aside>
+ <!-- 鐩綍鏍� -->
<LeftTreeByMgr
v-loading="treeLoading"
class="h100"
@@ -10,20 +11,18 @@
label: 'group_name',
children: 'children',
}"
- defaultExpandAll
- :treedata="listTreeData"
- 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>
-
<template #header>
- <!-- 鏌ヨ銆侀噸缃�佹帓搴忋�佸鍔犺〃鍗� -->
<el-form :inline="true" :model="queryParams">
<el-form-item label="鍚嶇О" prop="title">
<el-input
@@ -38,11 +37,10 @@
<el-button icon="ele-Refresh" @click="resetQuery">閲嶇疆 </el-button>
<el-button icon="ele-Plus" @click="openOptDlg()" type="primary"> 娣诲姞 </el-button>
</el-form-item>
- </el-form></template
- >
- <template #main
- ><!-- 鏁版嵁灞曠ず琛ㄦ牸 -->
- <div class="flex-auto flex-column h-full" v-if="state.isShowTrendFun">
+ </el-form>
+ </template>
+ <template #main>
+ <div class="flex-auto flex-column h-full">
<el-table
v-loading="workFlowDataLoading"
ref="draggableFormulaTableRef"
@@ -70,11 +68,15 @@
<template #default="scope">
<div class="space-x-2.5">
<el-tooltip effect="dark" content="缂栬緫" placement="top">
- <i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer"></i>
+ <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-ceshi !text-[20px] text-blue-400 cursor-pointer" @click="openChatTest(scope.row)"></i>
</el-tooltip>
<el-tooltip effect="dark" content="宸ヤ綔娴佽璁�" placement="top">
<i class="ywifont ywicon-jiegousheji !text-[15px] text-blue-400 cursor-pointer" @click="gotoFlowDesign(scope.row)"></i>
</el-tooltip>
+
<el-tooltip effect="dark" content="鍒犻櫎" placement="top">
<i
class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
@@ -87,105 +89,125 @@
</el-table>
</div>
</template>
- <OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" :currentListID="currentListID"></OptDlg>
+ <OptDlg
+ v-model="optDlgIsShow"
+ :item="optDlgMapRow"
+ @insert="insertOpt"
+ :currentListID="currentListID"
+ @update="updateOpt"
+ ></OptDlg>
+ <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>
</AHMContainer>
</template>
<script setup lang="ts">
+import { useDraggable } from '@vueuse/core';
+import type { CancelTokenSource } from 'axios';
+import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
-import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
import OptDlg from './optDlg/OptDlg.vue';
import * as agentGroupApi from '/@/api/ai/agentGroup';
-import { delete_workflow_agent, get_workflow_agent_list } from '/@/api/workflow/index';
+import { check_workflow_agent_validate, delete_workflow_agent, get_workflow_agent_list } from '/@/api/workflow/index';
+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 { useCompRef } from '/@/utils/types';
-import { convertListToTree, debounce } from '/@/utils/util';
+import { convertListToTree, debounce, travelTree } from '/@/utils/util';
import { SupervisorPublished, supervisorPublishedMap } from '/@/views/project/yw/lowCode/sqlAmis/types';
import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics';
import { gotoRoute } from '/@/utils/route';
import router from '/@/router';
-const state = reactive({
- tableParams: {
- PageIndex: 1,
- PageSize: 10,
- },
- tableTotal: 0,
- isShowTrendFun: true,
- showViewBack: false,
- detailTitle: '',
-});
//#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;
+ tableData.value = data.sampleList;
+};
+//#endregion
+//#region ====================== 宸ヤ綔娴佸垪琛� ======================
+const workFlowDataLoading = ref(false);
+const isFormulaTableDrag = ref(false);
+const workFlowTableData = ref([]);
+const tableData = ref([]);
+//鑾峰彇鍦烘櫙list
+const initData = async () => {
+ const [treeData, workData] = await Promise.all([agentGroupApi.getSceneGroupTreeByPost(), get_workflow_agent_list()]);
+ const tree_Data = treeData.groups ?? [];
+ const work_Data = workData.values ?? [];
+ let result = [];
+ let new_tree_Data = [];
+ tree_Data.forEach((node, index) => {
+ if (node.group_type == OptClassificationMap[classificationEnum.Knowledge]) {
+ new_tree_Data.push(node);
+ }
+ });
+
+ new_tree_Data.forEach((node, index) => {
+ node.sampleList = [];
+ work_Data.forEach((work, index) => {
+ if (node.group_id == work.agent_group) {
+ let work_obj = {
+ ...work,
+ published: work.published,
+ create_user: work.create_user,
+ create_time: work.create_time,
+ prompt: work.supervisor.prompt,
+ note: work.note,
+ };
+ node.sampleList.push(work_obj);
+ }
+ });
+ 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.Knowledge]) {
- result.push(item);
+ if (item.children && item.children.length > 0) {
+ item.children.forEach((child_node) => {
+ item.sampleList = item.sampleList.concat(child_node.sampleList);
+ });
}
- });
- return result;
-});
+ result.push(item);
-const handleClickNode = (data) => {
- nextTick(() => {
- leftTreeRef.value?.treeRef.setCurrentKey(data.id);
+ item.group_name = `${item.group_name} (${item.sampleList.length})`;
});
- currentNode.value = data;
- getWorkFlowData();
+ listLeftData.value = byParentData;
+ const firstListTreeNode = byParentData[0];
+ tableData.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 {
- tableData.value = [];
- currentNode.value = null;
- }
-};
-//#endregion
-//#region ====================== 鑾峰彇銆佸垹闄よ〃鏍兼暟鎹� ======================
-const workFlowDataLoading = ref(false);
-const workFlowTableData = ref([]);
-const tableData = ref([]);
-const isFormulaTableDrag = ref(false);
-const getWorkFlowData = async () => {
- workFlowDataLoading.value = true;
- const res = await get_workflow_agent_list().finally(() => {
- workFlowDataLoading.value = false;
- });
- if (res?.json_ok) {
- const resData = res.values ?? [];
- resData.forEach((item) => {
- item.published = item.published;
- item.create_time = item.create_time.slice(0, 19);
- item.prompt = item.supervisor.prompt;
- item.note = item.note;
- item.create_user = item.create_user;
- });
- workFlowTableData.value = resData;
- } else {
- workFlowDataLoading.value = false;
- ElMessage.error('鑾峰彇宸ヤ綔娴佸垪琛ㄥけ璐�' + (res?.json_msg ? `锛�${JSON.stringify(res.json_msg)}` : ''));
- }
- tableData.value = workFlowTableData.value.filter(
- (item) =>
- item.agent_group === currentListID.value ||
- currentNode.value.children?.some((treeItem) => treeItem.group_id === item.agent_group)
- );
-};
+
const deleteCurrentFormulaRow = (row: any) => {
ElMessageBox.confirm(`纭畾鍒犻櫎宸ヤ綔娴侊細銆�${row.title}銆�?`, '鎻愮ず', {
confirmButtonText: '纭畾',
@@ -205,20 +227,11 @@
}
});
};
-//#endregion
-//#region ====================== 娣诲姞淇敼鎿嶄綔 ======================
-const optDlgIsShow = ref(false);
-const optDlgMapRow = ref(null);
-const openOptDlg = (row?: any) => {
- optDlgMapRow.value = row;
- optDlgIsShow.value = true;
+
+const changeExample = (item) => {
+ openChatTest(item);
};
-const updateOpt = (formValue) => {};
-//鏂板涓�鏉′俊鎭�
-const insertOpt = (newData) => {
- tableData.value.unshift({ ...newData });
-};
//#endregion
//#region ====================== 琛ㄦ牸鏌ヨ銆佹帓搴忥紝search form init ======================
@@ -229,6 +242,74 @@
displayTableData.value = tableData.value;
});
const debounceQueryTable = debounce(handleQueryTable, 400);
+//#endregion
+//#region ====================== 娣诲姞淇敼鎿嶄綔 ======================
+const optDlgIsShow = ref(false);
+const optDlgMapRow = ref(null);
+const openOptDlg = (row?: any) => {
+ optDlgMapRow.value = row;
+ optDlgIsShow.value = true;
+};
+
+const updateOpt = (formValue) => {
+ travelTree(tableData.value, (value, index, array) => {
+ if (value.group_id === formValue.group_id) {
+ array[index] = {
+ ...array[index],
+ ...formValue,
+ };
+ return true;
+ }
+ });
+};
+//鏂板涓�鏉′俊鎭�
+const insertOpt = (newData) => {
+ tableData.value.unshift({ ...newData });
+};
+//#endregion
+
+//#region ====================== Chat 娴嬭瘯 ======================
+const chatRef = useCompRef(Chat);
+const chatTestMapRow = ref(null);
+const chatTestIsShow = ref(false);
+const openChatTest = (row) => {
+ chatTestMapRow.value = row;
+ chatTestIsShow.value = true;
+ nextTick(() => {
+ chatRef.value.clear();
+ });
+};
+
+const closeChatTest = () => {
+ chatTestMapRow.value = null;
+ chatTestIsShow.value = false;
+};
+
+const draggableChatRef = ref<HTMLElement | null>(null);
+const chatDragHandlerRef = ref<HTMLDivElement>(null);
+const { x, y, style } = useDraggable(draggableChatRef, {
+ handle: chatDragHandlerRef,
+ initialValue: {
+ x: document.body.clientWidth / 2 - 350,
+ y: document.body.clientHeight / 2 - 400,
+ },
+});
+
+const questionAi = async (text, sourceObj: { source: CancelTokenSource }) => {
+ const currentSource = axios.CancelToken.source();
+ sourceObj.source = currentSource;
+ const res = await check_workflow_agent_validate(
+ {
+ agent_id: chatTestMapRow.value.id,
+ question: text,
+ },
+ {
+ loading: false,
+ cancelToken: currentSource.token,
+ }
+ );
+ return res;
+};
//#endregion
//#region ====================== 宸ヤ綔娴佽璁� ======================
@@ -242,14 +323,24 @@
};
//#endregion
-//#region ====================== 鎸傝浇鏃惰幏鍙栧垵濮嬫暟鎹� ======================
-onMounted(() => {
- getListTreeData();
+onMounted(async () => {
+ initData();
});
-//#endregion
</script>
<style scoped lang="scss">
-:deep(.el-card__body) {
- padding-bottom: unset;
+.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>
--
Gitblit v1.9.3