addRole.vue 3.9 KB

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