You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
253 lines
8.0 KiB
253 lines
8.0 KiB
<template>
|
|
<div class="container">
|
|
<!-- 查询配置 -->
|
|
<div style="padding: 0px 20px">
|
|
<div ref="lxHeader">
|
|
<LxHeader icon="md-apps" text="角色权限" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
|
<div slot="content"></div>
|
|
<slot>
|
|
<div>
|
|
<Input style="width: 200px; margin-right: 10px" v-model.number="searchFields.Name" placeholder="关键字搜索" />
|
|
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
|
|
<Button type="primary" @click="edit()" style="margin-left: 10px">新增角色</Button>
|
|
</div>
|
|
</slot>
|
|
</LxHeader>
|
|
</div>
|
|
|
|
<div class="table-tree">
|
|
<el-table :data="tableData" class="v-table" border style="width: 100%">
|
|
<el-table-column type="index" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="角色名称" width="180">
|
|
</el-table-column>
|
|
<el-table-column prop="allow_level" align="center" label="数据权限" width="180">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.allow_level==0">所有</el-tag>
|
|
<el-tag v-else-if="scope.row.allow_level==1">部门</el-tag>
|
|
<el-tag v-else-if="scope.row.allow_level==2">私有</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="address" label="说明">
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="300">
|
|
<template slot-scope="scope">
|
|
<Button ghost size="small" @click="edit(scope.row)" type="primary">编辑</Button>
|
|
<Button ghost size="small" style="margin-left: 10px;" @click="set(scope.row)" type="primary">设置权限</Button>
|
|
<Button @click="del(scope.row)" type="error" ghost size="small" style="margin-left: 10px;">删除</Button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-dialog title="角色编辑" :visible.sync="dialogFormVisible" width="30%">
|
|
<el-form :model="form" ref="form" :rules="rules" label-position="right" :label-width="formLabelWidth">
|
|
|
|
<el-form-item label="角色名称" prop="name">
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="数据权限" prop="allow_level">
|
|
<el-radio-group v-model="form.allow_level">
|
|
<el-radio :label="0">所有</el-radio>
|
|
<el-radio :label="1">部门</el-radio>
|
|
<el-radio :label="2">私有</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="排序">
|
|
<el-input v-model="form.sortnumber" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="resetForm('form')">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="权限设置" :visible.sync="dialogSetVisible" width="60%">
|
|
<el-form label-position="right" :label-width="formLabelWidth">
|
|
|
|
<el-form-item label="角色名称" prop="name">
|
|
{{setForm.name}}
|
|
</el-form-item>
|
|
<el-form-item label="角色人员">
|
|
<el-transfer filterable :titles="['待选择', '已选择']" :props="{key: 'id',label: 'name'}"
|
|
:filter-method="filterMethod" :format="{ noChecked: '${total}',hasChecked: '${checked}/${total}' }"
|
|
filter-placeholder="请选择人员" v-model="setForm.ids" :data="userdata">
|
|
</el-transfer>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogSetVisible=false">取 消</el-button>
|
|
<el-button type="primary" @click="submitSet()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LxHeader from "@/components/LxHeader/index.vue";
|
|
import {
|
|
save,
|
|
list,
|
|
del,
|
|
set
|
|
} from "../../api/system/role.js";
|
|
|
|
import {
|
|
listCommondepartment,
|
|
listCommonuser
|
|
} from "../../api/common.js"
|
|
|
|
export default {
|
|
components: {
|
|
LxHeader
|
|
},
|
|
created() {
|
|
this.load();
|
|
|
|
},
|
|
mounted() {},
|
|
data() {
|
|
return {
|
|
dialogSetVisible: false,
|
|
dialogFormVisible: false,
|
|
formLabelWidth: "120px",
|
|
form: {
|
|
name: "",
|
|
id: "",
|
|
sortnumber: "0",
|
|
allow_level:0
|
|
},
|
|
userdata: [],
|
|
filterMethod(query, item) {
|
|
return item.name.indexOf(query) > -1;
|
|
},
|
|
rules: {
|
|
name: [{
|
|
required: true,
|
|
message: '请输入角色名称',
|
|
trigger: 'blur'
|
|
}],
|
|
},
|
|
tableHeight: 0,
|
|
//查询条件字段
|
|
searchFields: {
|
|
KeyWord: ""
|
|
},
|
|
tableData: [],
|
|
setForm: {
|
|
name: "",
|
|
ids: [],
|
|
role_id: ""
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
load() {
|
|
var that = this;
|
|
list().then(response => {
|
|
that.tableData = response;
|
|
}).catch(error => {
|
|
//reject(error)
|
|
})
|
|
},
|
|
loadUser() {
|
|
listCommonuser({
|
|
page_size: 999
|
|
}).
|
|
then((res) => {
|
|
this.userdata = res.data;
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
edit(obj) {
|
|
if (obj) {
|
|
this.form.id = obj.id;
|
|
this.form.name = obj.name;
|
|
}
|
|
this.dialogFormVisible = true;
|
|
},
|
|
set(obj) {
|
|
var that = this;
|
|
this.setForm.role_id = "";
|
|
this.setForm.ids = [];
|
|
this.setForm.name = obj.name;
|
|
this.setForm.role_id = obj.id;
|
|
if (obj.admin) {
|
|
for (var m of obj.admin) {
|
|
this.setForm.ids.push(m.id);
|
|
}
|
|
}
|
|
this.dialogSetVisible = true;
|
|
this.loadUser();
|
|
},
|
|
submitSet() {
|
|
let that = this;
|
|
if (that.setForm.ids.length == 0) {
|
|
this.$Message.error("请选择人员");
|
|
return false;
|
|
}
|
|
|
|
set(that.setForm).then(response => {
|
|
this.$Message.success('操作成功');
|
|
that.load();
|
|
that.dialogSetVisible = false;
|
|
}).catch(error => {
|
|
this.$Message.error(error);
|
|
})
|
|
},
|
|
del(obj) {
|
|
var that = this;
|
|
if (obj) {
|
|
this.$Modal.confirm({
|
|
title: '确认要删除数据？',
|
|
onOk: () => {
|
|
del({
|
|
id: obj.id
|
|
}).then(response => {
|
|
this.$Message.success('操作成功');
|
|
that.load();
|
|
}).catch(error => {
|
|
console.log(error)
|
|
reject(error)
|
|
})
|
|
},
|
|
onCancel: () => {
|
|
//this.$Message.info('Clicked cancel');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
submitForm(formName) {
|
|
var that = this;
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
save(that.form).then(response => {
|
|
console.log(response)
|
|
this.$Message.success('操作成功');
|
|
that.load();
|
|
that.dialogFormVisible = false;
|
|
}).catch(error => {
|
|
reject(error)
|
|
})
|
|
} else {
|
|
this.$Message.error('数据校验失败');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm(formName) {
|
|
var that = this;
|
|
this.$refs[formName].resetFields();
|
|
that.dialogFormVisible = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|