mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
chore: input-city chained-select 单测补充 (#5777)
* input-city * chained-select * add
This commit is contained in:
sansiro
GitHub
parent
08536ab30f
commit
59339030da
@ -243,6 +243,60 @@ exports[`Renderer:chained-select 1`] = `
|
|||||||
class="cxd-Select cxd-Select--inline"
|
class="cxd-Select cxd-Select--inline"
|
||||||
role="combobox"
|
role="combobox"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-value"
|
||||||
|
>
|
||||||
|
D 2
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-arrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-right-arrow-bold"
|
||||||
|
icon="right-arrow-bold"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-labelledby="downshift-4-label"
|
||||||
|
class="cxd-Select cxd-Select--inline"
|
||||||
|
role="combobox"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-value"
|
||||||
|
>
|
||||||
|
C 3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-arrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-right-arrow-bold"
|
||||||
|
icon="right-arrow-bold"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-labelledby="downshift-5-label"
|
||||||
|
aria-owns="downshift-5-menu"
|
||||||
|
class="cxd-Select cxd-Select--inline is-opened has-popover"
|
||||||
|
role="combobox"
|
||||||
|
style="position: relative;"
|
||||||
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="cxd-Select-valueWrap"
|
class="cxd-Select-valueWrap"
|
||||||
@ -261,6 +315,102 @@ exports[`Renderer:chained-select 1`] = `
|
|||||||
icon="right-arrow-bold"
|
icon="right-arrow-bold"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-PopOver cxd-Select-popover cxd-PopOver--leftBottomLeftTop"
|
||||||
|
style="display: block; width: auto; left: 0px; top: 0px; position: relative;"
|
||||||
|
theme="cxd"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-PopOver-overlay"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-menu"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-noResult"
|
||||||
|
>
|
||||||
|
未找到任何结果
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="resize-sensor"
|
||||||
|
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-expand"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-shrink"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-appear"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="resize-sensor"
|
||||||
|
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-expand"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-shrink"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-appear"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,202 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Renderer:city 1`] = `
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
|
||||||
style="position: relative;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="cxd-Panel-heading"
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
class="cxd-Panel-title"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="cxd-TplField"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
The form
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="cxd-Panel-body"
|
|
||||||
>
|
|
||||||
<form
|
|
||||||
class="cxd-Form cxd-Form--normal"
|
|
||||||
novalidate=""
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
style="display: none;"
|
|
||||||
type="submit"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="cxd-Form-item cxd-Form-item--normal"
|
|
||||||
data-role="form-item"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="cxd-Form-label"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
<span
|
|
||||||
class="cxd-TplField"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
city
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
class="cxd-CityPicker"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-haspopup="listbox"
|
|
||||||
aria-labelledby="downshift-0-label"
|
|
||||||
class="cxd-Select"
|
|
||||||
role="combobox"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="cxd-Select-valueWrap"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="cxd-Select-value"
|
|
||||||
>
|
|
||||||
北京市
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
class="cxd-Select-clear"
|
|
||||||
>
|
|
||||||
<icon-mock
|
|
||||||
classname="icon icon-close-small"
|
|
||||||
icon="close-small"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<span
|
|
||||||
class="cxd-Select-arrow"
|
|
||||||
>
|
|
||||||
<icon-mock
|
|
||||||
classname="icon icon-right-arrow-bold"
|
|
||||||
icon="right-arrow-bold"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-haspopup="listbox"
|
|
||||||
aria-labelledby="downshift-1-label"
|
|
||||||
class="cxd-Select"
|
|
||||||
role="combobox"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="cxd-Select-valueWrap"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="cxd-Select-value"
|
|
||||||
>
|
|
||||||
北京市市辖区
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
class="cxd-Select-clear"
|
|
||||||
>
|
|
||||||
<icon-mock
|
|
||||||
classname="icon icon-close-small"
|
|
||||||
icon="close-small"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<span
|
|
||||||
class="cxd-Select-arrow"
|
|
||||||
>
|
|
||||||
<icon-mock
|
|
||||||
classname="icon icon-right-arrow-bold"
|
|
||||||
icon="right-arrow-bold"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-haspopup="listbox"
|
|
||||||
aria-labelledby="downshift-2-label"
|
|
||||||
class="cxd-Select is-focused"
|
|
||||||
role="combobox"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="cxd-Select-valueWrap"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="cxd-Select-value"
|
|
||||||
>
|
|
||||||
东城区
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
class="cxd-Select-clear"
|
|
||||||
>
|
|
||||||
<icon-mock
|
|
||||||
classname="icon icon-close-small"
|
|
||||||
icon="close-small"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<span
|
|
||||||
class="cxd-Select-arrow"
|
|
||||||
>
|
|
||||||
<icon-mock
|
|
||||||
classname="icon icon-right-arrow-bold"
|
|
||||||
icon="right-arrow-bold"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="resize-sensor"
|
|
||||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
|
||||||
>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="resize-sensor-expand"
|
|
||||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
|
||||||
>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="resize-sensor-shrink"
|
|
||||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
|
||||||
>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="resize-sensor-appear"
|
|
||||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -0,0 +1,952 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Renderer:inputCity 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="cxd-Page"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-main"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-heading"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="cxd-Panel-title"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
表单
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-body"
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
class="cxd-Form cxd-Form--horizontal"
|
||||||
|
novalidate=""
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="display: none;"
|
||||||
|
type="submit"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Form-item cxd-Form-item--horizontal"
|
||||||
|
data-role="form-item"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cxd-Form-label cxd-Form-itemColumn--normal"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
城市
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="cxd-Form-value"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-CityPicker"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-labelledby="downshift-0-label"
|
||||||
|
class="cxd-Select is-focused"
|
||||||
|
role="combobox"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-value"
|
||||||
|
>
|
||||||
|
北京市
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="cxd-Select-clear"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-close-small"
|
||||||
|
icon="close-small"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-arrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-right-arrow-bold"
|
||||||
|
icon="right-arrow-bold"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-labelledby="downshift-1-label"
|
||||||
|
class="cxd-Select"
|
||||||
|
role="combobox"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-value"
|
||||||
|
>
|
||||||
|
北京市市辖区
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="cxd-Select-clear"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-close-small"
|
||||||
|
icon="close-small"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-arrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-right-arrow-bold"
|
||||||
|
icon="right-arrow-bold"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-labelledby="downshift-2-label"
|
||||||
|
class="cxd-Select"
|
||||||
|
role="combobox"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-value"
|
||||||
|
>
|
||||||
|
海淀区
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="cxd-Select-clear"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-close-small"
|
||||||
|
icon="close-small"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-arrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-right-arrow-bold"
|
||||||
|
icon="right-arrow-bold"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-footerWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Submit
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="resize-sensor"
|
||||||
|
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-expand"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-shrink"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-appear"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Renderer:inputCity with searchable: open select 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="cxd-Page"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-main"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Page-body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
|
||||||
|
style="position: relative;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-heading"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="cxd-Panel-title"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
表单
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-body"
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
class="cxd-Form cxd-Form--horizontal"
|
||||||
|
novalidate=""
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="display: none;"
|
||||||
|
type="submit"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Form-item cxd-Form-item--horizontal"
|
||||||
|
data-role="form-item"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cxd-Form-label cxd-Form-itemColumn--normal"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="cxd-TplField"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
城市
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="cxd-Form-value"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-CityPicker"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-labelledby="downshift-3-label"
|
||||||
|
aria-owns="downshift-3-menu"
|
||||||
|
class="cxd-Select cxd-Select--searchable is-opened has-popover"
|
||||||
|
role="combobox"
|
||||||
|
style="position: relative;"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-valueWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-placeholder"
|
||||||
|
>
|
||||||
|
请选择
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-arrow"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-right-arrow-bold"
|
||||||
|
icon="right-arrow-bold"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="cxd-PopOver cxd-Select-popover cxd-PopOver--leftBottomLeftTop"
|
||||||
|
style="display: block; width: auto; left: 0px; top: 0px; position: relative;"
|
||||||
|
theme="cxd"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-PopOver-overlay"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-menu"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Select-input"
|
||||||
|
>
|
||||||
|
<icon-mock
|
||||||
|
classname="icon icon-search"
|
||||||
|
icon="search"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-controls="downshift-3-menu"
|
||||||
|
aria-labelledby="downshift-3-label"
|
||||||
|
autocomplete="off"
|
||||||
|
id="downshift-3-input"
|
||||||
|
placeholder="搜索"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-0"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="北京市"
|
||||||
|
>
|
||||||
|
北京市
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-1"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="天津市"
|
||||||
|
>
|
||||||
|
天津市
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-2"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="河北省"
|
||||||
|
>
|
||||||
|
河北省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-3"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="山西省"
|
||||||
|
>
|
||||||
|
山西省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-4"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="内蒙古自治区"
|
||||||
|
>
|
||||||
|
内蒙古自治区
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-5"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="辽宁省"
|
||||||
|
>
|
||||||
|
辽宁省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-6"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="吉林省"
|
||||||
|
>
|
||||||
|
吉林省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-7"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="黑龙江省"
|
||||||
|
>
|
||||||
|
黑龙江省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-8"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="上海市"
|
||||||
|
>
|
||||||
|
上海市
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-9"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="江苏省"
|
||||||
|
>
|
||||||
|
江苏省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-10"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="浙江省"
|
||||||
|
>
|
||||||
|
浙江省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-11"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="安徽省"
|
||||||
|
>
|
||||||
|
安徽省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-12"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="福建省"
|
||||||
|
>
|
||||||
|
福建省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-13"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="江西省"
|
||||||
|
>
|
||||||
|
江西省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-14"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="山东省"
|
||||||
|
>
|
||||||
|
山东省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-15"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="河南省"
|
||||||
|
>
|
||||||
|
河南省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-16"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="湖北省"
|
||||||
|
>
|
||||||
|
湖北省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-17"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="湖南省"
|
||||||
|
>
|
||||||
|
湖南省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-18"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="广东省"
|
||||||
|
>
|
||||||
|
广东省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-19"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="广西壮族自治区"
|
||||||
|
>
|
||||||
|
广西壮族自治区
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-20"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="海南省"
|
||||||
|
>
|
||||||
|
海南省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-21"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="重庆市"
|
||||||
|
>
|
||||||
|
重庆市
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-22"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="四川省"
|
||||||
|
>
|
||||||
|
四川省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-23"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="贵州省"
|
||||||
|
>
|
||||||
|
贵州省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-24"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="云南省"
|
||||||
|
>
|
||||||
|
云南省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-25"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="西藏自治区"
|
||||||
|
>
|
||||||
|
西藏自治区
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-26"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="陕西省"
|
||||||
|
>
|
||||||
|
陕西省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-27"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="甘肃省"
|
||||||
|
>
|
||||||
|
甘肃省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-28"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="青海省"
|
||||||
|
>
|
||||||
|
青海省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-29"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="宁夏回族自治区"
|
||||||
|
>
|
||||||
|
宁夏回族自治区
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-30"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="新疆维吾尔自治区"
|
||||||
|
>
|
||||||
|
新疆维吾尔自治区
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-31"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="台湾省"
|
||||||
|
>
|
||||||
|
台湾省
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-32"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="香港特别行政区"
|
||||||
|
>
|
||||||
|
香港特别行政区
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-selected="false"
|
||||||
|
class="cxd-Select-option"
|
||||||
|
id="downshift-3-item-33"
|
||||||
|
role="option"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="cxd-Select-option-content"
|
||||||
|
title="澳门特别行政区"
|
||||||
|
>
|
||||||
|
澳门特别行政区
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="resize-sensor"
|
||||||
|
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-expand"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-shrink"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-appear"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="resize-sensor"
|
||||||
|
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-expand"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-shrink"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-appear"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-footerWrap"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="cxd-Panel-btnToolbar cxd-Panel-footer"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="cxd-Button cxd-Button--primary cxd-Button--size-default"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Submit
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="resize-sensor"
|
||||||
|
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-expand"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-shrink"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||||
|
>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="resize-sensor-appear"
|
||||||
|
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,4 +1,9 @@
|
|||||||
import React = require('react');
|
/**
|
||||||
|
* 组件名称：Button-Toolbar 按钮工具栏
|
||||||
|
* 单测内容：
|
||||||
|
* 1. 基础使用
|
||||||
|
*/
|
||||||
|
|
||||||
import {render, cleanup, fireEvent} from '@testing-library/react';
|
import {render, cleanup, fireEvent} from '@testing-library/react';
|
||||||
import '../../../src';
|
import '../../../src';
|
||||||
import {render as amisRender} from '../../../src';
|
import {render as amisRender} from '../../../src';
|
||||||
|
|||||||
@ -1,7 +1,13 @@
|
|||||||
import React = require('react');
|
/**
|
||||||
|
* 组件名称：Chained-Select 链式下拉框
|
||||||
|
* 单测内容：
|
||||||
|
* 1. 基础使用
|
||||||
|
*/
|
||||||
|
|
||||||
import {
|
import {
|
||||||
render,
|
render,
|
||||||
waitFor,
|
waitFor,
|
||||||
|
fireEvent,
|
||||||
waitForElementToBeRemoved
|
waitForElementToBeRemoved
|
||||||
} from '@testing-library/react';
|
} from '@testing-library/react';
|
||||||
import '../../../src';
|
import '../../../src';
|
||||||
@ -9,6 +15,52 @@ import {render as amisRender} from '../../../src';
|
|||||||
import {makeEnv, wait} from '../../helper';
|
import {makeEnv, wait} from '../../helper';
|
||||||
|
|
||||||
test('Renderer:chained-select', async () => {
|
test('Renderer:chained-select', async () => {
|
||||||
|
const fetcher = jest.fn().mockImplementation((config: any) => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
const level = parseInt(config.query.level, 10) || 0;
|
||||||
|
const maxLevel = parseInt(config.query.maxLevel, 10) || 0;
|
||||||
|
if (level >= maxLevel) {
|
||||||
|
resolve({
|
||||||
|
status: 200,
|
||||||
|
headers: {},
|
||||||
|
data: {
|
||||||
|
status: 0,
|
||||||
|
data: null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
resolve({
|
||||||
|
status: 200,
|
||||||
|
headers: {},
|
||||||
|
data: {
|
||||||
|
status: 0,
|
||||||
|
msg: '',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
label: `A ${level}`,
|
||||||
|
value: 'a'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: `B ${level}`,
|
||||||
|
value: 'b'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: `C ${level}`,
|
||||||
|
value: 'c'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: `D ${level}`,
|
||||||
|
value: 'd'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
const {container, findByText, getByText, getByTestId} = render(
|
const {container, findByText, getByText, getByTestId} = render(
|
||||||
amisRender(
|
amisRender(
|
||||||
{
|
{
|
||||||
@ -20,68 +72,51 @@ test('Renderer:chained-select', async () => {
|
|||||||
name: 'select3',
|
name: 'select3',
|
||||||
type: 'chained-select',
|
type: 'chained-select',
|
||||||
label: '级联下拉',
|
label: '级联下拉',
|
||||||
source:
|
source: '/api/xxx?parentId=$parentId&level=$level&maxLevel=4',
|
||||||
'/api/mock2/options/chainedOptions?parentId=$parentId&level=$level&maxLevel=4',
|
|
||||||
value: 'a,b'
|
value: 'a,b'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{},
|
{},
|
||||||
makeEnv({
|
makeEnv({
|
||||||
async fetcher(config: any): Promise<any> {
|
fetcher
|
||||||
const level = parseInt(config.query.level, 10) || 0;
|
|
||||||
const maxLevel = parseInt(config.query.maxLevel, 10) || 0;
|
|
||||||
if (level >= maxLevel) {
|
|
||||||
return {
|
|
||||||
status: 200,
|
|
||||||
headers: {},
|
|
||||||
data: {
|
|
||||||
status: 0,
|
|
||||||
data: null
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
status: 200,
|
|
||||||
headers: {},
|
|
||||||
data: {
|
|
||||||
status: 0,
|
|
||||||
msg: '',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
label: `A ${level}`,
|
|
||||||
value: 'a'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
label: `B ${level}`,
|
|
||||||
value: 'b'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
label: `C ${level}`,
|
|
||||||
value: 'c'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
label: `D ${level}`,
|
|
||||||
value: 'd'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
|
expect(fetcher).toBeCalledTimes(3);
|
||||||
|
expect(fetcher.mock.calls[2][0].query).toMatchObject({
|
||||||
|
parentId: 'b',
|
||||||
|
level: 2,
|
||||||
|
maxLevel: '4'
|
||||||
|
});
|
||||||
expect(getByText('B 1')).toBeInTheDocument();
|
expect(getByText('B 1')).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
container.querySelector('[data-testid="spinner"]')
|
container.querySelector('[data-testid="spinner"]')
|
||||||
).not.toBeInTheDocument();
|
).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
fireEvent.click(getByText('请选择'));
|
||||||
|
expect(getByText('D 2')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('D 2'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(fetcher).toBeCalledTimes(4);
|
||||||
|
expect(fetcher.mock.calls[3][0].query).toMatchObject({
|
||||||
|
parentId: 'd',
|
||||||
|
level: 3,
|
||||||
|
maxLevel: '4'
|
||||||
|
});
|
||||||
|
|
||||||
|
fireEvent.click(getByText('请选择'));
|
||||||
|
expect(getByText('C 3')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('C 3'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(fetcher).toBeCalledTimes(5);
|
||||||
|
fireEvent.click(getByText('请选择'));
|
||||||
|
expect(getByText('未找到任何结果')).toBeInTheDocument();
|
||||||
|
|
||||||
expect(container).toMatchSnapshot();
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,43 +0,0 @@
|
|||||||
import React = require('react');
|
|
||||||
import {render, fireEvent, waitFor} from '@testing-library/react';
|
|
||||||
import '../../../src';
|
|
||||||
import {render as amisRender} from '../../../src';
|
|
||||||
import {makeEnv, wait} from '../../helper';
|
|
||||||
|
|
||||||
test('Renderer:city', async () => {
|
|
||||||
const {container, getByText, findByText} = render(
|
|
||||||
amisRender(
|
|
||||||
{
|
|
||||||
type: 'form',
|
|
||||||
api: '/api/xxx',
|
|
||||||
controls: [
|
|
||||||
{
|
|
||||||
type: 'city',
|
|
||||||
name: 'a',
|
|
||||||
label: 'city',
|
|
||||||
allowDistrict: true,
|
|
||||||
allowCity: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
title: 'The form',
|
|
||||||
actions: []
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
makeEnv({})
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
getByText('请选择');
|
|
||||||
});
|
|
||||||
|
|
||||||
fireEvent.click(getByText('请选择'));
|
|
||||||
fireEvent.click(getByText('北京市'));
|
|
||||||
fireEvent.click(getByText('请选择'));
|
|
||||||
fireEvent.click(getByText('北京市市辖区'));
|
|
||||||
fireEvent.click(getByText('请选择'));
|
|
||||||
fireEvent.click(getByText('东城区'));
|
|
||||||
|
|
||||||
await wait(500);
|
|
||||||
expect(container).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
235
packages/amis/__tests__/renderers/Form/inputCity.test.tsx
Normal file
235
packages/amis/__tests__/renderers/Form/inputCity.test.tsx
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
/**
|
||||||
|
* 组件名称：InputCity 城市选择器
|
||||||
|
* 单测内容：
|
||||||
|
* 1. 基础使用
|
||||||
|
* 2. searchable
|
||||||
|
* 3. allowDistrict & allowCity
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
render,
|
||||||
|
fireEvent,
|
||||||
|
cleanup,
|
||||||
|
getByText,
|
||||||
|
within,
|
||||||
|
waitFor
|
||||||
|
} from '@testing-library/react';
|
||||||
|
import '../../../src';
|
||||||
|
import {render as amisRender} from '../../../src';
|
||||||
|
import {makeEnv, wait} from '../../helper';
|
||||||
|
|
||||||
|
const setup = async (items: any[] = []) => {
|
||||||
|
const onSubmit = jest.fn();
|
||||||
|
const utils = render(
|
||||||
|
amisRender(
|
||||||
|
{
|
||||||
|
type: 'page',
|
||||||
|
body: {
|
||||||
|
type: 'form',
|
||||||
|
submitText: 'Submit',
|
||||||
|
api: '/api/mock/saveForm?waitSeconds=1',
|
||||||
|
mode: 'horizontal',
|
||||||
|
body: items
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{onSubmit},
|
||||||
|
makeEnv()
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const submitBtn = utils.container.querySelector(
|
||||||
|
'button[type="submit"]'
|
||||||
|
) as HTMLElement;
|
||||||
|
|
||||||
|
return {
|
||||||
|
onSubmit,
|
||||||
|
submitBtn,
|
||||||
|
...utils,
|
||||||
|
rerender: (items: any[]) =>
|
||||||
|
utils.rerender(
|
||||||
|
amisRender(
|
||||||
|
{
|
||||||
|
type: 'page',
|
||||||
|
body: {
|
||||||
|
type: 'form',
|
||||||
|
submitText: 'Submit',
|
||||||
|
api: '/api/mock/saveForm?waitSeconds=1',
|
||||||
|
mode: 'horizontal',
|
||||||
|
body: items
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{onSubmit},
|
||||||
|
makeEnv()
|
||||||
|
)
|
||||||
|
)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 1. 基础使用
|
||||||
|
test('Renderer:inputCity', async () => {
|
||||||
|
const {container, getByText, onSubmit, submitBtn} = await setup([
|
||||||
|
{
|
||||||
|
name: 'city',
|
||||||
|
type: 'input-city',
|
||||||
|
label: '城市'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
await wait(100);
|
||||||
|
|
||||||
|
const select = container.querySelector('.cxd-CityPicker > .cxd-Select')!;
|
||||||
|
expect(select).toBeInTheDocument();
|
||||||
|
fireEvent.click(select);
|
||||||
|
expect(getByText('北京市')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('北京市'));
|
||||||
|
await wait(100);
|
||||||
|
fireEvent.click(submitBtn);
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(onSubmit).toBeCalled();
|
||||||
|
expect(onSubmit.mock.calls[0][0]).toMatchObject({
|
||||||
|
city: '110000'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const select2 = container.querySelector(
|
||||||
|
'.cxd-CityPicker > .cxd-Select:nth-child(2)'
|
||||||
|
)!;
|
||||||
|
expect(select2).toBeInTheDocument();
|
||||||
|
fireEvent.click(select2);
|
||||||
|
expect(getByText('北京市市辖区')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('北京市市辖区'));
|
||||||
|
await wait(100);
|
||||||
|
fireEvent.click(submitBtn);
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(onSubmit).toBeCalledTimes(2);
|
||||||
|
expect(onSubmit.mock.calls[1][0]).toMatchObject({
|
||||||
|
city: '110100'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const select3 = container.querySelector(
|
||||||
|
'.cxd-CityPicker > .cxd-Select:nth-child(3)'
|
||||||
|
)!;
|
||||||
|
expect(select3).toBeInTheDocument();
|
||||||
|
fireEvent.click(select3);
|
||||||
|
expect(getByText('海淀区')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('海淀区'));
|
||||||
|
await wait(100);
|
||||||
|
fireEvent.click(submitBtn);
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(onSubmit).toBeCalledTimes(3);
|
||||||
|
expect(onSubmit.mock.calls[2][0]).toMatchObject({
|
||||||
|
city: '110108'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. searchable
|
||||||
|
test('Renderer:inputCity with searchable', async () => {
|
||||||
|
const {container, getByText, onSubmit, submitBtn, getByTitle} = await setup([
|
||||||
|
{
|
||||||
|
name: 'city',
|
||||||
|
type: 'input-city',
|
||||||
|
label: '城市',
|
||||||
|
searchable: true
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
await wait(100);
|
||||||
|
|
||||||
|
const select = container.querySelector('.cxd-CityPicker > .cxd-Select')!;
|
||||||
|
expect(select).toBeInTheDocument();
|
||||||
|
fireEvent.click(select);
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(container).toMatchSnapshot('open select');
|
||||||
|
|
||||||
|
const input = select.querySelector('.cxd-Select-input input')!;
|
||||||
|
expect(input).toBeInTheDocument();
|
||||||
|
|
||||||
|
fireEvent.change(input, {target: {value: '山'}});
|
||||||
|
await wait(100);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
select.querySelectorAll('.cxd-Select-menu > .cxd-Select-option')!.length
|
||||||
|
).toBe(2);
|
||||||
|
expect(
|
||||||
|
await within(select as HTMLElement).getByTitle('山东省')
|
||||||
|
).toBeInTheDocument();
|
||||||
|
expect(
|
||||||
|
await within(select as HTMLElement).getByTitle('山西省')
|
||||||
|
).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. allowDistrict & allowCity
|
||||||
|
test('Renderer:inputCity with allowDistrict & allowCity', async () => {
|
||||||
|
const {container, getByText, onSubmit, submitBtn, getByTitle, rerender} =
|
||||||
|
await setup([
|
||||||
|
{
|
||||||
|
name: 'city',
|
||||||
|
type: 'input-city',
|
||||||
|
label: '城市',
|
||||||
|
allowDistrict: false,
|
||||||
|
allowCity: false
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
await wait(100);
|
||||||
|
|
||||||
|
const select = container.querySelector('.cxd-CityPicker > .cxd-Select')!;
|
||||||
|
expect(select).toBeInTheDocument();
|
||||||
|
fireEvent.click(select);
|
||||||
|
expect(getByText('北京市')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('北京市'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(
|
||||||
|
container.querySelector('.cxd-CityPicker > .cxd-Select:nth-child(2)')!
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
|
||||||
|
rerender([
|
||||||
|
{
|
||||||
|
name: 'city',
|
||||||
|
type: 'input-city',
|
||||||
|
label: '城市',
|
||||||
|
allowDistrict: false,
|
||||||
|
allowCity: true
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
fireEvent.click(select);
|
||||||
|
expect(getByText('山西省')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('山西省'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
const select2 = container.querySelector(
|
||||||
|
'.cxd-CityPicker > .cxd-Select:nth-child(2)'
|
||||||
|
)!;
|
||||||
|
expect(select2).toBeInTheDocument();
|
||||||
|
fireEvent.click(select2);
|
||||||
|
expect(getByText('太原市')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('太原市'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(
|
||||||
|
container.querySelector('.cxd-CityPicker > .cxd-Select:nth-child(3)')!
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
|
||||||
|
rerender([
|
||||||
|
{
|
||||||
|
name: 'city',
|
||||||
|
type: 'input-city',
|
||||||
|
label: '城市',
|
||||||
|
allowDistrict: true,
|
||||||
|
allowCity: true
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
fireEvent.click(select2);
|
||||||
|
expect(getByText('忻州市')).toBeInTheDocument();
|
||||||
|
fireEvent.click(getByText('忻州市'));
|
||||||
|
|
||||||
|
await wait(100);
|
||||||
|
expect(
|
||||||
|
container.querySelector('.cxd-CityPicker > .cxd-Select:nth-child(3)')!
|
||||||
|
).toBeInTheDocument();
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user