vue2-client 1.14.41 → 1.14.43

package/src/pages/WorkflowDetail/WorkFlowDemo.vue

@@ -6,7 +6,7 @@ export default {
   components: { WorkflowDetail },
   mounted () {
     this.$refs.workFlow.init({
-      workflowId: '1'
+      workflowId: '31'
     })
   },
   methods: {

package/src/pages/WorkflowDetail/WorkflowDetail.vue

@@ -2,64 +2,97 @@
   <!-- 抽屉 -->
   <a-drawer
     :visible="visible"
-    width="85vw"
+    width="95vw"
     :placement="direction"
     title="流程详情"
     @close="onClose"
+    class="modern-workflow-drawer"
+    :bodyStyle="{ padding: '0', background: '#f5f7fa' }"
+    :headerStyle="{ borderBottom: '1px solid #eaedf2', padding: '16px 24px' }"
   >
-    <div>
-      <!-- 基础信息 -->
-      <workflow-base-information
-        v-if="details"
-        ref="baseInformation"
-        :workflow-id="workflowId"
-        :details="details"
-        :visible="visible"
-      />
-      <div :style="{ height: screenHeight * 0.9 + 'px' }">
-        <a-card style="margin-top: 20px">
-          <a-tabs :activeKey="activeKey" @change="changeTab">
-            <a-tab-pane key="1" tab="查看 / 编辑进度">
-              <WorkFlowHandle
-                v-if="
-                  activeKey === '1' &&
-                    details.f_state !== undefined &&
-                    steps !== undefined
-                "
-                ref="workflowHandle"
+    <div class="workflow-container">
+      <!-- 基础信息卡片 -->
+      <div class="info-section">
+        <workflow-base-information
+          v-if="details"
+          ref="baseInformation"
+          :workflow-id="workflowId"
+          :details="details"
+          :visible="visible"
+          class="base-info-card"
+        />
+      </div>
+
+      <!-- 内容区域 -->
+      <div class="content-section" :style="{ minHeight: screenHeight * 0.7 + 'px' }">
+        <a-card class="content-card" :bordered="false">
+          <a-tabs
+            :activeKey="activeKey"
+            @change="changeTab"
+            class="modern-tabs"
+            :tabBarStyle="{ marginBottom: '5px', borderBottom: '1px solid #eaedf2' }"
+          >
+            <!-- 查看/编辑进度标签页 -->
+            <a-tab-pane key="1" tab="开始工作">
+              <template v-if="details">
+                <WorkFlowHandle
+                  v-if="activeKey === '1' && details.f_state !== undefined && steps !== undefined"
+                  ref="workflowHandle"
+                  :workflow-id="workflowId"
+                  :workflowState="details.f_state === 1"
+                  :complete-time="details.f_complete_time"
+                  :stepsForChild="steps"
+                  :visible="visible"
+                  :taskName="details.f_task_name"
+                  :details="details"
+                  @refresh="stepChanged"
+                  @success="success"
+                  @nextClick="nextClick"
+                  class="handle-content"
+                />
+              </template>
+            </a-tab-pane>
+
+            <!-- 任务流转记录标签页 -->
+            <a-tab-pane key="2" tab="流转记录">
+              <workflow-log
+                v-if="activeKey === '2'"
                 :workflow-id="workflowId"
-                :workflowState="details.f_state === 1"
-                :complete-time="details.f_complete_time"
-                :stepsForChild="steps"
-                :visible="visible"
-                :taskName="details.f_task_name"
-                :details="details"
-                @refresh="stepChanged"
-                @success="success"
-                @nextClick="nextClick"
+                class="log-content"
               />
             </a-tab-pane>
-            <a-tab-pane key="2" tab="任务流转记录">
-              <workflow-log v-if="activeKey === '2'" :workflow-id="workflowId"/>
-            </a-tab-pane>
+
+            <!-- 任务留言标签页 -->
             <a-tab-pane key="4">
-              <span slot="tab">
+              <span slot="tab" class="message-tab">
                 <span>任务留言</span>
                 <a-badge
                   :count="messageList.length"
-                  :offset="[4, -4]"
-                  :number-style="{ backgroundColor: '#b2b2b2' }"></a-badge>
+                  :offset="[8, -4]"
+                  :numberStyle="{ backgroundColor: '#5B6B8F', fontSize: '12px', padding: '0 6px', height: '18px', lineHeight: '18px', borderRadius: '9px' }"
+                />
               </span>
-              <a-row>
-                <a-col :span="14">
+              <div class="message-content">
+                <template v-if="details">
                   <leave-message
-                    :workflowId="this.workflowId"
+                    :workflowId="workflowId"
                     :projectName="details.f_task_name"
                     :data="messageList"
                     :loading="messageLoading"
-                    @success="success"/>
-                </a-col>
-              </a-row>
+                    @success="success"
+                    class="leave-message-component"
+                  />
+                </template>
+              </div>
+            </a-tab-pane>
+
+            <!-- 查看附件标签页 -->
+            <a-tab-pane key="5" tab="查看附件">
+              <template v-if="details">
+                <XUploadFilesView
+                  :currUserInfo="{ f_userinfo_id: 90613 }"
+                />
+              </template>
             </a-tab-pane>
           </a-tabs>
         </a-card>
@@ -77,6 +110,7 @@ import { postByServiceName } from '@vue2-client/services/api/restTools'
 import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
 import WorkflowLog from './WorkflowPageDetail/WorkflowLog.vue'
 import LeaveMessage from './WorkflowPageDetail/LeaveMessage'
+import XUploadFilesView from '@vue2-client/base-client/components/common/XUploadFilesView/index.vue'
 
 export default {
   name: 'WorkflowDetail',
@@ -85,7 +119,8 @@ export default {
     WorkFlowHandle,
     XFormTable,
     WorkflowLog,
-    LeaveMessage
+    LeaveMessage,
+    XUploadFilesView
   },
   data () {
     return {
@@ -98,7 +133,7 @@ export default {
       // 保存流程和留言信息
       steps: undefined,
       // 基础信息
-      details: {},
+      details: undefined,
       // 是否已完成
       allStepDown: false,
       // 给XFormTable增加额外查询条件
@@ -113,7 +148,7 @@ export default {
       messageList: [],
       messageLoading: true,
       workflowId: '',
-      direction: '',
+      direction: 'right',
       visible: false
     }
   },
@@ -150,7 +185,7 @@ export default {
       this.visible = false
       this.activeKey = '1'
       this.allStepDown = false
-      this.details = {}
+      this.details = undefined
       this.fixedAddForm = {}
       this.fixedQueryForm = {}
       this.steps = undefined
@@ -180,7 +215,7 @@ export default {
       this.fixedAddForm.a_f_workflow_id = this.workflowId
     },
     // 初始化两张固定表
-    async init ({ workflowId, direction, visible = true }) {
+    async init ({ workflowId, direction = 'right', visible = true }) {
       this.workflowId = workflowId
       this.direction = direction
       this.visible = visible
@@ -204,6 +239,72 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.workflow-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .info-section {
+    padding: 16px 24px;
+    background-color: #fff;
+    border-bottom: 1px solid #eaedf2;
+  }
+
+  .content-section {
+    flex: 1;
+    padding: 16px 24px;
+
+    .content-card {
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      height: 100%;
+
+      /deep/ .ant-card-body {
+        padding: 0px 24px 24px;
+      }
+    }
+  }
+}
+
+.modern-tabs {
+  /deep/ .ant-tabs-nav {
+    margin-bottom: 0;
+  }
+
+  /deep/ .ant-tabs-tab {
+    padding: 12px 0;
+    margin-right: 48px;
+    font-size: 15px;
+  }
+
+  /deep/ .ant-tabs-tab-active {
+    font-weight: 500;
+  }
+
+  /deep/ .ant-tabs-ink-bar {
+    height: 3px;
+    border-radius: 3px 3px 0 0;
+  }
+}
+
+.message-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.message-content {
+  max-width: 900px;
+
+  .leave-message-component {
+    width: 100%;
+  }
+}
+
+.log-content {
+  margin-top: 16px;
+}
+
 /deep/ .step-label {
   &:not(:first-child) {
     margin-left: 16px;
@@ -220,15 +321,15 @@ export default {
     margin-right: 8px;
 
     &.blue {
-      border: 3px solid rgb(24, 144, 255);
+      border: 3px solid #5B6B8F;
     }
 
     &.green {
-      border: 3px solid rgb(82, 196, 26);
+      border: 3px solid #4CAF50;
     }
 
     &.gray {
-      border: 3px solid rgb(191, 191, 191);
+      border: 3px solid #cfd8e3;
     }
   }
 }