userModal.vue 8.7 KB

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