<template>
|
<div class="h-14 flex justify-between px-2 border border-solid border-x-0 border-t-0 border-gray-300">
|
<div class="flex-items-center">
|
<span class="ywifont ywicon-pre p-1.5 bg-white rounded-lg mr-4 shadow cursor-pointer" @click="backMgr"> </span>
|
|
<!-- <img src="@/assets/logo.png" alt="logo" class="h-8 w-8"/> -->
|
<div>
|
<span class="font-bold text-medium">{{ flowAgent?.title }}</span>
|
</div>
|
</div>
|
<div class="flex-items-center">
|
<!-- <el-button>运行</el-button>
|
<el-button>保存</el-button>
|
<el-button type="primary">运行</el-button> -->
|
<el-button @click="handleCommand('export')">导出工作流</el-button>
|
<el-button @click="handleCommand('import')">导入工作流</el-button>
|
<el-button type="danger" @click="clearGraph">清空画布</el-button>
|
|
<el-button type="primary" @click="saveFlow">保存</el-button>
|
<!-- <el-dropdown @command="handleCommand">
|
<el-button style="margin-left: 8px; width: 34px">
|
<el-icon class="el-icon--center">
|
<more-filled />
|
</el-icon>
|
</el-button>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="export">导出</el-dropdown-item>
|
<el-dropdown-item command="import">导入</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown> -->
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useVueFlow } from '@vue-flow/core';
|
import { useFileDialog } from '@vueuse/core';
|
import JSONFormat from 'json-format';
|
import { downloadJSON, elConfirm } from '/@/utils/util';
|
import { gotoRoute } from '/@/utils/route';
|
import { update_workflow_json_flow } from '/@/api/workflow';
|
import { ElMessage } from 'element-plus';
|
const props = defineProps(['queryId', 'flowAgent']);
|
const emit = defineEmits(['export']);
|
const { toObject, fromObject, nodes, edges, removeEdges, removeNodes } = useVueFlow();
|
const { files, open, reset, onCancel, onChange } = useFileDialog({
|
// accept: 'image/*', // Set to accept only image files
|
// 选择 json文件
|
accept: 'application/json',
|
directory: false, // Select directories instead of files if set true
|
});
|
|
const backMgr = () => {
|
gotoRoute({
|
name: 'WorkFlowIndex',
|
});
|
};
|
const clearGraph = async () => {
|
const yes = await elConfirm('确定要清空画布吗？');
|
if (!yes) {
|
return;
|
}
|
removeEdges(edges.value);
|
removeNodes(nodes.value);
|
};
|
const saveFlow = async () => {
|
const obj = toObject();
|
const jsonStr = obj ? JSONFormat(obj) : '';
|
|
const res = await update_workflow_json_flow({
|
agent_id: props.queryId,
|
json_flow: jsonStr,
|
});
|
ElMessage.success('保存成功！');
|
};
|
|
onChange((file) => {
|
console.log(file);
|
// 获取json 中的内容
|
const reader = new FileReader();
|
reader.onload = (e) => {
|
const jsonStr = e.target?.result as string;
|
const json = JSON.parse(jsonStr);
|
fromObject(json)
|
.then((val) => {})
|
.catch((err) => {
|
ElMessage.error('导入失败' + err);
|
});
|
};
|
reader.readAsText(file[0]);
|
});
|
const handleCommand = (command: string | number | object) => {
|
const obj = toObject();
|
|
if (command === 'export') {
|
const jsonStr = obj ? JSONFormat(obj) : '';
|
downloadJSON(jsonStr, 'flow');
|
} else if (command === 'import') {
|
open();
|
}
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
