addRole.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <view class="container">
  3. <evan-form ref="formData" :rules="ruleValidate" :model="formData">
  4. <evan-form-item label="角色名称" prop="name">
  5. <input class="form-input" :maxlength="30" placeholder-class="form-input-placeholder" placeholder="请输入角色名称(最多30个字符)" v-model="formData.name" />
  6. </evan-form-item>
  7. <evan-form-item label="角色描述" prop="remarks">
  8. <textarea placeholder-class="form-input-placeholder" :maxlength="500" placeholder="请输入描述(最多500个字符)" v-model="formData.remarks"/>
  9. </evan-form-item>
  10. <evan-form-item label="状态" prop="roleState">
  11. <view style="width: 100%;display:flex;justify-content: flex-end;">
  12. <u-radio-group v-model="formData.isEnable">
  13. <u-radio
  14. v-for="(item, index) in list" :key="index"
  15. :name="item.value"
  16. shape="circle"
  17. >
  18. {{item.name}}
  19. </u-radio>
  20. </u-radio-group>
  21. </view>
  22. </evan-form-item>
  23. <view class="form-footer-btn">
  24. <button @click="cancel()">取消</button>
  25. <button type="primary" :loading="loading" :style="{background:$config('buttonColors')}" @click="save('formData')">保存</button>
  26. </view>
  27. </evan-form>
  28. </view>
  29. </template>
  30. <script>
  31. import {saveRolePower} from '@/api/powerRole-md.js'
  32. export default{
  33. name:"formData",
  34. data(){
  35. return{
  36. loading: false,
  37. formData:{
  38. name:'',
  39. isEnable:'',
  40. remarks:''
  41. },
  42. type: '', // edit 编辑页 add 新增页
  43. list: [
  44. {
  45. value: 1,
  46. name: '启用',
  47. disabled: false,
  48. },
  49. {
  50. value: 0,
  51. name: '禁用',
  52. disabled: false
  53. }
  54. ],
  55. ruleValidate: {
  56. name: [
  57. { required: true, message: '请输入角色名称', trigger: 'change' },
  58. {
  59. validator: (rule, value, callback) => {
  60. let reg = /^[^<|>]{1,30}$/
  61. if(reg.test(value)){
  62. callback()
  63. }else{
  64. callback(new Error('请输入不含<或>的字符,最多30个字符'))
  65. }
  66. }
  67. }
  68. ],
  69. isEnable: [
  70. {
  71. required: true, type:'string',message: '请选择状态', trigger: 'blur'
  72. }
  73. ],
  74. },
  75. }
  76. },
  77. onLoad(options) {
  78. console.log(options)
  79. this.type = options.type
  80. uni.setNavigationBarTitle({
  81. title: this.type=="add" ? '添加角色' : '编辑角色'
  82. })
  83. this.init()
  84. },
  85. methods:{
  86. // 初始化数据
  87. init(){
  88. if(this.type=='edit'){
  89. let data = this.$store.state.vuex_nowRoleInfo
  90. console.log(data)
  91. this.formData.name = data.name
  92. this.formData.isEnable = data.isEnable
  93. this.formData.remarks = data.remarks || ''
  94. this.formData.id = data.id
  95. }else{
  96. this.formData.name =''
  97. this.formData.isEnable = 0
  98. this.formData.remarks =''
  99. this.formData.id =''
  100. }
  101. },
  102. // 保存
  103. save(name){
  104. let data=this.formData
  105. this.formData.isEnable = String(this.formData.isEnable)
  106. console.log(data)
  107. this.$refs[name].validate((valid) => {
  108. if (valid) {
  109. this.loading = true
  110. saveRolePower(data).then(res=>{
  111. // console.log(res)
  112. if(res.status == 200){
  113. uni.showToast({icon: 'none', title: res.message})
  114. this.cancel()
  115. }else{
  116. uni.showToast({icon: 'none', title: res.message})
  117. }
  118. this.loading = false
  119. }).catch(err=>{
  120. this.loading = false
  121. })
  122. }
  123. })
  124. },
  125. // 取消
  126. cancel(){
  127. setTimeout(function(){
  128. uni.navigateBack()
  129. }, 300)
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="less">
  135. page{
  136. height: 100%;
  137. background: #FFFFFF;
  138. }
  139. .container{
  140. margin: 0 30rpx;
  141. .form-input-placeholder{
  142. text-align: right;
  143. }
  144. textarea {
  145. text-align: right;
  146. margin: 20upx;
  147. height: 100upx;
  148. width: 95%;
  149. }
  150. }
  151. </style>