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

ve-admin/admin-web/src/components/GeneralPage/SearchPane.vue

 <!--
  * @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"

ve-admin/admin-web/src/components/GeneralPage/index.vue

 <!--
  * @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>

ve-admin/admin-web/src/components/Pagination/index.vue

 <!--
  * @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;
       },

ve-admin/admin-web/src/router/maps/core.js

 /*
  * @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: '组织机构管理',

ve-admin/admin-web/src/utils/request.js

@@ -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;
     }
   },

ve-admin/admin-web/src/views/users/add-user-role.vue

+<!--
+ * @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>

ve-admin/admin-web/src/views/users/index.vue

 <!--
  * @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 } });
     }
   }
 };

ve-admin/admin-web/src/views/users/roles.vue

+<!--
+ * @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>