addRole.vue 3.9 KB

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