loumengning
/
hbp

<!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="请输入内容" clearable></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="请输入内容" clearable></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>
            <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" 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>
            <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>
        </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;" placeholder="请输入内容" clearable></el-input>
            <span>供应商</span>
            <el-select v-model="search.supplier_id" style="width: 150px;" 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;"
                    v-model="search.startInDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
            </el-date-picker>
            ~
            <el-date-picker
                    style="width: 150px;"
                    v-model="search.endInDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <span>离店时间</span>
            <el-date-picker
                    style="width: 150px;"
                    v-model="search.startOutDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
            </el-date-picker>
            ~
            <el-date-picker
                    style="width: 150px;"
                    v-model="search.endOutDate"
                    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>
        <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="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="font-size:12px;width: 94%;margin-left: 2%;margin-right: 4%">
                        <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="70">
                <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>
                </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":"",
                    "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:[]
            }
        },
        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.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);
                });

            },
        },
        methods: {
            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.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>