Skip to content

Commit 060a2e8

Browse files
SuperHuZhiPengSuperHuZhiPeng
committed
[update] 新增cascadre组件
1 parent cc98d8b commit 060a2e8

File tree

22 files changed

+657
-6
lines changed

22 files changed

+657
-6
lines changed

‎.storybook/lang/locale/en.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,12 @@
337337
"title": "TextList",
338338
"scrollOneByOne": "Scroll One By One",
339339
"customCell": "Custom Cell"
340+
},
341+
"cascader": {
342+
"title": "Cascader"
343+
},
344+
"featureCascader": {
345+
"title": "FeatureCascader"
340346
}
341347
},
342348
"chartComponent": {

‎.storybook/lang/locale/zh.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,12 @@
337337
"title": "TextList 文本列表",
338338
"scrollOneByOne": "逐条滚动",
339339
"customCell": "自定义单元格"
340+
},
341+
"cascader": {
342+
"title": "Cascader 级联选择器"
343+
},
344+
"featureCascader": {
345+
"title": "FeatureCascader 要素级联选择器"
340346
}
341347
},
342348
"chartComponent": {

‎.storybook/useLib.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
Breadcrumb,
88
Button,
99
Card,
10+
Cascader,
11+
FeatureCascader,
1012
Checkbox,
1113
Collapse,
1214
CollapseCard,
@@ -110,6 +112,8 @@ Vue.use(Border);
110112
Vue.use(Breadcrumb);
111113
Vue.use(Button);
112114
Vue.use(Card);
115+
Vue.use(Cascader);
116+
Vue.use(FeatureCascader);
113117
Vue.use(Checkbox);
114118
Vue.use(Collapse);
115119
Vue.use(CollapseCard);

‎demo/mapboxgl/App.vue‎

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,12 @@
236236
></sm-time-slider>
237237
<sm-time-line v-bind="timeLine" style="position:absolute; top:300px;left:200px;z-index：100000"></sm-time-line>
238238
<sm-time-range v-bind="timeRange" style="position:absolute; top:500px;left:200px;z-index：100000"></sm-time-range>
239+
<div class="cascader">
240+
<sm-cascader :options="cascaderOptions"></sm-cascader>
241+
</div>
242+
<div class="feature-cascader">
243+
<sm-feature-cascader :config="featureCascaderConfig"></sm-feature-cascader>
244+
</div>
239245
</template>
240246

241247
<div class="changeTheme">
@@ -277,7 +283,73 @@ export default Vue.extend({
277283
{ label: '空地图', value: '17311606'},
278284
{ label: '相同source多layer', value: '1703080254'},
279285
],
280-
mapIdSelected: '617580084'
286+
mapIdSelected: '617580084',
287+
cascaderOptions: [
288+
{
289+
value: 'zhejiang',
290+
label: 'Zhejiang',
291+
children: [
292+
{
293+
value: 'hangzhou',
294+
label: 'Hangzhou',
295+
children: [
296+
{
297+
value: 'xihu',
298+
label: 'West Lake'
299+
}
300+
]
301+
}
302+
]
303+
},
304+
{
305+
value: 'jiangsu',
306+
label: 'Jiangsu',
307+
children: [
308+
{
309+
value: 'nanjing',
310+
label: 'Nanjing',
311+
children: [
312+
{
313+
value: 'zhonghuamen',
314+
label: 'Zhong Hua Men'
315+
}
316+
]
317+
}
318+
]
319+
}
320+
],
321+
featureCascaderConfig: {
322+
// 数据服务地址
323+
dataset: {
324+
url: "http://172.16.14.77:8090/iserver/services/data-quxian/rest/data",
325+
dataName: ["quxian:quxian"],
326+
type: 'iServer',
327+
},
328+
// 标识字段
329+
idField: "parent_cod",
330+
// 显示名称字段
331+
titleField: "parent_nam",
332+
children: {
333+
dataset: {
334+
url: "http://172.16.14.77:8090/iserver/services/data-quxian/rest/data",
335+
dataName: ["quxian:quxian"],
336+
type: 'iServer',
337+
},
338+
parentField: "parent_cod",
339+
idField: "admin_code",
340+
titleField: "division_n",
341+
children: {
342+
dataset: {
343+
url: "http://172.16.14.77:8090/iserver/services/data-township/rest/data",
344+
dataName: ["zhejiang_township:zhejiang_township"],
345+
type: 'iServer',
346+
},
347+
parentField: "parent_cod",
348+
idField: "code",
349+
titleField: "name"
350+
}
351+
}
352+
}
281353
}
282354
}
283355
});

‎docs/zh/api/common/feature-cascader.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# 数据级联组件
2+
3+
```vue
4+
<sm-feature-cascader :config="{
5+
dataset: {
6+
url: 'http://support.supermap.com.cn:8090/iserver/services/data-Jingjin/rest/data',
7+
dataName: ['Jingjin:BaseMap_P'],
8+
type: 'iServer'
9+
},
10+
idField: 'SmID',
11+
titleField: 'NAME',
12+
}"></sm-feature-cascader>
13+
```
14+
15+
### Attributes
16+
17+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
18+
| :------------------ | :------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | :------ |
19+
| config | 级联数据配置 | Object | - | - | - |
20+
| popupClassName | 自定义浮层类名 | string | - | - |
21+
| changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会触发change事件 | string | - | false |
22+
| value | 指定选中项 | array | - | - |
23+
24+
25+
> 支持[主题混入参数](/zh/api/mixin/mixin.md#theme)和[定时刷新混入参数](/zh/api/mixin/mixin.md#timer)
26+
27+
### config
28+
29+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
30+
| :----------------- | :----------------- | :------ | :----- | :----- |
31+
| idField | 标识字段 | string | - | - | - |
32+
| titleField | 显示字段 | string | - | - | - |
33+
| parentField | 与上一级关联字段，第一级不需要，其余级别都需要 | string | - | - | - |
34+
| dataset | 数据集信息 | [iServerDataParameter](/zh/api/common-types/common-types.md#iserverdataparameter) | - | - | - |
35+
| children | 下一级配置，和当前参数一致 | object | - | - | - |
36+
37+
38+
### Events
39+
40+
| name | 说明 | 回调参数 |
41+
| :--- | :----------------- | :------------------------------------------------------------------------------- |
42+
| change | 选择完成后的回调 | function(value, feature) |
43+

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@supermapgis/vue-iclient",
3-
"version": "12.1.0-dev",
3+
"version": "12.0.1-r",
44
"description": "SuperMap iClient for Vue.js",
55
"homepage": "https://iclient.supermap.io",
66
"scripts": {
@@ -47,7 +47,6 @@
4747
"ant-design-vue": "1.7.2",
4848
"axios": "^1.7.4",
4949
"babel-plugin-import": "^1.13.5",
50-
"canvg": "~3.0.10",
5150
"clipboard": "^2.0.6",
5251
"colorcolor": "^1.1.1",
5352
"css-element-queries": "^1.2.0",
@@ -75,6 +74,7 @@
7574
"lodash.mergewith": "^4.6.2",
7675
"lodash.orderby": "^4.6.0",
7776
"lodash.tonumber": "^4.0.3",
77+
"lodash.uniqby": "^4.7.0",
7878
"lodash.uniqueid": "^4.0.1",
7979
"mapbox-gl-compare": "^0.4.0",
8080
"mapv": "^2.0.34",
@@ -104,7 +104,7 @@
104104
"vue-types": "^2.0.2",
105105
"vue-videojs7": "^0.1.5",
106106
"wwobjloader2": "4.0.0",
107-
"xlsx": "0.18.5",
107+
"xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz",
108108
"xml-js": "1.6.11"
109109
},
110110
"devDependencies": {
@@ -149,7 +149,7 @@
149149
"babel-plugin-transform-vue-jsx": "^3.7.0",
150150
"babel-register": "^6.22.0",
151151
"chalk": "^2.4.2",
152-
"chromedriver": "^2.46.0",
152+
"chromedriver": "^119.0.1",
153153
"copy-webpack-plugin": "^4.6.0",
154154
"core-js": "^2.6.5",
155155
"cross-env": "^7.0.3",

‎src/common/cascader/Cascader.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import Cascader from 'ant-design-vue/es/cascader';
3+
import Theme from 'vue-iclient/src/common/_mixin/Theme';
4+
import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
5+
6+
export const cascaderProps = Cascader.props;
7+
8+
export default {
9+
name: 'SmCascader',
10+
defaultComponent: Cascader,
11+
mixins: [Theme, AntdRender],
12+
inheritAttrs: false,
13+
props: cascaderProps
14+
};
15+
</script>

‎src/common/cascader/__tests__/Cascader.spec.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { mount } from '@vue/test-utils';
2+
import SmCascader from 'vue-iclient/src/common/cascader/Cascader.vue';
3+
4+
5+
describe('Cascader.vue', () => {
6+
let wrapper;
7+
const propsData = {
8+
options: [
9+
{
10+
value: 'zhejiang',
11+
label: 'Zhejiang',
12+
children: [
13+
{
14+
value: 'hangzhou',
15+
label: 'Hangzhou',
16+
children: [
17+
{
18+
value: 'xihu',
19+
label: 'West Lake'
20+
}
21+
]
22+
}
23+
]
24+
},
25+
{
26+
value: 'jiangsu',
27+
label: 'Jiangsu',
28+
children: [
29+
{
30+
value: 'nanjing',
31+
label: 'Nanjing',
32+
children: [
33+
{
34+
value: 'zhonghuamen',
35+
label: 'Zhong Hua Men'
36+
}
37+
]
38+
}
39+
]
40+
}
41+
],
42+
changeOnSelect: true
43+
};
44+
beforeEach(() => {
45+
wrapper = null;
46+
});
47+
48+
afterEach(() => {
49+
if (wrapper) {
50+
wrapper.destroy();
51+
}
52+
});
53+
54+
it('render default correctly', async () => {
55+
wrapper = mount(SmCascader, {propsData});
56+
expect(wrapper.find('.sm-component-cascader-picker').exists()).toBe(true);
57+
expect(wrapper.vm.changeOnSelect).toBe(true);
58+
});
59+
60+
it('click', async () => {
61+
const changeFn = jest.fn();
62+
const value = ['zhejiang', 'hangzhou'];
63+
wrapper = mount(SmCascader, {propsData: {...propsData, change: changeFn}});
64+
wrapper.vm.$on('change', changeFn);
65+
wrapper.vm.$emit('change', value);
66+
await wrapper.vm.$nextTick();
67+
expect(changeFn).toHaveBeenCalledWith(value);
68+
});
69+
});

‎src/common/cascader/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Cascader from './Cascader';
2+
import init from 'vue-iclient/src/init';
3+
4+
Cascader.install = function(Vue, opts) {
5+
init(Vue, opts);
6+
Vue.component(Cascader.options ? Cascader.options.name : Cascader.name, Cascader);
7+
};
8+
9+
export default Cascader;

‎src/common/cascader/style/cascader.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import '../../_utils/style/mixins/mixins.scss';
2+
@import '../../_utils/style/theme/theme.scss';
3+
4+
@include b(cascader) {
5+
$prefix: &;
6+
7+
@include e(menu, '-') {
8+
$prefix-menu: &;
9+
10+
&-item {
11+
color: $text-color-active;
12+
13+
&:hover:not(&-disabled) {
14+
background-color: $select-item-hover-bg;
15+
}
16+
17+
&-active:hover:not(&-disabled),
18+
&-active:not(&-disabled) {
19+
font-weight: normal;
20+
background-color: $select-item-selected-bg;
21+
color: $select-item-selected-color;
22+
}
23+
&-expand &-expand-icon {
24+
color: $text-color-secondary;
25+
}
26+
}
27+
}
28+
}

0 commit comments

Comments
 (0)