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

function PortConfigComponent(option) {
    var _el = option.el;
    var _packages = option.packages;
    if ($.isEmptyObject(_packages)) {
        _packages = {};
        for (var index = 1; index <= 12; index++) {
            _packages['port' + index] = {
                max_max_power: "",
                max_current: "",
            }
        }
    }

    this.app = 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}}，</span>
                <span>最大功率:{{obj.max_max_power}}瓦，</span>
                <span>最大电流:{{obj.max_current}}安</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>
                </span>
            </div>
        </div>

        <div class="edit-back packageDialog" v-bind:class="{ hidden: !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" step="0.01" v-model="info.dialogData.max_max_power"/>
                            <span>瓦</span>
                        </div>
                    </div>
                    <div class="mui-input-row">
                        <label>最大充电电流</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" inputmode="decimal" step="0.01" v-model="info.dialogData.max_current"/>
                            <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();
        },

        computed: {},

        filters: {},

        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滚动
            },

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

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

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

                if ($.trim(dialogData.max_current) === '') {
                    mui.toast("最大充电电流不能为空");
                    return;
                }

                dialogData.max_max_power = parseFloat(parseFloat(dialogData.max_max_power).toFixed(2))
                dialogData.max_current = parseFloat(parseFloat(dialogData.max_current).toFixed(2))

                this.info.packages[this.info.dialogIndex] = $.extend(true, {}, this.info.dialogData);
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");
            },

        }
    });
}

PortConfigComponent.prototype.getPackages = function () {
    return this.app.info.packages;
};