fix : 修复细节

2024-05-19 00:16:40 +08:00
parent fccce985b6
commit c96cbf8415
7 changed files with 269 additions and 86 deletions
--- a/src/components/NameCircle.vue
+++ b/src/components/NameCircle.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <slot name="pre"></slot>
+    <div class="user-audit">
+      <div class="circle-user">
+        <Tooltip :content="user.name" placement="bottom-start" width="45"/>
+        <div v-if="user.icon"
+             class="el-timeline-item__node" :style="{
+                      backgroundColor: user.color
+                    }">
+          <el-icon v-if="user.icon" size="15" :class="user.class">
+            <component :is="user.icon"/>
+          </el-icon>
+        </div>
+      </div>{{user.operationTime}}
+      <div class="username" v-if="user.auditOpinion">
+        <Tooltip :content="user.auditOpinion" placement="bottom-start" width="90"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {Loading, Close, CircleCheckFilled, MoreFilled} from '@element-plus/icons-vue'
+import {defineProps} from "vue";
+
+const props = defineProps({
+  row: {
+    type: Number,
+    default: 1
+  },
+  hoverTip: {
+    type: Boolean,
+    default: false
+  },
+  user: {
+    type: Object,
+    default: {}
+  },
+  mode: {
+    type: String,
+    default: 'design'
+  }
+})
+
+const init = () => {
+  // for (let user of props.userInfo) {
+  initUser(props.user)
+  // }
+}
+
+const initUser = (user) => {
+  let state = user.state
+  //创建节点
+  if (state === 'CREATE') {
+    user["icon"] = CircleCheckFilled
+    user["color"] = "#0bbd87"
+  }
+  //审批通过
+  if (state === 'AGREE' || state === 'AUTO_PASS') {
+    user["icon"] = CircleCheckFilled
+    user["color"] = "#0bbd87"
+  }
+  //审批处理中
+  if (state === 'RUNNING') {
+    user["icon"] = Loading
+    user["color"] = "#f78f5f"
+    user["class"] = 'is-loading'
+  }
+  //拒绝后评论
+  if (state === 'REFUSE') {
+    user["icon"] = Close
+    user["color"] = "#f56c6c"
+  }
+  if (state === 'PASS') {
+    user["icon"] = MoreFilled
+    user["color"] = "#c0c4cc"
+  }
+  return user;
+}
+
+init()
+</script>
+
+<style scoped lang="scss">
+.user-audit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .circle-user {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid #ACACAC;
+    position: relative;
+
+    .el-timeline-item__node {
+      position: absolute;
+      bottom: 0;
+      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>