feat: 完成申请审批成员及部门组件封装

src/components/TopNavigation/TopNavigation.vue

@@ -31,6 +31,13 @@
             {{ title }}
           </view>
         </view>
+        <view
+          v-if="rightButtonText"
+          class="text-3.5 font-normal pos-absolute right-5"
+          @click="rightButton"
+        >
+          {{ rightButtonText }}
+        </view>
       </view>
     </view>
   </view>
@@ -59,16 +66,24 @@
     backUrl: {
       type: String,
       default: '/static/images/icon_back.png'
+    },
+    rightButtonText: {
+      type: [String, null],
+      default: null
     }
   })
 
-  const emits = defineEmits(['back'])
+  const emits = defineEmits(['back', 'rightButton'])
 
   const back = () => {
     uni.navigateBack()
     emits('back')
   }
 
+  const rightButton = () => {
+    emits('rightButton')
+  }
+
   onMounted(async () => {
     systemInfo.value = await $basic.getSystemInfo()
   })

src/pages.json

@@ -239,6 +239,14 @@
       },
       "needLogin": false
     },
+    {
+      "path": "pages/select-member-or-department/select-member-or-department",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "disableScroll": true
+      }
+    },
     {
       "path": "pages/workbench/workbench",
       "type": "page"

src/pages/approval/components/Components.vue

@@ -61,12 +61,21 @@
         @change="changeDate"
       ></DatetimePicker>
       <wd-divider color="#bcbfbe"></wd-divider>
-      <Images id="8" title="图片"></Images>
+      <Images :id="8" title="图片"></Images>
       <wd-divider color="#bcbfbe"></wd-divider>
       <Description
-        id="9"
+        :id="9"
         title="图片21378912378923718982371217389712397837889713247893428793142897134728900978"
       ></Description>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <MemberOrDepartment :id="10" title="成员" type="member" :multiple="true"></MemberOrDepartment>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <MemberOrDepartment
+        :id="11"
+        title="部门"
+        type="department"
+        :multiple="true"
+      ></MemberOrDepartment>
     </view>
   </view>
 </template>
@@ -78,6 +87,7 @@
   import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
   import Images from '@/pages/approval/components/Images.vue'
   import Description from '@/pages/approval/components/Description.vue'
+  import MemberOrDepartment from '@/pages/approval/components/MemberOrDepartment.vue'
 
   const columns = ref<Record<number, any>>([
     {

src/pages/approval/components/MemberOrDepartment.vue

@@ -0,0 +1,65 @@
+<template>
+  <view class="px-2 text-3.5">
+    <view class="flex flex-items-center pos-relative">
+      <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
+      <view>{{ title }}</view>
+    </view>
+    <view class="py-2" @click="toSelect">
+      <view class="flex flex-items-center flex-justify-between">
+        <view>{{ text || placeholder }}</view>
+        <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const text = ref<string | null>(null)
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [Number, null],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    }
+  })
+
+  const toSelect = () => {
+    const params = {
+      type: props.type,
+      multiple: props.multiple,
+      title: props.type === 'member' ? '选择审批用户' : '选择部门'
+    }
+    uni.navigateTo({
+      url: `/pages/select-member-or-department/select-member-or-department?params=${JSON.stringify(params)}`,
+      events: {
+        change: res => {
+          console.log(1111, res)
+        }
+      }
+    })
+  }
+</script>

src/pages/select-member-or-department/components/MemberOrDepartmentItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class="flex flex-items-center py-2 text-4" @click="toClick">
+    <view
+      v-if="item.type === 'member'"
+      class="w-10 h-10 flex flex-justify-center flex-items-center"
+    >
+      <image
+        src="/static/images/icon_default_avatar.png"
+        class="w-8 h-8 rounded-2"
+        mode="aspectFill"
+      ></image>
+    </view>
+    <view v-else class="w-10 h-10 flex flex-justify-center flex-items-center bg-#e4f1ff rounded-2">
+      <image src="/static/images/icon_file.png" class="w-6 h-6" mode="aspectFill"></image>
+    </view>
+    <view class="ml-2 break-all max-w-40 overflow-hidden text-ellipsis line-clamp-1">
+      {{ item.name }}
+    </view>
+    <view class="ml-a" v-if="item.type === 'department'">
+      <wd-divider vertical></wd-divider>
+    </view>
+    <view
+      v-if="item.type === 'department'"
+      :class="[disabled ? 'color-#87a9fb' : 'custom-color-blue']"
+      class="ml-1"
+    >
+      下级
+    </view>
+    <wd-icon
+      name="arrow-right"
+      size="14px"
+      class="ml-2"
+      :color="disabled ? '#87a9fb' : '#255cf7'"
+      v-if="item.type === 'department'"
+    ></wd-icon>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const emits = defineEmits(['click'])
+
+  const props = defineProps({
+    item: {
+      type: Object,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const toClick = () => {
+    emits('click')
+  }
+</script>

src/pages/select-member-or-department/components/SearchItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="flex flex-items-center py-2 text-4" @click="toClick">
+    <view
+      v-if="item.type === 'member'"
+      class="w-10 h-10 flex flex-justify-center flex-items-center"
+    >
+      <image
+        src="/static/images/icon_default_avatar.png"
+        class="w-8 h-8 rounded-2"
+        mode="aspectFill"
+      ></image>
+    </view>
+    <view v-else class="w-10 h-10 flex flex-justify-center flex-items-center bg-#e4f1ff rounded-2">
+      <image src="/static/images/icon_file.png" class="w-6 h-6" mode="aspectFill"></image>
+    </view>
+    <view class="ml-2 break-all max-w-40 overflow-hidden text-ellipsis line-clamp-1">
+      {{ item.name }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const emits = defineEmits(['click'])
+
+  const props = defineProps({
+    item: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const toClick = () => {
+    emits('click')
+  }
+</script>

src/pages/select-member-or-department/select-member-or-department.vue

@@ -0,0 +1,275 @@
+<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'
+
+  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(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>

src/types/uni-pages.d.ts

@@ -29,6 +29,7 @@ interface NavigateToOptions {
        "/pages/mine/mine" |
        "/pages/notification/notification" |
        "/pages/reset-password/reset-password" |
+       "/pages/select-member-or-department/select-member-or-department" |
        "/pages/workbench/workbench" |
        "/pages/attendance/attendance-add-group/attendance-add-group" |
        "/pages/attendance/attendance-add-group/attendance-device" |