userModal.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. :title="titleText"
  6. v-model="isshow"
  7. @cancle="cancel"
  8. width="60%"
  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. <a-col :span="12">
  58. <a-form-item label="所属合作商" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  59. <a-select
  60. placeholder="请选择"
  61. allowClear
  62. v-decorator="[
  63. 'formData.orgCode',
  64. {
  65. initialValue: formData.orgCode,
  66. rules: [{ required: true, message: '请选择!' }] },
  67. ]"
  68. :showSearch="true"
  69. option-filter-prop="children"
  70. :filter-option="filterOption"
  71. @focus="handleFocus"
  72. @blur="handleBlur"
  73. @change="handleChange">
  74. <a-select-option v-for="item in optionData" :key="item.orgCode" :value="item.orgCode" :disabled="item.state == '0' ? true : false">{{ item.name }}</a-select-option>
  75. </a-select>
  76. </a-form-item>
  77. </a-col>
  78. </a-row>
  79. <a-row :gutter="24">
  80. <!-- 状态 -->
  81. <a-col :span="12">
  82. <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  83. <a-radio-group
  84. name="radioGroup"
  85. id="userModal-loginFlag"
  86. v-decorator="[
  87. 'formData.loginFlag',
  88. {
  89. initialValue: formData.loginFlag,
  90. rules: [{ required: true, message: '请选择状态!' }] },
  91. ]"
  92. >
  93. <a-radio :value="1">启用</a-radio>
  94. <a-radio :value="0">禁用</a-radio>
  95. </a-radio-group>
  96. </a-form-item>
  97. </a-col>
  98. <!-- 状态 -->
  99. <!-- <a-col :span="12">
  100. <a-form-item label="是否为超级管理员" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  101. <a-radio-group
  102. name="radioGroup"
  103. id="userModal-loginFlag"
  104. v-decorator="[
  105. 'formData.loginFlag',
  106. {
  107. initialValue: formData.loginFlag,
  108. rules: [{ required: true, message: '请选择!' }] },
  109. ]"
  110. >
  111. <a-radio :value="1">是</a-radio>
  112. <a-radio :value="0">否</a-radio>
  113. </a-radio-group>
  114. </a-form-item>
  115. </a-col> -->
  116. </a-row>
  117. <!-- <a-row :gutter="24">
  118. <a-col :span="24">
  119. <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  120. <a-select
  121. id="userModal-roleNames"
  122. v-decorator="[
  123. 'formData.roleNames',
  124. {
  125. initialValue: formData.roleNames,
  126. rules: [{ required: true, message: '请选择角色!' }] },
  127. ]"
  128. mode="multiple"
  129. style="width: 100%"
  130. placeholder="请选择角色"
  131. allowClear
  132. >
  133. <a-select-option
  134. v-for="item in roleList"
  135. :key="item.id"
  136. :disabled="item.isEnable == '0' ? true : false"
  137. >{{ item.name }}</a-select-option
  138. >
  139. </a-select>
  140. </a-form-item>
  141. </a-col>
  142. </a-row> -->
  143. <a-row :gutter="24">
  144. <a-col :span="24">
  145. <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  146. <a-textarea
  147. id="userModal-remarks"
  148. :maxLength="500"
  149. v-decorator="[
  150. 'formData.remarks',
  151. {
  152. initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
  153. rules: [] },
  154. ]"
  155. style="min-height: 50px;"
  156. placeholder="请输入备注(最多500个字符)"
  157. autosize />
  158. </a-form-item>
  159. </a-col>
  160. </a-row>
  161. <a-form-item :wrapper-col="{ span: 24, offset: 10}">
  162. <a-button type="primary" @click="handleSubmit()" id="userModal-handleSubmit" :style="{ marginRight: '15px' }">
  163. 保存
  164. </a-button>
  165. <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="userModal-handleCancel">
  166. 取消
  167. </a-button>
  168. </a-form-item>
  169. </a-form>
  170. </a-modal>
  171. </div>
  172. </template>
  173. <script>
  174. import { STable, VSelect } from '@/components'
  175. import { sellerList, saveUserPower, slelerDetails } from '@/api/userManage.js'
  176. export default {
  177. name: 'UserModal',
  178. components: {
  179. STable, VSelect
  180. },
  181. props: {
  182. visible: {
  183. type: Boolean,
  184. default: false
  185. },
  186. itemId: {
  187. type: String,
  188. default: ''
  189. }
  190. },
  191. data () {
  192. return {
  193. titleText: '新增用户',
  194. isshow: this.visible,
  195. formLayout: 'horizontal',
  196. form: this.$form.createForm(this, { name: 'miniForm' }),
  197. optionData: [],
  198. formData: {
  199. // roleNames: undefined, // 角色
  200. name: '',
  201. loginFlag: '', // 活动状态
  202. phone: '',
  203. sex: '',
  204. remarks: '',
  205. orgCode: undefined
  206. }
  207. }
  208. },
  209. methods: {
  210. cancel (e) {
  211. this.clear()
  212. this.$emit('close')
  213. },
  214. handleChange (value) {
  215. console.log(`selected ${value}`)
  216. },
  217. handleBlur () {
  218. console.log('blur')
  219. },
  220. handleFocus () {
  221. console.log('focus')
  222. },
  223. filterOption (input, option) {
  224. return (
  225. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  226. )
  227. },
  228. // 获取合作商数据
  229. getSellerList () {
  230. sellerList().then(res => {
  231. console.log(res, '-----合作商')
  232. if (res.status == 200) {
  233. this.optionData = res.data || []
  234. }
  235. })
  236. },
  237. getPageInfo () {
  238. slelerDetails({
  239. id: this.itemId
  240. }).then(res => {
  241. if (res.status == 200) {
  242. console.log(res, '-------------返回数据')
  243. this.form.setFieldsValue({ 'formData': res.data })
  244. this.form.setFieldsValue({ 'formData.loginFlag': Number(res.data.loginFlag) })
  245. // this.form.setFieldsValue({ 'formData.name': res.data.name })
  246. // this.form.setFieldsValue({ 'formData.phone': res.data.phone })
  247. // this.form.setFieldsValue({ 'formData.sex': res.data.sex })
  248. // this.form.setFieldsValue({ 'formData.org.name': res.data.org.name })
  249. // this.form.setFieldsValue({ 'formData.remarks': res.data.remarks })
  250. }
  251. })
  252. },
  253. // 保存提交
  254. handleSubmit () {
  255. const _this = this
  256. this.form.validateFields((err, values) => {
  257. if (!err) {
  258. const formData = Object.assign({}, this.formData, values.formData)
  259. formData.id = _this.itemId
  260. saveUserPower(formData).then(res => {
  261. console.log(res, 'rrrrrrrrr')
  262. if (res.status == 200) {
  263. _this.$message.success(res.message)
  264. _this.$emit('refresh')
  265. setTimeout(function () {
  266. _this.isshow = false
  267. }, 300)
  268. }
  269. })
  270. }
  271. })
  272. // const _this = this
  273. // this.form.validateFields((err, values) => {
  274. // console.log(values, 'values222')
  275. // if (!err) {
  276. // // values.formData.roleNames = values.formData.roleNames.join(',')
  277. // console.log(values.formData, ' formData.type222222222')
  278. // console.log(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData))
  279. // saveUserPower(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
  280. // console.log(res, 'res--save')
  281. // if (res.status + '' === '200') {
  282. // this.$message.success(res.message ? res.message : '保存成功')
  283. // this.$emit('refresh')
  284. // setTimeout(function () {
  285. // _this.cancel()
  286. // }, 300)
  287. // } else {
  288. // // this.$message.error(res.message)
  289. // }
  290. // })
  291. // }
  292. // })
  293. },
  294. // 取消
  295. handleCancel () {
  296. this.cancel()
  297. },
  298. clear () {
  299. this.form.resetFields()
  300. delete this.formData.id
  301. // this.formData.roleNames = []
  302. this.formData.name = ''
  303. this.formData.loginFlag = ''
  304. this.formData.phone = ''
  305. this.formData.sex = ''
  306. this.formData.remarks = ''
  307. this.formData.orgCode = undefined
  308. }
  309. // 获取角色列表接口
  310. // getRoleList () {
  311. // getRoleList().then(res => {
  312. // console.log(res, 'res--role')
  313. // if (res.status + '' === '200') {
  314. // this.roleList = res.data
  315. // } else {
  316. // this.$message.warning(res.message)
  317. // }
  318. // })
  319. // }
  320. },
  321. mounted () {
  322. // this.getRoleList()
  323. this.getSellerList()
  324. },
  325. beforeCreate () {
  326. this.form = this.$form.createForm(this, { name: 'miniForm' })
  327. },
  328. watch: {
  329. visible (newValue, oldValue) {
  330. this.isshow = newValue
  331. },
  332. isshow (val) {
  333. if (!val) {
  334. this.$emit('close')
  335. } else {
  336. this.form.resetFields()
  337. }
  338. },
  339. itemId (newValue, oldValue) {
  340. console.log(newValue, '----------id')
  341. if (newValue && this.isshow) {
  342. this.titleText = '编辑'
  343. this.getPageInfo(newValue)
  344. } else {
  345. this.titleText = '新增用户'
  346. }
  347. }
  348. }
  349. }
  350. </script>
  351. <style >
  352. .modalBox{
  353. }
  354. .ant-modal-footer {
  355. display: none;
  356. }
  357. </style>