|
|
@@ -1,35 +1,373 @@ |
|
|
|
<div class="panel panel-default panel-intro"> |
|
|
|
{:build_heading()} |
|
|
|
<!DOCTYPE html> |
|
|
|
<html> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<!-- import CSS --> |
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div id="app" class="table"> |
|
|
|
<div> |
|
|
|
<div class="header-search" style="width: 100%;margin-bottom: 10px"> |
|
|
|
<span>订单ID:</span> |
|
|
|
<el-input v-model="search.order_id" style="width: 150px;" placeholder="请输入内容"></el-input> |
|
|
|
<span>订单状态:</span> |
|
|
|
<el-select v-model="search.order_status" style="width: 150px;" placeholder="请选择" clearable> |
|
|
|
<el-option |
|
|
|
v-for="item in orderMainStatus" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<span>收款单ID:</span> |
|
|
|
<el-input v-model="search.receipt_order_id" style="width: 150px;" placeholder="请输入内容"></el-input> |
|
|
|
<span>收款单状态</span> |
|
|
|
<el-select v-model="search.receipt_order_status" style="width: 150px;" placeholder="请选择" clearable> |
|
|
|
<el-option |
|
|
|
v-for="item in receiptStatus" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="header-search" style="width: 100%;margin-bottom: 10px"> |
|
|
|
<span>用户名</span> |
|
|
|
<el-input v-model="search.user_name" style="width: 150px;" placeholder="请输入内容" clearable></el-input> |
|
|
|
<span>渠道订单号:</span> |
|
|
|
<el-input v-model="search.channel_order_no" style="width: 150px;" placeholder="请输入内容"></el-input> |
|
|
|
<span>渠道:</span> |
|
|
|
<el-select v-model="search.channel_id" style="width: 150px;" placeholder="请选择" clearable> |
|
|
|
<el-option |
|
|
|
v-for="item in channelList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<span>专员</span> |
|
|
|
<el-select v-model="search.commissioner_id" style="width: 150px;" placeholder="请选择" clearable> |
|
|
|
<el-option |
|
|
|
v-for="item in userList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<span>下单人</span> |
|
|
|
<el-select v-model="search.create_id" style="width: 150px;" placeholder="请选择" clearable> |
|
|
|
<el-option |
|
|
|
v-for="item in userList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="header-search" style="width: 100%;margin-bottom: 10px"> |
|
|
|
<span>手机号</span> |
|
|
|
<el-input v-model="search.user_phone" style="width: 150px;" placeholder="请输入内容" clearable></el-input> |
|
|
|
<span>金额</span> |
|
|
|
<el-input-number v-model="search.startMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number> |
|
|
|
~ |
|
|
|
<el-input-number v-model="search.endMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number> |
|
|
|
<span>时间</span> |
|
|
|
<el-date-picker |
|
|
|
style="width: 150px;" |
|
|
|
v-model="search.startTime" |
|
|
|
type="date" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
placeholder="选择日期"> |
|
|
|
</el-date-picker> |
|
|
|
~ |
|
|
|
<el-date-picker |
|
|
|
style="width: 150px;" |
|
|
|
v-model="search.endTime" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期"> |
|
|
|
</el-date-picker> |
|
|
|
<el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button> |
|
|
|
<el-button type="primary" icon="el-icon-plus" @click="addShow=true" >新增</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="panel-body"> |
|
|
|
<div id="myTabContent" class="tab-content"> |
|
|
|
<div class="tab-pane fade active in" id="one"> |
|
|
|
<div class="widget-body no-padding"> |
|
|
|
<div id="toolbar" class="toolbar"> |
|
|
|
<a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a> |
|
|
|
<a href="javascript:;" class="btn btn-success btn-add {:$auth->check('order_main/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a> |
|
|
|
<!-- <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('order_main/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>--> |
|
|
|
<!-- <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('order_main/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>--> |
|
|
|
<a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('order_main/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a> |
|
|
|
<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" |
|
|
|
style="font-size:12px;width: 100%;margin-top: 12px"> |
|
|
|
<el-table-column prop="id" label="订单ID" min-width="40" ></el-table-column> |
|
|
|
<el-table-column prop="commissioner" label="专员" min-width="40" ></el-table-column> |
|
|
|
<el-table-column prop="channel_name" label="渠道" min-width="80" ></el-table-column> |
|
|
|
<el-table-column prop="channel_order_no" label="渠道订单号" min-width="90" ></el-table-column> |
|
|
|
<el-table-column prop="create_id" label="下单人" min-width="50" :formatter="getUserName"></el-table-column> |
|
|
|
<el-table-column prop="user_name" label="用户名称" min-width="50" ></el-table-column> |
|
|
|
<el-table-column prop="user_phone" label="手机号" min-width="60" ></el-table-column> |
|
|
|
<el-table-column prop="total_amount" label="总金额" min-width="40" ></el-table-column> |
|
|
|
<el-table-column prop="order_status" label="状态" min-width="40" :formatter="getOrderMainStatus"></el-table-column> |
|
|
|
<el-table-column prop="create_time" label="下单时间" min-width="80" ></el-table-column> |
|
|
|
<el-table-column prop="receipt_order_id" label="收款单ID" min-width="40" ></el-table-column> |
|
|
|
<el-table-column prop="receipt_order_name" label="收款单名称" min-width="80" ></el-table-column> |
|
|
|
<el-table-column label="操作" min-width="180"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button-group> |
|
|
|
<el-button type="primary" size="mini" @click="edit(scope.row.id)" icon="el-icon-edit">编辑</el-button> |
|
|
|
<el-button type="danger" size="mini" icon="el-icon-delete" @click="delAll(scope.row.id)">删除</el-button> |
|
|
|
</el-button-group> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-pagination |
|
|
|
:page-size="search.pageSize" |
|
|
|
:pager-count="11" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="total" |
|
|
|
:current-page="search.pageNum" |
|
|
|
:page-sizes="[10, 20, 30, 40, 50]" |
|
|
|
@size-change="sizeChange" |
|
|
|
@current-change="getData" |
|
|
|
@prev-click="getData" |
|
|
|
@next-click="getData" |
|
|
|
></el-pagination> |
|
|
|
</div> |
|
|
|
<transition name="bounce" v-if="addShow"> |
|
|
|
<el-dialog title="新增订单" :visible.sync="addShow" width="90%" height="100%" top="15px"> |
|
|
|
<iframe src="/view/order_main/add.html" frameborder="0" width="99%" id="addPageShow" onload="this.height=100"></iframe> |
|
|
|
</el-dialog> |
|
|
|
</transition> |
|
|
|
<transition name="bounce" v-if="editShow"> |
|
|
|
<el-dialog title="编辑订单" :visible.sync="editShow" width="90%" height="100%" top="15px"> |
|
|
|
<iframe :src="editPageShowUrl" frameborder="0" width="99%" id="editPageShow" onload="this.height=100"></iframe> |
|
|
|
</el-dialog> |
|
|
|
</transition> |
|
|
|
</div> |
|
|
|
</body> |
|
|
|
<!-- import Vue before Element --> |
|
|
|
<script src="/assets/js/vue/vue.js"></script> |
|
|
|
<!-- import JavaScript --> |
|
|
|
<script src="/assets/js/vue/index.js"></script> |
|
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
|
|
|
<script type="text/javascript"> |
|
|
|
function reinitIframe(){ |
|
|
|
try{ |
|
|
|
var iframe = document.getElementById("addPageShow"); |
|
|
|
var bHeight = iframe.contentWindow.document.body.scrollHeight; |
|
|
|
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; |
|
|
|
var height = Math.max(bHeight, dHeight); |
|
|
|
iframe.height = height; |
|
|
|
console.log(height); |
|
|
|
}catch (ex){} |
|
|
|
try{ |
|
|
|
var iframe1 = document.getElementById("editPageShow"); |
|
|
|
var bHeight1 = iframe1.contentWindow.document.body.scrollHeight; |
|
|
|
var dHeight1 = iframe1.contentWindow.document.documentElement.scrollHeight; |
|
|
|
var height1 = Math.max(bHeight1, dHeight1); |
|
|
|
iframe1.height = height1; |
|
|
|
console.log(height1); |
|
|
|
}catch (ex){} |
|
|
|
} |
|
|
|
window.setInterval("reinitIframe()", 200); |
|
|
|
</script> |
|
|
|
<script> |
|
|
|
new Vue({ |
|
|
|
el: '#app', |
|
|
|
data: function () { |
|
|
|
return { |
|
|
|
search: { |
|
|
|
"receipt_order_id":"", |
|
|
|
"receipt_order_status":"", |
|
|
|
"order_id":"", |
|
|
|
"channel_order_no":"", |
|
|
|
"channel_id":"", |
|
|
|
"order_status":"", |
|
|
|
"commissioner_id":"", |
|
|
|
"user_name":"", |
|
|
|
"user_phone":"", |
|
|
|
"create_id":"", |
|
|
|
"startMoney":"", |
|
|
|
"endMoney":"", |
|
|
|
"startTime":"", |
|
|
|
"endTime":"", |
|
|
|
"pageNum":1, |
|
|
|
"pageSize":10 |
|
|
|
}, |
|
|
|
total: 0, |
|
|
|
tableData: [], |
|
|
|
province: [], |
|
|
|
city: [], |
|
|
|
area:[], |
|
|
|
editShow:false, |
|
|
|
editPageShowUrl:"", |
|
|
|
addShow:false, |
|
|
|
//收款单状态 0:未收款 1:收款中 2已收款 |
|
|
|
receiptStatus:[ |
|
|
|
{id:0,name:"未收款"}, |
|
|
|
{id:1,name:"收款中"}, |
|
|
|
{id:2,name:"已收款"}, |
|
|
|
], |
|
|
|
//0待处理 1已确认 2部分取消 10已完成 11已取消 |
|
|
|
orderMainStatus:[ |
|
|
|
{id:0,name:"待处理"}, |
|
|
|
{id:1,name:"已确认"}, |
|
|
|
{id:2,name:"部分取消"}, |
|
|
|
{id:3,name:"处理中"}, |
|
|
|
{id:10,name:"已完成"}, |
|
|
|
{id:11,name:"已取消"} |
|
|
|
], |
|
|
|
userList: [], |
|
|
|
channelList:[], |
|
|
|
multipleSelection: [] |
|
|
|
|
|
|
|
<div class="dropdown btn-group {:$auth->check('order_main/multi')?'':'hide'}"> |
|
|
|
<a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a> |
|
|
|
<ul class="dropdown-menu text-left" role="menu"> |
|
|
|
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li> |
|
|
|
<li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
window.addEventListener("message", e => { |
|
|
|
this.editShow = false |
|
|
|
this.addShow = false |
|
|
|
}); |
|
|
|
this.getAdminUser(); |
|
|
|
this.getChannelList(); |
|
|
|
this.getProvince(); |
|
|
|
this.getData(1) |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
"search.province" : function (newVal,oldVal){ |
|
|
|
this.city = [] |
|
|
|
this.area = [] |
|
|
|
this.search.city="" |
|
|
|
this.search.area="" |
|
|
|
if (newVal==''){ |
|
|
|
return false; |
|
|
|
} |
|
|
|
let row = { |
|
|
|
"province":newVal |
|
|
|
} |
|
|
|
axios.post("/hotel.php/ajax/areaList", row).then((response) => { |
|
|
|
let data = response.data; |
|
|
|
if (data.flag) { |
|
|
|
this.city = data.data; |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" |
|
|
|
data-operate-edit="{:$auth->check('order_main/edit')}" |
|
|
|
data-operate-del="{:$auth->check('order_main/del')}" |
|
|
|
width="100%"> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg); |
|
|
|
} |
|
|
|
}).catch(function (error) { |
|
|
|
console.log(error); |
|
|
|
}); |
|
|
|
}, |
|
|
|
"search.city" : function (newVal,oldVal){ |
|
|
|
this.area = [] |
|
|
|
this.search.area="" |
|
|
|
if (newVal == "") { |
|
|
|
return false; |
|
|
|
} |
|
|
|
let row = { |
|
|
|
province:this.search.province, |
|
|
|
city:newVal |
|
|
|
} |
|
|
|
axios.post("/hotel.php/ajax/areaList", row).then((response) => { |
|
|
|
let data = response.data; |
|
|
|
if (data.flag) { |
|
|
|
this.area = data.data; |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg); |
|
|
|
} |
|
|
|
}).catch(function (error) { |
|
|
|
console.log(error); |
|
|
|
}); |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getChannelList(){ |
|
|
|
axios.post("/hotel.php/cf_channel_info/getList", this.search).then((response) => { |
|
|
|
console.log(response) |
|
|
|
let data = response.data; |
|
|
|
this.channelList = data.list; |
|
|
|
}).catch(function (error) { |
|
|
|
console.log(error); |
|
|
|
}); |
|
|
|
}, |
|
|
|
getUserName(info) { |
|
|
|
for (let i = 0; i < this.userList.length; i++) { |
|
|
|
if (this.userList[i].id == info.create_id) { |
|
|
|
return this.userList[i].name |
|
|
|
} |
|
|
|
} |
|
|
|
return "-" |
|
|
|
}, |
|
|
|
getOrderMainStatus(info){ |
|
|
|
for (let i = 0; i < this.orderMainStatus.length; i++) { |
|
|
|
if (this.orderMainStatus[i].id == info.order_status) { |
|
|
|
return this.orderMainStatus[i].name |
|
|
|
} |
|
|
|
} |
|
|
|
return "-" |
|
|
|
}, |
|
|
|
getAdminUser() { |
|
|
|
axios.post("/hotel.php/auth/admin/getList", this.search).then((response) => { |
|
|
|
this.userList = response.data.list; |
|
|
|
}).catch(function (error) { |
|
|
|
console.log(error); |
|
|
|
}); |
|
|
|
}, |
|
|
|
getProvince(){ |
|
|
|
axios.post("/hotel.php/ajax/areaList", {}).then((response) => { |
|
|
|
let data = response.data; |
|
|
|
if (data.flag) { |
|
|
|
this.province = data.data; |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg); |
|
|
|
} |
|
|
|
}).catch(function (error) { |
|
|
|
console.log(error); |
|
|
|
}); |
|
|
|
}, |
|
|
|
sizeChange(pageSize) { |
|
|
|
this.search.pageSize = pageSize; |
|
|
|
this.getData(this.search.pageNum) |
|
|
|
}, |
|
|
|
edit(id){ |
|
|
|
this.editPageShowUrl="/view/order_main/edit.html?id="+id; |
|
|
|
this.editShow=true; |
|
|
|
}, |
|
|
|
//獲取列表 |
|
|
|
getData(page) { |
|
|
|
this.search.pageNum = page; |
|
|
|
axios.post("/hotel.php/order_main/getOrderList", this.search).then((response) => { |
|
|
|
let data = response.data; |
|
|
|
if (data.flag) { |
|
|
|
this.tableData = data.data.list; |
|
|
|
this.total = data.data.total; |
|
|
|
} else { |
|
|
|
this.$message.error(response.msg); |
|
|
|
} |
|
|
|
}).catch(function (error) { |
|
|
|
console.log(error); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.el-table thead { |
|
|
|
background-color: #5a5e66 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.header-search { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
body { |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.table { |
|
|
|
width: 100%; |
|
|
|
font-size: 12px; |
|
|
|
margin-top: 12px; |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
.el-form-item{ |
|
|
|
margin-bottom: 5px !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</html> |