|
@@ -1,411 +0,0 @@
|
|
|
-<template>
|
|
|
- <section>
|
|
|
- <!--工具条-->
|
|
|
- <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
|
|
|
- <el-form :inline="true" :model="filters">
|
|
|
- <el-form-item>
|
|
|
- <el-input v-model="filters.keyName" placeholder="请输入角色名称进行搜索" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click.native="getRoles">查询</el-button>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item style="float:right;">
|
|
|
- <el-button type="primary" @click.native="handleAdd">新增</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <!--列表-->
|
|
|
- <el-table :data="list" highlight-current-row :height="tableHeight" v-loading="listLoading" style="width: 100%;">
|
|
|
- <el-table-column type="index" width="60"></el-table-column>
|
|
|
- <el-table-column prop="roleName" label="角色名称" width="120" sortable></el-table-column>
|
|
|
- <el-table-column prop="subordinate" label="角色类型" width="120" sortable></el-table-column>
|
|
|
- <el-table-column label="权限">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-col :span="2" v-if="scope.row.viewPower == 1">
|
|
|
- <el-tag size="medium">浏览</el-tag>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" v-if="scope.row.dowloadPower == 1">
|
|
|
- <el-tag size="medium">下载</el-tag>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" v-if="scope.row.uploadPower == 1">
|
|
|
- <el-tag size="medium">上传</el-tag>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" v-if="scope.row.approvalPower == 1">
|
|
|
- <el-tag size="medium">审批</el-tag>
|
|
|
- </el-col>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="150">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button size="small" @click.native="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
- <el-button type="danger" size="small" @click.native.native="handleDel(scope.$index, scope.row)">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <!--工具条-->
|
|
|
- <el-col :span="24" class="toolbar">
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :page-sizes="[20 , 50 , 80 , 100]"
|
|
|
- :page-size="20"
|
|
|
- layout="total, sizes, prev, pager, next"
|
|
|
- :total="total"
|
|
|
- style="float:right;">
|
|
|
- </el-pagination>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <!--新增界面-->
|
|
|
- <el-dialog title="新增角色" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass='customWidth'>
|
|
|
- <el-form :model="addForm" label-width="100px" :rules="formRules" ref="addForm">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="角色名称" prop="roleName">
|
|
|
- <el-input v-model="addForm.roleName" autocomplete="off" placeholder="请输入角色名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="角色类型" prop="subordinate">
|
|
|
- <el-select v-model="addForm.subordinate" clearable filterable placeholder="请选择角色类型" style="width:202px">
|
|
|
- <el-option v-for="item in team" :key="item.value" :label="item.label" :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="权限配置">
|
|
|
- <el-col :span="6" v-for="(item,index) in roleList" :key="item.val" style="text-align:center;">
|
|
|
- <el-checkbox v-model="addForm[item.label]">{{item.name}}</el-checkbox>
|
|
|
- </el-col>
|
|
|
- <!-- <el-table :data="roleList" border :show-header="false" style="width: 100%">
|
|
|
- <el-table-column prop="name" label="名称" width="80"></el-table-column>
|
|
|
- <el-table-column prop="role" label="权限">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-for="(item,index) in scope.row.role"></div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table> -->
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click.native="addFormVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!--编辑界面-->
|
|
|
- <el-dialog title="编辑人员" v-if="editFormVisible" :visible.sync="editFormVisible" :close-on-click-modal="false" customClass='customWidth'>
|
|
|
- <el-form :model="editForm" label-width="100px" :rules="formRules" ref="editForm">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="角色名称" prop="roleName">
|
|
|
- <el-input v-model="editForm.roleName" autocomplete="off" placeholder="请输入角色名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="角色类型" prop="subordinate">
|
|
|
- <el-select v-model="editForm.subordinate" clearable filterable placeholder="请选择角色类型" style="width:202px">
|
|
|
- <el-option v-for="item in team" :key="item.value" :label="item.label" :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="权限配置">
|
|
|
- <el-row>
|
|
|
- <el-col :span="6" v-for="(item,index) in roleList" :key="item.val" style="text-align:center;">
|
|
|
- <el-checkbox v-model="editForm[item.label]" :checked="editForm[item.label]">{{item.name}}</el-checkbox>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!-- <el-table :data="roleList" border :show-header="false" style="width: 100%">
|
|
|
- <el-table-column prop="name" label="名称" width="80"></el-table-column>
|
|
|
- <el-table-column prop="role" label="权限">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-for="(item,index) in scope.row.role"></div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table> -->
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click.native="editFormVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </section>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import util from '../../common/js/util'
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- filters: {
|
|
|
- keyName: ''
|
|
|
- },
|
|
|
- team: [{label:'供应商',value:'供应商'},{label:'客户',value:'客户'}],
|
|
|
- // roleList: [{
|
|
|
- // name: '项目文档',
|
|
|
- // role: [{name:'上传',val:0},{name:'下载',val:1},{name:'浏览',val:2},{name:'审批',val:3}]
|
|
|
- // },{
|
|
|
- // name: '模具文档',
|
|
|
- // role: 2
|
|
|
- // },{
|
|
|
- // name: '零件文档',
|
|
|
- // role: 3
|
|
|
- // },{
|
|
|
- // name: '模具保养',
|
|
|
- // role: 4
|
|
|
- // },{
|
|
|
- // name: '模具更新',
|
|
|
- // role: 5
|
|
|
- // },{
|
|
|
- // name: '模具报废',
|
|
|
- // role: 6
|
|
|
- // }],
|
|
|
- roleList: [
|
|
|
- {name:'上传',val:0,label:'uploadPower',uploadPower:false},
|
|
|
- {name:'下载',val:1,label:'dowloadPower',dowloadPower:false},
|
|
|
- {name:'浏览',val:2,label:'viewPower',viewPower:false},
|
|
|
- {name:'审批',val:3,label:'approvalPower',approvalPower:false}
|
|
|
- ],
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- page: 1,
|
|
|
- size: 20,
|
|
|
- listLoading: false,
|
|
|
- tableHeight: 0,
|
|
|
-
|
|
|
- formRules: {
|
|
|
- roleName: [
|
|
|
- { required: true, message: '请输入姓名', trigger: 'blur' }
|
|
|
- ],
|
|
|
- subordinate: [
|
|
|
- { required: true, message: '请选择角色类型', trigger: ['blur','change'] }
|
|
|
- ]
|
|
|
- },
|
|
|
-
|
|
|
- // 新增界面
|
|
|
- addFormVisible: false,
|
|
|
- addLoading: false,
|
|
|
- addForm: {
|
|
|
- roleName: '',
|
|
|
- uploadPower: false,
|
|
|
- dowloadPower:false,
|
|
|
- viewPower:false,
|
|
|
- approvalPower:false,
|
|
|
- subordinate: '',
|
|
|
- flag: 0
|
|
|
- },
|
|
|
-
|
|
|
- // 编辑界面
|
|
|
- editFormVisible: false,
|
|
|
- editLoading: false,
|
|
|
- editForm: {
|
|
|
- id: 0,
|
|
|
- roleName: '',
|
|
|
- uploadPower: false,
|
|
|
- dowloadPower:false,
|
|
|
- viewPower:false,
|
|
|
- approvalPower:false,
|
|
|
- subordinate: '',
|
|
|
- flag: 1
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 分页
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.page = val;
|
|
|
- this.getRoles();
|
|
|
- },
|
|
|
-
|
|
|
- handleSizeChange(val) {
|
|
|
- this.size = val;
|
|
|
- this.getRoles();
|
|
|
- },
|
|
|
-
|
|
|
- //获取用户列表
|
|
|
- getRoles() {
|
|
|
- this.listLoading = true;
|
|
|
- this.http.post(this.port.base.roleList, {
|
|
|
- keyName: this.filters.keyName,
|
|
|
- pageNum: this.page,
|
|
|
- pageSize: this.size
|
|
|
- }, res => {
|
|
|
- this.listLoading = false;
|
|
|
- if (res.code == "ok") {
|
|
|
- this.list = res.data.list;
|
|
|
- this.total = res.data.total;
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- }
|
|
|
- }, error => {
|
|
|
- this.listLoading = false;
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- //显示新增界面
|
|
|
- handleAdd() {
|
|
|
- this.addFormVisible = true;
|
|
|
- this.addForm = {
|
|
|
- roleName: '',
|
|
|
- uploadPower: false,
|
|
|
- dowloadPower:false,
|
|
|
- viewPower:false,
|
|
|
- approvalPower:false,
|
|
|
- subordinate: ''
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- //新增
|
|
|
- addSubmit() {
|
|
|
- this.$refs.addForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- this.addLoading = true;
|
|
|
- this.http.post(this.port.base.addRole, {
|
|
|
- roleName: this.addForm.roleName,
|
|
|
- uploadPower: this.addForm.uploadPower?1:0,
|
|
|
- dowloadPower: this.addForm.dowloadPower?1:0,
|
|
|
- viewPower: this.addForm.viewPower?1:0,
|
|
|
- approvalPower: this.addForm.approvalPower?1:0,
|
|
|
- subordinate: this.addForm.subordinate,
|
|
|
- flag: 0
|
|
|
- }, res => {
|
|
|
- this.addLoading = false;
|
|
|
- this.addFormVisible = false;
|
|
|
- if (res.code == "ok") {
|
|
|
- this.$message({
|
|
|
- message: '创建成功',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
- this.getRoles();
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- }
|
|
|
- }, error => {
|
|
|
- this.addLoading = false;
|
|
|
- this.addFormVisible = false;
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- //删除
|
|
|
- handleDel(index, row) {
|
|
|
- this.$confirm('确认删除该角色吗?', '提示', {
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- this.http.post(this.port.base.delRole, {
|
|
|
- id: row.id
|
|
|
- }, res => {
|
|
|
- if (res.code == "ok") {
|
|
|
- this.$message({
|
|
|
- message: '删除成功',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
- this.getRoles();
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- }
|
|
|
- }, error => {
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- //显示编辑界面
|
|
|
- handleEdit(index, row) {
|
|
|
- this.editFormVisible = true;
|
|
|
- this.editForm = {
|
|
|
- id: row.id,
|
|
|
- roleName: row.roleName,
|
|
|
- uploadPower: row.uploadPower==0?false:true,
|
|
|
- dowloadPower: row.dowloadPower==0?false:true,
|
|
|
- viewPower: row.viewPower==0?false:true,
|
|
|
- approvalPower: row.approvalPower==0?false:true
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- //编辑
|
|
|
- editSubmit() {
|
|
|
- this.$refs.editForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- this.editLoading = true;
|
|
|
- this.http.post(this.port.base.addRole, {
|
|
|
- id: this.editForm.id,
|
|
|
- roleName: this.editForm.roleName,
|
|
|
- uploadPower: this.editForm.uploadPower?1:0,
|
|
|
- dowloadPower: this.editForm.dowloadPower?1:0,
|
|
|
- viewPower: this.editForm.viewPower?1:0,
|
|
|
- approvalPower: this.editForm.approvalPower?1:0,
|
|
|
- flag: 1
|
|
|
- }, res => {
|
|
|
- this.editLoading = false;
|
|
|
- this.editFormVisible = false;
|
|
|
- if (res.code == "ok") {
|
|
|
- this.$message({
|
|
|
- message: '修改成功',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
- this.getRoles();
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- }
|
|
|
- }, error => {
|
|
|
- this.editLoading = false;
|
|
|
- this.editFormVisible = false;
|
|
|
- this.$message({
|
|
|
- message: error,
|
|
|
- type: 'error'
|
|
|
- });
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- created() {
|
|
|
- let height = window.innerHeight;
|
|
|
- this.tableHeight = height - 210;
|
|
|
- const that = this;
|
|
|
- window.onresize = function temp() {
|
|
|
- that.tableHeight = window.innerHeight - 210;
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- this.getRoles();
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-</style>
|