个人信息页面

src/main/webapp/WEB-INF/common/_container.html

@@ -59,6 +59,9 @@
         @if(array.contain(plugins,"sweet-alert")){
         <link href="${ctxPath}/assets/common/plugins/sweetalert/sweetalert.css" rel="stylesheet" type="text/css" />
         @}
+        @if(array.contain(plugins,"cropper")){
+        <link href="${ctxPath}/assets/common/plugins/cropper/cropper.min.css" rel="stylesheet" type="text/css" />
+        @}
     @}
 
     <!--其他业务用的css-->
@@ -160,6 +163,9 @@
     @if(array.contain(plugins,"laydate")){
     <script src="${ctxPath}/assets/common/plugins/laydate/laydate.js"></script>
     @}
+    @if(array.contain(plugins,"cropper")){
+    <script src="${ctxPath}/assets/common/plugins/cropper/cropper.min.js"></script>
+    @}
 @}
 
 <!--其他业务用的js-->

src/main/webapp/WEB-INF/system/user/user_chpwd.html

@@ -33,10 +33,10 @@
                         <hr/>
                         <div class="row">
                             <div class="col-md-12">
-                                <button class="btn btn-info" type="button" id="saveButton" \@click="ensure">
+                                <button class="btn btn-info waves-effect" type="button" id="saveButton" \@click="ensure">
                                     <i class="ace-icon fa fa-check"></i> 保存
                                 </button>
-                                <button class="btn btn-danger m-l-10" type="button" id="closeButton" \@click="reset">
+                                <button class="btn btn-danger waves-effect m-l-10" type="button" id="closeButton" \@click="reset">
                                     <i class="ace-icon fa fa-close"></i> 重置
                                 </button>
                             </div>

src/main/webapp/assets/common/plugins/cropper/cropper.min.css

+/*!
+ * Cropper.js v1.4.3
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2018-10-24T13:07:11.429Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline-color:rgba(51,153,255,.75);outline:1px solid #39f;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
\ No newline at end of file

src/main/webapp/assets/modular/system/user/user_view.js

 /**
  * 用户详情对话框（可用于添加和修改对话框）
  */
-var UserInfoDlg = {
+var UserViewPage = {
     data: {
         id: "",
         account: "",
@@ -21,16 +21,16 @@ var UserInfoDlg = {
 /**
  * 关闭此对话框
  */
-UserInfoDlg.close = function () {
-    parent.layer.close(window.parent.MgrUser.layerIndex);
+UserViewPage.close = function () {
+
 };
 
 /**
  * 验证表单
  */
-UserInfoDlg.validateForm = function () {
+UserViewPage.validateForm = function () {
 
-    var data = UserInfoDlg.data;
+    var data = UserViewPage.data;
 
     if (data.account && data.password && data.name && data.deptid) {
         return true;
@@ -50,86 +50,19 @@ UserInfoDlg.validateForm = function () {
     }
 };
 
-/**
- * 提交添加用户
- */
-UserInfoDlg.addSubmit = function () {
-    var ajax = new $ax(Feng.ctxPath + "/mgr/add", function (data) {
-        window.parent.Feng.success("添加成功!");
-        window.parent.MgrUser.table.refresh();
-        UserInfoDlg.close();
-    }, function (data) {
-        window.parent.Feng.error("添加失败!" + data.responseJSON.message + "!");
-    });
-    ajax.set(this.data);
-    ajax.start();
-};
-
-/**
- * 提交修改
- */
-UserInfoDlg.editSubmit = function () {
-    var ajax = new $ax(Feng.ctxPath + "/mgr/edit", function (data) {
-        Feng.success("修改成功!");
-        if (window.parent.MgrUser !== undefined) {
-            window.parent.MgrUser.table.refresh();
-            UserInfoDlg.close();
-        }
-    }, function (data) {
-        Feng.error("修改失败!" + data.responseJSON.message + "!");
-    });
-    ajax.set(this.data);
-    ajax.start();
-};
-
-/**
- * 修改密码
- */
-UserInfoDlg.chPwd = function () {
-    var ajax = new $ax(Feng.ctxPath + "/mgr/changePwd", function (data) {
-        Feng.success("修改成功!");
-    }, function (data) {
-        Feng.error("修改失败!" + data.responseJSON.message + "!");
-    });
-    ajax.set("oldPwd");
-    ajax.set("newPwd");
-    ajax.set("rePwd");
-    ajax.start();
-};
-
 $(function () {
 
-    UserInfoDlg.app = new Vue({
-        el: '#userForm',
-        data: UserInfoDlg.data,
-        methods: {
-            submitForm: function (e) {
-                var result = UserInfoDlg.validateForm();
-                if (result === true) {
-                    UserInfoDlg.addSubmit();
-                } else {
-                    Feng.alert(result);
-                    e.preventDefault();
-                }
+    var image = document.getElementById('cropperImage');
+    var cropper = new Cropper(image, {
+        aspectRatio: 16 / 9,
+        crop(event) {
+            console.log(event.detail.x);
+            console.log(event.detail.y);
+            console.log(event.detail.width);
+            console.log(event.detail.height);
+            console.log(event.detail.rotate);
+            console.log(event.detail.scaleX);
+            console.log(event.detail.scaleY);
         },
-            showDeptSelectTree: function () {
-
-                var formName = encodeURIComponent("parent.UserInfoDlg.app.deptName");
-                var formId = encodeURIComponent("parent.UserInfoDlg.app.deptid");
-                var treeUrl = encodeURIComponent(Feng.ctxPath + "/dept/tree");
-
-                layer.open({
-                    type: 2,
-                    title: '部门选择',
-                    area: ['300px', '400px'],
-                    content: Feng.ctxPath + '/system/commonTree?formName=' + formName + "&formId=" + formId + "&treeUrl=" + treeUrl
     });
-            }
-        }
-    });
-
-    laydate.render({
-        elem: '#birthday'
-    });
-
 });