重构代码:重新布局所有查询条件框,日历框控件大小限制为宽度186px

This commit is contained in:
Argo-MacBookPro 2018-09-29 17:08:36 +08:00
parent e7ac0c4ade
commit dbde804b0e
9 changed files with 48 additions and 40 deletions

View File

@ -9,16 +9,16 @@
} }
@section query { @section query {
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_dict_cate">字典标签</label> <label class="control-label" for="txt_dict_cate">字典标签</label>
<input type="text" class="form-control" id="txt_dict_cate" data-provide="typeahead" /> <input type="text" class="form-control" id="txt_dict_cate" data-provide="typeahead" />
</div> </div>
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_dict_name">字典名称</label> <label class="control-label" for="txt_dict_name">字典名称</label>
<input type="text" class="form-control" id="txt_dict_name" /> <input type="text" class="form-control" id="txt_dict_name" />
</div> </div>
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_dict_define">字典类别</label> <label class="control-label" for="txt_dict_define">字典类别</label>
<div class="dropdown"> <div class="dropdown">
<button id="txt_dict_define" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button> <button id="txt_dict_define" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button>
@ -30,7 +30,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-2 col-md-auto flex-md-fill justify-content-md-end">
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>
</div> </div>
@ -51,7 +51,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<input type="hidden" id="dictID" data-default-val="0" /> <input type="hidden" id="dictID" data-default-val="0" />
<div class="form-group col-12"> <div class="form-group col-12">
<label class="control-label" for="dictCate">字典标签</label> <label class="control-label" for="dictCate">字典标签</label>

View File

@ -18,8 +18,8 @@
<div class="card-header">查询条件</div> <div class="card-header">查询条件</div>
<div class="card-body"> <div class="card-body">
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6 col-lg-5"> <div class="form-group col-sm-auto">
<label class="control-label" for="txt_operate_start">起始时间</label> <label class="control-label" for="txt_operate_start">起始时间</label>
<div class="input-group date form_date"> <div class="input-group date form_date">
<input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly> <input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly>
@ -31,7 +31,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-sm-6 col-lg-5"> <div class="form-group col-sm-auto">
<label class="control-label" for="txt_operate_end">终止时间</label> <label class="control-label" for="txt_operate_end">终止时间</label>
<div class="input-group date form_date"> <div class="input-group date form_date">
<input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly> <input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly>
@ -43,7 +43,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-lg-2"> <div class="form-group col-sm-auto flex-sm-fill justify-content-sm-end">
<label class="sr-only"></label> <label class="sr-only"></label>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>

View File

@ -8,16 +8,16 @@
} }
@section query { @section query {
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_search_name">部门名称</label> <label class="control-label" for="txt_search_name">部门名称</label>
<input type="text" class="form-control" id="txt_search_name" /> <input type="text" class="form-control" id="txt_search_name" />
</div> </div>
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_group_desc">部门描述</label> <label class="control-label" for="txt_group_desc">部门描述</label>
<input type="text" class="form-control" id="txt_group_desc" /> <input type="text" class="form-control" id="txt_group_desc" />
</div> </div>
<div class="form-group col-sm-12 col-md-2"> <div class="form-group col-sm-2 col-md-auto flex-md-fill justify-content-md-end">
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6"> <div class="form-group col-sm-6">
<label class="control-label" for="groupName">部门名称</label> <label class="control-label" for="groupName">部门名称</label>
<input type="text" class="form-control" id="groupName" placeholder="不可为空50字以内" maxlength="50" data-valid="true" /> <input type="text" class="form-control" id="groupName" placeholder="不可为空50字以内" maxlength="50" data-valid="true" />

View File

@ -30,12 +30,8 @@
<div class="card-header">查询条件</div> <div class="card-header">查询条件</div>
<div class="card-body"> <div class="card-body">
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-12"> <div class="form-group col-sm-auto">
<label class="control-label" for="txt_operate_type">操作类型</label>
<input type="text" class="form-control" id="txt_operate_type" />
</div>
<div class="form-group col-sm-6 col-lg-5">
<label class="control-label" for="txt_operate_start">起始时间</label> <label class="control-label" for="txt_operate_start">起始时间</label>
<div class="input-group date form_date"> <div class="input-group date form_date">
<input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly> <input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly>
@ -47,7 +43,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-sm-6 col-lg-5"> <div class="form-group col-sm-auto">
<label class="control-label" for="txt_operate_end">终止时间</label> <label class="control-label" for="txt_operate_end">终止时间</label>
<div class="input-group date form_date"> <div class="input-group date form_date">
<input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly> <input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly>
@ -59,7 +55,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-lg-2"> <div class="form-group col-sm-auto">
<label class="control-label" for="txt_operate_type">操作类型</label>
<input type="text" class="form-control" id="txt_operate_type" />
</div>
<div class="form-group col-sm-auto flex-sm-fill justify-content-sm-end">
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>
</div> </div>

View File

@ -13,16 +13,16 @@
} }
@section query { @section query {
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-12 col-md-5"> <div class="form-group col-6 col-md-5 col-xl-auto">
<label class="control-label" for="txt_menus_name">菜单名称</label> <label class="control-label" for="txt_menus_name">菜单名称</label>
<input type="text" class="form-control" id="txt_menus_name" /> <input type="text" class="form-control" id="txt_menus_name" />
</div> </div>
<div class="form-group col-sm-12 col-md-5"> <div class="form-group col-6 col-md-5 col-xl-auto">
<label class="control-label" for="txt_parent_menus_name">父级菜单</label> <label class="control-label" for="txt_parent_menus_name">父级菜单</label>
<input type="text" class="form-control" id="txt_parent_menus_name" /> <input type="text" class="form-control" id="txt_parent_menus_name" />
</div> </div>
<div class="form-group col-6 col-md-5"> <div class="form-group col-6 col-md-5 col-xl-auto">
<label class="control-label" for="sel_menus_category">菜单类别</label> <label class="control-label" for="sel_menus_category">菜单类别</label>
<div class="dropdown"> <div class="dropdown">
<button id="sel_menus_category" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button> <button id="sel_menus_category" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button>
@ -34,7 +34,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-6 col-md-5"> <div class="form-group col-6 col-md-5 col-xl-auto">
<label class="control-label" for="sel_menus_category">菜单类型</label> <label class="control-label" for="sel_menus_category">菜单类型</label>
<div class="dropdown"> <div class="dropdown">
<button id="sel_menus_res" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button> <button id="sel_menus_res" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button>
@ -46,7 +46,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-md-2"> <div class="form-group col-md-2 col-xl-auto flex-xl-fill justify-content-xl-end">
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>
</div> </div>
@ -73,7 +73,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="form-inline" id="dataForm"> <form class="form-inline" id="dataForm">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6"> <div class="form-group col-sm-6">
<input type="hidden" id="menuID" data-default-val="0" /> <input type="hidden" id="menuID" data-default-val="0" />
<label class="control-label" for="name">菜单名称</label> <label class="control-label" for="name">菜单名称</label>

View File

@ -13,16 +13,16 @@
} }
@section query { @section query {
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_search_name">角色名称</label> <label class="control-label" for="txt_search_name">角色名称</label>
<input type="text" class="form-control" id="txt_search_name" /> <input type="text" class="form-control" id="txt_search_name" />
</div> </div>
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_role_desc">角色描述</label> <label class="control-label" for="txt_role_desc">角色描述</label>
<input type="text" class="form-control" id="txt_role_desc" /> <input type="text" class="form-control" id="txt_role_desc" />
</div> </div>
<div class="form-group col-sm-12 col-md-2"> <div class="form-group col-sm-2 col-md-auto flex-md-fill justify-content-md-end">
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>
</div> </div>
@ -55,7 +55,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6"> <div class="form-group col-sm-6">
<label class="control-label" for="roleName">角色名称</label> <label class="control-label" for="roleName">角色名称</label>
<input type="text" class="form-control" id="roleName" placeholder="不可为空50字以内" maxlength="50" data-valid="true" /> <input type="text" class="form-control" id="roleName" placeholder="不可为空50字以内" maxlength="50" data-valid="true" />

View File

@ -8,16 +8,16 @@
} }
@section query { @section query {
<form class="form-inline"> <form class="form-inline">
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_search_name">登陆名称</label> <label class="control-label" for="txt_search_name">登陆名称</label>
<input type="text" class="form-control" id="txt_search_name" /> <input type="text" class="form-control" id="txt_search_name" />
</div> </div>
<div class="form-group col-sm-6 col-md-5"> <div class="form-group col-sm-5 col-md-auto">
<label class="control-label" for="txt_display_name">显示名称</label> <label class="control-label" for="txt_display_name">显示名称</label>
<input type="text" class="form-control" id="txt_display_name" /> <input type="text" class="form-control" id="txt_display_name" />
</div> </div>
<div class="form-group col-sm-12 col-md-2"> <div class="form-group col-sm-2 col-md-auto flex-md-fill justify-content-md-end">
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>
</div> </div>
@ -47,7 +47,7 @@
<div class="modal-body"> <div class="modal-body">
<form class="form-inline"> <form class="form-inline">
<input type="hidden" id="userID" data-default-val="0" /> <input type="hidden" id="userID" data-default-val="0" />
<div class="form-row"> <div class="row">
<div class="form-group col-sm-6"> <div class="form-group col-sm-6">
<label class="control-label" for="userName">登陆名称</label> <label class="control-label" for="userName">登陆名称</label>
<input type="text" class="form-control" id="userName" placeholder="不可为空50字以内" minlength="4" maxlength="50" remote="api/Register" data-remote-msg="此用户已存在" data-valid="true" /> <input type="text" class="form-control" id="userName" placeholder="不可为空50字以内" minlength="4" maxlength="50" remote="api/Register" data-remote-msg="此用户已存在" data-valid="true" />

View File

@ -33,6 +33,10 @@
align-self: flex-end; align-self: flex-end;
margin-bottom: 2px; margin-bottom: 2px;
} }
.input-group.date.form_date {
width: 186px;
}
} }
@media (min-width: 940px) { @media (min-width: 940px) {

View File

@ -33,6 +33,10 @@
align-self: flex-end; align-self: flex-end;
margin-bottom: 2px; margin-bottom: 2px;
} }
.input-group.date.form_date {
width: 186px;
}
} }
@media (min-width: 940px) { @media (min-width: 940px) {