| | |
| | | <template> |
| | | <div> |
| | | <el-dialog |
| | | :title="`选择候选角色`" |
| | | :title="title" |
| | | :visible.sync="show" |
| | | width="65%" |
| | | :destroy-on-close="true" |
| | | :close-on-click-modal="false" |
| | | :modal-append-to-body="false" |
| | | :modal="false" |
| | | :before-close="close"> |
| | | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> |
| | |
| | | v-model="queryParams.roleName" |
| | | placeholder="请输入角色名称" |
| | | clearable |
| | | @clear="handleQuery" |
| | | style="width: 240px" |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-table ref="dataTable" v-loading="loading" :data="roleList" @selection-change="handleMultipleRoleSelect"> |
| | | <el-table-column type="selection" width="50" align="center" /> |
| | | <el-table ref="dataTable" :row-key="getRowKey" v-loading="loading" :data="roleList" @selection-change="handleMultipleRoleSelect"> |
| | | <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/> |
| | | <el-table-column label="角色编号" prop="roleId"/> |
| | | <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true"/> |
| | | <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true"/> |
| | |
| | | required: true, |
| | | default: true |
| | | }, |
| | | title: { |
| | | type: String, |
| | | required: false, |
| | | default: '候选角色' |
| | | }, |
| | | // 回显数据传值 |
| | | selectValues: { |
| | | type: Array, |
| | |
| | | return { |
| | | // 遮罩层 |
| | | loading: true, |
| | | // 选中数组 |
| | | ids: [], |
| | | // 非单个禁用 |
| | | single: true, |
| | | // 非多个禁用 |
| | | multiple: true, |
| | | // 显示搜索条件 |
| | | showSearch: true, |
| | | // 总条数 |
| | | total: 0, |
| | | // 角色表格数据 |
| | | roleList: [], |
| | | // 弹出层标题 |
| | | title: "", |
| | | // 是否显示弹出层 |
| | | open: false, |
| | | // 查询参数 |
| | | queryParams: { |
| | | pageNum: 1, |
| | |
| | | roleKey: undefined, |
| | | status: undefined |
| | | }, |
| | | // 表单参数 |
| | | form: {}, |
| | | radioSelected: 0, // 单选框传值 |
| | | selectRoleList: [] // 回显数据传值 |
| | | }; |
| | | }, |
| | |
| | | methods: { |
| | | // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据 |
| | | getRowKey (row) { |
| | | console.log(row.roleId) |
| | | return row.roleId |
| | | }, |
| | | setChecked(val) { |
| | | console.log("接收到的数据", val) |
| | | |
| | | this.selectRoleList = val |
| | | console.log("接收到的数据", this.selectRoleList) |
| | | this.$nextTick(() => { |
| | | val.forEach(check => { |
| | | this.selectRoleList.forEach(check => { |
| | | this.$refs.dataTable.toggleRowSelection(check, true) |
| | | }) |
| | | }); |
| | |
| | | }, |
| | | // 多选框选中数据 |
| | | handleMultipleRoleSelect(rows) { |
| | | this.selectRoleList = rows |
| | | this.selectRoleList = [...new Set(rows)] |
| | | }, |
| | | /** 搜索按钮操作 */ |
| | | handleQuery() { |