From 441f73b946ac046545f123693bf1215f48a1f5a6 Mon Sep 17 00:00:00 2001 From: 刘汉宸 Date: Thu, 18 Jun 2020 14:59:04 +0800 Subject: [PATCH] refactor: 重构Scheme支持分作用域及内外接口替换 --- examples/main.js | 7 ++++++- examples/utils/cache.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ examples/utils/param.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ examples/utils/request.js | 34 ++++++++++++++++++++++++++++++++++ examples/views/docs/component/scheme.md | 37 +++++++++++++++++++++++++++++++++++-- packages/_utils/index.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ packages/_utils/param.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ packages/form/form-render.vue | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------- packages/form/index.vue | 2 +- packages/form/util.js | 86 -------------------------------------------------------------------------------------- packages/index.js | 9 +++++++++ packages/scheme/index.scss | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ packages/scheme/index.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------- packages/table/cell-editable.vue | 2 +- packages/table/cell-value-render.js | 2 +- packages/table/editable.vue | 2 +- packages/table/index.vue | 2 +- 17 files changed, 647 insertions(+), 249 deletions(-) create mode 100644 examples/utils/cache.js create mode 100644 examples/utils/param.js create mode 100644 examples/utils/request.js create mode 100644 packages/_utils/index.js create mode 100644 packages/_utils/param.js delete mode 100644 packages/form/util.js create mode 100644 packages/scheme/index.scss diff --git a/examples/main.js b/examples/main.js index 668ac71..9edf5f8 100644 --- a/examples/main.js +++ b/examples/main.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import App from '@/App.vue'; import router from '@/router'; import store from '@/store'; +import request from '@/utils/request'; import ElementUI from 'element-ui'; import Zee from '../packages'; import NProgress from 'nprogress'; @@ -18,8 +19,12 @@ Vue.component('code-snippet', CodeSnippet); // 注册饿了么UI Vue.use(ElementUI); // 注册Zee组件库 -Vue.use(Zee); +Vue.use(Zee, { + alias: { list: 'result', total: 'totalCount' }, + http: request, +}); +Vue.prototype.$http = request; Vue.config.productionTip = false; new Vue({ diff --git a/examples/utils/cache.js b/examples/utils/cache.js new file mode 100644 index 0000000..907aedf --- /dev/null +++ b/examples/utils/cache.js @@ -0,0 +1,86 @@ +const __DEBUG__ = process.env.NODE_ENV !== 'production'; +/** + * 缓存数据优化 + * import cache from '@/utils/cache' + * 使用方法 【 + * 一、设置缓存 + * string cache.put('k', 'string你好啊'); + * json cache.put('k', { "b": "3" }, 2); + * array cache.put('k', [1, 2, 3]); + * boolean cache.put('k', true); + * 二、读取缓存 + * 默认值 cache.get('k') + * string cache.get('k', '你好') + * json cache.get('k', { "a": "1" }) + * 三、移除/清理 + * 移除: cache.remove('k'); + * 清理：cache.clear(); + * 】 + * @type {String} + */ +const prefix = __DEBUG__ ? 'ZY_AUTH_DEV_' : 'ZY_AUTH_'; // 缓存前缀 +const postfix = '_SEED'; +/** + * 设置缓存 + * @param {[type]} k [键名] + * @param {[type]} v [键值] + * @param {[type]} t [时间、单位秒] + */ +function put(k, v, t) { + localStorage.setItem(prefix + k, JSON.stringify(v)); + var seconds = parseInt(t); + if (seconds > 0) { + var timestamp = Date.parse(new Date()); + timestamp = timestamp / 1000 + seconds; + localStorage.setItem(prefix + k + postfix, JSON.stringify(timestamp)); + } else { + localStorage.removeItem(prefix + k + postfix); + } +} + +/** + * 获取缓存 + * @param {[type]} k [键名] + * @param {[type]} def [获取为空时默认] + */ +function get(k, def) { + var deadtime = parseInt(localStorage.getItem(prefix + k + postfix)); + if (deadtime) { + if (parseInt(deadtime) < Date.parse(new Date()) / 1000) { + if (def) { + return def; + } else { + return false; + } + } + } + var res = localStorage.getItem(prefix + k); + if (res) { + return JSON.parse(res); + } else { + if (def == undefined || def == '') { + def = false; + } + return def; + } +} + +function remove(k) { + localStorage.removeItem(prefix + k); + localStorage.removeItem(prefix + k + postfix); +} + +/** + * 清理所有缓存 + * @return {[type]} [description] + */ +function clear() { + localStorage.clear(); +} + +module.exports = { + put: put, + get: get, + remove: remove, + clear: clear, +}; diff --git a/examples/utils/param.js b/examples/utils/param.js new file mode 100644 index 0000000..f93a1d0 --- /dev/null +++ b/examples/utils/param.js @@ -0,0 +1,53 @@ +export const stringify = json => { + const urlEncode = (param, key, encode) => { + if (param === null) return ''; + let paramStr = ''; + const t = typeof param; + if (t === 'string' || t === 'number' || t === 'boolean') { + paramStr = `&${key}=${encode === null || encode ? encodeURIComponent(param) : param}`; + } else { + for (const i in param) { + if (i) { + if (param[i] !== undefined && param[i] !== '' && !(param[i] && typeof param[i] === 'string' && /^\s+$/.test(param[i]))) { + const k = key == null ? i : `${key}${param instanceof Array ? `[${i}]` : `.${i}`}`; + paramStr += urlEncode(param[i], k, encode); + } + } + } + } + return paramStr; + }; + return urlEncode(json).substring(1); +}; + +export const parse = url => { + let obj = {}; // 创建一个Object + let reg = /[?&][^?&]+=[^?&]+/g; // 正则匹配 ?&开始 =拼接 非?&结束 的参数 + let arr = url.match(reg); // match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 + // arr数组形式 ['?id=12345','&a=b'] + if (arr) { + arr.forEach(item => { + /** + * tempArr数组 ['id','12345']和['a','b'] + * 第一个是key，第二个是value + * */ + let tempArr = item.substring(1).split('='); + let key = decodeURIComponent(tempArr[0]); + let val = decodeURIComponent(tempArr[1]); + obj[key] = val; + }); + } + return obj; +}; + +export const urlParam = data => { + return `${data ? `?${stringify(data)}` : ''}`; +}; + +/** + * 清除首尾斜杠，便于拼接字符串 + * @param {*} str URL + */ +export const clear = str => { + return str.replace(/^(\s|\/)+|(\s|\/)+$/g, ''); +}; diff --git a/examples/utils/request.js b/examples/utils/request.js new file mode 100644 index 0000000..53b4c67 --- /dev/null +++ b/examples/utils/request.js @@ -0,0 +1,34 @@ +import axios from 'axios'; + +const request = axios.create({ + baseURL: 'http://47.98.245.217:7070/tms-web-api/', + timeout: 1000 * 60, + withCredentials: true, + headers: { + 'Content-Type': 'application/json; charset=utf-8', + Authorization: 'Bearer cd355920-ff83-445e-87e1-39d7ecfb8566', + }, +}); + +// respone 拦截器 +request.interceptors.response.use( + response => { + const { data = {}, config } = response; + const { businessException, errorCode, message, success } = data; + if (config && config.interceptors === false) { + // 请求配置不做返回拦截的情况 + return response; + } else { + if (success) { + return data; + } else { + return Promise.reject(response); + } + } + }, + error => { + return Promise.reject(error); + }, +); + +export default request; diff --git a/examples/views/docs/component/scheme.md b/examples/views/docs/component/scheme.md index 264d664..f06e514 100644 --- a/examples/views/docs/component/scheme.md +++ b/examples/views/docs/component/scheme.md @@ -10,7 +10,7 @@ ```html @@ -190,6 +193,19 @@ export default { return undefined; } }, + /** + * @description 绑定表单项显示状态 + * @param {Object} item 表单项配置 + * @param {String} type Vue显示类型，可选值：visible、show + * @returns {Boolean} 显示状态 + */ + bindItemVisible(item, type) { + const visible = item[type]; + if (typeof visible === 'function') { + return visible(this.model); + } + return item[type] !== false; + }, }, }; diff --git a/packages/form/index.vue b/packages/form/index.vue index cff0547..e5c2db4 100644 --- a/packages/form/index.vue +++ b/packages/form/index.vue @@ -39,7 +39,7 @@