Merge pull request #1349 from forrany/feat_integration_bkflow

添加 vue3 & 修复交互问题
TencentBlueKing · Sep 9, 2024 · 4f26a06 · 4f26a06
2 parents 70f68ff + fc5406c
commit 4f26a06
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 21 deletions.
diff --git a/.../src/components/render/pc/widget/flow-manage-container/edit/flow-manage-container.postcss b/.../src/components/render/pc/widget/flow-manage-container/edit/flow-manage-container.postcss
@@ -34,9 +34,9 @@
             background: #FAFBFC;
         }
 
-        .bk-form-vertical {
+        .bk-form-vertical, .bk-lesscode-form--vertical {
             display: flex;
-            .bk-form-item {
+            .bk-form-item, .bk-lesscode-form-item {
                 flex: 1;
                 margin-top: 0 !important;
             }

diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/edit/index.js b/lib/client/src/components/render/pc/widget/flow-manage-container/edit/index.js
@@ -98,6 +98,7 @@ export default {
                     fields: [],
                     tableColsExclude: [],
                     tableRowActions: [],
+                    queryData: {},
                     ...currentNodeProps
                 }
             })
@@ -253,7 +254,8 @@ export default {
                                         component: 'bk-form-item',
                                         props: {
                                             label: item.label,
-                                            extCls: index === 0 ? '' : 'ml10'
+                                            extCls: index === 0 ? '' : 'ml10',
+                                            class: index === 0 ? '' : 'ml10'
                                         },
                                         children: [
                                             h({

diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/const.js b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/const.js
@@ -0,0 +1,7 @@
+export const statusMap = {
+    CREATED: window.i18n.t('未执行'),
+    RUNNING: window.i18n.t('执行中'),
+    FAILED: window.i18n.t('失败'),
+    REVOKED: window.i18n.t('失败'),
+    FINISHED: window.i18n.t('完成')
+}
diff --git a/.../components/render/pc/widget/flow-manage-container/preview/components/process-overview.js b/.../components/render/pc/widget/flow-manage-container/preview/components/process-overview.js
@@ -1,7 +1,7 @@
 import { h, framework } from 'bk-lesscode-render'
-import { TICKET_STATUS } from 'shared/no-code'
+import { statusMap } from './const'
 import http from '@/api/pureAxios'
-// import dayjs from 'dayjs'
+import dayjs from 'dayjs'
 
 import './process-overview.postcss'
 
@@ -22,6 +22,11 @@ export default {
             tableData: []
         }
     },
+    computed: {
+        statusList () {
+            return Object.keys(statusMap).map(key => ({ name: statusMap[key], key }))
+        }
+    },
     created () {
         this.getTableData()
     },
@@ -70,6 +75,14 @@ export default {
                     'change': (value) => {
                         self.formData.time = value
                     }
+                },
+                scopedSlots: {
+                    default: ({ row }) => {
+                        return h({
+                            component: 'div',
+                            children: [dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')]
+                        })
+                    }
                 }
             },
             {
@@ -90,7 +103,29 @@ export default {
                         self.formData.status = value
                     }
                 },
-                children: TICKET_STATUS().map(status => (<bk-option id={status.key} key={status.key} name={status.name} />))
+                scopedSlots: {
+                    default: ({ row }) => {
+                        return h({
+                            component: 'div',
+                            class: 'flow-status-item',
+                            children: [h({
+                                component: 'span',
+                                class: `flow-status-icon ${row.status}`
+                            }), h({
+                                component: 'span',
+                                class: 'flow-status-text',
+                                children: [statusMap[row.status]]
+                            })]
+                        })
+                    }
+                },
+                children: self.statusList.map(status => (h({
+                    component: 'bk-option',
+                    props: {
+                        label: status.name,
+                        value: status.key
+                    }
+                })))
             }
         ]
 
@@ -114,6 +149,7 @@ export default {
                                     props: {
                                         label: item.label,
                                         extCls: index === 0 ? '' : 'ml10',
+                                        class: index === 0 ? '' : 'ml10',
                                         property: item.property
                                     },
                                     children: [
@@ -123,7 +159,8 @@ export default {
                                             style: {
                                                 width: '100%'
                                             },
-                                            children: item.children ? item.children : []
+                                            children: item.children ? item.children : [],
+                                            on: item.on
                                         })
                                     ]
                                 })
@@ -138,7 +175,12 @@ export default {
                                     props: {
                                         theme: 'primary'
                                     },
-                                    children: [this.$t('查询')]
+                                    children: [this.$t('查询')],
+                                    on: {
+                                        click: () => {
+                                            self.getTableData()
+                                        }
+                                    }
                                 }),
                                 h({
                                     component: 'bk-button',
@@ -154,6 +196,7 @@ export default {
                                                 time: [],
                                                 status: ''
                                             }
+                                            self.getTableData()
                                         }
                                     }
                                 })
@@ -170,12 +213,15 @@ export default {
                     children: [
                         ...filterFormItem.map((item, index) =>
                             h({
-                                component: 'bk-table-column',
-                                props: {
-                                    label: item.label,
-                                    index: index,
-                                    prop: item.name
-                                }
+                                ...{
+                                    component: 'bk-table-column',
+                                    props: {
+                                        label: item.label,
+                                        index: index,
+                                        prop: item.name
+                                    }
+                                },
+                                ...(item.scopedSlots ? { scopedSlots: item.scopedSlots } : {})
                             })
                         ),
                         h({

diff --git a/...onents/render/pc/widget/flow-manage-container/preview/components/process-overview.postcss b/...onents/render/pc/widget/flow-manage-container/preview/components/process-overview.postcss
@@ -4,9 +4,9 @@
         background: #FAFBFC;
     }
 
-    .bk-form-vertical {
+    .bk-form-vertical, .bk-lesscode-form--vertical {
         display: flex;
-        .bk-form-item {
+        .bk-form-item, .bk-lesscode-form-item {
             flex: 1;
             margin-top: 0 !important;
         }
@@ -16,4 +16,30 @@
         cursor: pointer;
         font-size: 12px;
     }
+    .flow-status-item {
+        .flow-status-icon {
+            display: inline-block;
+            margin-right: 8px;
+            width: 8px;
+            height: 8px;
+            border: 1px solid #000;
+            border-radius: 50%;
+            &.CREATED {
+                background: #F0F1F5;
+                border: 1px solid #C4C6CC;
+            };
+            &.FAILED, &.REVOKED {
+                background: #FFE6E6;
+                border: 1px solid #EA3636;
+            };
+            &.FINISHED {
+                background: #E8FFF5;
+                border: 1px solid #4DC8AE;
+            }
+            &.RUNNING {
+                background: #FFE8C3;
+                border: 1px solid #FF9C01;
+            }
+        }
+    }
 }
diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.js b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.js
@@ -57,11 +57,6 @@ export default {
                 if (!this.activeNode) {
                     this.activeNode = this.nodeList[0].id
                 }
-                this.nodeList.forEach(item => {
-                    if (!Object.prototype.hasOwnProperty.call(item, 'queryData')) {
-                        item.queryData = {}
-                    }
-                })
             }
         },
         async getFormDetail (formId) {

diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.postcss b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.postcss
@@ -50,6 +50,9 @@
                 border-radius: 2px 2px 0 0 ;
             }
         }
+        .bk-lesscode-tab-content {
+            display: none;
+        }
     }
     .header-operate-area {
         position: relative;