Helius
2021-01-07 d58a5eecbbf9db6a9469801273e537a55bc8e794
zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html
@@ -75,6 +75,47 @@
        .arrears {
            color: #E6A23C;
        }
        .paymethod ul {
            padding: 0;
            margin: 0;
            height: 50px;
        }
        .paymethod ul li {
            padding: 10px;
            margin: 5px;
            list-style:none;
            float: left;
            display: block;
            cursor: pointer;
            position: relative;
            border: white 1px solid;
        }
        .paymethod ul li:hover {
            border: #409EFF 1px solid;
        }
        .paymethod .active {
            border: #409EFF 1px solid;
        }
        .paymethod .active::after {
             content: '';
             display: block;
             height: 0px;
             width: 0px;
             position: absolute;
             bottom: 0;
             right: 0;
             color:#fff;
             /**对号大小*/
             font-size: 10px;
             line-height: 8px;
             border: 3px solid;
             border-color: transparent #4884ff #4884ff transparent;
         }
        .el-dialog__body {
            padding-top: 10px !important;
        }
    </style>
</head>
<body>
@@ -247,51 +288,51 @@
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="应付">
                            label="小计">
                        <template slot-scope="scope">
                            {{scope.row.zkPrice * scope.row.count }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="实付">
                        <template slot-scope="scope">
                            <el-input @change="calculationTotal(1)" v-model="scope.row.payMoney"></el-input>
                        </template>
                    </el-table-column>
<!--                    <el-table-column-->
<!--                            label="实付">-->
<!--                        <template slot-scope="scope">-->
<!--                            <el-input @change="calculationTotal(1)" v-model="scope.row.payMoney"></el-input>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column
                            label="支付方式"
                            width="130">
                        <template slot-scope="scope">
                            <el-select @change="changePayMethod(scope.row)" v-model="scope.row.payMethod"
                                       placeholder="请选择支付方式">
                                <el-option
                                        v-for="item in payMethods"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
<!--                    <el-table-column-->
<!--                            label="支付方式"-->
<!--                            width="130">-->
<!--                        <template slot-scope="scope">-->
<!--                            <el-select @change="changePayMethod(scope.row)" v-model="scope.row.payMethod"-->
<!--                                       placeholder="请选择支付方式">-->
<!--                                <el-option-->
<!--                                        v-for="item in payMethods"-->
<!--                                        :key="item.value"-->
<!--                                        :label="item.label"-->
<!--                                        :value="item.value"-->
<!--                                        :disabled="item.disabled">-->
<!--                                </el-option>-->
<!--                            </el-select>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column
                            label="会员卡">
                        <template slot-scope="scope">
                            <el-select :disabled="scope.row.payMethod!='会员卡'" v-model="scope.row.payMethodDetail"
                                       placeholder="请选择支付卡">
                                <el-option
                                        v-for="item in moneyCards"
                                        :key="item.id"
                                        :label="item.showLable"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
<!--                    <el-table-column-->
<!--                            label="会员卡">-->
<!--                        <template slot-scope="scope">-->
<!--                            <el-select :disabled="scope.row.payMethod!='会员卡'" v-model="scope.row.payMethodDetail"-->
<!--                                       placeholder="请选择支付卡">-->
<!--                                <el-option-->
<!--                                        v-for="item in moneyCards"-->
<!--                                        :key="item.id"-->
<!--                                        :label="item.showLable"-->
<!--                                        :value="item.id">-->
<!--                                </el-option>-->
<!--                            </el-select>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column
                            prop="address"
                            label="操作">
@@ -313,8 +354,9 @@
                            <li>订单总金额:{{order.total}}</li>
                            <li v-if="order.arrears>0">订单欠款:<span class="arrears">{{order.arrears}}</span></li>
                            <li v-if="order.arrears<0">找零:<span class="arrears">{{order.arrears}}</span></li>
                            <li>整单折扣:<span class="arrears">{{order.total - order.zkTotal}}</span></li>
<!--                            <li v-if="order.arrears>0">订单欠款:<span class="arrears">{{order.arrears}}</span></li>-->
<!--                            <li v-if="order.arrears<0">找零:<span class="arrears">{{order.arrears}}</span></li>-->
                        </ul>
                    </div>
                    <div class="money">
@@ -327,7 +369,8 @@
                    <el-button type="primary" @click="submitOrder(2)">挂单</el-button>
                    <el-button type="primary" @click="print()">打印</el-button>
                    <el-button type="primary" @click="drawer = true">业绩设置</el-button>
                    <el-button type="success" @click="confirmSubmit()" class="bigbtn"> 结算</el-button>
                    <!--                    <el-button type="success" @click="confirmSubmit()" class="bigbtn"> 结算</el-button>-->
                    <el-button type="success" @click="dialogSettleVisible = true" class="bigbtn">收款</el-button>
                </el-col>
            </el-row>
@@ -411,6 +454,61 @@
        </el-row>
    </el-drawer>
    <el-dialog title="收款" :visible.sync="dialogSettleVisible">
        <el-row type="flex" align="middle" style="padding: 0 0 10px 0;">
            <el-col :span="5" style="text-align: center;">应收</el-col>
            <el-col :span="10" style="text-align: center; line-height: 50px;"><span style="color: red; font-size: 20px;">¥ {{order.payMoney}}</span></el-col>
        </el-row>
        <el-row type="flex" align="middle" style="padding: 10px 0;">
            <el-col :span="5" style="text-align: center;">收款方式</el-col>
            <el-col class="paymethod" :span="15">
                <el-row>
                    <ul>
                        <span v-for="(item, index) in payMethods">
                            <el-popover
                                    :disabled="item.type != '会员卡'"
                                    placement="bottom"
                                    trigger="hover"
                                    @hide="popoverHide(item)">
                                <el-row style="text-align: center;"><span style="padding: 0 0 10px 0; display: block; font-size: 12px;">选择会员卡支付方式</span></el-row>
                                <el-tree :data="moneyCards"
                                        show-checkbox
                                        default-expand-all
                                        node-key="id"
                                        ref="tree"
                                         check-strictly
                                         highlight-current
                                         @check="(click, checked,$item)=>{handleCheckChange(click, checked,$item)}"
                                         :props="defaultProps">
                                </el-tree>
                                <li :class="{active : item.isActive}" slot="reference" @click="payMethodSelect(item, index)">{{item.value}}</li>
                            </el-popover>
                        </span>
                    </ul>
                </el-row>
            </el-col>
        </el-row>
        <el-row type="flex" align="middle" style="padding: 10px 0 50px 0;">
            <el-col :span="5" style="text-align: center;">支付金额</el-col>
            <el-col :span="15">
                <el-row style="line-height: 50px;" v-for="(item, index) in payMoneys">
                    <el-col :span="6" style="text-align: right; padding-right: 10px; font-size: 12px;">{{item.value}}</el-col>
                    <el-col :span="8"><el-input v-model.number="item.money"></el-input></el-col>
                    <el-col :span="6" style="margin-left: 10px;" v-if="item.type == '会员卡'">{{item.isGift == 1 ? '赠送余额' : '余额' }}:<span class="arrears">¥ {{item.balance}}</span></el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row style="text-align: center; margin: 20px 0 10px 0">
            <el-checkbox>打印小票</el-checkbox>
        </el-row>
        <el-row style="text-align: center; margin: 10px 0 0 0">
            <el-button type="primary" @click="submitPay">确认收款</el-button>
        </el-row>
    </el-dialog>
</div>
</body>
@@ -456,24 +554,33 @@
            currentVipInfo: {},
            vipLoading: false,
            payMethods: [{
                value: '现金',
                label: '现金'
                value: '现金支付',
                isActive: false,
                type: '现金支付'
            }, {
                value: '微信',
                label: '微信'
                isActive: false,
                type: '微信'
            }, {
                value: '支付宝',
                label: '支付宝'
                isActive: false,
                type: '支付宝'
            }, {
                value: '银行卡',
                label: '银行卡'
                isActive: false,
                type: '银行卡'
            }, {
                value: '美团',
                label: '美团'
                value: '团购',
                isActive: false,
                type: '团购'
            }, {
                value: '会员卡',
                label: '会员卡',
                disabled: true,
                isActive: false,
                type: '会员卡'
            }, {
                value: '欠款',
                isActive: false,
                type: '欠款'
            },],
            achieveList: [],
            //会员可用的充值卡
@@ -495,6 +602,13 @@
            loading: false,
            /******搜索表格数据END********/
            dialogSettleVisible : true,
            defaultProps: {
                children: 'children',
                label: 'showLable'
            },
            treeSelect : [],
            payMoneys : []
        },
@@ -572,7 +686,6 @@
                }
            });
        },
        methods: {
@@ -598,17 +711,25 @@
                        contentType: 'application/x-www-form-urlencoded',
                        url: basePath + '/admin/moneyCardUse/getUseMoneyCard',
                        callback: function (data) {
                            console.log(_this.moneyCards)
                            if (data.rows.length > 0) {
                                data.rows.forEach(function (item, index, input) {
                                    item.showLable = item.cardName + "-余额:" + (item.realMoney + item.giftMoney)
                                    item.showLable = item.cardName + "-余额:" + (item.realMoney)
                                    item.uuid = MTools.uuid();
                                    if (item.giftMoney != 0) {
                                        var children = [];
                                        var gift = {};
                                        gift.id = item.id;
                                        gift.giftMoney = item.giftMoney;
                                        gift.showLable = item.cardName + '-赠送金额' + item.giftMoney;
                                        gift.cardName = item.cardName;
                                        gift.isGift = 1;
                                        gift.uuid = MTools.uuid();
                                        children.push(gift);
                                        item.children = children;
                                    }
                                });
                                console.log(data.rows)
                                _this.moneyCards = data.rows;
                                //启用会员卡支付方式
                                _this.payMethods[5].disabled = false;
                            } else {
                                //禁用会员卡支付方式
                                _this.payMethods[5].disabled = true;
                            }
                        }
@@ -755,34 +876,45 @@
                    //检查支付方式
                    let hasPayMethod=true;
                    _this.order.items.forEach(item=>{
                        if(!item.payMethod){
                            hasPayMethod=false;
                            return;
                    // let hasPayMethod=true;
                    // _this.order.items.forEach(item=>{
                    //     if(!item.payMethod){
                    //         hasPayMethod=false;
                    //         return;
                    //     }
                    // });
                    // if(!hasPayMethod){
                    //     this.$message.warning("请选择支付方式");
                    //     return false;
                    // }
                    let flows = []
                    _this.payMoneys.forEach(item=>{
                        let flow = {};
                        flow.payMethod = item.type;
                        flow.amount = item.money;
                        if (item.type == 6) {
                            flow.isGift = item.isGift;
                            flow.cardId = item.id;
                        }
                    });
                    if(!hasPayMethod){
                        this.$message.warning("请选择支付方式");
                        return false;
                    }
                        flows.push(flow)
                    })
                    _this.order.flows = flows;
                    //匹配业绩
                    _this.achieveList.forEach(achieve => {
                        for (let i = 0; i < _this.order.items.length; i++) {
                            let item = _this.order.items[i];
                            item.achieveList = [];
                            if (!item.achaeveList){
                                item.achaeveList = [];
                            }
                            if (item.uuid == achieve.orderItem.uuid) {
                                let achieveNew = {
                                    beaultId: achieve.saleId,
                                    t1: achieve.achieveMoney
                                };
                                item.achieveList.push(achieveNew);
                                item.achaeveList.push(achieveNew);
                                break;
                            }
                        }
@@ -1020,6 +1152,80 @@
            },
            payMethodSelect(item, index) {
                let _this = this;
                let payMoneys = _this.payMoneys;
                if (item.type != 6) {
                    this.$nextTick(function () {
                        if (item.isActive) {
                            Vue.set(item,'isActive',false);
                            var index = -1;
                            for (var i = 0; i < payMoneys.length; i++) {
                                let payMoney = payMoneys[i];
                                if (payMoney.value == item.value) {
                                    index = i;
                                    break;
                                }
                            }
                            if (index > -1) {
                                _this.payMoneys.splice(index, 1)
                            }
                        } else {
                            Vue.set(item,'isActive',true);
                            _this.payMoneys.push(item);
                        }
                    });
                }
            },
            popoverHide(item) {
                if(this.treeSelect.length <= 0) {
                    Vue.set(item, 'isActive', false)
                } else {
                    Vue.set(item, 'isActive', true)
                }
            },
            handleCheckChange(clickNode, checked) {
                let _this = this;
                let nodes = checked.checkedNodes;
                _this.treeSelect = nodes;
                var index = -1;
                // 判断点击节点是否在已展示支付方式中
                for(var i = 0; i < _this.payMoneys.length; i++) {
                    let node = _this.payMoneys[i];
                    if (node.uuid === clickNode.uuid) {
                        index = i;
                        break;
                    }
                }
                // 若点击节点在选中节点中,且已展示支付方式不存在,则添加
                if (nodes.indexOf(clickNode) > -1 && index === -1) {
                    var node = clickNode;
                    var item = {};
                    if (node.isGift) {
                        item.value = node.cardName;
                        item.balance = node.giftMoney;
                        item.isGift = 1;
                    } else {
                        item.value = node.cardName;
                        item.balance = node.realMoney;
                        item.isGift = 0;
                    }
                    item.type = '会员卡';
                    item.id = node.id;
                    item.uuid = clickNode.uuid;
                    _this.payMoneys.push(item);
                }
                // 若点击节点不存在选中节点中,且已展示支付方式中存在,则移除
                if (nodes.indexOf(clickNode) === -1 && index > -1) {
                    _this.payMoneys.splice(index, 1);
                }
            },
            submitPay() {
            }
        }
    })