userModal.vue 10 KB

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