humorwang
2 years ago
5 changed files with 792 additions and 4 deletions
@ -1,15 +1,32 @@ |
|||
package com.bt.my.order; |
|||
|
|||
import java.util.List; |
|||
|
|||
import com.bt.common.controller.BaseController; |
|||
import com.bt.common.model.Project; |
|||
import com.bt.common.model.Order; |
|||
import com.jfinal.core.Path; |
|||
|
|||
@Path("/my/order") |
|||
public class MyOrderController extends BaseController { |
|||
public void index() { |
|||
|
|||
render("index.html"); |
|||
} |
|||
|
|||
public void preview() { |
|||
Order order = getBean(Order.class); |
|||
Integer productId = getParaToInt("", 1); |
|||
|
|||
|
|||
//
|
|||
render("preview.html"); |
|||
} |
|||
|
|||
public void create() { |
|||
Order order = getBean(Order.class); |
|||
Integer productId = getParaToInt("", 1); |
|||
|
|||
|
|||
//
|
|||
render("preview.html"); |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
@ -0,0 +1,50 @@ |
|||
package com.bt.my.order; |
|||
|
|||
import com.bt.common.model.Product; |
|||
import com.bt.common.model.Project; |
|||
import com.jfinal.kit.Kv; |
|||
import com.jfinal.plugin.activerecord.Page; |
|||
import com.jfinal.plugin.ehcache.CacheKit; |
|||
|
|||
import java.util.List; |
|||
|
|||
|
|||
/** |
|||
* OrderService |
|||
*/ |
|||
public class OrderService { |
|||
private Product dao = new Product().dao(); |
|||
|
|||
public Page<Product> paginate(int pageNumber) { |
|||
Page<Product> productPage = dao.template("product.paginate").paginate(pageNumber, 16); |
|||
// 列表页显示 content 的摘要信息需要过滤为纯文本，去除所有标记
|
|||
//JsoupFilter.filterArticleList(productPage.getList(), 50, 120);
|
|||
return productPage; |
|||
} |
|||
|
|||
public Product findById(int projectId) { |
|||
return dao.template("project.findById", projectId, Project.REPORT_BLOCK_NUM).findFirst(); |
|||
} |
|||
|
|||
public Product findById(int projectId, String columns) { |
|||
Kv para = Kv.by("columns", columns).set("id", projectId).set("report", Project.REPORT_BLOCK_NUM); |
|||
return dao.template("project.findByIdWithColumns", para).findFirst(); |
|||
} |
|||
|
|||
public List<Product> getHotProject() { |
|||
return dao.template("project.getHotProject", Project.REPORT_BLOCK_NUM).findByCache("hotProject", "hotProject"); |
|||
} |
|||
|
|||
public void clearHotProjectCache() { |
|||
CacheKit.remove("hotProject", "hotProject"); |
|||
} |
|||
|
|||
/** |
|||
* 暂时用于个人空间的创建、更新 share、feedback 模块，用于显示关联项目的下拉列表，将来改成按热度排序 |
|||
* 项目数量多了以后考虑用输入框配合 autocomplete 提示输入来实现 |
|||
*/ |
|||
public List<Product> getAllProject(String columns) { |
|||
Kv para = Kv.by("columns", columns).set("report", Project.REPORT_BLOCK_NUM); |
|||
return dao.template("project.getAllProject", para).find(); |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
package com.bt.my.recharge; |
|||
|
|||
import com.bt.common.controller.BaseController; |
|||
import com.jfinal.core.Path; |
|||
|
|||
/** |
|||
* 我的充值 |
|||
*/ |
|||
@Path("/my/recharge") |
|||
public class RechargeController extends BaseController { |
|||
public void index() { |
|||
|
|||
render("index.html"); |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>Title</title> |
|||
</head> |
|||
<body> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,696 @@ |
|||
#set(seoTitle="贝塔网络充值中心") |
|||
#@b5Layout() |
|||
#define menu() |
|||
#include("../dashboard/_left_menu.html", sidebar="recharge", submenu="") |
|||
#end |
|||
#define css() |
|||
<link rel="stylesheet" href="https://www.bootstrap-admin.top/lib/bootstrap-table/dist/bootstrap-table.min.css"> |
|||
#end |
|||
#define main() |
|||
<div id="main"> |
|||
<header class="mb-3"> |
|||
<a href="#" class="burger-btn d-block d-xl-none"> |
|||
<i class="bi bi-justify fs-3"></i> |
|||
</a> |
|||
</header> |
|||
<div class="page-heading"> |
|||
<div class="page-title"> |
|||
<div class="row"> |
|||
<div class="col-12 col-md-6 order-md-1 order-last"> |
|||
<h3>我的订单</h3> |
|||
</div> |
|||
<div class="col-12 col-md-6 order-md-2 order-first"> |
|||
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end"> |
|||
<ol class="breadcrumb"> |
|||
<li class="breadcrumb-item"><a href="/my">首页</a></li> |
|||
<li class="breadcrumb-item active" aria-current="page">我的订单</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<section class="section"> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h4>Basic Buttons</h4> |
|||
</div> |
|||
<div class="card-body"> |
|||
|
|||
|
|||
<div class="buttons"> |
|||
<a href="#" class="btn btn-primary">Primary</a> |
|||
<a href="#" class="btn btn-secondary">Secondary</a> |
|||
<a href="#" class="btn btn-info">Info</a> |
|||
<a href="#" class="btn btn-warning">Warning</a> |
|||
<a href="#" class="btn btn-danger">Danger</a> |
|||
<a href="#" class="btn btn-success">Success</a> |
|||
<a href="#" class="btn btn-light">Light</a> |
|||
<a href="#" class="btn btn-dark">Dark</a> |
|||
</div> |
|||
<hr> |
|||
|
|||
|
|||
<div class="buttons"> |
|||
<a href="#" class="btn btn-primary rounded-pill">Primary</a> |
|||
<a href="#" class="btn btn-secondary rounded-pill">Secondary</a> |
|||
<a href="#" class="btn btn-info rounded-pill">Info</a> |
|||
<a href="#" class="btn btn-warning rounded-pill">Warning</a> |
|||
<a href="#" class="btn btn-danger rounded-pill">Danger</a> |
|||
<a href="#" class="btn btn-success rounded-pill">Success</a> |
|||
<a href="#" class="btn btn-light rounded-pill">Light</a> |
|||
<a href="#" class="btn btn-dark rounded-pill">Dark</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12 col-lg-12"> |
|||
<div class="card border-0 shadow-sm"> |
|||
<div class="card-header bg-body py-3"> |
|||
<form class="row row-cols-sm-auto g-3 align-items-center"> |
|||
<div class="col-12"> |
|||
<div class="row"> |
|||
<label for="username" class="col-sm-auto col-form-label">用户名</label> |
|||
<div class="col"> |
|||
<input type="email" class="form-control" id="username" name="username"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="row"> |
|||
<label for="phone" class="col-sm-auto col-form-label">手机号</label> |
|||
<div class="col"> |
|||
<input type="email" class="form-control" id="phone" name="phone"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="row"> |
|||
<label for="beginTime" class="col-sm-auto col-form-label">创建时间</label> |
|||
<div class="col"> |
|||
<div class="input-group"> |
|||
<input type="text" readonly class="form-control" aria-label="q" |
|||
placeholder="开始时间" |
|||
name="beginTime" id="beginTime"> |
|||
<span class="input-group-text"><i class="bi bi-arrow-left-right"></i></span> |
|||
<input type="text" readonly class="form-control" aria-label="q" |
|||
placeholder="结束时间" |
|||
name="endTime" id="endTime"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="row"> |
|||
<label for="status" class="col-sm-auto col-form-label">用户状态</label> |
|||
<div class="col"> |
|||
<select class="selectpicker"> |
|||
<option value="0">所有</option> |
|||
<option value="1">正常</option> |
|||
<option value="2">停用</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="col-12 gap-2"> |
|||
|
|||
<button type="button" class="btn btn-light bsa-querySearch-btn"> |
|||
<i class="bi bi-search"></i>搜索 |
|||
</button> |
|||
<button type="button" class="btn btn-light bsa-reset-btn"> |
|||
<i class="bi bi-arrow-clockwise"></i>重置 |
|||
</button> |
|||
|
|||
</div> |
|||
|
|||
</form> |
|||
</div> |
|||
<div class="card-body"> |
|||
<!-- 表格上方左侧的工具条区域 --> |
|||
<div id="toolbar" class="d-flex flex-wrap gap-2 mb-2"> |
|||
</div> |
|||
<!-- 数据表格 --> |
|||
<table id="table"></table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
|
|||
#include("../dashboard/_footer.html") |
|||
</div> |
|||
#end |
|||
|
|||
#define js() |
|||
|
|||
<script src="/assets/lib/bootstrap-table/dist/bootstrap-table.min.js"></script> |
|||
<script src="/assets/lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script> |
|||
<script src="/assets/lib/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script> |
|||
<script> |
|||
$(document).ready(function (e) { |
|||
/** |
|||
* columns表示列，里面的对象 title是表头信息，field是服务端返回的字段名称 |
|||
* 1.不做分页，返回的数据格式是 [{},{}] |
|||
* 2.如果要开启分页，需要配置pagination:true, sidePagination:'client|server' |
|||
* 3.客户端分页所需要的格式和不做分页时是一样的 都是 :[{},{}] |
|||
* 4.服务端分页返回的格式为：{rows:[{},{}],total:200} |
|||
* 参考：https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json |
|||
*/ |
|||
$('#table').bootstrapTable({ |
|||
//配置语言 |
|||
locale: 'zh-CN', |
|||
//设置高度就可以固定表头 |
|||
// height: 500, |
|||
//请求地址 |
|||
url: '/user', |
|||
responseHandler: function (res) { |
|||
return res.data; |
|||
}, |
|||
//固定列功能开启 |
|||
fixedColumns: true, |
|||
//左侧固定列数 |
|||
fixedNumber: 1, |
|||
//右侧固定列数 |
|||
fixedRightNumber: 1, |
|||
|
|||
//是否开启分页 |
|||
pagination: true, |
|||
//是客户端分页还是服务端分页 'client','server',由于演示没有后端提供服务，所以采用前端分页演示 |
|||
sidePagination: 'client', |
|||
// 初始化加载第一页，默认第一页 |
|||
pageNumber: 1, |
|||
//默认显示几条 |
|||
pageSize: 5, |
|||
//可供选择的每页的行数 - (亲测大于1000存在渲染问题) |
|||
pageList: [5, 10, 25, 50, 100], |
|||
//在上百页的情况下体验较好 - 能够显示首尾页 |
|||
paginationLoop: true, |
|||
// 展示首尾页的最小页数 |
|||
paginationPagesBySide: 2, |
|||
|
|||
// 唯一ID字段 |
|||
uniqueId: 'id', |
|||
// 每行的唯一标识字段 |
|||
idField: 'id', |
|||
// 是否启用点击选中行 |
|||
clickToSelect: true, |
|||
// 是否显示详细视图和列表视图的切换按钮 |
|||
showToggle: true, |
|||
// 请求得到的数据类型 |
|||
dataType: 'json', |
|||
// 请求方法 |
|||
method: 'get', |
|||
// 工具按钮容器 |
|||
toolbar: '#toolbar', |
|||
// 是否显示所有的列 |
|||
showColumns: true, |
|||
// 是否显示刷新按钮 |
|||
showRefresh: true, |
|||
// 显示图标 |
|||
showButtonIcons: true, |
|||
// 显示文本 |
|||
showButtonText: false, |
|||
// 显示全屏 |
|||
showFullscreen: false, |
|||
// 开关控制分页 |
|||
showPaginationSwitch: false, |
|||
// 总数字段 |
|||
totalField: 'total', |
|||
// 当字段为 undefined 显示 |
|||
undefinedText: '-', |
|||
// 排序方式 |
|||
sortOrder: "asc", |
|||
|
|||
// 按钮的类 |
|||
buttonsClass: 'light', |
|||
// 类名前缀 |
|||
buttonsPrefix: 'btn', |
|||
|
|||
// 图标前缀 |
|||
iconsPrefix: 'bi', |
|||
// 图标大小 undefined sm lg |
|||
iconSize: undefined, |
|||
// 图标的设置 这里只做了一个演示，可设置项目参考 https://examples.bootstrap-table.com/#options/table-icons.html |
|||
icons: { |
|||
fullscreen: 'bi-arrows-fullscreen', |
|||
}, |
|||
//头部的那个复选框选中事件 |
|||
onCheckAll: function (row) { |
|||
batchBtnStatusHandle() |
|||
}, |
|||
//单行选中事件 |
|||
onCheck: function (row) { |
|||
batchBtnStatusHandle() |
|||
}, |
|||
//单行取消选中事件 |
|||
onUncheck: function (row) { |
|||
batchBtnStatusHandle() |
|||
}, |
|||
//头部的那个复选框取消选中事件 |
|||
onUncheckAll: function (row) { |
|||
batchBtnStatusHandle() |
|||
}, |
|||
//加载模板,不改的话，默认的会超出不好看 |
|||
loadingTemplate: function () { |
|||
return '<div class="spinner-grow" role="status"><span class="visually-hidden">Loading...</span></div>'; |
|||
}, |
|||
onPostBody: function () { |
|||
//重新启用弹出层,否则formatter格式化函数返回的html字符串上的tooltip提示不生效 |
|||
$('[data-bs-toggle="tooltip"]').each(function (i, el) { |
|||
new bootstrap.Tooltip(el) |
|||
}) |
|||
}, |
|||
//params是一个对象 |
|||
queryParams: function (params) { |
|||
return { |
|||
// 每页数据量 |
|||
limit: params.limit, |
|||
// sql语句起始索引 |
|||
offset: params.offset, |
|||
page: (params.offset / params.limit) + 1, |
|||
// 排序的列名 |
|||
sort: params.sort, |
|||
// 排序方式 'asc' 'desc' |
|||
sortOrder: params.order, |
|||
//关键词 |
|||
keywords: $('input[name=keyword]').val(), |
|||
//开始时间 |
|||
beginTime: $('#beginTime').val(), |
|||
//结束时间 |
|||
endTime: $('#endTime').val(), |
|||
} |
|||
}, |
|||
//列 |
|||
columns: [ |
|||
{ |
|||
checkbox: true, |
|||
//是否显示该列 |
|||
visible: true, |
|||
}, |
|||
{ |
|||
title: 'ID', |
|||
field: 'id', |
|||
// 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。h表示横向，v标识垂直 |
|||
align: 'center', |
|||
// 是否作为排序列 |
|||
sortable: true, |
|||
// 当列名称与实际名称不一致时可用 |
|||
sortName: 'sortId', |
|||
switchable: false, |
|||
// 列的宽度 |
|||
width: 8, |
|||
// 宽度单位 |
|||
widthUnit: 'rem' |
|||
}, |
|||
{ |
|||
title: '姓名', |
|||
field: 'name', |
|||
align: 'center' |
|||
}, |
|||
{ |
|||
title: '角色', |
|||
field: 'role_id', |
|||
align: 'center', |
|||
formatter: formatRole |
|||
}, |
|||
{ |
|||
title: '用户名', |
|||
field: 'username', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '性别', |
|||
field: 'gender', |
|||
align: 'center', |
|||
formatter: formatGender |
|||
}, |
|||
{ |
|||
title: '手机', |
|||
field: 'phone', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '邮箱', |
|||
field: 'email', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '加入时间', |
|||
field: 'create_at', |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
field: 'status', |
|||
align: 'center', |
|||
formatter: formatStatus |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
align: 'center', |
|||
formatter: formatAction, |
|||
events: { |
|||
'click .edit-btn': function (event, value, row, index) { |
|||
event.stopPropagation(); |
|||
|
|||
window.modalInstance = $.modal({ |
|||
url: 'user-edit.html', |
|||
title: '用户编辑', |
|||
//禁用掉底部的按钮区域 |
|||
buttons: [], |
|||
modalDialogClass: 'modal-dialog-centered modal-lg', |
|||
onHidden: function (obj, data) { |
|||
if (data === true) { |
|||
//刷新当前数据表格 |
|||
$('#table').bootstrapTable('refresh'); |
|||
$('#table').bootstrapTable('selectPage', 1)//跳转到第一页 |
|||
} |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
'click .del-btn': function (event, value, row, index) { |
|||
event.stopPropagation(); |
|||
$.modal({ |
|||
body: '确定要删除管理员' + row.name + '?', |
|||
ok: function () { |
|||
|
|||
$.ajax({ |
|||
url: '/user/10', |
|||
method: 'delete', |
|||
}).then(response => { |
|||
if (response.code === 200) { |
|||
|
|||
} |
|||
}); |
|||
|
|||
} |
|||
}) |
|||
|
|||
}, |
|||
'click .role-btn': function (event, value, row, index) { |
|||
event.stopPropagation(); |
|||
|
|||
window.rolemodal = $.modal({ |
|||
url: 'user-role.html', |
|||
title: '分配角色', |
|||
//禁用掉底部的按钮区域 |
|||
buttons: [], |
|||
modalDialogClass: 'modal-dialog-centered modal-lg', |
|||
onHidden: function (obj, data) { |
|||
if (data === true) { |
|||
//刷新当前数据表格 |
|||
$('#table').bootstrapTable('refresh'); |
|||
$('#table').bootstrapTable('selectPage', 1)//跳转到第一页 |
|||
} |
|||
} |
|||
}) |
|||
|
|||
} |
|||
} |
|||
} |
|||
] |
|||
}); |
|||
|
|||
|
|||
//批量处理 |
|||
$('.batch-btn').on('click', function () { |
|||
//获取所有选中行的id |
|||
let id = []; |
|||
let rowSelected = $("#table").bootstrapTable('getSelections'); |
|||
$.each(rowSelected, function (index, row) { |
|||
id.push(row.id); |
|||
}) |
|||
|
|||
//发送ajax |
|||
$.modal({ |
|||
body: '确定要删除所选用户吗?', |
|||
ok: function () { |
|||
$.ajax({ |
|||
url: '/user/10', |
|||
method: 'delete', |
|||
data: {id}, |
|||
}).then(response => { |
|||
if (response.code === 200) { |
|||
$.toasts({ |
|||
type: 'success', |
|||
delay: 1500, |
|||
content: '删除成功', |
|||
onHidden: function () { |
|||
|
|||
$('#table').bootstrapTable('refresh'); |
|||
$('#table').bootstrapTable('selectPage', 1)//跳转到第一页 |
|||
//把批量删除按钮变成禁止点击 |
|||
$('.batch-btn').attr('disabled', true) |
|||
} |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
}) |
|||
|
|||
|
|||
//处理批量按钮的disabled状态 |
|||
function batchBtnStatusHandle() { |
|||
let rowSelected = $("#table").bootstrapTable('getSelections'); |
|||
if (rowSelected.length > 0) { |
|||
$('.batch-btn').attr('disabled', false) |
|||
} else { |
|||
$('.batch-btn').attr('disabled', true) |
|||
} |
|||
} |
|||
|
|||
|
|||
function formatRole(val, rows) { |
|||
switch (val) { |
|||
case 1: |
|||
return '经理' |
|||
case 2: |
|||
return '组长' |
|||
case 3: |
|||
return '研发组长' |
|||
case 4: |
|||
return '客服' |
|||
case 5: |
|||
return '文章审核员' |
|||
case 6: |
|||
return '销售' |
|||
default: |
|||
return '<span class="badge text-bg-danger">未分配</span>' |
|||
} |
|||
|
|||
} |
|||
|
|||
function formatGender(val, rows) { |
|||
return val === true ? '男' : '女'; |
|||
} |
|||
|
|||
//格式化列数据演示 val:当前数据 rows:当前整行数据 |
|||
function formatStatus(val, rows) { |
|||
return val === 1 ? '<span class="badge text-bg-success">正常</span>' : '<span class="badge text-bg-danger">停用</span>'; |
|||
} |
|||
|
|||
|
|||
//格式化列数据演示 val:当前数据 rows:当前整行数据 |
|||
function formatAction(val, rows) { |
|||
|
|||
let html = ''; |
|||
|
|||
|
|||
//第一个按钮(你可以在这里判断用户是否有修改权限来决定是否显示) |
|||
html += `<button type="button" class="btn btn-light btn-sm edit-btn" data-bs-toggle="tooltip" data-bs-placement="top" |
|||
data-bs-title="修改用户"><i class="bi bi-pencil"></i></button>`; |
|||
|
|||
//第二个按钮 |
|||
html += `<button type="button" class="btn btn-light mx-1 btn-sm del-btn" data-bs-toggle="tooltip" data-bs-placement="top" |
|||
data-bs-title="删除用户"><i class="bi bi-trash3"></i></button>` |
|||
|
|||
|
|||
//第三个按钮 |
|||
html += `<button type="button" class="btn btn-light btn-sm role-btn" data-bs-toggle="tooltip" data-bs-placement="top" |
|||
data-bs-title="分配角色"><i class="bi bi-person-square"></i></button>` |
|||
|
|||
return html; |
|||
} |
|||
|
|||
//搜索处理 |
|||
$('.bsa-querySearch-btn').on('click', function () { |
|||
$('#table').bootstrapTable('refresh'); |
|||
$('#table').bootstrapTable('selectPage', 1)//跳转到第一页 |
|||
}) |
|||
|
|||
//重置处理 |
|||
$('.bsa-reset-btn').on('click', function () { |
|||
|
|||
//把所有的字段都恢复默认值 |
|||
$('#username').val(''); |
|||
$('#phone').val(''); |
|||
$('#beginTime').val(''); |
|||
$('#endTime').val(''); |
|||
$('#status').val('0'); |
|||
//刷新回到第一页 |
|||
$('#table').bootstrapTable('refresh'); |
|||
$('#table').bootstrapTable('selectPage', 1)//跳转到第一页 |
|||
}) |
|||
|
|||
//==============================日期时间插件==================================== |
|||
|
|||
|
|||
//日期时间的翻译，由于该插件没有内置中文翻译，需要手动通过选项进行翻译 |
|||
let td_zh = { |
|||
today: '回到今天', |
|||
clear: '清除选择', |
|||
close: '关闭选取器', |
|||
selectMonth: '选择月份', |
|||
previousMonth: '上个月', |
|||
nextMonth: '下个月', |
|||
selectYear: '选择年份', |
|||
previousYear: '上一年', |
|||
nextYear: '下一年', |
|||
selectDecade: '选择十年', |
|||
previousDecade: '上一个十年', |
|||
nextDecade: '下一个十年', |
|||
previousCentury: '上一个世纪', |
|||
nextCentury: '下一个世纪', |
|||
pickHour: '选取时间', |
|||
incrementHour: '增量小时', |
|||
decrementHour: '递减小时', |
|||
pickMinute: '选取分钟', |
|||
incrementMinute: '增量分钟', |
|||
decrementMinute: '递减分钟', |
|||
pickSecond: '选取秒', |
|||
incrementSecond: '增量秒', |
|||
decrementSecond: '递减秒', |
|||
toggleMeridiem: '切换上下午', |
|||
selectTime: '选择时间', |
|||
selectDate: '选择日期', |
|||
} |
|||
|
|||
//自定义日期格式插件 |
|||
let td6 = new tempusDominus.TempusDominus(document.getElementById('beginTime'), { |
|||
//本地化控制 |
|||
localization: { |
|||
...td_zh,//展开语法 |
|||
format: 'yyyy-MM-dd HH:mm:ss', |
|||
}, |
|||
//布局控制 |
|||
display: { |
|||
//视图模式(选择年份视图最先开始) |
|||
viewMode: 'calendar', |
|||
components: { |
|||
//是否开启日历，false:则是时刻模式 |
|||
calendar: true, |
|||
//支持年份选择 |
|||
year: true, |
|||
//是否开启月份选择 |
|||
month: true, |
|||
//支持日期选择 |
|||
date: true, |
|||
//底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效 |
|||
clock: true, |
|||
//时 |
|||
hours: true, |
|||
//分 |
|||
minutes: true, |
|||
//秒 |
|||
seconds: true |
|||
}, |
|||
//图标 |
|||
icons: { |
|||
time: 'bi bi-clock', |
|||
date: 'bi bi-calendar', |
|||
up: 'bi bi-arrow-up', |
|||
down: 'bi bi-arrow-down', |
|||
previous: 'bi bi-chevron-left', |
|||
next: 'bi bi-chevron-right', |
|||
today: 'bi bi-calendar-check', |
|||
clear: 'bi bi-trash', |
|||
close: 'bi bi-x', |
|||
}, |
|||
//视图底部按钮 |
|||
buttons: { |
|||
today: true, |
|||
clear: true, |
|||
close: true, |
|||
}, |
|||
} |
|||
}); |
|||
let td7 = new tempusDominus.TempusDominus(document.getElementById('endTime'), { |
|||
//本地化控制 |
|||
localization: { |
|||
...td_zh,//展开语法 |
|||
format: 'yyyy-MM-dd HH:mm:ss', |
|||
//是否使用24小时制,比如3.15分会变成15.15 |
|||
// hourCycle: 'h24' |
|||
}, |
|||
//布局控制 |
|||
display: { |
|||
//视图模式(选择年份视图最先开始) |
|||
viewMode: 'calendar', |
|||
components: { |
|||
//是否开启日历，false:则是时刻模式 |
|||
calendar: true, |
|||
//支持年份选择 |
|||
year: true, |
|||
//是否开启月份选择 |
|||
month: true, |
|||
//支持日期选择 |
|||
date: true, |
|||
//底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效 |
|||
clock: true, |
|||
//时 |
|||
hours: true, |
|||
//分 |
|||
minutes: true, |
|||
//秒 |
|||
seconds: true |
|||
}, |
|||
//图标 |
|||
icons: { |
|||
time: 'bi bi-clock', |
|||
date: 'bi bi-calendar', |
|||
up: 'bi bi-arrow-up', |
|||
down: 'bi bi-arrow-down', |
|||
previous: 'bi bi-chevron-left', |
|||
next: 'bi bi-chevron-right', |
|||
today: 'bi bi-calendar-check', |
|||
clear: 'bi bi-trash', |
|||
close: 'bi bi-x', |
|||
}, |
|||
//视图底部按钮 |
|||
buttons: { |
|||
today: true, |
|||
clear: true, |
|||
close: true, |
|||
}, |
|||
} |
|||
}); |
|||
//事件监听设定起始时间为td7实例的选中时间 |
|||
td6.subscribe(tempusDominus.Namespace.events.change, (e) => { |
|||
td7.updateOptions({ |
|||
restrictions: { |
|||
minDate: e.date, |
|||
}, |
|||
}); |
|||
}); |
|||
//事件监听设定起始时间为td6实例的选中时间 |
|||
td7.subscribe(tempusDominus.Namespace.events.change, (e) => { |
|||
td6.updateOptions({ |
|||
restrictions: { |
|||
maxDate: e.date, |
|||
}, |
|||
}); |
|||
}); |
|||
|
|||
//下拉框美化插件，原生的bootstrap它会调用系统的那个下拉菜单 |
|||
$('select').selectpicker(); |
|||
}); |
|||
|
|||
|
|||
</script> |
|||
#end |
|||
Loading…
Reference in new issue