forked from ccsens_fe/tall-mui-3
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.
87 lines
2.5 KiB
87 lines
2.5 KiB
<template>
|
|
<view class="my-3" v-if="allMembers && allMembers.length">
|
|
<view class="flex justify-between">
|
|
<view class="flex flex-wrap text-center items-center">
|
|
<u-tag
|
|
:type="member.checked ? 'primary' : 'info'"
|
|
:mode="member.checked ? 'dark' : 'light'"
|
|
v-for="(member, index) in topMembers"
|
|
:key="member.memberId"
|
|
class="mb-2 mr-3"
|
|
style="width: 60px"
|
|
:text="member.name"
|
|
:closeable="false"
|
|
@click="tagClick(index, member, 'topMembers')"
|
|
/>
|
|
<span class="ml-2" v-if="!show" @click="show = true">...</span>
|
|
</view>
|
|
</view>
|
|
<!-- 折叠起来的 -->
|
|
<view class="flex flex-wrap text-center items-center" v-if="show">
|
|
<u-tag
|
|
:type="member.checked ? 'primary' : 'info'"
|
|
:mode="member.checked ? 'dark' : 'light'"
|
|
v-for="(member, index) in bottomMembers"
|
|
:key="member.memberId"
|
|
class="mb-2 mr-3"
|
|
style="width: 60px"
|
|
:text="member.name"
|
|
:closeable="false"
|
|
@click="tagClick(index, member, 'bottomMembers')"
|
|
/>
|
|
<u-icon class="ml-2" name="arrow-up" v-if="show" size="26" @click="show = false"></u-icon>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
props: {
|
|
checkerList: {
|
|
default: () => [],
|
|
type: Array,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return { allMembers: [], show: false, topMembers: [], bottomMembers: [] };
|
|
},
|
|
|
|
computed: mapState('role', ['members']),
|
|
|
|
mounted() {
|
|
if (this.members && this.members.length) {
|
|
this.allMembers = this.members;
|
|
// TODO: 等后台返回默认检查人后修改
|
|
this.allMembers.forEach(item => {
|
|
item.checked = false;
|
|
});
|
|
this.topMembers = this.members.slice(0, 3);
|
|
this.bottomMembers = this.members.slice(3);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
tagClick(index, item, membersType) {
|
|
// 点击选择或取消选择
|
|
const arr = this.$u.deepClone(this[membersType]);
|
|
arr[index].checked = !arr[index].checked;
|
|
this[membersType] = [...arr];
|
|
// 将选中的id传给checkerList
|
|
this.$emit('setCheckerList', arr[index].checked, item);
|
|
},
|
|
|
|
// 清空所有选中的检查人
|
|
clearChecked() {
|
|
for (let i = 0; i < this.topMembers.length; i++) {
|
|
this.topMembers[i].checked = false;
|
|
}
|
|
for (let i = 0; i < this.bottomMembers.length; i++) {
|
|
this.bottomMembers[i].checked = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|