userModal.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. <template>
  2. <div>
  3. <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" width="35%">
  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. allowClear/>
  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. allowClear/>
  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. placeholder="请选择性别"
  39. v-decorator="[
  40. 'formData.sex',
  41. {
  42. initialValue: formData.sex,
  43. rules: [{ required: true, message: '请选择性别!' }] },
  44. ]"
  45. allowClear></v-select>
  46. </a-form-item>
  47. </a-col>
  48. <!-- 角色 -->
  49. <a-col :span="12">
  50. <a-form-item label="角色" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  51. <a-select
  52. id="userModal-roleNames"
  53. v-decorator="[
  54. 'formData.roleNames',
  55. {
  56. initialValue: formData.roleNames,
  57. rules: [{ required: true, message: '请选择角色!' }] },
  58. ]"
  59. style="width: 100%"
  60. placeholder="请选择角色"
  61. mode="multiple"
  62. >
  63. <a-select-option
  64. v-for="item in roleList"
  65. :key="item.id"
  66. :disabled="item.isEnable == '0' ? true : false"
  67. >{{ item.name }}</a-select-option
  68. >
  69. </a-select>
  70. </a-form-item>
  71. </a-col>
  72. </a-row>
  73. <a-row :gutter="24">
  74. <a-col :span="12">
  75. <a-form-model-item class="form-label" label="所属机构" prop="orgCode" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  76. <a-tree-select
  77. id="userModal-orgCode"
  78. v-model="formData.orgCode"
  79. allowClear
  80. style="width: 100%"
  81. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  82. :tree-data="treeData"
  83. placeholder="请选择所属机构"
  84. treeNodeFilterProp="title"
  85. @change="treeChange"
  86. v-decorator="[
  87. 'formData.orgCode',
  88. {
  89. initialValue: formData.orgCode,
  90. rules: [{ required: true, message: '请选择所属机构!' }] },
  91. ]">
  92. </a-tree-select>
  93. </a-form-model-item>
  94. </a-col>
  95. <!-- 状态 -->
  96. <a-col :span="12">
  97. <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  98. <a-radio-group
  99. id="userModal-loginFlag"
  100. name="radioGroup"
  101. v-decorator="[
  102. 'formData.loginFlag',
  103. {
  104. initialValue: formData.loginFlag,
  105. rules: [{ required: true, message: '请选择状态!' }] },
  106. ]">
  107. <a-radio :value="1" id="userModal-loginFlag">是</a-radio>
  108. <a-radio :value="0" id="userModal-loginFlag">否</a-radio>
  109. </a-radio-group>
  110. </a-form-item>
  111. </a-col>
  112. </a-row>
  113. <a-form-item :wrapper-col="{ span: 12, offset: 5 }" style="text-align: center;">
  114. <a-button type="primary" @click="handleSubmit()">
  115. 保存
  116. </a-button>
  117. <a-button :style="{ marginLeft: '50px' }" @click="handleCancel()">
  118. 取消
  119. </a-button>
  120. </a-form-item>
  121. </a-form>
  122. </a-modal>
  123. </div>
  124. </template>
  125. <script>
  126. import {
  127. STable,
  128. VSelect,
  129. Tree } from '@/components'
  130. import {
  131. saveUserPower
  132. } from '@/api/card-voucher-user.js'
  133. import { getAllRole } from '@/api/card-voucher-role.js'
  134. import { findOrgTree } from '@/api/atorg.js'
  135. export default {
  136. name: 'UserModal',
  137. components: {
  138. STable,
  139. VSelect,
  140. Tree
  141. },
  142. props: {
  143. // 弹窗是否显示
  144. visible: {
  145. type: Boolean,
  146. default: false
  147. },
  148. // 编辑督导的数据
  149. data: {
  150. type: Object,
  151. default: function () {
  152. return {}
  153. }
  154. }
  155. },
  156. data () {
  157. return {
  158. titleText: '添加用户',
  159. isshow: this.visible,
  160. formLayout: 'horizontal',
  161. form: this.$form.createForm(this, {
  162. name: 'miniForm'
  163. }),
  164. roleList: [], // 角色
  165. parentCodePaths: '', // 组织机构父路径
  166. orgCode: '', // 组织机构
  167. formData: {
  168. orgCode: null,
  169. name: '', // 员工姓名
  170. loginFlag: '', // 状态
  171. phone: '', // 手机号码
  172. sex: '', // 性别
  173. roleNames: undefined // 角色
  174. },
  175. treeData: []
  176. }
  177. },
  178. methods: {
  179. cancel (e) {
  180. this.clear()
  181. this.$emit('close')
  182. },
  183. // 获取组织机构树的数据
  184. getOrgData () {
  185. findOrgTree().then(res => {
  186. if (res.status == 200) {
  187. this.treeData = this.recursionFun(res.data)
  188. } else {
  189. this.treeData = []
  190. }
  191. })
  192. },
  193. // 组织归属 change
  194. treeChange (value, label, extra) {
  195. this.parentCodePaths = extra.triggerNode.$options.propsData.dataRef.parentCodePaths
  196. },
  197. // 递归函数
  198. recursionFun (data) {
  199. if (data) {
  200. data.map(item => {
  201. if (item.children && item.children.length == 0) {
  202. item.key = item.id ? 'org' + item.id : ''
  203. item.value = item.id ? item.id : ''
  204. item.title = item.name ? item.name : ''
  205. } else {
  206. item.key = item.id ? 'org' + item.id : ''
  207. item.value = item.id ? item.id : ''
  208. item.title = item.name ? item.name : ''
  209. this.recursionFun(item.children)
  210. }
  211. })
  212. }
  213. return data
  214. },
  215. // 保存提交
  216. handleSubmit () {
  217. const _this = this
  218. this.form.validateFields((err, values) => {
  219. // console.log(values)
  220. if (!err) {
  221. values.formData.roleNames = values.formData.roleNames.join(',')
  222. // values.formData.org.id = values.orgCode
  223. const formData = JSON.parse(JSON.stringify(values.formData))
  224. formData.org = { id: formData.orgCode }
  225. delete formData.orgCode
  226. saveUserPower(Object.assign({
  227. id: this.data.id ? this.data.id : ''
  228. }, formData)).then(res => {
  229. if (res.status == 200) {
  230. this.$message.success(res.message ? res.message : '保存成功')
  231. this.$emit('refresh')
  232. setTimeout(function () {
  233. _this.cancel()
  234. }, 300)
  235. } else {
  236. this.$message.error(res.message)
  237. }
  238. })
  239. }
  240. })
  241. },
  242. // 取消
  243. handleCancel () {
  244. const _this = this
  245. this.$confirm({
  246. title: '提示',
  247. content: '确定取消吗?',
  248. okText: '确定',
  249. cancelText: '取消',
  250. onOk () {
  251. _this.clear()
  252. _this.cancel()
  253. }
  254. })
  255. },
  256. clear () {
  257. this.form.resetFields()
  258. delete this.formData.id
  259. this.formData.orgCode = '' // 所属机构
  260. this.formData.name = ''
  261. this.formData.loginFlag = ''
  262. this.formData.phone = ''
  263. this.formData.sex = ''
  264. this.formData.roleNames = []
  265. },
  266. // 获取角色列表接口
  267. getRoleData () {
  268. getAllRole().then(res => {
  269. if (res.status == 200) {
  270. this.roleList = res.data
  271. } else {
  272. this.$message.warning(res.message)
  273. }
  274. })
  275. }
  276. },
  277. beforeCreate () {
  278. this.form = this.$form.createForm(this, {
  279. name: 'miniForm'
  280. })
  281. },
  282. watch: {
  283. visible (newValue, oldValue) {
  284. this.isshow = newValue
  285. },
  286. isshow (newValue, oldValue) {
  287. if (newValue) {
  288. this.getOrgData()
  289. this.getRoleData()
  290. if (this.data.id) { // 编辑
  291. console.log(this.data.id)
  292. this.titleText = '编辑用户'
  293. this.formData = Object.assign({}, this.data)
  294. delete this.formData.no
  295. let roleNames = this.formData.roleNames
  296. if (roleNames) {
  297. roleNames = roleNames.split(',')
  298. const arr = []
  299. roleNames.map(item => {
  300. const row = this.roleList.find(a => {
  301. return a.name == item
  302. })
  303. if (row) {
  304. arr.push(row.id)
  305. }
  306. })
  307. this.formData.roleNames = arr
  308. } else {
  309. this.formData.roleNames = []
  310. }
  311. this.formData.loginFlag = Number(this.formData.loginFlag)
  312. } else {
  313. this.titleText = '添加用户'
  314. }
  315. } else {
  316. this.cancel()
  317. }
  318. }
  319. }
  320. }
  321. </script>
  322. <style>
  323. .ant-modal-footer {
  324. display: none;
  325. }
  326. </style>