userModal.vue 7.7 KB

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