czh-20260612-增加新的部门选人组件,支持多选,默认跳转到当前用户所在的部门
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div style="margin-left: 1px">
|
||||
<a-empty v-if="selectedUsers.length === 0" />
|
||||
<div v-else>
|
||||
<a-button-group
|
||||
v-for="(user, index) in selectedUsers"
|
||||
:key="'user-' + user.id + '-' + index"
|
||||
class="small-space"
|
||||
>
|
||||
<a-button class="btn-green" size="small">
|
||||
<UserOutlined />
|
||||
{{ user.realname }}
|
||||
</a-button>
|
||||
<a-button v-if="!disabled" class="btn-green" size="small" @click="deleteUser(index)">
|
||||
<CloseOutlined />
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { UserOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
||||
import type { UserItem } from './types';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
disabled?: boolean;
|
||||
selectedUsers: UserItem[];
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
selectedUsers: () => [],
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(['update:selectedUsers']);
|
||||
|
||||
function deleteUser(index: number) {
|
||||
const arr = [...props.selectedUsers];
|
||||
arr.splice(index, 1);
|
||||
emit('update:selectedUsers', arr);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.small-space {
|
||||
margin: 2px;
|
||||
}
|
||||
.btn-green {
|
||||
background-color: #52c41a;
|
||||
color: #fff;
|
||||
border-color: #52c41a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user