优化钥匙申请

wuxw

2020-02-23 3363a9588500a2810364a6f1bb01c4ce26c8fed7

优化钥匙申请

 WebService/src/main/resources/components/applicationKeyPackage/add-applicationKey/addApplicationKey.html

@@ -1,83 +1,164 @@
<div id="addApplicationKeyModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <h3 class="m-t-none m-b ">添加钥匙申请</h3>
                <div class="ibox-content">
                    <div>
                        <div>
<div class="row">
    <div class="col-lg-12">
        <div class="ibox">
            <div class="ibox-title">
                <h5>申请钥匙</h5>
                <div class="ibox-tools" style="top:10px;">

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">姓名</label>
                                <div class="col-sm-10">
                                    <input v-model="addApplicationKeyInfo.name" type="text" placeholder="必填，请填写姓名"
                                           class="form-control">
                                </div>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-5" style="text-align:center">
                        <video id="addApplicationKeyPhoto" style="width: 100%;"></video>
                        <canvas id="AddApplicationKeyCanvas" style="display:none;"></canvas>
                        <div style="margin-top:20px">
                            <button class="btn btn-primary" type="button" v-on:click="_takePhoto()"><span
                                    class="glyphicon glyphicon-camera"></span> 拍照
                            </button>
                            <span class="btn btn-default btn-file" v-on:click="_uploadPhoto($event)">
                                    <span class="fileinput-new">上传照片</span>
                                </span>
                            <input type="file" class="file" accept="images/*" id="uploadApplicationKeyPhoto" hidden
                                   v-on:change="_choosePhoto($event)">
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">姓名</label>
                            <div class="col-sm-10">
                                <input v-model="addApplicationKeyInfo.name" type="text" placeholder="必填，请填写姓名"
                                       class="form-control">
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">手机号</label>
                                <div class="col-sm-10">
                                    <input v-model="addApplicationKeyInfo.tel" type="text" placeholder="必填，请填写手机号"
                                           class="form-control">
                                </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">手机号</label>
                            <div class="col-sm-10">
                                <input v-model="addApplicationKeyInfo.tel" type="text" placeholder="必填，请填写手机号"
                                       class="form-control">
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">用户类型</label>
                                <div class="col-sm-10">
                                    <select class="custom-select" v-model="addApplicationKeyInfo.typeCd">
                                        <option selected disabled value="">必填，请选择用户类型</option>
                                        <option value="10001">保洁</option>
                                        <option value="10002">保安</option>
                                        <option value="10003">其他人员</option>
                                    </select></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">用户类型</label>
                            <div class="col-sm-10">
                                <select class="custom-select" v-model="addApplicationKeyInfo.typeCd">
                                    <option selected disabled value="">必填，请选择用户类型</option>
                                    <option value="10001">保洁</option>
                                    <option value="10002">保安</option>
                                    <option value="10003">其他人员</option>
                                </select></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">钥匙类型</label>
                            <div class="col-sm-10">
                                <select class="custom-select" v-model="addApplicationKeyInfo.typeFlag">
                                    <option selected disabled value="">必填，请选择钥匙类型申请</option>
                                    <option value="1100101">人脸</option>
                                    <option value="1100102">固定密码</option>
                                    <option value="1100103">临时密码</option>
                                </select></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">性别</label>
                            <div class="col-sm-10">
                                <select class="custom-select" v-model="addApplicationKeyInfo.sex">
                                    <option selected disabled value="">必填，请选择性别</option>
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">年龄</label>
                            <div class="col-sm-10">
                                <input v-model="addApplicationKeyInfo.age" type="text" placeholder="必填，请填写年龄"
                                       class="form-control">
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">性别</label>
                                <div class="col-sm-10">
                                    <select class="custom-select" v-model="addApplicationKeyInfo.sex">
                                        <option selected disabled value="">必填，请选择性别</option>
                                        <option value="0">男</option>
                                        <option value="1">女</option>
                                    </select></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">身份证号</label>
                            <div class="col-sm-10">
                                <input v-model="addApplicationKeyInfo.idCard" type="text" placeholder="必填，请填写身份证号"
                                       class="form-control">
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">年龄</label>
                                <div class="col-sm-10">
                                    <input v-model="addApplicationKeyInfo.age" type="text" placeholder="必填，请填写年龄"
                                           class="form-control">
                                </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">设备位置</label>
                            <div class="col-sm-10">
                                <select class="custom-select" v-model="addApplicationKeyInfo.locationTypeCd"
                                        placeholder="必填，请选择设备位置">
                                    <option selected disabled value="">必填，请选择设备位置</option>
                                    <option value="1000">东大门</option>
                                    <option value="1001">西大门</option>
                                    <option value="1002">北大门</option>
                                    <option value="1003">南大门</option>
                                    <option value="2000">单元门</option>
                                    <option value="3000">房屋门</option>
                                </select>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">身份证号</label>
                                <div class="col-sm-10">
                                    <input v-model="addApplicationKeyInfo.idCard" type="text" placeholder="必填，请填写身份证号"
                                           class="form-control">
                                </div>
                        </div>
                        <div class="form-group row"
                             v-show="addApplicationKeyInfo.locationTypeCd == '2000' || addApplicationKeyInfo.locationTypeCd == '3000'  ">
                            <label class="col-sm-2 col-form-label">归属楼栋</label>
                            <div class="col-sm-10">
                                <vc:create name="floorSelect2"
                                           parentModal="addApplicationKeyModel"
                                           namespace="addApplicationKey"
                                ></vc:create>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">开始时间</label>
                                <div class="col-sm-10">
                                    <input v-model="addApplicationKeyInfo.startTime" type="text"
                                           placeholder="必填，请填写开始时间" class="form-control">
                                </div>
                        </div>
                        <div class="form-group row"
                             v-show="addApplicationKeyInfo.locationTypeCd == '2000' || addApplicationKeyInfo.locationTypeCd == '3000'  ">
                            <label class="col-sm-2 col-form-label">归属单元</label>
                            <div class="col-sm-10">
                                <vc:create name="unitSelect2"
                                           parentModal="addApplicationKeyModel"
                                           callBackListener="addApplicationKey"
                                           callBackFunction="notify"
                                           namespace="addApplicationKey"
                                ></vc:create>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">结束时间</label>
                                <div class="col-sm-10">
                                    <input v-model="addApplicationKeyInfo.endTime" type="text" placeholder="必填，请填写结束时间"
                                           class="form-control">
                                </div>
                        </div>
                        <div class="form-group row"
                             v-show="addApplicationKeyInfo.locationTypeCd == '3000'  ">
                            <label class="col-sm-2 col-form-label">归属房屋</label>
                            <div class="col-sm-10">
                                <vc:create name="roomSelect2"
                                           parentModal="addApplicationKeyModel"
                                           callBackListener="addApplicationKey"
                                           callBackFunction="notify"
                                           namespace="addApplicationKey"
                                ></vc:create>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">开始时间</label>
                            <div class="col-sm-10">
                                <input v-model="addApplicationKeyInfo.startTime" readonly type="text"
                                       placeholder="必填，请填写开始时间"
                                       class="form-control addApplicationStartTime">
                            </div>
                        </div>
                        <div class="form-group row" v-show="addApplicationKeyInfo.typeFlag == '1100101' || addApplicationKeyInfo.typeFlag == '1100102' ">
                            <label class="col-sm-2 col-form-label">结束时间</label>
                            <div class="col-sm-10">
                                <input v-model="addApplicationKeyInfo.endTime" readonly type="text"
                                       placeholder="必填，请填写结束时间"
                                       class="form-control addApplicationEndTime">
                            </div>
                        </div>
                        <div class="form-group row" v-if="addApplicationKeyInfo.typeFlag == '1100101'">
                            <label class="col-sm-2 col-form-label">照片</label>
                            <div class="col-sm-10"><img width="100%" height="100%"
                                                        v-bind:src="addApplicationKeyInfo.photo" alt="申请人照片"></div>
                        </div>

                            <div class="ibox-content">
                                <button class="btn btn-primary float-right" type="button"
                                        v-on:click="saveApplicationKeyInfo()"><i class="fa fa-check"></i>&nbsp;保存
                                </button>
                                <button type="button" class="btn btn-warning float-right" style="margin-right:20px;"
                                        data-dismiss="modal">取消
                                </button>
                            </div>
                        <div class="ibox-content">
                            <button class="btn btn-primary float-right" type="button"
                                    v-on:click="saveApplicationKeyInfo()"><i class="fa fa-check"></i>&nbsp;保存
                            </button>
                            <button type="button" class="btn btn-warning float-right" style="margin-right:20px;"
                                    v-on:click="_closeAddApplicationKeyView()">取消
                            </button>
                        </div>
                    </div>
                </div>
@@ -86,3 +167,4 @@
    </div>
</div>



 WebService/src/main/resources/components/applicationKeyPackage/add-applicationKey/addApplicationKey.js

@@ -16,19 +16,78 @@
                idCard: '',
                startTime: '',
                endTime: '',

                floorId: '',
                floorNum: '',
                floorName: '',
                unitId: '',
                unitName: '',
                roomId: '',
                locationTypeCd: '',
                locationObjId: '',
                roomName: '',
                typeFlag:'',
                photo: '',
                mediaStreamTrack: null
            }
        },
        _initMethod: function () {

            vc.component._initAddApplicationKeyDateInfo();
            //vc.component._initAddApplicationKeyMedia();
        },
        _initEvent: function () {
            vc.on('addApplicationKey', 'openAddApplicationKeyModal', function () {
                $('#addApplicationKeyModel').modal('show');
            });
            vc.on('addApplicationKey', "_initAddApplicationKeyData", function () {
                vc.component._initAddApplicationKeyMedia();
            });
            vc.on("addApplicationKey", "notify", function (_param) {
                if (_param.hasOwnProperty("floorId")) {
                    vc.component.addApplicationKeyInfo.floorId = _param.floorId;
                }

                if (_param.hasOwnProperty("unitId")) {
                    vc.component.addApplicationKeyInfo.unitId = _param.unitId;
                }

                if (_param.hasOwnProperty("roomId")) {
                    vc.component.addApplicationKeyInfo.roomId = _param.roomId;
                }
            });
        },
        methods: {
            addApplicationKeyValidate() {
            _initAddApplicationKeyDateInfo: function () {
                vc.component.addApplicationKeyInfo.startTime = vc.dateFormat(new Date().getTime());
                $('.addApplicationStartTime').datetimepicker({
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd hh:ii:ss',
                    initTime: true,
                    initialDate: new Date(),
                    autoClose: 1,
                    todayBtn: true

                });
                $('.addApplicationStartTime').datetimepicker()
                    .on('changeDate', function (ev) {
                        var value = $(".addApplicationStartTime").val();
                        vc.component.addApplicationKeyInfo.startTime = value;
                    });
                $('.addApplicationEndTime').datetimepicker({
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd hh:ii:ss',
                    initTime: true,
                    initialDate: new Date(),
                    autoClose: 1,
                    todayBtn: true
                });
                $('.addApplicationEndTime').datetimepicker()
                    .on('changeDate', function (ev) {
                        var value = $(".addApplicationEndTime").val();
                        vc.component.addApplicationKeyInfo.endTime = value;
                    });
            },

            addApplicationKeyValidate: function () {
                return vc.validate.validate({
                    addApplicationKeyInfo: vc.component.addApplicationKeyInfo
                }, {
@@ -73,12 +132,8 @@
                            limit: "required",
                            param: "",
                            errInfo: "性别不能为空"
                        },
                        {
                            limit: "num",
                            param: "",
                            errInfo: "性别格式错误"
                        },
                        }

                    ],
                    'addApplicationKeyInfo.age': [
                        {
@@ -128,18 +183,42 @@
                            errInfo: "不是有效的时间格式"
                        },
                    ],
                    'addApplicationKeyInfo.locationTypeCd': [
                        {
                            limit: "required",
                            param: "",
                            errInfo: "申请位置不能为空"
                        }
                    ],
                    'addApplicationKeyInfo.locationObjId': [
                        {
                            limit: "required",
                            param: "",
                            errInfo: "具体位置不能为空"
                        }
                    ]


                });
            },
            saveApplicationKeyInfo: function () {
                vc.component.addApplicationKeyInfo.communityId = vc.getCurrentCommunity().communityId;
                if (vc.component.addApplicationKeyInfo.locationTypeCd != '2000' && vc.component.addApplicationKeyInfo.locationTypeCd != '3000') { //大门时直接写 小区ID
                    vc.component.addApplicationKeyInfo.locationObjId = vc.component.addApplicationKeyInfo.communityId;
                } else if (vc.component.addApplicationKeyInfo.locationTypeCd == '2000') {
                    vc.component.addApplicationKeyInfo.locationObjId = vc.component.addApplicationKeyInfo.unitId;
                } else if (vc.component.addApplicationKeyInfo.locationTypeCd == '3000') {
                    vc.component.addApplicationKeyInfo.locationObjId = vc.component.addApplicationKeyInfo.roomId;
                } else {
                    vc.toast("设备位置值错误");
                    return;
                }
                if (!vc.component.addApplicationKeyValidate()) {
                    vc.toast(vc.validate.errInfo);

                    return;
                }

                vc.component.addApplicationKeyInfo.communityId = vc.getCurrentCommunity().communityId;
                //不提交数据将数据 回调给侦听处理
                if (vc.notNull($props.callBackListener)) {
                    vc.emit($props.callBackListener, $props.callBackFunction, vc.component.addApplicationKeyInfo);
@@ -158,7 +237,7 @@
                        //vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
                        if (res.status == 200) {
                            //关闭model
                            $('#addApplicationKeyModel').modal('hide');
                            //$('#addApplicationKeyModel').modal('hide');
                            vc.component.clearAddApplicationKeyInfo();
                            vc.emit('applicationKeyManage', 'listApplicationKey', {});

@@ -184,9 +263,92 @@
                    idCard: '',
                    startTime: '',
                    endTime: '',

                    floorId: '',
                    floorNum: '',
                    floorName: '',
                    unitId: '',
                    unitName: '',
                    roomId: '',
                    locationTypeCd: '',
                    locationObjId: '',
                    roomName: '',
                    photo: '',
                    videoPlaying: false,
                    mediaStreamTrack: null,
                    typeFlag:'',
                };
            }
            },
            _closeAddApplicationKeyView: function () {
                vc.emit('applicationKeyManage', 'listApplicationKey', {});
                //关闭拍照摄像头
                if (vc.component.addApplicationKeyInfo.mediaStreamTrack != null) {
                    vc.component.addApplicationKeyInfo.mediaStreamTrack.stop();
                }
            },
            _addUserMedia: function () {
                return navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia || null;
            },
            _initAddApplicationKeyMedia: function () {
                if (vc.component._addUserMedia()) {
                    vc.component.addApplicationKeyInfo.videoPlaying = false;
                    var constraints = {
                        video: true,
                        audio: false
                    };
                    var addVideo = document.getElementById('addApplicationKeyPhoto');
                    var media = navigator.getUserMedia(constraints, function (stream) {
                        var url = window.URL || window.webkitURL;
                        //video.src = url ? url.createObjectURL(stream) : stream;
                        vc.component.addApplicationKeyInfo.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
                        try {
                            addVideo.src = url ? url.createObjectURL(stream) : stream;
                        } catch (error) {
                            addVideo.srcObject = stream;
                        }
                        addVideo.play();
                        vc.component.addApplicationKeyInfo.videoPlaying = true;
                    }, function (error) {
                        console.log("ERROR");
                        console.log(error);
                    });
                } else {
                    console.log("初始化视频失败");
                }
            },
            _takePhoto: function () {
                if (vc.component.addApplicationKeyInfo.videoPlaying) {
                    var canvas = document.getElementById('AddApplicationKeyCanvas');
                    var takeAddVideo = document.getElementById('AddApplicationKeyPhoto');
                    canvas.width = takeAddVideo.videoWidth;
                    canvas.height = takeAddVideo.videoHeight;
                    canvas.getContext('2d').drawImage(takeAddVideo, 0, 0);
                    var data = canvas.toDataURL('image/webp');
                    vc.component.addApplicationKeyInfo.photo = data;
                    //document.getElementById('photo').setAttribute('src', data);
                }
            },
            _uploadPhoto: function (event) {
                $("#uploadApplicationKeyPhoto").trigger("click")
            },
            _choosePhoto: function (event) {
                var photoFiles = event.target.files;
                if (photoFiles && photoFiles.length > 0) {
                    // 获取目前上传的文件
                    var file = photoFiles[0];// 文件大小校验的动作
                    if (file.size > 1024 * 1024 * 1) {
                        vc.toast("图片大小不能超过 2MB!")
                        return false;
                    }
                    var reader = new FileReader(); //新建FileReader对象
                    reader.readAsDataURL(file); //读取为base64
                    reader.onloadend = function (e) {
                        vc.component.addApplicationKeyInfo.photo = reader.result;
                    }
                }
            },
        }
    });


 WebService/src/main/resources/components/applicationKeyPackage/add-applicationKeyView/addApplicationKey.html

File was deleted

 WebService/src/main/resources/components/applicationKeyPackage/add-applicationKeyView/addApplicationKey.js

File was deleted