roleModal.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. :title="titleText"
  6. v-model="isshow"
  7. @cancle="cancel"
  8. width="45%"
  9. :centered="true">
  10. <a-form :form="form" @submit="handleSubmit">
  11. <!-- 用户名称 -->
  12. <a-form-item label="角色名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  13. <a-input
  14. placeholder="请输入角色名称(最多30个字符)"
  15. allowClear
  16. :maxLength="30"
  17. id="roleModal-name"
  18. v-decorator="['formData.name', {
  19. initialValue: formData.name,getValueFromEvent: $filterEmpty,
  20. rules: [{ required: true, message: '请输入角色名称(最多30个字符)!' }] }]" />
  21. </a-form-item>
  22. <!-- 状态 -->
  23. <a-form-item label="状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  24. <a-radio-group
  25. name="radioGroup"
  26. id="roleModal-isEnable"
  27. v-decorator="[
  28. 'formData.isEnable',
  29. {
  30. initialValue: formData.isEnable,
  31. rules: [{ required: true, message: '请选择状态!' }] },
  32. ]">
  33. <a-radio :value="1">启用</a-radio>
  34. <a-radio :value="0">禁用</a-radio>
  35. </a-radio-group>
  36. </a-form-item>
  37. <a-form-item label="角色描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
  38. <a-textarea
  39. id="roleModal-remarks"
  40. v-decorator="[
  41. 'formData.remarks',
  42. { initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
  43. rules: [] },
  44. ]"
  45. style="min-height: 60px;"
  46. placeholder="请输入角色描述(最多500个字符)"
  47. :maxLength="500"
  48. autosize />
  49. </a-form-item>
  50. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  51. <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
  52. 保存
  53. </a-button>
  54. <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
  55. 取消
  56. </a-button>
  57. </a-form-item>
  58. </a-form>
  59. </a-modal>
  60. </div>
  61. </template>
  62. <script>
  63. import {
  64. STable,
  65. VSelect
  66. } from '@/components'
  67. import {
  68. saveRolePower
  69. } from '@/api/power-role.js'
  70. export default {
  71. name: 'RoleModal',
  72. components: {
  73. STable,
  74. VSelect
  75. },
  76. props: {
  77. visible: {
  78. type: Boolean,
  79. default: false
  80. },
  81. data: {
  82. type: Object,
  83. default: function () {
  84. return {}
  85. }
  86. }
  87. },
  88. data () {
  89. return {
  90. titleText: '添加角色',
  91. isshow: this.visible,
  92. formLayout: 'horizontal',
  93. form: this.$form.createForm(this, {
  94. name: 'roleModal'
  95. }),
  96. formData: {
  97. name: '',
  98. isEnable: '', // 活动状态
  99. remarks: ''
  100. }
  101. }
  102. },
  103. methods: {
  104. cancel (e) {
  105. this.clear()
  106. this.$emit('close')
  107. },
  108. // 保存提交
  109. handleSubmit () {
  110. const _this = this
  111. this.form.validateFields((err, values) => {
  112. if (!err) {
  113. saveRolePower(Object.assign(this.formData, values.formData)).then(res => {
  114. if (res.status == 200) {
  115. this.$message.success(res.message ? res.message : '保存成功')
  116. this.$emit('refresh')
  117. setTimeout(function () {
  118. _this.cancel()
  119. }, 300)
  120. }
  121. })
  122. }
  123. })
  124. },
  125. // 取消
  126. handleCancel () {
  127. this.cancel()
  128. },
  129. clear () {
  130. this.form.resetFields()
  131. delete this.formData.id
  132. this.formData.name = ''
  133. this.formData.isEnable = ''
  134. this.formData.remarks = ''
  135. }
  136. },
  137. beforeCreate () {
  138. this.form = this.$form.createForm(this, {
  139. name: 'roleModal'
  140. })
  141. },
  142. watch: {
  143. visible (newValue, oldValue) {
  144. this.isshow = newValue
  145. },
  146. isshow (newValue, oldValue) {
  147. if (newValue) {
  148. if (this.data.id) { // 编辑
  149. this.titleText = '编辑角色'
  150. this.formData = Object.assign({}, this.data)
  151. delete this.formData.no
  152. this.formData.isEnable = Number(this.formData.isEnable)
  153. } else {
  154. this.titleText = '添加角色'
  155. }
  156. } else {
  157. this.cancel()
  158. }
  159. }
  160. }
  161. }
  162. </script>
  163. <style>
  164. .modalBox {}
  165. .ant-modal-footer {
  166. display: none;
  167. }
  168. </style>