manyi/static/1.0/tpl/devConfig.html

<div ng-controller="devConfigCtrl">
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h4">设备参数配置</h1>
    </div>

    <div class="wrapper-md">
        <style type="text/css">
            .package-item {
                position: relative;
            }

            .package-item:nth-child(2n) {
                background: #ddeeff;
                padding: 10px;
            }

            .package-item:nth-child(2n-1) {
                background: #ffeedd;
                padding: 10px;
            }

            .delete-btn {
                position: absolute;
                top: 10px;
                right: 10px;
            }

            .progress {
                position: absolute;
                top: 0;
                width: 100%;
                left: 0;
                opacity: 0;
            }

            .progress.active {
                opacity: 1;
            }
        </style>

        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="btn btn-default" ng-click="editDevType()"><i class="fa fa-edit "></i> 修改</div>
            </div>
            <div class="table-responsive">
                <div ui-grid="devTypeGridOptions" style="min-height:420px" ui-grid-pagination
                     ui-grid-selection></div>
            </div>
        </div>

        <form name="devTypeForm" id="devTypePanel" class="form-horizontal form-validation modal fade" role="dialog" data-backdrop="static"
              style=" width: 1366px;height: 680px">
            <div class="panel panel-default">
                <div class="modal-header">
                    <strong ng-bind="dialogName"></strong>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>

                <div class="panel-body">

                    <div class="form-group">
                        <label class="col-sm-1 control-label">类型编码：</label>
                        <div class="col-sm-5">
                            <input type="text" ng-model="dialogData.code" ng-disabled="true" class="form-control"
                                   placeholder="类型编码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">设备类型：</label>
                        <div class="col-sm-5">
                            <input type="text" ng-model="dialogData.majorDeviceType" ng-disabled="true"
                                   class="form-control" placeholder="设备类型">
                        </div>
                    </div>

                    <div class="form-group"
                         ng-if="['汽车交流桩','汽车直流桩','汽车交直流一体桩'].includes(dialogData.majorDeviceType)">
                        <label class="col-sm-1 control-label">充电参数配置：</label>
                        <div class="col-sm-11 form-inline">
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">设备生产商组织机构代码：</label>
                                <div class="col-sm-8">
                                    <input type="text" ng-model="dialogData.extraInfo.ManufacturerID" style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">设备生产商名称：</label>
                                <div class="col-sm-8">
                                    <input type="text" ng-model="dialogData.extraInfo.ManufacturerName" style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">设备型号：</label>
                                <div class="col-sm-8">
                                    <input type="text" ng-model="dialogData.extraInfo.EquipmentModel" style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">设备总功率：</label>
                                <div class="col-sm-8">
                                    <input type="number" ng-model="dialogData.extraInfo.Power" min="0" style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">单路接口类型：</label>
                                <div class="col-sm-8">
                                    <select class="form-control" ng-model="dialogData.extraInfo.ConnectorType" required
                                            ng-options="item.value as item.name for item in config.ConnectorTypeList"
                                            style="width: 100%">
                                        <option value="">请选择</option>
                                    </select>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">单路额定电压上限：</label>
                                <div class="col-sm-8">
                                    <input type="number" ng-model="dialogData.extraInfo.VoltageUpperLimits" min="0"
                                           style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">单路额定电压下限：</label>
                                <div class="col-sm-8">
                                    <input type="number" ng-model="dialogData.extraInfo.VoltageLowerLimits" min="0"
                                           style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">单路额定电流：</label>
                                <div class="col-sm-8">
                                    <input type="number" ng-model="dialogData.extraInfo.portCurrent" min="0" style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>
                            <div class="col-sm-6" style="margin-bottom: 8px">
                                <label class="col-sm-4 control-label">单路额定功率：</label>
                                <div class="col-sm-8">
                                    <input type="number" ng-model="dialogData.extraInfo.portPower" min="0" style="width: 100%"
                                           class="form-control"
                                           required>
                                </div>
                            </div>

                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-1 control-label">特性：</label>

                        <div class="col-sm-11">
                            <div class="pull-left" tooltip="如娃娃机、纸巾机等">
                                <div class="checkbox">
                                    <label class="i-checks">
                                        <input type="checkbox" ng-model="dialogData.stock" value="">
                                        <i></i>
                                    </label>
                                    库存
                                </div>
                            </div>

                            <div class="pull-left m-l-sm" tooltip="设备在启动后还可以继续投币">
                                <div class="checkbox">
                                    <label class="i-checks">
                                        <input type="checkbox" ng-model="dialogData.payableWhileBusy" value="">
                                        <i></i>
                                    </label>
                                    追加投币
                                </div>
                            </div>

                            <div class="pull-left m-l-sm" tooltip="设备额外收取服务费，经销商套餐单位只有度">
                                <div class="checkbox">
                                    <label class="i-checks">
                                        <input type="checkbox" ng-model="dialogData.features.billAsService.support" value="">
                                        <i></i>
                                        服务费模式
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" ng-if="dialogData.features.billAsService.support">
                        <label class="col-sm-1 control-label">服务费配置：</label>
                        <div class="col-sm-10 form-inline">
                            电费：<input type="number" ng-model="dialogData.features.billAsService.elecCharge" min="0"
                                      class="form-control"
                                      placeholder="电费" required>
                            服务费：<input type="number" ng-model="dialogData.features.billAsService.serviceCharge" min="0"
                                       class="form-control"
                                       placeholder="服务费" required>
                            <label class="i-checks" style="display: inline-block;margin-left: 10px">
                                <input type="checkbox" ng-model="dialogData.features.billAsService.on" value="">
                                <i></i>
                                是否开启
                            </label>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-1 control-label">设备名称：</label>
                        <div class="col-sm-5">
                            <input type="text" ng-model="dialogData.name" class="form-control" placeholder="设备名称"
                                   required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label">使用说明：</label>
                        <div class="col-sm-5">
                           <textarea ng-model="dialogData.instructions"
                                     class="form-control"
                                     placeholder="使用说明"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label">计费单位：</label>
                        <div class="col-sm-11">
                            <div class="radio pull-left m-r" ng-repeat="item in config.unitMap">
                                <label class="i-checks">
                                    <input type="radio" name="unit" value="{{item}}" required
                                           ng-model="dialogData.unit">
                                    <i></i>
                                    {{item}}
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="line line-dashed b-b line-lg pull-in"></div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label">默认套餐：</label>
                        <div class="col-sm-11 form-inline">
                            <div ng-repeat="item in dialogData.package" class="info-inline package-item">
                                名称：<input type="text" ng-model="dialogData.package[$index].name" class="form-control"
                                          placeholder="套餐名称" required>
                                价格：<input type="number" ng-model="dialogData.package[$index].price" class="form-control"
                                          placeholder="价格" required>
                                投币：<input type="number" ng-model="dialogData.package[$index].coins" class="form-control"
                                          placeholder="投币（个）" required>
                                描述：<textarea ng-model="dialogData.package[$index].description" class="form-control"
                                             placeholder="套餐描述"></textarea>

                                <span ng-if="dialogData.unit">
                                消耗：
                                <div class="input-group ">
                                    <input type="number" ng-model="dialogData.package[$index].time"
                                           class="form-control m-r-none"
                                           placeholder="" required>
                                    <span class="input-group-addon">{{dialogData.unit}}</span>
                                </div>
                            </span>

                                图片：
                                <div class="" style="width: 200px;display: inline-block">
                                    <!---文件选择-->
                                    <label for="file{{$index}}" class=" btn btn-default">选择文件</label>
                                    <input id="file{{$index}}" type="file" style="display:none" nv-file-select=""
                                           uploader="dialogData.package[$index].uploader">

                                    <input type="hidden" title="文件路径隐藏域"
                                           ng-model="dialogData.package[$index].imgList[0]"/>

                                    <!---上传按钮-->
                                    <button type="button" class="btn btn-addon btn-success" style="margin-top: 10px"
                                            ng-click="dialogData.package[$index].uploader.uploadAll()"
                                            ng-disabled="!dialogData.package[$index].uploader.getNotUploadedItems().length">
                                        <i class="fa fa-arrow-circle-o-up"></i> 上传图片
                                    </button>
                                </div>
                                <!---图片预览-->
                                <img id="previewImg"
                                     ng-src="{{dialogData.package[$index].imgList[0]+(dialogData.package[$index].imgList[0]?('?t='+dialogData._nowTime):'')}}"
                                     style="max-height: 80px;max-width: 80px">
                                <!---上传进度-->
                                <div class="progress bg-light dker progress-xs"
                                     ng-if="dialogData.package[$index].uploader.progress>0">
                                    <div class="progress-bar progress-bar-striped bg-info " role="progressbar"
                                         ng-style="{ 'width': dialogData.package[$index].uploader.progress + '%' }"></div>
                                </div>

                                <span class="btn btn-danger btn-sm delete-btn"
                                      ng-click="deletePackage($index)">删除</span>
                            </div>

                            <div class="info-inline">
                                <span class="btn btn-info " ng-click="addPackage()">添加</span>
                            </div>
                        </div>
                    </div>
                    <div class="line line-dashed b-b line-lg pull-in"></div>

                </div>
                <footer class="panel-footer text-right bg-light lter">
                    <button type="submit" class="btn btn-success" ng-click="saveDevTypeData()">保存
                    </button>
                </footer>
            </div>
        </form>

    </div>
</div>