You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.1 KiB
109 lines
3.1 KiB
<template>
|
|
<view class="border border-solid border-gray-300 rounded-md mt-4 p-2 pt-4 pl-1" @click="collapsed = !collapsed">
|
|
<view class="relative flex justify-between">
|
|
<view class="absolute text-sm bg-white reviewer-title">审核人</view>
|
|
|
|
<view class="flex flex-wrap">
|
|
<template v-for="(item, index) in checkers">
|
|
<u-button
|
|
v-if="index < 2"
|
|
:type="checkedCheckers.find(checker => checker.memberId === item.memberId) ? 'primary' : 'default'"
|
|
size="mini"
|
|
class="m-1"
|
|
@click="handleSelectChecker(item)"
|
|
>
|
|
{{ item.name }}
|
|
</u-button>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- 展示选择的审核人 -->
|
|
<view class="flex items-center justify-end flex-1 text-sm">
|
|
<view v-for="item in showCheckers" class="mx-1">
|
|
<!-- <u-badge :is-dot="true" is-center></u-badge> -->
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="mx-1" v-show="checkedCheckers.length > 3">...</view>
|
|
</view>
|
|
|
|
<!-- 点击更换图标 -->
|
|
<u-icon :name="collapsed ? 'arrow-down' : 'arrow-up'"></u-icon>
|
|
</view>
|
|
|
|
<!-- 隐藏的审核人选项 -->
|
|
<view v-show="!collapsed" class="foot mt-2 flex flex-wrap">
|
|
<template v-for="(item, index) in checkers">
|
|
<u-button
|
|
v-if="index >= 2"
|
|
:type="checkedCheckers.find(checker => checker.memberId === item.memberId) ? 'primary' : 'default'"
|
|
size="mini"
|
|
class="m-1"
|
|
@click="handleSelectChecker(item)"
|
|
>
|
|
{{ item.name }}
|
|
</u-button>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
|
|
const props = defineProps({
|
|
dataCheckers: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const store = useStore();
|
|
// 图标切换
|
|
const collapsed = ref(true);
|
|
|
|
// 审核人员列表 从store获取真实的项目成员列表
|
|
// 项目加载之初 就已经获取了
|
|
const checkers = computed(() => store.state.role.members);
|
|
|
|
// 所有选中的审核人
|
|
let checkedCheckers = ref([]);
|
|
|
|
if (props.dataCheckers) {
|
|
checkedCheckers.value = props.dataCheckers;
|
|
props.dataCheckers.forEach(item => {
|
|
item.name = item.checkerName;
|
|
item.memberId = item.checkerId;
|
|
})
|
|
}
|
|
|
|
// 折叠状态 显示的选中的检查人
|
|
const showCheckers = computed(() => (checkedCheckers.value.length > 3 ? checkedCheckers.value.slice(0, 3) : checkedCheckers.value));
|
|
|
|
defineExpose({ checkedCheckers, collapsed });
|
|
|
|
/**
|
|
* 点击成员 切换检查人的选中状态
|
|
* @param {object} member 成员对象
|
|
*/
|
|
function handleSelectChecker(member) {
|
|
const target = checkedCheckers.value.find(item => item.memberId === member.memberId);
|
|
if (target) {
|
|
// 已经选中 将此项移除选中的数组中
|
|
checkedCheckers.value = checkedCheckers.value.filter(item => item.memberId !== member.memberId);
|
|
} else {
|
|
checkedCheckers.value.push(member);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.reviewer-title {
|
|
width: 60px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
top: -25px;
|
|
left: 10px;
|
|
}
|
|
</style>
|
|
|