roleSetting.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <view class="container">
  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>
  18. </template>
  19. <script>
  20. import { getPowerRoleList,delectRolePower, updateEnableStatus } from '@/api/powerRole-md.js'
  21. import { clzConfirm } from '@/libs/tools.js'
  22. export default{
  23. data(){
  24. return{
  25. status: 'loadmore',
  26. noDataText: '暂无数据',
  27. // 查询参数
  28. queryParam: {
  29. name: '',
  30. isEnable: ''
  31. },
  32. pageSize: 100,
  33. pageNo: 1,
  34. roleList:[],
  35. checked:true,
  36. nowId: '', // 当前员工 id
  37. loading:false,
  38. total:'' // 获取数据总数
  39. }
  40. },
  41. onLoad() {
  42. },
  43. onShow() {
  44. this.pageNo = 1
  45. this.getRoleList()
  46. },
  47. // 下一页
  48. onReachBottom() {
  49. console.log('next page')
  50. if(this.roleList.length < this.total){
  51. this.pageNo += 1
  52. this.getRoleList()
  53. }else{
  54. this.status = "nomore"
  55. }
  56. },
  57. methods:{
  58. // 获取列表数据
  59. getRoleList(){
  60. let _this = this
  61. this.status = "loading"
  62. getPowerRoleList(Object.assign({pageNo: this.pageNo, pageSize: this.pageSize}, this.queryParam)).then(res => {
  63. if (res.code == 200 || res.status == 204 || res.status == 200) {
  64. if(_this.pageNo>1){
  65. _this.roleList = _this.roleList.concat(res.data.list || [])
  66. }else{
  67. _this.roleList = res.data.list || []
  68. }
  69. _this.total = res.data.count || 0
  70. _this.roleList.map(item => {
  71. item.roleState = item.isEnable == 1
  72. })
  73. } else {
  74. _this.roleList = []
  75. _this.total = 0
  76. _this.noDataText = res.message
  77. }
  78. _this.status = "loadmore"
  79. })
  80. },
  81. // 更改启用禁用状态
  82. roleStatusChange(item,index){
  83. const data={
  84. id:item.id,
  85. flag: item.roleState == true ? 1 :0
  86. }
  87. updateEnableStatus(data).then(res=>{
  88. if(res.status==200){
  89. item.roleState = data.flag == 1
  90. this.roleList.splice(index,1,item)
  91. console.log(this.roleList,data)
  92. }
  93. uni.showToast({icon: 'none', title: res.message})
  94. })
  95. },
  96. // 添加角色
  97. add(){
  98. uni.navigateTo({
  99. url:'/pages/roleSetting/addRole?type=add'
  100. })
  101. },
  102. // 删除角色
  103. delItem(item,index){
  104. let _this = this
  105. clzConfirm({
  106. title: "提示",
  107. content: "数据删除后无法恢复, 确认删除吗?",
  108. showCancel: true,
  109. success: function(e){
  110. if(e.confirm||e.index == 0){
  111. // 删除数据
  112. delectRolePower({id: item.id}).then(res=>{
  113. if(res.status == 200){
  114. uni.showToast({
  115. icon:'none',
  116. title:res.message
  117. })
  118. if(_this.roleList.length>_this.pageSize){
  119. // 刷新列表
  120. _this.roleList.splice(index,1)
  121. }else{
  122. _this.pageNo = 1
  123. }
  124. _this.total = _this.roleList.length
  125. }else{
  126. uni.showToast({icon: 'none', title: res.message})
  127. }
  128. })
  129. }
  130. },
  131. })
  132. },
  133. // 编辑修改
  134. editItem(item){
  135. this.$store.state.vuex_nowRoleInfo=item
  136. uni.navigateTo({
  137. url:'/pages/storeManage/roleSetting/addRole?type=edit'
  138. })
  139. },
  140. // 设置权限
  141. setAuths(item){
  142. uni.navigateTo({
  143. url:'/pages/storeManage/roleSetting/roleAuthSet?id='+item.id
  144. })
  145. },
  146. // 返回
  147. goBack(){
  148. uni.navigateBack()
  149. },
  150. }
  151. }
  152. </script>
  153. <style lang="less" scoped>
  154. .container{
  155. width:100%;
  156. .md-scroll{
  157. flex-grow: 1;
  158. overflow: auto;
  159. .roleContent{
  160. background-color: #fff;
  161. font-size: 28upx;
  162. margin: 20rpx;
  163. border-radius: 20upx;
  164. box-shadow: 1px 1px 3px #EEEEEE;
  165. .roleItem{
  166. padding:35upx 30upx;
  167. color: #666;
  168. border-bottom: 1px dashed #F8F8F8;
  169. display: flex;
  170. justify-content: space-between;
  171. align-items: center;
  172. }
  173. .uni-icons{
  174. margin-right: 6upx;
  175. }
  176. }
  177. }
  178. }
  179. </style>