<template>
|
<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 :inline="true" :model="queryParams">
|
<el-form-item label="名称" prop="title">
|
<el-input
|
v-model="queryParams.title"
|
style="width: 226.4px"
|
placeholder="文件名称"
|
clearable
|
@input="debounceQueryTable"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<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-table
|
v-loading="workFlowDataLoading"
|
ref="draggableFormulaTableRef"
|
border
|
row-key="id"
|
class="flex-auto"
|
:row-class-name="isFormulaTableDrag ? 'cursor-move' : 'cursor-pointer'"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTableData"
|
highlight-current-row
|
>
|
<el-table-column prop="title" label="工作流名称" fixed="left" show-overflow-tooltip align="left" />
|
<el-table-column prop="prompt" width="280" label="工作流提示" show-overflow-tooltip align="center"> </el-table-column>
|
<el-table-column prop="published" width="120" label="发布状态" show-overflow-tooltip align="center">
|
<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 prop="create_user" width="100" label="创建者" show-overflow-tooltip align="center" />
|
<el-table-column prop="create_time" width="180" label="创建时间" show-overflow-tooltip align="center" />
|
<el-table-column prop="note" width="180" label="说明" show-overflow-tooltip align="center" />
|
<el-table-column label="操作" width="120" fixed="right" show-overflow-tooltip align="center">
|
<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>
|
</el-tooltip>
|
<el-tooltip effect="dark" content="删除" placement="top">
|
<i
|
class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
|
@click="deleteCurrentFormulaRow(scope.row)"
|
></i>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" :currentListID="currentListID"></OptDlg>
|
</AHMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { computed, nextTick, onMounted, reactive, 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 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 { SupervisorPublished, supervisorPublishedMap } from '/@/views/project/yw/lowCode/sqlAmis/types';
|
import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics';
|
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 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.Knowledge]) {
|
result.push(item);
|
}
|
});
|
return result;
|
});
|
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.id);
|
});
|
currentNode.value = data;
|
getWorkFlowData();
|
};
|
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: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await delete_workflow_agent({
|
agent_id: row.id,
|
});
|
|
if (res.json_ok) {
|
ElMessage.success('删除工作流成功');
|
const index = tableData.value.findIndex((d) => d.id === row.id);
|
tableData.value.splice(index, 1);
|
} else {
|
ElMessage.error('删除工作流失败' + (res?.json_msg ? `，${JSON.stringify(res.json_msg)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
//#region ====================== 添加修改操作 ======================
|
const optDlgIsShow = ref(false);
|
const optDlgMapRow = ref(null);
|
const openOptDlg = (row?: any) => {
|
optDlgMapRow.value = row;
|
optDlgIsShow.value = true;
|
};
|
|
const updateOpt = (formValue) => {};
|
//新增一条信息
|
const insertOpt = (newData) => {
|
tableData.value.unshift({ ...newData });
|
};
|
//#endregion
|
//#region ====================== 表格查询、排序，search form init ======================
|
|
const queryParams = ref({
|
title: '',
|
});
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => {
|
displayTableData.value = tableData.value;
|
});
|
const debounceQueryTable = debounce(handleQueryTable, 400);
|
//#endregion
|
|
//#region ====================== 挂载时获取初始数据 ======================
|
onMounted(() => {
|
getListTreeData();
|
});
|
//#endregion
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-card__body) {
|
padding-bottom: unset;
|
}
|
</style>
|
