Merge remote-tracking branch 'origin/master'

This commit is contained in:
clay
2024-05-13 17:41:27 +08:00
15 changed files with 569 additions and 460 deletions

View File

@@ -95,4 +95,4 @@ defineExpose({
init
})
</script>
</script>

View File

@@ -7,6 +7,7 @@
:color="operation.color"
size="large"
placement="top">
<el-card>
<div style="display: flex;">
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
@@ -19,34 +20,43 @@
<component :is="user.icon"/>
</el-icon>
</div>
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
<span class="username">{{ user.name }}</span>
</el-tooltip>
<template v-if="user.auditOpinion">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div>
{{ user.auditOpinion }}
</div>
</div>
</template>
</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>
</div>
<template v-if="operation.comment">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div>
{{ operation.comment.context }}
</div>
<div style="margin-top: 10px;" v-if="operation.comment.attachments && operation.comment.attachments.length > 0">
<template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
<el-image
style="width: 100px; height: 100px"
:src="item.url"
:preview-src-list="[item.url]">
</el-image>
</template>
<div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
<el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document">{{ file.name }}</el-link>
</div>
</div>
</div>
</template>
<!-- <template v-if="operation.comment">-->
<!-- <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">-->
<!-- <div>-->
<!-- {{ operation.comment.context }}-->
<!-- </div>-->
<!-- <div style="margin-top: 10px;"-->
<!-- v-if="operation.comment.attachments && operation.comment.attachments.length > 0">-->
<!-- <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">-->
<!-- <el-image-->
<!-- style="width: 100px; height: 100px"-->
<!-- :src="item.url"-->
<!-- :preview-src-list="[item.url]">-->
<!-- </el-image>-->
<!-- </template>-->
<!-- <div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">-->
<!-- <el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document">{{ file.name }}</el-link>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
</el-card>
</el-timeline-item>
<el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
@@ -60,7 +70,7 @@
<script setup>
import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
import {ref,defineProps} from 'vue'
import {ref, defineProps} from 'vue'
const props = defineProps({
operationList: {
@@ -113,12 +123,12 @@ const init = () => {
break
}
// let operationListNew = []
for (let i = 0;i<props.operationList.length;i++) {
for (let i = 0; i < props.operationList.length; i++) {
let operationNew = initOperationFun(props.operationList[i])
let userList = []
if (operationNew.userInfo){
if (operationNew.userInfo) {
for (let user of operationNew.userInfo) {
let userNew = initUser(user,operationNew.operation)
let userNew = initUser(user, operationNew.operation)
userList.push(userNew)
}
operationNew.userInfo = userList
@@ -132,7 +142,7 @@ const init = () => {
const getAttachmentList = (attachments, image) => {
let result = [];
if (attachments){
if (attachments) {
for (let attachment of attachments) {
if (attachment.isImage === image) {
result.push(attachment)
@@ -142,7 +152,7 @@ const getAttachmentList = (attachments, image) => {
return result;
}
const initUser = (user,type) => {
const initUser = (user, type) => {
let state = user.state
//创建节点
if (state === 'CREATE') {
@@ -154,7 +164,7 @@ const initUser = (user,type) => {
user["icon"] = 'CircleCheckFilled'
user["color"] = "#0bbd87"
}
if (type === "CC"){
if (type === "CC") {
user["icon"] = "Promotion"
user["color"] = "#3395f8"
}
@@ -169,7 +179,7 @@ const initUser = (user,type) => {
user["icon"] = 'Close'
user["color"] = "#f56c6c"
}
if (state === 'PASS'){
if (state === 'PASS') {
user["icon"] = 'MoreFilled'
user["color"] = "#c0c4cc"
}
@@ -277,7 +287,8 @@ init()
position: relative;
margin-right: 5px;
}
.el-timeline-item__node{
.el-timeline-item__node {
position: absolute;
bottom: 20px;
right: 1px;

View File

@@ -9,7 +9,7 @@
<div style="margin-top: 40px">
<div :style="'transform: scale('+ scale / 100 +');'">
<div id="previewProcess">
<process-tree mode="preview" ref="processTreePreview" id-name="previewProcess"/>
<process-tree :mode="mode" ref="processTreePreview" id-name="previewProcess"/>
</div>
</div>
</div>
@@ -20,6 +20,12 @@ import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
const processTreePreview = ref()
const scale = ref(100)
const props = defineProps({
mode: {
type: String,
default: 'preview'
}
})
nextTick(()=>{
processTreePreview.value.init()

View File

@@ -5,8 +5,11 @@
<slot name="pre"></slot>
<div style="display: flex;flex-wrap: wrap;">
<div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
<el-avatar size="large"
:src="user.avatar"></el-avatar>
<div class="circle-user">
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
<span class="item_name">{{ user.name }}</span>
</el-tooltip>
</div>
<div v-if="user.icon"
class="el-timeline-item__node" :style="{
backgroundColor: user.color
@@ -15,17 +18,15 @@
<component :is="user.icon"/>
</el-icon>
</div>
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
<span class="item_name">{{ user.name }}</span>
</el-tooltip>
</div>
</div>
</div>
</template>
<script setup>
import {Loading,Close,CircleCheckFilled,MoreFilled} from '@element-plus/icons-vue'
import {Loading, Close, CircleCheckFilled, MoreFilled} from '@element-plus/icons-vue'
import {defineProps} from "vue";
const props = defineProps({
row: {
type: Number,
@@ -38,6 +39,10 @@ const props = defineProps({
userInfo: {
type: Array,
default: []
},
mode: {
type: String,
default: 'design'
}
})
@@ -70,7 +75,7 @@ const initUser = (user) => {
user["icon"] = Close
user["color"] = "#f56c6c"
}
if (state === 'PASS'){
if (state === 'PASS') {
user["icon"] = MoreFilled
user["color"] = "#c0c4cc"
}
@@ -80,7 +85,27 @@ const initUser = (user) => {
init()
</script>
<style scoped>
<style scoped lang="scss">
.circle-user {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid #ACACAC;
position: relative;
.circle-icon {
width: 10px;
height: 10px;
position: absolute;
top: auto !important;
bottom: -9px;
right: 15px !important;
}
}
.avatar_name {
display: flex;
flex-direction: column;
@@ -92,7 +117,7 @@ init()
.el-timeline-item__node {
position: absolute;
bottom: 20px;
bottom: 0;
right: 1px;
}

View File

@@ -17,24 +17,17 @@
</el-icon>
<template v-if="selectUser.show && mode === 'view'">
<div class="avatar_button">
<avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
<avatar-ellipsis :row="3" v-if="userInfo.length > 0" :mode="mode" :user-info="userInfo"/>
<el-button type="primary" :icon="Plus" circle/>
</div>
</template>
<template v-else-if="showAvatar">
<span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
<div v-else v-for="item in userInfo" class="circle-user">
<span>{{ item.name }}</span>
<el-button v-if="item.state==='RUNNING'" type="warning" loading circle class="circle-icon"></el-button>
<el-button v-else-if="item.state==='UNACTIVATED'" type="info" :icon="More" circle
class="circle-icon"></el-button>
<el-button v-else type="success" :icon="Check" circle class="circle-icon"></el-button>
</div>
<!-- <avatar-ellipsis :row="3" :user-info="userInfo"/>-->
<avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
</template>
<template v-else>
<span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
<ellipsis :row="3" :content="content" v-else/>
<ellipsis :row="3" :content="content" :mode="mode" v-else/>
</template>
</div>
<div class="node-error" v-if="showError">
@@ -190,26 +183,6 @@ const init = () => {
</script>
<style lang="scss" scoped>
.circle-user {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid #ACACAC;
position: relative;
.circle-icon {
width: 10px;
height: 10px;
position: absolute;
top: auto !important;
bottom: -9px;
right: 15px !important;
}
}
.root {
&:before {
display: none !important;