299 lines
12 KiB
HTML
299 lines
12 KiB
HTML
|
{% extends 'layout.html' %}
|
|||
|
|
|
|||
|
|
{% block content %}
|
|||
|
|
<div class="container">
|
|||
|
|
<div style="margin-bottom:10px">
|
|||
|
|
<a id="btnadd" class="btn btn-success" href="#">
|
|||
|
|
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
|
|||
|
|
新建订单
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel panel-default">
|
|||
|
|
<!-- Default panel contents -->
|
|||
|
|
<div class="panel-heading">
|
|||
|
|
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
|
|||
|
|
部门列表
|
|||
|
|
</div>
|
|||
|
|
<!-- Table -->
|
|||
|
|
<table class="table table-bordered">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>ID</th>
|
|||
|
|
<th>订单ID</th>
|
|||
|
|
<th>商品名称</th>
|
|||
|
|
<th>价格</th>
|
|||
|
|
<th>状态</th>
|
|||
|
|
<th>用户</th>
|
|||
|
|
<th>操作</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{% for item in queryset %}
|
|||
|
|
<tr>
|
|||
|
|
<th>{{ item.id }}</th>
|
|||
|
|
<th>{{ item.oid }}</th>
|
|||
|
|
<td>{{ item.title }}</td>
|
|||
|
|
<td>{{ item.price }}</td>
|
|||
|
|
<td>{{ item.get_status_display }}</td>
|
|||
|
|
<td>{{ item.user.username }}</td>
|
|||
|
|
<td>
|
|||
|
|
<!--在这里给删除按钮class属性增加值btnDelete，不能用id属性，不然只会对第1条记录有效果-->
|
|||
|
|
<input order_id="{{ item.id }}" type="button" class="btn btn-primary btn-xs btnEdit"
|
|||
|
|
value="修改">
|
|||
|
|
<input order_id="{{ item.id }}" order_oid={{ item.oid }} type="button"
|
|||
|
|
class="btn btn-danger btn-xs btnDelete" value="删除">
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
{% endfor %}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<ul class="pagination">
|
|||
|
|
{{ page_nav }}
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<!-- 新建 & 修改 订单的模态窗口 -->
|
|||
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|||
|
|
<div class="modal-dialog" role="document">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
|||
|
|
aria-hidden="true">×</span></button>
|
|||
|
|
<h4 class="modal-title" id="myModalLabel">新建订单</h4>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<!-- novalidate 关闭浏览器的表单验证，用Django来控制检验 -->
|
|||
|
|
<form id='saveForm'>
|
|||
|
|
{% csrf_token %}
|
|||
|
|
{% for field in form %}
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>{{ field.label }}</label>
|
|||
|
|
{{ field }}<span class="error" style="color:#ff0000;"> {{ field.errors.0 }}</span>
|
|||
|
|
</div>
|
|||
|
|
{% endfor %}
|
|||
|
|
{# <button type="submit" class="btn btn-primary">保存</button>#}
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
|
|||
|
|
<button id="btnSave" type="button" class="btn btn-primary">保 存</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 删除订单的模态窗口 -->
|
|||
|
|
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|||
|
|
<div class="modal-dialog" role="document">
|
|||
|
|
<div class="alert alert-danger alert-dismissible fade in" role="alert">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
|||
|
|
aria-hidden="true">×</span></button>
|
|||
|
|
<h4>删除警告</h4>
|
|||
|
|
<p style="margin: 20px 10px;" id="del_msg"></p>
|
|||
|
|
<p style="text-align: right;">
|
|||
|
|
<button id='confirm' type="button" class="btn btn-danger">确认删除</button>
|
|||
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
{% endblock %}
|
|||
|
|
|
|||
|
|
{% block js %}
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
// 定义全局变量，用于存储行ID给后端处理
|
|||
|
|
var DELETE_ID
|
|||
|
|
var EDIT_ID
|
|||
|
|
|
|||
|
|
// 页面加载完成后，执行
|
|||
|
|
$(function () {
|
|||
|
|
bindBtnaddEvent();
|
|||
|
|
bindBtnSaveEvent();
|
|||
|
|
bindBtnDeleteEvent();
|
|||
|
|
bindBtnDeleteSureEvent();
|
|||
|
|
bindBtnEditEvent();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 新建 & 编辑 ->订单
|
|||
|
|
// 新建和编辑共用一个模态窗口
|
|||
|
|
function bindBtnaddEvent() {
|
|||
|
|
$('#btnadd').click(function () {
|
|||
|
|
// 清空对话框表单
|
|||
|
|
$('#saveForm')[0].reset()
|
|||
|
|
|
|||
|
|
// 每次添加时，要将编辑行的全局变量置空
|
|||
|
|
EDIT_ID = undefined
|
|||
|
|
|
|||
|
|
// 点击新建订单按钮
|
|||
|
|
$('#myModal').modal('show')
|
|||
|
|
$('#myModalLabel').text('新建订单')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 订单编辑
|
|||
|
|
function bindBtnEditEvent() {
|
|||
|
|
$('.btnEdit').click(function () {
|
|||
|
|
// 清空对话框表单
|
|||
|
|
$('#saveForm')[0].reset()
|
|||
|
|
|
|||
|
|
// 获取当前行的订单ID
|
|||
|
|
var order_id = $(this).attr('order_id')
|
|||
|
|
EDIT_ID = order_id
|
|||
|
|
// 发送ajax请求到后端，获取编辑行的数据
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/order/detail/',
|
|||
|
|
type: 'get',
|
|||
|
|
data: {
|
|||
|
|
nid: order_id,
|
|||
|
|
},
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.status) {
|
|||
|
|
|
|||
|
|
// 浏览器自动会为文本框添加一个id属性,格式为id_title
|
|||
|
|
// 将返回的data字典通过循环赋值给各自的文本框（说明详见
|
|||
|
|
$.each(res.data, function (name, value) {
|
|||
|
|
$('#id_' + name).val(value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 点击修改订单按钮
|
|||
|
|
$('#myModal').modal('show')
|
|||
|
|
|
|||
|
|
// 修改模态窗口的标题
|
|||
|
|
$('#myModalLabel').text('修改订单')
|
|||
|
|
{#console.log(res.data.title)#}
|
|||
|
|
{#console.log(res.data.price)#}
|
|||
|
|
{#console.log(res.data.status)#}
|
|||
|
|
} else {
|
|||
|
|
alert(res.error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 订单删除询问
|
|||
|
|
function bindBtnDeleteEvent() {
|
|||
|
|
$('.btnDelete').click(function () {
|
|||
|
|
// 点击删除订单按钮
|
|||
|
|
$('#myModal1').modal('show');
|
|||
|
|
DELETE_ID = $(this).attr('order_id')
|
|||
|
|
var oid = $(this).attr('order_oid')
|
|||
|
|
$('#del_msg').text('你确定要删除订单ID为' + oid + '的商品吗？')
|
|||
|
|
|
|||
|
|
console.log(oid)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存&修改订单
|
|||
|
|
function bindBtnSaveEvent() {
|
|||
|
|
$('#btnSave').click(function () {
|
|||
|
|
// 每次先清除span标签内容
|
|||
|
|
$('.error').empty()
|
|||
|
|
|
|||
|
|
//判断来源是新建还是修改
|
|||
|
|
if (EDIT_ID) {
|
|||
|
|
// 编辑订单
|
|||
|
|
doEdit()
|
|||
|
|
} else {
|
|||
|
|
// 新建订单
|
|||
|
|
doAdd()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存ajax请求后端
|
|||
|
|
function doAdd() {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/order/add/',
|
|||
|
|
type: 'post',
|
|||
|
|
data: $('#saveForm').serialize(),
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log(res)
|
|||
|
|
if (res.status) {
|
|||
|
|
// 清空表单 $('#saveForm')是jQuery对象加【0】后-> 变为DOM对象，才有reset方法
|
|||
|
|
$('#saveForm')[0].reset();
|
|||
|
|
$('#myModal').modal('hide');
|
|||
|
|
location.reload();
|
|||
|
|
} else {
|
|||
|
|
// 不成功要返回错误信息,each循环
|
|||
|
|
// 错误信息包括字段名,和错误信息
|
|||
|
|
// 浏览器自动会为文本框添加一个id属性,格式为id_title
|
|||
|
|
// 所以在循环读出错误信息时,拼接一个id属性
|
|||
|
|
// .next()指的是在文本框标签后的第一个标签，也就指span标签，给它设置text()值
|
|||
|
|
// msg是一个列表所以读出msg[0]
|
|||
|
|
$.each(res.error_msg, function (name, msg) {
|
|||
|
|
$('#id_' + name).next().text(msg[0])
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑ajax请求后端
|
|||
|
|
function doEdit() {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/order/edit/' + '?uid=' + EDIT_ID,
|
|||
|
|
type: 'post',
|
|||
|
|
data: $('#saveForm').serialize(),
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log(res)
|
|||
|
|
if (res.status) {
|
|||
|
|
// 清空表单 $('#saveForm')是jQuery对象加【0】后-> 变为DOM对象，才有reset方法
|
|||
|
|
$('#saveForm')[0].reset();
|
|||
|
|
$('#myModal').modal('hide');
|
|||
|
|
location.reload();
|
|||
|
|
} else {
|
|||
|
|
if (res.tips) {
|
|||
|
|
alert(res.tips);
|
|||
|
|
} else {
|
|||
|
|
// 不成功要返回错误信息,each循环
|
|||
|
|
// 错误信息包括字段名,和错误信息
|
|||
|
|
// 浏览器自动会为文本框添加一个id属性,格式为id_title
|
|||
|
|
// 所以在循环读出错误信息时,拼接一个id属性
|
|||
|
|
// .next()指的是在文本框标签后的第一个标签，也就指span标签，给它设置text()值
|
|||
|
|
// msg是一个列表所以读出msg[0]
|
|||
|
|
$.each(res.error_msg, function (name, msg) {
|
|||
|
|
$('#id_' + name).next().text(msg[0])
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确认删除订单
|
|||
|
|
function bindBtnDeleteSureEvent() {
|
|||
|
|
$('#confirm').click(function () {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/order/delete/',
|
|||
|
|
type: 'get',
|
|||
|
|
data: {
|
|||
|
|
'nid': DELETE_ID,
|
|||
|
|
},
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.status) {
|
|||
|
|
$('#myModal1').modal('hide');
|
|||
|
|
// 每次删除完成后，将全局变量置0
|
|||
|
|
DELETE_ID = 0;
|
|||
|
|
location.reload();
|
|||
|
|
} else {
|
|||
|
|
alert('不可遇见原因，删除失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
{% endblock %}
|