161 lines
3.3 KiB
JavaScript
161 lines
3.3 KiB
JavaScript
import { h, Component, render } from '@/components/preact'
|
|
import Framework from '@/components/element/framework'
|
|
import { selector, warn, listenerClose, watch, safety, isArray, deepMerge } from '@/components/common/util'
|
|
import defaultOptions from '@/components/config/options'
|
|
|
|
|
|
|
|
/**
|
|
* 保留初始化的数据
|
|
*/
|
|
const initData = {};
|
|
const data = {};
|
|
const onClose = (el) => Object.keys(data).filter(a => a != el).forEach(el => data[el].closed());
|
|
listenerClose(data, onClose);
|
|
|
|
/**
|
|
* 子组件集合
|
|
*/
|
|
const childs = {};
|
|
|
|
|
|
/**
|
|
* 对外提供的处理方法
|
|
*/
|
|
class xmOptions {
|
|
|
|
constructor(options) {
|
|
//保留初始化时的数据
|
|
initData[options.el] = options;
|
|
//定义默认值
|
|
this.options = defaultOptions(options.language);
|
|
//开始渲染数据
|
|
this.update(options);
|
|
}
|
|
|
|
/**
|
|
* 更新数据 + 重新渲染
|
|
*/
|
|
update(options = {}){
|
|
//记录最新的配置项
|
|
this.options = deepMerge(this.options, options);
|
|
|
|
//如果dom不存在, 则不进行渲染事项
|
|
let dom = selector(this.options.el);
|
|
if(!dom){
|
|
warn(`没有找到渲染对象: ${options.el}, 请检查`)
|
|
return ;
|
|
}
|
|
|
|
const onRef = (ref) => childs[this.options.el] = ref;
|
|
|
|
render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
|
|
|
|
//记录数据
|
|
data[this.options.el] = this;
|
|
//返回多选对象
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* 重置多选, 回到初始化的状态
|
|
*/
|
|
reset(){
|
|
let initVal = this.options;
|
|
//设置options的默认数据
|
|
this.options = defaultOptions(initVal.language);
|
|
//更新渲染
|
|
this.update({ ...initData[initVal.el]});
|
|
//子组件初始化
|
|
childs[this.options.el].reset();
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* 主动打开多选
|
|
*/
|
|
opened(){
|
|
let ref = childs[this.options.el];
|
|
!ref.state.show && ref.onClick();
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* 主动关闭多选
|
|
*/
|
|
closed(){
|
|
let ref = childs[this.options.el];
|
|
ref.state.show && ref.onClick();
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* 获取多选选中的数据
|
|
*/
|
|
getValue(type){
|
|
let arr = safety(childs[this.options.el].state.sels);
|
|
|
|
if(type === 'name'){
|
|
return arr.map(item => item[this.options.prop.name]);
|
|
}else
|
|
if(type === 'nameStr'){
|
|
return arr.map(item => item[this.options.prop.name]).join(',');
|
|
}else
|
|
if(type === 'value'){
|
|
return arr.map(item => item[this.options.prop.value]);
|
|
}else
|
|
if(type === 'valueStr'){
|
|
return arr.map(item => item[this.options.prop.value]).join(',');
|
|
}
|
|
|
|
return arr;
|
|
}
|
|
|
|
/**
|
|
* 设置多选数据
|
|
*/
|
|
setValue(sels, show){
|
|
if(!isArray(sels)){
|
|
warn('请传入数组结构...')
|
|
return ;
|
|
}
|
|
childs[this.options.el].value(sels, show);
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* 追加赋值
|
|
*/
|
|
append(sels){
|
|
if(!isArray(sels)){
|
|
warn('请传入数组结构...')
|
|
return ;
|
|
}
|
|
childs[this.options.el].append(sels);
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* 删除赋值
|
|
*/
|
|
delete(sels){
|
|
if(!isArray(sels)){
|
|
warn('请传入数组结构...')
|
|
return ;
|
|
}
|
|
childs[this.options.el].del(sels);
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* 闪烁警告边框
|
|
*/
|
|
warning(color){
|
|
childs[this.options.el].updateBorderColor(color || this.options.theme.maxColor);
|
|
return this;
|
|
}
|
|
|
|
}
|
|
|
|
export default xmOptions;
|