fix : 审批记录样式优化, 上传费用,新增分摊输入框宽度固定

src/views/workflow/common/OperationRender.vue

@@ -7,16 +7,25 @@
                         :color="operation.color"
                         size="large"
                         placement="top">
-
         <el-card>
-          <div style="display: flex;">
-<!--            <avatar-ellipsis :row="3" v-if="operation.userInfo.length > 0" :user-info="operation.userInfo"/>-->
+          <div class="card">
             <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
-              <name-circle :user="user"/>
-            </div>
-            <div style="margin-left: 10px;">
-              <div style="color: #c0bebe">{{ operation.operationName }}</div>
-              <div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div>
+              <div>
+                <name-circle :user="user"/>
+                <span>{{ user.name }}</span>
+              </div>
+              <div>
+                <div class="remark">{{ operation.remark }}</div>
+                <div>
+                  <div>{{ operation.operationName }}：</div>
+                  <div>{{ user.name }}</div>
+                </div>
+                <div v-if="user.auditOpinion">
+                  <div style="margin-bottom: 10px;color: #909399">{{ user.operationTime }}</div>
+                  <Tooltip :content="user.auditOpinion" placement="bottom-start" width="140" :lines="true"/>
+                </div>
+              </div>
+
             </div>
           </div>
         </el-card>
@@ -32,7 +41,6 @@
 
 <script setup>
 import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
-import AvatarEllipsis from '../process/common/AvatarEllipsis.vue'
 import NameCircle from "@/components/NameCircle.vue";
 
 const props = defineProps({
@@ -162,7 +170,7 @@ const initOperationFun = (operation) => {
     if (state === 'AGREE' || state === 'AUTO_PASS') {
       operation["icon"] = "CircleCheckFilled"
       operation["color"] = "#0bbd87"
-      operation["remark"] = "  (已同意)"
+      operation["remark"] = "  已同意"
     }
     if (state === 'PASS') {
       operation["icon"] = "SemiSelect"
@@ -172,26 +180,26 @@ const initOperationFun = (operation) => {
     if (state === 'RUNNING') {
       operation["icon"] = "Loading"
       operation["color"] = "#f78f5f"
-      operation["remark"] = "  (处理中)"
+      operation["remark"] = "  处理中"
     }
     //回退
     if (state === 'ROLLBACK') {
       operation["icon"] = "RefreshLeft"
       operation["color"] = "#f78f5f"
-      operation["remark"] = "  (回退成功)"
+      operation["remark"] = "  回退成功"
     }
     //拒绝操作
     if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
       operation["icon"] = "CircleCloseFilled"
       operation["color"] = "#f56c6c"
-      operation["remark"] = "  (拒绝)"
+      operation["remark"] = "  拒绝"
     }
   }
   //抄送
   if (type === 'CC') {
     operation["icon"] = "Promotion"
     operation["color"] = "#3395f8"
-    operation["remark"] = "  (抄送成功)"
+    operation["remark"] = "  抄送成功"
   }
   //评论
   if (type === 'COMMENT') {
@@ -199,7 +207,7 @@ const initOperationFun = (operation) => {
     if (state === 'COMMENT') {
       operation["icon"] = "ChatDotRound"
       operation["color"] = "#0bbd87"
-      operation["remark"] = "  (添加了评论)"
+      operation["remark"] = "  添加了评论"
     }
   }
   //触发器发送http请求
@@ -207,13 +215,13 @@ const initOperationFun = (operation) => {
     operation["icon"] = "Share"
     if (state === 'SUCCESS') {
       operation["color"] = "#0bbd87"
-      operation["remark"] = "  (成功)"
+      operation["remark"] = "  成功"
     } else if (state === 'RUNNING') {
       operation["color"] = "#f78f5f"
-      operation["remark"] = "  (请求中)"
+      operation["remark"] = "  请求中"
     } else {
       operation["color"] = "#f56c6c"
-      operation["remark"] = "  (失败)"
+      operation["remark"] = "  失败"
     }
   }
 
@@ -222,13 +230,13 @@ const initOperationFun = (operation) => {
     operation["icon"] = "Message"
     if (state === 'SUCCESS') {
       operation["color"] = "#0bbd87"
-      operation["remark"] = "  (成功)"
+      operation["remark"] = "  成功"
     } else if (state === 'RUNNING') {
       operation["color"] = "#f78f5f"
-      operation["remark"] = "  (发送中)"
+      operation["remark"] = "  发送中"
     } else {
       operation["color"] = "#f78f5f"
-      operation["remark"] = "  (发送中)"
+      operation["remark"] = "  发送中"
     }
   }
   return operation;
@@ -237,25 +245,73 @@ init()
 </script>
 
 <style lang="scss" scoped>
-
 :deep .el-card__body, .el-main {
   padding: 10px;
 }
 
-.avatar_name {
-  //width: 45px;
+.card {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  margin-right: 5px;
+  font-size: 15px;
 
+  > div:first-child {
+    display: flex;
+  }
+
+  .avatar_name {
+    display: flex;
+    margin-right: 5px;
+
+    > div:first-child {
+      display: flex;
+
+      > span {
+        color: #2a99ff;
+        margin-left: 10px;
+        margin-right: 20px;
+      }
+    }
+
+    > div:nth-child(2) {
+      display: flex;
+      flex-direction: column;
+      color: #8a8a8a;
+
+      .remark {
+        font-weight: bold;
+      }
+
+      > div {
+        margin-bottom: 5px;
+      }
+
+      > div:nth-child(2) {
+        display: flex;
+        margin-top: -5px;
+      }
+    }
+  }
 }
 
+
 .el-timeline-item__node {
   position: absolute;
   bottom: 20px;
   right: 1px;
 }
-
+//.username {
+//  //width: 90px;
+//  margin-top: 10px;
+//  background: #f5f5f5;
+//  padding: 5px;
+//
+//  .el-tooltip__trigger {
+//    width: 90px;
+//    text-align: center;
+//    //padding-top: 2px;
+//    //text-align: center;
+//    text-overflow: ellipsis;
+//    white-space: nowrap;
+//    overflow: hidden
+//  }
+//}
 </style>