<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/assets/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="请输入内容" clearable></el-input>
<span>订单状态：</span>
<el-select v-model="search.order_status" filterable 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="请输入内容" clearable></el-input>
<span>收款单状态</span>
<el-select v-model="search.receipt_order_status" filterable 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>
<span>用户名</span>
<el-input v-model="search.user_name" style="width: 150px;" placeholder="请输入内容" clearable></el-input>
<span>手机号</span>
<el-input v-model="search.user_phone" style="width: 150px;" placeholder="请输入内容" clearable></el-input>
</div>
<div class="header-search" style="width: 100%;margin-bottom: 10px">
<span>渠道订单号：</span>
<el-input v-model="search.channel_order_no" style="width: 150px;" placeholder="请输入内容" clearable></el-input>
<span>渠道：</span>
<el-select v-model="search.channel_id" filterable 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" filterable 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" filterable 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-date-picker
style="width: 150px;"
v-model="search.startTime"
type="date"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
~
<el-date-picker
style="width: 150px;"
v-model="search.endTime"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="header-search" style="width: 100%;margin-bottom: 10px">
<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-input-number v-model="search.startCost" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
~
<el-input-number v-model="search.endCost" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
<span>利润</span>
<el-input-number v-model="search.startProfit" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
~
<el-input-number v-model="search.endProfit" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
</div>
<div class="header-search" style="width: 100%;margin-bottom: 10px">
<span>出游人：</span>
<el-input v-model="search.customer_name" style="width: 150px;margin: 5px;" placeholder="请输入内容" clearable></el-input>
<span>供应商</span>
<el-select v-model="search.supplier_id" filterable style="width: 150px;margin: 5px;" placeholder="请选择" clearable>
<el-option
v-for="item in supplierList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<span>入住时间</span>
<el-date-picker
style="width: 150px;margin: 5px;"
v-model="search.startInDate"
type="date"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
~
<el-date-picker
style="width: 150px;margin: 5px;"
v-model="search.endInDate"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
<span>离店时间</span>
<el-date-picker
style="width: 150px;margin: 5px;"
v-model="search.startOutDate"
type="date"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
~
<el-date-picker
style="width: 150px;margin: 5px;"
v-model="search.endOutDate"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
<el-button type="primary" icon="el-icon-search" style="margin: 5px;" @click="getData(1)">搜索</el-button>
<el-button type="primary" icon="el-icon-plus" style="margin: 5px;" @click="addShow=true" >新增</el-button>
<el-button type="primary" icon="el-icon-plus" style="margin: 5px;" v-if="isExpand == false" @click="zhankai(true)">全部展开</el-button>
<el-button type="primary" icon="el-icon-minus" style="margin: 5px;" v-if="isExpand" @click="zhankai(false)">全部收起</el-button>
</div>
<el-table v-if="showTable" ref="multipleTable" :default-expand-all="isExpand" :data="tableData" border tooltip-effect="dark"
style="font-size:12px;width: 100%;margin-top: 12px">
<el-table-column width="50">
<template slot-scope="scope" >
<i class="el-icon-star-off" style="font-size: 18px" v-if="scope.row.hot_seq == 0" @click="setHotSeq(scope.$index,10)"></i>
<i class="el-icon-star-on" style="font-size:22px;color: red" v-if="scope.row.hot_seq > 0" @click="setHotSeq(scope.$index,0)"></i>
</template>
</el-table-column>
<el-table-column prop="id" label="订单ID" min-width="30" ></el-table-column>
<el-table-column prop="commissioner" label="专员" min-width="40" ></el-table-column>
<el-table-column prop="channel_order_no" label="渠道" min-width="120" >
<template slot-scope="scope">
<div><i class="el-icon-user" v-html="scope.row.channel_name"></i></div>
<div><i class="el-icon-tickets" v-html="scope.row.channel_order_no"></i></div>
</template>
</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="80" >
<template slot-scope="scope">
<div><i class="el-icon-user-solid" v-html="scope.row.user_name"></i></div>
<div><i class="el-icon-phone" v-html="scope.row.user_phone"></i></div>
</template>
</el-table-column>
<el-table-column prop="total_amount" label="金额" min-width="80" >
<template slot-scope="scope">
<div v-html="'金额:'+scope.row.total_amount"></div>
<div v-html="'成本:'+scope.row.cost_amount"></div>
<div v-if="scope.row.profit_amount>0" v-html="'利润:'+scope.row.profit_amount"></div>
<div v-if="scope.row.profit_amount<=0" v-html="'利润:'+scope.row.profit_amount" style="color: red"></div>
</template>
</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="100" >
<template slot-scope="scope">
<div ><i v-html="'下单:'+scope.row.create_time"></i></div>
<div v-if="scope.row.success_time"><i v-html="'成功：'+scope.row.success_time"></i></div>
<div v-if="scope.row.cancel_time"><i v-html="'取消:'+scope.row.cancel_time"></i></div>
</template>
</el-table-column>
<el-table-column prop="receipt_order_name" label="收款单" min-width="100" >
<template slot-scope="scope">
<div v-if="scope.row.receipt_order_id!=0">
<div v-html="'ID:'+scope.row.receipt_order_id"></div>
<div v-html="'NAME:'+scope.row.receipt_order_name"></div>
<div v-html="'状态:'+getReceiptOrderStatus(scope.row)" ></div>
</div>
</template>
</el-table-column>
<el-table-column label="子订单" type="expand">
<template slot-scope="scope">
<el-table ref="multipleTable" :data="scope.row.subOrder" border tooltip-effect="dark"
style="border: 2px solid #71ebce; font-size:12px;width: 94%;margin-left: 2%;margin-right: 4%" :row-class-name="tableRowClassName">
<el-table-column prop="id" label="订单ID" min-width="30" ></el-table-column>
<el-table-column prop="type" label="类型" min-width="30" ></el-table-column>
<el-table-column label="名称" min-width="80" >
<template slot-scope="prop">
<div v-if="prop.row.type=='酒店'" v-html="prop.row.hotel_name"></div>
<div v-if="prop.row.type=='附加项目'" v-html="prop.row.item_name"></div>
</template>
</el-table-column>
<el-table-column label="房型/项目类型" min-width="80" >
<template slot-scope="prop">
<div v-if="prop.row.type=='酒店'" v-html="prop.row.room_name"></div>
<div v-if="prop.row.type=='附加项目'" v-html="getTypeName(prop.row)"></div>
</template>
</el-table-column>
<el-table-column prop="id" label="时间" min-width="40" >
<template slot-scope="prop">
<div v-if="prop.row.type=='酒店'" >
<div v-html="prop.row.check_in_date"></div>
<div v-html="prop.row.check_out_date"></div>
</div>
<div v-if="prop.row.type=='附加项目'" v-html="prop.row.check_in_date"></div>
</template>
</el-table-column>
<el-table-column prop="prod_num" label="数量" min-width="20" ></el-table-column>
<el-table-column prop="customer_name" label="出游人姓名" min-width="40" ></el-table-column>
<el-table-column prop="total_price" label="金额" min-width="30" ></el-table-column>
<el-table-column prop="total_cost" label="成本" min-width="30" ></el-table-column>
<el-table-column prop="profit" label="利润" min-width="30" >
<template slot-scope="scope">
<div v-if="scope.row.profit>0" v-html="scope.row.profit"></div>
<div v-if="scope.row.profit<=0" v-html="scope.row.profit" style="color: red"></div>
</template>
</el-table-column>
<el-table-column prop="supplier_name" label="供应商" min-width="30" ></el-table-column>
<el-table-column label="发单状态" min-width="30" :formatter="confirmStatusName"></el-table-column>
<el-table-column prop="payment_order_name" label="付款单" min-width="40" >
<template slot-scope="scope">
<div v-if="scope.row.payment_order_id" v-html="scope.row.payment_order_id"></div>
<div v-if="scope.row.payment_order_id" v-html="scope.row.payment_order_name"></div>
</template>
</el-table-column>
<el-table-column label="付款单状态" min-width="40" :formatter="paymentOrderStatus" ></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="receipt_order_name" label="备注" min-width="80" >
<template slot-scope="scope">
<el-popover
placement="top-start"
title=""
width="200"
trigger="hover"
:content="scope.row.order_memo">
<div slot="reference" v-html="scope.row.order_memo" style="overflow:hidden;white-space: nowrap;"></div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作" min-width="140">
<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-group>
<el-button-group>
<el-button type="primary" size="mini" @click="showMemoInfo(scope.row.id)" icon="el-icon-edit">备注</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?rd='+Math.random()" 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>
<transition name="bounce" v-if="showMemo">
<el-dialog :title="'订单备注 : '+addMemo.order_id" :visible.sync="showMemo" width="90%" height="100%" top="15px">
<div class="header-search" style="width: 90%;margin: 10px">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="addMemo.memo">
</el-input>
<el-button type="primary" style="margin-top: 10px" @click="saveMemo(1)">+新增备注</el-button>
</div>
<el-table ref="multipleTable" :data="memoList" border tooltip-effect="dark" style="font-size:12px;width: 100%;margin: 12px">
<el-table-column prop="create_time" label="时间" min-width="30" ></el-table-column>
<el-table-column prop="create_name" label="用户" min-width="30" ></el-table-column>
<el-table-column prop="memo" label="备注" ></el-table-column>
</el-table>
</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":"",
"startCost":"",
"endCost":"",
"startProfit":"",
"endProfit":"",
"startTime":"",
"endTime":"",
"pageNum":1,
"pageSize":10,
"customer_name":"",
"startInDate":"",
"endInDate":"",
"startOutDate":"",
"endOutDate":""
},
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: [],
confirmStatusList:[
{id:1,name:"未发单"},
{id:2,name:"已发单"},
{id:3,name:"已确认"},
{id:4,name:"已取消"}
],
paymentOrderStatusList:[
{"id": 0, 'value': "未付款"},
{"id": 1, 'value': "付款中"},
{"id": 2, 'value': "已付款"}
],
type_list:[],
supplierList:[],
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
addMemo: {
"order_id":"",
"memo":""
},
memoList:[],
showMemo:false,
isExpand: false,
showTable:true
}
},
created() {
window.addEventListener("message", e => {
this.editShow = false
this.addShow = false
this.getData(1)
});
this.getSupplierList()
this.getAdminUser();
this.getChannelList();
this.getProvince();
this.getConfig()
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;
} else {
this.$message({
offset:0,
showClose:true,duration:500,
type: 'error',
message: 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({
offset:0,
showClose:true,duration:500,
type: 'error',
message: data.msg
});
}
}).catch(function (error) {
console.log(error);
});
},
},
methods: {
zhankai(val){
this.isExpand = val;
this.showTable = false;
setTimeout(e => {
this.showTable = true;
// this.showTable(true)
}, 500); // 定时时间
},
getSupplierList(){
axios.post("/hotel.php/cf_suplier_info/getList", this.search).then((response) => {
console.log(response)
let data = response.data;
this.supplierList = data.list;
}).catch(function (error) {
console.log(error);
});
},
getTypeName(info) {
for (let i = 0; i < this.type_list.length; i++) {
if (this.type_list[i].id == info.item_type) {
return this.type_list[i].name
}
}
return ""
},
getConfig(){
axios.post("/hotel.php/general/config/getList?key=site.item_category", {}).then((response) => {
let data = response.data;
this.type_list = data.list;
}).catch(function (error) {
console.log(error);
});
},
paymentOrderStatus(info){
if (info.payment_order_id ==0) {
return "-"
}
for (let i = 0; i < this.paymentOrderStatusList.length; i++) {
if (this.paymentOrderStatusList[i].id == info.payment_order_status) {
return this.paymentOrderStatusList[i].value
}
}
return "-"
},
confirmStatusName(info){
for (let i = 0; i < this.confirmStatusList.length; i++) {
if (this.confirmStatusList[i].id == info.confirm_status) {
return this.confirmStatusList[i].name
}
}
return "-"
},
getReceiptOrderStatus(info){
for (let i = 0; i < this.receiptStatus.length; i++) {
if (this.receiptStatus[i].id == info.receipt_order_status) {
return this.receiptStatus[i].name
}
}
return "-"
},
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({
offset:0,
showClose:true,duration:500,
type: 'error',
message: 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+"&rd="+Math.random();
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({
offset:0,
showClose:true,duration:500,
type: 'error',
message: data.msg
});
}
}).catch(function (error) {
console.log(error);
});
},
//獲取列表
saveMemo() {
if (this.addMemo.memo == "") {
this.$message({
offset:0,
showClose:true,duration:500,
type: 'error',
message: "请输入备注内容"
});
return false;
}
axios.post("/hotel.php/order_main/addMemo", this.addMemo).then((response) => {
let data = response.data;
if (data.flag) {
this.$message({
offset:0,
showClose:true,duration:500,
type: 'success',
message: "添加成功"
});
this.getMemoList()
this.getData(this.search.pageNum)
} else {
this.$message({
offset:0,
showClose:true,duration:500,
type: 'error',
message: data.msg
});
}
}).catch(function (error) {
console.log(error);
});
},
//獲取列表
getMemoList() {
let param = {
pageNum:1,
pageSize:1000,
order_id:this.addMemo.order_id
}
axios.post("/hotel.php/order_main/getMemoList", param).then((response) => {
let data = response.data;
if (data.flag) {
this.memoList = data.data.list;
} else {
this.$message({
offset:0,
showClose:true,duration:500,
type: 'error',
message: data.msg
});
}
}).catch(function (error) {
console.log(error);
});
},
showMemoInfo(order_id){
this.memoList = [];
this.showMemo = true
this.addMemo.order_id = order_id;
this.getMemoList();
},
setHotSeq(index,val){
let info = this.tableData[index]
let param = {
order_id:info["id"],
val:val
}
axios.post("/hotel.php/order_main/setHotFlag", param).then((response) => {
let data = response.data;
if (data.flag) {
this.tableData[index].hot_seq=val
this.$message({
offset:0,
showClose:true,duration:500,
type: 'success',
message: "设置成功"
});
this.getData(this.search.pageNum)
} else {
this.$message({
offset:0,
showClose:true,duration:500,
type: 'error',
message: data.msg
});
}
}).catch(function (error) {
console.log(error);
});
},
tableRowClassName({row, rowIndex}){
return 'success-row';
}
}
})
</script>
<style lang="scss" scoped>
.el-table .success-row {
background: #f9ebeb;
}
/*修改展开按钮的样式 start*/
/*1.取消原本展开的旋转动效*/
.el-table__expand-icon{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*2.展开按钮未点击的样式是加号带边框*/
.el-table__expand-icon .el-icon-arrow-right:before{
content: "\e6d9";
border: 1px solid #ccc;
padding: 2px;
}
/*3.展开按钮点击后的样式是减号带边框*/
.el-table__expand-icon--expanded .el-icon-arrow-right:before{
content: "\e6d8";
}
/*修改展开按钮的样式 end*/
.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>