refactor: 优化实现方式

This commit is contained in:
aring 2021-01-26 16:14:42 +08:00
parent 39ba4d89ee
commit 119a50f370
3 changed files with 57 additions and 43 deletions

View File

@ -1,3 +1,5 @@
import { readonly } from "vue"
// [[key, value]],默认配置格式 // [[key, value]],默认配置格式
const _ENUMS = {{{REPLACE_ENUMS}}} const _ENUMS = {{{REPLACE_ENUMS}}}
const ENUMS = {} const ENUMS = {}
@ -11,14 +13,14 @@ Object.keys(_ENUMS).forEach(key => {
* @param {string} key 枚举键名称 * @param {string} key 枚举键名称
* @param {string} dir 枚举键值路径默认value格式如value.propName、value.propName[0] * @param {string} dir 枚举键值路径默认value格式如value.propName、value.propName[0]
*/ */
function get(name, key, dir='value') { function get(name, key, opt = { dir: 'value' }) {
let list = ENUMS[name] || [] let list = ENUMS[name] || []
if (key) { if (key) {
let value = list.filter(item => item.key === key)[0] let res = list.filter(item => item.key === key)[0]
if (!value) return key if (!res) return key
return parseValueDir(value, dir) return readonly(parseValueDir(res.value, opt.dir) || key)
} else { } else {
return list return readonly(list)
} }
} }
@ -34,17 +36,32 @@ function remove(name) {
* 添加一个新的枚举,重复添加会覆盖 * 添加一个新的枚举,重复添加会覆盖
* @param {string} name 枚举名称 * @param {string} name 枚举名称
* @param {Array<Object|Array>} _enum 枚举数组,数组元素可以是数组或者对象 * @param {Array<Object|Array>} _enum 枚举数组,数组元素可以是数组或者对象
* @param {string} keyName 指定枚举键名称取值属性 * @param {object} opt {keyName: 'key', valueName: ''} keyName: 指定枚举键名称取值属性 valueName 指定枚举键值取值属性
* @param {string} valueName 指定枚举键值取值属性
*/ */
function push(name, _enum, keyName='key', valueName='value') { function push(name, _enum, opt = { keyName: '', valueName: '' }) {
if (ENUMS[name]) { if (ENUMS[name]) {
console.warn(`enums warn: the ${name}'s enum already exists, cover!`) console.warn(`enums warn: the ${name}'s enum already exists, cover!`)
} }
ENUMS[name] = convert(name, _enum, keyName, valueName) ENUMS[name] = convert(name, _enum, opt)
return get(name) return get(name)
} }
/**
* 基于现有的枚举,连接上新的枚举后返回新的枚举
* @param {string} name 枚举名称
* @param {Array<Object|Array>} _enum 枚举数组,数组元素可以是数组或者对象
* @param {object} opt {keyName: 'key', valueName: ''} keyName: 指定枚举键名称取值属性 valueName 指定枚举键值取值属性 before: 是否添加在现有的之前
*/
function concat(name, _enum, opt = { keyName: '', valueName: '', before: false }) {
let list = ENUMS[name] || []
let partList = convert(name, _enum, opt) || []
if (opt.before) {
return readonly(partList.concat(list))
} else {
return readonly(list.concat(partList))
}
}
/** /**
* 根据dir解析value的属性值 * 根据dir解析value的属性值
* @param value * @param value
@ -73,10 +90,9 @@ function parseValueDir(value, dir='value') {
* 转换传入的枚举数组 * 转换传入的枚举数组
* @param {string} name 枚举名称 * @param {string} name 枚举名称
* @param {Array<Object|Array>} _enum 枚举数组,数组元素可以是数组或者对象 * @param {Array<Object|Array>} _enum 枚举数组,数组元素可以是数组或者对象
* @param {string} keyName 指定枚举键名称取值属性 * @param {object} opt {keyName: 'key', valueName: ''} keyName: 指定枚举键名称取值属性 valueName 指定枚举键值取值属性
* @param {string} valueName 指定枚举键值取值属性
*/ */
function convert(name, _enum, keyName='key', valueName='value') { function convert(name, _enum, opt = { keyName: '', valueName: '' }) {
if (!name) { if (!name) {
throw new Error(`enums error: name must not be empty`) throw new Error(`enums error: name must not be empty`)
} }
@ -85,35 +101,35 @@ function convert(name, _enum, keyName='key', valueName='value') {
} }
let list = [] let list = []
_enum.forEach((item, index) => { _enum.forEach((item, index) => {
let _item;
if (Array.isArray(item)) { if (Array.isArray(item)) {
let _item = item[1] _item = {key: item[0], value: item[1]}
if (Object.prototype.toString.call(_item) !== '[object Object]') {
_item = { value: _item }
}
_item.key = item[0]
list.push(_item)
} else if(Object.prototype.toString.call(item) === '[object Object]') { } else if(Object.prototype.toString.call(item) === '[object Object]') {
list.push({ if (!opt.keyName) opt.keyName = 'key'
key: item[keyName], // key可能为空有场景需要使用比如全选
value: item[valueName], _item = {
...item key: item[opt.keyName],
}) value: opt.valueName ? item[opt.valueName] : item
}
} else { } else {
console.log(`enums warn: the ${name}'s enum item[${index}] must be array or object`) console.warn(`enums warn: the key ${name} enum item[${index}] must be array or object`)
return
}
let res = list.filter(item => item.key === _item.key)[0]
if (res) { // key覆盖提示
console.warn(`enums warn: the key ${res.key} enum item already exists, cover!`)
res.value = _item.value
} else {
list.push(_item)
} }
}) })
return list return list
} }
const $data = new Proxy(ENUMS, {
get: function(target, key) {
return get(key)
}
})
export const enums = { export const enums = {
get, get,
push, push,
remove, remove,
$data concat,
convert
} }

View File

@ -29,6 +29,6 @@ export default {
port: 8080 port: 8080
}, },
enums: { enums: {
status: [['1', '有效的'], ['0', '无效的']] status: [['0', '无效的'], ['1', '有效的']]
} }
}; };

View File

@ -5,11 +5,9 @@
<access :id="accessId"> accessOnepicess1 <input /> </access> <access :id="accessId"> accessOnepicess1 <input /> </access>
<div v-access="accessId"> accessOnepicess2 <input /> </div> <div v-access="accessId"> accessOnepicess2 <input /> </div>
<input /> <input />
<div> <h4>数据字典</h4>
<div>数据字典</div> <div v-for="item in enumsGet('status')" :key="item.key">{{item.value}}{{item.key}}</div>
<div v-for="item in status" :key="item.key">{{item.value}}-{{item.key}}</div> <div v-for="item in enumsGet('constomStatus')" :key="item.key">{{item.value}}{{item.key}}</div>
<div v-for="item in coustomStatus" :key="item.key">{{item.value}}-{{item.key}}</div>
</div>
</div> </div>
</template> </template>
<config> <config>
@ -19,7 +17,7 @@
} }
</config> </config>
<script> <script>
import { ref, onMounted, reactive } from 'vue'; import { ref, onMounted } from 'vue';
import { import {
access, useAccess, useRouter, useI18n, locale, enums access, useAccess, useRouter, useI18n, locale, enums
} from '@webank/fes'; } from '@webank/fes';
@ -31,9 +29,10 @@ export default {
const localI18n = useI18n(); const localI18n = useI18n();
const router = useRouter(); const router = useRouter();
const accessId = ref('/onepiece1'); const accessId = ref('/onepiece1');
const status = reactive(enums.$data.status); console.log(enums.get('status'));
enums.push('coustomStatus', [{ id: 1, desc: '是' }, { id: 1, desc: '否' }], 'id', 'desc'); const constomStatus = enums.push('constomStatus', [{ id: 1, desc: '是' }, { id: 0, desc: '否' }], { keyName: 'id', valueName: 'desc' });
const coustomStatus = reactive(enums.$data.coustomStatus); console.log(constomStatus);
console.log(enums.concat('status', [['2', '未定义']]));
onMounted(() => { onMounted(() => {
console.log(router); console.log(router);
setTimeout(() => { setTimeout(() => {
@ -52,8 +51,7 @@ export default {
fes, fes,
accessOnepicess, accessOnepicess,
t: localI18n.t, t: localI18n.t,
status, enumsGet: enums.get
coustomStatus
}; };
} }
}; };