index.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <view>
  3. <uni-card>
  4. <uni-list>
  5. <uni-list-item>
  6. <template v-slot:header>
  7. EU单号
  8. </template>
  9. <template v-slot:footer>
  10. YGTX-QJ7
  11. </template>
  12. </uni-list-item>
  13. <uni-list-item>
  14. <template v-slot:header>
  15. 部门
  16. </template>
  17. <template v-slot:footer>
  18. 研发部
  19. </template>
  20. </uni-list-item>
  21. <uni-list-item>
  22. <template v-slot:header>
  23. 发起人
  24. </template>
  25. <template v-slot:footer>
  26. 账号1
  27. </template>
  28. </uni-list-item>
  29. <uni-list-item>
  30. <template v-slot:header>
  31. 请假类别
  32. </template>
  33. <template v-slot:footer>
  34. 年假
  35. </template>
  36. </uni-list-item>
  37. <uni-list-item>
  38. <template v-slot:header>
  39. 开始时间
  40. </template>
  41. <template v-slot:footer>
  42. 2024/10/10
  43. </template>
  44. </uni-list-item>
  45. <uni-list-item>
  46. <template v-slot:header>
  47. 结束时间
  48. </template>
  49. <template v-slot:footer>
  50. 2024/10/12
  51. </template>
  52. </uni-list-item>
  53. <uni-list-item>
  54. <template v-slot:header>
  55. 多少小时
  56. </template>
  57. <template v-slot:footer>
  58. 48
  59. </template>
  60. </uni-list-item>
  61. <uni-list-item>
  62. <template v-slot:header>
  63. 部门经理审批
  64. </template>
  65. <template v-slot:footer>
  66. </template>
  67. </uni-list-item>
  68. <uni-list-item>
  69. <template v-slot:header>
  70. 综合管理部审批
  71. </template>
  72. <template v-slot:footer>
  73. </template>
  74. </uni-list-item>
  75. <uni-list-item>
  76. <template v-slot:header>
  77. 副总经理审批
  78. </template>
  79. <template v-slot:footer>
  80. </template>
  81. </uni-list-item>
  82. <uni-list-item>
  83. <template v-slot:header>
  84. 总经理审批
  85. </template>
  86. <template v-slot:footer>
  87. </template>
  88. </uni-list-item>
  89. </uni-list>
  90. </uni-card>
  91. <uni-card>
  92. <uni-list-item>
  93. <template v-slot:header>
  94. 上传附件
  95. </template>
  96. </uni-list-item>
  97. <uni-list-item>
  98. <template v-slot:body>
  99. <uni-file-picker v-model="fileList" :autoUpload="false" mode="list" limit="5" file-mediatype="all"
  100. title="选择文件" @select="handleSelect" @progress="handleProgress" @delete="handleDelete"></uni-file-picker>
  101. </template>
  102. </uni-list-item>
  103. </uni-card>
  104. </view>
  105. </template>
  106. <script setup lang="ts">
  107. import { reactive, ref } from 'vue'
  108. import { onLoad } from '@dcloudio/uni-app'
  109. let fileList = reactive([])
  110. function handleSelect(e) {
  111. console.log('handleSelect', e);
  112. }
  113. function handleProgress(e) {
  114. console.log('handleProgress', e);
  115. }
  116. function handleDelete(e) {
  117. console.log('handleDelete', e);
  118. console.log('handleDelete.target', e.target);
  119. }
  120. onLoad((options) => {
  121. // 获取传入的标题参数
  122. const title = options.title || '流程信息';
  123. const id = options.id;
  124. console.log('id', id);
  125. // 设置导航栏标题
  126. uni.setNavigationBarTitle({
  127. title: title
  128. });
  129. })
  130. </script>
  131. <style lang="scss">
  132. </style>