Skip to content

G
guns-vip
Commit 149354e4 by fengshuonan
Options

头像上传和修改

parent b93703bd
Showing with 445 additions and 88 deletions
src/main/webapp/WEB-INF/common/_container.html
...@@ -165,6 +165,7 @@ ...@@ -165,6 +165,7 @@
@} @}
@if(array.contain(plugins,"cropper")){ @if(array.contain(plugins,"cropper")){
<script src="${ctxPath}/assets/common/plugins/cropper/cropper.min.js"></script> <script src="${ctxPath}/assets/common/plugins/cropper/cropper.min.js"></script>
<script src="${ctxPath}/assets/common/plugins/cropper/cropper.jquery.min.js"></script>
@} @}
@} @}
......
src/main/webapp/WEB-INF/system/user/user_view.html
...@@ -32,8 +32,7 @@ ...@@ -32,8 +32,7 @@
<small class="text-muted p-t-30 db">Address</small> <small class="text-muted p-t-30 db">Address</small>
<h6>中国 北京市 朝阳区 大望路 xx</h6> <h6>中国 北京市 朝阳区 大望路 xx</h6>
<div class="map-box"> <div class="map-box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d470029.1604841957!2d72.29955005258641!3d23.019996818380896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e848aba5bd449%3A0x4fcedd11614f6516!2sAhmedabad%2C+Gujarat!5e0!3m2!1sen!2sin!4v1493204785508" <!--<img src="${avatar}" width="100%" height="150" style="border:0"/>-->
width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div> </div>
<small class="text-muted p-t-30 db">Social Profile</small> <small class="text-muted p-t-30 db">Social Profile</small>
<br/> <br/>
...@@ -54,16 +53,16 @@ ...@@ -54,16 +53,16 @@
<!-- 导航卡容器 --> <!-- 导航卡容器 -->
<div class="tab-content"> <div class="tab-content">
@ @/**
@ 个人信息 @/* 个人信息
@ @ **/
<div class="tab-pane active" id="personal" role="tabpanel"> <div class="tab-pane active" id="personal" role="tabpanel">
<div class="card-block"> <div class="card-block">
<form class="form-horizontal form-material"> <form class="form-horizontal form-material">
<div class="form-group"> <div class="form-group">
<label class="col-md-12">账号</label> <label class="col-md-12">账号</label>
<div class="col-md-12"> <div class="col-md-12">
<input v-model="account" type="text" placeholder="请输入账号" class="form-control form-control-line"> <input v-model="account" type="text" placeholder="" class="form-control form-control-line" autocomplete="false">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
...@@ -79,62 +78,214 @@ ...@@ -79,62 +78,214 @@
<div class="form-group"> <div class="form-group">
<label class="col-md-12">邮箱</label> <label class="col-md-12">邮箱</label>
<div class="col-md-12"> <div class="col-md-12">
<input v-model="email" type="email" placeholder="请输入邮箱" class="form-control form-control-line"> <input v-model="email" type="email" placeholder="" class="form-control form-control-line" autocomplete="false">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-12">姓名</label> <label class="col-md-12">姓名</label>
<div class="col-md-12"> <div class="col-md-12">
<input v-model="name" type="text" placeholder="请输入姓名" class="form-control form-control-line"> <input v-model="name" type="text" placeholder="" class="form-control form-control-line" autocomplete="false">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-12">出生日期</label> <label class="col-md-12">出生日期</label>
<div class="col-md-12"> <div class="col-md-12">
<input v-model="birthday" type="text" placeholder="请输入出生日期" class="form-control form-control-line"> <input v-model="birthday" type="text" placeholder="" class="form-control form-control-line" autocomplete="false">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-md-12">电话</label> <label class="col-md-12">电话</label>
<div class="col-md-12"> <div class="col-md-12">
<input v-model="phone" type="text" placeholder="请输入电话" class="form-control form-control-line"> <input v-model="phone" type="text" placeholder="" class="form-control form-control-line" autocomplete="false">
</div>
</div>
<div class="form-group">
<label class="col-md-12">角色名称</label>
<div class="col-md-12">
<input v-model="roleName" type="text" disabled class="form-control form-control-line">
</div>
</div>
<div class="form-group">
<label class="col-md-12">部门</label>
<div class="col-md-12">
<input v-model="deptid" type="text" placeholder="请输入部门" class="form-control form-control-line">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<button class="btn btn-success waves-effect">Update Profile</button> <button class="btn btn-success waves-effect">更新个人信息</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
@ @/**
@ 编辑头像 @/* 编辑头像
@ @ **/
<div class="tab-pane" id="avatar" role="tabpanel"> <div class="tab-pane" id="avatar" role="tabpanel">
<div class="card-block" style="height: 500px;"> <div class="card-block">
<div> <div class="container">
<img style="max-width: 100%;" id="cropperImage" src="${avatar}"> <div class="row">
<div class="col-md-12">
<div class="img-container">
<img id="image" style="max-width: 100%;" src="${avatar}" alt="Picture">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 docs-buttons">
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
<span class="fa fa-arrows"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
<span class="fa fa-crop"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;zoom&quot;, 0.1)">
<span class="fa fa-search-plus"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;zoom&quot;, -0.1)">
<span class="fa fa-search-minus"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, -10, 0)">
<span class="fa fa-arrow-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 10, 0)">
<span class="fa fa-arrow-right"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 0, -10)">
<span class="fa fa-arrow-up"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 0, 10)">
<span class="fa fa-arrow-down"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;rotate&quot;, -45)">
<span class="fa fa-rotate-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;rotate&quot;, 45)">
<span class="fa fa-rotate-right"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleX&quot;, -1)">
<span class="fa fa-arrows-h"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleY&quot;, -1)">
<span class="fa fa-arrows-v"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="crop" title="Crop">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;crop&quot;)">
<span class="fa fa-check"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="clear" title="Clear">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;clear&quot;)">
<span class="fa fa-remove"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="disable" title="Disable">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;disable&quot;)">
<span class="fa fa-lock"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="enable" title="Enable">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;enable&quot;)">
<span class="fa fa-unlock"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="reset" title="Reset">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;reset&quot;)">
<span class="fa fa-refresh"></span>
</span>
</button>
<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
<input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
<span class="fa fa-upload"></span>
</span>
</label>
<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;destroy&quot;)">
<span class="fa fa-power-off"></span>
</span>
</button>
</div>
<div class="btn-group btn-group-crop">
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { maxWidth: 4096, maxHeight: 4096 })">
Get Cropped Canvas
</span>
</button>
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 160, height: 90 })">
160&times;90
</span>
</button>
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 320, height: 180 })">
320&times;180
</span>
</button>
</div>
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ @/**
@ 登录日志 @/* 登录日志
@ @ **/
<div class="tab-pane" id="loginLog" role="tabpanel"> <div class="tab-pane" id="loginLog" role="tabpanel">
<div class="card-block"> <div class="card-block">
<div class="profiletimeline"> <div class="profiletimeline">
......
src/main/webapp/assets/common/plugins/cropper/cropper.jquery.min.js 0 → 100644
/*!
* jQuery Cropper v1.0.0
* https://github.com/fengyuanchen/jquery-cropper
*
* Copyright (c) 2018 Chen Fengyuan
* Released under the MIT license
*
* Date: 2018-04-01T06:20:13.168Z
*/
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r(e.jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c.fn){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u=void 0;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});
\ No newline at end of file
src/main/webapp/assets/modular/system/user/user_view.js
/** $(function () {
* 用户详情对话框（可用于添加和修改对话框） 'use strict';
*/
var UserViewPage = {
data: {
id: "",
account: "",
sex: "",
password: "",
rePassword: "",
avatar: "",
email: "",
name: "",
birthday: "",
deptid: "",
deptName: "",
phone: ""
}
};
/**
* 关闭此对话框
*/
UserViewPage.close = function () {
}; var console = window.console || { log: function () {} };
var URL = window.URL || window.webkitURL;
var $image = $('#image');
var $download = $('#download');
var $dataX = $('#dataX');
var $dataY = $('#dataY');
var $dataHeight = $('#dataHeight');
var $dataWidth = $('#dataWidth');
var $dataRotate = $('#dataRotate');
var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY');
var options = {
aspectRatio: 16 / 9,
preview: '.img-preview',
crop: function (e) {
$dataX.val(Math.round(e.detail.x));
$dataY.val(Math.round(e.detail.y));
$dataHeight.val(Math.round(e.detail.height));
$dataWidth.val(Math.round(e.detail.width));
$dataRotate.val(e.detail.rotate);
$dataScaleX.val(e.detail.scaleX);
$dataScaleY.val(e.detail.scaleY);
}
};
var originalImageURL = $image.attr('src');
var uploadedImageName = 'cropped.jpg';
var uploadedImageType = 'image/jpeg';
var uploadedImageURL;
/** // Tooltip
* 验证表单 $('[data-toggle="tooltip"]').tooltip();
*/
UserViewPage.validateForm = function () {
var data = UserViewPage.data; // Cropper
$image.on({
ready: function (e) {
console.log(e.type);
},
cropstart: function (e) {
console.log(e.type, e.detail.action);
},
cropmove: function (e) {
console.log(e.type, e.detail.action);
},
cropend: function (e) {
console.log(e.type, e.detail.action);
},
crop: function (e) {
console.log(e.type);
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
}
}).cropper(options);
if (data.account && data.password && data.name && data.deptid) { // Buttons
return true; if (!$.isFunction(document.createElement('canvas').getContext)) {
$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
} }
if (!data.account) { if (typeof document.createElement('cropper').style.transition === 'undefined') {
return "请输入账号"; $('button[data-method="rotate"]').prop('disabled', true);
} $('button[data-method="scale"]').prop('disabled', true);
if (!(data.password === data.rePassword)) {
return "两次密码输入不一致";
}
if (!data.name) {
return "请输入姓名";
} }
if (!data.deptid) {
return "请选择部门"; // Download
if (typeof $download[0].download === 'undefined') {
$download.addClass('disabled');
} }
};
$(function () { // Options
$('.docs-toggles').on('change', 'input', function () {
var $this = $(this);
var name = $this.attr('name');
var type = $this.prop('type');
var cropBoxData;
var canvasData;
var image = document.getElementById('cropperImage'); if (!$image.data('cropper')) {
var cropper = new Cropper(image, { return;
aspectRatio: 16 / 9, }
crop(event) {
console.log(event.detail.x); if (type === 'checkbox') {
console.log(event.detail.y); options[name] = $this.prop('checked');
console.log(event.detail.width); cropBoxData = $image.cropper('getCropBoxData');
console.log(event.detail.height); canvasData = $image.cropper('getCanvasData');
console.log(event.detail.rotate);
console.log(event.detail.scaleX); options.ready = function () {
console.log(event.detail.scaleY); $image.cropper('setCropBoxData', cropBoxData);
}, $image.cropper('setCanvasData', canvasData);
};
} else if (type === 'radio') {
options[name] = $this.val();
}
$image.cropper('destroy').cropper(options);
});
// Methods
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
var cropper = $image.data('cropper');
var cropped;
var $target;
var result;
if ($this.prop('disabled') || $this.hasClass('disabled')) {
return;
}
if (cropper && data.method) {
data = $.extend({}, data); // Clone a new one
if (typeof data.target !== 'undefined') {
$target = $(data.target);
if (typeof data.option === 'undefined') {
try {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
}
}
}
cropped = cropper.cropped;
switch (data.method) {
case 'rotate':
if (cropped && options.viewMode > 0) {
$image.cropper('clear');
}
break;
case 'getCroppedCanvas':
if (uploadedImageType === 'image/jpeg') {
if (!data.option) {
data.option = {};
}
data.option.fillColor = '#fff';
}
break;
}
result = $image.cropper(data.method, data.option, data.secondOption);
switch (data.method) {
case 'rotate':
if (cropped && options.viewMode > 0) {
$image.cropper('crop');
}
break;
case 'scaleX':
case 'scaleY':
$(this).data('option', -data.option);
break;
case 'getCroppedCanvas':
if (result) {
// Bootstrap's Modal
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
if (!$download.hasClass('disabled')) {
download.download = uploadedImageName;
$download.attr('href', result.toDataURL(uploadedImageType));
}
}
break;
case 'destroy':
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
uploadedImageURL = '';
$image.attr('src', originalImageURL);
}
break;
}
if ($.isPlainObject(result) && $target) {
try {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
}
}
}
}); });
// Keyboard
$(document.body).on('keydown', function (e) {
if (e.target !== this || !$image.data('cropper') || this.scrollTop > 300) {
return;
}
switch (e.which) {
case 37:
e.preventDefault();
$image.cropper('move', -1, 0);
break;
case 38:
e.preventDefault();
$image.cropper('move', 0, -1);
break;
case 39:
e.preventDefault();
$image.cropper('move', 1, 0);
break;
case 40:
e.preventDefault();
$image.cropper('move', 0, 1);
break;
}
});
// Import image
var $inputImage = $('#inputImage');
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
uploadedImageName = file.name;
uploadedImageType = file.type;
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('Please choose an image file.');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment