wenyongda/ZrAdminNetCore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化前端页面UI

Browse Source
This commit is contained in:
不做码农 2021-12-11 12:01:50 +08:00
parent 21aeb1057b
commit 75fd761299
5 changed files with 72 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ZR.Admin.WebApi/wwwroot/CodeGenTemplate/TplVue.txt
View File

@ -33,7 +33,7 @@ $end
</el-row> </el-row>
<!-- 数据区域 --> <!-- 数据区域 -->
<el-table :data="dataList" ref="table" border @selection-change="handleSelectionChange"> <el-table :data="dataList" ref="table" border highlight-current-row @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center"/> <el-table-column type="selection" width="50" align="center"/>
${VueViewListContent} ${VueViewListContent}
<el-table-column label="操作" align="center" width="200"> <el-table-column label="操作" align="center" width="200">

2
ZR.Vue/src/components/FileUpload/index.vue
View File

@ -4,7 +4,7 @@
:on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" class="upload-file-uploader" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" class="upload-file-uploader"
ref="upload"> ref="upload">
<!-- 上传按钮 --> <!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button> <el-button size="mini" type="primary" icon="el-icon-upload">选取文件</el-button>
<!-- 上传提示 --> <!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip"> <div class="el-upload__tip" slot="tip" v-if="showTip">
请上传 请上传

47
ZR.Vue/src/views/system/role/index.vue
View File

@ -2,7 +2,8 @@
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true"> <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
<el-form-item label="角色名称" prop="roleName"> <el-form-item label="角色名称" prop="roleName">
<el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" /> <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable size="small" style="width: 240px"
@keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="权限字符" prop="roleKey"> <!-- <el-form-item label="权限字符" prop="roleKey">
<el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" /> <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
@ -28,47 +29,49 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-row :gutter="24" style="display:flex;"> <el-row :gutter="24">
<el-col :span="15">
<el-table v-loading="loading" :data="roleList" border @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="roleList" border @selection-change="handleSelectionChange">
<el-table-column label="编号" prop="roleId" width="80" /> <el-table-column label="编号" prop="roleId" width="80" />
<el-table-column label="名称" prop="roleName" /> <el-table-column label="名称" prop="roleName" />
<el-table-column label="权限字符" prop="roleKey"/> <el-table-column label="权限字符" prop="roleKey" />
<el-table-column label="状态" align="center"> <el-table-column label="状态" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch> <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="150"/> <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
<el-table-column label="备注" align="center" prop="remark" width="150" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="200"> <el-table-column label="操作" align="center" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(scope.row)" v-if="scope.row.roleKey != 'admin'" v-hasPermi="['system:role:edit']">修改</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(scope.row)" v-if="scope.row.roleKey != 'admin'"
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(scope.row)" v-if="scope.row.roleKey != 'admin'" v-hasPermi="['system:role:remove']">删除</el-button> v-hasPermi="['system:role:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-circle-check" @click.stop="handleDataScope(scope.row)" v-if="scope.row.roleKey != 'admin'" v-hasPermi="['system:role:authorize']">数据权限</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(scope.row)" v-if="scope.row.roleKey != 'admin'"
v-hasPermi="['system:role:remove']">删除</el-button>
<el-button size="mini" type="text" icon="el-icon-circle-check" @click.stop="handleDataScope(scope.row)"
v-if="scope.row.roleKey != 'admin'" v-hasPermi="['system:role:authorize']">数据权限</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> --> <!-- <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
</el-col> </el-row>
<el-col :span="9">
<el-form :model="form" v-show="showRoleScope" label-width="80px" style="width:90%"> <el-dialog title="角色权限分配" :visible.sync="showRoleScope" width="600px">
<el-form :model="form" label-width="80px">
<el-form-item label="权限字符"> <el-form-item label="权限字符">
{{form.roleKey}} {{form.roleKey}}
</el-form-item> </el-form-item>
<el-form-item label="数据权限" style="max-height:350px;overflow:auto;"> <el-form-item label="数据权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox> <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox> <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍后" :props="defaultProps"></el-tree> <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly"
</el-form-item> empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
<el-form-item>
<el-button type="primary" @click="submitDataScope" v-hasPermi="['system:role:authorize']">保存</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer">
</el-col> <el-button type="primary" @click="submitDataScope" v-hasPermi="['system:role:authorize']">保存</el-button>
</el-row> </div>
</el-dialog>
<!-- 添加或修改角色配置对话框 --> <!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@ -119,7 +122,6 @@ import {
// treeselect as deptTreeselect, // treeselect as deptTreeselect,
// roleDeptTreeselect, // roleDeptTreeselect,
// } from "@/api/system/dept"; // } from "@/api/system/dept";
import { downloadFile } from "@/utils/zipdownload.js";
export default { export default {
name: "Role", name: "Role",
@ -420,7 +422,7 @@ export default {
roleId: row.roleId, roleId: row.roleId,
roleName: row.roleName, roleName: row.roleName,
roleKey: row.roleKey, roleKey: row.roleKey,
menuCheckStrictly: true menuCheckStrictly: true,
}; };
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -460,6 +462,7 @@ export default {
dataScope(this.form).then((response) => { dataScope(this.form).then((response) => {
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
this.getList(); this.getList();
this.showRoleScope = false;
this.handleDataScope({ roleId: this.form.roleId }); this.handleDataScope({ roleId: this.form.roleId });
}); });
} else { } else {

34
ZR.Vue/src/views/system/roleusers/index.vue
View File

@ -1,22 +1,27 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="24" style="display:flex;"> <el-row :gutter="20">
<el-col :span="4"> <el-col :span="4" :xs="24">
<el-table ref="roleTable" v-loading="loadingRole" highlight-current-row :data="dataRoleTable" border :height="tableHeight-135" @row-click="handleRoleTableSelection"> <el-table ref="roleTable" v-loading="loadingRole" highlight-current-row :data="dataRoleTable" border :height="tableHeight-135"
<el-table-column prop="roleName" label="角色名称" /> @row-click="handleRoleTableSelection">
<el-table-column prop="roleName" label="请选择角色名称" />
</el-table> </el-table>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20" :xs="24">
<el-form style="display:flex" :inline="true" @submit.native.prevent> <el-form :inline="true" @submit.native.prevent>
<el-form-item> <el-form-item>
<el-button type="primary" plain size="mini" icon="el-icon-plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户</el-button> <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="handleGetUserTable" v-hasPermi="['system:roleusers:add']">添加用户
<el-button type="danger" plain size="mini" icon="el-icon-circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:del']">批量取消授权</el-button> </el-button>
<el-button type="danger" plain size="mini" icon="el-icon-circle-close" @click="cancelAuthUserAll" v-hasPermi="['system:roleusers:del']">
批量取消授权</el-button>
</el-form-item> </el-form-item>
<el-form-item style="margin-left:auto"> <el-form-item style="margin-left:auto">
<el-input v-model="search" placeholder="请输入用户名称" clearable prefix-icon="el-icon-search" /> <el-input v-model="search" placeholder="请输入用户名称" clearable prefix-icon="el-icon-search" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table ref="roleUserTable" v-loading="loadingRoleUser" :data="dataRoleUserTable.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))" row-key="userId" stripe border :height="tableHeight-180"> <el-table ref="roleUserTable" v-loading="loadingRoleUser"
:data="dataRoleUserTable.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))" row-key="userId" stripe
border :height="tableHeight-180">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column prop="userId" align="center" label="用户Id" width="150" /> <el-table-column prop="userId" align="center" label="用户Id" width="150" />
<el-table-column prop="userName" align="center" label="用户账号" width="150" /> <el-table-column prop="userName" align="center" label="用户账号" width="150" />
@ -24,13 +29,15 @@
<el-table-column prop="email" align="center" label="邮箱" /> <el-table-column prop="email" align="center" label="邮箱" />
<el-table-column prop="status" align="center" label="账号状态" width="80"> <el-table-column prop="status" align="center" label="账号状态" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<i :style="scope.row.status === '0' ?'color:green':'color:red'" :class="scope.row.status === '0' ? 'el-icon-success ':'el-icon-error'" /> <i :style="scope.row.status === '0' ?'color:green':'color:red'"
:class="scope.row.status === '0' ? 'el-icon-success ':'el-icon-error'" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" :show-overflow-tooltip="true" align="center" label="备注" /> <el-table-column prop="remark" :show-overflow-tooltip="true" align="center" label="备注" />
<el-table-column align="center" label="操作"> <el-table-column align="center" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1" v-hasPermi="['system:roleusers:del']">取消授权</el-button> <el-button size="mini" type="text" icon="el-icon-circle-close" @click="handleCancelPerm(scope.row)" v-if="scope.row.userId != 1"
v-hasPermi="['system:roleusers:del']">取消授权</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -53,7 +60,8 @@
<el-table-column prop="nickName" align="center" label="用户昵称" width="150" /> <el-table-column prop="nickName" align="center" label="用户昵称" width="150" />
<el-table-column prop="status" align="center" label="用户状态"> <el-table-column prop="status" align="center" label="用户状态">
<template slot-scope="scope" label="操作"> <template slot-scope="scope" label="操作">
<i :style="scope.row.status === '0' ?'color:green':'color:red'" :class="scope.row.status === '0' ? 'el-icon-success ':'el-icon-error'" /> <i :style="scope.row.status === '0' ?'color:green':'color:red'"
:class="scope.row.status === '0' ? 'el-icon-success ':'el-icon-error'" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -128,7 +136,7 @@ export default {
this.delSelections.push(element.userId); this.delSelections.push(element.userId);
}); });
if (this.delSelections.length === 0) { if (this.delSelections.length === 0) {
console.log('未选中') console.log("未选中");
return; return;
} }
this.$confirm( this.$confirm(

4
ZR.Vue/src/views/system/user/index.vue
View File

@ -2,7 +2,7 @@
<div class="app-container"> <div class="app-container">
<el-row :gutter="20"> <el-row :gutter="20">
<!--部门数据--> <!--部门数据-->
<el-col :span="4" :xs="24"> <el-col :span="4">
<div class="head-container"> <div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
</div> </div>
@ -11,7 +11,7 @@
</div> </div>
</el-col> </el-col>
<!--用户数据--> <!--用户数据-->
<el-col :span="20" :xs="24"> <el-col :span="20">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="用户名称" prop="userName"> <el-form-item label="用户名称" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" /> <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />