roleModal.vue 4.6 KB

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