Skip to content
GitLab
Commit a0a51905 authored by trumansdo's avatar trumansdo
Browse files

1. 确定通用管理页面组件完成，通用组件中无法通用部分：下拉选择器；改为自定义插槽中自行添加 

2. 更新element-ui版本 至2.13.0
3. 修复jwt 没有刷新过期时间。最终设置为10分钟过期时间窗口，以最后一次网络请求时间开始计算
parent 31fc8a95
Hide whitespace changes
Inline Side-by-side
ve-admin/admin-web/package.json
View file @ a0a51905
......@@ -50,7 +50,7 @@
"driver.js": "0.9.5",
"dropzone": "5.5.1",
"echarts": "4.2.1",
"element-ui": "2.7.0",
"element-ui": "2.13.0",
"file-saver": "2.0.1",
"fuse.js": "3.4.4",
"js-cookie": "2.2.0",
......
ve-admin/admin-web/src/api/dict.js 0 → 100644
View file @ a0a51905
/*
* @Author: 一日看尽长安花
* @since: 2019-09-04 20:55:14
* @LastEditTime : 2020-01-11 20:47:10
* @LastEditors : 一日看尽长安花
* @Description:
*/
import request from '@/utils/request';
export function getDictsByParent(params) {
return request({
url: '/core/dicts',
method: 'get',
params: params
});
}
ve-admin/admin-web/src/api/user.js
View file @ a0a51905
......@@ -38,9 +38,9 @@ export function users(params) {
});
}
export function usersMetedata() {
export function usersMetadata() {
return request({
url: '/users/metedata',
url: '/users/metadata',
method: 'get'
});
}
ve-admin/admin-web/src/components/TableViews/DataTable.vue
View file @ a0a51905
......@@ -23,7 +23,7 @@
<el-table-column :key="Math.random()" type="index"></el-table-column>
<el-table-column
v-for="(val, key) in metedata"
v-for="(val, key) in metadata"
:key="key"
:prop="val.type === 'dict' ? key + '.name' : key"
:label="val.name"
......@@ -76,7 +76,7 @@ export default {
components: { Pagination },
props: {
// 表格元数据
metedata: {
metadata: {
type: Object,
default() {
return {};
......@@ -92,6 +92,7 @@ export default {
};
}
},
// 搜索数据表格中数据的方法
searchMethod: {
type: Function,
default() {
......@@ -114,12 +115,17 @@ export default {
};
},
updated() {
console.log(this.metedata);
console.log('以下是元数据和结果数据');
console.log(this.metadata);
console.log(this.tabledata);
},
methods: {
searchTable() {
// 要用一个临时数据将当前页面的数据保存下来，不然 $emit 会将原数据修改
/*
要用一个临时数据将当前页面的数据保存下来。
不然 $emit 会将原数据修改，
会造成第二次搜索是基于第一次搜索的结果数据进行搜索的
*/
this.cloneTableData = !this.cloneTableData
? Object.assign({}, this.tabledata)
: this.cloneTableData;
......@@ -134,6 +140,7 @@ export default {
this.cloneTable = null;
},
handleEdit(index, row) {
/* index 行号；row 行数据 */
this.$emit('handle-edit', index, row);
},
handleDelete(index, row) {
......
ve-admin/admin-web/src/components/TableViews/EditDialog.vue
View file @ a0a51905
......@@ -7,7 +7,9 @@
-->
<template>
<div class="dialog-container">
<!-- 对话框 -->
<!--
对话框：通过$emit 继续提交open和close事件改变对话框的显示和隐藏
-->
<el-dialog
:title="dialogTitle"
:visible="dialogVisible"
......@@ -24,7 +26,7 @@
style="width: 400px; margin-left:50px;"
>
<el-form-item
v-for="(val, key) in metedata"
v-for="(val, key) in metadata"
:key="key"
:label="val.name"
:prop="key"
......@@ -45,17 +47,8 @@
:placeholder="val.name + '时间'"
>
</el-date-picker>
<el-select
v-else-if="judgeType(val.type, 'dict')"
:placeholder="val.name"
:clearable="true"
class="filter-item"
>
<el-option />
</el-select>
</el-form-item>
<!-- 给某些无法自动生成表单域的插槽，并将数据向插槽传递 -->
<!-- 用于面板中的自定义表单元素，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
<slot :dialog-data="dialogData" name="dialog-form-item"></slot>
</el-form>
<template v-slot:footer>
......@@ -81,7 +74,7 @@ import { equalsIgnoreCase } from '@/utils/str-util';
export default {
name: 'EditDialog',
props: {
metedata: {
metadata: {
type: Object,
default() {
return {};
......@@ -123,6 +116,8 @@ export default {
this.$refs['editForm'].validate(valid => {
if (valid) {
this.$emit('create-data', this.dialogData);
/* 将回调延迟到下次 DOM 更新循环之后执行。
而数据更新就代表dom更新，所以如果创建成功，数据就会更新 */
this.$nextTick(() => {
this.$emit('update:dialogVisible', false);
this.$notify({
......@@ -166,6 +161,7 @@ export default {
});
},
openDialog() {
/* 参照vue中 .sync 修饰符章节，方便的刷新父组件的dialogVisible值*/
this.$emit('update:dialogVisible', true);
},
closeDialog() {
......
ve-admin/admin-web/src/components/TableViews/SearchPane.vue
View file @ a0a51905
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 16:14:37
* @LastEditTime: 2019-12-17 14:41:14
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-01-09 23:16:28
* @LastEditors : 一日看尽长安花
* @Description:
-->
<template>
<div class="filter-container">
<!-- 取消表单的提交动作 -->
<el-form
ref="filterForm"
:size="size"
:model="filterData"
@submit.native.prevent
>
<!-- 循环元数据构建搜索面板：除了下拉框 -->
<div
v-for="(val, key) in metedata"
v-for="(val, key) in metadata"
:key="key"
class="filter-item-container"
>
......@@ -45,17 +47,9 @@
>
</el-date-picker>
</div>
<el-select
v-else-if="judgeType(val.type, 'dict')"
:placeholder="val.name"
:clearable="true"
class="filter-item"
>
<el-option />
</el-select>
</el-form-item>
</div>
<!-- 用于面板中的自定义表单，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
<slot name="filter-condition" :filter-data="filterData"> </slot>
<div class="filter-item-container">
<el-button
......@@ -81,6 +75,7 @@
>
添加
</el-button>
<!-- 用于面板中的自定义功能按钮，例如导入导出按钮等，并通过作用域插槽的方式将数据传递给自定义表单 -->
<slot name="operation-btn-group" :filter-data="filterData"> </slot>
</div>
</div>
......@@ -92,7 +87,7 @@ import { equalsIgnoreCase } from '@/utils/str-util';
export default {
name: 'SearchPane',
props: {
metedata: {
metadata: {
type: Object,
default() {
return {};
......@@ -129,16 +124,3 @@ export default {
}
};
</script>
<style>
.filter-container {
margin-top: 1rem;
}
.filter-item-container {
display: inline-block;
margin: 0.15em;
}
.filter-btn-group {
margin: 0.15em;
}
</style>
ve-admin/admin-web/src/components/TableViews/index.vue
View file @ a0a51905
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 15:43:18
* @LastEditTime: 2019-11-30 22:23:06
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-01-08 22:51:466
* @LastEditors : 一日看尽长安花安花
* @Description: 后台管理页面的自动生成，
* 主要暴露了分页方法、过滤表格（单纯前端过滤）、条件查询、增删改方法
* 主要暴露了分页方法、数据表格搜索方法、条件查询方法、增删改方法
* 以及 查询面板插槽，功能按钮组插槽，编辑对话框插槽
-->
<template>
<div>
<search-pane
:metedata="metedata"
:metadata="metadata"
@filter-search="filterSearch"
@handle-create="handleCreate"
>
......@@ -22,7 +23,7 @@
</search-pane>
<data-table
:loading="loading"
:metedata="metedata"
:metadata="metadata"
:tabledata="tabledata"
:search-method="searchMethod"
@update:tabledata="$emit('update:tabledata', $event)"
......@@ -31,7 +32,7 @@
@delete-data="$emit('delete-data')"
></data-table>
<edit-dialog
:metedata="metedata"
:metadata="metadata"
:dialog-visible.sync="dialogVisible"
:dialog-title="dialogTitle"
:operation-type="operationType"
......@@ -39,6 +40,8 @@
@create-data="$emit('create-data')"
@update-data="$emit('update-data')"
>
<!-- #dialog-form-item等价v-slot:dialog-form-item 语法
详情参照 解构插槽 Prop 章节 -->
<template #dialog-form-item="{dialogData:dialogData}">
<slot :dialog-data="dialogData" name="dialog-form-item"></slot>
</template>
......@@ -56,7 +59,7 @@ export default {
components: { SearchPane, DataTable, EditDialog },
props: {
// 表格元数据
metedata: {
metadata: {
type: Object,
default() {
return {};
......@@ -72,7 +75,6 @@ export default {
};
}
},
// 加载中的遮罩层
loading: {
type: Boolean,
......@@ -121,3 +123,21 @@ export default {
}
};
</script>
<style>
.filter-container {
margin-top: 1rem;
}
.filter-item-container {
display: inline-block;
margin: 0.15em;
}
.filter-item-container .el-cascader {
top: -4px;
}
.filter-btn-group {
margin: 0.15em;
}
</style>
ve-admin/admin-web/src/utils/request.js
View file @ a0a51905
......@@ -2,13 +2,13 @@
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-09 12:16:28
* @LastEditTime: 2019-10-27 23:12:07
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-01-11 23:24:40
* @LastEditors : 一日看尽长安花
*/
import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import { getToken } from '@/utils/auth';
import { getToken, setToken } from '@/utils/auth';
// create an axios instance
const service = axios.create({
......@@ -21,7 +21,6 @@ const service = axios.create({
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['Authorization'] see to MDN explain about "HTTP Authorization"
......@@ -49,9 +48,8 @@ service.interceptors.response.use(
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
(response, b, c, d) => {
const res = response.data;
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 200) {
Message({
......@@ -79,6 +77,8 @@ service.interceptors.response.use(
}
return Promise.reject(new Error(res.message || 'Error'));
} else {
const authorization = response.headers['authorization'];
setToken(authorization);
return res;
}
},
......
ve-admin/admin-web/src/views/users/index.vue
View file @ a0a51905
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 15:43:18
* @LastEditTime: 2019-12-17 20:56:50
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-01-11 21:15:32
* @LastEditors : 一日看尽长安花
* @Description:
-->
<template>
<div>
<table-views
:metedata="metedata"
:metadata="metadata"
:tabledata.sync="tabledata"
:loading="loading"
:search-method="searchMethod"
......@@ -18,19 +18,13 @@
@delete-data="deleteData"
@update-data="updateData"
>
<!-- fixed 待解决的问题：样式问题。猜测原因：应该是样式穿透问题，不能是scope -->
<!-- 往搜索栏中添加搜索条件 -->
<template #filter-condition="{filterData:filterData}">
<div class="filter-item-container">
<el-form-item>
<el-input
v-model="filterData['test']"
placeholder="test"
:clearable="true"
style="width: 200px;"
class="filter-item"
/>
</el-form-item>
<el-cascader
v-model="filterData['jobType']"
:props="jobTypeCascaderProps"
></el-cascader>
</div>
</template>
<!-- 往操作按钮组中添加自定义操作按钮 -->
......@@ -62,35 +56,58 @@
<script>
import TableViews from '@/components/TableViews';
import { users, usersMetedata } from '@/api/user';
import { users, usersMetadata } from '@/api/user';
import { getDictsByParent } from '@/api/dict';
export default {
name: 'CoreUsers',
name: 'CoreUsersView',
components: { TableViews },
props: {},
data() {
return {
// 整个页面的数据
metedata: {},
metadata: {},
tabledata: {
data: [],
total: 0
},
loading: true
loading: true,
jobTypeCascaderProps: {
checkStrictly: true,
lazy: true,
lazyLoad(node, resolve) {
const { root, data } = node;
const { id } = data || {};
let datas = [],
type;
if (root) {
type = 'job_type';
}
let reqParam = {
parentId: id,
type: type
};
getDictsByParent(reqParam).then(result => {
const { code, data } = { ...result };
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(data);
});
}
}
};
},
computed: {},
mounted() {
this.obtainMetedata();
this.obtainMetadata();
this.obtainData({ page: 1, limit: 10 });
},
methods: {
obtainMetedata() {
obtainMetadata() {
this.loading = true;
usersMetedata()
usersMetadata()
.then(result => {
const { code, data } = { ...result };
this.metedata = Object.assign({}, data);
this.metadata = Object.assign({}, data);
})
.catch(err => {})
.finally(() => {
......
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