roleModal.vue 4.8 KB

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