|
|
@@ -0,0 +1,213 @@
|
|
|
+<template lang="html">
|
|
|
+ <div id="group_role">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="search">
|
|
|
+ <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
|
|
|
+ <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <el-table :data="tableData" style="width: 100%" border stripe>
|
|
|
+ <el-table-column prop="name" align="center" :label="`${type}名称`"> </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template v-slot="scoped">
|
|
|
+ <el-row type="flex" justify="center">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'right')">分配权限</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'resources')">分配资源</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-col class="paging">
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="权限管理" :visible.sync="dialogRight">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="padding-left:4rem;">
|
|
|
+ <el-transfer v-model="form.rightList" :data="rightList" :titles="['未添加', '已添加']" :button-texts="['删除', '添加']"></el-transfer>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="handleCancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleEdit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="资源管理" :visible.sync="dialogRes">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="padding-left:4rem;">
|
|
|
+ <el-transfer v-model="form.resourcesList" :data="resourcesList" :titles="['未添加', '已添加']" :button-texts="['删除', '添加']"></el-transfer>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="handleCancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleEdit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'group_role',
|
|
|
+ props: {
|
|
|
+ type: { type: String, default: '群组' },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ input: '',
|
|
|
+ tableData: [],
|
|
|
+ rightList: [],
|
|
|
+ resourcesList: [],
|
|
|
+ dialogRight: false,
|
|
|
+ dialogRes: false,
|
|
|
+ form: {},
|
|
|
+ assignFrom: {},
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handleEdit() {
|
|
|
+ let chData = this.form;
|
|
|
+ const { index, ...form } = chData;
|
|
|
+ console.log(index, form);
|
|
|
+ if (index !== undefined) {
|
|
|
+ this.$set(this.tableData, `${index}`, form);
|
|
|
+ this.$message.success('修改成功');
|
|
|
+ } else {
|
|
|
+ this.tableData.push(form);
|
|
|
+ }
|
|
|
+ this.handleCancel();
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.form = {};
|
|
|
+ this.dialogRight = false;
|
|
|
+ this.dialogRes = false;
|
|
|
+ },
|
|
|
+ openDialog(index, type) {
|
|
|
+ if (index !== undefined) {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.tableData[index]));
|
|
|
+ data[`index`] = index;
|
|
|
+ this.personProccess('unlock');
|
|
|
+ if (this.type === '人员') {
|
|
|
+ this.personProccess('lock', data);
|
|
|
+ }
|
|
|
+ this.$set(this, `form`, data);
|
|
|
+ } else {
|
|
|
+ this.form = {};
|
|
|
+ }
|
|
|
+ if (type === 'right') {
|
|
|
+ this.dialogRight = true;
|
|
|
+ } else {
|
|
|
+ this.dialogRes = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ personProccess(type, data) {
|
|
|
+ if (type === 'lock') {
|
|
|
+ let lockRightList = this.rightList.map(right => {
|
|
|
+ data.originalRight.map(self => {
|
|
|
+ if (self === right.key) {
|
|
|
+ right['disabled'] = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return right;
|
|
|
+ });
|
|
|
+ let lockResList = this.resourcesList.map(res => {
|
|
|
+ data.originalResources.map(self => {
|
|
|
+ if (self === res.key) {
|
|
|
+ res['disabled'] = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return res;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.rightList.map(item => {
|
|
|
+ delete item.disabled;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ this.resourcesList.map(item => {
|
|
|
+ delete item.disabled;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ console.log(this.rightList);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ let list = [];
|
|
|
+ let resourcesList = [];
|
|
|
+ let tableList = [];
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ list.push({
|
|
|
+ key: i,
|
|
|
+ label: `权限${i + 1}`,
|
|
|
+ });
|
|
|
+ resourcesList.push({
|
|
|
+ key: i,
|
|
|
+ label: `${i % 3 === 1 ? '文档' : i % 3 === 2 ? '应用' : '数据'}${i + 1}`,
|
|
|
+ });
|
|
|
+ if (i < 5) {
|
|
|
+ tableList.push({
|
|
|
+ name: `${this.type}${i + 1}`,
|
|
|
+ rightList: [i, i + 1],
|
|
|
+ originalRight: [i, i + 1],
|
|
|
+ resourcesList: [i, i + 1],
|
|
|
+ originalResources: [i, i + 1],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this, `rightList`, list);
|
|
|
+ this.$set(this, `resourcesList`, resourcesList);
|
|
|
+ this.$set(this, `tableData`, tableList);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+h1,
|
|
|
+h2,
|
|
|
+h3,
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6 {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.register {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+}
|
|
|
+.searchSel .el-select {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+/deep/.searchInp .el-input__inner {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.searchBtn .el-button {
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.paging {
|
|
|
+ text-align: right;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+.sizeA {
|
|
|
+ padding: 30px;
|
|
|
+}
|
|
|
+</style>
|
