|
|
@@ -0,0 +1,201 @@
|
|
|
+Ext.define('school.view.core.form.field.RemoteImgField', {
|
|
|
+ extend: 'Ext.form.FieldContainer',
|
|
|
+ alias: 'widget.remoteimgfield',
|
|
|
+
|
|
|
+ layout: "hbox",
|
|
|
+ defaults: {
|
|
|
+ hideLabel: true
|
|
|
+ },
|
|
|
+ isFormField: true,
|
|
|
+ defaultBindProperty: 'value',
|
|
|
+ cls: 'remoteimg-field',
|
|
|
+
|
|
|
+ initComponent: function () {
|
|
|
+ var me = this;
|
|
|
+
|
|
|
+ Ext.apply(me, {
|
|
|
+ items: [{
|
|
|
+ xtype: 'hidden',
|
|
|
+ name: 'imgPath'
|
|
|
+ }, {
|
|
|
+ xtype: 'image',
|
|
|
+ height: 170,
|
|
|
+ width: 135,
|
|
|
+ hidden: true,
|
|
|
+ src: '',
|
|
|
+ style: {
|
|
|
+ 'background-color': '#e6dede'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ xtype: 'filefield',
|
|
|
+ name: 'file',
|
|
|
+ cls: 'upload-bth',
|
|
|
+ height: 170,
|
|
|
+ width: 135,
|
|
|
+ buttonText: '上传头像',
|
|
|
+ buttonOnly: true,
|
|
|
+ hideLabel: true,
|
|
|
+ // hidden: true,
|
|
|
+ buttonConfig: {
|
|
|
+ cls: 'x-filefield-button'
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ change: function (field) {
|
|
|
+ if (!!field.value) {
|
|
|
+ me.upload(field);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ xtype: 'component',
|
|
|
+ cls: 'tool-bar',
|
|
|
+ hidden: true,
|
|
|
+ html: '<div class="tools"><span title="放大" class="tool enlarge x-fa fa-expand"></span><span title="删除" class="tool delete x-ss ss-delete1"></span></div>',
|
|
|
+ listeners: {
|
|
|
+ boxready: function(component) {
|
|
|
+ component.el.dom.onclick = function() {
|
|
|
+ if(event.target.classList.contains('enlarge')) {
|
|
|
+ me.enlargeImg();
|
|
|
+ }else if(event.target.classList.contains('delete')) {
|
|
|
+ me.deleteImg();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ me.callParent(arguments);
|
|
|
+ },
|
|
|
+
|
|
|
+ listeners: {
|
|
|
+ boxready: function(container, width, height, e) {
|
|
|
+ container.el.dom.onmouseenter = function() {
|
|
|
+ if(container.getValue()) {
|
|
|
+ container.items.items[3].setHidden(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ container.el.dom.onmouseleave = function() {
|
|
|
+ if(container.getValue()) {
|
|
|
+ container.items.items[3].setHidden(true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ setValue: function(v) {
|
|
|
+ var me = this,
|
|
|
+ items = me.items.items,
|
|
|
+ imgPath = items[0],
|
|
|
+ img = items[1],
|
|
|
+ fileField = items[2];
|
|
|
+
|
|
|
+ imgPath.setValue(v);
|
|
|
+ img.setSrc(v);
|
|
|
+ fileField.setHidden(true);
|
|
|
+ img.setHidden(false);
|
|
|
+
|
|
|
+ me.publishState('value', v);
|
|
|
+ },
|
|
|
+
|
|
|
+ getValue: function() {
|
|
|
+ return this.items.items[0].value;
|
|
|
+ },
|
|
|
+
|
|
|
+ getValueField: function () {
|
|
|
+ return this.items.items[0];
|
|
|
+ },
|
|
|
+
|
|
|
+ isValid: function () {
|
|
|
+ return this.getValueField().isValid();
|
|
|
+ },
|
|
|
+
|
|
|
+ isDirty: function () {
|
|
|
+ return this.getValueField().isDirty();
|
|
|
+ },
|
|
|
+
|
|
|
+ setReadOnly: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 上传附件
|
|
|
+ */
|
|
|
+ upload: function (field) {
|
|
|
+ var me = this;
|
|
|
+ var fd = new FormData();
|
|
|
+ fd.append('file', field.fileInputEl.dom.files[0]);
|
|
|
+ fd.append('folderId', 0);
|
|
|
+ me.setLoading(true);
|
|
|
+ Ext.Ajax.request({
|
|
|
+ // url: 'http://10.1.80.36:9520/api/file/upload', //这里是填写需要跨域访问的URL
|
|
|
+ url: '/api/file/upload',//这里是填写需要跨域访问的URL
|
|
|
+ cors: true,
|
|
|
+ useDefaultXhrHeader: false,
|
|
|
+ method: 'post',
|
|
|
+ rawData: fd,
|
|
|
+ headers: {
|
|
|
+ 'Access-Control-Allow-Origin': '*',
|
|
|
+ 'Authorization': school.util.State.get('session').token,
|
|
|
+ //"Content-Type": 'multipart/form-data' //文件上传的格式，
|
|
|
+ "Content-Type": null
|
|
|
+ },
|
|
|
+ success: function (response, opts) {
|
|
|
+ me.setLoading(false);
|
|
|
+ var res = Ext.decode(response.responseText);
|
|
|
+ if (res.success) {
|
|
|
+ school.util.BaseUtil.showSuccessToast('上传成功');
|
|
|
+ var data = res.data,
|
|
|
+ accessPath = data.accessPath;
|
|
|
+
|
|
|
+ me.setValue(accessPath);
|
|
|
+ } else {
|
|
|
+ school.util.BaseUtil.showErrorToast('上传失败: ' + res.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ failure: function (response, opts) {
|
|
|
+ me.setLoading(false);
|
|
|
+ var res = Ext.decode(response.responseText);
|
|
|
+ school.util.BaseUtil.showErrorToast('上传失败: ' + res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ enlargeImg: function() {
|
|
|
+ var me = this;
|
|
|
+ var win = Ext.getCmp('enlarge-win');
|
|
|
+ if(!win) {
|
|
|
+ win = Ext.create('Ext.window.Window', {
|
|
|
+ width: 350,
|
|
|
+ height: 400,
|
|
|
+ layout: 'fit',
|
|
|
+ items: [{
|
|
|
+ xtype: 'image',
|
|
|
+ src: me.getValue()
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ win.show();
|
|
|
+ },
|
|
|
+
|
|
|
+ deleteImg: function() {
|
|
|
+ var me = this,
|
|
|
+ items = me.items.items,
|
|
|
+ imgPath = items[0],
|
|
|
+ img = items[1],
|
|
|
+ fileField = items[2];
|
|
|
+
|
|
|
+ school.util.BaseUtil.showConfirm('确认删除', '是否确认删除该头像？')
|
|
|
+ .then(function(yes) {
|
|
|
+ if(yes == 'yes') {
|
|
|
+ imgPath.setValue(null);
|
|
|
+ img.setSrc(null);
|
|
|
+ fileField.setHidden(false);
|
|
|
+ img.setHidden(true);
|
|
|
+
|
|
|
+ me.publishState('value', null);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+});
|
zhuth
