<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
|
<title>下单任务列表</title>
|
<link rel="stylesheet" type="text/css" href="/admin/layui/css/layui.css"/>
|
<link rel="stylesheet" type="text/css" href="/admin/css/admin.css"/>
|
<style>
|
.layui-table-cell {
|
height: 50px;
|
white-space: normal;
|
max-height: 50px;
|
}
|
|
|
#add_task {
|
padding: 10px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="page-content-wrap">
|
<form class="layui-form" action="" lay-filter='search'>
|
<div class="layui-form-item">
|
<div class="layui-inline">
|
<input type="text" name="keyword" id="keyword" placeholder="按口令内容搜索" autocomplete="off"
|
class="layui-input">
|
</div>
|
<div class="layui-inline">
|
<input type="text" name="startDate" id="startDate" placeholder="开始日期" autocomplete="off"
|
class="layui-input" readonly>
|
</div>
|
<div class="layui-inline">
|
<input type="text" name="endDate" id="endDate" placeholder="结束日期" autocomplete="off"
|
class="layui-input" readonly>
|
</div>
|
<div class="layui-inline">
|
<select name="status" id="status">
|
<option value="">全部状态</option>
|
<option value="0">未分配</option>
|
<option value="1">分配中</option>
|
<option value="2">已分配</option>
|
</select>
|
</div>
|
<div class="layui-inline">
|
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="search" id="search"><i
|
class="layui-icon layui-icon-search"></i>搜索
|
</button>
|
<a href="javascript:void();" class="layui-btn layui-btn-warm" onclick="showCreateTask()"><i
|
class="layui-icon layui-icon-add-circle"></i> 添加任务</a>
|
</div>
|
</div>
|
</form>
|
<div>
|
<table class="layui-table" lay-even lay-skin="nob" id="table">
|
|
</table>
|
</div>
|
</div>
|
|
<div id="add_task" style="display: none; padding: 20px;">
|
<form class="layui-form" action="" lay-filter='add-task'>
|
<div class="layui-form-item">
|
<label class="layui-form-label">口令内容</label>
|
<div class="layui-input-block">
|
<textarea type="text" name="keywordContent" rows="5" required lay-verify="required" placeholder="请输入口令内容"
|
autocomplete="off" class="layui-textarea"></textarea>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">商品来源</label>
|
<div class="layui-input-block">
|
<select name="productSource" required lay-verify="required">
|
<option value="">请选择商品来源</option>
|
<option value="1">抖音</option>
|
<option value="2">快手</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">商品名称</label>
|
<div class="layui-input-block">
|
<textarea type="text" name="productName" rows="3" required lay-verify="required" placeholder="请输入商品名称"
|
autocomplete="off" class="layui-textarea"></textarea>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">店铺名称</label>
|
<div class="layui-input-block">
|
<input type="text" name="shopName" placeholder="请输入店铺名称" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">所需下单数量</label>
|
<div class="layui-input-block">
|
<input type="number" name="requiredOrderCount" required lay-verify="required|number" min="1"
|
placeholder="请输入所需下单数量" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">收货周期(小时)</label>
|
<div class="layui-input-block">
|
<input type="number" name="receiveCycleHours" required lay-verify="required|number" min="1"
|
placeholder="请输入收货周期(小时)" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">下单开始时间</label>
|
<div class="layui-input-block">
|
<input type="text" name="orderStartTime" id="orderStartTime" required lay-verify="required"
|
placeholder="请选择下单开始时间" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">下单结束时间</label>
|
<div class="layui-input-block">
|
<input type="text" name="orderEndTime" id="orderEndTime" required lay-verify="required"
|
placeholder="请选择下单结束时间" autocomplete="off" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<button class="layui-btn" lay-submit lay-filter="add-task">立即创建</button>
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
</div>
|
</div>
|
</form>
|
</div>
|
|
<script src="/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
|
<script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
<script>
|
// 修改任务信息
|
function updateTask(id) {
|
var layerIndex = layer.open({
|
title: "修改下单任务信息",
|
type: 2,
|
area: ['600px', '600px'],
|
shade: 0.3,
|
shadeClose: false,
|
resize: false,
|
content: '/admin/order-task-update.html?id=' + id,
|
btn: ['确定', '取消'],
|
yes: function (index) {
|
//submit方法为弹框内容中的方法
|
window["layui-layer-iframe" + index].submit(function (res) {
|
let fdata = {
|
id: id
|
};
|
for (let key in res) {
|
if (key.indexOf(".") >= 0) {
|
let k1 = key.split(".")[0];
|
let k2 = key.split(".")[1];
|
if (k1 in fdata) {
|
} else {
|
fdata[k1] = {};
|
}
|
fdata[k1][k2] = res[key];
|
} else {
|
fdata[key] = res[key]
|
}
|
}
|
for (let key in fdata) {
|
if (typeof (fdata[key]) == 'object') {
|
fdata[key] = JSON.stringify(fdata[key]);
|
}
|
}
|
try {
|
var loadIndex = layer.load(1);
|
$.post("/admin/api/ordertask/js2/update", fdata, function (response) {
|
layer.close(loadIndex);
|
if (response.code == 0) {
|
layer.close(layerIndex);
|
layer.msg("更改成功");
|
// 重新加载表格
|
tableIns.reload();
|
} else {
|
layer.msg(response.msg);
|
}
|
}, 'json').fail(function (jqXHR, textStatus, errorThrown) {
|
layer.close(loadIndex);
|
layer.msg("网络请求失败");
|
});
|
} catch (e) {
|
console.log(e);
|
}
|
});
|
},
|
cancel: function () {
|
}
|
});
|
}
|
|
// 删除任务
|
function deleteTask(id) {
|
layer.confirm('确定要删除这个任务吗？', {
|
btn: ['确定', '取消']
|
}, function (index) {
|
$.post("/admin/api/ordertask/js2/delete", {"id": id}, function (response) {
|
if (response.code == 0) {
|
layer.msg("删除成功");
|
// 重新加载表格
|
tableIns.reload();
|
} else {
|
layer.msg(response.msg);
|
}
|
}, 'json').fail(function (jqXHR, textStatus, errorThrown) {
|
layer.msg("网络请求失败");
|
});
|
layer.close(index);
|
});
|
}
|
|
// 分配任务
|
function assignTask(id) {
|
layer.confirm('确定要分配这个任务吗？', {
|
btn: ['确定', '取消']
|
}, function (index) {
|
$.post("/admin/api/ordertask/js2/assign", {"taskId": id}, function (response) {
|
if (response.code == 0) {
|
layer.msg("分配成功");
|
// 重新加载表格
|
tableIns.reload();
|
} else {
|
layer.msg(response.msg);
|
}
|
}, 'json').fail(function (jqXHR, textStatus, errorThrown) {
|
layer.msg("网络请求失败");
|
});
|
layer.close(index);
|
});
|
}
|
|
// 查看已分配设备
|
function viewAssignedClients(id) {
|
var layerIndex = layer.open({
|
title: "已分配设备列表",
|
type: 2,
|
area: ['1200px', '600px'],
|
shade: 0.3,
|
shadeClose: false,
|
resize: false,
|
content: '/admin/order-task-assigned-clients.html?taskId=' + id
|
});
|
}
|
|
function formatDateTime(date, format) {
|
var now = date;
|
var year = now.getFullYear();
|
var month = (now.getMonth() + 1).toString().padStart(2, '0');
|
var day = now.getDate().toString().padStart(2, '0');
|
var hours = now.getHours().toString().padStart(2, '0');
|
var minutes = now.getMinutes().toString().padStart(2, '0');
|
var seconds = now.getSeconds().toString().padStart(2, '0');
|
|
// 默认格式
|
if (!format) {
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
}
|
|
// 自定义格式支持
|
return format
|
.replace('YYYY', year)
|
.replace('MM', month)
|
.replace('DD', day)
|
.replace('HH', hours)
|
.replace('mm', minutes)
|
.replace('ss', seconds);
|
}
|
|
function showCreateTask() {
|
// 开始与结束时间赋当前时间
|
// 创建任务
|
$("input[name=orderStartTime]").val(formatDateTime(new Date()));
|
$("input[name=orderEndTime]").val(formatDateTime(new Date(new Date().getTime()+1000*60*60*24)));
|
var index = layer.open({
|
type: 1,
|
title: "创建下单任务",
|
content: $("#add_task"),
|
area: ['600px', '700px'],
|
end: function (e) {
|
$("#add_task").css("display", "none");
|
}
|
});
|
}
|
|
layui.use(['form', 'jquery', 'layer', 'table', 'laydate'], function () {
|
var table = layui.table;
|
var form = layui.form;
|
var $ = layui.jquery;
|
var laydate = layui.laydate;
|
|
// 日期控件初始化
|
laydate.render({
|
elem: '#startDate',
|
theme: '#448aff'
|
});
|
|
laydate.render({
|
elem: '#endDate',
|
theme: '#448aff'
|
});
|
|
laydate.render({
|
elem: '#orderStartTime',
|
type: 'datetime',
|
theme: '#448aff'
|
});
|
|
laydate.render({
|
elem: '#orderEndTime',
|
type: 'datetime',
|
theme: '#448aff'
|
});
|
|
let table_option = {
|
elem: '#table',
|
url: '/admin/api/ordertask/js2/list',
|
where: {
|
'keyword': $("#keyword").val(),
|
'startDate': $("#startDate").val(),
|
'endDate': $("#endDate").val(),
|
'status': $("#status").val()
|
},
|
parseData: function(res) { //res 即为原始返回的数据
|
return {
|
"code": res.code, //解析接口状态
|
"msg": res.msg, //解析提示文本
|
"count": res.data.count, //解析数据长度
|
"data": res.data.list //解析数据列表
|
}
|
},
|
page: true,
|
cols: [[
|
{field: 'id', title: '任务ID', width: 80, fixed: 'left'},
|
{field: 'keywordContent', title: '口令内容', width: 150},
|
{
|
field: 'productSource', title: '商品来源', width: 90, templet: function (d) {
|
if (d.productSource == 1) {
|
return '抖音';
|
} else if (d.productSource == 2) {
|
return '快手';
|
}
|
return '未知';
|
}
|
},
|
{field: 'productName', title: '商品名称', width: 150},
|
{field: 'shopName', title: '店铺名称', width: 120},
|
{field: 'requiredOrderCount', title: '需下单数', width: 90},
|
{field: 'completedOrderCount', title: '已下单数', width: 90},
|
{field: 'receivedOrderCount', title: '已收货数', width: 90},
|
{field: 'reviewedOrderCount', title: '已评价数', width: 90},
|
{field: 'receiveCycleHours', title: '收货周期(小时)', width: 120},
|
{field: 'orderStartTime', title: '下单开始时间', width: 160},
|
{field: 'orderEndTime', title: '下单结束时间', width: 160},
|
{field: 'createTime', title: '创建时间', width: 160},
|
{
|
field: 'status', title: '状态', width: 100, templet: function (d) {
|
if (d.status == 0) {
|
return '<span style="color: #999">未分配</span>';
|
} else if (d.status == 1) {
|
return '<span style="color: #ff9900">分配中</span>';
|
} else if (d.status == 2) {
|
return '<span style="color: #009900">已分配</span>';
|
}
|
return '未知';
|
}
|
},
|
{
|
field: '', title: '操作', width: 200, align: 'center', fixed:"right", templet: function (d) {
|
let html = '<div>';
|
html += '<a href="javascript:void(0)" onclick="updateTask(' + d.id + ')" class="layui-table-link">修改</a> ';
|
html += '<a href="javascript:void(0)" onclick="deleteTask(' + d.id + ')" class="layui-table-link">删除</a> ';
|
if (d.status == 0) {
|
html += '<a href="javascript:void(0)" onclick="assignTask(' + d.id + ')" class="layui-table-link">分配</a>';
|
}else{
|
html += '<a href="javascript:void(0)" onclick="viewAssignedClients(' + d.id + ')" class="layui-table-link">已分配设备</a>';
|
}
|
html += '</div>';
|
return html;
|
}
|
}
|
]]
|
};
|
|
//第一个实例
|
let tableIns = table.render(table_option);
|
|
//监听提交
|
form.on('submit(search)', function (data) {
|
tableIns.reload({
|
where: data.field,
|
page: {
|
curr: 1 //重新从第 1 页开始
|
}
|
});
|
return false;
|
});
|
|
form.on('submit(add-task)', function (data) {
|
$.post("/admin/api/ordertask/js2/add", data.field, function (response) {
|
if (response.code == 0) {
|
layer.msg("添加成功");
|
// 关闭弹窗
|
layer.closeAll('page');
|
// 重新加载表格
|
tableIns.reload();
|
} else {
|
layer.msg(response.msg);
|
}
|
}, 'json').fail(function (jqXHR, textStatus, errorThrown) {
|
layer.msg("网络请求失败");
|
});
|
|
return false;
|
});
|
});
|
</script>
|
</body>
|
|
</html>
|
