roleModal.vue 4.6 KB

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