<template><el-dialog title="设置权限" :visible.sync="showDialog" :close-on-click-modal="false" :append-to-body="true" width="800px"><div v-loading="loading"><el-radio-group v-model="setPowerRadio"><el-radio :label="0" style="display:block;line-height: 30px;">所有人可见</el-radio><el-radio :label="1" style="display:block;line-height: 30px;">选择可见</el-radio></el-radio-group><div v-show="setPowerRadio==1"><el-row><el-col :span="10" style="height: 300px;border: 1px solid #CBCBCB;"><div class="power-department-border">部门</div><el-tree :data="unitsList" :empty-text="emptyText" node-key="id" ref="tree" :default-expand-all="true":highlight-current="true" :render-content="renderContentStation" @node-click="handleNodeClick"class="power-col-left-border"></el-tree></el-col><el-col :span="14" style="padding: 0 10px;height: 300px;"><!-- ref="multipleTable" --><!--选择项发生变化 @selection-change="handleSelectionChange" --><el-table border :data="tableData" tooltip-effect="dark" style="width: 100%" ref="multipleTable"@select="handleSelectionRow" @select-all="handleSelectionAll" class="power-col-right-overflow"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="userName" label="姓名"></el-table-column></el-table></el-col></el-row><div class="select-people"><div>已选择（{{ tableDataRight.length }}）：</div><div><span v-for="(item, index) in tableDataRight" :key="index">{{ item.userName }}<span v-if="tableDataRight.length != index + 1">,</span></span></div></div></div><div class="text-center-margin-20-0"><el-button @click="showDialog = false">取 消</el-button><el-button type="primary" @click="onSubmit()">确 定</el-button></div></div></el-dialog>
</template>
<script>export default {data() {return {showDialog: false,loading: false,setPowerRadio: 0, //0所有 1选择CurrentDepartmentId: "", //当前部门idunitsList: [], //部门数组filterText: '', //关键字查询emptyText: '',id: '', //父组件idtableData: [], //人员显示leftCodes: [], //左侧列表id集合tableDataRightCodes: [], //选中的人员id数组tableDataRight: [], //选中的人员总数据search: 0, // 1.搜索开始 0搜索结束};},watch: {filterText(val) {this.$refs.tree.filter(val);},},methods: {add(row, type) {this.showDialog = true;this.routerType = type;this.$nextTick(() => {if (row.fid) {this.id = row.fid;} else {this.id = row.id;}this.getCatetoryAuthLink(); //获取指定分类授权信息this.getDepartmentLink();});},//获取指定分类授权信息getCatetoryAuthLink() {//读初始选中的信息this.tableDataRight = res.data.data.userList; this.leftCodes = this.tableDataRight.map(dev => dev.id);},//获取左侧树型数据getDepartmentLink() {this.unitsList = []this.loading = true;this.search = 1;getDepartment().then(res => {if (res.data.code == 200) {let dataLink = res.data.datathis.unitsList = dataLink.list;this.$nextTick(() => {this.loading = false;if (dataLink.list.length != 0) {this.CurrentDepartmentId = dataLink.list[0].id;this.$refs.tree.setCurrentKey(dataLink.list[0].id);this.getNewPeople(dataLink.list[0].id);}})} else {this.loading = false;this.emptyText = '暂无数据'this.$message.error(res.data.msg);}});},//树-转换handleNodeClick(value) {this.CurrentDepartmentId = value.id;this.search = 1;this.$nextTick(() => {this.getNewPeople(value.id);})},//部门下的人员getNewPeople(id) {this.tableData = []let param = {departmentId: id,page: false,}getUserList(param).then(res => {if (res.data.code == 200) {this.tableData = res.data.data.list;this.defaultChoose(this.tableDataRight, this.tableData);this.$nextTick(() => {this.search = 0;});} else {this.$message.error(res.data.msg);}});},//选择单行handleSelectionRow(row, selected) {if (this.search) return;let booleanValue = this.tableDataRight.some(item => {return item.id == selected.id})//包含if (booleanValue) {this.tableDataRight = this.tableDataRight.filter(item => item.id != selected.id)} else {this.tableDataRight.push(selected)}},//全选/取消全部handleSelectionAll(selection) {if (this.search) return;if (selection.length != 0) {let arr = [...this.tableDataRight, ...selection];this.$nextTick(() => {// this.tableDataRight = Array.from(new Set(arr)) //简单去重let unique = new Map(); //复杂去重arr.forEach(item => unique.set(item.id, item));this.tableDataRight = [...unique.values()];})} else {this.tableData.forEach(item => {this.tableDataRight = this.tableDataRight.filter(ele => ele.id != item.id)})}},// 已选择的设备需要默认勾选// arr所有选中的；tableArr右侧表格显示数据defaultChoose(arr, tableArr) {/*注意：这里不能直接遍历arr,element和item 他们在内存中的地址不同，所以他们是两份不同的数据，所以这么写 toggleRowSelection(element, true) 是不会回显选中的*/for (let index = 0; index < tableArr.length; index++) {const item = tableArr[index];arr.forEach(element => {if (element.id == item.id) {this.$nextTick(() => {this.$refs.multipleTable.toggleRowSelection(item, true);});}});}},//处理名称-站点renderContentStation(h, {node,data,store}) {return ( < div ><span title = {data.departmentName}class = 'style-demo' > {data.departmentName} </span> </div > );},onSubmit() {if (this.setPowerRadio == 1 && this.tableDataRight.length == 0) {this.$message.warning("选择人员不可为空");return false;}let userIdList = this.tableDataRight.map(dev => dev.id);let param = {}if (this.routerType == '素材分类') {param = {categoryId: this.id,fvisible: this.setPowerRadio,userIdList: userIdList,}} else { //素材审核 素材管理param = {recordId: this.id,fvisible: this.setPowerRadio,userIdList: userIdList,}}let urlLink = nullif (this.routerType == '素材分类') {urlLink = setCatetoryAuth;} else {urlLink = setRecordAuth;}urlLink(param).then(res => {if (res.data.code == 200) {this.$message.success("操作成功");this.showDialog = false;if (this.routerType == '素材分类' || this.routerType == '素材管理') {this.$emit("refresh");}} else {this.$message.error(res.data.msg);}});}}}</script>
<style scoped>.select-people {border: 1px solid #CBCBCB;background: #F0F5F7;color: #000000;margin: 10px;width: calc(100% - 20px);min-height: 100px;padding: 10px;box-sizing: border-box;}.power-department-border {border: 1px solid #CBCBCB;background: linear-gradient(180deg, #F0F5F7 93%, #DFE4E6 97%);box-sizing: border-box;vertical-align: middle;text-align: center;line-height: 1.5;padding: 5.5px 0;font-weight: bold;color: #666666;font-size: 16px;font-size: calc(var(--scale) * 16px);border-bottom: 1px solid #CBCBCB;}</style>