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

function ChargeParamComponent(option) {
    var _el = option.el;
    var _powerStep = option.powerStep;
    var _consumeType = option.consumeType;
    var _billingType = option.billingType;

    var app = this.app = new Vue({
        el: _el,
        template: `
<div>
    <div class="mui-input-group">
        <div class="mui-input-row mui-radio">
            <label class="tips-event">
                先按键
                <i class="tips" title="先按下按键，然后再刷卡或者投币">?</i>
            </label>
            <input id="consumeType1" v-model="info.consumeType" name="consumeType" value="1" type="radio">
        </div>
        
        <div class="mui-input-row mui-radio">
            <label class="tips-event">
                后按键
                <i class="tips" title="先刷卡或者投币，然后按下按键启动">?</i>
            </label>
            <input id="consumeType2" v-model="info.consumeType" name="consumeType" value="0" type="radio">
        </div>
    </div>
    
    <div class="mui-input-group">
        <div class="mui-input-row mui-radio">
            <label class="tips-event">
                电量模式计费
                <i class="tips" title="该模式下，用户充电按照电量计费">?</i>
            </label>
            <input id="billingType2" v-model="info.billingType" name="billingType" value="1" type="radio">
        </div>
        <div class="mui-input-row mui-radio">
            <label class="tips-event">
                功率分档计费
                <i class="tips" title="该模式下，用户充电按照时间收费，同时会检测用户充电功率，根据功率以及相应功率分档设置动态缩减用户的充电时间">?</i>
            </label>
            <input id="billingType1" v-model="info.billingType" name="billingType" value="0" type="radio">
        </div>
    </div>
    
    <div class="mui-input-group" v-if="info.billingType=='0'">
    <div class="mui-table-view-cell" v-for="(obj,index) in info.powerStep">
        <template>
            <span>第{{index+1}}档: </span>
            <span>功率：{{obj.power}} w</span>
            <span>比例：{{obj.ratio}} %</span>
        </template>
        
        <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>
        </span>
    </div>
    </div>
    
    
    <div class="edit-back packageDialog" v-if="info.edit">
        <div class="edit-content">
            <div class="edit-box ">

            <template>
                <div class="mui-input-row">
                    <label>功率</label>
                    <div class="mui-pull-right edit-row">
                        <input type="number" min="0" max="999" v-model="info.curPower"/>
                        <span>瓦</span>
                    </div>
                </div>
                
                <div class="mui-input-row ">
                    <label>比例</label>
                    <div class="mui-pull-right edit-row">
                        <input type="number" min="0" max="100" v-model="info.curRatio"/>
                        <span>%</span>
                    </div>
                </div>
            </template>
                
            </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="saveRule()">确认</span>
            </div>
        </div>
    </div>
    
</div>
        `
        ,
        data: {
            info: {
                consumeType: null,
                billingType: null,
                powerStep: [],

                edit: false,
                curPower: 0,
                curRatio: 0,
                curIndex: 0
            },
        },

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

        methods: {

            initPackages: function () {
                this.info.powerStep = _powerStep;
                this.info.consumeType = _consumeType;
                this.info.billingType = _billingType;
            },

            editPackageRule: function (obj, index) {
                this.info.curPower = obj.power;
                this.info.curRatio = obj.ratio;
                this.info.curIndex = index;
                this.info.edit = true
            },

            closeRulePanel: function (){
                this.info.edit = false
            },

            saveRule: function (){
                var obj = {}
                obj.power = this.info.curPower;
                obj.ratio = this.info.curRatio;
                this.info.powerStep[Number(this.info.curIndex)] = obj;
                console.log(this.info.curIndex)
                this.closeRulePanel()
            }

        }
    });
}


// 获取获取功率计费
ChargeParamComponent.prototype.getPowerStep = function () {
    return this.app.info.powerStep;
};


ChargeParamComponent.prototype.getConsumeType = function () {
    return this.app.info.consumeType;
};

ChargeParamComponent.prototype.getBillingType = function () {
    return this.app.info.billingType;
};