zxf
5 days ago
commit
78f926e3e6
@ -0,0 +1,98 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import store from '@/store'
|
||||||
|
import DataDict from '@/utils/dict'
|
||||||
|
import { getDicts as getDicts, getBatchDicts } from '@/api/system/dict/data'
|
||||||
|
|
||||||
|
function searchDictByKey(dict, key) {
|
||||||
|
if (key == null && key == "") {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
for (let i = 0; i < dict.length; i++) {
|
||||||
|
if (dict[i].key == key) {
|
||||||
|
return dict[i].value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function install() {
|
||||||
|
let waiting = [];
|
||||||
|
let isRequesting = false;
|
||||||
|
let timer = null; // 定时器
|
||||||
|
|
||||||
|
Vue.use(DataDict, {
|
||||||
|
metas: {
|
||||||
|
'*': {
|
||||||
|
labelField: 'dictLabel',
|
||||||
|
valueField: 'dictValue',
|
||||||
|
request(dictMeta) {
|
||||||
|
const storeDict = searchDictByKey(store.getters.dict, dictMeta.type)
|
||||||
|
if (storeDict) {
|
||||||
|
return new Promise(resolve => { resolve(storeDict) })
|
||||||
|
} else {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
waiting.push({
|
||||||
|
type: dictMeta.type,
|
||||||
|
resolve,
|
||||||
|
reject,
|
||||||
|
});
|
||||||
|
if (timer || isRequesting) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const startRequest = () => {
|
||||||
|
const requesting = [...waiting];
|
||||||
|
waiting = [];
|
||||||
|
timer = null;
|
||||||
|
isRequesting = true;
|
||||||
|
// 批量获取字典
|
||||||
|
getBatchDicts(requesting.map(item => item.type)).then(res => {
|
||||||
|
const datas = res.data || {};
|
||||||
|
requesting.forEach(item => {
|
||||||
|
store.dispatch('dict/setDict', { key: item.type, value: datas[item.type] || [] });
|
||||||
|
item.resolve(datas[item.type] || []);
|
||||||
|
const wIndex = waiting.findIndex(witem => witem.type == item.type);
|
||||||
|
if (wIndex > -1) {
|
||||||
|
waiting[wIndex].resolve(datas[item.type] || []);
|
||||||
|
waiting.splice(wIndex, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
isRequesting = false;
|
||||||
|
if (waiting.length > 0) {
|
||||||
|
startRequest();
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
requesting.forEach(item => {
|
||||||
|
item.reject(error)
|
||||||
|
});
|
||||||
|
isRequesting = false;
|
||||||
|
if (waiting.length > 0) {
|
||||||
|
startRequest();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
startRequest();
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
|
||||||
|
// getDicts(dictMeta.type).then(res => {
|
||||||
|
// store.dispatch('dict/setDict', { key: dictMeta.type, value: res.data })
|
||||||
|
// resolve(res.data)
|
||||||
|
// }).catch(error => {
|
||||||
|
// reject(error)
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install,
|
||||||
|
}
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="items && items.length > 0 && items[0].raw.listClass && items[0].raw.listClass !== 'default'">
|
||||||
|
<el-tag v-for="(item, index) in items" :disable-transitions="true" :size="size" :index="index" :key="index"
|
||||||
|
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" :class="item.raw.cssClass" :style="{
|
||||||
|
'border-color': item.raw.listClass == 'default'? '#DCDFE6' : '',
|
||||||
|
'color': item.raw.listClass == 'default'? '#606266' : '',
|
||||||
|
'background-color': item.raw.listClass == 'default'? '#ffffff' : ''
|
||||||
|
}">
|
||||||
|
{{ valueShow ? (item.value + ' - ' + item.label) : item.label }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ items.map(item => valueShow ? (item.value + ' - ' + item.label) : item.label).join('、')}}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "DictTag",
|
||||||
|
props: {
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
value: [Number, String, Array],
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
valueShow: [Boolean],
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
values() {
|
||||||
|
let myValue = this.value;
|
||||||
|
if (myValue === null || myValue === undefined || myValue === '') {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
if (Array.isArray(myValue)) {
|
||||||
|
return myValue.filter(item => !!item || item === 0);
|
||||||
|
}
|
||||||
|
if (typeof myValue === 'string') {
|
||||||
|
return myValue.split(',').filter(item => !!item || item === 0);
|
||||||
|
}
|
||||||
|
if (typeof myValue === 'number') {
|
||||||
|
return [myValue];
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
items() {
|
||||||
|
// const list = this.options.filter(item => {
|
||||||
|
// return this.values.includes(item.value);
|
||||||
|
// });
|
||||||
|
if (!this.values) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const list = this.values.map(item => {
|
||||||
|
const findIndex = this.options.findIndex(val => {
|
||||||
|
return val.value === item;
|
||||||
|
});
|
||||||
|
if (findIndex < 0) {
|
||||||
|
return {
|
||||||
|
label: item,
|
||||||
|
value: item,
|
||||||
|
raw: {
|
||||||
|
listClass: 'default',
|
||||||
|
cssClass: '',
|
||||||
|
cssStyle: '',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return this.options[findIndex];
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.el-tag+.el-tag {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
const state = {
|
||||||
|
dict: new Array(),
|
||||||
|
dictData: {}
|
||||||
|
}
|
||||||
|
const mutations = {
|
||||||
|
SET_DICT: (state, { key, value }) => {
|
||||||
|
if (key !== null && key !== "") {
|
||||||
|
state.dict.push({
|
||||||
|
key: key,
|
||||||
|
value: value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
REMOVE_DICT: (state, key) => {
|
||||||
|
try {
|
||||||
|
for (let i = 0; i < state.dict.length; i++) {
|
||||||
|
if (state.dict[i].key == key) {
|
||||||
|
state.dict.splice(i, i)
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
CLEAN_DICT: (state) => {
|
||||||
|
state.dict = new Array()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
// 设置字典
|
||||||
|
setDict({ commit }, data) {
|
||||||
|
commit('SET_DICT', data)
|
||||||
|
},
|
||||||
|
// 删除字典
|
||||||
|
removeDict({ commit }, key) {
|
||||||
|
commit('REMOVE_DICT', key)
|
||||||
|
},
|
||||||
|
// 清空字典
|
||||||
|
cleanDict({ commit }) {
|
||||||
|
commit('CLEAN_DICT')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import DictOptions from './DictOptions'
|
||||||
|
import DictData from './DictData'
|
||||||
|
// 查找字典key value正确字段
|
||||||
|
export default function(dict, dictMeta) {
|
||||||
|
const label = determineDictField(dict, dictMeta.labelField, ...DictOptions.DEFAULT_LABEL_FIELDS)
|
||||||
|
const value = determineDictField(dict, dictMeta.valueField, ...DictOptions.DEFAULT_VALUE_FIELDS)
|
||||||
|
return new DictData(dict[label], dict[value], dict)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 确定字典字段
|
||||||
|
* @param {DictData} dict
|
||||||
|
* @param {...String} fields
|
||||||
|
*/
|
||||||
|
function determineDictField(dict, ...fields) {
|
||||||
|
return fields.find(f => Object.prototype.hasOwnProperty.call(dict, f))
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
/**
|
||||||
|
* @classdesc 字典数据
|
||||||
|
* @property {String} label 标签
|
||||||
|
* @property {*} value 标签
|
||||||
|
* @property {Object} raw 原始数据
|
||||||
|
*/
|
||||||
|
export default class DictData {
|
||||||
|
constructor(label, value, raw) {
|
||||||
|
this.label = label
|
||||||
|
this.value = value
|
||||||
|
this.sort = raw?.dictSort
|
||||||
|
this.code = raw?.dictCode
|
||||||
|
this.raw = raw; //保存原始数据
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import { mergeRecursive } from "@/utils";
|
||||||
|
import DictOptions from './DictOptions'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @classdesc 字典元数据
|
||||||
|
* @property {String} type 类型
|
||||||
|
* @property {Function} request 请求
|
||||||
|
* @property {String} label 标签字段
|
||||||
|
* @property {String} value 值字段
|
||||||
|
*/
|
||||||
|
export default class DictMeta {
|
||||||
|
constructor(options) {
|
||||||
|
this.type = options.type
|
||||||
|
this.request = options.request
|
||||||
|
this.responseConverter = options.responseConverter
|
||||||
|
this.labelField = options.labelField
|
||||||
|
this.valueField = options.valueField
|
||||||
|
this.lazy = options.lazy === true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析字典元数据
|
||||||
|
* @param {Object} options
|
||||||
|
* @returns {DictMeta}
|
||||||
|
*/
|
||||||
|
DictMeta.parse= function(options) {
|
||||||
|
let opts = null
|
||||||
|
if (typeof options === 'string') {
|
||||||
|
opts = DictOptions.metas[options] || {}
|
||||||
|
opts.type = options
|
||||||
|
} else if (typeof options === 'object') {
|
||||||
|
opts = options
|
||||||
|
}
|
||||||
|
opts = mergeRecursive(DictOptions.metas['*'], opts);
|
||||||
|
// console.log('解析结果：', opts)
|
||||||
|
return new DictMeta(opts)
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import Dict from './Dict'
|
||||||
|
import { mergeOptions } from './DictOptions'
|
||||||
|
|
||||||
|
export default function(Vue, options) {
|
||||||
|
mergeOptions(options)
|
||||||
|
Vue.mixin({
|
||||||
|
data() {
|
||||||
|
if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
const dict = new Dict()
|
||||||
|
dict.owner = this
|
||||||
|
return {
|
||||||
|
dict
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (!(this.dict instanceof Dict)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
options.onCreated && options.onCreated(this.dict)
|
||||||
|
this.dict.init(this.$options.dicts).then(() => {
|
||||||
|
options.onReady && options.onReady(this.dict)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$emit('dictReady', this.dict)
|
||||||
|
if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) {
|
||||||
|
this.$options.methods.onDictReady.call(this, this.dict)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
Reference in new issue