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

暂存，重新处理结果集映射

parent 404d2016
Hide whitespace changes
Inline Side-by-side
ve-admin/admin-web/src/api/dict.js
View file @ 34c9ce81
/*
* @Author: 一日看尽长安花
* @since: 2019-09-04 20:55:14
* @LastEditTime : 2020-01-11 20:47:10
* @LastEditTime : 2020-02-04 14:50:26
* @LastEditors : 一日看尽长安花
* @Description:
*/
......@@ -9,7 +9,7 @@ import request from '@/utils/request';
export function getDictsByParent(params) {
return request({
url: '/core/dicts',
url: '/core/dicts/tree',
method: 'get',
params: params
});
......
ve-admin/admin-web/src/api/org.js 0 → 100644
View file @ 34c9ce81
/*
* @Author: 一日看尽长安花
* @since: 2019-09-04 20:55:14
* @LastEditTime : 2020-01-11 20:47:10
* @LastEditors : 一日看尽长安花
* @Description:
*/
import request from '@/utils/request';
export function getOrgsByParent(params) {
return request({
url: '/core/orgs/tree',
method: 'get',
params: params
});
}
ve-admin/admin-web/src/api/user.js
View file @ 34c9ce81
/*
* @Author: 一日看尽长安花
* @since: 2019-09-04 20:55:14
* @LastEditTime: 2019-10-27 23:13:10
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-02-04 13:20:29
* @LastEditors : 一日看尽长安花
* @Description:
*/
import request from '@/utils/request';
......@@ -34,7 +34,7 @@ export function users(params) {
return request({
url: '/users',
method: 'get',
params: params
params
});
}
......
ve-admin/admin-web/src/components/TableViews/DataTable.vue → ve-admin/admin-web/src/components/GeneralPage/DataTable.vue
View file @ 34c9ce81
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 16:14:37
* @LastEditTime: 2019-12-17 14:07:33
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-02-06 11:32:07
* @LastEditors : 一日看尽长安花
* @Description:
-->
<template>
......@@ -23,13 +23,16 @@
<el-table-column :key="Math.random()" type="index"></el-table-column>
<el-table-column
v-for="(val, key) in metadata"
v-for="(val, key) in visibleMetadata"
:key="key"
:prop="val.type === 'dict' ? key + '.name' : key"
:prop="val.json_path"
:label="val.name"
:sortable="val.sortable"
:show-overflow-tooltip="true"
>
<template v-slot="scope">
{{ handleTableSlot(scope) }}
</template>
</el-table-column>
<el-table-column :key="Math.random()" width="170" align="right">
......@@ -70,6 +73,7 @@
<script>
import Pagination from './Pagination';
import { parseTime, formatTime } from '@/utils';
export default {
name: 'DataTable',
......@@ -114,12 +118,35 @@ export default {
cloneTableData: null
};
},
computed: {
// 计算属性的 getter
visibleMetadata: function() {
// `this` 指向 vm 实例
let _metadata = {};
for (let dict in this.metadata) {
const t = this.metadata[dict];
if (t.is_show_table_panel) {
_metadata[dict] = t;
}
}
return _metadata;
}
},
updated() {
console.log('以下是元数据和结果数据');
console.log(this.metadata);
console.log(this.tabledata);
// console.log('以下是元数据和结果数据');
// console.log(this.metadata);
// console.log(this.tabledata);
},
methods: {
handleTableSlot(scope) {
let val = this.$lodash.get(scope.row, scope.column.property);
const isTimestamp =
scope.column.property.endsWith('_time') && typeof val === 'number';
if (isTimestamp) {
val = parseTime(val / 1000, '{y}-{m}-{d} {h}:{i}:{s}');
}
return val;
},
searchTable() {
/*
要用一个临时数据将当前页面的数据保存下来。
......
ve-admin/admin-web/src/components/TableViews/SearchPane.vue → ve-admin/admin-web/src/components/GeneralPage/SearchPane.vue
View file @ 34c9ce81
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 16:14:37
* @LastEditTime : 2020-01-09 23:16:28
* @LastEditTime : 2020-02-03 16:21:23
* @LastEditors : 一日看尽长安花
* @Description:
-->
......@@ -16,7 +16,7 @@
>
<!-- 循环元数据构建搜索面板：除了下拉框 -->
<div
v-for="(val, key) in metadata"
v-for="(val, key) in visibleMetadata"
:key="key"
class="filter-item-container"
>
......@@ -34,15 +34,17 @@
style="display: inline-block;position: relative;top: -0.3rem;"
>
<el-date-picker
v-model="filterData[key + 'Start']"
v-model="filterData[key + '_start']"
type="datetime"
value-format="timestamp"
:placeholder="val.name + '开始时间'"
>
</el-date-picker>
<el-date-picker
v-model="filterData[key + 'End']"
v-model="filterData[key + '_end']"
type="datetime"
value-format="timestamp"
:placeholder="val.name + '结束时间'"
>
</el-date-picker>
......@@ -100,6 +102,21 @@ export default {
filterData: {}
};
},
computed: {
// 计算属性的 getter
visibleMetadata: function() {
// `this` 指向 vm 实例
let _metadata = {};
let allowTypes = ['string', 'date'];
for (let dict in this.metadata) {
const t = this.metadata[dict];
if (t.is_show_search_panel && allowTypes.includes(t.type)) {
_metadata[dict] = t;
}
}
return _metadata;
}
},
methods: {
judgeType(str1, type) {
return equalsIgnoreCase(str1, type);
......
ve-admin/admin-web/src/components/TableViews/EditDialog.vue → ve-admin/admin-web/src/components/GeneralPage/components/DetailPage.vue
View file @ 34c9ce81
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 16:14:37
* @LastEditTime: 2019-12-17 14:41:21
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-02-05 17:00:21
* @LastEditors : 一日看尽长安花
* @Description:
-->
<template>
<div class="dialog-container">
<!--
<!--
对话框：通过$emit 继续提交open和close事件改变对话框的显示和隐藏
-->
<el-dialog
:title="dialogTitle"
:visible="dialogVisible"
:close-on-click-modal="false"
@open="openDialog"
@close="closeDialog"
>
<el-dialog
:fullscreen="true"
:center="true"
:destroy-on-close="true"
:title="dialogTitle"
:visible="dialogVisible"
:close-on-click-modal="false"
@open="openDialog"
@close="closeDialog"
>
<div class="dialog-container">
<el-form
ref="editForm"
:rules="rules"
:model="dialogData"
label-position="left"
label-width="70px"
style="width: 400px; margin-left:50px;"
label-position="right"
label-width="10vw"
class="sp-form"
>
<el-form-item
v-for="(val, key) in metadata"
v-for="(val, key) in visibleMetadata"
:key="key"
:label="val.name"
:prop="key"
......@@ -36,36 +39,37 @@
v-model="dialogData[key]"
:placeholder="val.name"
:clearable="true"
style="width: 200px;"
class="filter-item"
class="sp-form-item"
/>
<el-date-picker
v-else-if="judgeType(val.type, 'date')"
v-model="dialogData[key]"
type="datetime"
value-format="timestamp"
:placeholder="val.name + '时间'"
class="sp-form-item"
>
</el-date-picker>
</el-form-item>
<!-- 用于面板中的自定义表单元素，例如级联选择器，并通过作用域插槽的方式将数据传递给自定义表单 -->
<slot :dialog-data="dialogData" name="dialog-form-item"></slot>
</el-form>
<template v-slot:footer>
<div class="dialog-footer">
<el-button @click="closeDialog">
取消
</el-button>
<el-button
type="primary"
@click="operationType === 'create' ? createData() : updateData()"
>
确定
</el-button>
</div>
</template>
</el-dialog>
</div>
</div>
<template v-slot:footer>
<div class="dialog-footer">
<el-button @click="closeDialog">
取消
</el-button>
<el-button
type="primary"
@click="operationType === 'create' ? createData() : updateData()"
>
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script>
......@@ -108,6 +112,20 @@ export default {
data() {
return {};
},
computed: {
// 计算属性的 getter
visibleMetadata: function() {
// `this` 指向 vm 实例
let _metadata = {};
for (let dict in this.metadata) {
const t = this.metadata[dict];
if (t.is_show_editor_panel) {
_metadata[dict] = t;
}
}
return _metadata;
}
},
methods: {
judgeType(str1, type) {
return equalsIgnoreCase(str1, type);
......@@ -170,4 +188,15 @@ export default {
}
};
</script>
<style></style>
<style scope>
.sp-form {
width: 50vw;
margin: 0 auto;
}
.sp-form-item {
width: 100%;
}
.el-date-editor.sp-form-item {
width: 100%;
}
</style>
ve-admin/admin-web/src/components/TableViews/index.vue → ve-admin/admin-web/src/components/GeneralPage/index.vue
View file @ 34c9ce81
......@@ -31,7 +31,7 @@
@handle-edit="handleEdit"
@delete-data="$emit('delete-data')"
></data-table>
<edit-dialog
<detail-page
:metadata="metadata"
:dialog-visible.sync="dialogVisible"
:dialog-title="dialogTitle"
......@@ -45,18 +45,18 @@
<template #dialog-form-item="{dialogData:dialogData}">
<slot :dialog-data="dialogData" name="dialog-form-item"></slot>
</template>
</edit-dialog>
</detail-page>
</div>
</template>
<script>
import SearchPane from './SearchPane';
import DataTable from './DataTable';
import EditDialog from './EditDialog';
import DetailPage from './components/DetailPage';
export default {
name: 'TableViews',
components: { SearchPane, DataTable, EditDialog },
name: 'GeneralPage',
components: { SearchPane, DataTable, DetailPage },
props: {
// 表格元数据
metadata: {
......
ve-admin/admin-web/src/filters/index.js
View file @ 34c9ce81
/*
* @Author: 一日看尽长安花
* @since: 2019-12-01 11:03:53
* @LastEditTime : 2020-01-28 14:20:30
* @LastEditors : 一日看尽长安花
* @Description:
*/
// import parseTime, formatTime and set to filter
export { parseTime, formatTime } from '@/utils'
export { parseTime, formatTime } from '@/utils';
import { parseTime, formatTime } from '@/utils';
/**
* Show plural label if time is plural number
* @param {number} timestamp 时间戳
* @return {string}
*/
export function symbolFormat(timestamp) {
timestamp = Number(timestamp);
return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}:{s}');
}
/**
* Show plural label if time is plural number
......@@ -7,24 +25,24 @@ export { parseTime, formatTime } from '@/utils'
* @param {string} label
* @return {string}
*/
function pluralize(time, label) {
export function pluralize(time, label) {
if (time === 1) {
return time + label
return time + label;
}
return time + label + 's'
return time + label + 's';
}
/**
* @param {number} time
*/
export function timeAgo(time) {
const between = Date.now() / 1000 - Number(time)
const between = Date.now() / 1000 - Number(time);
if (between < 3600) {
return pluralize(~~(between / 60), ' minute')
return pluralize(~~(between / 60), ' minute');
} else if (between < 86400) {
return pluralize(~~(between / 3600), ' hour')
return pluralize(~~(between / 3600), ' hour');
} else {
return pluralize(~~(between / 86400), ' day')
return pluralize(~~(between / 86400), ' day');
}
}
......@@ -36,19 +54,23 @@ export function timeAgo(time) {
*/
export function numberFormatter(num, digits) {
const si = [
{ value: 1E18, symbol: 'E' },
{ value: 1E15, symbol: 'P' },
{ value: 1E12, symbol: 'T' },
{ value: 1E9, symbol: 'G' },
{ value: 1E6, symbol: 'M' },
{ value: 1E3, symbol: 'k' }
]
{ value: 1e18, symbol: 'E' },
{ value: 1e15, symbol: 'P' },
{ value: 1e12, symbol: 'T' },
{ value: 1e9, symbol: 'G' },
{ value: 1e6, symbol: 'M' },
{ value: 1e3, symbol: 'k' }
];
for (let i = 0; i < si.length; i++) {
if (num >= si[i].value) {
return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
return (
(num / si[i].value + 0.1)
.toFixed(digits)
.replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
);
}
}
return num.toString()
return num.toString();
}
/**
......@@ -56,7 +78,9 @@ export function numberFormatter(num, digits) {
* @param {number} num
*/
export function toThousandFilter(num) {
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
return (+num || 0)
.toString()
.replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));
}
/**
......@@ -64,5 +88,5 @@ export function toThousandFilter(num) {
* @param {String} string
*/
export function uppercaseFirst(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
return string.charAt(0).toUpperCase() + string.slice(1);
}
ve-admin/admin-web/src/services/dict.js 0 → 100644
View file @ 34c9ce81
/*
* @Author: 一日看尽长安花
* @since: 2020-01-13 23:12:07
* @LastEditTime : 2020-02-05 17:03:34
* @LastEditors : 一日看尽长安花
* @Description: 与业务有关的非纯api的js
*/
import { getDictsByParent } from '@/api/dict';
/**
* @description: 异步载入级联器的数据
* @param {node} 参照cascader的lazyLoad同名参数
* @param {resolve} 同上
* @param {type} 第一级字典类型
*/
export function loadDictCascaderData(node, resolve, type) {
const { root, data } = node;
const { id } = data || {};
let datas = [];
if (!root) {
type = null;
}
let reqParam = {
parentId: id,
type: type
};
getDictsByParent(reqParam)
.then(result => {
const { code, data } = { ...result };
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
datas = data;
})
.finally(() => {
resolve(datas);
});
}
/**
* @description: 处理级联器的选中值,级联器选中值是个数组，需要处理为指定key-value
* @param {obj} 包含选中值的对象
* @param {modelKey} 级联器 cascader 的 v-model 选中值的key名称
* @param {keyNames} 转换后的 key 名称级，必须按照级联器选中值的顺序
* @returns {Object} 包含转换后的 key-value 值
*/
export function handleDictCascaderValue(obj, modelKey, keyNames) {
let selValArray = obj[modelKey] || [];
let resObj = {};
for (var i in selValArray) {
resObj[keyNames[i]] = selValArray[i];
}
delete obj[modelKey];
return Object.assign({}, obj, resObj);
}
ve-admin/admin-web/src/services/org.js 0 → 100644
View file @ 34c9ce81
/*
* @Author: 一日看尽长安花
* @since: 2020-01-13 23:12:07
* @LastEditTime : 2020-02-05 17:04:59
* @LastEditors : 一日看尽长安花
* @Description: 与业务有关的非纯api的js
*/
import { getOrgsByParent } from '@/api/org';
/**
* @description: 异步载入级联器的数据
* @param {node} 参照cascader的lazyLoad同名参数
* @param {resolve} 同上
* @param {type} 第一级字典类型
*/
export function loadOrgCascaderData(node, resolve) {
const { root, data } = node;
const { id } = data || {};
let datas = [];
getOrgsByParent({
parentId: id
})
.then(result => {
const { code, data } = { ...result };
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
datas = data;
})
.finally(() => {
resolve(datas);
});
}
/**
* @description: 组织机构是唯一级别的，只取最后一级的value。所以不像字典多个级别
* @param {obj} 包含选中值的对象
* @param {modelKey} 级联器 cascader 的 v-model 选中值的key名称
* @param {keyName} 转换后的 key 名称，必须按照级联器选中值的顺序
* @returns {Object} 包含转换后的 key-value 值
*/
export function handleOrgCascaderValue(obj, modelKey, keyName) {
let selValArray = obj[modelKey] || [];
obj[keyName] = selValArray[selValArray.length - 1];
delete obj[modelKey];
return obj;
}
ve-admin/admin-web/src/utils/object-util.js
View file @ 34c9ce81
/*
* @Author: 一日看尽长安花
* @since: 2019-10-11 17:40:57
* @LastEditTime: 2019-10-16 10:46:40
* @LastEditors: 一日看尽长安花
* @LastEditTime : 2020-02-04 13:10:03
* @LastEditors : 一日看尽长安花
* @Description:
*/
import lodash from 'lodash';
/**
* @description: obj存在为true。由于js存在undefined 和 null两种特殊的数据类型，认为从空间和引用指向上，只要有一个不存在则判断为不存在。
......@@ -23,3 +24,53 @@ export function isExists(obj) {
export function isNotExists(obj) {
return obj === void 0 || obj === null;
}
/**
* 深度遍历object，改变key为驼峰式命名
* @param {object} obj
*/
export function toCamelCaseObjectDeep(obj) {
for (let _key in obj) {
if (obj.hasOwnProperty(_key)) {
let _val = obj[_key];
let _valType = Object.prototype.toString.call(_val);
if (_valType === '[object Array]') {
_val = toCamelCaseArrayDeep(_val);
} else if (_valType === '[object Object]') {
_val = toCamelCaseObjectDeep(_val);
}
delete obj[_key];
obj[lodash.camelCase(_key)] = _val;
}
}
return obj;
}
/**
* 深度遍历数组，改变其中object元素的key为驼峰式命名
* @param {object} obj
*/
export function toCamelCaseArrayDeep(list) {
for (let i in list) {
const _valType = Object.prototype.toString.call(list[i]);
if (_valType === '[object Object]') {
list[i] = toCamelCaseObjectDeep(list[i]);
} else if (_valType === '[object Array]') {
list[i] = toCamelCaseArrayDeep(list[i]);
}
}
return list;
}
/**
* 深度遍历改变data中object 的key的命名为驼峰式命名
* @param {Object/Array} data
*/
export function toCamelCaseDeep(data) {
const _dataType = Object.prototype.toString.call(data);
let changedKeyParams;
if (_dataType === '[object Object]') {
changedKeyParams = toCamelCaseObjectDeep(data);
} else if (_dataType === '[object Array]') {
changedKeyParams = toCamelCaseArrayDeep(data);
}
return changedKeyParams;
}
ve-admin/admin-web/src/utils/request.js
View file @ 34c9ce81
......@@ -2,24 +2,35 @@
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-09 12:16:28
* @LastEditTime : 2020-01-11 23:24:40
* @LastEditTime : 2020-02-04 13:19:39
* @LastEditors : 一日看尽长安花
*/
import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import { getToken, setToken } from '@/utils/auth';
import { toCamelCaseDeep } from '@/utils/object-util';
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
timeout: 50000 // request timeout
});
// request interceptor
service.interceptors.request.use(
config => {
const method = config.method;
const params = config.params || config.data || null;
if (params) {
const changedKeyParams = toCamelCaseDeep(params);
if (method === 'get') {
config.params = changedKeyParams;
} else {
config.data = changedKeyParams;
}
}
// do something before request is sent
if (store.getters.token) {
// let each request carry token
......
ve-admin/admin-web/src/views/users/index.vue
View file @ 34c9ce81
<!--
* @Author: 一日看尽长安花
* @since: 2019-10-12 15:43:18
* @LastEditTime : 2020-01-11 21:15:32
* @LastEditTime : 2020-02-04 16:15:14
* @LastEditors : 一日看尽长安花
* @Description:
-->
<template>
<div>
<table-views
<general-page
:metadata="metadata"
:tabledata.sync="tabledata"
:loading="loading"
......@@ -20,10 +20,29 @@
>
<!-- 往搜索栏中添加搜索条件 -->
<template #filter-condition="{filterData:filterData}">
<div class="filter-item-container">
<el-cascader
v-model="filterData['orgId']"
:props="orgIdCascaderProps"
:show-all-levels="false"
clearable
placeholder="部门"
></el-cascader>
</div>
<div class="filter-item-container">
<el-cascader
v-model="filterData['jobType']"
:props="jobTypeCascaderProps"
clearable
placeholder="岗位/职务"
></el-cascader>
</div>
<div class="filter-item-container">
<el-cascader
v-model="filterData['state']"
:props="stateCascaderProps"
clearable
placeholder="状态"
></el-cascader>
</div>
</template>
......@@ -50,18 +69,19 @@
/>
</el-form-item>
</template>
</table-views>
</general-page>
</div>
</template>
<script>
import TableViews from '@/components/TableViews';
import GeneralPage from '@/components/GeneralPage';
import { users, usersMetadata } from '@/api/user';
import { getDictsByParent } from '@/api/dict';
import { loadDictCascaderData, handleDictCascaderValue } from '@/services/dict';
import { loadOrgCascaderData, handleOrgCascaderValue } from '@/services/org';
export default {
name: 'CoreUsersView',
components: { TableViews },
components: { GeneralPage },
props: {},
data() {
return {
......@@ -72,26 +92,25 @@ export default {
total: 0
},
loading: true,
orgIdCascaderProps: {
checkStrictly: true,
lazy: true,
lazyLoad(node, resolve) {
loadOrgCascaderData(node, resolve);
}
},
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);
});
loadDictCascaderData(node, resolve, 'job_type');
}
},
stateCascaderProps: {
checkStrictly: true,
lazy: true,
lazyLoad(node, resolve) {
loadDictCascaderData(node, resolve, 'user_state');
}
}
};
......@@ -116,6 +135,12 @@ export default {
},
obtainData(queryParams) {
this.loading = true;
queryParams = handleOrgCascaderValue(queryParams, 'orgId', 'org_id');
queryParams = handleDictCascaderValue(queryParams, 'jobType', [
'jobType0',
'jobType1'
]);
queryParams = handleDictCascaderValue(queryParams, 'state', ['state']);
users(queryParams)
.then(result => {
const { code, data } = { ...result };
......
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