123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <template>
- <view class="container">
- <view class="md-scroll">
- <view class="roleContent" v-for="(item,index) in roleList" :key="item.id">
- <view class="roleItem">
- <view style="width: 80%;">{{item.name}}</view>
- <view @click="editItem(item)">
- <u-icon size="34" name="edit-pen"></u-icon>
- </view>
- </view>
- </view>
- <view style="padding:0 30upx 30upx;">
- <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>
- <u-loadmore v-if="(total>=roleList.length&&roleList.length)||status=='loading'" :status="status" />
- </view>
- </view>
- </view>
- </template>
- <script>
- import { getPowerRoleList,delectRolePower, updateEnableStatus } from '@/api/powerRole-md.js'
- import { clzConfirm } from '@/libs/tools.js'
- export default{
- data(){
- return{
- status: 'loadmore',
- noDataText: '暂无数据',
- // 查询参数
- queryParam: {
- name: '',
- isEnable: ''
- },
- pageSize: 100,
- pageNo: 1,
- roleList:[],
- checked:true,
- nowId: '', // 当前员工 id
- loading:false,
- total:'' // 获取数据总数
- }
- },
- onLoad() {
- },
- onShow() {
- this.pageNo = 1
- this.getRoleList()
- },
- // 下一页
- onReachBottom() {
- console.log('next page')
- if(this.roleList.length < this.total){
- this.pageNo += 1
- this.getRoleList()
- }else{
- this.status = "nomore"
- }
- },
- methods:{
- // 获取列表数据
- getRoleList(){
- let _this = this
- this.status = "loading"
- getPowerRoleList(Object.assign({pageNo: this.pageNo, pageSize: this.pageSize}, this.queryParam)).then(res => {
- if (res.code == 200 || res.status == 204 || res.status == 200) {
- if(_this.pageNo>1){
- _this.roleList = _this.roleList.concat(res.data.list || [])
- }else{
- _this.roleList = res.data.list || []
- }
- _this.total = res.data.count || 0
- _this.roleList.map(item => {
- item.roleState = item.isEnable == 1
- })
- } else {
- _this.roleList = []
- _this.total = 0
- _this.noDataText = res.message
- }
- _this.status = "loadmore"
- })
- },
- // 更改启用禁用状态
- roleStatusChange(item,index){
- const data={
- id:item.id,
- flag: item.roleState == true ? 1 :0
- }
- updateEnableStatus(data).then(res=>{
- if(res.status==200){
- item.roleState = data.flag == 1
- this.roleList.splice(index,1,item)
- console.log(this.roleList,data)
- }
- uni.showToast({icon: 'none', title: res.message})
- })
- },
- // 添加角色
- add(){
- uni.navigateTo({
- url:'/pages/roleSetting/addRole?type=add'
- })
- },
- // 删除角色
- delItem(item,index){
- let _this = this
- clzConfirm({
- title: "提示",
- content: "数据删除后无法恢复, 确认删除吗?",
- showCancel: true,
- success: function(e){
- if(e.confirm||e.index == 0){
- // 删除数据
- delectRolePower({id: item.id}).then(res=>{
- if(res.status == 200){
- uni.showToast({
- icon:'none',
- title:res.message
- })
- if(_this.roleList.length>_this.pageSize){
- // 刷新列表
- _this.roleList.splice(index,1)
- }else{
- _this.pageNo = 1
- }
- _this.total = _this.roleList.length
- }else{
- uni.showToast({icon: 'none', title: res.message})
- }
- })
- }
- },
- })
- },
- // 编辑修改
- editItem(item){
- this.$store.state.vuex_nowRoleInfo=item
- uni.navigateTo({
- url:'/pages/storeManage/roleSetting/addRole?type=edit'
- })
- },
- // 设置权限
- setAuths(item){
- uni.navigateTo({
- url:'/pages/storeManage/roleSetting/roleAuthSet?id='+item.id
- })
- },
- // 返回
- goBack(){
- uni.navigateBack()
- },
- }
- }
- </script>
- <style lang="less" scoped>
- .container{
- width:100%;
- .md-scroll{
- flex-grow: 1;
- overflow: auto;
- .roleContent{
- background-color: #fff;
- font-size: 28upx;
- margin: 20rpx;
- border-radius: 20upx;
- box-shadow: 1px 1px 3px #EEEEEE;
- .roleItem{
- padding:35upx 30upx;
- color: #666;
- border-bottom: 1px dashed #F8F8F8;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .uni-icons{
- margin-right: 6upx;
- }
- }
- }
- }
- </style>
|