277 lines
8.1 KiB
Vue
277 lines
8.1 KiB
Vue
<route lang="json5">
|
||
{
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
disableScroll: true
|
||
}
|
||
}
|
||
</route>
|
||
<template>
|
||
<view>
|
||
<view v-if="showSearch" class="h-[calc(100vh-60px)] flex flex-col">
|
||
<view v-if="systemInfo" :style="{ marginTop: systemInfo.safeAreaInsets?.top + 'px' }">
|
||
<view class="h-12 pt-1 pb-2">
|
||
<wd-search
|
||
:placeholder-left="true"
|
||
:focus="false"
|
||
@change="changeSearch"
|
||
@cancel="showSearch = false"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="flex-1 box-border" :scroll-y="true">
|
||
<view class="bg-white">
|
||
<view
|
||
v-for="item in list"
|
||
:key="item.id"
|
||
class="border-[#ebebeb] border-b-1 border-b-solid px-4 flex flex-items-center"
|
||
>
|
||
<view
|
||
v-if="!(type === 'member' && item.type === 'department')"
|
||
class="mr-3"
|
||
@click="toClick(item)"
|
||
>
|
||
<wd-icon
|
||
v-if="value.includes(item)"
|
||
name="check-circle-filled"
|
||
color="#255cf9"
|
||
size="26px"
|
||
></wd-icon>
|
||
<wd-icon v-else name="circle1" color="#838589" size="26px"></wd-icon>
|
||
</view>
|
||
<SearchItem class="flex-1" :item="item" @click="toClick(item)"></SearchItem>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view v-if="!showSearch" class="h-[calc(100vh-60px-env(safe-area-inset-bottom))] flex flex-col">
|
||
<TopNavigation :title="title"></TopNavigation>
|
||
<view
|
||
@click="showSearch = true"
|
||
class="bg-white flex flex-justify-center flex-items-center rounded color-#a6a6a6 mx-4 mt-3 py-1.5"
|
||
>
|
||
<wd-icon name="search" size="16px" class="mr-2"></wd-icon>
|
||
<view>搜索</view>
|
||
</view>
|
||
<view class="flex flex-items-center m-4 text-3.5 break-all overflow-hidden whitespace-nowrap">
|
||
<view
|
||
v-for="(department, index) in organizationList"
|
||
:key="department.id"
|
||
class="flex flex-items-center"
|
||
@click="toOrganization(index)"
|
||
>
|
||
<span
|
||
:class="[index === organizationList.length - 1 ? 'color-#838589' : 'custom-color-blue']"
|
||
>
|
||
{{ department.name }}
|
||
</span>
|
||
<span v-if="index !== organizationList.length - 1" class="mx-0.5">/</span>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="flex-1 box-border" :scroll-y="true">
|
||
<view class="bg-white">
|
||
<view
|
||
v-for="item in list"
|
||
:key="item.id"
|
||
class="border-[#ebebeb] border-b-1 border-b-solid px-4 flex flex-items-center"
|
||
>
|
||
<view
|
||
v-if="!(type === 'member' && item.type === 'department')"
|
||
class="mr-3"
|
||
@click="toClick(item)"
|
||
>
|
||
<wd-icon
|
||
v-if="value.includes(item)"
|
||
name="check-circle-filled"
|
||
color="#255cf9"
|
||
size="26px"
|
||
></wd-icon>
|
||
<wd-icon v-else name="circle1" color="#838589" size="26px"></wd-icon>
|
||
</view>
|
||
<MemberOrDepartmentItem
|
||
class="flex-1"
|
||
:item="item"
|
||
:disabled="item.type === 'department' && value.includes(item)"
|
||
@click="toClick(item)"
|
||
></MemberOrDepartmentItem>
|
||
</view>
|
||
</view>
|
||
<view class="py-5 px-15">
|
||
<wd-divider color="#838589">仅显示已开通账号的人员</wd-divider>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view
|
||
class="pb-safe h-60px px-4 border-[#ebebeb] border-t-1 border-t-solid text-3.5 flex flex-items-center"
|
||
>
|
||
<view class="flex flex-items-center flex-justify-between w-full">
|
||
<view class="flex flex-items-center" v-if="value.length" @click="showSelected = true">
|
||
<view class="custom-color-blue">已选中：{{ value.length }}个人</view>
|
||
<wd-icon name="arrow-right" size="16px" class="ml-2" color="#255cf7"></wd-icon>
|
||
</view>
|
||
<view v-else></view>
|
||
<view class="custom-bg-blue color-white py-1 px-5 rounded" @click="confirm">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<wd-popup v-model="showSelected" position="bottom">
|
||
<view class="h-100vh flex flex-col bg-#f3f5fa">
|
||
<TopNavigation
|
||
title="已选中"
|
||
:have-back="false"
|
||
right-button-text="确定"
|
||
@right-button="showSelected = false"
|
||
></TopNavigation>
|
||
<scroll-view class="flex-1 box-border" :scroll-y="true">
|
||
<view class="bg-white">
|
||
<view
|
||
v-for="item in value"
|
||
:key="item.id"
|
||
class="flex flex-items-center px-4 py-3 border-[#ebebeb] border-b-1 border-b-solid"
|
||
>
|
||
<image :src="item.avatar" class="w-10 h-10 rounded-2"></image>
|
||
<view class="ml-4 text-3.5">
|
||
<view>{{ item.name }}</view>
|
||
<view class="mt-1 color-#a6a6a6 text-3">{{ item.name }}</view>
|
||
</view>
|
||
<view class="p-1 ml-a bg-#f3f5f8 rounded-50%" @click="deleteItem(item)">
|
||
<image src="/static/images/icon_delete.png" class="w-5 h-5"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</wd-popup>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useBasicStore } from '@/store'
|
||
import MemberOrDepartmentItem from '@/pages/select-member-or-department/components/MemberOrDepartmentItem.vue'
|
||
import SearchItem from '@/pages/select-member-or-department/components/SearchItem.vue'
|
||
import GetSystemInfoResult = UniNamespace.GetSystemInfoResult
|
||
|
||
const instance = getCurrentInstance().proxy
|
||
const eventChannel = instance.getOpenerEventChannel()
|
||
|
||
const type = ref<string>('')
|
||
const multiple = ref<boolean>(false)
|
||
const title = ref<string>('')
|
||
const showSearch = ref<boolean>(false)
|
||
|
||
const organizationList = ref<Array<object>>([
|
||
{
|
||
id: 1,
|
||
type: 'department',
|
||
name: '技术部'
|
||
}
|
||
])
|
||
|
||
const $basic = useBasicStore()
|
||
|
||
const systemInfo = ref<GetSystemInfoResult>(null)
|
||
|
||
const value = ref<Array>([])
|
||
const showSelected = ref<boolean>(false)
|
||
|
||
const list = ref<Array<object>>([
|
||
{
|
||
id: 0,
|
||
type: 'department',
|
||
name: 'xxx的互联',
|
||
avatar: '/static/images/icon_file.png'
|
||
},
|
||
{
|
||
id: 1,
|
||
type: 'member',
|
||
name: '张三',
|
||
avatar: '/static/images/icon_default_avatar.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
type: 'member',
|
||
name: '李四',
|
||
avatar: '/static/images/icon_default_avatar.png'
|
||
},
|
||
{
|
||
id: 3,
|
||
type: 'member',
|
||
name: '王五',
|
||
avatar: '/static/images/icon_default_avatar.png'
|
||
}
|
||
])
|
||
|
||
const toClick = item => {
|
||
if (value.value.includes(item)) {
|
||
value.value = value.value.filter(v => v !== item)
|
||
} else {
|
||
if (multiple.value || value.value.length === 0) {
|
||
value.value.push(item)
|
||
} else {
|
||
uni.showToast({
|
||
title: '最多选择一个',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
const deleteItem = item => {
|
||
value.value = value.value.filter(v => v !== item)
|
||
}
|
||
|
||
onMounted(async () => {
|
||
systemInfo.value = await $basic.getSystemInfo()
|
||
})
|
||
|
||
function changeSearch({ value }) {
|
||
console.log('输入', value)
|
||
}
|
||
|
||
onLoad(options => {
|
||
const params = JSON.parse(options.params)
|
||
type.value = params.type
|
||
multiple.value = params.multiple
|
||
title.value = params.title
|
||
})
|
||
|
||
const toOrganization = index => {
|
||
if (index === organizationList.value.length - 1) {
|
||
return
|
||
}
|
||
uni.navigateBack({
|
||
delta: organizationList.value.length - index - 1
|
||
})
|
||
}
|
||
|
||
const change = e => {
|
||
console.log('change', e)
|
||
}
|
||
|
||
const confirm = () => {
|
||
eventChannel.emit('change', { value: value.value })
|
||
uni.navigateBack({
|
||
delta: organizationList.value.length
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
:deep(.wd-checkbox) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.wd-search {
|
||
background: transparent;
|
||
}
|
||
|
||
:deep(.wd-search__block) {
|
||
padding: 3px 0;
|
||
background-color: #e2e5ea;
|
||
border-radius: 0.5rem;
|
||
}
|
||
|
||
:deep(.wd-search__cancel) {
|
||
color: #a6a6a6;
|
||
}
|
||
</style>
|