userModal.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. :title="titleText"
  6. :footer="null"
  7. v-model="isshow"
  8. @cancle="cancel"
  9. width="45%"
  10. :centered="true">
  11. <a-form :form="form" @submit="handleSubmit">
  12. <a-row :gutter="24">
  13. <a-col :span="12">
  14. <!-- 用户名称 -->
  15. <a-form-item label="用户名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  16. <a-input
  17. placeholder="请输入用户名称(最多30个字符)"
  18. allowClear
  19. :maxLength="30"
  20. id="userModal-name"
  21. v-decorator="['formData.name', {
  22. initialValue: formData.name,
  23. getValueFromEvent: $filterEmpty,
  24. rules: [{ required: true, message: '请输入用户名称(最多30个字符)!' }] }]" />
  25. </a-form-item>
  26. </a-col>
  27. <a-col :span="12">
  28. <!-- 手机号码 -->
  29. <a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  30. <a-input
  31. placeholder="请输入手机号码"
  32. allowClear
  33. :maxLength="11"
  34. id="userModal-phone"
  35. v-decorator="['formData.phone', {
  36. initialValue: formData.phone,getValueFromEvent: $filterEmpty,
  37. rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]" />
  38. </a-form-item>
  39. </a-col>
  40. </a-row>
  41. <a-row :gutter="24">
  42. <!-- 性别 -->
  43. <a-col :span="12">
  44. <a-form-item label="性别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  45. <v-select
  46. code="SEX"
  47. id="userModal-sex"
  48. v-decorator="[
  49. 'formData.sex',
  50. {
  51. initialValue: formData.sex,
  52. rules: [{ required: true, message: '请选择性别!' }] },
  53. ]"
  54. allowClear></v-select>
  55. </a-form-item>
  56. </a-col>
  57. <!-- 状态 -->
  58. <a-col :span="12">
  59. <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  60. <a-radio-group
  61. name="radioGroup"
  62. id="userModal-loginFlag"
  63. v-decorator="[
  64. 'formData.loginFlag',
  65. {
  66. initialValue: formData.loginFlag,
  67. rules: [{ required: true, message: '请选择状态!' }] },
  68. ]">
  69. <a-radio :value="1">是</a-radio>
  70. <a-radio :value="0">否</a-radio>
  71. </a-radio-group>
  72. </a-form-item>
  73. </a-col>
  74. </a-row>
  75. <a-row :gutter="24">
  76. <a-col :span="24">
  77. <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  78. <a-select
  79. id="userModal-roleNames"
  80. v-decorator="[
  81. 'formData.roleNames',
  82. {
  83. initialValue: formData.roleNames,
  84. rules: [{ required: true, message: '请选择状态!' }] },
  85. ]"
  86. mode="multiple"
  87. style="width: 100%"
  88. placeholder="请选择角色">
  89. <a-select-option v-for="item in roleList" :key="item.id" :disabled="item.isEnable == '0' ? true : false">{{ item.name }}</a-select-option>
  90. </a-select>
  91. </a-form-item>
  92. </a-col>
  93. </a-row>
  94. <a-row :gutter="24">
  95. <a-col :span="24">
  96. <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  97. <a-textarea
  98. id="userModal-remarks"
  99. :maxLength="500"
  100. v-decorator="[
  101. 'formData.remarks',
  102. {
  103. initialValue: formData.remarks,
  104. getValueFromEvent: $filterEmpty,
  105. rules: [] },
  106. ]"
  107. style="min-height: 50px;"
  108. placeholder="请输入备注(最多500个字符)"
  109. autosize />
  110. </a-form-item>
  111. </a-col>
  112. </a-row>
  113. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  114. <a-button type="primary" @click="handleSubmit()" id="userModal-handleSubmit">
  115. 保存
  116. </a-button>
  117. <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()" id="userModal-handleCancel">
  118. 取消
  119. </a-button>
  120. </a-form-item>
  121. </a-form>
  122. </a-modal>
  123. </div>
  124. </template>
  125. <script>
  126. import {
  127. STable,
  128. VSelect
  129. } from '@/components'
  130. import {
  131. getRoleList,
  132. saveUserPower
  133. } from '@/api/power-user.js'
  134. export default {
  135. name: 'UserModal',
  136. components: {
  137. STable,
  138. VSelect
  139. },
  140. props: {
  141. visible: {
  142. type: Boolean,
  143. default: false
  144. },
  145. data: {
  146. type: Object,
  147. default: function () {
  148. return {}
  149. }
  150. }
  151. },
  152. data () {
  153. return {
  154. titleText: '添加用户',
  155. isshow: this.visible,
  156. formLayout: 'horizontal',
  157. form: this.$form.createForm(this, {
  158. name: 'miniForm'
  159. }),
  160. roleList: [],
  161. formData: {
  162. roleNames: undefined, // 角色
  163. name: '',
  164. loginFlag: '', // 活动状态
  165. phone: '',
  166. sex: '',
  167. remarks: ''
  168. }
  169. }
  170. },
  171. methods: {
  172. cancel (e) {
  173. this.clear()
  174. this.$emit('close')
  175. },
  176. // 保存提交
  177. handleSubmit () {
  178. const _this = this
  179. this.form.validateFields((err, values) => {
  180. if (!err) {
  181. values.formData.roleNames = values.formData.roleNames.join(',')
  182. saveUserPower(Object.assign({
  183. id: this.data.id ? this.data.id : ''
  184. }, values.formData)).then(res => {
  185. if (res.status == 200) {
  186. this.$message.success(res.message ? res.message : '保存成功')
  187. this.$emit('refresh')
  188. setTimeout(function () {
  189. _this.cancel()
  190. }, 300)
  191. }
  192. })
  193. }
  194. })
  195. },
  196. // 取消
  197. handleCancel () {
  198. this.cancel()
  199. },
  200. clear () {
  201. this.form.resetFields()
  202. delete this.formData.id
  203. this.formData.roleNames = []
  204. this.formData.name = ''
  205. this.formData.loginFlag = ''
  206. this.formData.phone = ''
  207. this.formData.sex = ''
  208. this.formData.remarks = ''
  209. },
  210. // 获取角色列表接口
  211. getRoleList () {
  212. getRoleList().then(res => {
  213. if (res.status + '' === '200') {
  214. this.roleList = res.data
  215. } else {
  216. this.$message.warning(res.message)
  217. }
  218. })
  219. }
  220. },
  221. mounted () {
  222. this.getRoleList()
  223. },
  224. beforeCreate () {
  225. this.form = this.$form.createForm(this, {
  226. name: 'miniForm'
  227. })
  228. },
  229. watch: {
  230. visible (newValue, oldValue) {
  231. this.isshow = newValue
  232. },
  233. isshow (newValue, oldValue) {
  234. if (newValue) {
  235. if (this.data.id) { // 编辑
  236. this.titleText = '编辑用户'
  237. this.formData = Object.assign({}, this.data)
  238. delete this.formData.no
  239. let roleNames = this.formData.roleNames
  240. if (roleNames) {
  241. roleNames = roleNames.split(',')
  242. const arr = []
  243. roleNames.map(item => {
  244. const row = this.roleList.find(a => {
  245. return a.name == item
  246. })
  247. if (row) {
  248. arr.push(row.id)
  249. }
  250. })
  251. this.formData.roleNames = arr
  252. } else {
  253. this.formData.roleNames = []
  254. }
  255. this.formData.loginFlag = Number(this.formData.loginFlag)
  256. } else {
  257. this.titleText = '添加用户'
  258. }
  259. } else {
  260. this.cancel()
  261. }
  262. }
  263. }
  264. }
  265. </script>
  266. <style scoped>
  267. .ant-modal-footer {
  268. display: none;
  269. }
  270. </style>