editRole.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view class=" uni-container ">
  3. <view class="u-demo-block">
  4. <view class="u-demo-block__content">
  5. <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
  6. <u-form label-position="top" :model="user" ref="form1" label-width='60'>
  7. <u-form-item label-position="top" label="角色名称" prop="roleName">
  8. <u-input v-model="user.roleName" border="none" placeholder="请输入角色名称"></u-input>
  9. </u-form-item>
  10. <u-form-item label-position="top" label="角色标识" prop="roleLable">
  11. <u-input v-model="user.roleLable" border="none" placeholder="请输入角色标识"></u-input>
  12. </u-form-item>
  13. <u-form-item label-position="top" label="角色排序" prop="roleSort" >
  14. <u-input v-model="user.roleSort" border="none" placeholder="请输入角色排序"></u-input>
  15. </u-form-item>
  16. </u-form>
  17. <u-button type="primary" text="提交" customStyle="height: 72rpx;width: 340rpx;margin-top: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 60rpx;background: #4CB2B6;" @click="submit"></u-button>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import {
  24. updateAppRoles // 修改用户
  25. } from '@/api/personnel_permissions';
  26. import {
  27. DICT_TYPE,
  28. getDictDatas
  29. } from "@/utils/dict";
  30. let that = null;
  31. export default {
  32. data() {
  33. return {
  34. user: {
  35. id: undefined,
  36. roleName: undefined,
  37. roleLable: undefined,
  38. roleSort: undefined,
  39. },
  40. rules: {
  41. 'roleName': {
  42. // type: 'string',
  43. required: true,
  44. message: '角色名称不能为空',
  45. trigger: ['blur']
  46. },
  47. 'roleLable': {
  48. // type: 'string',
  49. required: true,
  50. message: '角色标识不能为空',
  51. trigger: ['blur']
  52. },
  53. },
  54. }
  55. },
  56. onLoad(option) {
  57. that=this
  58. let str = decodeURIComponent(option.val)
  59. if (str != "undefined") {
  60. that.user = JSON.parse(str);
  61. console.log(that.user);
  62. }
  63. },
  64. onReady() {
  65. // 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
  66. this.$refs.form1.setRules(this.rules)
  67. },
  68. methods: {
  69. getUser() {
  70. getUserProfile().then(response => {
  71. this.user = response.data
  72. })
  73. },
  74. submit() {
  75. this.user.status=0
  76. // 如果有错误,会在catch中返回报错信息数组,校验通过则在then中返回true
  77. this.$refs.form1.validate().then(res => {
  78. // uni.$u.toast('校验通过')
  79. updateAppRoles(this.user).then(response => {
  80. this.$modal.msgSuccess('修改成功')
  81. this.$tab.navigateBack('/pagesA/fire/personnel_permissions/index')
  82. })
  83. }).catch(errors => {
  84. console.log(errors);
  85. // uni.$u.toast('校验失败')/
  86. })
  87. },
  88. hideKeyboard() {
  89. uni.hideKeyboard()
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. .uni-container {
  96. padding: 20px;
  97. background-color: #f5f7f9;
  98. }
  99. page {
  100. height: 100%;
  101. background-color: #f5f7f9;
  102. position: relative;
  103. }
  104. /deep/ .u-input[data-v-fdbb9fe6],
  105. /deep/ .u-input.data-v-fdbb9fe6 {
  106. background-color: #fff;
  107. border: 1px solid #E2E4E6;
  108. height: 100rpx;
  109. }
  110. /deep/ .uni-input-wrapper{
  111. margin-left: 20rpx;
  112. }
  113. /deep/.u-form-item__body__left__content[data-v-5e7216f1],/deep/.u-form-item__body__left__content.data-v-5e7216f1,/deep/.u-form-item__body__left__content{
  114. padding-right: 0;
  115. }
  116. </style>