addRole.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <view class="container">
  3. <evan-form ref="formData" :rules="ruleValidate" :model="formData">
  4. <evan-form-item prop="name">
  5. <u-input class="form-input" :maxlength="30" style="width: 100%;" placeholder="请填写岗位名称(最多30个字符)" v-model="formData.name" />
  6. </evan-form-item>
  7. <view class="role-box">
  8. <view>岗位权限:</view>
  9. <roleAuthSet ref="roleSet"></roleAuthSet>
  10. </view>
  11. <view class="form-footer-btn flex align_center justify_center">
  12. <u-button shape="circle" v-if="!formData.isEnable" @click="delRole()" :custom-style="{width:'300rpx' }">删除</u-button>
  13. <u-button shape="circle" type="info" :custom-style="{ background: '#066cff', color: '#fff',width:'300rpx',marginLeft:'20rpx' }" @click="save('formData')">保存</u-button>
  14. </view>
  15. </evan-form>
  16. </view>
  17. </template>
  18. <script>
  19. import roleAuthSet from './roleAuthSet.vue'
  20. import { clzConfirm } from '@/libs/tools.js'
  21. import {saveRoleMenu, delectRolePower} from '@/api/powerRole-md.js'
  22. export default{
  23. name:"formData",
  24. components:{
  25. roleAuthSet
  26. },
  27. data(){
  28. return{
  29. loading: false,
  30. formData:{
  31. name:'',
  32. isEnable:'1',
  33. remarks:''
  34. },
  35. type: '', // edit 编辑页 add 新增页
  36. ruleValidate: {
  37. name: [
  38. { required: true, message: '请输入角色名称', trigger: 'change' },
  39. {
  40. validator: (rule, value, callback) => {
  41. let reg = /^[^<|>]{1,30}$/
  42. if(reg.test(value)){
  43. callback()
  44. }else{
  45. callback(new Error('请输入不含<或>的字符,最多30个字符'))
  46. }
  47. }
  48. }
  49. ],
  50. },
  51. }
  52. },
  53. onLoad(options) {
  54. console.log(options)
  55. this.type = options.type
  56. uni.setNavigationBarTitle({
  57. title: this.type=="add" ? '添加角色' : '编辑角色'
  58. })
  59. // 初始化角色
  60. this.$refs.roleSet.getMenuList(options.id)
  61. this.init()
  62. },
  63. methods:{
  64. // 初始化数据
  65. init(){
  66. if(this.type=='edit'){
  67. let data = this.$store.state.vuex_nowRoleInfo
  68. this.formData.name = data.name
  69. this.formData.id = data.id
  70. }else{
  71. this.formData.name =''
  72. this.formData.id =''
  73. }
  74. },
  75. // 保存
  76. save(name){
  77. this.$refs[name].validate((valid) => {
  78. if (valid) {
  79. this.loading = true
  80. const menusIds = this.$refs.roleSet.getSelMenu()
  81. console.log(menusIds,'menus--')
  82. const params = Object.assign(this.formData,menusIds)
  83. saveRoleMenu(this.formData).then(res=>{
  84. if(res.status == 200){
  85. this.cancel()
  86. }
  87. uni.showToast({icon: 'none', title: res.message})
  88. this.loading = false
  89. }).catch(err=>{
  90. this.loading = false
  91. })
  92. }
  93. })
  94. },
  95. // 删除角色
  96. delRole(){
  97. let _this = this
  98. const item = this.formData
  99. clzConfirm({
  100. title: "提示",
  101. content: "数据删除后无法恢复, 确认删除吗?",
  102. showCancel: true,
  103. success: function(e){
  104. if(e.confirm||e.index == 0){
  105. // 删除数据
  106. delectRolePower({id: item.id}).then(res=>{
  107. if(res.status == 200){
  108. this.cancel()
  109. }
  110. uni.showToast({icon: 'none', title: res.message})
  111. })
  112. }
  113. },
  114. })
  115. },
  116. // 取消
  117. cancel(){
  118. setTimeout(function(){
  119. uni.navigateBack()
  120. }, 300)
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="less">
  126. page{
  127. height: 100%;
  128. background: #FFFFFF;
  129. }
  130. .container{
  131. margin: 0 30rpx;
  132. .form-input-placeholder{
  133. text-align: right;
  134. }
  135. .role-box{
  136. padding: 20rpx 0;
  137. }
  138. }
  139. </style>