<!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">
<span>名称：</span>
<el-input v-model="search.name" style="width: 150px;" placeholder="请输入内容"></el-input>
<span>状态</span>
<el-select v-model="search.status" filterable placeholder="请选择" clearable>
<el-option
v-for="item in status"
:key="item.id"
:label="item.value"
:value="item.id">
</el-option>
</el-select>
<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>
<el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>
<el-button type="primary" icon="el-icon-plus" @click="edit(null)">新增收款单</el-button>
</div>
<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark"
style="font-size:12px;width: 100%;margin-top: 12px">
<el-table-column prop="create_id" label="创建人" min-width="70" :formatter="getUserName"></el-table-column>
<el-table-column prop="id" label="收款单号" min-width="50"></el-table-column>
<el-table-column prop="name" label="收款单名称" min-width="120"></el-table-column>
<el-table-column prop="status" label="收款单状态" :formatter="getStatusName" min-width="140">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.status" size="mini" @change="setStatus(scope.row)">
<el-radio-button label="0">未收款</el-radio-button>
<el-radio-button label="1">收款中</el-radio-button>
<el-radio-button label="2">已收款</el-radio-button>
</el-radio-group>
</template>
</el-table-column>
<el-table-column prop="order_ids" label="关联订单" min-width="150"></el-table-column>
<el-table-column prop="total_amount" label="金额" min-width="60"></el-table-column>
<el-table-column prop="create_time" label="创建时间" min-width="80"></el-table-column>
<el-table-column prop="update_time" 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)" icon="el-icon-edit">编辑</el-button>
<el-button type="success" size="mini" @click="editOrderDivShow(scope.row)" icon="el-icon-share">订单</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="editShow">
<el-dialog title="收款单详情" :visible.sync="editShow" width="90%" top="15px">
<el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 20px">
<div style="display: flex;width: 100%">
<el-form-item v-if="editType" label="收款单ID：" style="width: 80%">
<div v-html="editData.id"></div>
</el-form-item>
</div>
<div>
<el-form-item label="收款单名称：" style="width: 80%">
<el-input v-model="editData.name" style="width: 150px;" placeholder="请输入内容"></el-input>
</el-form-item>
</div>
<div>
<el-form-item v-if="editType" label="收款单状态：" style="width: 80%">
<el-radio-group v-model="editData.status" size="mini" disabled>
<el-radio-button label="0">未收款</el-radio-button>
<el-radio-button label="1">收款中</el-radio-button>
<el-radio-button label="2">已收款</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="editDoing()" >保存</el-button>
</div>
</el-form>
</el-dialog>
</transition>
<transition name="bounce" v-if="editOrderShow">
<el-dialog title="详情" :visible.sync="editOrderShow" width="90%" top="15px">
<el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 10px">
<div style="display: flex;width: 100%">
<el-form-item label="收款单ID：" style="width: 80%">
<div v-html="editOrder.id"></div>
</el-form-item>
<el-form-item label="收款单名称：" style="width: 80%">
<div v-html="editOrder.name"></div>
</el-form-item>
<el-form-item label="收款单状态：" style="width: 80%">
<el-radio-group v-model="editOrder.status" size="mini" disabled>
<el-radio-button label="0">未收款</el-radio-button>
<el-radio-button label="1">收款中</el-radio-button>
<el-radio-button label="2">已收款</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
</el-form>
<div>
<div class="header-search" style="width: 100%;margin-bottom: 10px">
<span>订单ID：</span>
<el-input v-model="orderMainListSearch.order_id" style="width: 150px;" placeholder="请输入内容"></el-input>
<span>订单状态：</span>
<el-select v-model="orderMainListSearch.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>收款单状态</span>
<el-select v-model="orderMainListSearch.inReceipt" style="width: 150px;" filterable placeholder="请选择" clearable>
<el-option
v-for="item in inReceipt"
: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="orderMainListSearch.user_name" style="width: 150px;" placeholder="请输入内容" clearable></el-input>
<span>渠道：</span>
<el-select v-model="orderMainListSearch.channel_id" style="width: 150px;" filterable 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-input v-model="orderMainListSearch.channel_order_no" style="width: 150px;" placeholder="请输入内容"></el-input>
<span>专员</span>
<el-select v-model="orderMainListSearch.commissioner_id" style="width: 150px;" filterable 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="orderMainListSearch.create_id" style="width: 150px;" filterable 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="orderMainListSearch.user_phone" style="width: 150px;" placeholder="请输入内容" clearable></el-input>
<span>金额</span>
<el-input-number v-model="orderMainListSearch.startMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
~
<el-input-number v-model="orderMainListSearch.endMoney" style="width: 170px;" placeholder="请输入内容" clearable></el-input-number>
<span>时间</span>
<el-date-picker
style="width: 150px;"
v-model="orderMainListSearch.startTime"
type="date"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
~
<el-date-picker
style="width: 150px;"
v-model="orderMainListSearch.endTime"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
<el-button type="primary" icon="el-icon-search" @click="getOrderMainData(1)">搜索</el-button>
</div>
<div>
<el-table ref="multipleTable" :data="orderMainList" border tooltip-effect="dark" style="font-size:12px;width: 100%;margin-top: 12px" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="30" :selectable="checkSelect"></el-table-column>
<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="操作" >
<template slot-scope="scope">
<el-button-group>
<el-button type="primary" size="mini" v-if="scope.row.receipt_order_id==0 && editOrder.status==0" @click="addOrderMain(scope.row.id)" icon="el-icon-edit">添加</el-button>
<el-button type="danger" size="mini" v-if="scope.row.receipt_order_id==editOrder.id && editOrder.status==0" @click="removeOrderMain(scope.row.id)" icon="el-icon-delete">移除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 5px">
<el-button type="primary" icon="el-icon-circle-plus" @click="addOrderAll()" :disabled="multipleSelection.length==0">添加到采购单</el-button>
</div>
<el-pagination
:page-size="orderMainListSearch.pageSize"
:pager-count="11"
layout="total, sizes, prev, pager, next, jumper"
:total="orderMainTotal"
:current-page="orderMainListSearch.pageNum"
:page-sizes="[10, 20, 30, 40, 50]"
@size-change="sizeOrderMainChange"
@current-change="getOrderMainData"
@prev-click="getOrderMainData"
@next-click="getOrderMainData"
></el-pagination>
</div>
</div>
</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>
new Vue({
el: '#app',
data: function () {
return {
search: {
name: "",
status: "all",
startMoney:0,
endMoney:0,
pageSize: 10,
pageNum: 1
},
status: [
{"id": "all", "value": "请选择"},
{"id": 0, 'value': "未收款"},
{"id": 1, 'value': "收款中"},
{"id": 2, 'value': "已收款"}
],
total: 0,
tableData: [],
userList: [],
info: {
id: null,
name: "",
status: 0,
list: []
},
editShow: false,
editType: false,
editData: {},
editOrderShow:false,
editOrder:{},
orderMainListSearch:{
"receipt_order_id":"",
"inReceipt":"",
"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
},
orderMainTotal:0,
orderMainList:[],
inReceipt:[
{id:1,name:"在此收款单中"},
{id:2,name:"不在此收款单中"},
{id:3,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:"已取消"}
],
channelList:[],
multipleSelection: [],
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);
}
}]
},
}
},
created() {
this.getAdminUser();
this.getChannelList();
this.getData(1)
},
methods: {
checkSelect(row,index){
if (this.editOrder.status != 0) {
return false;
}
if (row.receipt_order_id ==0) {
return true;
}
return false;
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
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);
});
},
getStatusName(info) {
for (let i = 0; i < this.status.length; i++) {
if (this.status[i].id == info.status) {
return this.status[i].value
}
}
return "-"
},
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 "-"
},
sizeChange(pageSize) {
this.search.pageSize = pageSize;
this.getData(this.search.pageNum)
},
sizeOrderMainChange(pageSize) {
this.orderMainListSearch.pageSize = pageSize;
this.getOrderMainData(this.orderMainListSearch.pageNum)
},
//獲取列表
getData(page) {
this.search.pageNum = page;
axios.post("/hotel.php/receipt_order/getList", this.search).then((response) => {
let data = response.data;
console.log(this.tableData);
if (data.flag) {
this.tableData = data.data.list;
this.total = data.data.total;
console.log(this.tableData);
} else {
this.$message.error(response.msg);
}
}).catch(function (error) {
console.log(error);
});
},
getAdminUser() {
axios.post("/hotel.php/auth/admin/getList", this.search).then((response) => {
this.userList = response.data.list;
}).catch(function (error) {
console.log(error);
});
},
edit(info) {
if (info == null) {
this.editType = false;
this.editData = {
name: ""
}
} else {
this.editType = true;
this.editData = {
id:info.id,
name: info.name,
status:info.status
}
}
this.editShow = true;
},
editDoing(){
axios.post("/hotel.php/receipt_order/save", this.editData).then( (response)=> {
let data = response.data;
console.log(this.tableData);
if (data.flag) {
this.$message.success("保存成功");
this.editShow = false;
this.getData(1);
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
this.$message.error("保存失败");
console.log(error);
});
},
setStatus(info){
this.$confirm('确定修改状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.post("/hotel.php/receipt_order/setStatus", info).then( (response)=> {
let data = response.data;
if (data.flag) {
this.$message.success("保存成功");
} else {
this.$message.error(data.msg);
this.getData(this.search.pageNum)
}
}).catch(function (error) {
this.$message.error("保存失败");
console.log(error);
this.getData(this.search.pageNum)
});
}).catch(() => {
this.$message.success("已取消");
this.getData(this.search.pageNum)
})
},
editOrderDivShow(info){
console.log(info);
this.editOrder = info;
this.orderMainListSearch.receipt_order_id = info.id;
this.orderMainList=[];
this.getOrderMainData(1);
this.editOrderShow = true;
},
getOrderMainData(page){
this.orderMainListSearch.pageNum = page;
axios.post("/hotel.php/receipt_order/getOrderMainList", this.orderMainListSearch).then((response) => {
let data = response.data;
console.log(this.tableData);
if (data.flag) {
this.orderMainList = data.data.list;
this.orderMainTotal = data.data.total;
console.log(this.orderMainList);
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
},
addOrderMain(order_id){
let param = {
order_id:order_id,
id:this.editOrder.id
}
axios.post("/hotel.php/receipt_order/addOrderMain", param).then((response) => {
let data = response.data;
if (data.flag) {
this.$message.success("保存成功");
this.getOrderMainData(this.orderMainListSearch.pageNum)
this.getData(this.search.pageNum)
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
},
addOrderAll(){
let orderId = "";
let length = this.multipleSelection.length;
for (var k = 0; k < length; k++) {
if (orderId == "") {
orderId = this.multipleSelection[k].id;
continue;
}
orderId =orderId+","+this.multipleSelection[k].id;
}
this.addOrderMain(orderId);
},
removeOrderMain(order_id){
let param = {
order_id:order_id,
id:this.editOrder.id
}
axios.post("/hotel.php/receipt_order/removeOrderMain", param).then((response) => {
let data = response.data;
if (data.flag) {
this.$message.success("移除成功");
this.getOrderMainData(this.orderMainListSearch.pageNum)
this.getData(this.search.pageNum)
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
},
delAll(id){
let param = {
id:id
}
this.$confirm('确定删除采购单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.post("/hotel.php/receipt_order/delAll", param).then((response) => {
let data = response.data;
if (data.flag) {
this.$message.success("移除成功");
this.getData(this.search.pageNum)
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
}).catch(() => {
this.$message.info("保存成功");
});
}
}
})
</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>