Commit 29ef2d76 authored by trumansdo's avatar trumansdo
Browse files

用户管理功能,待完成最后一个操作角色功能

parent 4614a9a3
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 16:14:37
* @LastEditTime: 2020-03-09 14:28:00
* @LastEditTime: 2020-03-31 16:31:49
* @LastEditors: 一日看尽长安花
* @Description:
-->
......@@ -53,11 +53,11 @@
</div>
<!-- 用于面板中的自定义表单,例如级联选择器,并通过作用域插槽的方式将数据传递给自定义表单 -->
<slot name="filter-condition" :filter-data="filterData"> </slot>
<div class="filter-item-container">
<div class="sp-search-btn-container">
<el-button
ref="searchButton"
:size="size"
class="filter-item"
class="sp-search-btn-item"
type="primary"
icon="el-icon-search"
@click="filterSearch"
......
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 15:43:18
* @LastEditTime: 2020-03-15 16:36:57
* @LastEditTime: 2020-03-31 16:55:00
* @LastEditors: 一日看尽长安花
* @Description: 后台管理页面的自动生成,
* 主要暴露了分页方法、数据表格搜索方法、条件查询方法、增删改方法
......@@ -136,7 +136,7 @@ export default {
.filter-item-container {
display: inline-block;
margin: 0.15em;
margin-left: 0.5em;
}
.filter-item-container .el-cascader {
......@@ -146,4 +146,11 @@ export default {
.filter-btn-group {
margin: 0.15em;
}
/* 搜索按钮的div容器 */
.sp-search-btn-container {
margin-top: -1em;
}
.sp-search-btn-container .sp-search-btn-item {
margin-left: 100em;
}
</style>
<!--
* @Author: 一日看尽长安花
* @since: 2019-09-09 12:16:28
* @LastEditTime: 2019-09-09 12:16:28
* @LastEditTime: 2020-04-02 14:30:00
* @LastEditors: 一日看尽长安花
* @Description:
* @Description: 这个分页是直接从组件复制的,为了保证以后修改逻辑不影响其它的页面使用公共的分页。
-->
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
ref="paginationGP"
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
......@@ -28,8 +29,8 @@ export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
type: Number,
default: 0
},
page: {
type: Number,
......@@ -37,12 +38,12 @@ export default {
},
limit: {
type: Number,
default: 20
default: 10
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50];
return [10, 20, 30, 50, 100];
}
},
layout: {
......@@ -63,7 +64,7 @@ export default {
}
},
computed: {
currentPagge: {
currentPage: {
get() {
return this.page;
},
......
/*
* @Author: 一日看尽长安花
* @since: 2019-09-15 15:22:58
* @LastEditTime: 2019-10-29 22:25:59
* @LastEditTime: 2020-03-29 16:00:28
* @LastEditors: 一日看尽长安花
* @Description:
*/
......@@ -38,6 +38,13 @@ const coreRouter = [
component: () => import('@/views/users/index'),
meta: {}
},
{
path: '/admin/user/:id/role',
name: 'ManagerUserRole',
hidden: true,
component: () => import('@/views/users/roles'),
meta: {}
},
{
path: '/admin/org/index.do',
name: '组织机构管理',
......
......@@ -2,7 +2,7 @@
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-09 12:16:28
* @LastEditTime: 2020-03-22 15:18:48
* @LastEditTime: 2020-03-27 20:23:38
* @LastEditors: 一日看尽长安花
*/
import axios from 'axios';
......@@ -111,10 +111,12 @@ service.interceptors.response.use(
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
(response, b, c, d) => {
const res = response.data;
response => {
let res = response.data;
/** 有可能返回的是文件流 */
const custom_code = res.code || 200;
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 200) {
if (custom_code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
......@@ -144,6 +146,9 @@ service.interceptors.response.use(
/** 每次请求成功都要将授权码存放在cookie中,只要五分钟无动作登录授权便失效 */
const authorization = response.headers['authorization'];
setToken(authorization);
if (Object.prototype.toString.call(response.data) === '[object Blob]') {
res = response;
}
return res;
}
},
......
<!--
* @Author: 一日看尽长安花
* @since: 2020-04-05 13:21:44
* @LastEditTime: 2020-04-06 11:52:20
* @LastEditors: 一日看尽长安花
* @Description:
-->
<template>
<div class="sp-edit-dialog">
<el-dialog
:fullscreen="true"
:center="true"
:destroy-on-close="false"
:show-close="false"
:title="title"
:visible="visible"
:close-on-click-modal="false"
@open="openDialog"
@close="closeDialog"
>
<div class="dialog-container">
<el-form
ref="editFormGP"
:model="dialogData"
label-position="right"
label-width="10vw"
class="sp-form"
>
<el-form-item label="用户名">
<el-input v-model="model"></el-input>
</el-form-item>
<el-form-item label="用户账号">
<el-input v-model="model"></el-input>
</el-form-item>
<el-form-item label="选择部门">
<el-cascader
:options=""
v-model=""
@change="">
</el-cascader>
</el-form-item>
<el-form-item label="选择角色">
<el-cascader
:options=""
v-model=""
@change="">
</el-cascader>
</el-form-item>
</el-form>
</div>
<template v-slot:footer>
<div class="sp-dialog-footer">
<el-button @click="closeDialog">
取消
</el-button>
<el-button type="primary" @click="createUserRole">
确定
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'AddUserRole',
props: {
title: {
type: String,
default: '添加角色'
}
},
data() {
return {
visible: false,
dialogData: {}
};
},
methods: {
openDialog() {
this.visible = true;
},
closeDialog() {
this.visible = false;
},
createUserRole() {}
}
};
</script>
<style scoped></style>
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 15:43:18
* @LastEditTime: 2020-03-23 14:27:26
* @LastEditTime: 2020-04-03 20:52:21
* @LastEditors: 一日看尽长安花
* @Description:
-->
......@@ -57,14 +57,25 @@
</template>
<!-- 往操作按钮组中添加自定义操作按钮 -->
<template #operation-btn-group>
<el-button
class="filter-item"
style="margin-left: 10px;"
type="primary"
size="mini"
icon="el-icon-edit"
@click="editUserRoles"
>
操作角色
</el-button>
<el-button
class="filter-item"
style="margin-left: 10px;"
type="primary"
icon="el-icon-edit"
size="mini"
@click="exportUserExcel"
>
测试
导出Excel
</el-button>
</template>
<!-- 编辑弹窗的插槽 -->
......@@ -139,8 +150,10 @@ import {
usersMetadata,
saveUserData,
updateUserData,
deleteUserData
deleteUserData,
exportExcelUserData
} from '@/api/user';
import { download } from '@/api/file';
import { immaditeLoadDicts } from '@/api/dict';
import { immaditeLoadOrgs } from '@/api/org';
import { layzyLoadDictTree, handleCascaderValue } from '@/services/dict';
......@@ -348,6 +361,8 @@ export default {
return dialogData;
},
deleteData(index, row) {
/**todo 补上对话框 */
const Vue = this;
deleteUserData({ ids: [row.id] })
.then(result => {
/** 刷新数据表格数据,懒得重新写个方法挂载在组件上了 */
......@@ -385,6 +400,31 @@ export default {
this.$children[0].$refs.detailPageGP.$props.dialogData.attachment_id =
response.data;
}
},
exportUserExcel() {
let queryParams = this.$lodash.mapValues(
this.$children[0].$refs.searchPaneGP.$data.filterData
);
queryParams = handleCascaderValue(queryParams, 'orgId', ['org_id']);
queryParams = handleCascaderValue(queryParams, 'jobType', [
'job_type0',
'job_type1'
]);
queryParams = handleCascaderValue(queryParams, 'state', ['state']);
/**
* 导出Excel文件的两步:
* 1、通过查询条件由后台生成Excel临时文件,返回临时文件path
* 2、通过path去下载该文件
*/
exportExcelUserData(queryParams).then(res => {
const { code, data, message } = { ...res };
console.log(`...download path is ${data}`);
download({ path: data });
});
},
editUserRoles() {
const _router = this.$router;
_router.push({ name: 'ManagerUserRole', params: { id: 1 } });
}
}
};
......
<!--
* @Author: 一日看尽长安花
* @since: 2020-03-29 16:00:50
* @LastEditTime: 2020-04-05 18:17:17
* @LastEditors: 一日看尽长安花
* @Description:
-->
<template>
<div class="sp-root-container">
<el-form
ref="searchForm"
size="mini"
:model="searchData"
:inline="true"
label-width="auto"
>
<el-row :gutter="10">
<el-col :span="5">
<el-form-item label="角色">
<el-cascader
v-model="searchData['roleId']"
:props="roleIdCascaderProps"
:options="roleIdCascaderProps.options"
:show-all-levels="false"
clearable
placeholder="角色"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="部门">
<el-cascader
v-model="searchData['orgId']"
:props="orgIdCascaderProps"
:options="orgIdCascaderProps.options"
:show-all-levels="false"
clearable
placeholder="部门"
></el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" type="flex" justify="end">
<el-col :span="2">
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
@click="filterSearch"
>
搜索
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="sp-btn-group">
<el-button type="primary" icon="edit" @click="showDialog">增加</el-button>
<el-button type="primary" icon="delete" @click="deleteUserRole">
删除
</el-button>
</div>
<el-table
ref="dataTable"
v-loading.lock="loading"
:data="tableData"
style="width: 100%"
>
<el-table-column :key="Math.random()" type="selection" width="55">
</el-table-column>
<el-table-column :key="Math.random()" type="index"></el-table-column>
<el-table-column
key="orgName"
header-align="center"
align="center"
prop="orgName"
label="机构名称"
>
</el-table-column>
<el-table-column
key="roleName"
header-align="center"
align="center"
prop="roleName"
label="角色名称"
>
</el-table-column>
</el-table>
<pagination
v-show="tableData.total > 0"
:total="tableData.total"
:page.sync="queryParams.page"
:limit.sync="queryParams.limit"
@pagination="pagination"
/>
<add-user-role ref="editDialog" :title="dialogTitle"> </add-user-role>
</div>
</template>
<script>
import Pagination from '@/components/Pagination';
import { immaditeLoadRoles } from '@/api/role';
import { immaditeLoadOrgs } from '@/api/org';
import { getUserRoles } from '@/api/user';
import AddUserRole from './add-user-role';
export default {
name: 'ManagerUserRole',
components: { Pagination, AddUserRole },
data() {
return {
id: this.$route.params.id,
searchData: {},
tableData: [],
loading: false,
roleIdCascaderProps: {
checkStrictly: true,
options: []
},
orgIdCascaderProps: {
checkStrictly: true,
options: []
},
queryParams: {
page: 1,
limit: 10
},
dialogTitle: ''
};
},
mounted() {
immaditeLoadRoles().then(result => {
const { code, data } = { ...result };
this.roleIdCascaderProps.options = data;
});
immaditeLoadOrgs({
parentId: 0
}).then(result => {
const { code, data } = { ...result };
this.orgIdCascaderProps.options = data;
});
getUserRoles({
userId: this.id,
roleId: undefined,
orgId: undefined
}).then(result => {
const { code, data } = { ...result };
this.tableData = data;
});
},
methods: {
filterSearch() {},
pagination(pageParams) {},
showDialog() {
this.$refs.editDialog.openDialog();
},
deleteUserRole() {
const _table = this.$refs.dataTable;
const isSelection = _table.selection.length > 0 ? true : false;
if (!isSelection) {
this.$message({
type: 'warning',
message: '请选择数据'
});
return;
}
const _selList = _table.selection;
const ids = _selList.map(item => item.id);
debugger;
}
}
};
</script>
<style scoped>
.sp-root-container {
margin-top: 0.5em;
margin-left: 0.5em;
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment