历史记录

src/views/manage/app/make/workflow-detail.vue

@@ -0,0 +1,147 @@
+<template>
+  <CzrDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    @onSubmit="onSubmit"
+    width="42.5rem"
+    height="auto"
+    :loading="state.loading"
+  >
+    <div class="bm-form">
+      <CzrForm ref="ref_form" :form-view="isViewCpt" layout="y">
+        <CzrFormColumn
+          required
+          label="工作流名称"
+          :span="24"
+          v-model:param="state.form.name"
+        />
+        <CzrFormColumn
+          label="工作流简介"
+          :span="24"
+          v-model:param="state.form.name"
+          type="textarea"
+          :rows="4"
+        />
+      </CzrForm>
+    </div>
+  </CzrDialog>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
+
+const AppStore = useAppStore()
+const DictionaryStore = useDictionaryStore()
+const DialogStore = useDialogStore()
+const emit = defineEmits(['update:show', 'refresh'])
+const { proxy } = getCurrentInstance()
+const props = defineProps({
+  show: { default: false },
+  transfer: <any>{},
+})
+const state: any = reactive({
+  loading: false,
+  form: {},
+})
+const ref_form = ref()
+const titleCpt = computed(() => {
+  let t = '工作流'
+  switch (props.transfer.mode) {
+    case 'add':
+      t = '创建' + t
+      break
+    case 'edit':
+      t = '编辑' + t
+      break
+    case 'view':
+      t = '查看' + t
+      break
+  }
+  return t
+})
+const isViewCpt = computed(() => props.transfer?.mode === 'view')
+watch(
+  () => props.show,
+  (n) => {
+    if (n) {
+      initDictionary()
+      state.form = {}
+      if (props.transfer.mode !== 'add') {
+        initData()
+      }
+      nextTick(() => {
+        ref_form.value.reset()
+      })
+    }
+  },
+)
+const initData = () => {
+  // state.loading = true
+  // appDetail(props.transfer.id)
+  //   .then(({ data }: any) => {
+  //     state.form = data
+  //     if (data.icon) {
+  //       state.icon = [{ url: data.icon, name: data.icon }]
+  //     }
+  //   })
+  //   .catch(() => {})
+  //   .finally(() => {
+  //     state.loading = false
+  //   })
+}
+const onSubmit = () => {
+  ref_form.value
+    .submit()
+    .then(() => {
+      DialogStore.confirm({
+        content: `请确认是否提交？`,
+        onSubmit: () => {
+          state.loading = true
+          if (props.transfer.mode === 'add') {
+            // appAdd(state.form)
+            //   .then(() => {
+            //     ElMessage.success(`${titleCpt.value}成功！`)
+            //     emit('update:show', false)
+            //     emit('refresh')
+            //   })
+            //   .catch(() => {})
+            //   .finally(() => {
+            //     state.loading = false
+            //   })
+          } else if (props.transfer.mode === 'edit') {
+            // appEdit(state.form)
+            //   .then(() => {
+            //     ElMessage.success(`${titleCpt.value}成功！`)
+            //     emit('update:show', false)
+            //     emit('refresh')
+            //   })
+            //   .catch(() => {})
+            //   .finally(() => {
+            //     state.loading = false
+            //   })
+          }
+        },
+      })
+    })
+    .catch((e) => {
+      ElMessage({
+        message: e[0].message,
+        grouping: true,
+        type: 'warning',
+      })
+    })
+}
+const initDictionary = () => {}
+</script>
+
+<style lang="scss" scoped></style>

src/views/manage/app/make/workflow-select.vue

@@ -71,32 +71,10 @@
         </template>
       </div>
     </div>
-    <CzrDialog
-      :show="state.detail.show"
-      title="创建工作流"
-      @onClose="state.detail.show = false"
-      @onSubmit="onSubmitAdd"
-      width="42.5rem"
-      height="auto"
-    >
-      <div class="bm-form">
-        <CzrForm ref="ref_form" layout="y">
-          <CzrFormColumn
-            required
-            label="工作流名称"
-            :span="24"
-            v-model:param="state.form.name"
-          />
-          <CzrFormColumn
-            label="工作流简介"
-            :span="24"
-            v-model:param="state.form.name"
-            type="textarea"
-            :rows="4"
-          />
-        </CzrForm>
-      </div>
-    </CzrDialog>
+    <detailCom
+      v-model:show="state.detail.show"
+      :transfer="state.detail.transfer"
+    />
   </CzrDialog>
 </template>
 
@@ -117,8 +95,7 @@ import { Search } from '@element-plus/icons-vue'
 import { pluginGetInstanceList } from '@/api/modules/model'
 import { YMDHms } from '@/utils/czr-util'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import detailCom from '@/views/manage/model/detail.vue'
-import { appAdd, appCopy, appEdit } from '@/api/modules/app'
+import detailCom from '@/views/manage/app/make/workflow-detail.vue'
 
 const DialogStore = useDialogStore()
 const DictionaryStore = useDictionaryStore()
@@ -201,7 +178,7 @@ const onPage = (pageNum, pageSize) => {
       params[k] = v
     }
   }
-  state.query.loading = true
+  // state.query.loading = true
   pluginGetInstanceList(params)
     .then(({ data }: any) => {
       state.query.result.total = data.total
@@ -229,39 +206,10 @@ const onSubmit = () => {
 const onView = (row) => {}
 const onAdd = () => {
   state.detail.transfer = {
-    type: 'add',
+    mode: 'add',
   }
   state.detail.show = true
 }
-const onSubmitAdd = () => {
-  ref_form.value
-    .submit()
-    .then(() => {
-      DialogStore.confirm({
-        content: `请确认是否提交？`,
-        onSubmit: () => {
-          // state.loading = true
-          // appAdd(state.form)
-          //   .then(() => {
-          //     ElMessage.success(`${titleCpt.value}成功！`)
-          //     emit('update:show', false)
-          //     emit('refresh')
-          //   })
-          //   .catch(() => {})
-          //   .finally(() => {
-          //     state.loading = false
-          //   })
-        },
-      })
-    })
-    .catch((e) => {
-      ElMessage({
-        message: e[0].message,
-        grouping: true,
-        type: 'warning',
-      })
-    })
-}
 onMounted(() => {
   initDictionary()
 })

src/views/manage/app/workflow/index.vue

@@ -16,7 +16,7 @@
         />
         <div class="text-2xl font-bold text-[#303133]">工作流名称</div>
         <el-tooltip content="编辑" placement="top">
-          <SvgIcon name="czr_edit" class="__hover" />
+          <SvgIcon name="czr_edit" class="__hover" @click="onEdit" />
         </el-tooltip>
         <div class="mx-auto" />
 
@@ -29,6 +29,10 @@
         <workflowGraph />
       </div>
     </div>
+    <detailCom
+      v-model:show="state.detail.show"
+      :transfer="state.detail.transfer"
+    />
   </div>
 </template>
 
@@ -39,10 +43,15 @@ import { debounce } from 'lodash'
 import { ElLoading } from 'element-plus'
 import { YMDHms } from '@/utils/czr-util'
 import workflowGraph from '@/views/workflow/index.vue'
+import detailCom from '@/views/manage/app/make/workflow-detail.vue'
 
 const state: any = reactive({
   autoSaveTimestamp: '',
   form: {},
+  detail: {
+    show: false,
+    transfer: {},
+  },
 })
 watch(
   () => state.form,
@@ -61,6 +70,13 @@ const autoSave = debounce((v) => {
     state.autoSaveTimestamp = YMDHms(new Date())
   }, 1000)
 }, 3000)
+const onEdit = () => {
+  state.detail.transfer = {
+    mode: 'edit',
+    row: {},
+  }
+  state.detail.show = true
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/workflow/chart/index.vue

@@ -193,7 +193,7 @@
             placement="top"
             :show-arrow="false"
           >
-            <div class="__hover-bg" @click="onLayoutAuto">
+            <div class="__hover-bg" @click="onAutoFix">
               <SvgIcon name="mind-map" />
             </div>
           </el-tooltip>
@@ -596,6 +596,7 @@ const initWatch = () => {
   })
   state.graph.on('history:change', ({ cmds, options }) => {
     if (state.isInitEdges) {
+      console.log(cmds, options)
       state.history.canRedo = state.graph.canRedo()
       state.history.canUndo = state.graph.canUndo()
       if (options.name) {
@@ -690,7 +691,8 @@ const onAddNode = ({ type, e }) => {
   const node = state.graph.createNode(handleNode(getNodeDefault(type)))
   state.dnd.start(node, e)
 }
-const onLayoutAuto = () => {
+const onAutoFix = () => {
+  state.graph.startBatch(GraphHistoryStep.AutoFix)
   const xLevelsMap = new Map()
   const nodeSep = 20
   // 布局方向
@@ -743,6 +745,9 @@ const onLayoutAuto = () => {
       }
     })
   })
+  setTimeout(() => {
+    state.graph.stopBatch(GraphHistoryStep.AutoFix)
+  }, 100)
   graphZoom(0)
 }
 watch(

src/views/workflow/types.ts

@@ -114,6 +114,7 @@ export enum GraphHistoryStep {
   EdgeAdd = 'add-edge',
   EdgeDel = 'edge-del',
   Dnd = 'dnd',
+  AutoFix = 'auto-fix',
 }
 
 export const MapGraphHistoryStep = new Map([
@@ -124,6 +125,7 @@ export const MapGraphHistoryStep = new Map([
   [GraphHistoryStep.NodeDel, '块已删除'],
   [GraphHistoryStep.EdgeAdd, '块已连接'],
   [GraphHistoryStep.EdgeDel, '块已断开连接'],
+  [GraphHistoryStep.AutoFix, '自动布局'],
 ])
 
 export enum VarsSource {