/*
* redmicro all Copyright (c)
* Created by seeker910 on 2015/6/30.
* 图片选择器
*/
Rsd.define('Rsd.widget.AlbumsViewer', {
extend: 'Rsd.container.Component',
requires: [
'Rsd.control.ListView'
],
xtype: 'albums-viewer',
border: false,
height: 800,
//width: "80%",
layout: 'hbox',
items: [
{
"name": "albums",
xtype: "list-view",
label:{
//新增相册
id:'add_albums',
xtype:'svg',
dataSource:{
viewBox:'0 0 1024 1024',
path:'M213.333333 170.666667h195.669334a42.666667 42.666667 0 0 1 30.165333 12.501333L512 256h298.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v426.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333V256a85.333333 85.333333 0 0 1 85.333333-85.333333z m178.005334 85.333333H213.333333v512h597.333334V341.333333h-333.994667l-85.333333-85.333333zM554.666667 512h42.666666a42.666667 42.666667 0 0 1 0 85.333333h-42.666666v42.666667a42.666667 42.666667 0 0 1-85.333334 0v-42.666667h-42.666666a42.666667 42.666667 0 0 1 0-85.333333h42.666666v-42.666667a42.666667 42.666667 0 0 1 85.333334 0v42.666667z'
},
label:{content:"相 册",width:70},
handler:'btn_add_albums',
align:'right',
position:'top',
space:0,
style:{
width:'70%',
fontSize:'120%',
borderBottom:'1px grey solid'
}
},
width: 150,
height:'100%',
//style:{backgroundColor: 'aliceblue'},
itemXtype: 'image',
itemDblClick:'albumsItemDblClick',
itemStyle: { marginLeft:20,width: 70, height: 85}
},
{
"name": "images",
xtype: "list-view",
label:{
xtype:'container',
position:'top',
space:10,
header:{
position:'left',
space:0,
content:'图片列表',
width:70,
align:'left',
style:{
fontSize: '120%',
backgroundColor: 'transparent',
letterSpacing: '2px',
}
},
layout:'hbox',
items:[
{
id:'add_image',
xtype:'svg',
width:28,
height:28,
label:false,
dataSource:{
viewBox:'0 0 1024 1024',
path:"M512 1024C229.216 1024 0 794.784 0 512S229.216 0 512 0s512 229.216 512 512-229.216 512-512 512z m0-960C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m192 480h-160v160a32 32 0 0 1-64 0v-160h-160a32 32 0 0 1 0-64h160v-160a32 32 0 0 1 64 0v160h160a32 32 0 0 1 0 64z"
},
//style:{fontSize:'100%'},
handler:'btn_new_image'
},
{flex:1},
{label:'关键字',xtype:'text',width:250},
{xtype:'button',text:'筛 选',height:35,width:120}
],
style:{
borderBottom:'1px #d0d0da solid'
}
},
flex: 1,
height:'100%',
itemXtype: 'image',
itemDblClick:'_imageItemDblClick',
itemStyle: {width: 120, height: 150}
}
],
/**
*
*/
services:{
getAlbumList:"",//'global.merch.album.GetAlbumList'
saveAlbum:"",//'global.merch.album.SaveAlbum'
deleteAlbum:"",//'global.merch.album.DeleteAlbum'
getImageList:""//'global.merch.image.GetImageList'
},
/**
*
*/
constructor: function AlbumsViewer(config) {
config = config || {};
this.apply(config);
if(!this.services)
{
Rsd.alert('缺少services配置信息');
}
if(this.readOnly)
{
this.items[0].label.handler = null;
this.items[0].label.dataSource =null;
this.items[1].label.items[0].handler = null;
this.items[1].label.items[0].dataSource =null;
}
},
/**
*
*/
loadData: function loadData() {
var me = this;
if(!me.services.getAlbumList)
{
Rsd.alert('缺少services.getAlbumList配置信息');
return;
}
Rsd.app.requestService(me.services.getAlbumList, {}, function (resp) {
if (resp.success) {
me.items[0].removeAll();
var list = [];
for (var index = 0; index < resp.data.length; index++) {
var item = resp.data[index];
list.push({
key: item["Key"],
width:'100%',
height: 70,
readOnly:true,
zoomView:false,
label:{
position:'bottom',
xtype: 'link',
text:item["Name"],
height: 30,
space:0,
width: '100%',
style: { "textAlign": "center" },
handler: 'albumsItemViewDetail',
ctrlTagName: 'a'
},
src:item["Thumbnail"]|| './resources/images/control/folder.png',
albumsName:item["Name"],
tip:item["Description"],
data:item
});
}
me.items[0].loadData(list, function (data) {
//打开默认相册
me.items[0].select(0)
});
}
});
},
/**
*
*/
btn_add_albums:function btn_add_albums()
{
this.showAlbumsDetail({});
},
/**
*
* @param {*} item
* @returns
*/
albumsItemDblClick: function albumsItemDblClick(item) {
var me = this;
if (this.preSelectedItem == item) {
return;
}
//console.log(item);
var albumItem = item.data;
this.currentAlums = albumItem;
if (this.preSelectedItem) {
this.preSelectedItem.innerCtrl.setSrc('./resources/images/control/folder.png');
}
item.innerCtrl.setSrc('./resources/images/control/folder-open.png');
this.preSelectedItem = item;
Rsd.app.requestService(this.services.getImageList,{ albumKey: albumItem["Key"]},function(resp){
//console.log(resp);
if(resp.success)
{
var list = [];
for(var i in resp.data.rows)
{
var img = resp.data.rows[i];
list.push({
label:{
content:img["Title"],
position:'bottom',
space:0
},
readOnly:true,
border:false,
zoomView:false,
height:'100%',
width:'96%',
style:{marginLeft:'2%'},
src:img["SmallUrl"],
data: img
});
}
me.items[1].loadData(list);
}
else
{
me.items[1].loadData([]);
}
});
},
/**
*
* @returns
*/
albumsItemViewDetail: function albumsItemViewDetail(sender) {
var data = sender.parent.parent.content.data; //console.log(data);
if (data.IsDefault || data.IsNew) {
return;
}
this.showAlbumsDetail(data);
},
/**
*
*/
showAlbumsDetail:function showAlbumsDetail(data)
{
var _d = Rsd.create('Rsd.zen.dialog.FormDialog', {
title: '相册信息',
height:'100%',
readOnly: true,
parent: this.parent.parent.parent,
buttons:["save","delete","cancel"],
formFields: [
{
"name": "Name",
"label": {
"content": "名称",
"width": 100
},
"dataIndex": "Name",
"index": 0,
"xtype": "text",
"width": "90%",
"required": true
},
{
"name": "Description",
"label": {
"content": "描述",
"width": 100
},
"dataIndex": "Description",
"index": 0,
"xtype": "text",
length:30,
"width": "90%"
},
{
"name": "Thumbnail",
"label": {
"content": "缩略图",
"width": 100
},
"dataIndex": "Thumbnail",
"index": 0,
"xtype": "text",
"width": "90%"
},
{
"name": "BucketKey",
"label": {
"content": "Bucket",
"width": 100
},
"dataIndex": "BucketKey",
"index": 0,
"width": "90%",
"required": true,
"xtype": "combobox-ex",
"textMember": "Name",
"valueMember": "Key",
"dataStore": "listCache",
"args": { modelType: 'Rsd.Aliyun.Models.OssBucket' }
},
{
"name": "BucketFolder",
"label": {
"content": "Bucket文件目录",
"width": 100
},
"dataIndex": "BucketFolder",
"index": 0,
"xtype": "text",
"width": "90%"
}
],
saveHandler: 'saveAlbum',
deleteHandler: 'deleteAlbum',
data: data
});
_d.showDialogOnRight(Rsd.app.MainForm.body.element);
},
/**
*
* @param {*} data
*/
saveAlbum:function saveAlbum(data) {
console.log(data);
var me = this;
if(!me.services.saveAlbum)
{
Rsd.alert('缺少services.saveAlbum');
return;
}
Rsd.requestService(me.services.saveAlbum, data, function (res) {
if (res.success) {
me.parent.load();
me.close();
}
});
},
/***
*
*/
deleteAlbum:function deleteAlbum(data) {
var me = this;
if(!me.services.deleteAlbum)
{
Rsd.alert('缺少services.deleteAlbum');
return;
}
Rsd.requestService(me.services.deleteAlbum, {key: data["Key"] }, function (res) {
if (res.success) {
me.parent.load();
me.close();
}
else {
Rsd.alert('删除相册失败，请联系管理员！');
}
});
},
/**
*
*/
btn_new_image:function btn_new_image(sennder,evt)
{
this.funApplyByIOC(this.newImageHandler, [this.currentAlums, evt])
},
/**
* @description 双击图片表示 选择该图片
* @param {*} item listItem
* @param {*} evt
*/
_imageItemDblClick: function _imageItemDblClick(item, evt) {
//console.log('imageItemDblClick',item);
this.funApplyByIOC(this.imageDblClick, [item.innerCtrl.data, evt])
}
});