fix: 流程市场嵌入画布支持 #7626

# Reviewed, transaction id: 25788

frontend/desktop/src/App.vue

@@ -18,7 +18,7 @@
         />
         <navigation v-if="!hideHeader" :class="['sops-layout-navigation', { 'with-system-notice': hasAlertNotice }]">
             <template slot="page-content">
-                <div :class="['main-container', { 'with-system-notice': hasAlertNotice }]">
+                <div :class="['main-container with-navigation', { 'with-system-notice': hasAlertNotice }]">
                     <router-view v-if="isRouterViewShow"></router-view>
                 </div>
                 <permissionApply
@@ -362,7 +362,10 @@
         }
         .main-container {
             width: 100%;
-            height: calc(100vh - 52px);
+            height: 100vh;
+            &.with-navigation {
+                height: calc(100vh - 52px);
+            }
             &.with-system-notice {
                 height: calc(100vh - 92px);
             }

frontend/desktop/src/constants/routes.js

@@ -13,7 +13,7 @@ const COMMON_ROUTE_LIST = [
             name: i18n.t('流程'),
             icon: 'icon-sitemap-shape',
             hasProjectId: true,
-            subRoutes: ['processHome', 'processCommon', 'processCollect', 'templatePanel', 'projectCommonTemplatePanel'],
+            subRoutes: ['processHome', 'processCommon', 'processCollect', 'templatePanel', 'templatePreview', 'projectCommonTemplatePanel'],
             url: '/template/home/'
         },
         {

frontend/desktop/src/pages/task/ClockedList/EditClockedTask.vue

@@ -18,7 +18,7 @@
                 <NodePreview
                     ref="nodePreview"
                     :preview-data-loading="previewDataLoading"
-                    :canvas-data="formatCanvasData('perview', previewData)"
+                    :canvas-data="canvasData"
                     :preview-bread="previewBread"
                     :preview-data="previewData"
                     :common="false"
@@ -220,6 +220,7 @@
     import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
     import NodePreview from '@/pages/task/NodePreview.vue'
     import NoData from '@/components/common/base/NoData.vue'
+    import { formatCanvasData } from '@/utils/checkDataType'
     export default {
         components: {
             TaskParamEdit,
@@ -414,6 +415,9 @@
             },
             schemeSelectPlaceholder () {
                 return this.formData.template_id && !this.schemeList.length ? i18n.t('此流程无执行方案，无需选择') : i18n.t('请选择')
+            },
+            canvasData () {
+                return formatCanvasData('preview', this.previewData)
             }
         },
         created () {
@@ -701,33 +705,6 @@
                 })
                 return nodes
             },
-            /**
-             * 格式化pipelineTree的数据，只输出一部分数据
-             * @params {Object} data  需要格式化的pipelineTree
-             * @return {Object} {lines（线段连接）, locations（节点默认都被选中）, branchConditions（分支条件）}
-             */
-            formatCanvasData (mode, data) {
-                const { line, location, gateways, activities } = data
-                const branchConditions = {}
-                for (const gKey in gateways) {
-                    const item = gateways[gKey]
-                    if (item.conditions) {
-                        branchConditions[item.id] = Object.assign({}, item.conditions)
-                    }
-                    if (item.default_condition) {
-                        const nodeId = item.default_condition.flow_id
-                        branchConditions[item.id][nodeId] = item.default_condition
-                    }
-                }
-                return {
-                    lines: line,
-                    locations: location.map(item => {
-                        const code = item.type === 'tasknode' ? activities[item.id].component.code : ''
-                        return { ...item, mode, code, status: '' }
-                    }),
-                    branchConditions
-                }
-            },
             /**
              * 点击预览模式下的面包屑
              * @params {String} id  点击的节点id（可能为父节点或其他子流程节点）

frontend/desktop/src/pages/task/PeriodicList/ModifyPeriodicDialog.vue

@@ -29,7 +29,7 @@
                 <NodePreview
                     ref="nodePreview"
                     :preview-data-loading="previewDataLoading"
-                    :canvas-data="formatCanvasData('perview', previewData)"
+                    :canvas-data="canvasData"
                     :preview-bread="previewBread"
                     :preview-data="previewData"
                     :common="isCommon"
@@ -238,6 +238,7 @@
     import NotifyTypeConfig from '@/pages/template/TemplateEdit/TemplateSetting/NotifyTypeConfig.vue'
     import permission from '@/mixins/permission.js'
     import NodePreview from '@/pages/task/NodePreview.vue'
+    import { formatCanvasData } from '@/utils/checkDataType'
 
     export default {
         name: 'ModifyPeriodicDialog',
@@ -403,6 +404,9 @@
             isSelectSchemeDisable () {
                 const { is_latest, template_id } = this.formData
                 return is_latest !== true || !template_id || this.previewDataLoading || !this.schemeList.length
+            },
+            canvasData () {
+                return formatCanvasData('preview', this.previewData)
             }
         },
         created () {
@@ -524,6 +528,8 @@
                         this.formData.schemeId = this.schemeList.length ? [0] : []
                         const templateInfo = this.templateList.find(item => item.id === id)
                         await this.getPreviewNodeData(id, templateInfo.version, true)
+                    } else {
+                        this.previewData = tools.deepClone(this.curRow.pipeline_tree)
                     }
                 } catch (e) {
                     // 判断模板是否为删除
@@ -693,33 +699,6 @@
                 })
                 return nodes
             },
-            /**
-             * 格式化pipelineTree的数据，只输出一部分数据
-             * @params {Object} data  需要格式化的pipelineTree
-             * @return {Object} {lines（线段连接）, locations（节点默认都被选中）, branchConditions（分支条件）}
-             */
-            formatCanvasData (mode, data) {
-                const { line, location, gateways, activities } = data
-                const branchConditions = {}
-                for (const gKey in gateways) {
-                    const item = gateways[gKey]
-                    if (item.conditions) {
-                        branchConditions[item.id] = Object.assign({}, item.conditions)
-                    }
-                    if (item.default_condition) {
-                        const nodeId = item.default_condition.flow_id
-                        branchConditions[item.id][nodeId] = item.default_condition
-                    }
-                }
-                return {
-                    lines: line,
-                    locations: location.map(item => {
-                        const code = item.type === 'tasknode' ? activities[item.id].component.code : ''
-                        return { ...item, mode, code, status: '' }
-                    }),
-                    branchConditions
-                }
-            },
             /**
              * 点击预览模式下的面包屑
              * @params {String} id  点击的节点id（可能为父节点或其他子流程节点）

frontend/desktop/src/pages/task/TaskCreate/TaskParamFill.vue

@@ -178,6 +178,7 @@
         },
         computed: {
             ...mapState({
+                'hideHeader': state => state.hideHeader,
                 'locations': state => state.template.location,
                 'templateName': state => state.template.name,
                 'viewMode': state => state.view_mode,
@@ -572,6 +573,10 @@
                             }
                         }
                         this.$router.push(url)
+                        // 如果被嵌入了，则像父页面发送事件
+                        if (this.hideHeader) {
+                            window.parent.postMessage({ eventName: 'createTaskEvent' }, '*')
+                        }
                     } catch (e) {
                         console.log(e)
                     } finally {

frontend/desktop/src/pages/task/TaskCreate/TaskSelectNode.vue

@@ -32,7 +32,7 @@
                 v-else-if="isPreviewMode"
                 ref="nodePreview"
                 :preview-data-loading="previewDataLoading"
-                :canvas-data="formatCanvasData('perview', previewData)"
+                :canvas-data="previewCanvasData"
                 :preview-bread="previewBread"
                 :preview-data="previewData"
                 :common="common"
@@ -108,6 +108,7 @@
     import NodePreview from '@/pages/task/NodePreview.vue'
     import EditScheme from './EditScheme.vue'
     import tplPerspective from '@/mixins/tplPerspective.js'
+    import { formatCanvasData } from '@/utils/checkDataType'
 
     export default {
         components: {
@@ -173,8 +174,10 @@
                 'infoBasicConfig': state => state.infoBasicConfig
             }),
             canvasData () {
-                const mode = 'select'
-                return this.formatCanvasData(mode, this)
+                return formatCanvasData('select', this)
+            },
+            previewCanvasData () {
+                return formatCanvasData('preview', this.previewData)
             },
             isSelectAllShow () {
                 return this.viewMode === 'app' && this.location.some(item => item.optional)
@@ -317,33 +320,6 @@
                 }
                 this.$router.push(url)
             },
-            /**
-             * 格式化pipelineTree的数据，只输出一部分数据
-             * @params {Object} data  需要格式化的pipelineTree
-             * @return {Object} {lines（线段连接）, locations（节点默认都被选中）, branchConditions（分支条件）}
-             */
-            formatCanvasData (mode, data) {
-                const { line, location, gateways, activities } = data
-                const branchConditions = {}
-                for (const gKey in gateways) {
-                    const item = gateways[gKey]
-                    if (item.conditions) {
-                        branchConditions[item.id] = Object.assign({}, item.conditions)
-                    }
-                    if (item.default_condition) {
-                        const nodeId = item.default_condition.flow_id
-                        branchConditions[item.id][nodeId] = item.default_condition
-                    }
-                }
-                return {
-                    lines: line,
-                    locations: location.map(item => {
-                        const code = item.type === 'tasknode' ? activities[item.id].component.code : ''
-                        return { ...item, mode, code, status: '' }
-                    }),
-                    branchConditions
-                }
-            },
             getOrderedNodeData (data) {
                 const pipelineTree = JSON.parse(data.pipeline_tree)
                 const fstLine = pipelineTree.start_event.outgoing

frontend/desktop/src/pages/task/TaskCreateHeader.vue

@@ -60,10 +60,13 @@
         },
         computed: {
             ...mapState({
+                hideHeader: state => state.hideHeader,
                 view_mode: state => state.view_mode
             }),
             isShowBackBtn () {
-                return !(this.view_mode === 'appmaker' && this.$route.path.indexOf('newtask') !== -1)
+                // 没有导航栏时，在第一步时不展示返回按钮
+                return !(this.hideHeader && this.currentStep === 1)
+                    && !(this.view_mode === 'appmaker' && this.$route.path.indexOf('newtask') !== -1)
             },
             isAppMaker () {
                 return this.$store.state.view_mode === 'appmaker'

frontend/desktop/src/pages/task/TaskExecute/TaskFunctionalization.vue

@@ -89,7 +89,7 @@
                 v-if="canvasShow"
                 ref="nodePreviewRef"
                 :preview-data-loading="previewDataLoading"
-                :canvas-data="formatCanvasData(previewData)"
+                :canvas-data="canvasData"
                 :preview-bread="previewBread"
                 @onNodeClick="onNodeClick"
                 @onSelectSubflow="onSelectSubflow">
@@ -110,6 +110,7 @@
     import NoData from '@/components/common/base/NoData.vue'
     import TaskParamEdit from '../TaskParamEdit.vue'
     import NodePreview from '../NodePreview.vue'
+    import { formatCanvasData } from '@/utils/checkDataType'
 
     const STEP_DICT = [
         {
@@ -181,6 +182,9 @@
             }),
             isVariableEmpty () {
                 return Object.keys(this.pipelineData.constants).length === 0
+            },
+            canvasData () {
+                return formatCanvasData('preview', this.previewData)
             }
         },
         watch: {
@@ -203,27 +207,6 @@
             ...mapActions('task/', [
                 'claimFuncTask'
             ]),
-            formatCanvasData (pipelineData) {
-                const { line, location, gateways } = pipelineData
-                const branchConditions = {}
-                for (const gKey in gateways) {
-                    const item = gateways[gKey]
-                    if (item.conditions) {
-                        branchConditions[item.id] = Object.assign({}, item.conditions)
-                    }
-                    if (item.default_condition) {
-                        const nodeId = item.default_condition.flow_id
-                        branchConditions[item.id][nodeId] = item.default_condition
-                    }
-                }
-                return {
-                    lines: line,
-                    locations: location.map(item => {
-                        return { ...item, mode: 'preview', checked: true, status: '' }
-                    }),
-                    branchConditions
-                }
-            },
             updateCanvas () {
                 this.previewDataLoading = true
                 this.$nextTick(() => {

frontend/desktop/src/routers/index.js

@@ -24,6 +24,7 @@ const TemplateList = () => import('@/pages/template/TemplateList/index.vue')
 const CommonTemplate = () => import('@/pages/commonManage/index.vue')
 const CommonTemplateList = () => import('@/pages/commonManage/CommonTplList.vue')
 const TemplatePanel = () => import('@/pages/template/TemplateEdit/index.vue')
+const TemplatePreview = () => import('@/pages/template/TemplatePreview/index.vue')
 
 const Task = () => import('@/pages/task/index.vue')
 const TaskManage = () => import('@/pages/task/TaskManage.vue')
@@ -165,6 +166,18 @@ const routers = new VueRouter({
                         common: '1'
                     }),
                     meta: { project: true }
+                },
+                {
+                    path: 'preview/:project_id/',
+                    name: 'templatePreview',
+                    pathToRegexpOptions: { strict: true },
+                    component: TemplatePreview,
+                    props: route => ({
+                        project_id: route.params.project_id,
+                        template_id: route.query.template_id,
+                        common: route.query.common
+                    }),
+                    meta: { project: true }
                 }
             ]
         },

frontend/desktop/src/utils/checkDataType.js

@@ -135,3 +135,31 @@ export const getDefaultValueFormat = (scheme) => {
     }
     return valueFormat
 }
+
+/**
+ * 格式化pipelineTree的数据，只输出一部分数据
+ * @params {Object} data  需要格式化的pipelineTree
+ * @return {Object} {lines（线段连接）, locations（节点默认都被选中）, branchConditions（分支条件）}
+ */
+export const formatCanvasData = (mode, data) => {
+    const { line, location, gateways, activities } = data
+    const branchConditions = {}
+    for (const gKey in gateways) {
+        const item = gateways[gKey]
+        if (item.conditions) {
+            branchConditions[item.id] = Object.assign({}, item.conditions)
+        }
+        if (item.default_condition) {
+            const nodeId = item.default_condition.flow_id
+            branchConditions[item.id][nodeId] = item.default_condition
+        }
+    }
+    return {
+        lines: line,
+        locations: location.map(item => {
+            const code = item.type === 'tasknode' ? activities[item.id].component.code : ''
+            return { ...item, mode, code, status: '' }
+        }),
+        branchConditions
+    }
+}