148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<template>
|
||
<div style="max-width: 350px">
|
||
<template v-if="mode === 'DESIGN'">
|
||
<el-button disabled icon="User" type="primary" size="mini" round>选择人员</el-button>
|
||
<span class="placeholder"> {{ placeholder }}</span>
|
||
</template>
|
||
<template v-else>
|
||
<template v-if="perm === 'E'">
|
||
<el-button icon="User" type="primary" size="mini" round @click="chooseUser">
|
||
选择人员
|
||
</el-button>
|
||
<user-picker :multiple="multiple" ref="userPicker" title="请选择人员" v-model:value="userList" @ok="selected"/>
|
||
<span class="placeholder"> {{ placeholder }}</span>
|
||
<div style="display: flex;">
|
||
<role-items v-model="userList"/>
|
||
<!-- <div class="userStyle" v-for="(user, i) in userList" :key="i">-->
|
||
<!-- <span @click="delDept(i)">×</span>-->
|
||
<!--<!– <el-avatar :src="user.avatar"/>–>-->
|
||
<!-- <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">-->
|
||
<!-- <span>{{ user.name }}</span>-->
|
||
<!-- </el-tooltip>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</template>
|
||
<template v-else-if="perm === 'R'">
|
||
<div style="display: flex;">
|
||
<!-- class="view_user"-->
|
||
<div v-for="(user, i) in userList" :key="i" >
|
||
<!-- <el-avatar :src="user.avatar"/>-->
|
||
<el-tag>{{ user.name }}</el-tag>
|
||
<!-- <el-tooltip effect="dark" :content="user.name" placement="bottom-start">-->
|
||
<!-- <span>{{ user.name }}</span>-->
|
||
<!-- </el-tooltip>-->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
|
||
import RoleItems from "@/views/workflow/process/common/RoleItems.vue";
|
||
import {computed, defineProps} from "vue";
|
||
const emit = defineEmits(["input"])
|
||
const showPickerSelect = ref(false)
|
||
const userPicker = ref()
|
||
const userList = ref([])
|
||
const props = defineProps({
|
||
mode: {
|
||
type: String,
|
||
default: 'DESIGN'
|
||
},
|
||
required: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
value: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
perm: {
|
||
type: String,
|
||
default: 'E'
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择人员'
|
||
},
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
const chooseUser=()=>{
|
||
userPicker.value.showUserPicker()
|
||
}
|
||
watch(() => props.perm, (newVal, oldVal) => {
|
||
// console.log('newVal',newVal,userPicker.value)
|
||
});
|
||
|
||
const selected = (select) => {
|
||
let userInfoList = []
|
||
for (let val of select) {
|
||
let userInfo = {
|
||
id: val.id,
|
||
name: val.name,
|
||
avatar: val.avatar,
|
||
}
|
||
userInfoList.push(userInfo)
|
||
}
|
||
userList.value = userInfoList
|
||
// console.log('select',userList.value)
|
||
}
|
||
const delDept = (i) => {
|
||
userList.value.splice(i, 1)
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.placeholder {
|
||
margin-left: 10px;
|
||
color: #adabab;
|
||
font-size: smaller;
|
||
}
|
||
|
||
.userStyle {
|
||
width: 45px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
margin-right: 10px;
|
||
|
||
span:first-child {
|
||
position: absolute;
|
||
right: -3px;
|
||
top: -11px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
span:last-child {
|
||
text-align: center;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden
|
||
}
|
||
}
|
||
|
||
.view_user {
|
||
width: 45px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-right: 10px;
|
||
|
||
span {
|
||
text-align: center;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden
|
||
}
|
||
}
|
||
</style>
|