list.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <view>
  3. <van-sticky>
  4. <view class="top-wrap">
  5. <view @click="handleGoSearch">
  6. <van-search disabled use-left-icon-slot shape="round" placeholder="客户名称/社会信用码">
  7. <view slot="left-icon">
  8. <image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
  9. </view>
  10. </van-search>
  11. </view>
  12. <van-tabs id="tabs" :active="status" title-active-color="#3385FF" color="#3385FF" @change="typeChange">
  13. <van-tab :title="item" :name="item" v-for="item in tabList" :key="item"></van-tab>
  14. </van-tabs>
  15. </view>
  16. </van-sticky>
  17. <van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0" />
  18. <view class="list" v-else>
  19. <approve-list-item v-for="item in list" :key="item" :data="item"></approve-list-item>
  20. </view>
  21. <image src="../static/seal-icon.png" mode="aspectFill" class="add-btn" @click="handleGoApplySeal" v-if="showAddSeal"></image>
  22. </view>
  23. </template>
  24. <script>
  25. import {apiSealList,apiSealApproveList} from '@/api/approve/seal.js'
  26. import approveListItem from '../components/approveListItem.vue'
  27. export default {
  28. components:{
  29. approveListItem
  30. },
  31. computed:{
  32. showAddSeal(){
  33. // 只有销售和合规能有此按钮
  34. let RoleTypeCode=this.$store.state.userInfo.RoleTypeCode
  35. if(RoleTypeCode==='ficc_seller'||RoleTypeCode==='rai_seller'||RoleTypeCode==='compliance'||RoleTypeCode==='ficc_group'||RoleTypeCode==='rai_group'){
  36. return true
  37. }else{
  38. return false
  39. }
  40. }
  41. },
  42. data() {
  43. return {
  44. tabList:[],
  45. status: '待审批',
  46. list:[],
  47. page:1,
  48. finished:false,
  49. }
  50. },
  51. onLoad() {
  52. this.initTabs()
  53. },
  54. onShow() {
  55. this.list=[]
  56. this.page=1
  57. this.getList()
  58. this.$nextTick(()=>{
  59. this.selectComponent('#tabs').resize();// 解决初始渲染 vant tab 底部条
  60. })
  61. },
  62. onPullDownRefresh() {
  63. this.page=1
  64. this.finished=false
  65. this.list=[]
  66. this.getList()
  67. setTimeout(()=>{
  68. uni.stopPullDownRefresh()
  69. },1500)
  70. },
  71. onReachBottom() {
  72. if(this.finished) return
  73. this.page++
  74. this.getList()
  75. },
  76. methods: {
  77. //初始化tab
  78. initTabs(){
  79. // ficc销售 权益销售
  80. const RoleTypeCode=this.$store.state.userInfo.RoleTypeCode
  81. if(RoleTypeCode==='ficc_seller'||RoleTypeCode==='rai_seller'||RoleTypeCode==='ficc_group'||RoleTypeCode==='rai_group'||RoleTypeCode==='compliance'){
  82. this.tabList=['待审批','处理中','已审批','已作废','已撤回']
  83. this.status='待审批'
  84. }
  85. // ficc管理员 权益管理员 合规compliance
  86. if(RoleTypeCode==='ficc_admin'||RoleTypeCode==='rai_admin'||RoleTypeCode==='admin'){
  87. this.tabList=['待审批','处理中','已审批','已作废']
  88. this.status='待审批'
  89. }
  90. },
  91. //去添加用印申请、
  92. handleGoApplySeal(){
  93. uni.navigateTo({
  94. url:'/pages-approve/seal/addSeal'
  95. })
  96. },
  97. // 去搜索
  98. handleGoSearch() {
  99. uni.navigateTo({
  100. url: '../search/index?type=seal'
  101. })
  102. },
  103. typeChange(e){
  104. this.status=e.detail.name
  105. this.page=1
  106. this.finished=false
  107. this.list=[]
  108. this.getList()
  109. },
  110. //获取列表数据
  111. async getList(){
  112. let res=null
  113. if(this.status==='已撤回'){
  114. res=await apiSealList({
  115. CurrentIndex:this.page,
  116. Status:this.status,
  117. Keyword:''
  118. })
  119. }else{
  120. res=await apiSealApproveList({
  121. CurrentIndex:this.page,
  122. Status:this.status,
  123. Keyword:''
  124. })
  125. }
  126. if(res.code===200){
  127. if(!res.data.List||res.data.List.length===0){
  128. this.finished=true
  129. }else{
  130. let arr=res.data.List.map(item=>{
  131. return {
  132. title:item.CompanyName,
  133. saller:item.UserName,
  134. submitTime:this.status==='处理中'?item.ModifyTime:item.CreateTime,
  135. approveTime:item.ApproveTime,
  136. backTime:item.ModifyTime,
  137. cancelTime:item.InvalidTime,
  138. status:item.Status,
  139. applyType:item.SealType,
  140. ContractApprovalId:item.ContractApprovalId,
  141. ContractApprovalRecordId:item.ContractApprovalRecordId,
  142. type:'seal'
  143. }
  144. })
  145. this.list=[...this.list,...arr]
  146. }
  147. }
  148. },
  149. },
  150. }
  151. </script>
  152. <style lang="scss">
  153. .search-icon {
  154. width: 40rpx;
  155. height: 40rpx;
  156. display: block;
  157. position: relative;
  158. top: 4rpx;
  159. margin-right: 10rpx;
  160. }
  161. .list{
  162. padding: 20rpx;
  163. }
  164. .add-btn{
  165. width: 120rpx;
  166. height: 120rpx;
  167. position: fixed;
  168. bottom: 102rpx;
  169. right: 34rpx;
  170. z-index: 100;
  171. }
  172. </style>