userModal.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  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. allowClear
  18. id="userModal-name"
  19. :maxLength="30"
  20. v-decorator="['formData.name', {
  21. initialValue: formData.name,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. allowClear
  32. :maxLength="11"
  33. id="userModal-phone"
  34. v-decorator="['formData.phone', {
  35. initialValue: formData.phone,getValueFromEvent: $filterEmpty,
  36. rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]"
  37. />
  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. >
  70. <a-radio :value="1">启用</a-radio>
  71. <a-radio :value="0">禁用</a-radio>
  72. </a-radio-group>
  73. </a-form-item>
  74. </a-col>
  75. </a-row>
  76. <a-row :gutter="24">
  77. <a-col :span="24">
  78. <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  79. <a-select
  80. id="userModal-roleNames"
  81. v-decorator="[
  82. 'formData.roleNames',
  83. {
  84. initialValue: formData.roleNames,
  85. rules: [{ required: true, message: '请选择角色!' }] },
  86. ]"
  87. mode="multiple"
  88. style="width: 100%"
  89. placeholder="请选择角色"
  90. allowClear
  91. >
  92. <a-select-option
  93. v-for="item in roleList"
  94. :key="item.id"
  95. :disabled="item.isEnable == '0' ? true : false"
  96. >{{ item.name }}</a-select-option
  97. >
  98. </a-select>
  99. </a-form-item>
  100. </a-col>
  101. </a-row>
  102. <a-row :gutter="24">
  103. <a-col :span="24">
  104. <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  105. <a-textarea
  106. id="userModal-remarks"
  107. :maxLength="500"
  108. v-decorator="[
  109. 'formData.remarks',
  110. {
  111. initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
  112. rules: [] },
  113. ]"
  114. style="min-height: 50px;"
  115. placeholder="请输入备注(最多500个字符)"
  116. autosize />
  117. </a-form-item>
  118. </a-col>
  119. </a-row>
  120. <a-form-item :wrapper-col="{ span: 24, offset: 10}">
  121. <a-button type="primary" @click="handleSubmit()" id="userModal-handleSubmit" :style="{ marginRight: '15px' }">
  122. 保存
  123. </a-button>
  124. <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="userModal-handleCancel">
  125. 取消
  126. </a-button>
  127. </a-form-item>
  128. </a-form>
  129. </a-modal>
  130. </div>
  131. </template>
  132. <script>
  133. import { STable, VSelect } from '@/components'
  134. import { getRoleList, saveUserPower } from '@/api/power-user.js'
  135. export default {
  136. name: 'UserModal',
  137. components: {
  138. STable, 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, { name: 'miniForm' }),
  158. roleList: [],
  159. formData: {
  160. roleNames: undefined, // 角色
  161. name: '',
  162. loginFlag: '', // 活动状态
  163. phone: '',
  164. sex: '',
  165. remarks: ''
  166. }
  167. }
  168. },
  169. methods: {
  170. cancel (e) {
  171. this.clear()
  172. this.$emit('close')
  173. },
  174. // 保存提交
  175. handleSubmit () {
  176. const _this = this
  177. this.form.validateFields((err, values) => {
  178. console.log(values, 'values222')
  179. if (!err) {
  180. values.formData.roleNames = values.formData.roleNames.join(',')
  181. console.log(values.formData, ' formData.type222222222')
  182. console.log(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData))
  183. saveUserPower(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
  184. console.log(res, 'res--save')
  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. } else {
  192. // this.$message.error(res.message)
  193. }
  194. })
  195. }
  196. })
  197. },
  198. // 取消
  199. handleCancel () {
  200. this.cancel()
  201. },
  202. clear () {
  203. this.form.resetFields()
  204. delete this.formData.id
  205. this.formData.roleNames = []
  206. this.formData.name = ''
  207. this.formData.loginFlag = ''
  208. this.formData.phone = ''
  209. this.formData.sex = ''
  210. this.formData.remarks = ''
  211. },
  212. // 获取角色列表接口
  213. getRoleList () {
  214. getRoleList().then(res => {
  215. console.log(res, 'res--role')
  216. if (res.status + '' === '200') {
  217. this.roleList = res.data
  218. } else {
  219. this.$message.warning(res.message)
  220. }
  221. })
  222. }
  223. },
  224. mounted () {
  225. this.getRoleList()
  226. },
  227. beforeCreate () {
  228. this.form = this.$form.createForm(this, { name: 'miniForm' })
  229. },
  230. watch: {
  231. visible (newValue, oldValue) {
  232. this.isshow = newValue
  233. },
  234. isshow (newValue, oldValue) {
  235. if (newValue) {
  236. if (this.data.id) { // 编辑
  237. this.titleText = '编辑用户'
  238. this.formData = Object.assign({}, this.data)
  239. delete this.formData.no
  240. let roleNames = this.formData.roleNames
  241. console.log(roleNames, 'roleNames')
  242. if (roleNames) {
  243. roleNames = roleNames.split(',')
  244. console.log(roleNames, 'roleNames22')
  245. const arr = []
  246. console.log(this.roleList, 'this.roleList')
  247. roleNames.map(item => {
  248. const row = this.roleList.find(a => {
  249. return a.name == item
  250. })
  251. if (row) {
  252. arr.push(row.id)
  253. }
  254. })
  255. console.log(arr, 'arrs')
  256. this.formData.roleNames = arr
  257. } else {
  258. this.formData.roleNames = []
  259. }
  260. this.formData.loginFlag = Number(this.formData.loginFlag)
  261. // this.formData.sex = Number(this.formData.sex)
  262. console.log(this.formData, 'this.formData')
  263. } else {
  264. this.titleText = '添加用户'
  265. }
  266. } else {
  267. this.cancel()
  268. }
  269. }
  270. }
  271. }
  272. </script>
  273. <style >
  274. .modalBox{
  275. }
  276. .ant-modal-footer {
  277. display: none;
  278. }
  279. </style>