朱兆平 / vue_cli · 提交

转到一个项目

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

add: 

1. 增加数据权限管理界面
内嵌 并排对比
正在显示 4 个修改的文件 包含 385 行增加 和 2 行删除
  1 +import http from '../http.js'
  2 +
  3 +const baseUrl = '/cloud-user-center/dataPermission'
  4 +
  5 +export const getList = params => {
  6 + return new Promise((resolve, reject) => {
  7 + http.get(`${baseUrl}/list`, params)
  8 + .then(response => {
  9 + const res = response.data
  10 + if (res.code !== '200') {
  11 + reject(res.msg || '接口错误')
  12 + } else {
  13 + resolve(res.data)
  14 + }
  15 + })
  16 + .catch(error => {
  17 + reject(error.toString())
  18 + })
  19 + })
  20 +}
  21 +
  22 +export const addDataPerm = data => {
  23 + return new Promise((resolve, reject) => {
  24 + http.post(`${baseUrl}/create`, data)
  25 + .then(response => {
  26 + const res = response.data
  27 + if (res.code !== '200') {
  28 + reject(res.msg || '接口错误')
  29 + } else {
  30 + resolve(res.data)
  31 + }
  32 + })
  33 + .catch(error => {
  34 + reject(error.toString())
  35 + })
  36 + })
  37 +}
  38 +
  39 +export const deleteDataPerm = id => {
  40 + return new Promise((resolve, reject) => {
  41 + http.post(`${baseUrl}/del/${id}`)
  42 + .then(response => {
  43 + const res = response.data
  44 + if (res.code !== '200') {
  45 + reject(res.msg || '接口错误')
  46 + } else {
  47 + resolve(res.data)
  48 + }
  49 + })
  50 + .catch(error => {
  51 + reject(error.toString())
  52 + })
  53 + })
  54 +}
  55 +
  56 +export const updateDataPerm = (id, data) => {
  57 + return new Promise((resolve, reject) => {
  58 + http.post(`${baseUrl}/update`, data)
  59 + .then(response => {
  60 + const res = response.data
  61 + if (res.code !== '200') {
  62 + reject(res.msg || '接口错误')
  63 + } else {
  64 + resolve(res.data)
  65 + }
  66 + })
  67 + .catch(error => {
  68 + reject(error.toString())
  69 + })
  70 + })
  71 +}
@@ -7,6 +7,7 @@ import Main from './views/dashboard/index' @@ -7,6 +7,7 @@ import Main from './views/dashboard/index'
7 import Role from './views/nav1/role.vue' 7 import Role from './views/nav1/role.vue'
8 import CRM from './views/nav1/crm.vue' 8 import CRM from './views/nav1/crm.vue'
9 import Perm from './views/nav1/perm.vue' 9 import Perm from './views/nav1/perm.vue'
  10 +import DataPerm from './views/nav1/DataPerm.vue'
10 import LOG from './views/nav1/Log.vue' 11 import LOG from './views/nav1/Log.vue'
11 import PreManifest from './views/agent/PreManifest.vue' 12 import PreManifest from './views/agent/PreManifest.vue'
12 import Company from './views/nav1/company.vue' 13 import Company from './views/nav1/company.vue'
@@ -300,6 +301,7 @@ let routes = [ @@ -300,6 +301,7 @@ let routes = [
300 { path: '/role', component: Role, name: '组织机构' }, 301 { path: '/role', component: Role, name: '组织机构' },
301 { path: '/crm', component: CRM, name: '组织机构' }, 302 { path: '/crm', component: CRM, name: '组织机构' },
302 { path: '/perm', component: Perm, name: '权限管理' }, 303 { path: '/perm', component: Perm, name: '权限管理' },
  304 + { path: '/dataperm', component: DataPerm, name: '数据权限' },
303 { path: '/log', component: LOG, name: '系统日志' }, 305 { path: '/log', component: LOG, name: '系统日志' },
304 { path: '/department', component: Department, name: '部门管理' }, 306 { path: '/department', component: Department, name: '部门管理' },
305 { path: '/company', component: Company, name: '公司管理'}, 307 { path: '/company', component: Company, name: '公司管理'},
  1 +<template>
  2 + <div>
  3 + <el-row>
  4 + <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5 + <el-form :inline="true">
  6 + <el-button type="primary" @click="getDataList" icon="el-icon-search">查询</el-button>
  7 + <el-button type="success" @click="showAddDialog" icon="el-icon-document">新增</el-button>
  8 + </el-form>
  9 + </el-col>
  10 + </el-row>
  11 + <el-table :data="tableList" style="width: 100%">
  12 + <el-table-column type="expand">
  13 + <template slot-scope="scope">
  14 + <el-form label-position="left" class="demo-table-expand" :inline="true">
  15 + <el-form-item label="创建时间">
  16 + <span>{{ scope.row.create_time }}</span>
  17 + </el-form-item>
  18 + <el-form-item label="更新时间">
  19 + <span>{{ scope.row.update_time }}</span>
  20 + </el-form-item>
  21 + <el-form-item label="创建人">
  22 + <span>{{ scope.row.create_user }}</span>
  23 + </el-form-item>
  24 + <el-form-item label="接口描述">
  25 + <span>{{ scope.row.perm_des }}</span>
  26 + </el-form-item>
  27 + <el-form-item label="路由ID">
  28 + <span>{{ scope.row.permission_id }}</span>
  29 + </el-form-item>
  30 + <el-form-item label="路由地址">
  31 + <span>{{ scope.row.path }}</span>
  32 + </el-form-item>
  33 + <el-form-item label="路由名称">
  34 + <span>{{ scope.row.interface_name }}</span>
  35 + </el-form-item>
  36 + <el-form-item label="服务名称">
  37 + <span>{{ scope.row.service_name }}</span>
  38 + </el-form-item>
  39 + <el-form-item label="列条件">
  40 + <span>{{ scope.row.cols_list }}</span>
  41 + </el-form-item>
  42 + <el-form-item label="服务描述">
  43 + <span>{{ scope.row.service_name_des }}</span>
  44 + </el-form-item>
  45 + </el-form>
  46 + </template>
  47 + </el-table-column>
  48 + <!-- 表格列配置 -->
  49 + <el-table-column prop="data_perm_id" label="ID"></el-table-column>
  50 + <el-table-column prop="perm_name" label="名称"></el-table-column>
  51 + <el-table-column prop="perm_sort" label="排序"></el-table-column>
  52 + <el-table-column prop="row_condition" label="行条件"></el-table-column>
  53 + <el-table-column prop="row_condition_property" label="属性名"></el-table-column>
  54 + <el-table-column prop="cols_list" label="列条件" show-overflow-tooltip></el-table-column>
  55 + <el-table-column prop="perm_keyword" label="关键字"></el-table-column>
  56 + <el-table-column prop="perm_type" label="权限类别"></el-table-column>
  57 + <el-table-column prop="perm_status" label="禁用状态">
  58 + <template slot-scope="scope">
  59 + <el-tag type="success" v-if="!scope.row.perm_status">正常</el-tag>
  60 + <el-tag type="danger" v-else>禁用</el-tag>
  61 + </template>
  62 + </el-table-column>
  63 + <el-table-column label="操作" width="200">
  64 + <template slot-scope="scope">
  65 + <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
  66 + <el-button size="mini" type="danger" @click="handleDelete(scope.row.data_perm_id)">删除</el-button>
  67 + </template>
  68 + </el-table-column>
  69 + </el-table>
  70 + <!-- 分页组件 -->
  71 + <el-pagination
  72 + :current-page="form.pageNum"
  73 + :page-sizes="[10, 50, 100, 500]"
  74 + :page-size="form.pageSize"
  75 + layout="total, sizes, prev, pager, next, jumper"
  76 + :total="total"
  77 + @size-change="handleSizeChange"
  78 + @current-change="handleCurrentChange"
  79 + />
  80 + <!-- 新增/编辑对话框 -->
  81 + <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogVisible" width="90%">
  82 + <el-form ref="dataForm" :model="formData" label-width="100px" :inline="true">
  83 +<!-- <div>-->
  84 +<!-- &lt;!&ndash; 其他内容 &ndash;&gt;-->
  85 +<!-- <pre>{{ formData }}</pre>-->
  86 +<!-- &lt;!&ndash; 其他内容 &ndash;&gt;-->
  87 +<!-- </div>-->
  88 + <el-row>
  89 + <el-col :span="6" v-for="(item, index) in dynamicFormItems" :key="index">
  90 + <!-- 根据表格字段动态生成表单项 -->
  91 + <el-form-item label=" " :prop="item.prop">
  92 + <!-- 根据不同的数据类型渲染不同的输入组件 -->
  93 + <template v-if="item.type === 'text'">
  94 + <el-input v-model="formData[item.prop]" :placeholder="item.placeholder" :disabled="item.disabled">
  95 + <template slot="prepend">{{item.label}}</template>
  96 + </el-input>
  97 + </template>
  98 + <template v-else-if="item.type === 'textarea'">
  99 + <div class="my-text-area">
  100 + <div class="el-input-group__prepend prepand">{{item.label}}</div>
  101 + <el-input type="textarea"
  102 + v-model="formData[item.prop]"
  103 + autosize
  104 + style="float: left;width:calc(100% - 110px)">
  105 + </el-input>
  106 + </div>
  107 + </template>
  108 + <template v-else-if="item.type === 'select'">
  109 + <div class="my-text-area">
  110 + <div class="el-input-group__prepend prepand">{{item.label}}</div>
  111 + <el-select v-model="formData[item.prop]">
  112 + <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  113 + </el-select>
  114 + </div>
  115 +
  116 + </template>
  117 + <!-- 其他类型的输入组件可以根据需要添加 -->
  118 + </el-form-item>
  119 + </el-col>
  120 + </el-row>
  121 +
  122 + </el-form>
  123 + <div slot="footer" class="dialog-footer">
  124 + <el-button @click="dialogVisible = false">取消</el-button>
  125 + <el-button type="primary" @click="saveData">保存</el-button>
  126 + </div>
  127 + </el-dialog>
  128 + </div>
  129 +</template>
  130 +
  131 +<script>
  132 + import { getList, addDataPerm, deleteDataPerm, updateDataPerm } from '@/api/user/data_perm_api.js'
  133 + import {loginedUserInfo} from "@/api/user.js";
  134 + import jsutil from "@/common/js/util";
  135 + export default {
  136 + data() {
  137 + return {
  138 + tableList: [],
  139 + total: 0,
  140 + form: {
  141 + pageNum: 1,
  142 + pageSize: 10
  143 + },
  144 + dialogTitle: '',
  145 + currentUserInfo:{},
  146 + dialogVisible: false,
  147 + formData: {},
  148 + dialogMap: {
  149 + update: '编辑',
  150 + create: '新增',
  151 + find: '查看',
  152 + },
  153 + dialogStatus: 'create',
  154 + dynamicFormItems: [
  155 + // 直接映射到表单项的字段,todo:增加区域界线,并用横线进行区域录入区分
  156 + { label: 'ID', prop: 'data_perm_id', type: 'text',placeholder:'' ,disabled:true},
  157 + { label: '权限名称', prop: 'perm_name', type: 'text',placeholder:'如:用户列表数据权限' },
  158 + { label: '排序', prop: 'perm_sort', type: 'text' ,placeholder:'如:1'},
  159 + { label: '行条件', prop: 'row_condition', type: 'text',placeholder:'如:username' },
  160 + { label: '属性名', prop: 'row_condition_property', type: 'text' ,placeholder:'如:username'},
  161 + { label: '列条件', prop: 'cols_list', type: 'text' ,placeholder:'如:[username,age,tel]为json格式数组'},
  162 + { label: '关键字', prop: 'perm_keyword', type: 'text' ,placeholder:'如:用户'},
  163 + { label: '权限类别', prop: 'perm_type', type: 'text' ,placeholder:''},
  164 + { label: '路由ID', prop: 'permission_id', type: 'text' ,placeholder:'如: 35'},
  165 + { label: '路由地址', prop: 'path', type: 'text' ,placeholder:'如:/user/list'},
  166 + { label: '路由名称', prop: 'interface_name', type: 'text' ,placeholder:'如:用户列表接口'},
  167 + { label: '服务名称', prop: 'service_name', type: 'text' ,placeholder:'如:user-center'},
  168 + { label: '服务描述', prop: 'service_name_des', type: 'text' ,placeholder:'如:用户管理服务'},
  169 + // 需要特殊处理的字段
  170 + {
  171 + label: '禁用状态',
  172 + prop: 'perm_status',
  173 + type: 'select',
  174 + placeholder: '请选择状态',
  175 + options: [
  176 + { value: false, label: '正常' },
  177 + { value: true, label: '禁用' }
  178 + ]
  179 + },
  180 + { label: '创建人', prop: 'create_user', type: 'text' ,placeholder: '',disabled:true},
  181 + { label: '权限描述', prop: 'perm_des', type: 'textarea' }
  182 + // 其他特殊处理的字段可以在这里添加
  183 + ]
  184 + }
  185 + },
  186 + mounted() {
  187 + this.getDataList();
  188 + this.getCurrentUserInfo();
  189 + },
  190 + methods: {
  191 + getCurrentUserInfo(){
  192 + let userinfo = loginedUserInfo();
  193 + if (!jsutil.checkNull(userinfo) && !jsutil.checkNull(userinfo.username)){
  194 + this.$message.error("获取用户信息出错")
  195 + }else{
  196 + this.currentUserInfo = userinfo
  197 + }
  198 + },
  199 + getDataList() {
  200 + getList({
  201 + pageNum: this.form.pageNum,
  202 + pageSize: this.form.pageSize
  203 + }).then(res => {
  204 + this.$message.success('获取列表成功')
  205 + this.tableList = res.list
  206 + this.total = res.total
  207 + }).catch(error => {
  208 + this.$message.error(error)
  209 + })
  210 + },
  211 + handleSizeChange(size) {
  212 + this.form.pageSize = size
  213 + this.getDataList()
  214 + },
  215 + handleCurrentChange(page) {
  216 + this.form.pageNum = page
  217 + this.getDataList()
  218 + },
  219 + showAddDialog() {
  220 + this.dialogStatus= 'create'
  221 + this.formData = {}
  222 + this.formData.create_user = this.currentUserInfo.username
  223 + this.dialogVisible = true
  224 + },
  225 + handleEdit(row) {
  226 + this.dialogStatus= 'update'
  227 + this.formData = { ...row }
  228 + this.dialogVisible = true
  229 + },
  230 + saveData() {
  231 + this.$refs.dataForm.validate(valid => {
  232 + if (valid) {
  233 + if (this.formData.data_perm_id) {
  234 + // 编辑操作
  235 + updateDataPerm(this.formData.data_perm_id, this.formData)
  236 + .then(() => {
  237 + this.$message.success('编辑成功')
  238 + this.dialogVisible = false
  239 + this.getDataList()
  240 + })
  241 + .catch(error => {
  242 + this.$message.error(error)
  243 + })
  244 + } else {
  245 + // 新增操作
  246 + addDataPerm(this.formData)
  247 + .then(() => {
  248 + this.$message.success('新增成功')
  249 + this.dialogVisible = false
  250 + this.getDataList()
  251 + })
  252 + .catch(error => {
  253 + this.$message.error(error)
  254 + })
  255 + }
  256 + }
  257 + })
  258 + },
  259 + handleDelete(id) {
  260 + this.$confirm('确认删除该数据权限吗?', '提示', {
  261 + confirmButtonText: '确定',
  262 + cancelButtonText: '取消',
  263 + type: 'warning'
  264 + }).then(() => {
  265 + deleteDataPerm(id)
  266 + .then(() => {
  267 + this.$message.success('删除成功')
  268 + this.getDataList()
  269 + })
  270 + .catch(error => {
  271 + this.$message.error(error)
  272 + })
  273 + }).catch(() => {
  274 + this.$message.info('已取消删除')
  275 + })
  276 + }
  277 + }
  278 + }
  279 +</script>
  280 +
  281 +<style>
  282 + .demo-table-expand {
  283 + font-size: 0;
  284 + }
  285 + .demo-table-expand label {
  286 + width: 90px;
  287 + color: #99a9bf;
  288 + }
  289 + .demo-table-expand .el-form-item {
  290 + margin-right: 0;
  291 + margin-bottom: 0;
  292 + width: 50%;
  293 + }
  294 + .my-text-area .el-textarea__inner{
  295 + min-height: 28px;
  296 + height: 28px;
  297 + border-bottom-left-radius: 0;
  298 + border-top-left-radius: 0;
  299 + }
  300 +</style>
  301 +
  302 +<style scoped>
  303 + .my-text-area .prepand{
  304 + float: left;
  305 + width:89px;
  306 + height: 28px;
  307 + font-size: 12px;
  308 + line-height: 28px;
  309 + }
  310 +</style>
@@ -373,10 +373,10 @@ @@ -373,10 +373,10 @@
373 }; 373 };
374 getRoleList(para).then((res) => { 374 getRoleList(para).then((res) => {
375 this.options = res.data.list; 375 this.options = res.data.list;
376 - this.listLoading = false;  
377 - //NProgress.done();  
378 }).catch(() => { 376 }).catch(() => {
379 377
  378 + }).finally(()=>{
  379 + this.listLoading = false;
380 }); 380 });
381 }, 381 },
382 //删除 382 //删除