userModal.vue 8.4 KB

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