index.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <view class="page-container">
  3. <!-- 顶部导航栏 -->
  4. <wd-navbar
  5. title="审批"
  6. placeholder safe-area-inset-top fixed
  7. />
  8. <!-- Tabs 区域 -->
  9. <view class="bg-white">
  10. <wd-tabs v-model="tabIndex" shrink @change="handleTabChange">
  11. <wd-tab title="待办任务" />
  12. <wd-tab title="已办任务" />
  13. <wd-tab title="我的流程" />
  14. <wd-tab title="抄送我的" />
  15. </wd-tabs>
  16. </view>
  17. <!-- 列表内容 -->
  18. <TodoList v-show="tabType === 'todo'" :active="tabType === 'todo'" />
  19. <DoneList v-show="tabType === 'done'" :active="tabType === 'done'" />
  20. <MyList v-show="tabType === 'my'" :active="tabType === 'my'" />
  21. <CopyList v-show="tabType === 'copy'" :active="tabType === 'copy'" />
  22. </view>
  23. </template>
  24. <script lang="ts" setup>
  25. import { computed, ref } from 'vue'
  26. import { getAndClearTabParams } from '@/utils/url'
  27. import CopyList from './components/copy-list.vue'
  28. import DoneList from './components/done-list.vue'
  29. import MyList from './components/my-list.vue'
  30. import TodoList from './components/todo-list.vue'
  31. definePage({
  32. style: {
  33. navigationBarTitleText: '',
  34. navigationStyle: 'custom',
  35. },
  36. })
  37. const tabTypes: string[] = ['todo', 'done', 'my', 'copy']
  38. const tabIndex = ref(0)
  39. const tabType = computed<string>(() => tabTypes[tabIndex.value])
  40. /** Tab 切换 */
  41. function handleTabChange({ index }: { index: number }) {
  42. tabIndex.value = index
  43. }
  44. /** 初始化:根据 tab 参数设置默认 tab */
  45. onShow(() => {
  46. // 从 globalData 获取参数(switchTab 跳转时使用)
  47. const tabParams = getAndClearTabParams()
  48. if (tabParams?.tab) {
  49. const index = tabTypes.indexOf(tabParams.tab)
  50. if (index !== -1) {
  51. tabIndex.value = index
  52. }
  53. }
  54. })
  55. </script>