工作流列表

chat.vue

@@ -15,19 +15,20 @@
                         />
                     </el-tab-pane>
                     <el-tab-pane
+                        class="h-100"
                         :label="`成员${chatMembers.length}人`"
                         name="two"
                     >
                         <ChatMembers />
                     </el-tab-pane>
-                    <el-tab-pane label="工作流" name="three">
+                    <el-tab-pane class="h-100" label="工作流" name="three">
                         <workflow
                             :model_name="currentChat.business_data.model_name"
                             :id="currentChat.business_data.obj_id"
                             :name="currentChat.business_data.detail_name"
                         />
                     </el-tab-pane>
-                    <el-tab-pane label="备注" name="four">
+                    <el-tab-pane class="h-100" label="备注" name="four">
                         <remarkList
                             :modelName="currentChat.business_data.model_name"
                             :associateId="currentChat.business_data.obj_id"

components/workflow.vue

 <template>
-    <div>
-        <div v-for="item in mockData" :key="item.id">
-            <span class="name">{{item.name}}</span>
-            <span class="state">{{item.state}}</span>
+    <div class="h-100 pos-rel workflows">
+        <div class="workflow-header">
+            <div class="cell">名称</div>
+            <div class="cell">备注</div>
+            <div class="cell">状态</div>
+            <div class="cell">操作</div>
+        </div>
+        <el-scrollbar class="workflow-scrollbar adjust-el-scroll-right-bar">
+            <div
+                class="workflow pos-rel table"
+                v-for="item in mockData"
+                :key="item.id"
+            >
+                <span class="cell workflow-name">
+                    {{ item.processName }}
+                </span>
+                <span class="cell workflow-remark">
+                    {{ item.state }}
+                </span>
+                <span class="cell status">
+                    {{ getStatus(item.status) }}
+                </span>
+                <span class="cell">
+                    <el-button
+                        v-if="item.status === workFlowstatus.未启动"
+                        class="get-out"
+                        type="text"
+                        @click="start(item)"
+                        >启动</el-button
+                    >
+                    <el-button
+                        v-else
+                        class="get-out"
+                        type="text"
+                        @click="goToDetail(item)"
+                        >查看详情</el-button
+                    >
+                </span>
+            </div>
+        </el-scrollbar>
+        <div class="detal-btns">
+            <el-button>查看详情</el-button>
         </div>
     </div>
 </template>
@@ -12,9 +50,9 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 import Chat from "../xim/index";
 
 enum WorkFlowStatus {
-    idle =0,
-    processing =1,
-    done =2,
+    "未启动" = 0,
+    "已启动" = 1,
+    "已完成" = 2,
 }
 const sdk = Chat.getSdk;
 @Component({ components: {} })
@@ -37,8 +75,9 @@ export default class WorkFlow extends Vue {
     })
     private readonly name!: string;
 
+    private workFlowstatus = WorkFlowStatus;
     private getStatus(status: WorkFlowStatus) {
-
+        return WorkFlowStatus[status];
     }
 
     private mockData = [
@@ -208,6 +247,41 @@ export default class WorkFlow extends Vue {
         //    const workflow = await sdk().model(this.model_name).workflow2().queryProcessByAssociateId(+this.id);
         //    console.log("workflow", workflow);
     }
+
+    public start(workflow: any) {
+        console.log("start", workflow);
+    }
+
+    public goToDetail(workflow: any) {
+        console.log("goToDetail", workflow);
+    }
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.workflows {
+    padding: 10px 30px;
+    padding-bottom: 0;
+    background: #fff;
+    .workflow {
+        margin: 10px 0;
+        padding: 10px 0;
+        &:hover {
+            background-color: #f5f7fa;
+        }
+    }
+    .cell {
+        display: inline-block;
+        width: 25%;
+    }
+    .workflow-name {
+        word-break: break-word;
+        white-space: pre-line;
+    }
+    .get-out {
+        padding: 0;
+    }
+}
+.workflow-scrollbar {
+    height: calc(100% - 15px);
+}
+</style>