123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- <template>
- <div class="admin-group">
- <el-form :inline="true">
- <el-form-item v-if="$permission('/admin/group/check')">
- <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="" size="small" @click="getList" v-if="$permission('/admin/group/check')">查询</el-button>
- <el-button type="primary" size="small" @click="handleAdd(0)" v-if="$permission('/admin/group/add')">新增</el-button>
- </el-form-item>
- </el-form>
- <el-table
- row-key="id"
- v-loading="loading"
- :data="tableData"
- border
- header-row-class-name="custom-table-header"
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
- >
- <el-table-column prop="name" label="用户组名称" align="" show-overflow-tooltip></el-table-column>
- <!-- <el-table-column prop="user_group_up" label="上级用户组" align="center" show-overflow-tooltip></el-table-column> -->
- <el-table-column label="组员" align="center" show-overflow-tooltip>
- <template slot-scope="scope">
- <span v-for="item in scope.row.userList">{{item.name}},
- </span>
- </template>
- </el-table-column>
- <el-table-column label="角色" align="center" show-overflow-tooltip>
- <template slot-scope="scope">
- <span v-for="item in scope.row.roleList">{{item.name}},
- </span>
- </template>
- </el-table-column>
- <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" align="center" width="150">
- <template slot-scope="scope">
- <el-dropdown split-button type="primary" size="small" >
- <span v-if="$permission('/admin/group/modify')" @click="handleEdit(scope.row)">编辑</span>
- <span v-else :disabled="true">编辑</span>
- <el-dropdown-menu slot="dropdown" class="text-align_center">
- <!-- <el-dropdown-item @click.native="handleAdd(scope.row.id)">新增</el-dropdown-item> -->
- <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided v-if="$permission('/admin/group/delete')">删除</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </template>
- </el-table-column>
- </el-table>
- <div class="pagination">
- <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>
- </div>
- <el-dialog :title="title" :visible.sync="visible" width="500px" :before-close="close">
- <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
-
- <el-form-item label="用户组名称" prop="name">
- <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
- </el-form-item>
- <!-- <el-form-item label="上级用户组" prop="lastgroup">
- <el-input v-model="ruleForm.lastgroup" placeholder="请输入显示次序"></el-input>
- </el-form-item> -->
- <el-form-item label="组员" prop="users">
- <el-select v-model="ruleForm.users" multiple collapse-tags placeholder="请选择组员" style="width:100%">
- <el-option
- v-for="item in userList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- <!-- <el-input v-model="ruleForm.users" placeholder="请输入组员"></el-input> -->
- </el-form-item>
- <el-form-item label="角色" prop="role">
- <el-select v-model="ruleForm.role" multiple collapse-tags placeholder="请选择角色" style="width:100%">
- <el-option
- v-for="item in roleList"
- :key="item.id"
- :label="item.name"
- :value="item.id">
- </el-option>
- </el-select>
- <!-- <el-input v-model="ruleForm.role" placeholder="请输入角色"></el-input> -->
- </el-form-item>
- <el-form-item label="备注" prop="remark">
- <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100" show-word-limit></el-input>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="close">取 消</el-button>
- <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import Treeselect from '@riophae/vue-treeselect'
- import '@riophae/vue-treeselect/dist/vue-treeselect.css'
- export default {
- components: {
- Treeselect
- },
- data() {
- return {
- visible: false,
- loading: false,
- btnLoading: false,
- total: 0,
- tableData: [],
- title: '',
- userList:[],
- roleList:[],
- queryParams: {
- size: 10,
- current: 1,
- name: ''
- },
- ruleForm: {},
- rules: {
- name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
- parentId: [{ required: true, message: '请选择所属部门', trigger: 'change' },],
- },
- }
- },
- mounted() {
- this.getList()
- this.getUserList()
- this.getRoleList()
- },
- methods: {
- normalizer(node) {
- return {
- id: node.id,
- label: node.name,
- }
- },
- handleAdd(parentId) {
- this.title = '新增用户组'
- this.visible = true
- this.ruleForm = {
- sort: 0,
- parentId: parentId
- }
- },
- handleEdit(row) {
- this.title = '编辑用户组'
- this.visible = true
- this.ruleForm = { ...row }
- },
- close() {
- this.visible = false
- },
- handleCurrentChange(val) {
- this.queryParams.current = val;
- this.getList();
- },
- getUserList(){
- this.$api.getPersonnelList().then(response => {
- this.userList = response.data
- })
- },
- getRoleList(){
- this.$api.getRoleList().then(response => {
- this.roleList = response.data
- })
- },
- getList() {
- this.loading = true
- this.$api.getGroupList(this.queryParams).then(response => {
- this.tableData = response.data
- this.total=response.pageColumn.total
- this.loading = false
- }).catch(error => {
- this.loading = false
- })
- },
- submit() {
- this.$refs.ruleForm.validate((valid) => {
- if (valid) {
- this.btnLoading = true
- if (this.ruleForm.id) {
- console.log(this.ruleForm)
- this.$api.editGroup(this.ruleForm).then(response => {
- this.$message.success('编辑成功')
- this.btnLoading = false
- this.getList()
- this.close()
- }).catch(error => {
- this.btnLoading = false
- })
- } else {
- this.$api.addGroup(this.ruleForm).then(response => {
- this.$message.success('新增成功')
- this.btnLoading = false
- this.getList()
- this.close()
- }).catch(error => {
- this.btnLoading = false
- })
- }
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- handleDelete(row) {
- this.$confirm('确认删除本条数据吗?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- this.loading = true
- this.$api.deleteGroup({ id: row.id }).then(response => {
- this.$message.success('删除成功')
- this.loading = false
- this.getList()
- }).catch(error => {
- this.loading = false
- })
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .admin-role {
- }
- </style>
|