userModal.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  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. :maxLength="11"
  23. v-decorator="['formData.mobile', {
  24. initialValue: formData.mobile,
  25. rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]"
  26. />
  27. </a-form-item>
  28. </a-col>
  29. </a-row>
  30. <a-row :gutter="24">
  31. <!-- 性别 -->
  32. <a-col :span="12">
  33. <a-form-item label="性别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  34. <v-select
  35. code="SEX"
  36. v-decorator="[
  37. 'formData.sex',
  38. {
  39. initialValue: formData.sex,
  40. rules: [{ required: true, message: '请选择性别!' }] },
  41. ]"
  42. allowClear ></v-select>
  43. </a-form-item>
  44. </a-col>
  45. <!-- 状态 -->
  46. <a-col :span="12">
  47. <a-form-item label="所在网点" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
  48. <a-select
  49. placeholder="请选择"
  50. allowClear
  51. v-decorator="[
  52. 'formData.tenantId',
  53. {
  54. initialValue: formData.tenantId,
  55. rules: [{ required: true, message: '请选择所在网点!' }] },
  56. ]">
  57. <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  58. </a-select>
  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.roleIds',
  68. {
  69. initialValue: formData.roleIds,
  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-form-item :wrapper-col="{ span: 12, offset: 5 }">
  87. <a-button type="primary" @click="handleSubmit()">
  88. 保存
  89. </a-button>
  90. <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
  91. 取消
  92. </a-button>
  93. </a-form-item>
  94. </a-form>
  95. </a-modal>
  96. </div>
  97. </template>
  98. <script>
  99. import { STable, VSelect } from '@/components'
  100. import { getRoleList, saveUser } from '@/api/send-coupon-user.js'
  101. export default {
  102. name: 'UserModal',
  103. components: {
  104. STable, VSelect
  105. },
  106. props: {
  107. visible: {
  108. type: Boolean,
  109. default: false
  110. },
  111. storeOptionData: {
  112. type: Array,
  113. default: function () {
  114. return {}
  115. }
  116. },
  117. data: {
  118. type: Object,
  119. default: function () {
  120. return {}
  121. }
  122. }
  123. },
  124. data () {
  125. return {
  126. titleText: '添加用户',
  127. isshow: this.visible,
  128. formLayout: 'horizontal',
  129. form: this.$form.createForm(this, { name: 'miniForm' }),
  130. roleList: [],
  131. formData: {
  132. roleIds: [], // 角色
  133. name: '',
  134. mobile: '',
  135. sex: '',
  136. tenantId: undefined
  137. }
  138. }
  139. },
  140. methods: {
  141. cancel (e) {
  142. this.clear()
  143. this.$emit('close')
  144. },
  145. // 保存提交
  146. handleSubmit () {
  147. const _this = this
  148. this.form.validateFields((err, values) => {
  149. if (!err) {
  150. console.log(values)
  151. values.formData.roleIds = values.formData.roleIds.join(',')
  152. saveUser(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
  153. if (res.status + '' === '200') {
  154. this.$message.success(res.message ? res.message : '保存成功')
  155. this.$emit('refresh')
  156. setTimeout(function () {
  157. _this.cancel()
  158. }, 300)
  159. } else {
  160. // this.$message.error(res.message)
  161. }
  162. })
  163. }
  164. })
  165. },
  166. // 取消
  167. handleCancel () {
  168. const _this = this
  169. this.$confirm({
  170. title: '提示',
  171. content: '确定取消吗?',
  172. okText: '确定',
  173. cancelText: '取消',
  174. onOk () {
  175. _this.clear()
  176. _this.cancel()
  177. }
  178. })
  179. },
  180. clear () {
  181. this.form.resetFields()
  182. delete this.formData.id
  183. this.formData.roleNames = []
  184. this.formData.tenantId = []
  185. this.formData.name = ''
  186. this.formData.mobile = ''
  187. this.formData.sex = ''
  188. this.formData.roleIds = undefined
  189. },
  190. // 获取角色列表接口
  191. getRoleList () {
  192. getRoleList().then(res => {
  193. if (res.status + '' === '200') {
  194. this.roleList = res.data
  195. } else {
  196. this.$message.warning(res.message)
  197. }
  198. })
  199. }
  200. },
  201. mounted () {
  202. this.getRoleList()
  203. },
  204. beforeCreate () {
  205. this.form = this.$form.createForm(this, { name: 'miniForm' })
  206. },
  207. watch: {
  208. visible (newValue, oldValue) {
  209. this.isshow = newValue
  210. },
  211. isshow (newValue, oldValue) {
  212. if (newValue) {
  213. if (this.data.id) { // 编辑
  214. this.titleText = '编辑用户'
  215. this.formData = Object.assign({}, this.data)
  216. delete this.formData.no
  217. let roleIds = this.formData.roleIds
  218. if (roleIds) {
  219. roleIds = roleIds.split(',')
  220. const arr = []
  221. roleIds.map(item => {
  222. const row = this.roleList.find(a => {
  223. return a.id == item
  224. })
  225. if (row) {
  226. arr.push(row.id)
  227. }
  228. })
  229. this.formData.roleIds = arr
  230. } else {
  231. this.formData.roleIds = []
  232. }
  233. // this.formData.loginFlag = Number(this.formData.loginFlag)
  234. } else {
  235. this.titleText = '添加用户'
  236. }
  237. } else {
  238. this.cancel()
  239. }
  240. }
  241. }
  242. }
  243. </script>
  244. <style >
  245. .modalBox{
  246. }
  247. .ant-modal-footer {
  248. display: none;
  249. }
  250. </style>