|
@@ -44,14 +44,14 @@
|
|
|
<el-button type="primary" link @click="handleSave" class="mr-8px"
|
|
|
><img class="w-1em mr-4px" :src="saveImg" />保存</el-button
|
|
|
>
|
|
|
- <!-- <el-tooltip content="添加">
|
|
|
+ <el-tooltip content="添加">
|
|
|
<el-button
|
|
|
type="default"
|
|
|
circle
|
|
|
:icon="CirclePlusFilled"
|
|
|
@click="addNode"
|
|
|
/>
|
|
|
- </el-tooltip> -->
|
|
|
+ </el-tooltip>
|
|
|
<el-tooltip content="详情">
|
|
|
<el-button
|
|
|
type="default"
|
|
@@ -98,31 +98,31 @@
|
|
|
</div> -->
|
|
|
</div>
|
|
|
|
|
|
- <ConfigDrawer ref="configDrawerRef" @ok="handleConfigOk"/>
|
|
|
+ <ConfigDrawer ref="configDrawerRef" @ok="handleConfigOk" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, defineExpose, reactive, defineProps, watch } from "vue";
|
|
|
+import { ref, defineExpose, reactive, defineProps, watch } from 'vue';
|
|
|
import {
|
|
|
Aim,
|
|
|
- // CirclePlusFilled,
|
|
|
+ CirclePlusFilled,
|
|
|
// Close,
|
|
|
InfoFilled,
|
|
|
Search,
|
|
|
ZoomIn,
|
|
|
ZoomOut,
|
|
|
-} from "@element-plus/icons-vue";
|
|
|
-import type { MindMapInstance } from "@/components/mindmap/Mindmap.vue";
|
|
|
-import type { FormInstance } from "element-plus";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
-import { bfsWalk, walk } from "simple-mind-map/src/utils";
|
|
|
+} from '@element-plus/icons-vue';
|
|
|
+import type { MindMapInstance } from '@/components/mindmap/Mindmap.vue';
|
|
|
+import type { FormInstance } from 'element-plus';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+import { bfsWalk, walk } from 'simple-mind-map/src/utils';
|
|
|
// import { useEditBomStore } from "@/store/editbom";
|
|
|
|
|
|
-import Mindmap from "@/components/mindmap/Mindmap.vue";
|
|
|
-import ConfigDrawer from "./ConfigDrawer.vue";
|
|
|
-import AutoIcon from "@/assets/auto.svg";
|
|
|
-import saveImg from "@/assets/save.svg";
|
|
|
-import { BOMItem } from "./data";
|
|
|
+import Mindmap from '@/components/mindmap/Mindmap.vue';
|
|
|
+import ConfigDrawer from './ConfigDrawer.vue';
|
|
|
+import AutoIcon from '@/assets/auto.svg';
|
|
|
+import saveImg from '@/assets/save.svg';
|
|
|
+import { BOMItem } from './data';
|
|
|
|
|
|
const props = defineProps<{
|
|
|
defaultOpen?: boolean;
|
|
@@ -134,33 +134,36 @@ const visible = ref(!!props.defaultOpen);
|
|
|
const mindmapRef = ref<MindMapInstance>();
|
|
|
const configDrawerRef = ref();
|
|
|
const formRef = ref<FormInstance>();
|
|
|
+const delIds = ref<string[]>([]); // 记录删除的节点id
|
|
|
// const editBomStore = useEditBomStore();
|
|
|
const data = ref(
|
|
|
props?.defaultData || {
|
|
|
- id: "root",
|
|
|
+ id: 'root',
|
|
|
data: {
|
|
|
- name: "根节点",
|
|
|
+ name: '根节点',
|
|
|
},
|
|
|
children: [],
|
|
|
}
|
|
|
);
|
|
|
|
|
|
// 1、初次读取本地缓存配置
|
|
|
-const defaultConfig = JSON.parse(localStorage.getItem("mindmap-config") || "{}");
|
|
|
+const defaultConfig = JSON.parse(
|
|
|
+ localStorage.getItem('mindmap-config') || '{}'
|
|
|
+);
|
|
|
const formData = reactive({
|
|
|
level: defaultConfig?.level,
|
|
|
- layout: defaultConfig?.layout ?? "logicalStructure",
|
|
|
- search: defaultConfig?.search || "",
|
|
|
+ layout: defaultConfig?.layout ?? 'logicalStructure',
|
|
|
+ search: defaultConfig?.search || '',
|
|
|
});
|
|
|
|
|
|
// 2、监听配置项变化,保存到本地缓存
|
|
|
watch(
|
|
|
() => formData,
|
|
|
(val) => {
|
|
|
- localStorage.setItem("mindmap-config", JSON.stringify(val));
|
|
|
+ localStorage.setItem('mindmap-config', JSON.stringify(val));
|
|
|
},
|
|
|
{
|
|
|
- deep: true
|
|
|
+ deep: true,
|
|
|
}
|
|
|
);
|
|
|
|
|
@@ -179,7 +182,7 @@ const changeLayout = (value: string) => {
|
|
|
const mindmap = mindmapRef.value?.getInstance();
|
|
|
mindmap?.setLayout(value);
|
|
|
let fited = false;
|
|
|
- mindmap?.on("node_tree_render_end", () => {
|
|
|
+ mindmap?.on('node_tree_render_end', () => {
|
|
|
// @ts-ignore
|
|
|
!fited && mindmap?.view?.fit();
|
|
|
fited = true;
|
|
@@ -189,7 +192,7 @@ const changeLayout = (value: string) => {
|
|
|
// 切换层级
|
|
|
const changeLevel = (level: number) => {
|
|
|
const mindmap = mindmapRef.value?.getInstance();
|
|
|
- mindmap?.execCommand("UNEXPAND_TO_LEVEL", level);
|
|
|
+ mindmap?.execCommand('UNEXPAND_TO_LEVEL', level);
|
|
|
};
|
|
|
|
|
|
const autoFit = () => {
|
|
@@ -202,7 +205,7 @@ const autoFit = () => {
|
|
|
const openNodeDetail = () => {
|
|
|
const activeList = mindmapRef.value?.getActiveNodeList();
|
|
|
if (!activeList?.length) {
|
|
|
- ElMessage.warning("请选择查看节点");
|
|
|
+ ElMessage.warning('请选择查看节点');
|
|
|
return;
|
|
|
}
|
|
|
configDrawerRef.value.open(activeList[0].nodeData);
|
|
@@ -221,23 +224,23 @@ const handleZoom = (num: number) => {
|
|
|
};
|
|
|
|
|
|
// 添加节点
|
|
|
-// const addNode = () => {
|
|
|
-// const mindmap = mindmapRef.value?.getInstance();
|
|
|
-// const activeList = mindmapRef.value?.getActiveNodeList();
|
|
|
-// if (!activeList?.length) {
|
|
|
-// ElMessage.warning("请选择父节点");
|
|
|
-// return;
|
|
|
-// }
|
|
|
+const addNode = () => {
|
|
|
+ const mindmap = mindmapRef.value?.getInstance();
|
|
|
+ const activeList = mindmapRef.value?.getActiveNodeList();
|
|
|
+ if (!activeList?.length) {
|
|
|
+ ElMessage.warning('请选择父节点');
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
-// mindmap?.execCommand("INSERT_CHILD_NODE");
|
|
|
-// };
|
|
|
+ mindmap?.execCommand('INSERT_CHILD_NODE');
|
|
|
+};
|
|
|
|
|
|
// 搜索
|
|
|
const handleSearch = () => {
|
|
|
const result: any[] = [];
|
|
|
const mindmap = mindmapRef.value?.getInstance();
|
|
|
const data = mindmap?.getData(false);
|
|
|
- mindmap?.execCommand("CLEAR_ACTIVE_NODE");
|
|
|
+ mindmap?.execCommand('CLEAR_ACTIVE_NODE');
|
|
|
bfsWalk(data, (node: any) => {
|
|
|
if (node.data?.name?.includes(formData.search)) {
|
|
|
result.push(node);
|
|
@@ -249,18 +252,20 @@ const handleSearch = () => {
|
|
|
result.forEach((node) => {
|
|
|
mindmap?.renderer?.expandToNodeUid(node.data?.uid);
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
setTimeout(() => {
|
|
|
- const list = result.map((node) => mindmap?.renderer.findNodeByUid(node.data?.uid));
|
|
|
+ const list = result.map((node) =>
|
|
|
+ mindmap?.renderer.findNodeByUid(node.data?.uid)
|
|
|
+ );
|
|
|
mindmap?.renderer?.activeMultiNode(list);
|
|
|
}, 300);
|
|
|
} else {
|
|
|
- ElMessage.warning("未找到节点");
|
|
|
+ ElMessage.warning('未找到节点');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleNodeDbClick = (node: any) => {
|
|
|
- console.log("handleNodeDbClick", node);
|
|
|
+ console.log('handleNodeDbClick', node);
|
|
|
if (node.isRoot) return;
|
|
|
configDrawerRef.value.open(node.nodeData);
|
|
|
};
|
|
@@ -275,7 +280,7 @@ const handleConfigOk = (updateNodeData: any) => {
|
|
|
}
|
|
|
});
|
|
|
mindmap?.updateData(allData);
|
|
|
-}
|
|
|
+};
|
|
|
// 保存
|
|
|
const handleSave = () => {
|
|
|
const mindmap = mindmapRef.value?.getInstance();
|
|
@@ -289,6 +294,7 @@ const handleSave = () => {
|
|
|
delete node.data.isActive;
|
|
|
delete node.data.richText;
|
|
|
delete node.data.text;
|
|
|
+ delete node.data.id;
|
|
|
// TODO: 业务校验
|
|
|
if (!node.data.name?.trim()) {
|
|
|
valid = false;
|
|
@@ -296,56 +302,68 @@ const handleSave = () => {
|
|
|
});
|
|
|
|
|
|
if (!valid) {
|
|
|
- ElMessage.error("请检查数据是否填写完整!");
|
|
|
+ ElMessage.error('请检查数据是否填写完整!');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- console.log("保存数据:", data);
|
|
|
try {
|
|
|
window.parent?.BpmTools?.program(
|
|
|
{
|
|
|
- interfaceCode: "Common.doSaveBOMAiImageData",
|
|
|
- model: data,
|
|
|
+ interfaceCode: 'Common.doSaveBOMAiImageData',
|
|
|
+ model: {
|
|
|
+ data,
|
|
|
+ del_ids: delIds.value, // 传递删除的节点id
|
|
|
+ },
|
|
|
},
|
|
|
(res: any) => {
|
|
|
- console.log("保存结果:", res);
|
|
|
- ElMessage.success("保存成功!");
|
|
|
+ console.log('保存结果:', res);
|
|
|
+ ElMessage.success('保存成功!');
|
|
|
}
|
|
|
);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
- ElMessage.error("保存失败!");
|
|
|
+ ElMessage.error('保存失败!');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 数据变化 处理新增数据
|
|
|
const handleDataChange = (newData: any) => {
|
|
|
+ // 新增数据
|
|
|
const addItem = newData?.find((item: any) => item.action === 'create');
|
|
|
- if (addItem) {
|
|
|
+ if (addItem && !addItem.data.data?.name) {
|
|
|
const newItemData = new BOMItem();
|
|
|
- console.log("新增数据:", addItem);
|
|
|
delete addItem.data.data.text;
|
|
|
const newNodeData = {
|
|
|
...(addItem?.data || {}),
|
|
|
data: {
|
|
|
...newItemData,
|
|
|
- ...addItem?.data?.data
|
|
|
- }
|
|
|
+ ...addItem?.data?.data,
|
|
|
+ },
|
|
|
};
|
|
|
- handleConfigOk(newNodeData);
|
|
|
+ handleConfigOk(newNodeData.data);
|
|
|
configDrawerRef.value.open(newNodeData, 'add');
|
|
|
}
|
|
|
+ // 处理删除数据
|
|
|
+ const delItems = newData?.filter((item: any) => item.action === 'delete');
|
|
|
+ delItems?.forEach((item: any) => {
|
|
|
+ const id = item?.data?.data?.id;
|
|
|
+ if (id) {
|
|
|
+ delIds.value.push(id);
|
|
|
+ }
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
watch(
|
|
|
() => props?.defaultData,
|
|
|
(val) => {
|
|
|
// 设置初始化加载层级
|
|
|
- walk(val, null, (node: any, _p: any, _isRoot: any, layerIndex: number) => {
|
|
|
- if (formData.level && (layerIndex >= formData.level)) {
|
|
|
- node.data.expand = false;
|
|
|
- }
|
|
|
- });
|
|
|
+ walk(val, null, (node: any, _p: any, _isRoot: any, layerIndex: number) => {
|
|
|
+ node.data.id = node?.id;
|
|
|
+ if (formData.level && layerIndex >= formData.level) {
|
|
|
+ node.data.expand = false;
|
|
|
+ }
|
|
|
+ delIds.value = [];
|
|
|
+ });
|
|
|
data.value = val;
|
|
|
}
|
|
|
);
|