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">
            <span>名称：</span>
            <el-input v-model="search.name" style="width: 120px;" placeholder="请输入内容"></el-input>
            <span>状态</span>
            <el-select v-model="search.status" placeholder="请选择" clearable>
                <el-option
                        v-for="item in status"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id">
                </el-option>
            </el-select>
            <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="150">
                <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="130">
                <template slot-scope="scope">
                    <div v-html="scope.row.hotel"></div>
                </template>
            </el-table-column>
            <el-table-column prop="total_amount" label="附加项目" min-width="130">
                <template slot-scope="scope">
                    <div v-html="scope.row.item"></div>
                </template>
            </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: 120px;" 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="100%" 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: 120px;" placeholder="请输入内容"></el-input>
                    <span>子订单ID：</span>
                    <el-input v-model="orderMainListSearch.sub_order_id" style="width: 120px;" placeholder="请输入内容"></el-input>
                    <span>订单类型：</span>
                    <el-select v-model="orderMainListSearch.prod_type"  style="width: 120px;" placeholder="请选择" >
                        <el-option
                                v-for="item in prodTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <span>用户名</span>
                    <el-input v-model="orderMainListSearch.customer_name" style="width: 120px;" placeholder="请输入内容" clearable></el-input>
                </div>
                <div class="header-search" style="width: 100%;margin-bottom: 10px">

                    <span>附加项目</span>
                    <el-select v-model="orderMainListSearch.item_id" style="width: 120px;" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in itemList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <span>酒店</span>
                    <el-select v-model="orderMainListSearch.hotel_id" style="width: 120px;" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in hotelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <span>确认单状态：</span>
                    <el-select v-model="orderMainListSearch.confirm_status" style="width: 120px;" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in confirmStatusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <span>付款单状态</span>
                    <el-select v-model="orderMainListSearch.inPayment" style="width: 120px;" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in inPaymentList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <span>供应商：</span>
                    <el-select v-model="orderMainListSearch.supplier_id" style="width: 120px;" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in supplierList"
                                :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-number v-model="orderMainListSearch.startMoney" style="width: 180px;" placeholder="请输入内容" clearable></el-input-number>
                    ~
                    <el-input-number v-model="orderMainListSearch.endMoney" style="width: 180px;" placeholder="请输入内容" clearable></el-input-number>
                    <span>时间</span>
                    <el-date-picker
                            style="width: 180px;"
                            v-model="orderMainListSearch.startTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                    ~
                    <el-date-picker
                            style="width: 180px;"
                            v-model="orderMainListSearch.endTime"
                            value-format="yyyy-MM-dd"
                            type="date"
                            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="order_id" label="主订单ID" min-width="20" ></el-table-column>
                        <el-table-column prop="id" label="子订单ID" min-width="20" ></el-table-column>
                        <el-table-column  label="订单类型" min-width="30" :formatter="getProdTypeName" ></el-table-column>
                        <el-table-column prop="supplier_name" label="供应商" min-width="40" ></el-table-column>
                        <el-table-column prop="trade_order_number" label="第三方订单号" min-width="40" ></el-table-column>
                        <el-table-column prop="hotel_name" label="酒店/附加项目" min-width="80" ></el-table-column>
                        <el-table-column prop="room_name" label="房型/附加项目" min-width="80" ></el-table-column>
                        <el-table-column prop="plan_name" label="价格方案/计价单位" min-width="40" ></el-table-column>
                        <el-table-column prop="check_in_date" label="时间" min-width="40" >
                            <template slot-scope="scope">
                                <div v-html="scope.row.check_in_date"></div>
                                <div v-html="scope.row.check_out_date"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="count" 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_cost" label="总成本" min-width="30" ></el-table-column>
                        <el-table-column label="发单状态" min-width="30" :formatter="confirmStatusName"></el-table-column>
                        <el-table-column prop="create_time" label="子订单生成时间" min-width="60" ></el-table-column>
                        <el-table-column prop="payment_order_name" label="付款单" min-width="40" >
                            <template slot-scope="scope">
                                <div v-html="scope.row.payment_order_id"></div>
                                <div v-html="scope.row.payment_order_name"></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" >
                            <template slot-scope="scope">
                                <el-button-group>
                                    <el-button type="primary" size="mini" v-if="scope.row.payment_order_id==0 && editOrder.status==0" @click="addOrderInfo(scope.row)" icon="el-icon-edit">添加</el-button>
                                    <el-button type="danger" size="mini" v-if="scope.row.payment_order_id==editOrder.id && editOrder.status==0" @click="removeOrderMain(scope.row)"  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",
                    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:{
                    "payment_order_id":"",
                    "order_id":"",
                    "sub_order_id":"",
                    "prod_type":"hotel",
                    "supplier_id":"",
                    "inPayment":"",
                    "confirm_status":"",
                    "customer_name":"",
                    "startMoney":"",
                    "endMoney":"",
                    "startTime":"",
                    "endTime":"",
                    "pageNum":1,
                    "pageSize":10,
                    "item_id":"",
                    "hotel_id":"",
                    "room_id":"",
                    "plan_id":""
                },
                orderMainTotal:0,
                orderMainList:[],
                inPaymentList:[
                    {id:1,name:"在此付款单中"},
                    {id:2,name:"不在此付款单中"},
                    {id:3,name:"不在任何付款单中"}
                ],
                //1、未发单/ 2已发单、3已确认、4已取消
                confirmStatusList:[
                    {id:1,name:"未发单"},
                    {id:2,name:"已发单"},
                    {id:3,name:"已确认"},
                    {id:4,name:"已取消"}
                ],
                prodTypeList:[
                    {id:"hotel",name:"酒店"},
                    {id:"item",name:"附加项目"}
                ],
                supplierList:[],
                multipleSelection: [],
                hotelList:[],
                itemList:[]
            }
        },
        created() {
            this.getAdminUser();
            this.getSupplierList();
            this.getData(1)
            this.getHotelList()
            this.getItemList()

        },
        watch: {
            "orderMainListSearch.prod_type" : function (newVal,oldVal){
                this.getOrderMainData(1)
            }
        },
        methods: {
            getProdTypeName(info){
                for (let i = 0; i < this.prodTypeList.length; i++) {
                    if (this.prodTypeList[i].id == info.prod_type) {
                        return this.prodTypeList[i].name
                    }
                }
                return "-"
            },
            getHotelList(){
                axios.post("/hotel.php/cf_hotel_info/getHotelList", this.search).then((response) => {
                    console.log(response)
                    let data = response.data;
                    this.hotelList = data.list;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getItemList(){
                axios.post("/hotel.php/cf_item/getList", this.search).then((response) => {
                    console.log(response)
                    let data = response.data;
                    this.itemList = data.list;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            checkSelect(row,index){
                if (this.editOrder.status != 0) {
                    return false;
                }
                if (row.payment_order_id ==0) {
                    return true;
                }
                return false;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            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);
                });
            },
            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 "-"
            },
            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 "-"
            },
            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/payment_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/payment_order/save", this.editData).then( (response)=> {
                    let data = response.data;
                    console.log(this.tableData);
                    if (data.flag) {
                        this.$message({
                            message: '保存成功！',
                            type: '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/payment_order/setStatus", info).then( (response)=> {
                        let data = response.data;
                        if (data.flag) {
                            this.$message({
                                message: '设置成功！',
                                type: '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({
                        type: 'info',
                        message: '已取消'
                    });
                    this.getData(this.search.pageNum)
                })

            },
            editOrderDivShow(info){
                console.log(info);
                this.editOrder = info;
                this.orderMainListSearch.payment_order_id = info.id;
                this.orderMainList=[];
                this.getOrderMainData(1);
                this.editOrderShow = true;
            },
            getOrderMainData(page){
                this.orderMainListSearch.pageNum = page;
                axios.post("/hotel.php/payment_order/getSubOrderList", 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);
                });
            },
            addOrderInfo(info){
                let param = {
                    hotel_id:[],
                    item_id:[],
                    id:this.editOrder.id
                }
                if (info.prod_type=='hotel') {
                    param.hotel_id.push(info.id)
                }else{
                    param.item_id.push(info.id)
                }
                this.addOrderMain(param)
            },
            addOrderMain(param){
                axios.post("/hotel.php/payment_order/addOrderMain", param).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.$message({
                            message: '添加成功！',
                            type: '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 param = {
                    hotel_id:[],
                    item_id:[],
                    id:this.editOrder.id
                }
                let length = this.multipleSelection.length;
                for (var k = 0; k < length; k++) {
                    if (this.multipleSelection[k].prod_type=='hotel'){
                        param.hotel_id.push(this.multipleSelection[k].id)
                    }else{
                        param.item_id.push(this.multipleSelection[k].id)
                    }
                }
                this.addOrderMain(param);
            },
            removeOrderMain(info){
                let param = {
                    hotel_id:[],
                    item_id:[],
                    id:this.editOrder.id
                }
                if (info.prod_type=='hotel') {
                    param.hotel_id.push(info.id)
                }else{
                    param.item_id.push(info.id)
                }
                axios.post("/hotel.php/payment_order/removeOrderMain", param).then((response) => {
                    let data = response.data;
                    if (data.flag) {
                        this.$message({
                            message: '移除成功！',
                            type: '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/payment_order/delAll", param).then((response) => {
                        let data = response.data;
                        if (data.flag) {
                            this.$message({
                                message: '移除成功！',
                                type: 'success'
                            });
                            this.getData(this.search.pageNum)
                        } else {
                            this.$message.error(data.msg);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }

        }
    })
</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>