role-add-or-update.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <el-dialog
  3. :title="!dataForm.id ? '新增' : '修改'"
  4. :close-on-click-modal="false"
  5. :visible.sync="visible">
  6. <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
  7. <el-form-item label="角色名称" prop="roleName">
  8. <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
  9. </el-form-item>
  10. <!-- <el-form-item label="通用角色" size="mini" prop="isCommon">
  11. <el-radio-group v-model="dataForm.isCommon">
  12. <el-radio :label="false">否</el-radio>
  13. <el-radio :label="true">是</el-radio>
  14. </el-radio-group>
  15. </el-form-item> -->
  16. <el-form-item label="备注" prop="remark">
  17. <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
  18. </el-form-item>
  19. <el-form-item label="所属机构" prop="orgId">
  20. <el-popover
  21. ref="menuListPopover"
  22. placement="bottom-start"
  23. trigger="click">
  24. <el-tree
  25. :data="orgList"
  26. :props="orgListTreeProps"
  27. node-key="orgId"
  28. ref="orgListTree"
  29. @current-change="menuListTreeCurrentChangeHandle"
  30. :default-expand-all="true"
  31. :highlight-current="true"
  32. :expand-on-click-node="false">
  33. </el-tree>
  34. </el-popover>
  35. <el-input v-model="dataForm.orgName" v-popover:menuListPopover :readonly="true" placeholder="点击选择所属机构" class="menu-list__input"></el-input>
  36. </el-form-item>
  37. <el-form-item size="mini" label="授权">
  38. <el-tree
  39. :data="menuList"
  40. :props="menuListTreeProps"
  41. node-key="menuId"
  42. ref="menuListTree"
  43. :default-expand-all="true"
  44. show-checkbox>
  45. </el-tree>
  46. </el-form-item>
  47. <el-form-item size="mini" label="数据权限">
  48. <el-tree
  49. :data="orgList"
  50. :props="orgListTreeProps"
  51. node-key="orgId"
  52. ref="orgListDatta"
  53. :default-expand-all="true"
  54. :highlight-current="true"
  55. show-checkbox>
  56. </el-tree>
  57. </el-form-item>
  58. </el-form>
  59. <span slot="footer" class="dialog-footer">
  60. <el-button @click="visible = false">取消</el-button>
  61. <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
  62. </span>
  63. </el-dialog>
  64. </template>
  65. <script>
  66. export default {
  67. data () {
  68. return {
  69. visible: false,
  70. menuList: [],
  71. orgList: [],
  72. menuListTreeProps: {
  73. label: 'name',
  74. children: 'list'
  75. },
  76. orgListTreeProps: {
  77. label: 'name',
  78. children: 'children'
  79. },
  80. dataForm: {
  81. id: 0,
  82. roleName: '',
  83. remark: '',
  84. isCommon: false,
  85. orgId: '',
  86. orgName: ''
  87. },
  88. dataRule: {
  89. roleName: [
  90. { required: true, message: '角色名称不能为空', trigger: 'blur' }
  91. ],
  92. orgId: [
  93. { required: true, message: '所属机构不能为空', trigger: 'change' }
  94. ]
  95. },
  96. tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
  97. }
  98. },
  99. methods: {
  100. init (id) {
  101. this.dataForm.id = id || 0
  102. this.$http({
  103. url: this.$http.adornUrl('/user-service/menu/tree'),
  104. method: 'get',
  105. params: this.$http.adornParams()
  106. }).then(({data}) => {
  107. if (data.code === '200') {
  108. this.menuList = data.data
  109. }
  110. }).then(() => {
  111. this.$http({
  112. url: this.$http.adornUrl('/user-service/org/queryTree'),
  113. method: 'get',
  114. params: this.$http.adornParams()
  115. }).then(({data}) => {
  116. if (data.code === '200') {
  117. this.orgList = data.data
  118. }
  119. })
  120. }).then(() => {
  121. this.visible = true
  122. this.$nextTick(() => {
  123. this.$refs['dataForm'].resetFields()
  124. this.$refs.menuListTree.setCheckedKeys([])
  125. this.$refs.orgListDatta.setCheckedKeys([])
  126. })
  127. }).then(() => {
  128. if (this.dataForm.id) {
  129. this.$http({
  130. url: this.$http.adornUrl(`/user-service/role/info/${this.dataForm.id}`),
  131. method: 'get',
  132. params: this.$http.adornParams()
  133. }).then(({data}) => {
  134. if (data && data.code === '200') {
  135. this.dataForm.roleName = data.data.roleName
  136. this.dataForm.remark = data.data.remark
  137. // this.dataForm.isCommon = data.data.isCommon
  138. this.dataForm.orgId = data.data.orgId
  139. this.menuListTreeSetCurrentNode()
  140. var idx = data.data.menuIdList.indexOf(this.tempKey)
  141. if (idx !== -1) {
  142. data.data.menuIdList.splice(idx, data.data.menuIdList.length - idx)
  143. }
  144. this.$refs.menuListTree.setCheckedKeys(data.data.menuIdList)
  145. this.$refs.orgListDatta.setCheckedKeys(data.data.orgIdList)
  146. }
  147. })
  148. }
  149. })
  150. },
  151. menuListTreeCurrentChangeHandle (data, node) {
  152. this.dataForm.orgId = data.orgId
  153. this.dataForm.orgName = data.name
  154. },
  155. menuListTreeSetCurrentNode () {
  156. this.$refs.orgListTree.setCurrentKey(this.dataForm.orgId)
  157. if (this.dataForm.orgId === '0') {
  158. this.dataForm.orgName = ''
  159. } else {
  160. this.dataForm.orgName = (this.$refs.orgListTree.getCurrentNode() || {})['name']
  161. }
  162. },
  163. // 表单提交
  164. dataFormSubmit () {
  165. this.$refs['dataForm'].validate((valid) => {
  166. if (valid) {
  167. this.$http({
  168. url: this.$http.adornUrl(`/user-service/role/${!this.dataForm.id ? 'save' : 'update'}`),
  169. method: this.dataForm.id ? 'put' : 'post',
  170. data: this.$http.adornData({
  171. 'roleId': this.dataForm.id || undefined,
  172. 'roleName': this.dataForm.roleName,
  173. 'remark': this.dataForm.remark,
  174. 'isCommon': this.dataForm.isCommon,
  175. 'orgId': this.dataForm.orgId,
  176. 'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys()),
  177. 'orgIdList': [].concat(this.$refs.orgListDatta.getCheckedKeys())
  178. })
  179. }).then(({data}) => {
  180. if (data && data.code === '200') {
  181. this.$message({
  182. message: '操作成功',
  183. type: 'success',
  184. duration: 1500,
  185. onClose: () => {
  186. this.visible = false
  187. this.$emit('refreshDataList')
  188. }
  189. })
  190. } else {
  191. this.$message.error(data.msg || '系统错误,请联系管理员')
  192. }
  193. })
  194. }
  195. })
  196. }
  197. }
  198. }
  199. </script>