Ai
1 Star 0 Fork 1

浪潮/layui+vue自写多图上传组件

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
consulinstitution.js 32.90 KB
一键复制 编辑 原始数据 按行查看 历史
浪潮 提交于 2024-11-01 14:45 +08:00 . 相关基础代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957
$(function () {
$("#jqGrid").jqGrid({
url: baseURL + 'consult/consulinstitution/list',
datatype: "json",
colModel: [
{ label: 'id', name: 'id', index: 'id', width: 50, key: true ,hidden:true},
{ label: '机构名称', name: 'name', index: 'name', width: 80 },
// { label: '图片', name: 'mainImg', index: 'main_img', width: 80 },
// { label: '排序', name: 'sortNumber', index: 'sort_number', width: 80 },
// { label: '咨询室图片', name: 'counsellingRoomImg', index: 'counselling_room_img', width: 80 },
// { label: '介绍', name: 'introduce', index: 'introduce', width: 80 },
{ label: '创建时间', name: 'createTime', index: 'create_time', width: 80 },
{ label: '发布状态', name: 'isPublish', index: 'is_publish', width: 80 ,formatter: function (value, options, row) {
if (value == 0) {
return '未发布';
} else if (value == 1) {
return '已发布';
}
}},
// { label: '创建人id', name: 'createUserId', index: 'create_user_id', width: 80 },
// { label: '创建人姓名', name: 'createUserName', index: 'create_user_name', width: 80 },
// { label: '修改时间', name: 'updateTime', index: 'update_time', width: 80 },
// { label: '修改人id', name: 'updateUserId', index: 'update_user_id', width: 80 },
// { label: '修改人姓名', name: 'updateUserName', index: 'update_user_name', width: 80 }
{ label: '操作', name: 'operation', index: 'operation', width: 80, sortable: false, formatter: function (value, options, row) {
var operation = '<button type="button" onclick="detail('+JSON.stringify(row).replace(/\"/g,"'")+')" class="btn btn-info btn-xs">详情</button>';
try {
var approvePublishShiro = approvePublish;
}catch (e){
approvePublishShiro=null;
}
if ( (row.isPublish==null || row.isPublish == '' || row.isPublish == 0) && (null !=approvePublishShiro || approvePublishShiro == '1' ) ){
//发布
operation += '&nbsp;&nbsp;<button type="button" onclick="publish(' + JSON.stringify(row).replace(/\"/g, "'") + ')" class="btn btn-success btn-xs margin-left-10">发布</button>';
}else if ( row.isPublish == 1 && (null !=approvePublishShiro || approvePublishShiro == '1' ) ){
//取消发布
operation += '&nbsp;&nbsp;<button type="button" onclick="unpublish(' + JSON.stringify(row).replace(/\"/g, "'") + ')" class="btn btn-warning btn-xs margin-left-10">取消发布</button>';
}
return operation;
}}
],
sortable: true,
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
height: 'auto',
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 45,
autowidth:true,
multiselect: true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
gridComplete:function(){
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
},
postData: {
name: $("#q_name").val(),
},
});
formValidator();
//附件上传
layui.use('upload', function() {
var $ = layui.jquery,
upload = layui.upload;
//临展配图上传
var uploadInst = upload.render({
elem: '#mainImage',
url: baseURL + "sys/attachment/fileUploadReturnUrl",
data:{bizType:'consult_institution'},
accept:'images',
before: function(obj) {
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result) {
setTimeout(function () {
//某种bug,需要延迟执行
$('#imgPreview').attr('src', result); //图片链接(base64)
$('#imgPreview').attr('width', '100px');
$('#imgPreview').attr('height', '100px');
$('#imgPreview').attr('style','display: block;');
},100);
});
},
done: function(res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
//上传成功
vm.consulinstitution.mainImg=res.data;
},
error: function() {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function() {
uploadInst.upload();
});
}
});
//删除图片
$(document).on('click', '[id^=delImg]', function () {
var importImgF = $('#imgItemInfo').find('div:first');//importImg0、importImg1、importImg2
var empt = $(this).parent().parent().parent();//importImg0、importImg1、importImg2
var nextImgSrc = $(this).parent().parent().parent().next().find('img').attr('src');//src
//判断当前DIV后面的div的url是否为空
if (!nextImgSrc) {
//判断是否为第一个
if (importImgF.attr('id') === empt.attr('id')) {
//-是 ,清空第一个 最后面的删除
//图片url清空
empt.find('img').attr('src','');
$(this).parent().parent().addClass('layui-hide');
importImgF.find('i:first').removeClass('layui-hide');
count--;
$('#' + 'importImg' + count).remove();
} else {
// -否,删除当前
empt.remove();
}
} else {
//如果有值删除当前div
empt.remove();
}
return false;
});
//图片预览
$(document).on('click', '[id^=preImg]', function () {
var iHtml = "<img src='" + $(this).parent().parent().find('img:first').attr('src') + "' style='width: 100%; height: 100%;'/>";
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
area: ['40%', '60%'],
content: iHtml //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
});
return false;
});
//图片绑定鼠标悬浮
$(document).on("mouseenter", ".img", function () {
//鼠标悬浮
$(this).find('div:first').removeClass('layui-hide');
}).on("mouseleave", ".img", function () {
//鼠标离开
$(this).find('div:first').addClass('layui-hide');
});
$(document).on('click', '[id^=imgDivs]', function () {
//给id赋值
uploadIconId = $(this).find('i').attr('id');
uploadDemoViewId = $(this).next().attr('id');
imgsId = $(this).next().find('img').attr('id');
$('#importModel').click();
});
//多图片上传2展示
var slideshowUploadInst = upload.render({
elem: '#importModel5',
url: baseURL + "consult/consulinstitution/fileUpload",
data:{bizType:'consult_institution'},
accept:'images',
auto:false,
// multiple: true,
/*before: function(obj) {
files = obj.pushFile();//将每次选择的文件追加到文件队列
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result) {
var number = $('.layui-upload-drag-self').length;
if (number>0){
count = Math.round(Math.random()*1000);
//因为修改时,count值会导致id重复。这里采取随机数
}
console.log(count);
if (number>10){
layer.msg('最多上传10张图片!');
$('#' + imgsId).remove();
return delete files[index];//清空 input file 值,以免删除后出现同名文件不可选
}else {
$('#' + imgsId).attr('src', result);//图片链接(base64)
$('#' + imgsId).attr('index', index);
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="layui-icon icon-myself" id="preImg' + count + '">查看&#xe7a5;</i>' +
'<i class="layui-icon icon-myself" id="delImg' + count + '">删除&#xe7f9;</i>' +
'</div>' + '</div>' + '</div>'
);
count++;
}
});
},*/
choose: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result) {
var number = $('.layui-upload-drag-self').length;
if (number>0){
count = Math.round(Math.random()*1000);
//因为修改时,count值会导致id重复。这里采取随机数
}
console.log(count);
if (number>10){
layer.msg('最多上传10张图片!');
$('#' + imgsId).remove();
//return delete files[index];//清空 input file 值,以免删除后出现同名文件不可选
}else {
if(file.size>1024*1024){//大于1M就压缩图片
lrz(file).then(function (rst) {
// $('#' + imgsId).attr('src', rst.base64);
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
// 处理成功会执行
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="fa fa-eye icon-myself" id="preImg' + count + '"></i>' +
'<i class="fa fa-trash-o icon-myself" id="delImg' + count + '"></i>' +
'</div>' + '</div>' + '</div>'
)
var aafile = new File([rst.file], file.name, {
type: file.type
})
obj.upload(index, aafile);
}).catch(function (err) {
// 处理失败会执行
obj.upload(index, file);
}).always(function () {
// 不管是成功失败,都会执行
});
}else{
// $('#' + imgsId).attr('src', result);
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="fa fa-eye icon-myself" id="preImg' + count + '"></i>' +
'<i class="fa fa-trash-o icon-myself" id="delImg' + count + '"></i>' +
'</div>' + '</div>' + '</div>'
)
obj.upload(index, file);
}
count++;
console.log("count:"+count);
}
});
},
done: function(res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
//上传成功
// vm.visitorVipGoods.mainImg=res.data;
$('#' + imgsId).attr('src', baseURL+baseDownloadPath+res.contracattachmentEntity.url);
},
error: function() {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function() {
uploadInst.upload();
});
}
});
var institutionUploadInst = upload.render({
elem: '#importModel',
url: baseURL + "consult/consulinstitution/fileUpload",
data:{bizType:'consult_institution'},
accept:'images',
auto:false,
// multiple: true,
choose: function(obj){
var number = $('.layui-upload-drag-self').length;
if (number>0){
count = Math.round(Math.random()*1000);
//因为修改时,count值会导致id重复。这里采取随机数
}
if (number>10){
$('#' + imgsId).remove();
return layer.msg('最多上传10张图片!');
//return delete files[index];//清空 input file 值,以免删除后出现同名文件不可选
}
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result) {
if(file.size>1024*1024){//大于1M就压缩图片
lrz(file).then(function (rst) {
// $('#' + imgsId).attr('src', rst.base64);
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
// 处理成功会执行
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="fa fa-eye icon-myself" id="preImg' + count + '"></i>' +
'<i class="fa fa-trash-o icon-myself" id="delImg' + count + '"></i>' +
'</div>' + '</div>' + '</div>'
)
// $('#slideshowPreview').append('<img src="'+ rst.base64 +'" alt="'+ file.name +'" width="100px" height="100px" class="layui-upload-img">')
// $('#imgPreview').attr('src', rst.base64); //图片链接(base64)
// $('#imgPreview').attr('width','100px');
// $('#imgPreview').attr('height','100px');
var aafile = new File([rst.file], file.name, {
type: file.type
})
obj.upload(index, aafile);
}).catch(function (err) {
// 处理失败会执行
obj.upload(index, file);
}).always(function () {
// 不管是成功失败,都会执行
});
}else{
// $('#' + imgsId).attr('src', result);
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="fa fa-eye icon-myself" id="preImg' + count + '"></i>' +
'<i class="fa fa-trash-o icon-myself" id="delImg' + count + '"></i>' +
'</div>' + '</div>' + '</div>'
)
obj.upload(index, file);
}
count++;
console.log("count:"+count);
});
},
done: function(res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
//上传成功
// vm.visitorVipGoods.mainImg=res.data;
$('#' + imgsId).attr('src', baseURL+baseDownloadPath+res.contracattachmentEntity.url);
},
error: function() {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function() {
uploadInst.upload();
});
}
});
});
//多图片上传2展示
/*layui.use(['form', 'layer', 'upload'], function () {
var $ = layui.jquery,
layer = layui.layer,
form = layui.form,
upload = layui.upload;
//删除图片
$(document).on('click', '[id^=delImg]', function () {debugger
var importImgF = $('#imgItemInfo').find('div:first');//importImg0、importImg1、importImg2
var empt = $(this).parent().parent().parent();//importImg0、importImg1、importImg2
var nextImgSrc = $(this).parent().parent().parent().next().find('img').attr('src');//src
var index = $('#' + imgsId).attr('index');
//判断当前DIV后面的div的url是否为空
if (!nextImgSrc) {debugger
//判断是否为第一个
if (importImgF.attr('id') === empt.attr('id')) {debugger
//-是 ,清空第一个 最后面的删除
//图片url清空
empt.find('img').attr('src','');
$(this).parent().parent().addClass('layui-hide');
importImgF.find('i:first').removeClass('layui-hide');
count--;
$('#' + 'importImg' + count).remove();
importImgF.remove();
//delete files[index];
} else {
if (index==null){
// -否,删除当前
empt.remove();
}else {
delete files[index];
// -否,删除当前
empt.remove();
}
}
} else {
if (index==null){
// -否,删除当前
empt.remove();
}else {
delete files[index];
// -否,删除当前
empt.remove();
}
}
return false;
});
//图片预览
$(document).on('click', '[id^=preImg]', function () {
var iHtml = "<img src='" + $(this).parent().parent().find('img:first').attr('src') + "' style='width: 100%; height: 100%;'/>";
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
area: ['40%', '60%'],
content: iHtml //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
});
return false;
});
//图片绑定鼠标悬浮
$(document).on("mouseenter", ".img", function () {
//鼠标悬浮
$(this).find('div:first').removeClass('layui-hide');
}).on("mouseleave", ".img", function () {
//鼠标离开
$(this).find('div:first').addClass('layui-hide');
});
var imgsId,
uploadDemoViewId,
uploadIconId;
$(document).on('click', '[id^=imgDivs]', function () {
//给id赋值
uploadIconId = $(this).find('i').attr('id');
uploadDemoViewId = $(this).next().attr('id');
imgsId = $(this).next().find('img').attr('id');
$('#importModel').click();
});
var number = $('.layui-upload-drag-self').length;
//避免修改时count重新计算
var count = 1;
if (number>0){
count = number;
}
upload.render({
elem: '#importModel1'
, url: baseURL + "consult/consulinstitution/fileUpload"
, data:{bizType:'consult_institution'}
, accept:'images'
//, exts:'jpg|jpeg|png|gjf|webp|bmp|tif'
, drag:true
, number:10
, before: function(obj) {
files = obj.pushFile();//将每次选择的文件追加到文件队列
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result) {
var number = $('.layui-upload-drag-self').length;
if (number>0){
count = Math.round(Math.random()*1000);
//因为修改时,count值会导致id重复。这里采取随机数
}
console.log(count);
if (number>10){
layer.msg('最多上传10张图片!');
$('#' + imgsId).remove();
return delete files[index];//清空 input file 值,以免删除后出现同名文件不可选
}else {
$('#' + imgsId).attr('src', result);//图片链接(base64)
$('#' + imgsId).attr('index', index);
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="layui-icon icon-myself" id="preImg' + count + '">查看&#xe7a5;</i>' +
'<i class="layui-icon icon-myself" id="delImg' + count + '">删除&#xe7f9;</i>' +
'</div>' + '</div>' + '</div>'
);
count++;
}
});
}
, done: function (res, index, upload) {
if (res.code !== 0) {
return layer.msg('上传失败')
};
$('#' + imgsId).attr('value', res.contracattachmentEntity.url);
vm.attachments.push(res.contracattachmentEntity);
return delete files[index]; // 删除文件队列已经上传成功的文件
/!*$('#' + imgsId).attr('src', res.data);
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="layui-icon icon-myself" id="preImg' + count + '">&#xe7a5;</i>' +
'<i class="layui-icon icon-myself" id="delImg' + count + '">&#xe7f9;</i>' +
'</div>' + '</div>' + '</div>'
);
count++;*!/
}
});
form.on('submit(getUrls-form-submit)', function (data) {
//使用data.field获取不到值
var imgs = $('[id^=imgs]');
var imgArray=[];
imgs.each(function () {
var valueUrl=$(this).attr('value');
var srcUrl=$(this).attr('src');
//滤空
if (valueUrl){
imgArray.push(valueUrl);
}else if (srcUrl){
//去除多余字符
srcUrl = srcUrl.replace('../../download/','');
imgArray.push(srcUrl);
}
});
//alert(JSON.stringify(imgArray));
vm.consulinstitution.counsellingRoomImg = vm.imgArray.toString();
return false;
});
//也可绑定单击事件获取url数组
/!* $('#getUrls').on('click',function () {
var imgs = $('[id^=imgs]');
var imgArray=[];
imgs.each(function () {
var url=$(this).attr('src');
//滤空
if (url){
imgArray.push(url);
}
});
alert(JSON.stringify(imgArray));
return false;
})*!/
});*/
});
var count = 1;
var imgsId,uploadDemoViewId,uploadIconId;
var vm = new Vue({
el:'#rrapp',
data:{
showList: true,
title: null,
consulinstitution: {},
attachments:[],
imgArray:[],
q:{
name:"",
}
},
methods: {
query: function () {
vm.reload();
},
add: function(){
$("form").data('bootstrapValidator').destroy();//验证销毁重构
$('form').data('bootstrapValidator', null);
formValidator();
vm.consulinstitution = {};
$("#imgItemInfo").html("");
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg0">' +
'<div id="imgDivs0">' +
'<i class="layui-icon" id="uploadIcon0"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView0">' +
'<img class="layui-upload-img" id="imgs0" src="">' +
'<div class="handle layui-hide" id="handle0">' +
'<i class="layui-icon icon-myself" id="preImg0">查看&#xe7a5;</i>' +
'<i class="layui-icon icon-myself" id="delImg0">删除&#xe7f9;</i>' +
'</div>' + '</div>' + '</div>'
);
var layerAdd = layer.open({
type: 1,
title:"新增",
area: ['100%', '100%'],
content: $("#layout-div")
});
},
update: function (event) {
var id = getSelectedRow();
if(id == null){
return ;
}
$("form").data('bootstrapValidator').destroy();//验证销毁重构
$('form').data('bootstrapValidator', null);
formValidator();
vm.getInfo(id);
var layerUpdate = layer.open({
type: 1,
title:"修改",
area: ['100%', '100%'],
content: $("#layout-div")
});
},
saveOrUpdate: function (event) {
//验证表单start
$("form").data("bootstrapValidator").resetForm();//重置表单所有验证规则,下一步再触发验证
$("form").data("bootstrapValidator").validate();//手动触发全部验证
var flag = $("form").data("bootstrapValidator").isValid();//获取当前表单验证状态
if (!flag) {//验证不通过
   return;
   };
//多图片上传2展示
//如果是修改,则获取值方式变
if (vm.consulinstitution.id == null){
//使用data.field获取不到值
var imgs = $('[id^=imgs]');
var imgArray=[];
imgs.each(function () {
var url=$(this).attr('src');
//滤空
if (url){
imgArray.push(url);
}
});
//alert(JSON.stringify(imgArray));
vm.consulinstitution.counsellingRoomImg = imgArray.toString();
}else {
//使用data.field获取不到值
var imgs = $('[id^=imgs]');
var imgArray=[];
imgs.each(function () {
var valueUrl=$(this).attr('value');
var srcUrl=$(this).attr('src');
//滤空
if (valueUrl){
imgArray.push(valueUrl);
}else if (srcUrl){
//去除多余字符
srcUrl = srcUrl.replace('../../download/','');
imgArray.push(srcUrl);
}
});
//alert(JSON.stringify(imgArray));
vm.consulinstitution.counsellingRoomImg = imgArray.toString();
}
$('#btnSaveOrUpdate').button('loading').delay(1000).queue(function() {
var url = vm.consulinstitution.id == null ? "consult/consulinstitution/save" : "consult/consulinstitution/update";
$.ajax({
type: "POST",
url: baseURL + url,
contentType: "application/json",
data: JSON.stringify(vm.consulinstitution),
success: function(r){
if(r.code === 0){
layer.msg("操作成功", {icon: 1});
vm.reload();
$('#btnSaveOrUpdate').button('reset');
$('#btnSaveOrUpdate').dequeue();
}else{
layer.alert(r.msg);
$('#btnSaveOrUpdate').button('reset');
$('#btnSaveOrUpdate').dequeue();
}
}
});
});
},
del: function (event) {
var ids = getSelectedRows();
if(ids == null){
return ;
}
var lock = false;
layer.confirm('确定要删除选中的记录?', {
btn: ['确定','取消'] //按钮
}, function(){
if(!lock) {
lock = true;
$.ajax({
type: "POST",
url: baseURL + "consult/consulinstitution/delete",
contentType: "application/json",
data: JSON.stringify(ids),
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
$("#jqGrid").trigger("reloadGrid");
}else{
layer.alert(r.msg);
}
}
});
}
}, function(){
});
},
getInfo: function(id){
$.get(baseURL + "consult/consulinstitution/info/"+id, function(r){
vm.consulinstitution = r.consulinstitution;
//封面回显
$('#imgPreview').attr('src', baseURL+baseDownloadPath+(vm.consulinstitution.mainImg==null ? "" : vm.consulinstitution.mainImg).replace(/\\/g,"/"));
//多图片上传2展示
var count = 1;
$('#imgItemInfo').empty();
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg0">'+
'<div id="imgDivs0">'+
'<i class="layui-icon" id="uploadIcon0"> &#xe624; </i>'+
'</div>'+
'<div class="img layui-hide" id="uploadDemoView0">'+
'<img class="layui-upload-img" id="imgs0" src="">'+
'<div class="handle layui-hide" id="handle0">'+
'<i class="fa fa-eye icon-myself" id="preImg0"></i>'+
'<i class="fa fa-trash-o icon-myself" id="delImg0"></i>'+
'</div>'+
'</div>'+
'</div>'
);
var counsellingRoomImgArray = [];
if (vm.consulinstitution.counsellingRoomImg!=null && vm.consulinstitution.counsellingRoomImg!=""
&& vm.consulinstitution.counsellingRoomImg!="null"){
counsellingRoomImgArray = vm.consulinstitution.counsellingRoomImg.split(",");
}
for (var i = 0; i < counsellingRoomImgArray.length; i++) {
var counsellingRoomImg = baseURL+baseDownloadPath+counsellingRoomImgArray[i].replace(/\\/g,"/");
uploadIconId = $("#imgDivs"+(count-1)).find('i').attr('id');
uploadDemoViewId = $("#imgDivs"+(count-1)).next().attr('id');
imgsId = $("#imgDivs"+(count-1)).next().find('img').attr('id');
$('#' + uploadDemoViewId).removeClass('layui-hide');
$('#' + uploadIconId).addClass('layui-hide');
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="fa fa-eye icon-myself" id="preImg' + count + '"></i>' +
'<i class="fa fa-trash-o icon-myself" id="delImg' + count + '"></i>' +
'</div>' + '</div>' + '</div>'
)
count++;
console.log("count:"+count);debugger;
console.log("url:"+baseURL+baseDownloadPath+counsellingRoomImgArray[i]);
$('#' + imgsId).attr('src', baseURL+baseDownloadPath+counsellingRoomImgArray[i]);
/*$('#imgs' + i).attr('src', counsellingRoomImg);//图片链接(base64)
//$('#imgs' + i).attr('index', index);
$('#uploadDemoView' + i).removeClass('layui-hide');
$('#uploadIcon' + i).addClass('layui-hide');
$('#imgItemInfo').append(
'<div class="layui-upload-drag-self" id="importImg' + count + '">' +
'<div id="imgDivs' + count + '">' +
'<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
'</div>' +
'<div class="img layui-hide" id="uploadDemoView' + count + '">' +
'<img class="layui-upload-img" id="imgs' + count + '" src="">' +
'<div class="handle layui-hide" id="handle' + count + '">' +
'<i class="layui-icon icon-myself" id="preImg' + count + '">查看&#xe7a5;</i>' +
'<i class="layui-icon icon-myself" id="delImg' + count + '">删除&#xe7f9;</i>' +
'</div>' + '</div>' + '</div>'
);
count++;*/
}
});
},
reload: function (event) {
vm.showList = true;
var page = $("#jqGrid").jqGrid('getGridParam','page');
$("#jqGrid").jqGrid('setGridParam',{
postData: {
name: $("#q_name").val(),
},
page:page
}).trigger("reloadGrid");
//window.location.reload();
layer.closeAll();
},
windowReload:function(){
window.location.reload();
},
}
});
// 详情
function detail(row) {
layer.closeAll();
url = 'consulinstitution_detail.html' + '?id=' + row.id;
layer.open({
type: 2,
title: "机构详情",
area: ['100%', '100%'],
content: url, //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
end: function () {
$("#jqGrid").trigger("reloadGrid");
}
});
}
//取消发布
function unpublish(row){
var id = row.id;
if(id == null){
return ;
}
var lock = false;
layer.confirm('确定要取消发布?', {
btn: ['确定','取消'] //按钮
}, function(){
if(!lock) {
lock = true;
$.ajax({
type: "POST",
url: baseURL + "consult/consulinstitution/unpublish",
data: {
id:id
},
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
$("#jqGrid").trigger("reloadGrid");
}else{
layer.alert(r.msg);
}
}
});
}
}, function(){
});
}
//发布
function publish(row){
var id = row.id;
if(id == null){
return ;
}
var lock = false;
layer.confirm('确定要发布吗?', {
btn: ['确定','取消'] //按钮
}, function(){
if(!lock) {
lock = true;
$.ajax({
type: "POST",
url: baseURL + "consult/consulinstitution/publish",
data: {
id:id
},
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
$("#jqGrid").trigger("reloadGrid");
}else{
layer.alert(r.msg);
}
}
});
}
}, function(){
});
}
function formValidator(){
$('form').bootstrapValidator({
message: 'This value is not valid',
// live: 'disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '不能为空'
},stringLength: {
min: 1,
max: 50,
message: '长度不能超过50个字符'
}
}
}
}
});
}
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
Java
1
https://gitee.com/wave_8/layui-vue.git
git@gitee.com:wave_8/layui-vue.git
wave_8
layui-vue
layui+vue自写多图上传组件
master

搜索帮助