ghy-all/ghy-admin/src/main/resources/templates/order/pc-master.html

710 lines
29 KiB
HTML

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('发单列表')"/>
<th:block th:include="include :: layout-latest-css"/>
<th:block th:include="include :: ztree-css"/>
<th:block th:include="include :: datetimepicker-css" />
<style>
#orderSearchBtnGroup {
margin-top: 10px;
}
#allOrServing {
width: 70px;
padding: 6px 9px;
height: 33px;
font-size: 14px;
border: 1px solid #e5e6e7;
background: #fff none;
border-radius: 4px;
vertical-align: middle;
}
.flex-board {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.flex-board-no-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
}
.cx-select-input {
width: 100px;
}
.normal-select-input {
width: 100px;
}
.normal-input {
width: 100px;
}
.long-input {
width: 400px;
}
.active-condition-btn {
background-color: #1c84c6;
border-color: #1c84c6;
color: #fff;
}
</style>
</head>
<body class="gray-bg">
<div class="ui-layout-center">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="order-form" class="m">
<input type="hidden" id="deptId" name="deptId">
<input type="hidden" id="parentId" name="parentId">
<div class="condition-btn">
<select id="allOrServing">
<option value="">全部</option>
<option value="">在途</option>
</select>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'待付款', orderStatus: 0, sysPayStatus: 0, payMode: '02'})">
待付款
(<span id="nonPaidOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'已发布', orderStatus: 0, workerId: -1})">
已发布
(<span id="publishedOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'已接单', orderStatus: 1})">
已接单
(<span id="acceptedOrderNum">0</span>)
</a>
<!-- <a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatus: 1, isCall: '01'})">-->
<!-- 未约时-->
<!-- </a>-->
<!-- <a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatus: 1, isCall: '02'})">-->
<!-- 未排班-->
<!-- </a>-->
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'待上门', orderStatus: 2})">
待上门
(<span id="waitForDoorOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'进行中', orderStatus: 3})">
进行中
(<span id="servingOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'确认审核', orderStatus: 4})">
确认审核
(<span id="confirmingOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'完成', orderStatus: 5})">
完成
(<span id="finishedOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'关闭', orderStatus: 6})">
关闭
(<span id="canceledOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectOnDoorOrderToday(this)">
今日待上门
(<span id="todayOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectOnDoorOrderTomorrow(this)">
明日待上门
(<span id="tomorrowOrderNum">0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'售后', orderStatus: -1})">
售后
(<span>0</span>)
</a>
<a class="btn btn-default btn-outline" onclick="selectConditionBtn(this, {orderStatusName:'急报中', orderStatus: -1})">
急报中
(<span>0</span>)
</a>
</div>
<div class="flex-board">
<div class="flex-board m-t">
区域筛选:
<div id="areaCxSelect" class="flex-board-no-wrap">
<select class="province form-control cx-select-input m-r" name="province" id="province" data-first-title="选择省" onchange="selectRegion('province', 'city')"></select>
<select class="city form-control cx-select-input m-r" name="city" id="city" data-first-title="选择市" onchange="selectRegion('city', 'district')"></select>
<select class="district form-control cx-select-input m-r" name="district" id="district" data-first-title="选择区" onchange="selectRegion('district', 'street')"></select>
<select class="street form-control cx-select-input m-r" name="streetId" id="streetId" data-first-title="选择街道" ></select>
</div>
</div>
<div class="flex-board m-t">
类别筛选:
<div id="categoryCxSelect" class="flex-board-no-wrap">
<select class="category1 form-control cx-select-input m-r" name="category1" id="category1" data-first-title="选择一类"></select>
<select class="category2 form-control cx-select-input m-r" name="category2" id="category2" data-first-title="选择二类"></select>
<select class="category3 form-control cx-select-input m-r" name="category3" id="category3" data-first-title="选择三类"></select>
<select class="category4 form-control cx-select-input m-r" name="category4" id="category4" data-first-title="选择四类" ></select>
</div>
</div>
<div class="flex-board-no-wrap m-t">
<label class="form-control-label">订单查询:</label>
<input name="keywords" id="keywords" type="text" class="form-control long-input m-r" placeholder="请输入订单号、姓名、电话或地址、品牌、规格">
</div>
<div class="m-t">
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
class="fa fa-search"></i>&nbsp;搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="resetForm()"><i
class="fa fa-refresh"></i>&nbsp;重置</a>
</div>
</div>
</form>
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<div class="btn-group-sm" role="group">
<a class="btn btn-warning" onclick="$.table.exportExcel()"
shiro:hasPermission="order:order:export">
<i class="fa fa-download"></i> 导出
</a>
<a class="btn btn-default" onclick="mergePay()">
<i class="fa fa-money"></i> 付款
</a>
<a class="btn btn-default" onclick="batchChangeInsurance()">
<i class="fa fa-money"></i> 批量选择保险
</a>
<!-- <a class="btn btn-default" onclick="showOrderWorker()">-->
<!-- <i class="fa fa-money"></i> 指派-->
<!-- </a>-->
</div>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: jquery-cxselect-js" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
var payTypes = [[${@dict.getType('pay_type')}]];
var orderTypes = [[${@dict.getType('goods_category_type')}]];
var orderModes = [[${@dict.getType('order_mode')}]];
var payModes = [[${@dict.getType('pay_mode')}]];
var payStatus = [[${@dict.getType('pay_status')}]];
var orderStatus = [[${@dict.getType('order_status')}]];
var editFlag = [[${@permission.hasPermi('order:order:edit')}]];
var prefix = ctx + "order/master";
var customParams = {};
$(function () {
var panehHidden = false;
if ($(this).width() < 769) {
panehHidden = true;
}
$('body').layout({initClosed: panehHidden, west__size: 185});
// 回到顶部绑定
if ($.fn.toTop !== undefined) {
var opt = {
win: $('.ui-layout-center'),
doc: $('.ui-layout-center')
};
$('#scroll-up').toTop(opt);
}
initOrderList();
$.ajax({
type: "POST",
dataType:"json",
url: ctx + "system/area/list",
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#areaCxSelect').cxSelect({
selects: ['province', 'city', 'district', 'street'],
jsonValue: 'areaId',
jsonName: 'areaName',
data: result.data
});
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
$(".date-input").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",
autoclose: true
});
$.ajax({
type: "POST",
dataType:"json",
url: ctx + "goods/deptcategory/app/list",
data: JSON.stringify({deptId: 101, goodsCategoryId: 1}),
contentType: 'application/json',
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#categoryCxSelect').cxSelect({
selects: ['category1', 'category2', 'category3', 'category4'],
jsonValue: 'deptGoodsCategoryId',
jsonName: 'goodsCategoryName',
jsonSub: 'child',
data: result.data
});
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
changeOrderMode();
<!-- 不同状态订单数量统计-->
$.ajax({
type: "GET",
dataType:"json",
url: prefix + '/differentStatus/count',
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#acceptedOrderNum').text(result.data.acceptedOrderNum);
$('#canceledOrderNum').text(result.data.canceledOrderNum);
$('#confirmingOrderNum').text(result.data.confirmingOrderNum);
$('#finishedOrderNum').text(result.data.finishedOrderNum);
$('#servingOrderNum').text(result.data.servingOrderNum);
$('#waitForDoorOrderNum').text(result.data.waitForDoorOrderNum);
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
<!-- 待付款订单数量统计-->
$.ajax({
type: "GET",
dataType:"json",
url: prefix + '/count',
data: {orderStatus: 0, sysPayStatus: 0, payMode: '02'},
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#nonPaidOrderNum').text(result.data);
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
<!-- 已发布订单数量统计-->
$.ajax({
type: "GET",
dataType:"json",
url: prefix + '/count',
data: {orderStatus: 0, workerId: -1},
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#publishedOrderNum').text(result.data);
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
<!-- 今日和明日单数量统计-->
var date = new Date();
$.ajax({
type: "GET",
dataType:"json",
url: prefix + '/count',
data: {
orderStatus: 2,
expectTimeStart: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00",
expectTimeEnd: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 23:59:59"
},
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#todayOrderNum').text(result.data);
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
$.ajax({
type: "GET",
dataType:"json",
url: prefix + '/count',
data: {
orderStatus: 2,
expectTimeStart: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1) + " 00:00:00",
expectTimeEnd: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1) + " 23:59:59"
},
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#tomorrowOrderNum').text(result.data);
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
});
function changeOrderMode(orderMode) {
if (orderMode === 'B2B') {
$("#B2BOptions").show();
$("#B2COptions").hide();
} else if (orderMode === 'B2C') {
$("#B2BOptions").hide();
$("#B2COptions").show();
} else {
$("#B2BOptions").hide();
$("#B2COptions").hide();
}
}
function selectRegion(regionLevelName, nextRegionLevelName) {
var regionId = $("#" + regionLevelName).val();
if ($.common.isEmpty(regionId)) {
return;
}
//Ajax调用处理
$.ajax({
type: "POST",
dataType:"json",
url: ctx + "system/area/list",
data: {parentCode: regionId},
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#areaCxSelect').cxSelect({
selects: [nextRegionLevelName],
jsonValue: 'areaId',
jsonName: 'areaName',
data: result.data
});
} else {
$.modal.msgError("数据加载错误,请重试!")
}
}
})
}
function initOrderList() {
var options = {
url: prefix + "/list",
uniqueId: 'id',
exportUrl: prefix + "/export",
queryParams: queryParams,
sortName: "createTime",
sortOrder: "desc",
modalName: "订单",
columns: [
{
checkbox: true
},
{
title: "序号",
formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},
{
field: 'id',
title: '订单ID',
visible: false
},
{
field: 'goods',
title: '订单信息',
formatter: function (value, row) {
return '<div style="display:flex;justify-content: center;align-items: center;">'
+ '<img decoding="async" src="' + value.goodsImgUrl + '" width="100" height="100" />'
+ '<div>'
+ '<p>' + row.code + '<p/>'
+ '<p> ' + row.consoleGoodsName + '<p/> '
+ '<p> 联系人:' + row.addressName + '</p> '
+ '<p> 联系电话:' + row.addressPhone + '</p> '
+ '<p> 联系地址:' + row.address + '</p> '
+ '<p> 下单时间:' + row.createTime + '</p> '
+ '<p> 预约时间:' + row.mixExpectTime + '</p> '
+ '<p> 下单总金额:' + row.financialMasterMoney + '元,师傅实收金额: '+ row.financialMasterPayMoney + ' </p> '
+ '</p>'
+ '</p>';
}
},
{
field: 'orderStatus',
title: '订单状态',
align: 'center',
formatter: function (value, row, index) {
return $.table.selectDictLabel(orderStatus, value);
}
},
{
field: 'worker',
title: '师傅接单信息',
formatter: function (value, row, index) {
if(value){
return '<p>' + value.name + '</p>'
+ '<p>接单时间:' + row.createTime + '</p>';
}
}
},
{
field: 'lastCallTime',
title: '最近联系时间'
},
{
title: '操作',
align: 'left',
formatter: function (value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="detail(\'' + row.id + '\')"><i class="fa fa-info"></i>查看</a> ');
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="callDetail(\'' + row.id + '\')"><i class="fa fa-info"></i>拨号详情</a> ');
if(row.orderStatus == 0 || row.orderStatus == 1){
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="orderMasterCancel(\'' + row.id + '\')"></i>商家退单</a> ');
}
if(row.orderStatus == 5){
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="finishImgs(\'' + row.id + '\')"></i>完单图片</a> ');
}
if (row.payStatus == 0) {
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="showPayQrcode(\'' + row.id + '\')"></i>付款</a> ');
}
if (row.insuranceId){
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)"></i>已投保险</a> ');
} else {
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="pcOrderInsurance(\'' + row.id + '\')"></i>选择保险</a> ');
}
return actions.join('');
}
},
{
field: 'goodsWorker',
title: '商家信息',
formatter: function (value, row, index) {
<!-- return '<small>' + value.name + '</small><br>'-->
<!-- + '<small>' + value.phone + '</small>';-->
}
},
{
field: 'changeMoney',
title: '商家追加金额',
align: 'center',
visible: false
},
{
field: 'orderImgs',
title: '完单图片'
},
{
field: 'payMode',
title: '商家付费模式',
align: 'center',
formatter: function (value, row, index) {
return $.table.selectDictLabel(payModes, value);
}
},
{
field: 'orderMode',
title: '下单模式',
align: 'center',
formatter: function (value, row, index) {
return $.table.selectDictLabel(orderModes, value);
}
},{
field: 'orderType',
title: '订单类型',
align: 'center',
formatter: function (value, row, index) {
return $.table.selectDictLabel(orderTypes, value);
}
},
{
field: 'payType',
title: '付款类型',
align: 'center',
formatter: function (value, row, index) {
return $.table.selectDictLabel(payTypes, value);
}
},
{
field: 'payStatus',
title: '付款状态',
align: 'center',
formatter: function (value, row, index) {
return $.table.selectDictLabel(payStatus, value);
}
},
{
field: 'payTime',
title: '付款时间'
}]
};
$.table.init(options);
}
function queryParams(params) {
var search = $.table.queryParams(params);
Object.assign(search, customParams)
return search;
}
function detail(id) {
var url = "order/goods?orderId=" + id;
$.modal.open("商品信息", url);
}
function orderDetailReject(id) {
$.modal.confirm("确定要退单吗?", function() {
const url = "detail/reject";
const data = { "id": id };
$.operate.post(url, data);
});
}
function callDetail(id) {
var url = "order/record?orderId=" + id;
$.modal.open("拨号记录", url);
}
// 商家退单
function orderMasterCancel(id){
$.modal.confirm("确定要取消订单吗?", function() {
const url = "cancel";
const data = { "orderMasterId": id };
$.operate.post(url, data);
});
}
function finishImgs(id){
var url = "order/imgs?orderId=" + id;
$.modal.open("拨号记录", url);
}
function orderMasterReject(id) {
$.modal.confirm("确定要退单吗?", function() {
const url = "console/cancel";
const data = { "id": id };
$.operate.post(url, data);
});
}
function changeConditionBtnChosenStyle(e) {
$('.condition-btn .btn').removeClass('active-condition-btn');
$(e).addClass('active-condition-btn');
}
function selectConditionBtn(e, params = {}) {
changeConditionBtnChosenStyle(e);
searchOrderList(params)
}
function selectOnDoorOrderToday(e) {
changeConditionBtnChosenStyle(e);
var date = new Date();
selectConditionBtn(e, {
orderStatus: 2,
expectTimeStart: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00",
expectTimeEnd: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 23:59:59"
})
}
function selectOnDoorOrderTomorrow(e) {
changeConditionBtnChosenStyle(e);
var date = new Date();
selectConditionBtn(e, {
orderStatus: 2,
expectTimeStart: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1) + " 00:00:00",
expectTimeEnd: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1) + " 23:59:59"
})
}
function searchOrderList(params) {
customParams = params;
$.table.search();
}
function resetForm() {
$.form.reset();
customParams = {};
changeConditionBtnChosenStyle();
$.table.search();
}
function showPayQrcode(id) {
var url = "payQrcode/" + id;
<!-- $.modal.open("支付二维码", url, 290, 360);-->
layer.open({
type: 2,
area: ['290px', '360px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: '支付二维码',
content: url,
btn: ['关闭'],
// 弹层外区域关闭
shadeClose: true,
cancel: function(index) {
return true;
}
});
}
function mergePay() {
table.set();
var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
if (rows.length === 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
showPayQrcode(rows.join());
}
function showOrderWorker() {
table.set();
var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
if (rows.length === 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
var url = "pcOrderWorker/" + rows.join(",");
layer.open({
type: 2,
area: ['800px', '450px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: '指派师傅',
content: url,
// 弹层外区域关闭
shadeClose: true
});
}
function pcOrderInsurance(id) {
var url = ctx + "order/master/pcOrderInsurance/" + id;
$.modal.open("选择保险", url, '600', '300');
}
function batchChangeInsurance() {
table.set();
var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
if (rows.length === 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
var url = ctx + "order/master/batchChangeInsurance/" + rows.join(",");
$.modal.open("批量选择保险", url, '600', '300');
}
</script>
</body>
</html>