github
/
RuoYi
mirror of https://gitee.com/y_project/RuoYi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

替换表单向导插件为jquery-smartwizard

pull/212/head
Ricky 2020-09-15 16:55:13 +08:00
parent c523be9f34
commit 4e5923a763
7 changed files with 348 additions and 2613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ruoyi-admin/src/main/resources/static/ajax/libs/smartwizard/jquery.smartWizard.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
ruoyi-admin/src/main/resources/static/ajax/libs/smartwizard/smart_wizard_all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

381
ruoyi-admin/src/main/resources/static/ajax/libs/staps/jquery.steps.css
View File

@ -1,381 +0,0 @@
/*
Common
*/
.wizard,
.tabcontrol
{
display: block;
width: 100%;
overflow: hidden;
}
.wizard a,
.tabcontrol a
{
outline: 0;
}
.wizard ul,
.tabcontrol ul
{
list-style: none !important;
padding: 0;
margin: 0;
}
.wizard ul > li,
.tabcontrol ul > li
{
display: block;
padding: 0;
}
/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info
{
position: absolute;
left: -999em;
}
.wizard > .content > .title,
.tabcontrol > .content > .title
{
position: absolute;
left: -999em;
}
/*
Wizard
*/
.wizard > .steps
{
position: relative;
display: block;
width: 100%;
}
.wizard.vertical > .steps
{
display: inline;
float: left;
width: 30%;
}
.wizard > .steps > ul > li
{
width: 25%;
}
.wizard > .steps > ul > li,
.wizard > .actions > ul > li
{
float: left;
}
.wizard.vertical > .steps > ul > li
{
float: none;
width: 100%;
}
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
display: block;
width: auto;
margin: 0 0.5em 0.5em;
padding: 8px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
background: #eee;
color: #aaa;
cursor: default;
}
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
background: #1AB394;
color: #fff;
cursor: default;
}
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
background: #6fd1bd;
color: #fff;
}
.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active
{
background: #ED5565 ;
color: #fff;
}
.wizard > .content
{
background: #eee;
display: block;
margin: 5px 5px 10px 5px;
min-height: 120px;
overflow: hidden;
position: relative;
width: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard-big.wizard > .content {
min-height: 320px;
}
.wizard.vertical > .content
{
display: inline;
float: left;
margin: 0 2.5% 0.5em 2.5%;
width: 65%;
}
.wizard > .content > .body
{
float: left;
position: absolute;
width: 95%;
height: 95%;
padding: 2.5%;
}
.wizard > .content > .body ul
{
list-style: disc !important;
}
.wizard > .content > .body ul > li
{
display: list-item;
}
.wizard > .content > .body > iframe
{
border: 0 none;
width: 100%;
height: 100%;
}
.wizard > .content > .body input
{
display: block;
border: 1px solid #ccc;
}
.wizard > .content > .body input[type="checkbox"]
{
display: inline-block;
}
.wizard > .content > .body input.error
{
background: rgb(251, 227, 228);
border: 1px solid #fbc2c4;
color: #8a1f11;
}
.wizard > .content > .body label
{
display: inline-block;
margin-bottom: 0.5em;
}
.wizard > .content > .body label.error
{
color: #8a1f11;
display: inline-block;
margin-left: 1.5em;
}
.wizard > .actions
{
position: relative;
display: block;
text-align: right;
width: 100%;
}
.wizard.vertical > .actions
{
display: inline;
float: right;
margin: 0 2.5%;
width: 95%;
}
.wizard > .actions > ul
{
display: inline-block;
text-align: right;
}
.wizard > .actions > ul > li
{
margin: 0 0.5em;
}
.wizard.vertical > .actions > ul > li
{
margin: 0 0 0 1em;
}
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active
{
background: #1AB394;
color: #fff;
display: block;
padding: 0.5em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active
{
background: #eee;
color: #aaa;
}
.wizard > .loading
{
}
.wizard > .loading .spinner
{
}
/*
Tabcontrol
*/
.tabcontrol > .steps
{
position: relative;
display: block;
width: 100%;
}
.tabcontrol > .steps > ul
{
position: relative;
margin: 6px 0 0 0;
top: 1px;
z-index: 1;
}
.tabcontrol > .steps > ul > li
{
float: left;
margin: 5px 2px 0 0;
padding: 1px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabcontrol > .steps > ul > li:hover
{
background: #edecec;
border: 1px solid #bbb;
padding: 0;
}
.tabcontrol > .steps > ul > li.current
{
background: #fff;
border: 1px solid #bbb;
border-bottom: 0 none;
padding: 0 0 1px 0;
margin-top: 0;
}
.tabcontrol > .steps > ul > li > a
{
color: #5f5f5f;
display: inline-block;
border: 0 none;
margin: 0;
padding: 10px 30px;
text-decoration: none;
}
.tabcontrol > .steps > ul > li > a:hover
{
text-decoration: none;
}
.tabcontrol > .steps > ul > li.current > a
{
padding: 15px 30px 10px 30px;
}
.tabcontrol > .content
{
position: relative;
display: inline-block;
width: 100%;
height: 35em;
overflow: hidden;
border-top: 1px solid #bbb;
padding-top: 20px;
}
.tabcontrol > .content > .body
{
float: left;
position: absolute;
width: 95%;
height: 95%;
padding: 2.5%;
}
.tabcontrol > .content > .body ul
{
list-style: disc !important;
}
.tabcontrol > .content > .body ul > li
{
display: list-item;
}
label.error { position:inherit; }

2042
ruoyi-admin/src/main/resources/static/ajax/libs/staps/jquery.steps.js
View File

File diff suppressed because it is too large Load Diff

6
ruoyi-admin/src/main/resources/static/ajax/libs/staps/jquery.steps.min.js vendored
View File

File diff suppressed because one or more lines are too long

498
ruoyi-admin/src/main/resources/templates/demo/form/wizard.html
View File

@ -1,192 +1,332 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('基本表单')" />
<th:block th:include="include :: jquery-steps-css" />
<th:block th:include="include :: header('基本表单')" />
<th:block th:include="include :: jquery-smartwizard-css" />
<style type="text/css">
/* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
.sw>.toolbar-bottom{
z-index: 100;
bottom: 0px;
left: 0;
width: 100%;
position: fixed;
text-align: right;
background: #fff;
box-shadow: 0 -2px 6px 1px hsla(223,8%,83%,.5);
border-top: 1px solid #e3e4e8;
}
/* 如果设置了是否自动调节高度为false,需要加滚动条 */
.sw>.tab-content{
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-5">
<div class="jumbotron">
<h1>表单向导</h1>
<p>Smart UI 部件允许您快速创建表单向导接口。</p>
<p><a href="https://github.com/rstaib/jquery-steps" target="_blank" class="btn btn-primary btn-lg" role="button">了解 jQuery Steps</a>
</p>
</div>
</div>
<div class="col-sm-7">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>基础表单向导</h5>
</div>
<div class="ibox-content">
<p>
这是一个简单的表单向导示例
</p>
<div id="wizard">
<h1>第一步</h1>
<div class="step-content">
<div class="text-center m-t-md">
<h2>第一步</h2>
<p>
这是第一步的内容
</p>
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
<div class="row">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-title">
<h5>
表单向导
<small>https://github.com/techlab/jquery-smartwizard</small>
</h5>
</div>
<div class="ibox-content">
<div class="row select-list" style="padding-left: 15px; margin-bottom: 10px;">
<ul>
<li>
选择样式：
<select id="theme-selector">
<option value="default">Default</option>
<option value="arrows" selected>Arrows</option>
<option value="dots">Dots</option>
<option value="progress">Progress</option>
</select>
</li>
<!-- 快速操作栏按钮 -->
<li>
<div class="btn-group-sm" role="group">
<a class="btn btn-info" id="prev-btn"> 上一步 </a>
<a class="btn btn-success" id="next-btn"> 下一步 </a>
<a class="btn btn-danger" id="reset-btn"> 重置 </a>
</div>
</li>
</ul>
<h1>第二步</h1>
<div class="step-content">
<div class="text-center m-t-md">
<h2>第二步</h2>
<p>
这是第二步的内容
</p>
</div>
</div>
</div>
<div id="smartwizard">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#step-1"> 第一步 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-2"> 第二步 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-3"> 第三步 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-4"> 第四步 </a>
</li>
</ul>
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
<div>
<form class="form form-horizontal m-t">
<div class="form-group">
<label class="col-sm-3 control-label">姓氏：</label>
<div class="col-sm-8">
<input id="firstname" name="firstname" class="form-control" type="text">
<span class="help-block m-b-none">
<i class="fa fa-info-circle"></i>
这里写点提示的内容
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">名字：</label>
<div class="col-sm-8">
<input id="lastname" name="lastname" class="form-control" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">用户名：</label>
<div class="col-sm-8">
<input id="username" name="username" class="form-control" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密码：</label>
<div class="col-sm-8">
<input id="password" name="password" class="form-control" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">确认密码：</label>
<div class="col-sm-8">
<input id="confirm_password" name="confirm_password" class="form-control" type="password">
<span class="help-block m-b-none">
<i class="fa fa-info-circle"></i>
请再次输入您的密码
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">E-mail：</label>
<div class="col-sm-8">
<input id="email" name="email" class="form-control" type="email">
</div>
</div>
</form>
</div>
</div>
<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
<div>
<form class="form form-horizontal m-t">
<div class="form-group">
<label class="col-sm-3 control-label">性别：</label>
<div class="col-sm-8">
<select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">时间：</label>
<div class="col-sm-8">
<input id="time" name="time" class="form-control time-input" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">状态：</label>
<div class="col-sm-8">
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
</div>
</div>
</div>
</form>
</div>
</div>
<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
<div class="m-t-md">
<p>1、如果需要工具栏在页面底部显示, 将style中下面的部分取消注释<blockquote>.sw>.toolbar-bottom </blockquote></p>
<p>2、如果设置了自动调节高度为false, 将style中下面的部分取消注释<blockquote>.sw>.tab-content </blockquote></p>
<p>3、工具栏的按钮样式会被表单插件中.btn样式覆盖导致bootstrap中的按钮样式无效, 如果需要改变按钮样式可以自己定义并提高优先级</blockquote></p>
</div>
</div>
<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
<div class="m-t-md">
<h3>测试多行显示</h3>
<pre style="overflow-x: hidden;">
$('#smartwizard').smartWizard({
selected: 0, // Initial selected step, 0 = first step
theme: 'default', // theme for the wizard, related css need to include for other than default theme
justified: true, // Nav menu justification. true/false
darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false
autoAdjustHeight: true, // Automatically adjust content height
cycleSteps: false, // Allows to cycle the navigation of steps
backButtonSupport: true, // Enable the back button support
enableURLhash: true, // Enable selection of the step based on url hash
transition: {
animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
speed: '400', // Transion animation speed
easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
},
toolbarSettings: {
toolbarPosition: 'bottom', // none, top, bottom, both
toolbarButtonPosition: 'right', // left, right, center
showNextButton: true, // show/hide a Next button
showPreviousButton: true, // show/hide a Previous button
toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
},
anchorSettings: {
anchorClickable: true, // Enable/Disable anchor navigation
enableAllAnchors: false, // Activates all anchors clickable all times
markDoneStep: true, // Add done state on navigation
markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
},
keyboardSettings: {
keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
keyLeft: [37], // Left key code
keyRight: [39] // Right key code
},
lang: { // Language variables for button
next: 'Next',
previous: 'Previous'
},
disabledSteps: [], // Array Steps disabled
errorSteps: [], // Highlight step with errors
hiddenSteps: [] // Hidden steps
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h1>第三步</h1>
<div class="step-content">
<div class="text-center m-t-md">
<h2>第三步</h2>
<p>
这是第三步的内容
</p>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-smartwizard-js" />
<script>
$(document).ready(function() {
// 工具栏按钮
var btnFinish = $('<a id="btn-finish"></a>').text('完成')
.addClass('btn btn-info')
.on('click', function(){ submit(); });
var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
.addClass('btn btn-danger')
.on('click', function(){ $('#smartwizard').smartWizard("reset"); });
// 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
var btnNext = $('<a id="btn-next"></a>').text('下一步')
.addClass('btn btn-info')
.on('click', function(){ $('#smartwizard').smartWizard("next");});
var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
.addClass('btn btn-success disabled')
.on('click', function(){ $('#smartwizard').smartWizard("prev"); });
// 初始化表单向导组件
$('#smartwizard').smartWizard({
theme: 'arrows', // default, arrows, dots, progress
autoAdjustHeight : false, // 自动调整高度, 默认true
enableURLhash:false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
transition: {
animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
},
toolbarSettings: {
showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
toolbarExtraButtons: [btnCancel,btnPrev,btnNext,btnFinish]// 扩展的按钮集合
}
});
});
function submit(){
var data = {};
$('.form').each(function (index, form){
// 这里可以使用$.common.formToJSON(formId); 需要在form上加id
$.each($(form).serializeArray(), function(i, field) {
if(data[field.name]) {
data[field.name] += ("," + field.value);
} else {
data[field.name] = field.value;
}
});
});
alert(JSON.stringify(data))
}
// 显示步骤时将触发事件
$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
// 下面按钮是快速操作栏的
$("#prev-btn").removeClass('disabled');
$("#next-btn").removeClass('disabled');
// 下面按钮是工具栏的
$("#btn-prev").removeClass('disabled');
$("#btn-next").removeClass('disabled');
$("#btn-finish").removeClass('disabled');
if(stepPosition === 'first') {
$("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
$("#btn-prev").addClass('disabled');
$("#btn-finish").addClass('disabled');
} else if(stepPosition === 'last') {
$("#next-btn").addClass('disabled');// 快速操作栏（演示用）
$("#btn-next").addClass('disabled');
} else {
$("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
$("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
$("#btn-prev").removeClass('disabled');
$("#btn-next").removeClass('disabled');
$("#btn-finish").addClass('disabled');
}
});
// 该事件在离开某个步骤之前触发
$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
if(stepDirection == 'forward'){
var form = $("#step-" + (currentStepNumber + 1)).find('.form');
if(form.length > 0){
return form.validate().form();
}
return true;
}
return true;
});
$("#theme-selector").on("change", function() {
// Change theme
var options = {
theme : $(this).val()
};
$('#smartwizard').smartWizard("setOptions", options);
return true;
});
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-title">
<h5>带验证的表单向导</h5>
</div>
<div class="ibox-content">
<h2>
带验证的表单向导
</h2>
<p>
下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
</p>
$("#reset-btn").on("click", function() {
// Reset wizard
$('#smartwizard').smartWizard("reset");
return true;
});
<form id="form" action="" class="wizard-big">
<h1>账户</h1>
<fieldset>
<h2>账户信息</h2>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label>用户名 *</label>
<input id="userName" name="userName" type="text" class="form-control required">
</div>
<div class="form-group">
<label>密码 *</label>
<input id="password" name="password" type="text" class="form-control required">
</div>
<div class="form-group">
<label>确认密码 *</label>
<input id="confirm" name="confirm" type="text" class="form-control required">
</div>
</div>
<div class="col-sm-4">
<div class="text-center">
<div style="margin-top: 20px">
<i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
</div>
</div>
</div>
</div>
$("#prev-btn").on("click", function() {
// Navigate previous
$('#smartwizard').smartWizard("prev");
return true;
});
</fieldset>
<h1>个人资料</h1>
<fieldset>
<h2>个人资料信息</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>姓名 *</label>
<input id="name" name="name" type="text" class="form-control required">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Email *</label>
<input id="email" name="email" type="text" class="form-control required email">
</div>
<div class="form-group">
<label>地址 *</label>
<input id="address" name="address" type="text" class="form-control">
</div>
</div>
</div>
</fieldset>
<h1>警告</h1>
<fieldset>
<div class="text-center" style="margin-top: 120px">
<h2>你是火星人 :-)</h2>
</div>
</fieldset>
<h1>完成</h1>
<fieldset>
<h2>条款</h2>
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
<label for="acceptTerms">我同意注册条款</label>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-steps-js" />
<script>
$(document).ready(function () {
$("#wizard").steps();
$("#form").steps({
bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex > newIndex) {
return true
}
if (newIndex === 3 && Number($("#age").val()) < 18) {
return false
}
var form = $(this);
if (currentIndex < newIndex) {
$(".body:eq(" + newIndex + ") label.error", form).remove();
$(".body:eq(" + newIndex + ") .error", form).removeClass("error")
}
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid()
}, onStepChanged: function (event, currentIndex, priorIndex) {
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
$(this).steps("next")
}
if (currentIndex === 2 && priorIndex === 3) {
$(this).steps("previous")
}
}, onFinishing: function (event, currentIndex) {
var form = $(this);
form.validate().settings.ignore = ":disabled";
return form.valid()
}, onFinished: function (event, currentIndex) {
var form = $(this);
form.submit()
}
}).validate({
errorPlacement: function (error, element) {
element.before(error)
}, rules: {confirm: {equalTo: "#password"}}
})
});
$("#next-btn").on("click", function() {
// Navigate next
$('#smartwizard').smartWizard("next");
return true;
});
</script>
</body>
</html>

10
ruoyi-admin/src/main/resources/templates/include.html
View File

@ -147,12 +147,12 @@
<script th:src="@{/ajax/libs/jsonview/jquery.jsonview.js}"></script>
</div>
<!-- jquery.steps表单向导插件 -->
<div th:fragment="jquery-steps-css">
<link th:href="@{/ajax/libs/staps/jquery.steps.css}" rel="stylesheet"/>
<!-- jquery.smartwizard表单向导插件 -->
<div th:fragment="jquery-smartwizard-css">
<link th:href="@{/ajax/libs/smartwizard/smart_wizard_all.min.css}" rel="stylesheet"/>
</div>
<div th:fragment="jquery-steps-js">
<script th:src="@{/ajax/libs/staps/jquery.steps.min.js}"></script>
<div th:fragment="jquery-smartwizard-js">
<script th:src="@{/ajax/libs/smartwizard/jquery.smartWizard.min.js}"></script>
</div>
<!-- ECharts百度统计图表插件 -->