roleModal.vue 4.3 KB

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