朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 ffa7f4a690f5d92c660889793baf2a024b6a9337 1 个父辈 0cedccce

add: 

1. 增加数据权限管理界面
内嵌 并排对比
正在显示 4 个修改的文件 包含 385 行增加 和 2 行删除
import http from '../http.js'
const baseUrl = '/cloud-user-center/dataPermission'
export const getList = params => {
return new Promise((resolve, reject) => {
http.get(`${baseUrl}/list`, params)
.then(response => {
const res = response.data
if (res.code !== '200') {
reject(res.msg || '接口错误')
} else {
resolve(res.data)
}
})
.catch(error => {
reject(error.toString())
})
})
}
export const addDataPerm = data => {
return new Promise((resolve, reject) => {
http.post(`${baseUrl}/create`, data)
.then(response => {
const res = response.data
if (res.code !== '200') {
reject(res.msg || '接口错误')
} else {
resolve(res.data)
}
})
.catch(error => {
reject(error.toString())
})
})
}
export const deleteDataPerm = id => {
return new Promise((resolve, reject) => {
http.post(`${baseUrl}/del/${id}`)
.then(response => {
const res = response.data
if (res.code !== '200') {
reject(res.msg || '接口错误')
} else {
resolve(res.data)
}
})
.catch(error => {
reject(error.toString())
})
})
}
export const updateDataPerm = (id, data) => {
return new Promise((resolve, reject) => {
http.post(`${baseUrl}/update`, data)
.then(response => {
const res = response.data
if (res.code !== '200') {
reject(res.msg || '接口错误')
} else {
resolve(res.data)
}
})
.catch(error => {
reject(error.toString())
})
})
}
... ...
... ... @@ -7,6 +7,7 @@ import Main from './views/dashboard/index'
import Role from './views/nav1/role.vue'
import CRM from './views/nav1/crm.vue'
import Perm from './views/nav1/perm.vue'
import DataPerm from './views/nav1/DataPerm.vue'
import LOG from './views/nav1/Log.vue'
import PreManifest from './views/agent/PreManifest.vue'
import Company from './views/nav1/company.vue'
... ... @@ -300,6 +301,7 @@ let routes = [
{ path: '/role', component: Role, name: '组织机构' },
{ path: '/crm', component: CRM, name: '组织机构' },
{ path: '/perm', component: Perm, name: '权限管理' },
{ path: '/dataperm', component: DataPerm, name: '数据权限' },
{ path: '/log', component: LOG, name: '系统日志' },
{ path: '/department', component: Department, name: '部门管理' },
{ path: '/company', component: Company, name: '公司管理'},
... ...
<template>
<div>
<el-row>
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true">
<el-button type="primary" @click="getDataList" icon="el-icon-search">查询</el-button>
<el-button type="success" @click="showAddDialog" icon="el-icon-document">新增</el-button>
</el-form>
</el-col>
</el-row>
<el-table :data="tableList" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" class="demo-table-expand" :inline="true">
<el-form-item label="创建时间">
<span>{{ scope.row.create_time }}</span>
</el-form-item>
<el-form-item label="更新时间">
<span>{{ scope.row.update_time }}</span>
</el-form-item>
<el-form-item label="创建人">
<span>{{ scope.row.create_user }}</span>
</el-form-item>
<el-form-item label="接口描述">
<span>{{ scope.row.perm_des }}</span>
</el-form-item>
<el-form-item label="路由ID">
<span>{{ scope.row.permission_id }}</span>
</el-form-item>
<el-form-item label="路由地址">
<span>{{ scope.row.path }}</span>
</el-form-item>
<el-form-item label="路由名称">
<span>{{ scope.row.interface_name }}</span>
</el-form-item>
<el-form-item label="服务名称">
<span>{{ scope.row.service_name }}</span>
</el-form-item>
<el-form-item label="列条件">
<span>{{ scope.row.cols_list }}</span>
</el-form-item>
<el-form-item label="服务描述">
<span>{{ scope.row.service_name_des }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<!-- 表格列配置 -->
<el-table-column prop="data_perm_id" label="ID"></el-table-column>
<el-table-column prop="perm_name" label="名称"></el-table-column>
<el-table-column prop="perm_sort" label="排序"></el-table-column>
<el-table-column prop="row_condition" label="行条件"></el-table-column>
<el-table-column prop="row_condition_property" label="属性名"></el-table-column>
<el-table-column prop="cols_list" label="列条件" show-overflow-tooltip></el-table-column>
<el-table-column prop="perm_keyword" label="关键字"></el-table-column>
<el-table-column prop="perm_type" label="权限类别"></el-table-column>
<el-table-column prop="perm_status" label="禁用状态">
<template slot-scope="scope">
<el-tag type="success" v-if="!scope.row.perm_status">正常</el-tag>
<el-tag type="danger" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row.data_perm_id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
:current-page="form.pageNum"
:page-sizes="[10, 50, 100, 500]"
:page-size="form.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<!-- 新增/编辑对话框 -->
<el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogVisible" width="90%">
<el-form ref="dataForm" :model="formData" label-width="100px" :inline="true">
<!-- <div>-->
<!-- &lt;!&ndash; 其他内容 &ndash;&gt;-->
<!-- <pre>{{ formData }}</pre>-->
<!-- &lt;!&ndash; 其他内容 &ndash;&gt;-->
<!-- </div>-->
<el-row>
<el-col :span="6" v-for="(item, index) in dynamicFormItems" :key="index">
<!-- 根据表格字段动态生成表单项 -->
<el-form-item label=" " :prop="item.prop">
<!-- 根据不同的数据类型渲染不同的输入组件 -->
<template v-if="item.type === 'text'">
<el-input v-model="formData[item.prop]" :placeholder="item.placeholder" :disabled="item.disabled">
<template slot="prepend">{{item.label}}</template>
</el-input>
</template>
<template v-else-if="item.type === 'textarea'">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">{{item.label}}</div>
<el-input type="textarea"
v-model="formData[item.prop]"
autosize
style="float: left;width:calc(100% - 110px)">
</el-input>
</div>
</template>
<template v-else-if="item.type === 'select'">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">{{item.label}}</div>
<el-select v-model="formData[item.prop]">
<el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</div>
</template>
<!-- 其他类型的输入组件可以根据需要添加 -->
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveData">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getList, addDataPerm, deleteDataPerm, updateDataPerm } from '@/api/user/data_perm_api.js'
import {loginedUserInfo} from "@/api/user.js";
import jsutil from "@/common/js/util";
export default {
data() {
return {
tableList: [],
total: 0,
form: {
pageNum: 1,
pageSize: 10
},
dialogTitle: '',
currentUserInfo:{},
dialogVisible: false,
formData: {},
dialogMap: {
update: '编辑',
create: '新增',
find: '查看',
},
dialogStatus: 'create',
dynamicFormItems: [
// 直接映射到表单项的字段,todo:增加区域界线,并用横线进行区域录入区分
{ label: 'ID', prop: 'data_perm_id', type: 'text',placeholder:'' ,disabled:true},
{ label: '权限名称', prop: 'perm_name', type: 'text',placeholder:'如:用户列表数据权限' },
{ label: '排序', prop: 'perm_sort', type: 'text' ,placeholder:'如:1'},
{ label: '行条件', prop: 'row_condition', type: 'text',placeholder:'如:username' },
{ label: '属性名', prop: 'row_condition_property', type: 'text' ,placeholder:'如:username'},
{ label: '列条件', prop: 'cols_list', type: 'text' ,placeholder:'如:[username,age,tel]为json格式数组'},
{ label: '关键字', prop: 'perm_keyword', type: 'text' ,placeholder:'如:用户'},
{ label: '权限类别', prop: 'perm_type', type: 'text' ,placeholder:''},
{ label: '路由ID', prop: 'permission_id', type: 'text' ,placeholder:'如: 35'},
{ label: '路由地址', prop: 'path', type: 'text' ,placeholder:'如:/user/list'},
{ label: '路由名称', prop: 'interface_name', type: 'text' ,placeholder:'如:用户列表接口'},
{ label: '服务名称', prop: 'service_name', type: 'text' ,placeholder:'如:user-center'},
{ label: '服务描述', prop: 'service_name_des', type: 'text' ,placeholder:'如:用户管理服务'},
// 需要特殊处理的字段
{
label: '禁用状态',
prop: 'perm_status',
type: 'select',
placeholder: '请选择状态',
options: [
{ value: false, label: '正常' },
{ value: true, label: '禁用' }
]
},
{ label: '创建人', prop: 'create_user', type: 'text' ,placeholder: '',disabled:true},
{ label: '权限描述', prop: 'perm_des', type: 'textarea' }
// 其他特殊处理的字段可以在这里添加
]
}
},
mounted() {
this.getDataList();
this.getCurrentUserInfo();
},
methods: {
getCurrentUserInfo(){
let userinfo = loginedUserInfo();
if (!jsutil.checkNull(userinfo) && !jsutil.checkNull(userinfo.username)){
this.$message.error("获取用户信息出错")
}else{
this.currentUserInfo = userinfo
}
},
getDataList() {
getList({
pageNum: this.form.pageNum,
pageSize: this.form.pageSize
}).then(res => {
this.$message.success('获取列表成功')
this.tableList = res.list
this.total = res.total
}).catch(error => {
this.$message.error(error)
})
},
handleSizeChange(size) {
this.form.pageSize = size
this.getDataList()
},
handleCurrentChange(page) {
this.form.pageNum = page
this.getDataList()
},
showAddDialog() {
this.dialogStatus= 'create'
this.formData = {}
this.formData.create_user = this.currentUserInfo.username
this.dialogVisible = true
},
handleEdit(row) {
this.dialogStatus= 'update'
this.formData = { ...row }
this.dialogVisible = true
},
saveData() {
this.$refs.dataForm.validate(valid => {
if (valid) {
if (this.formData.data_perm_id) {
// 编辑操作
updateDataPerm(this.formData.data_perm_id, this.formData)
.then(() => {
this.$message.success('编辑成功')
this.dialogVisible = false
this.getDataList()
})
.catch(error => {
this.$message.error(error)
})
} else {
// 新增操作
addDataPerm(this.formData)
.then(() => {
this.$message.success('新增成功')
this.dialogVisible = false
this.getDataList()
})
.catch(error => {
this.$message.error(error)
})
}
}
})
},
handleDelete(id) {
this.$confirm('确认删除该数据权限吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteDataPerm(id)
.then(() => {
this.$message.success('删除成功')
this.getDataList()
})
.catch(error => {
this.$message.error(error)
})
}).catch(() => {
this.$message.info('已取消删除')
})
}
}
}
</script>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
.my-text-area .el-textarea__inner{
min-height: 28px;
height: 28px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
</style>
<style scoped>
.my-text-area .prepand{
float: left;
width:89px;
height: 28px;
font-size: 12px;
line-height: 28px;
}
</style>
... ...
... ... @@ -373,10 +373,10 @@
};
getRoleList(para).then((res) => {
this.options = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch(() => {
}).finally(()=>{
this.listLoading = false;
});
},
//删除
... ...