manyi/static/app/js/device-param-100286.js

/**
 * 连续功率模式
 * @param option
 * @constructor
 */
function PowerPackageComponent(option) {
    var _el = option.el;
    var _packages = option.packages;

    return new Vue({
        el: _el,
        template: `
<div class="power-package-component">

        <div class="mui-input-group">
            <div class="mui-table-view-cell" v-for="(obj,index) in info.packages">
                <span>第{{index+1}}档功率：{{obj.max}}W</span>
                 <span>，{{obj.price}}元/小时</span>
                <span class="mui-pull-right">
        <em v-on:click="editPackageRule(obj,index)" class="padding-t-b-10"><i class="iconfont icon-edit c-primary"></i>编辑</em>
        <em v-on:click="deletePackageRule(obj,index)" class="padding-t-b-10" ><i
                class="iconfont icon-delete c-red"></i>删除</em></span>
            </div>
            <div class="mui-table-view-cell" v-if="info.packages.length<10"
                 v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</span></div>
        </div>

        <!--  v-if:编辑后，必须移掉此元素，否则submit会报 focus异常-->
        <div class="edit-back packageDialog" v-if="info.dialogOpen">
            <div class="edit-content">
                <div class="edit-box ">
                    
                       <div class="mui-input-row">
                        <label>功率上限</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" inputmode="decimal" maxlength="5" v-model.number="info.dialogData.max"/>
                            <span>W</span>
                        </div>
                    </div>
                    <div class="mui-input-row">
                        <label>价格</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" inputmode="decimal" maxlength="5" v-model.number="info.dialogData.price"
                            />
                            <span>元/小时</span>
                        </div>
                    </div>

                </div>
                <div class="mui-popup-buttons ">
                    <span class="mui-popup-button" v-on:click="closeRulePanel()">取消</span>
                    <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePackageRule()">确认</span>
                </div>
            </div>
        </div>

</div>
        `,
        data: {
            info: {
                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},

                packages: []
            },
        },

        mounted: function () {
            var that = this
            that.initPackages();
        },

        methods: {
            initPackages: function () {
                this.info.packages = _packages;
            },

            editPackageRule: function (obj, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = $.extend(true, {}, obj);

                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            deletePackageRule: function (obj, index) {
                var that = this;
                var tnArray = ['取消', '确认'];
                mui.confirm('确定要删除该套餐？', '温馨提示', tnArray, function (e) {
                    if (e.index == 0) {
                    } else {
                        //点击确认业务
                        that.info.packages.splice(index, 1);
                    }
                });
            },

            closeRulePanel: function () {
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            savePackageRule: function () {
                var dialogData = this.info.dialogData;
                var packages = this.info.packages


                if ($.trim(dialogData.max) == '') {
                    mui.toast("最大功率不能为空");
                    return;
                }

                var dialogIndex = this.info.dialogIndex;
                if ($.trim(dialogData.price) == '') {
                    mui.toast("价格不能为空");
                    return;
                }

                this.info.packages.splice(this.info.dialogIndex, 1, $.extend(true, {}, dialogData))
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            addPackageRule: function () {
                var packages = this.info.packages
                var dialogIndex = this.info.dialogIndex = this.info.packages.length;
                this.info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动

                this.info.dialogData = {};
                if (dialogIndex >= 1) {
                    var prvItem = packages[dialogIndex - 1];
                    this.info.dialogData.min = prvItem.max;
                }

            },

        }
    });
}