vue2-client 1.14.41 → 1.14.44

package/src/pages/WorkflowDetail/WorkFlowDemo.vue

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

package/src/pages/WorkflowDetail/WorkflowDetail.vue

@@ -2,30 +2,40 @@
   <!-- 抽屉 -->
   <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="查看 / 编辑进度">
+    <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="开始工作">
               <WorkFlowHandle
-                v-if="
-                  activeKey === '1' &&
-                    details.f_state !== undefined &&
-                    steps !== undefined
-                "
+                v-if="activeKey === '1' && details.f_state !== undefined && steps !== undefined"
                 ref="workflowHandle"
                 :workflow-id="workflowId"
                 :workflowState="details.f_state === 1"
@@ -37,29 +47,39 @@
                 @refresh="stepChanged"
                 @success="success"
                 @nextClick="nextClick"
+                class="handle-content"
               />
             </a-tab-pane>
-            <a-tab-pane key="2" tab="任务流转记录">
-              <workflow-log v-if="activeKey === '2'" :workflow-id="workflowId"/>
+
+            <!-- 任务流转记录标签页 -->
+            <a-tab-pane key="2" tab="流转记录">
+              <workflow-log
+                v-if="activeKey === '2'"
+                :workflow-id="workflowId"
+                class="log-content"
+              />
             </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">
-                  <leave-message
-                    :workflowId="this.workflowId"
-                    :projectName="details.f_task_name"
-                    :data="messageList"
-                    :loading="messageLoading"
-                    @success="success"/>
-                </a-col>
-              </a-row>
+              <div class="message-content">
+                <leave-message
+                  :workflowId="workflowId"
+                  :projectName="details.f_task_name"
+                  :data="messageList"
+                  :loading="messageLoading"
+                  @success="success"
+                  class="leave-message-component"
+                />
+              </div>
             </a-tab-pane>
           </a-tabs>
         </a-card>
@@ -204,6 +224,71 @@ 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);
+
+      /deep/ .ant-card-body {
+        padding: 12px 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 +305,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;
     }
   }
 }

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowBaseInformation.vue

@@ -1,110 +1,126 @@
 <template>
   <div id="ApplyBaseInformation">
-    <a-card :loading="loading" :bordered="false" class="info-tag-box">
-      <!--  第一个  -->
-      <div class="info-tag" :style="{ background: details.f_state === 1 ? '#ffa427' : '#6877ee' }">
-        <div><a-icon type="appstore" theme="filled" style="font-size: 16px" /></div>
-        <div class="content">
-          <div v-if="showProjectPerson" class="title">{{ details.f_entry_name }}
-            <a-popover placement="bottom">
-              <template slot="content">
-                <div v-if="details.person.f_projectadmin">项目经理：{{ details.person.f_projectadmin }}</div>
-                <div v-if="details.person.f_shangwuren">客户经理：{{ details.person.f_shangwuren }}</div>
-                <div v-if="details.person.f_salemanager">销售经理：{{ details.person.f_salemanager }}</div>
-                <div v-if="details.person.f_egionaladministrator">大区经理：{{ details.person.f_egionaladministrator }}</div>
-              </template>
-              <a-icon type="info-circle" style="font-size: 17px" />
-            </a-popover>
+    <a-card :loading="loading" :bordered="false" class="info-card-container">
+      <div class="info-cards-wrapper">
+        <!--  第一个  -->
+        <div class="info-card">
+          <div class="info-icon" :class="details.f_state === 1 ? 'status-completed' : 'status-progress'">
+            <a-icon type="appstore" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div v-if="showProjectPerson" class="info-title">
+              {{ details.f_entry_name }}
+              <a-popover placement="bottom">
+                <template slot="content">
+                  <div v-if="details.person.f_projectadmin">项目经理：{{ details.person.f_projectadmin }}</div>
+                  <div v-if="details.person.f_shangwuren">客户经理：{{ details.person.f_shangwuren }}</div>
+                  <div v-if="details.person.f_salemanager">销售经理：{{ details.person.f_salemanager }}</div>
+                  <div v-if="details.person.f_egionaladministrator">大区经理：{{ details.person.f_egionaladministrator }}</div>
+                </template>
+                <a-icon type="info-circle" class="info-icon-small" />
+              </a-popover>
+            </div>
+            <div v-else class="info-title">{{ details.f_task_name }}</div>
+            <div class="info-label" :class="details.f_state === 1 ? 'status-completed-text' : 'status-progress-text'">
+              {{ details.f_state === 1 ? '完工' : '正在进行' }}
+            </div>
           </div>
-          <div v-else class="title">{{ details.f_task_name }}</div>
-          <div class="sub-text">{{ details.f_state === 1 ? '完工' : '正在进行' }}</div>
-        </div>
-      </div>
-      <!--  第二个  -->
-      <div class="info-tag" style="background: #34d6af">
-        <div><a-icon type="carry-out" theme="filled" style="font-size: 16px" /></div>
-        <div class="content">
-          <div class="title">{{ format(details.f_workflow_date, 'yyyy-MM-dd') }}</div>
-          <div class="sub-text">创建日期</div>
         </div>
-      </div>
-      <!--  第三个  -->
-      <div v-show="details.f_state !== 1" class="info-tag" style="background: #ffa427">
-        <div><a-icon type="profile" theme="filled" style="font-size: 16px" /></div>
-        <div class="content">
-          <div class="title">{{ details.f_workflow_define_name }}</div>
-          <div class="sub-text">{{ details.f_sub_state }}</div>
+
+        <!--  第二个  -->
+        <div class="info-card">
+          <div class="info-icon date-icon">
+            <a-icon type="carry-out" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div class="info-title">{{ format(details.f_workflow_date, 'yyyy-MM-dd') }}</div>
+            <div class="info-label">创建日期</div>
+          </div>
         </div>
-      </div>
-      <!--  第四个  -->
-      <div class="info-tag" style="background: #ff5f27" title="若要修改完成时间，请通知部门领导进行修改！">
-        <div>
-          <a-icon type="clock-circle" theme="filled" style="font-size: 16px" />
-          <a-dropdown>
-            <a-icon type="down" style="float: right;" />
-            <a-menu slot="overlay">
-              <a-menu-item @click="showChangeRecord">修改记录</a-menu-item>
-            </a-menu>
-          </a-dropdown>
+
+        <!--  第三个  -->
+        <div v-show="details.f_state !== 1" class="info-card">
+          <div class="info-icon workflow-icon">
+            <a-icon type="profile" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div class="info-title">{{ details.f_workflow_define_name }}</div>
+            <div class="info-label">{{ details.f_sub_state }}</div>
+          </div>
         </div>
-        <div class="content">
-          <div class="title">
-            {{ format(details.f_complete_time, 'yyyy-MM-dd') }}
-            <!--  修改任务时间  -->
-            <a-popover v-if="isCreatedBy" v-model="openCompleteTime" title="修改任务时间" trigger="click">
-              <template slot="content">
-                <a-form-item label="任务整体完成时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
-                  <a-date-picker
-                    v-model="completeTime"
-                    :disabled-date="disabledDate"
-                    :show-today="false"
-                    :allow-clear="false"
-                    value-format="YYYY-MM-DD HH:mm:ss"
-                  >
-                  </a-date-picker>
-                </a-form-item>
-                <a-form-item label="当前环节截止时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
-                  <a-date-picker
-                    v-model="overdueTime"
-                    :disabled-date="disabledDate"
-                    :show-today="false"
-                    value-format="YYYY-MM-DD 17:00:00"
-                  >
-                  </a-date-picker>
-                </a-form-item>
-                <a-form-item label="修改原因" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
-                  <a-textarea
-                    v-model="note"
-                    :auto-size="{ minRows: 3, maxRows: 5 }"
-                    placeholder="修改原因"
-                  />
-                </a-form-item>
-                <!--<a-form-item label="修改原因" :label-col="{span: 10}" :wrapper-col="{span: 14}">-->
-                <!--<a-badge :count="messageList.length" :offset="[4,-4]" :number-style="{backgroundColor: '#b2b2b2'}"></a-badge>-->
-                <!--</a-form-item>-->
-                <div style="text-align: right">
-                  <a-button type="primary" size="small" @click="saveCompleteTime">确定</a-button>
-                </div>
-              </template>
-              <a-icon type="edit" theme="filled" class="edit-complete-time" />
-            </a-popover>
+
+        <!--  第四个  -->
+        <div class="info-card" title="若要修改完成时间，请通知部门领导进行修改！">
+          <div class="info-icon time-icon">
+            <a-icon type="clock-circle" theme="filled" />
+            <a-dropdown>
+              <a-icon type="down" class="dropdown-icon" />
+              <a-menu slot="overlay">
+                <a-menu-item @click="showChangeRecord">修改记录</a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </div>
+          <div class="info-content">
+            <div class="info-title">
+              {{ format(details.f_complete_time, 'yyyy-MM-dd') }}
+              <!--  修改任务时间  -->
+              <a-popover v-if="isCreatedBy" v-model="openCompleteTime" title="修改任务时间" trigger="click">
+                <template slot="content">
+                  <a-form-item label="任务整体完成时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                    <a-date-picker
+                      v-model="completeTime"
+                      :disabled-date="disabledDate"
+                      :show-today="false"
+                      :allow-clear="false"
+                      value-format="YYYY-MM-DD HH:mm:ss"
+                    >
+                    </a-date-picker>
+                  </a-form-item>
+                  <a-form-item label="当前环节截止时间" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                    <a-date-picker
+                      v-model="overdueTime"
+                      :disabled-date="disabledDate"
+                      :show-today="false"
+                      value-format="YYYY-MM-DD 17:00:00"
+                    >
+                    </a-date-picker>
+                  </a-form-item>
+                  <a-form-item label="修改原因" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
+                    <a-textarea
+                      v-model="note"
+                      :auto-size="{ minRows: 3, maxRows: 5 }"
+                      placeholder="修改原因"
+                    />
+                  </a-form-item>
+                  <div style="text-align: right">
+                    <a-button type="primary" size="small" @click="saveCompleteTime">确定</a-button>
+                  </div>
+                </template>
+                <a-icon type="edit" theme="filled" class="edit-icon" />
+              </a-popover>
+            </div>
+            <div class="info-label">完成时间</div>
           </div>
-          <div class="sub-text">完成时间</div>
         </div>
-      </div>
-      <!--  第五个  -->
-      <div v-show="details.f_workflow_parentid" @click="ordRecord" class="info-tag" style="background: #31c565">
-        <div><a-icon type="profile" theme="filled" style="font-size: 16px" /></div>
-        <div class="content">
-          <div class="title">{{ details.f_workflow_parentid }}</div>
-          <div class="sub-text">父级工单编号</div>
+
+        <!--  第五个  -->
+        <div v-show="details.f_workflow_parentid" @click="ordRecord" class="info-card">
+          <div class="info-icon parent-icon">
+            <a-icon type="profile" theme="filled" />
+          </div>
+          <div class="info-content">
+            <div class="info-title">{{ details.f_workflow_parentid }}</div>
+            <div class="info-label">父级工单编号</div>
+          </div>
         </div>
       </div>
     </a-card>
+
     <!-- 完成时间修改记录 -->
     <a-modal v-model="changeRecordVisible" title="完成时间修改记录" :footer="null" :z-index="1001" :width="1500">
       <a-table row-key="id" :columns="changeRecordColumns" :data-source="changeRecordDataSource" :loading="changeRecordLoading"></a-table>
     </a-modal>
+
     <!-- 父级工单 -->
     <a-modal v-model="masterWorkOrderVisible" title="主工单" :footer="null" :z-index="1001" :width="1500">
       <work-order-parent-details :workflow-id="details.f_workflow_parentid"></work-order-parent-details>
@@ -263,40 +279,152 @@ export default {
 
 <style lang="less">
 #ApplyBaseInformation {
-  .info-tag-box {
+  .info-card-container {
     background: transparent;
+
     .ant-card-body {
-      display: flex;
-      justify-content: flex-start;
       padding: 0;
     }
   }
-  .info-tag {
-    min-width: 200px;
-    height: 110px;
-    padding: 10px;
-    color: #ffffff;
-    .content {
-      text-align: center;
-      .title {
-        margin-top: 4px;
-        font-size: 22px;
+
+  .info-cards-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .info-card {
+      flex: 1;
+      min-width: 180px;
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      display: flex;
+      align-items: center;
+      transition: all 0.2s ease;
+      cursor: default;
+      border: 1px solid #eaedf2;
+
+      &:hover {
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
       }
-      .sub-text {
-        margin-top: 6px;
-        font-size: 14px;
+
+      .info-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 46px;
+        height: 46px;
+        border-radius: 8px;
+        font-size: 22px;
+        margin-right: 14px;
+        color: #fff;
+        flex-shrink: 0;
+        position: relative;
+
+        &.status-completed {
+          background-color: #ebad59;
+        }
+
+        &.status-progress {
+          background-color: #5B6B8F;
+        }
+
+        &.date-icon {
+          background-color: #4CAF50;
+        }
+
+        &.workflow-icon {
+          background-color: #FF9800;
+        }
+
+        &.time-icon {
+          background-color: #F44336;
+        }
+
+        &.parent-icon {
+          background-color: #2196F3;
+        }
+
+        .dropdown-icon {
+          position: absolute;
+          right: -8px;
+          bottom: -8px;
+          color: #8392a5;
+          font-size: 14px;
+          background: #fff;
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #eaedf2;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          cursor: pointer;
+
+          &:hover {
+            color: #5B6B8F;
+          }
+        }
       }
-      .edit-complete-time {
-        cursor: pointer;
-        transition: color 0.2s;
-        &:hover {
-          color: rgb(24, 144, 255);
+
+      .info-content {
+        flex: 1;
+        min-width: 0;
+
+        .info-title {
+          font-size: 20px;
+          font-weight: 600;
+          color: #2c3e50;
+          margin-bottom: 6px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: flex;
+          align-items: center;
+          line-height: 1.3;
+
+          .info-icon-small {
+            margin-left: 6px;
+            color: #8392a5;
+            font-size: 16px;
+            cursor: pointer;
+
+            &:hover {
+              color: #5B6B8F;
+            }
+          }
+
+          .edit-icon {
+            margin-left: 6px;
+            color: #8392a5;
+            font-size: 16px;
+            cursor: pointer;
+
+            &:hover {
+              color: #5B6B8F;
+            }
+          }
+        }
+
+        .info-label {
+          font-size: 14px;
+          color: #8392a5;
+          line-height: 1.4;
+
+          &.status-completed-text {
+            color: #ebad59;
+            font-weight: 600;
+          }
+
+          &.status-progress-text {
+            color: #5B6B8F;
+            font-weight: 600;
+          }
         }
       }
     }
-    &:not(:first-child) {
-      margin-left: 22px;
-    }
   }
 }
 </style>

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowHandle.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--   上方流程显示   -->
-    <a-card :bordered="false" :loading="loading" title="项目进度">
+    <a-card :bordered="false" :loading="loading">
       <!--  项目进度流程  -->
       <work-flow-timeline
         :current-step-id="currentStepId"
@@ -829,7 +829,7 @@ export default {
       let stepHandler
       if (this.checkedChargePerson) {
         // 使用 value 找到对应的 label
-        stepHandler = this.chargePersonOptions.find(item => item.value === this.checkedChargePerson[0]).label
+        stepHandler = this.chargePersonOptions.find(item => item.value === this.checkedChargePerson).label
       } else if (this.chargePerson.personList.length > 0) {
         stepHandler = this.chargePerson.personList.map(item => item.name).join(',')
       }
@@ -947,14 +947,14 @@ export default {
             filteredUsers = allUser.filter(user =>
               user.rolestr && user.rolestr.includes(personItem.name)
             ).map(user => {
-              return { label: user.label, value: user.id }
+              return { label: user.label, value: user.value }
             })
           } else if (personItem.type === 'department') {
             // 根据部门获取人员
             filteredUsers = allUser.filter(user =>
               user.depname === personItem.name
             ).map(user => {
-              return { label: user.label, value: user.id }
+              return { label: user.label, value: user.value }
             })
           }