roleModal.vue 4.4 KB

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