userModal.vue 8.6 KB

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