origanizationSection.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <view>
  3. <view class="section" v-for="(item,index) in data" :key="index">
  4. <view class="box">
  5. <view class="item">
  6. <view class="left">
  7. <view class="icon" v-if="active == index" @click.stop="change_active(index,item)">
  8. <image src="./icon/close.png" mode=""></image>
  9. </view>
  10. <view class="icon" v-if="active != index" @click.stop="change_active(index,item)">
  11. <image src="./icon/open.png" mode=""></image>
  12. </view>
  13. <view class="text" v-if="item.children.length == 0">{{item.title}} ({{item.user_num}})</view>
  14. <view class="text" v-if="item.children != 0">{{item.title}}</view>
  15. </view>
  16. <view class="right" @click="go_record(item.page_id)">
  17. <uni-icons type="eye"></uni-icons>
  18. </view>
  19. </view>
  20. <view class="children" v-show="active == index">
  21. <origanizationSection :data="item.children"></origanizationSection>
  22. <view class="list" v-show="item.children == 0">
  23. <view class="item" v-for="(item_2,index_2) in user_list" :key="index_2"
  24. @click="go_user_info(item_2.staff_num)">
  25. <view class="left">
  26. <view class="icon">{{item_2.name.charAt(0)}}</view>
  27. <!-- #ifdef APP-PLUS -->
  28. <view class="text">{{item_2.name}} {{item_2.position_name}}</view>
  29. <!-- #endif -->
  30. <!-- #ifdef H5 -->
  31. <view class="text">{{item_2.name}} {{item_2.position_name}} {{item_2.mobile}}</view>
  32. <!-- #endif -->
  33. </view>
  34. <!-- #ifdef APP-PLUS -->
  35. <view class="right" @click.stop="phone(item_2.mobile)">
  36. <uni-icons type="phone"></uni-icons>
  37. </view>
  38. <!-- #endif -->
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. export default {
  48. name: "origanizationSection",
  49. props: [
  50. "data"
  51. ],
  52. data() {
  53. return {
  54. // 当前展开部门
  55. active: 99999999,
  56. user_list: []
  57. };
  58. },
  59. methods: {
  60. // 获取当前部门人员
  61. get_user_list(id) {
  62. this.user_list = []
  63. uni.showLoading({
  64. mask:true
  65. })
  66. this.$api.user_get_org_users({
  67. section_id: id
  68. }).then((res) => {
  69. uni.hideLoading()
  70. this.user_list = res.data.content.data
  71. })
  72. },
  73. change_active(index, item) {
  74. if (this.active == index) {
  75. this.active = 99999999
  76. } else {
  77. this.active = index
  78. if (item.children.length == 0) {
  79. this.get_user_list(item.id)
  80. }
  81. }
  82. },
  83. go_record(page_id) {
  84. console.log(page_id)
  85. if (page_id == null) {
  86. uni.showToast({
  87. icon: "none",
  88. title: "该部门还未关联二维码"
  89. })
  90. } else {
  91. console.log(page_id)
  92. uni.navigateTo({
  93. url: "../../../index/record/record?pageId=" + page_id + "&mine_code=" + uni.getStorageSync(
  94. 'mine_code'),
  95. })
  96. }
  97. },
  98. phone(mobile) {
  99. console.log(mobile)
  100. if (mobile != null) {
  101. uni.makePhoneCall({
  102. phoneNumber: mobile
  103. });
  104. }
  105. },
  106. go_user_info(staff_num) {
  107. uni.navigateTo({
  108. url: "./personal_information/personal_information?staff_num=" + staff_num
  109. })
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="scss">
  115. .section {
  116. box-sizing: border-box;
  117. // padding: 0 20rpx;
  118. .box {
  119. .item {
  120. min-height: 100rpx;
  121. padding: 10rpx 0;
  122. display: flex;
  123. align-items: center;
  124. justify-content: space-between;
  125. margin-left: 20rpx;
  126. border-bottom: 1rpx solid #F3F8F7;
  127. .left {
  128. display: flex;
  129. align-items: center;
  130. .icon {
  131. width: 90rpx;
  132. text-align: center;
  133. image {
  134. width: 24rpx;
  135. height: 24rpx;
  136. }
  137. }
  138. .text {
  139. width: 470rpx;
  140. font-size: 32rpx;
  141. }
  142. }
  143. .right {
  144. width: 90rpx;
  145. text-align: center;
  146. }
  147. }
  148. .children {
  149. margin-left: 20rpx;
  150. }
  151. .list {
  152. .item {
  153. height: 110rpx;
  154. display: flex;
  155. justify-content: space-between;
  156. align-items: center;
  157. margin-left: 108rpx;
  158. border-bottom: 1rpx solid #F3F8F7;
  159. .left {
  160. width: 500rpx;
  161. .icon {
  162. width: 35rpx;
  163. text-align: center;
  164. line-height: 35rpx;
  165. border-radius: 50%;
  166. border: 1rpx solid #00A1E9;
  167. font-size: 24rpx;
  168. color: #00A1E9;
  169. }
  170. .text {
  171. width: 350rpx;
  172. margin-left: 18rpx;
  173. font-size: 30rpx;
  174. }
  175. }
  176. .right {
  177. line-height: 110rpx;
  178. width: 90rpx;
  179. text-align: center;
  180. }
  181. }
  182. }
  183. }
  184. }
  185. </style>