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