<!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>