roleModal.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <div>
  3. <a-modal
  4. centered
  5. class="roleEdit-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. :title="titleText"
  9. v-model="isshow"
  10. @cancel="isshow=false"
  11. :width="800">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="roleEdit-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <!-- 用户名称 -->
  22. <a-form-model-item label="角色名称" prop="name">
  23. <a-input
  24. id="roleEdit-name"
  25. v-model.trim="form.name"
  26. @change="filterEmpty"
  27. :maxLength="30"
  28. allowClear
  29. placeholder="请输入角色名称(最多30个字符)"/>
  30. </a-form-model-item>
  31. <!-- 状态 -->
  32. <a-form-model-item label="状态" prop="isEnable">
  33. <a-radio-group name="radioGroup" v-model="form.isEnable" placeholder="请选择状态">
  34. <a-radio :value="1">启用</a-radio>
  35. <a-radio :value="0">禁用</a-radio>
  36. </a-radio-group>
  37. </a-form-model-item>
  38. <a-form-model-item label="角色描述" prop="remarks">
  39. <a-textarea
  40. id="roleEdit-remarks"
  41. v-model.trim="form.remarks"
  42. :maxLength="500"
  43. allowClear
  44. placeholder="请输入描述(最多500个字符)"/>
  45. </a-form-model-item>
  46. <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
  47. <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
  48. <a-button :style="{ marginLeft: '8px' }" @click="isshow=false">取消</a-button>
  49. </a-form-model-item>
  50. </a-form-model>
  51. </a-spin>
  52. </a-modal>
  53. </div>
  54. </template>
  55. <script>
  56. import { commonMixin } from '@/utils/mixin'
  57. import { STable, VSelect } from '@/components'
  58. import { saveRolePower } from '@/api/power-role.js'
  59. export default {
  60. name: 'RoleModal',
  61. mixins: [commonMixin],
  62. components: {
  63. STable, VSelect
  64. },
  65. props: {
  66. visible: {
  67. type: Boolean,
  68. default: false
  69. },
  70. nowData: {
  71. type: Object,
  72. default: function () {
  73. return {}
  74. }
  75. }
  76. },
  77. data () {
  78. return {
  79. titleText: '添加角色',
  80. isshow: this.visible,
  81. spinning: false,
  82. formItemLayout: {
  83. labelCol: { span: 6 },
  84. wrapperCol: { span: 16 }
  85. },
  86. form: {
  87. name: '',
  88. isEnable: undefined,
  89. remarks: ''
  90. },
  91. rules: {
  92. name: [ { required: true, message: '请输入角色名称', trigger: 'blur' }, { pattern: '^[^<|>]{1,30}$', message: '请输入不含<或>的字符,最多30个字符' } ],
  93. isEnable: [ { required: true, message: '请选择状态', trigger: 'change' } ]
  94. }
  95. }
  96. },
  97. methods: {
  98. // 过滤空格
  99. filterEmpty () {
  100. let str = this.form.name
  101. str = str.replace(/\ +/g, '')
  102. str = str.replace(/[ ]/g, '')
  103. str = str.replace(/[\r\n]/g, '')
  104. this.form.name = str
  105. },
  106. // 保存提交
  107. handleSubmit () {
  108. const _this = this
  109. this.$refs.ruleForm.validate(valid => {
  110. if (valid) {
  111. const params = JSON.parse(JSON.stringify(_this.form))
  112. params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
  113. _this.spinning = true
  114. saveRolePower(params).then(res => {
  115. if (res.status == 200) {
  116. _this.$message.success(res.message)
  117. _this.$emit('refresh')
  118. setTimeout(function () {
  119. _this.isshow = false
  120. _this.spinning = false
  121. }, 300)
  122. } else {
  123. _this.spinning = false
  124. }
  125. })
  126. } else {
  127. console.log('error submit!!')
  128. return false
  129. }
  130. })
  131. },
  132. resetForm () {
  133. this.$refs.ruleForm.resetFields()
  134. this.form.name = ''
  135. this.form.isEnable = undefined
  136. this.form.remarks = ''
  137. this.titleText = '新增角色'
  138. }
  139. },
  140. watch: {
  141. visible (newValue, oldValue) {
  142. this.isshow = newValue
  143. },
  144. isshow (newValue, oldValue) {
  145. if (!newValue) {
  146. this.$emit('close')
  147. this.resetForm()
  148. }
  149. },
  150. nowData: {
  151. handler (newValue, oldValue) {
  152. if (this.isshow && newValue) {
  153. if (this.nowData.id) { // 编辑
  154. this.titleText = '编辑角色'
  155. this.form = Object.assign({}, this.nowData)
  156. this.form.isEnable = Number(this.nowData.isEnable)
  157. }
  158. }
  159. },
  160. deep: true
  161. }
  162. }
  163. }
  164. </script>
  165. <style >
  166. .ant-modal-footer {
  167. display: none;
  168. }
  169. </style>