index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <div class="admin-group">
  3. <el-form :inline="true">
  4. <el-form-item v-if="$permission('/admin/group/check')">
  5. <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
  6. </el-form-item>
  7. <el-form-item>
  8. <el-button type="" size="small" @click="getList" v-if="$permission('/admin/group/check')">查询</el-button>
  9. <el-button type="primary" size="small" @click="handleAdd(0)" v-if="$permission('/admin/group/add')">新增</el-button>
  10. </el-form-item>
  11. </el-form>
  12. <el-table
  13. row-key="id"
  14. v-loading="loading"
  15. :data="tableData"
  16. border
  17. header-row-class-name="custom-table-header"
  18. :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  19. >
  20. <el-table-column prop="name" label="用户组名称" align="" show-overflow-tooltip></el-table-column>
  21. <!-- <el-table-column prop="user_group_up" label="上级用户组" align="center" show-overflow-tooltip></el-table-column> -->
  22. <el-table-column label="组员" align="center" show-overflow-tooltip>
  23. <template slot-scope="scope">
  24. <span v-for="item in scope.row.userList">{{item.name}},
  25. </span>
  26. </template>
  27. </el-table-column>
  28. <el-table-column label="角色" align="center" show-overflow-tooltip>
  29. <template slot-scope="scope">
  30. <span v-for="item in scope.row.roleList">{{item.name}},
  31. </span>
  32. </template>
  33. </el-table-column>
  34. <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
  35. <el-table-column label="操作" align="center" width="150">
  36. <template slot-scope="scope">
  37. <el-dropdown split-button type="primary" size="small" >
  38. <span v-if="$permission('/admin/group/modify')" @click="handleEdit(scope.row)">编辑</span>
  39. <span v-else :disabled="true">编辑</span>
  40. <el-dropdown-menu slot="dropdown" class="text-align_center">
  41. <!-- <el-dropdown-item @click.native="handleAdd(scope.row.id)">新增</el-dropdown-item> -->
  42. <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided v-if="$permission('/admin/group/delete')">删除</el-dropdown-item>
  43. </el-dropdown-menu>
  44. </el-dropdown>
  45. </template>
  46. </el-table-column>
  47. </el-table>
  48. <div class="pagination">
  49. <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
  50. </div>
  51. <el-dialog :title="title" :visible.sync="visible" width="500px" :before-close="close">
  52. <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
  53. <el-form-item label="用户组名称" prop="name">
  54. <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
  55. </el-form-item>
  56. <!-- <el-form-item label="上级用户组" prop="lastgroup">
  57. <el-input v-model="ruleForm.lastgroup" placeholder="请输入显示次序"></el-input>
  58. </el-form-item> -->
  59. <el-form-item label="组员" prop="users">
  60. <el-select v-model="ruleForm.users" multiple collapse-tags placeholder="请选择组员" style="width:100%">
  61. <el-option
  62. v-for="item in userList"
  63. :key="item.id"
  64. :label="item.name"
  65. :value="item.id">
  66. </el-option>
  67. </el-select>
  68. <!-- <el-input v-model="ruleForm.users" placeholder="请输入组员"></el-input> -->
  69. </el-form-item>
  70. <el-form-item label="角色" prop="role">
  71. <el-select v-model="ruleForm.role" multiple collapse-tags placeholder="请选择角色" style="width:100%">
  72. <el-option
  73. v-for="item in roleList"
  74. :key="item.id"
  75. :label="item.name"
  76. :value="item.id">
  77. </el-option>
  78. </el-select>
  79. <!-- <el-input v-model="ruleForm.role" placeholder="请输入角色"></el-input> -->
  80. </el-form-item>
  81. <el-form-item label="备注" prop="remark">
  82. <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100" show-word-limit></el-input>
  83. </el-form-item>
  84. </el-form>
  85. <div slot="footer" class="dialog-footer">
  86. <el-button @click="close">取 消</el-button>
  87. <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
  88. </div>
  89. </el-dialog>
  90. </div>
  91. </template>
  92. <script>
  93. import Treeselect from '@riophae/vue-treeselect'
  94. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  95. export default {
  96. components: {
  97. Treeselect
  98. },
  99. data() {
  100. return {
  101. visible: false,
  102. loading: false,
  103. btnLoading: false,
  104. total: 0,
  105. tableData: [],
  106. title: '',
  107. userList:[],
  108. roleList:[],
  109. queryParams: {
  110. size: 10,
  111. current: 1,
  112. name: ''
  113. },
  114. ruleForm: {},
  115. rules: {
  116. name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
  117. parentId: [{ required: true, message: '请选择所属部门', trigger: 'change' },],
  118. },
  119. }
  120. },
  121. mounted() {
  122. this.getList()
  123. this.getUserList()
  124. this.getRoleList()
  125. },
  126. methods: {
  127. normalizer(node) {
  128. return {
  129. id: node.id,
  130. label: node.name,
  131. }
  132. },
  133. handleAdd(parentId) {
  134. this.title = '新增用户组'
  135. this.visible = true
  136. this.ruleForm = {
  137. sort: 0,
  138. parentId: parentId
  139. }
  140. },
  141. handleEdit(row) {
  142. this.title = '编辑用户组'
  143. this.visible = true
  144. this.ruleForm = { ...row }
  145. },
  146. close() {
  147. this.visible = false
  148. },
  149. handleCurrentChange(val) {
  150. this.queryParams.current = val;
  151. this.getList();
  152. },
  153. getUserList(){
  154. this.$api.getPersonnelList().then(response => {
  155. this.userList = response.data
  156. })
  157. },
  158. getRoleList(){
  159. this.$api.getRoleList().then(response => {
  160. this.roleList = response.data
  161. })
  162. },
  163. getList() {
  164. this.loading = true
  165. this.$api.getGroupList(this.queryParams).then(response => {
  166. this.tableData = response.data
  167. this.total=response.pageColumn.total
  168. this.loading = false
  169. }).catch(error => {
  170. this.loading = false
  171. })
  172. },
  173. submit() {
  174. this.$refs.ruleForm.validate((valid) => {
  175. if (valid) {
  176. this.btnLoading = true
  177. if (this.ruleForm.id) {
  178. console.log(this.ruleForm)
  179. this.$api.editGroup(this.ruleForm).then(response => {
  180. this.$message.success('编辑成功')
  181. this.btnLoading = false
  182. this.getList()
  183. this.close()
  184. }).catch(error => {
  185. this.btnLoading = false
  186. })
  187. } else {
  188. this.$api.addGroup(this.ruleForm).then(response => {
  189. this.$message.success('新增成功')
  190. this.btnLoading = false
  191. this.getList()
  192. this.close()
  193. }).catch(error => {
  194. this.btnLoading = false
  195. })
  196. }
  197. } else {
  198. console.log('error submit!!');
  199. return false;
  200. }
  201. });
  202. },
  203. handleDelete(row) {
  204. this.$confirm('确认删除本条数据吗?', '提示', {
  205. confirmButtonText: '确定',
  206. cancelButtonText: '取消',
  207. type: 'warning'
  208. }).then(() => {
  209. this.loading = true
  210. this.$api.deleteGroup({ id: row.id }).then(response => {
  211. this.$message.success('删除成功')
  212. this.loading = false
  213. this.getList()
  214. }).catch(error => {
  215. this.loading = false
  216. })
  217. })
  218. }
  219. }
  220. }
  221. </script>
  222. <style lang="scss" scoped>
  223. .admin-role {
  224. }
  225. </style>