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.
55 lines
1.8 KiB
55 lines
1.8 KiB
<template>
|
|
<view class="border border-solid border-gray-300 rounded-md mt-3 p-2" @click="collapsed = !collapsed">
|
|
<view class="top flex justify-between">
|
|
<view class="mr-3 text-sm">审核人</view>
|
|
|
|
<!-- 展示选择的审核人 -->
|
|
<view class="flex item-center truncate 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">
|
|
<u-button
|
|
v-for="item in checkers"
|
|
:type="item.checked ? 'primary' : 'default'"
|
|
size="mini"
|
|
class="my-1 mx-2"
|
|
@click="item.checked = !item.checked"
|
|
>{{ item.name }}</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
|
|
const store = useStore();
|
|
// 图标切换
|
|
const collapsed = ref(true);
|
|
|
|
// 审核人员列表 从store获取真实的项目成员列表
|
|
// 项目加载之初 就已经获取了
|
|
const checkers = computed(() => store.state.role.members);
|
|
|
|
// 所有选中的审核人
|
|
const checkedCheckers = computed(() => checkers.value.filter(item => item.checked) || []);
|
|
// 折叠状态 显示的选中的检查人
|
|
// 没有任何检查人 显示项目经理下的成员作为检查人
|
|
const showCheckers = computed(() => {
|
|
if (checkedCheckers.value.length === 0) {
|
|
// 没有选中的检查人
|
|
return [checkers.value[0]];
|
|
}
|
|
return checkedCheckers.value.length > 3 ? checkedCheckers.value.slice(0, 3) : checkedCheckers.value;
|
|
});
|
|
</script>
|
|
|