userModal.vue 8.4 KB

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