starwork-uniapp/src/pages/select-member-or-department/select-member-or-department.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>