修复若干bug
This commit is contained in:
maplemei
parent
6b24d608ee
commit
9bf5b060ca
23
CHANGELOG.md
23
CHANGELOG.md
@ -1,5 +1,25 @@
|
||||
## 更新日志
|
||||
|
||||
### 1.2.0
|
||||
|
||||
*2020-11-25*
|
||||
|
||||
#### 新增
|
||||
|
||||
- 单选图标自定义
|
||||
- 新增实例方法`getTreeValue`, 用于获取树结构下的父节点和半选节点
|
||||
- 新增实例方法`enable`, `disable`, 动态操作选项的启用禁用
|
||||
- 新增配置`layReqText`, 表单验证, 同`layui`的`lay-reqText`
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- 修复分页模式下的上一页下一页没有国际化
|
||||
- 修复远程分页时搜索过滤数据异常
|
||||
- 修改`update`方法无法更新远程
|
||||
- 修复tree模式下非严格模式搜索异常
|
||||
- 修复tree模式下工具条操作异常
|
||||
|
||||
|
||||
### 1.1.9
|
||||
|
||||
*2020-07-20*
|
||||
@ -7,6 +27,9 @@
|
||||
- 更新一下目录结构说明
|
||||
- 增加③群`1145047250`
|
||||
|
||||
|
||||
### 1.1.9
|
||||
|
||||
*2020-05-04*
|
||||
|
||||
#### 新增
|
||||
|
||||
4
dist/static/2.js
vendored
4
dist/static/2.js
vendored
File diff suppressed because one or more lines are too long
4
dist/static/3.js
vendored
4
dist/static/3.js
vendored
File diff suppressed because one or more lines are too long
4
dist/static/docs.js
vendored
4
dist/static/docs.js
vendored
File diff suppressed because one or more lines are too long
4
dist/xm-select.js
vendored
4
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
@ -35,6 +35,10 @@ tree: {
|
||||
<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
|
||||
<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
|
||||
<input type="checkbox" name="simple" lay-filter="simple" lay-skin="primary" title="极简模式">
|
||||
|
||||
<br/><br/>
|
||||
<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
|
||||
<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">间距</div>
|
||||
@ -54,6 +58,34 @@ layui.form.render();
|
||||
});
|
||||
})
|
||||
|
||||
//控制显示父节点的图标
|
||||
layui.form.on('checkbox(hidden)', function(data){
|
||||
demo1.update({
|
||||
iconfont: {
|
||||
parent: data.elem.checked ? 'hidden' : '',
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//自定义图标
|
||||
layui.form.on('checkbox(custom)', function(data){
|
||||
let iconfont = data.elem.checked ? {
|
||||
select: 'layui-icon layui-icon-chart',
|
||||
unselect: 'layui-icon-ok-circle',
|
||||
half: 'layui-icon layui-icon-table',
|
||||
parent: 'layui-icon layui-icon-survey',
|
||||
} : {
|
||||
select: '',
|
||||
unselect: '',
|
||||
half: '',
|
||||
parent: '',
|
||||
}
|
||||
demo1.update({
|
||||
iconfont: iconfont
|
||||
})
|
||||
layui.form.render();
|
||||
});
|
||||
|
||||
layui.slider.render({
|
||||
elem: '#slideTest1',
|
||||
min: 10,
|
||||
@ -88,7 +120,7 @@ var demo1 = xmSelect.render({
|
||||
},
|
||||
filterable: true,
|
||||
height: 'auto',
|
||||
data(){
|
||||
data: function(){
|
||||
return [
|
||||
{name: '销售员', value: -1, disabled: true, children: [
|
||||
{name: '张三1', value: 1, selected: true, children: []},
|
||||
|
||||
@ -9,7 +9,7 @@ cascader: {
|
||||
//是否显示级联模式
|
||||
show: true,
|
||||
//间距
|
||||
indent: 100,
|
||||
indent: 200,
|
||||
//是否严格遵守父子模式
|
||||
strict: true,
|
||||
},
|
||||
@ -24,6 +24,8 @@ cascader: {
|
||||
<br/>
|
||||
<div class="layui-form">
|
||||
<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
|
||||
<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
|
||||
<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">间距</div>
|
||||
@ -36,7 +38,7 @@ var demo1 = xmSelect.render({
|
||||
autoRow: true,
|
||||
cascader: {
|
||||
show: true,
|
||||
indent: 100,
|
||||
indent: 200,
|
||||
},
|
||||
height: '200px',
|
||||
data(){
|
||||
@ -72,14 +74,42 @@ layui.form.render();
|
||||
});
|
||||
})
|
||||
|
||||
//控制显示父节点的图标
|
||||
layui.form.on('checkbox(hidden)', function(data){
|
||||
demo1.update({
|
||||
iconfont: {
|
||||
parent: data.elem.checked ? 'hidden' : '',
|
||||
}
|
||||
})
|
||||
});
|
||||
//自定义图标
|
||||
layui.form.on('checkbox(custom)', function(data){
|
||||
let iconfont = data.elem.checked ? {
|
||||
select: 'layui-icon layui-icon-chart',
|
||||
unselect: 'layui-icon-ok-circle',
|
||||
half: 'layui-icon layui-icon-table',
|
||||
parent: 'layui-icon layui-icon-survey',
|
||||
} : {
|
||||
select: '',
|
||||
unselect: '',
|
||||
half: '',
|
||||
parent: '',
|
||||
}
|
||||
demo1.update({
|
||||
iconfont: iconfont
|
||||
})
|
||||
layui.form.render();
|
||||
});
|
||||
|
||||
|
||||
layui.slider.render({
|
||||
elem: '#slideTest1',
|
||||
min: 50,
|
||||
max: 300,
|
||||
max: 400,
|
||||
showstep: true,
|
||||
input: true,
|
||||
tips: true,
|
||||
value: 100,
|
||||
value: 200,
|
||||
change: function(value){
|
||||
demo1.update({
|
||||
cascader: {
|
||||
|
||||
@ -8,29 +8,43 @@
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
autoRow: true,
|
||||
toolbar: { show: true },
|
||||
paging: true,
|
||||
pageRemote: true,
|
||||
filterable: true,
|
||||
remoteSearch: true,
|
||||
remoteMethod: function(val, cb, show){
|
||||
//这里如果val为空, 则不触发搜索
|
||||
/* if(!val){
|
||||
return cb([]);
|
||||
} */
|
||||
//这里引入了一个第三方插件axios, 相当于$.ajax
|
||||
axios({
|
||||
method: 'get',
|
||||
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
|
||||
params: {
|
||||
keyword: val,
|
||||
}
|
||||
}).then(response => {
|
||||
var res = response.data;
|
||||
cb(res.data, 80)
|
||||
}).catch(err => {
|
||||
cb([]);
|
||||
});
|
||||
tree: {
|
||||
show: true,
|
||||
showFolderIcon: true,
|
||||
showLine: true,
|
||||
indent: 20,
|
||||
expandedKeys: [ -3 ],
|
||||
},
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: ['ALL', 'REVERSE', 'CLEAR']
|
||||
},
|
||||
filterable: true,
|
||||
height: 'auto',
|
||||
data(){
|
||||
return [
|
||||
{name: '销售员', value: -1, disabled: true, children: [
|
||||
{name: '张三1', value: 1, selected: true, children: []},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
]},
|
||||
{name: '奖品', value: -2, children: [
|
||||
{name: '奖品3', value: -3, children: [
|
||||
{name: '苹果3', value: 14, selected: true},
|
||||
{name: '香蕉3', value: 15},
|
||||
{name: '葡萄3', value: 16},
|
||||
]},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5},
|
||||
{name: '葡萄2', value: 6},
|
||||
]},
|
||||
]
|
||||
},
|
||||
iconfont: {
|
||||
select: '',
|
||||
unselect: '',
|
||||
half: '',
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@ -5,19 +5,19 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------------- | ----------------------------- | ------------- | ------------- | --------- |
|
||||
| el | 渲染对象, css选择器, dom元素 | string | - | - |
|
||||
| el | 渲染对象, css选择器, dom元素 | string | - | - |
|
||||
| language | 语言选择 | string | zn / en | zn |
|
||||
| data | 显示的数据 | array | - | [ ] |
|
||||
| content | 自定义下拉框html | string | - | - |
|
||||
| initValue | 初始化选中的数据, 需要在data中存在 | array | - | null |
|
||||
| tips | 默认提示, 类似于placeholder | string | - | 请选择 |
|
||||
| initValue | 初始化选中的数据, 需要在data中存在 | array | - | null |
|
||||
| tips | 默认提示, 类似于placeholder | string | - | 请选择 |
|
||||
| empty | 空数据提示 | string | - | 暂无数据 |
|
||||
| filterable | 是否开启搜索 | boolean | true / false | false |
|
||||
| searchTips | 搜索提示 | string | - | 请选择 |
|
||||
| delay | 搜索延迟 ms | int | - | 500 |
|
||||
| delay | 搜索延迟 ms | int | - | 500 |
|
||||
| filterMethod | 搜索回调函数 | function(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key | - | - |
|
||||
| filterDone | 搜索完成函数 | function(val, list) val: 当前搜索值, list: 过滤后的数据 | - | - |
|
||||
| remoteSearch | 是否开启自定义搜索 (远程搜索) | boolean | true / false | false |
|
||||
| remoteSearch | 是否开启自定义搜索 (远程搜索) | boolean | true / false | false |
|
||||
| remoteMethod | 自定义搜索回调函数 | function(val, cb, show, pageIndex) val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码 | - | - |
|
||||
| direction | 下拉方向 | string | auto / up / down | auto |
|
||||
| style | 自定义样式 | object | - | { } |
|
||||
@ -25,30 +25,32 @@
|
||||
| paging | 是否开启自定义分页 | boolean | true / false | false |
|
||||
| pageSize | 分页条数 | int | - | 10 |
|
||||
| pageEmptyShow | 分页无数据是否显示 | boolean | true / false | true |
|
||||
| pageRemote | 是否开启远程分页 | boolean | true / false | true |
|
||||
| radio | 是否开启单选模式 | boolean | true / false | false |
|
||||
| pageRemote | 是否开启远程分页 | boolean | true / false | true |
|
||||
| radio | 是否开启单选模式 | boolean | true / false | false |
|
||||
| repeat | 是否开启重复性模式 | boolean | true / false | false |
|
||||
| clickClose | 是否点击选项后自动关闭下拉框 | boolean | true / false | false |
|
||||
| clickClose | 是否点击选项后自动关闭下拉框 | boolean | true / false | false |
|
||||
| prop | 自定义属性名称, 具体看下表 | object | - | |
|
||||
| theme | 主题配置, 具体看下表 | object | - | |
|
||||
| model | 模型, 多选的展示方式, 具体见下表 | object | - | |
|
||||
| theme | 主题配置, 具体看下表 | object | - | |
|
||||
| model | 模型, 多选的展示方式, 具体见下表 | object | - | |
|
||||
| iconfont | 自定义选中图标 | object | - | |
|
||||
| show | 展开下拉的回调 | function | - | - |
|
||||
| hide | 隐藏下拉的回调 | function | - | - |
|
||||
| template | 自定义渲染选项 | function({ item, sels, name, value }) | - | - |
|
||||
| on | 监听选中变化 | function({ arr, change, isAdd }) | - | - |
|
||||
| max | 设置多选选中上限 | int | - | 0 |
|
||||
| max | 设置多选选中上限 | int | - | 0 |
|
||||
| maxMethod | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值 | - | - |
|
||||
| name | 表单提交时的name | string | - | select |
|
||||
| layVerify | 表单验证, 同layui的lay-verify | string | - | '' |
|
||||
| layVerType | 表单验证, 同layui的lay-verType | string | - | '' |
|
||||
| layVerify | 表单验证, 同layui的lay-verify | string | - | '' |
|
||||
| layVerType | 表单验证, 同layui的lay-verType | string | - | '' |
|
||||
| layReqText | 表单验证, 同layui的lay-reqText | string | - | '' |
|
||||
| toolbar | 工具条, 具体看下表 | object | - | - |
|
||||
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
|
||||
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
|
||||
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
|
||||
| autoRow | 是否开启自动换行(选项过多时) | boolean | true / false | false |
|
||||
| size | 尺寸 | string | large / medium / small / mini | medium |
|
||||
| disabled | 是否禁用多选 | boolean | true / false | false |
|
||||
| create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null |
|
||||
| tree | 树形结构, 具体看下表 | object | - | - |
|
||||
| cascader | 级联结构, 具体看下表 | object | - | - |
|
||||
| tree | 树形结构, 具体看下表 | object | - | - |
|
||||
| cascader | 级联结构, 具体看下表 | object | - | - |
|
||||
|
||||
|
||||
### prop
|
||||
@ -56,7 +58,7 @@
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------- | ------------------------- | ---------- | -------- | ------------- |
|
||||
| name | 显示名称 | string | - | name |
|
||||
| value | 选中值, 当前多选唯一 | string | - | value |
|
||||
| value | 选中值, 当前多选唯一 | string | - | value |
|
||||
| selected | 是否选中 | string | - | selected |
|
||||
| disabled | 是否禁用 | string | - | disabled |
|
||||
| children | 分组children | string | - | children |
|
||||
@ -137,13 +139,24 @@ model: {
|
||||
```
|
||||
|
||||
|
||||
### iconfont
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ---------- | -------------------------------------------------------- | ---------- | ------------ | --------- |
|
||||
| select | 选中图标 | string | - | - |
|
||||
| unselect | 非选中图标 | string | - | - |
|
||||
| half | 半选图标 | string | - | - |
|
||||
| parent | 父节点图标, 值为hidden时, 隐藏 | string | - | - |
|
||||
|
||||
|
||||
|
||||
### toolbar
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ---------- | -------------------------------------------------------- | ---------- | ------------ | ------------------ |
|
||||
| show | 是否展示工具条 | boolean | true / false | false |
|
||||
| showIcon | 是否显示工具图标 | boolean | true / false | true |
|
||||
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | - | [ "ALL", "CLEAR" ] |
|
||||
| list | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选 | array | ALL, CLEAR, REVERSE | [ "ALL", "CLEAR" ] |
|
||||
|
||||
> 自定义方式
|
||||
|
||||
@ -175,6 +188,7 @@ list: [ "ALL", "CLEAR",
|
||||
| expandedKeys | 默认展开的节点数组, 为true时展开所有节点 | array / boolean | - | [ ] |
|
||||
| strict | 是否遵循严格父子结构 | boolean | true / false | true |
|
||||
| simple | 是否开启极简模式 | boolean | true / false | false |
|
||||
| nodeType | 标注节点类型的key | string | leaf: 叶子节点, parent: 父节点, half: 半选节点 | __node_type |
|
||||
|
||||
|
||||
### cascader
|
||||
@ -236,3 +250,6 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
|
||||
| reset | 重置为上一次的render状态 | - |
|
||||
| update | 更新多选选中, reset不保留 | (options: 见配置项) |
|
||||
| warning | 警告 | (color: 默认同theme.maxColor, sustain: 是否持续显示) |
|
||||
| getTreeValue | 树节点模式下获取数据, v1.2.0 新增 | (leafOnly: 是否只是叶子节点，默认值为 false, includeHalfChecked: 是否包含半选节点，默认值为 false) |
|
||||
| enable | 启用选项, disabled=false, v1.2.0 新增 | (array: 想要启用的选项数组) |
|
||||
| disable | 禁用用选项, disabled=true, v1.2.0 新增 | (array: 想要禁用的选项数组) |
|
||||
|
||||
@ -25,7 +25,7 @@ export default [{
|
||||
component: importVue('/changelog'),
|
||||
}, {
|
||||
path: '/add',
|
||||
name: 'QQ群: 660408068',
|
||||
name: 'QQ群: 1145047250',
|
||||
redirect: '/',
|
||||
}, {
|
||||
path: '/component',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "xm-select",
|
||||
"version": "1.1.9",
|
||||
"version": "1.2.0",
|
||||
"description": "始于Layui的select多选解决方案",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -56,6 +56,36 @@ class Framework extends Component{
|
||||
return sels;
|
||||
}
|
||||
|
||||
upDate(sels, enable){
|
||||
let { dataObj } = this.state;
|
||||
let { prop, tree, cascader } = this.props;
|
||||
let { value, disabled, children } = prop;
|
||||
sels.map(sel => dataObj[typeof sel === 'object' ? sel[value] : sel]).filter(a => a).forEach(item => {
|
||||
item[disabled] = !enable
|
||||
|
||||
//严格模式下操作
|
||||
if(tree.strict || cascader.strict){
|
||||
if(enable){//启用父节点, 向上父节点启用
|
||||
let parent = item
|
||||
while(parent){
|
||||
parent[disabled] = false;
|
||||
parent = parent.__node.parent
|
||||
}
|
||||
}
|
||||
//启用禁用节点 子节点启用禁用
|
||||
const upChild = (parent) => {
|
||||
parent[disabled] = !enable
|
||||
let child = parent[children];
|
||||
if(child && isArray(child)){
|
||||
child.forEach(c => upChild(c))
|
||||
}
|
||||
}
|
||||
upChild(item);
|
||||
}
|
||||
})
|
||||
this.setState({ dataObj })
|
||||
}
|
||||
|
||||
exchangeValue(arr, dataObj = this.state.dataObj){
|
||||
let list = arr.map(sel => typeof sel === 'object' ? { ...sel, __node: {} } : dataObj[sel]).filter(a => a)
|
||||
let filterGroup = true, { tree } = this.props;
|
||||
@ -71,14 +101,19 @@ class Framework extends Component{
|
||||
show = this.state.show;
|
||||
}
|
||||
|
||||
const { prop, tree } = this.props;
|
||||
const { prop, tree, cascader } = this.props;
|
||||
let changeData = this.exchangeValue(sels);
|
||||
if(tree.show && tree.strict){
|
||||
|
||||
//检测是否超选了
|
||||
if(this.checkMax(changeData, changeData)){
|
||||
return ;
|
||||
}
|
||||
|
||||
if(tree.show && tree.strict || cascader.show && cascader.strict){
|
||||
let data = this.state.data;
|
||||
this.clearAndReset(data, changeData);
|
||||
changeData = this.init({ data, prop }, true);
|
||||
}
|
||||
|
||||
this.resetSelectValue(changeData, changeData, true, listenOn);
|
||||
this.setState({ show })
|
||||
}
|
||||
@ -148,7 +183,7 @@ class Framework extends Component{
|
||||
this.setState({ tmpColor });
|
||||
}
|
||||
|
||||
treeHandler(sels, parent, change, type){
|
||||
treeHandler(sels, parent, change, type, changeStatus){
|
||||
const { value, selected, disabled, children, optgroup } = this.props.prop;
|
||||
let child = parent[children];
|
||||
child.filter(item => !(item[disabled] || item.__node.disabled)).forEach(item => {
|
||||
@ -169,37 +204,61 @@ class Framework extends Component{
|
||||
}
|
||||
}
|
||||
})
|
||||
let len = child.length;
|
||||
let slen = child.filter(i => sels.findIndex(sel => sel[value] === i[value]) !== -1 || i.__node.selected === true).length;
|
||||
parent.__node.selected = slen === len;
|
||||
parent.__node.half = slen > 0 && slen < len;
|
||||
if(changeStatus){
|
||||
let len = child.length;
|
||||
let slen = child.filter(i => sels.findIndex(sel => sel[value] === i[value]) !== -1 || i.__node.selected === true).length;
|
||||
parent.__node.selected = slen === len;
|
||||
parent.__node.half = slen > 0 && slen < len;
|
||||
}
|
||||
}
|
||||
|
||||
checkMax(item, sels){
|
||||
const { max, maxMethod, theme } = this.props
|
||||
//查看是否设置了多选上限
|
||||
let maxCount = toNum(max);
|
||||
if(maxCount > 0 && sels.length >= maxCount){
|
||||
this.updateBorderColor(theme.maxColor);
|
||||
//查看是否需要回调
|
||||
maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
|
||||
itemClick(item, itemSelected, itemDisabled, mandatoryDelete){
|
||||
|
||||
const { theme, prop, radio, repeat, clickClose, max, maxMethod, tree } = this.props
|
||||
let { sels } = this.state
|
||||
let sels = [ ...this.state.sels ]
|
||||
const { value, selected, disabled, children, optgroup } = prop
|
||||
|
||||
//如果是禁用状态, 不能进行操作
|
||||
if(itemDisabled) return;
|
||||
|
||||
if(item[optgroup] && tree.strict){
|
||||
let child = item[children], change = [], isAdd = true;
|
||||
let child = item[children], change = [], isAdd = true, handlerType;
|
||||
if(item.__node.selected){
|
||||
this.treeHandler(sels, item, change, 'del');
|
||||
handlerType = 'del';
|
||||
isAdd = false;
|
||||
}else if(item.__node.half){
|
||||
this.treeHandler(sels, item, change, 'half');
|
||||
handlerType = 'half';
|
||||
this.treeHandler(sels, item, change, handlerType);
|
||||
//无法操作禁用状态, 变成取消操作
|
||||
if(change.length === 0){
|
||||
this.treeHandler(sels, item, change, 'del');
|
||||
handlerType = 'del';
|
||||
isAdd = false;
|
||||
}
|
||||
}else{
|
||||
this.treeHandler(sels, item, change, 'add');
|
||||
handlerType = 'add';
|
||||
}
|
||||
if(handlerType != 'half'){
|
||||
this.treeHandler(sels, item, change, handlerType);
|
||||
}
|
||||
if(this.checkMax(change, change)){
|
||||
return ;
|
||||
}
|
||||
sels = [ ...this.state.sels ], change = [];
|
||||
this.treeHandler(sels, item, change, handlerType, true);
|
||||
|
||||
this.resetSelectValue(sels, change, isAdd);
|
||||
this.setState({ data: this.state.data })
|
||||
}else{
|
||||
@ -212,11 +271,7 @@ class Framework extends Component{
|
||||
}
|
||||
}else{
|
||||
//查看是否设置了多选上限
|
||||
let maxCount = toNum(max);
|
||||
if(maxCount > 0 && sels.length >= maxCount){
|
||||
this.updateBorderColor(theme.maxColor);
|
||||
//查看是否需要回调
|
||||
maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
|
||||
if(this.checkMax(item, sels)){
|
||||
return ;
|
||||
}
|
||||
|
||||
@ -395,7 +450,13 @@ class Framework extends Component{
|
||||
|
||||
return (
|
||||
<xm-select { ...xmSelectProps } >
|
||||
<input class="xm-select-default" lay-verify={ config.layVerify } lay-verType={ config.layVerType } name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
|
||||
<input class="xm-select-default"
|
||||
lay-verify={ config.layVerify }
|
||||
lay-verType={ config.layVerType }
|
||||
lay-reqText={ config.layReqText }
|
||||
name={ config.name }
|
||||
value={ sels.map(item => item[prop.value]).join(',') }
|
||||
></input>
|
||||
<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
|
||||
{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
|
||||
<Label { ...labelProps } ref={ ref => this.labelView = ref } />
|
||||
|
||||
@ -81,18 +81,28 @@ class Cascader extends Component{
|
||||
borderColor: theme.color,
|
||||
};
|
||||
|
||||
const isParent = item[children] && item[children].length > 0;
|
||||
const itemStyle = { backgroundColor: 'transparent' }
|
||||
const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
|
||||
const iconClass = ['xm-option-icon', (() => {
|
||||
//如果是半选状态，但是没有配置半选图标就用默认的
|
||||
if(half){
|
||||
return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0;
|
||||
const iconClass = (() => {
|
||||
if(isParent && config.iconfont.parent === 'hidden'){
|
||||
return 'xm-option-icon-hidden'
|
||||
}
|
||||
if(selected){
|
||||
return config.iconfont.select ? config.iconfont.select : 0;
|
||||
}
|
||||
return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0;
|
||||
})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : cascader.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
|
||||
return ['xm-option-icon', (() => {
|
||||
//如果是半选状态，但是没有配置半选图标就用默认的
|
||||
if(half){
|
||||
return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0;
|
||||
}
|
||||
if(isParent && config.iconfont.parent){
|
||||
return config.iconfont.parent + ' xm-custom-icon';
|
||||
}
|
||||
if(selected){
|
||||
return config.iconfont.select ? config.iconfont.select : 0;
|
||||
}
|
||||
return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0;
|
||||
})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : cascader.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
|
||||
})()
|
||||
|
||||
|
||||
if(item[value] === this.state.val){
|
||||
itemStyle.backgroundColor = theme.hover
|
||||
|
||||
@ -182,6 +182,9 @@ class General extends Component{
|
||||
}
|
||||
let val = data[index][value];
|
||||
this.setState({ val })
|
||||
//键盘选中时滚动到可视范围内
|
||||
let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
|
||||
opt && opt.scrollIntoView(false)
|
||||
}else
|
||||
//Down 键
|
||||
if(keyCode === 40){
|
||||
@ -192,6 +195,9 @@ class General extends Component{
|
||||
}
|
||||
let val = data[index][value];
|
||||
this.setState({ val })
|
||||
//键盘选中时滚动到可视范围内
|
||||
let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
|
||||
opt && opt.scrollIntoView(false)
|
||||
}else
|
||||
//Enter 键
|
||||
if(keyCode === 13){
|
||||
|
||||
@ -137,27 +137,45 @@ class Tree extends Component{
|
||||
}
|
||||
}
|
||||
|
||||
filterData(data, val){
|
||||
filterData(data, val, parentHidden){
|
||||
const { prop, filterMethod, tree } = this.props;
|
||||
const { children, optgroup, name, value } = prop;
|
||||
|
||||
data.forEach((item, index) => {
|
||||
//首先判断父节点的状态是显示还是隐藏
|
||||
let hiddenStatus = val ? !filterMethod(val, item, index, prop) : false;
|
||||
//严格模式下, 不计算父节点的状态
|
||||
let thisParentHidden;
|
||||
if(tree.strict){
|
||||
thisParentHidden = false;
|
||||
}else{//非严格模式下, 父节点显示, 子节点无条件显示
|
||||
thisParentHidden = parentHidden === false ? false : hiddenStatus;
|
||||
hiddenStatus = thisParentHidden
|
||||
}
|
||||
//如果包含了子节点
|
||||
if(item[optgroup]){
|
||||
let child = this.filterData(item[children], val);
|
||||
item.__node.hidn = val ? child.filter(c => !c.__node.hidn).length === 0 : false;
|
||||
if(!item.__node.hidn){
|
||||
//过滤出来子节点的数据
|
||||
let child = this.filterData(item[children], val, thisParentHidden);
|
||||
let childHiddenStatus = val ? child.filter(c => !c.__node.hidn).length === 0 : false;
|
||||
|
||||
//严格模式下子节点都隐藏了, 父节点也不显示
|
||||
if(tree.strict){
|
||||
hiddenStatus = childHiddenStatus;
|
||||
}else{//非严格模式, 父节点没有搜索到, 看看子节点有没有显示的
|
||||
hiddenStatus = thisParentHidden && childHiddenStatus;
|
||||
}
|
||||
|
||||
if(!hiddenStatus){//如果是显示状态
|
||||
let keys = this.state.expandedKeys;
|
||||
if(val && keys.findIndex(key => key === item[value]) === -1){
|
||||
keys.push(item[value]);
|
||||
this.setState({ expandedKeys: keys })
|
||||
}
|
||||
return
|
||||
}
|
||||
if(tree.strict){
|
||||
return
|
||||
}
|
||||
}
|
||||
item.__node.hidn = val ? !filterMethod(val, item, index, prop) : false;
|
||||
item.__node.hidn = hiddenStatus;
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
@ -198,10 +216,10 @@ class Tree extends Component{
|
||||
}
|
||||
|
||||
render(config, { expandedKeys }) {
|
||||
let { prop, empty, sels, theme, radio, template, data, tree, filterable, remoteSearch, searchTips } = config;
|
||||
let { prop, empty, sels, theme, radio, template, data, tree, filterable, remoteSearch, searchTips, iconfont } = config;
|
||||
let { name, value, disabled, children, optgroup } = prop;
|
||||
|
||||
const showIcon = config.model.icon != 'hidden';
|
||||
let showIcon = config.model.icon != 'hidden';
|
||||
const renderItem = (item, indent, expand) => {
|
||||
//是否被选中
|
||||
let selected = !!sels.find(sel => sel[value] == item[value]);
|
||||
@ -236,16 +254,24 @@ class Tree extends Component{
|
||||
dis && (itemStyle.backgroundColor = '#C2C2C2');
|
||||
}
|
||||
const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
|
||||
const iconClass = ['xm-option-icon', (() => {
|
||||
//如果是半选状态，但是没有配置半选图标就用默认的
|
||||
if(half){
|
||||
return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0;
|
||||
const iconClass = (() => {
|
||||
if(expand !== 0 && iconfont.parent === 'hidden'){
|
||||
return 'xm-option-icon-hidden'
|
||||
}
|
||||
if(selected){
|
||||
return config.iconfont.select ? config.iconfont.select : 0;
|
||||
}
|
||||
return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0;
|
||||
})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
|
||||
return ['xm-option-icon', (() => {
|
||||
//如果是半选状态，但是没有配置半选图标就用默认的
|
||||
if(half){
|
||||
return iconfont.half ? iconfont.half + ' xm-custom-icon' : 0;
|
||||
}
|
||||
if(expand !== 0 && iconfont.parent){
|
||||
return iconfont.parent + ' xm-custom-icon';
|
||||
}
|
||||
if(selected){
|
||||
return iconfont.select ? iconfont.select : 0;
|
||||
}
|
||||
return iconfont.unselect ? iconfont.unselect + ' xm-custom-icon' : 0;
|
||||
})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
|
||||
})()
|
||||
|
||||
const treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || (tree.lazy && item.__node.loading !== false)) ? 'xm-visible':'xm-hidden'].join(' ');
|
||||
|
||||
@ -321,7 +347,18 @@ class Tree extends Component{
|
||||
|
||||
//工具条操作
|
||||
function flat(list, array){
|
||||
array.forEach(item => item[optgroup] ? (!tree.strict && list.push(item), flat(list, item[children])) : list.push(item))
|
||||
//array.forEach(item => item[optgroup] ? (!tree.strict && list.push(item), flat(list, item[children])) : list.push(item))
|
||||
array.forEach(item => {
|
||||
if(item[optgroup]){
|
||||
//非严格模式, 如果隐藏父节点, 证明不可选
|
||||
if(!tree.strict && iconfont.parent !== 'hidden'){
|
||||
list.push(item)
|
||||
}
|
||||
flat(list, item[children])
|
||||
}else{
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
const toolbar = (
|
||||
<div class='xm-toolbar'>
|
||||
@ -333,7 +370,8 @@ class Tree extends Component{
|
||||
info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => {
|
||||
let list = [];
|
||||
flat(list, pageData);
|
||||
list = list.filter(item => !item[disabled])
|
||||
//过滤掉禁用状态的不操作, 隐藏状态的不操作
|
||||
list = list.filter(item => !item[disabled] && !item.__node.hidn)
|
||||
this.props.onReset(radio ? list.slice(0, 1) : mergeArr(list, sels, prop), 'treeData');
|
||||
} };
|
||||
}else if(tool === 'CLEAR'){
|
||||
@ -344,7 +382,7 @@ class Tree extends Component{
|
||||
info = { icon: 'xm-iconfont xm-icon-fanxuan', name, method: (pageData) => {
|
||||
let list = [];
|
||||
flat(list, pageData);
|
||||
list = list.filter(item => !item[disabled])
|
||||
list = list.filter(item => !item[disabled] && !item.__node.hidn)
|
||||
let selectedList = [];
|
||||
sels.forEach(item => {
|
||||
let index = list.findIndex(pageItem => pageItem[value] === item[value]);
|
||||
|
||||
@ -162,6 +162,88 @@ class xmOptions {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取选中的节点
|
||||
* leafOnly: 是否只是叶子节点，默认值为 false
|
||||
* includeHalfChecked: 是否包含半选节点，默认值为 false
|
||||
*/
|
||||
getTreeValue(leafOnly, includeHalfChecked){
|
||||
const { tree, cascader, prop } = this.options;
|
||||
const { value } = prop;
|
||||
|
||||
//如果不是树状结构, 直接使用getValue
|
||||
if(!(tree.show || cascader.show)){
|
||||
return this.getValue(leafOnly);
|
||||
}
|
||||
|
||||
//获得当前已经选中的数据
|
||||
let sels = childData[this.options.el].state.sels;
|
||||
|
||||
//存储选中的数据
|
||||
let list = [];
|
||||
|
||||
let nodeType = tree.nodeType;
|
||||
|
||||
const listPush = (item, type) => {
|
||||
if(!list.find(i => i[value] === item[value])){
|
||||
item = { ...item }
|
||||
item[nodeType] = type;
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < sels.length; i++){
|
||||
let node = { ...sels[i] };
|
||||
//首页先把子节点放入到数据中
|
||||
listPush(node, 'leaf');
|
||||
while(node = node.__node.parent){
|
||||
let { half, selected } = node.__node
|
||||
//如果想要父节点, 检测父节点是否为选中状态
|
||||
if(!leafOnly && selected){
|
||||
listPush(node, 'parent');
|
||||
}else
|
||||
//如果是需要半选状态, 并且处于半选状态
|
||||
if(includeHalfChecked && half && !selected){
|
||||
listPush(node, 'half');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let arr = delProp(list, prop.children, [ '__node' ]);;
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态启用一些选项
|
||||
*/
|
||||
enable(sels){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
if(sels.length === 0){
|
||||
return ;
|
||||
}
|
||||
childData[this.options.el].upDate(sels, true)
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态禁用一些选项
|
||||
*/
|
||||
disable(sels){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
if(sels.length === 0){
|
||||
return ;
|
||||
}
|
||||
childData[this.options.el].upDate(sels, false)
|
||||
return this;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default xmOptions;
|
||||
|
||||
@ -21,6 +21,8 @@ export default function (lan = 'zn') {
|
||||
layVerify: '',
|
||||
//验证类型
|
||||
layVerType: '',
|
||||
//验证提示
|
||||
layReqText: '',
|
||||
//尺寸
|
||||
size: 'medium',
|
||||
//是否禁用多选
|
||||
@ -103,6 +105,8 @@ export default function (lan = 'zn') {
|
||||
load: null,
|
||||
//是否开启极简模式
|
||||
simple: false,
|
||||
//标注节点类型的key
|
||||
nodeType: '__node_type',
|
||||
},
|
||||
//级联结构
|
||||
cascader: {
|
||||
@ -157,6 +161,7 @@ export default function (lan = 'zn') {
|
||||
select: '',
|
||||
unselect: '',
|
||||
half: '',
|
||||
parent: '',
|
||||
},
|
||||
// 展开下拉框
|
||||
show(){
|
||||
|
||||
@ -243,6 +243,9 @@ xm-select{
|
||||
color: unset;
|
||||
border: unset;
|
||||
}
|
||||
&-hidden{
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
&-icon.xm-icon-danx{
|
||||
border-radius: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user