zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sakuya 2021-05-14 00:09:21 +08:00
parent 9c02d5e36d
commit 530dbea2bd
12 changed files with 406 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/json/user.json → public/json/login.json
View File

5
public/json/post.json Normal file
View File

@ -0,0 +1,5 @@
{
"code": 200,
"data": null,
"message": "用户名已存在"
}

56
public/json/role.json Normal file
View File

@ -0,0 +1,56 @@
{
"code": 200,
"count": 2,
"data": [
{
"id": "1",
"label": "超级管理员",
"alias": "SA"
},
{
"id": "2",
"label": "管理员",
"alias": "admin",
"children": [
{
"id": "21",
"label": "系统管理员",
"alias": "SystemAdmin"
},
{
"id": "22",
"label": "业务管理员",
"alias": "BusinessAdmin"
},
{
"id": "23",
"label": "数据管理员",
"alias": "DataAdmin"
}
]
},
{
"id": "3",
"label": "操作员",
"alias": "OperatorManager",
"children": [
{
"id": "31",
"label": "公告维护员",
"alias": "BulletinManager"
},
{
"id": "32",
"label": "审核员",
"alias": "Auditor"
},
{
"id": "33",
"label": "复审员",
"alias": "Reviewer"
}
]
}
],
"message": ""
}

25
public/json/user_list.json Normal file
View File

@ -0,0 +1,25 @@
{
"code": 200,
"count": 2,
"data": [
{
"id": "100",
"userName": "81883387",
"mail": "81883387@qq.com",
"name": "sakuya",
"group": ["1"],
"groupName": ["超级管理员"],
"date": "2021-10-10 12:00:00"
},
{
"id": "101",
"userName": "luhkpev",
"mail": "k.luhkpev@zdgtfd.ma",
"name": "John Martinez",
"group": ["22", "23"],
"groupName": ["业务管理员", "数据管理员"],
"date": "2021-02-21 14:21:48"
}
],
"message": ""
}

41
src/api/index.js
View File

@ -11,12 +11,49 @@ import http from "@/utils/request";
const api = {
user: {
info: {
url: `${config.API_URL}/json/user.json`,
login: {
url: `${config.API_URL}/json/login.json`,
name: "登录获取用户菜单和权限",
get: async function(){
return await http.get(this.url);
}
},
list: {
url: `${config.API_URL}/json/user_list.json`,
name: "获取用户列表",
get: async function(params={}){
return await http.get(this.url, params);
}
},
save: {
url: `${config.API_URL}/json/post.json`,
name: "新增编辑用户",
post: async function(params={}){
return await http.get(this.url, params);
}
},
del: {
url: `${config.API_URL}/json/post.json`,
name: "删除用户",
post: async function(params={}){
return await http.get(this.url, params);
}
}
},
role: {
select: {
url: `${config.API_URL}/json/role.json`,
name: "角色选择列表",
get: async function(){
return await http.get(this.url);
}
},
list: {
url: `${config.API_URL}/json/role.json`,
name: "角色列表",
get: async function(){
return await http.get(this.url);
}
}
},
demo: {

12
src/components/scTable/index.vue
View File

@ -14,7 +14,7 @@
</el-table-column>
<el-table-column min-width="1"></el-table-column>
<template #empty>
<el-empty description="暂无数据" :image-size="100"></el-empty>
<el-empty :description="emptyText" :image-size="100"></el-empty>
</template>
</el-table>
</div>
@ -56,6 +56,7 @@
},
data() {
return {
emptyText: "暂无数据",
toggleIndex: 0,
tableData: [],
pageSize: 20,
@ -95,7 +96,14 @@
page: this.currentPage
}
Object.assign(reqData, this.tableParams)
var res = await this.apiObj.get(reqData);
try {
var res = await this.apiObj.get(reqData);
}catch(error){
this.loading = false;
this.emptyText = error.statusText;
return false;
}
this.emptyText = "暂无数据";
this.tableData = res.data;
this.total = res.count;
this.loading = false;

3
src/style/fix.less
View File

@ -4,7 +4,7 @@
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
.el-form-item-msg {font-size: 12px;color: #999;}
.el-container {height: 100%;}
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;}
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;}
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
.el-header .left-panel {display: flex;align-items: center;}
.el-header .right-panel {display: flex;align-items: center;}
@ -15,3 +15,4 @@
.el-drawer__body {overflow: auto;}
.el-popconfirm__main {margin: 14px 0;}
.el-card__header {border-bottom: 0}
.el-tree-node__content {height:36px;}

2
src/views/login.vue
View File

@ -103,7 +103,7 @@
})
},
login: async function() {
var userInfo = await this.$API.user.info.get();
var userInfo = await this.$API.user.login.get();
this.$TOOL.data.set("user", userInfo.data);
this.$router.replace({
path: '/'

16
src/views/setting/role/index.vue
View File

@ -14,15 +14,15 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="角色名称" prop="yx" width="250"></el-table-column>
<el-table-column label="角色名称" prop="label" width="250"></el-table-column>
<el-table-column label="别名" prop="name" width="150"></el-table-column>
<el-table-column label="别名" prop="alias" width="150"></el-table-column>
<el-table-column label="排序" prop="progress" width="150"></el-table-column>
@ -41,13 +41,15 @@
<script>
export default {
name: 'user',
name: 'role',
data() {
return {
apiObj: this.$API.role.list,
selection: [],
search: {
keyword: null
}
},
}
},
methods: {
@ -55,6 +57,10 @@
selectionChange(selection){
this.selection = selection;
},
//搜索
upsearch(){
}
}
}
</script>

158
src/views/setting/user/index.vue
View File

@ -1,12 +1,19 @@
<template>
<el-container>
<el-aside width="200px">
<el-tree node-key="id" :data="group" :default-expanded-keys="[2]" :current-node-key="[1]" :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
<el-aside width="200px" v-loading="showGrouploading">
<el-container>
<el-header>
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
</el-header>
<el-main class="nopadding">
<el-tree ref="group" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
</el-main>
</el-container>
</el-aside>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus"></el-button>
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
<el-button type="primary" plain :disabled="selection.length==0">分配角色</el-button>
<el-button type="primary" plain :disabled="selection.length==0">密码重置</el-button>
@ -20,22 +27,21 @@
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="登录账号" prop="yx" width="150"></el-table-column>
<el-table-column label="ID" prop="id" width="50"></el-table-column>
<el-table-column label="登录账号" prop="userName" width="150"></el-table-column>
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
<el-table-column label="所属角色" prop="progress" width="150"></el-table-column>
<el-table-column label="所属角色" prop="groupName" width="200"></el-table-column>
<el-table-column label="加入时间" prop="date" width="150"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="140">
<template #default="scope">
<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
<template #reference>
<el-button type="text" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
@ -43,39 +49,133 @@
</el-main>
</el-container>
</el-container>
<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="600" destroy-on-close>
<save-dialog ref="saveDialog" :mode="saveMode"></save-dialog>
<template #footer>
<el-button @click="saveDialogVisible=false" >取 消</el-button>
<el-button v-if="saveMode!='show'" type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
</template>
</el-dialog>
</template>
<script>
import saveDialog from './save'
export default {
name: 'user',
components: {
saveDialog
},
data() {
return {
group: [
{id: 0, label: '所有'},
{id: 1, label: '超级管理员'},
{id: 2, label: '管理员', children:[
{id: 21, label: '系统管理员'},
{id: 22, label: '业务管理员'},
{id: 24, label: '数据管理员'}
]},
{id: 3, label: '操作员', children:[
{id: 31, label: '公告维护员'},
{id: 32, label: '审核员'},
{id: 33, label: '复审员'}
]}
],
apiObj: this.$API.demo.demolist.list,
saveDialogVisible: false,
saveMode: 'add',
titleMap: {
add: "新增",
edit: "编辑",
show: "查看"
},
isSaveing: false,
showGrouploading: false,
groupFilterText: '',
group: [],
apiObj: this.$API.user.list,
selection: [],
search: {
name: null
}
}
},
watch: {
groupFilterText(val) {
this.$refs.group.filter(val);
}
},
mounted() {
this.getGroup()
},
methods: {
//添加
add(){
this.saveMode = 'add';
this.saveDialogVisible = true;
},
//编辑
table_edit(row){
this.saveMode = 'edit';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
},
//查看
table_show(row){
this.saveMode = 'show';
this.saveDialogVisible = true;
this.$nextTick(() => {
//这里应该再次根据ID查询详情接口
this.$refs.saveDialog.setData(row)
})
},
//删除
async table_del(row, index){
var reqData = {id: row.id}
var res = await this.$API.user.del.post(reqData);
if(res.code == 200){
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
this.$refs.table.tableData.splice(index, 1);
this.$message.success("删除成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
},
//提交
saveForm(){
this.$refs.saveDialog.submit(async (formData) => {
this.isSaveing = true;
var res = await this.$API.user.save.post(formData);
this.isSaveing = false;
if(res.code == 200){
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
this.saveDialogVisible = false;
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
})
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//加载树数据
async getGroup(){
var res = await this.$API.role.select.get();
this.showGrouploading = false;
var allNode ={id: '', label: '所有'}
res.data.unshift(allNode);
this.group = res.data;
},
//树过滤
groupFilterNode(value, data){
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//树点击事件
groupClick(data){
var params = {
groupId: data.id
}
this.$refs.table.upData(params)
},
//搜索
upsearch(){
}
}
}
</script>

127
src/views/setting/user/save.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" clearable></el-input>
<div v-if="mode=='edit'" class="el-form-item-msg">如不修改密码，可为空</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认密码" prop="password2">
<el-input v-model="form.password2" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="所属角色" prop="group">
<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable></el-cascader>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
props: {
mode: { type: String, default: "add" }
},
data() {
return {
//表单数据
form: {
id:"",
userName: "",
name: "",
group: ""
},
//验证规则
rules: {
userName: [
{required: true, message: '请输入登录账号'}
],
name: [
{required: true, message: '请输入真实姓名'}
],
password: [
{required: true, message: '请输入登录密码'},
{validator: () => {
if (this.form.password2 !== '') {
this.$refs.dialogForm.validateField('password2');
}
}}
],
password2: [
{required: true, message: '请再次输入密码'},
{validator: (value, callback) => {
if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
}
}}
],
group: [
{required: true, message: '请选择所属角色'}
]
},
//所需数据选项
groups: [],
groupsProps: {
value: "id",
multiple: true,
checkStrictly: true
}
}
},
mounted() {
if(this.mode != 'add'){
this.rules.password = []
this.rules.password2 = []
}
this.getGroup()
},
methods: {
//加载树数据
async getGroup(){
var res = await this.$API.role.select.get();
this.groups = res.data;
},
//表单提交方法
submit(callback){
this.$refs.dialogForm.validate((valid) => {
if (valid) {
callback(this.form)
}else{
return false;
}
})
},
//表单注入数据
setData(data){
this.form.id = data.id
this.form.userName = data.userName
this.form.name = data.name
this.form.group = data.group
//可以和上面一样单个注入，也可以像下面一样直接合并进去
//Object.assign(this.form, data)
}
}
}
</script>
<style>
</style>

2
src/views/template/sideList.vue
View File

@ -99,7 +99,7 @@
}
},
async created() {
var userInfo = await this.$API.user.info.get();
var userInfo = await this.$API.user.login.get();
this.tableData = userInfo.data.menuList;
},
mounted(){