roleSetting.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <template>
  2. <view class="container flex flex_column">
  3. <view class="md-scroll">
  4. <view class="roleContent" v-for="(item,index) in roleList" :key="item.id">
  5. <view class="roleItem">
  6. <view style="width: 80%;">{{item.name}}</view>
  7. <view @click="editItem(item)">
  8. <u-icon size="34" name="edit-pen"></u-icon>
  9. </view>
  10. </view>
  11. </view>
  12. <view style="padding:0 30upx 30upx;">
  13. <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="roleList.length==0 && status!='loading'" mode="list"></u-empty>
  14. <!-- <u-loadmore v-if="(total>=roleList.length&&roleList.length)||status=='loading'" :status="status" /> -->
  15. </view>
  16. </view>
  17. <view class="footer">
  18. <u-button @click="addRole(null)" :throttle-time="100" :custom-style="{ background: '#066cff', color: '#fff',width:'400rpx' }" shape="circle" type="info">
  19. 新增岗位
  20. </u-button>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. import { getPowerRoleList, updateEnableStatus } from '@/api/powerRole-md.js'
  26. export default{
  27. data(){
  28. return{
  29. status: 'loadmore',
  30. noDataText: '暂无数据',
  31. // 查询参数
  32. queryParam: {
  33. name: '',
  34. isEnable: ''
  35. },
  36. pageSize: 100,
  37. pageNo: 1,
  38. roleList:[],
  39. checked:true,
  40. nowId: '', // 当前员工 id
  41. loading:false,
  42. total:'' // 获取数据总数
  43. }
  44. },
  45. onLoad() {
  46. },
  47. onShow() {
  48. this.pageNo = 1
  49. this.getRoleList()
  50. },
  51. // 下一页
  52. onReachBottom() {
  53. console.log('next page')
  54. if(this.roleList.length < this.total){
  55. this.pageNo += 1
  56. this.getRoleList()
  57. }else{
  58. this.status = "nomore"
  59. }
  60. },
  61. methods:{
  62. // 获取列表数据
  63. getRoleList(){
  64. let _this = this
  65. this.status = "loading"
  66. getPowerRoleList(Object.assign({pageNo: this.pageNo, pageSize: this.pageSize}, this.queryParam)).then(res => {
  67. if (res.code == 200 || res.status == 204 || res.status == 200) {
  68. if(_this.pageNo>1){
  69. _this.roleList = _this.roleList.concat(res.data.list || [])
  70. }else{
  71. _this.roleList = res.data.list || []
  72. }
  73. _this.total = res.data.count || 0
  74. _this.roleList.map(item => {
  75. item.roleState = item.isEnable == 1
  76. })
  77. } else {
  78. _this.roleList = []
  79. _this.total = 0
  80. _this.noDataText = res.message
  81. }
  82. _this.status = "loadmore"
  83. })
  84. },
  85. // 更改启用禁用状态
  86. roleStatusChange(item,index){
  87. const data={
  88. id:item.id,
  89. flag: item.roleState == true ? 1 :0
  90. }
  91. updateEnableStatus(data).then(res=>{
  92. if(res.status==200){
  93. item.roleState = data.flag == 1
  94. this.roleList.splice(index,1,item)
  95. console.log(this.roleList,data)
  96. }
  97. uni.showToast({icon: 'none', title: res.message})
  98. })
  99. },
  100. // 添加岗位
  101. addRole(){
  102. uni.navigateTo({
  103. url:'/pages/storeManage/roleSetting/addRole?type=add'
  104. })
  105. },
  106. // 编辑修改
  107. editItem(item){
  108. this.$store.state.vuex_nowRoleInfo=item
  109. uni.navigateTo({
  110. url:'/pages/storeManage/roleSetting/addRole?type=edit&id='+item.id
  111. })
  112. },
  113. // 返回
  114. goBack(){
  115. uni.navigateBack()
  116. },
  117. }
  118. }
  119. </script>
  120. <style lang="less" scoped>
  121. .container{
  122. width:100%;
  123. height: 100vh;
  124. .md-scroll{
  125. flex-grow: 1;
  126. overflow: auto;
  127. .roleContent{
  128. background-color: #fff;
  129. font-size: 28upx;
  130. margin: 20rpx;
  131. border-radius: 20upx;
  132. box-shadow: 1px 1px 3px #EEEEEE;
  133. .roleItem{
  134. padding:35upx 30upx;
  135. color: #666;
  136. border-bottom: 1px dashed #F8F8F8;
  137. display: flex;
  138. justify-content: space-between;
  139. align-items: center;
  140. }
  141. .uni-icons{
  142. margin-right: 6upx;
  143. }
  144. }
  145. }
  146. .footer{
  147. padding: 0.6rem;
  148. background: #ffffff;
  149. }
  150. }
  151. </style>