风格修改

src/assets/icons/fanhui.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12C4 7.58172 7.58172 4 12 4H36C40.4183 4 44 7.58172 44 12V36C44 40.4183 40.4183 44 36 44H12C7.58172 44 4 40.4183 4 36V12Z" fill="#4A5568"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1215 14.0002L21.1215 24.0002L31.1215 34.0002L29.0002 36.1215L16.8789 24.0002L29.0002 11.8789L31.1215 14.0002Z" fill="white"/>
+</svg>

src/views/base/craftManagement/route/bindProcess.vue

@@ -91,8 +91,14 @@
 
             <Panel class="process-panel" position="top-right">
               <div class="layout-panel">
+                <button title="蛇形排列" @click="layoutGraph('TB')">
+                  <PannelIcon name="liucheng" />
+                </button>
+                <button title="撤回" @click="goBack">
+                  <PannelIcon name="fanhui" />
+                </button>
 
-                <button title="set vertical layout" @click="layoutGraph('TB')">
+                <button title="整齐排列" @click="layoutGraph('TB')">
                   <PannelIcon name="vertical" />
                 </button>
               </div>
@@ -110,6 +116,9 @@
       <div class="detailInfo">
         <el-scrollbar>
           <div class="opBox">
+            <el-button type="success" @click="changeStyle">
+              按钮风格切换
+            </el-button>
             <el-button type="primary" @click="changeEditStatus">{{
               !editStatus ? "切换为工序信息编辑模式" : "切换为工序路线编辑模式"
             }}</el-button>
@@ -121,19 +130,56 @@
           <div v-if="!editStatus && usableStatus">
             <div class="btns">
               <div>
-                <el-button type="primary" @click="saveFlow">保存</el-button>
+                <el-button
+                  type="primary"
+                  @click="saveFlow"
+                  :class="styleStatus == true ? 'showStyle' : ''"
+                >
+                  <span :class="styleStatus == true ? 'fontStyle' : ''"
+                    >保</span
+                  >
+                  <span :class="styleStatus == true ? 'fontStyle' : ''">
+                    &nbsp;
+                  </span>
+                  <span :class="styleStatus == true ? 'fontStyle' : ''"
+                    >存</span
+                  >
+                </el-button>
               </div>
               <div>
-                <el-button type="danger" v-if="cancelStatus" @click="cancelFlow"
-                  >取消</el-button
+                <el-button
+                  type="danger"
+                  v-if="cancelStatus"
+                  :class="styleStatus == true ? 'showStyle' : ''"
+                  @click="cancelFlow"
                 >
+                  <span :class="styleStatus == true ? 'fontStyle' : ''"
+                    >取</span
+                  >
+                  <span :class="styleStatus == true ? 'fontStyle' : ''">
+                    &nbsp;
+                  </span>
+                  <span :class="styleStatus == true ? 'fontStyle' : ''"
+                    >消</span
+                  >
+                </el-button>
               </div>
               <div>
                 <el-button
                   type="info"
                   v-if="selectNode || selectLine"
+                  :class="styleStatus == true ? 'showStyle' : ''"
                   @click="deleteFlow"
-                  >删除</el-button
+                >
+                  <span :class="styleStatus == true ? 'fontStyle' : ''"
+                    >删</span
+                  >
+                  <span :class="styleStatus == true ? 'fontStyle' : ''">
+                    &nbsp;
+                  </span>
+                  <span :class="styleStatus == true ? 'fontStyle' : ''"
+                    >除</span
+                  ></el-button
                 >
               </div>
             </div>
@@ -213,6 +259,7 @@ import {
   Grid,
 } from "@element-plus/icons-vue";
 import _ from "lodash-es";
+import { useDebounceFn } from "@vueuse/core";
 import { VueFlow, useVueFlow, Panel } from "@vue-flow/core";
 import DropzoneBackground from "./components/DropzoneBackground/index.vue";
 import CustomConnectionLine from "./components/CustomConnectionLine/index.vue";
@@ -234,7 +281,12 @@ import { initialEdges, initialNodes } from "./initial-elements";
 defineOptions({
   name: "bindProcess/:id/:prodtCode",
 });
-
+const styleStatus = ref(false);
+const changeStyle = () => {
+  styleStatus.value = !styleStatus.value;
+};
+const goBack = () => {};
+const historyList = ref([]);
 const { capture } = useScreenshot();
 const { layout } = useLayout();
 const instance = useVueFlow();
@@ -512,9 +564,9 @@ const editProComponent = async () => {
 
 // 全局=======
 
-onMounted(() => {
-  loadTreeData();
-  loadProcessesFlow();
+onMounted(async () => {
+  await loadTreeData();
+  await loadProcessesFlow();
   flowBoxScreen();
   window.addEventListener("keydown", handleKeydown);
 });
@@ -558,6 +610,12 @@ async function layoutGraph(direction) {
 </script>
 
 <style lang="scss" scoped>
+.showStyle {
+  transform: translateY(10px) rotate(90deg);
+}
+.fontStyle {
+  transform: rotate(-90deg);
+}
 .binContainer {
   height: calc(100vh - 165px);
   background-color: #f5f7f9;