41 changed files with 35 additions and 125 deletions
@ -1,87 +0,0 @@ |
|||
<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> |
@ -1,13 +0,0 @@ |
|||
<template> |
|||
<u-modal v-model="show" content="111111"></u-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { show: false }; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style></style> |
Loading…
Reference in new issue