1631 lines
56 KiB
PHP
1631 lines
56 KiB
PHP
<style>
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.mark {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
z-index: 9999;
|
||
display: none;
|
||
}
|
||
|
||
.el-dialog__wrapper {
|
||
padding: 20px;
|
||
margin: 100px auto;
|
||
width: 800px;
|
||
height: 700px;
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
@media (max-width: 991px) {
|
||
.el-dialog__wrapper {
|
||
width: 820px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
.eixt {
|
||
padding-bottom: 10px;
|
||
width: 100%;
|
||
text-align: right;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
color: #909399;
|
||
}
|
||
|
||
.top-tab {
|
||
height: 40px;
|
||
border-bottom: 2px solid #e4e7ed;
|
||
}
|
||
|
||
.tab-title {
|
||
position: relative;
|
||
bottom: -2px;
|
||
display: inline-block;
|
||
height: 100%;
|
||
line-height: 40px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.is-active {
|
||
color: #29BA9C;
|
||
border-bottom: 2px solid #29BA9C;
|
||
}
|
||
|
||
.upload-btn {
|
||
position: relative;
|
||
float: right;
|
||
padding: 7px 15px;
|
||
background-color: #29BA9C;
|
||
font-size: 12px;
|
||
border-radius: 3px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
.upload-btn input {
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
|
||
.fl {
|
||
float: left;
|
||
}
|
||
|
||
.scroll-box {
|
||
width: 150px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.left-group {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.D-gro {
|
||
margin: 0;
|
||
width: 148px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
padding: 3px 0 3px 0px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/*滚动条整体样式*/
|
||
.scroll-box::-webkit-scrollbar {
|
||
width: 2px;
|
||
}
|
||
|
||
/*滚动条滑块*/
|
||
.scroll-box::-webkit-scrollbar-thumb {
|
||
border-radius: 30px;
|
||
background: #29BA9C;
|
||
}
|
||
|
||
/*滚动条轨道*/
|
||
.scroll-box::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
|
||
border-radius: 30px;
|
||
background: #f4f4f5;
|
||
}
|
||
|
||
.text-bg {
|
||
background: #29BA9C;
|
||
color: #fff;
|
||
}
|
||
|
||
.right {
|
||
width: 610px;
|
||
height: 475px;
|
||
}
|
||
|
||
.fr {
|
||
float: right;
|
||
}
|
||
|
||
.img-source {
|
||
position: relative;
|
||
margin: 10px 0 0 10px;
|
||
width: 7.3vw;
|
||
height: 7.3vw;
|
||
}
|
||
|
||
.img-source img {
|
||
width: 100%;
|
||
height:100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
img {
|
||
border: 0;
|
||
}
|
||
|
||
.img-source p {
|
||
margin-top: 15px;
|
||
text-align: center;
|
||
padding: 0 5px;
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.img-mark {
|
||
position: absolute;
|
||
/* display: none; */
|
||
visibility:hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0px;
|
||
left: 0px;
|
||
background: rgba(41, 186, 156, 0.3);
|
||
border: 1px solid rgb(41, 186, 156);
|
||
}
|
||
|
||
.img-source:hover .img-mark {
|
||
visibility: visible;
|
||
}
|
||
|
||
.img-mark input {
|
||
margin-left: 5px;
|
||
|
||
}
|
||
|
||
input[type="checkbox"] {
|
||
zoom: 120%;
|
||
}
|
||
|
||
.img-source .sle-img {
|
||
position: absolute;
|
||
|
||
top: 5px;
|
||
left: 5px;
|
||
}
|
||
|
||
.sel-checkbox {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.foot {
|
||
position: relative;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.newdialog {
|
||
padding: 10px;
|
||
position: absolute;
|
||
display: none;
|
||
background-color: #fff;
|
||
z-index: 2000;
|
||
width: 230px;
|
||
left: -10px;
|
||
top: -136px;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebebeb;
|
||
|
||
}
|
||
|
||
.clearfix::after {
|
||
content: '';
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
|
||
.newgroup {
|
||
color: rgb(64, 158, 255);
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.number {
|
||
margin: 0 5px;
|
||
background-color: #f4f4f5;
|
||
color: #666;
|
||
min-width: 30px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
button {
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
|
||
.page,
|
||
.btn-prev,
|
||
.btn-next {
|
||
display: inline-block;
|
||
margin: 0 3px;
|
||
width: 30px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
font-size: 13px;
|
||
text-align: center;
|
||
color: #666;
|
||
border-radius: 4px;
|
||
background-color: #f4f4f5;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-prev,
|
||
.btn-next {
|
||
font-weight: bold;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
cursor: pointer!important;
|
||
}
|
||
|
||
.page-active {
|
||
background-color: #29BA9C;
|
||
color: #FFF;
|
||
}
|
||
|
||
.foot-btn {
|
||
margin-top: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.bule-text {
|
||
color: rgb(64, 158, 255);
|
||
}
|
||
|
||
|
||
.sure-cancel {
|
||
margin-left: 180px;
|
||
}
|
||
|
||
.footbtn {
|
||
width: 100px;
|
||
height: 40px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.srue {
|
||
margin-right: 20px;
|
||
color: #fff;
|
||
background-color: #29ba9c;
|
||
}
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
left: 15%;
|
||
bottom: -16px;
|
||
width: 0;
|
||
height: 0;
|
||
border-width: 8px;
|
||
border-style: solid;
|
||
border-color: #fff transparent transparent transparent;
|
||
}
|
||
|
||
.please-inp {
|
||
margin-bottom: 10px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.group-inp {
|
||
width: 100%;
|
||
height: 30px;
|
||
border: 1px solid #DCDFE6;
|
||
|
||
}
|
||
|
||
.dio-btn {
|
||
margin-top: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.new-group {
|
||
width: 50px;
|
||
height: 30px;
|
||
margin: 0 10px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.new-group-sure {
|
||
background-color: #54c8b0;
|
||
color: #fff;
|
||
}
|
||
|
||
.new-group-cancel {
|
||
border: 1px solid #DCDFE6;
|
||
color: #666;
|
||
}
|
||
|
||
#sel-img {
|
||
display: block;
|
||
}
|
||
|
||
#collect-img {
|
||
display: none;
|
||
}
|
||
|
||
.new-img {
|
||
margin-top: 20px;
|
||
width: 150px;
|
||
height: 150px;
|
||
line-height: 150px;
|
||
text-align: center;
|
||
color: #999;
|
||
line-height: 150px;
|
||
text-align: center;
|
||
margin: 20px auto;
|
||
object-fit: cover;
|
||
}
|
||
.new-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
border: none;
|
||
}
|
||
|
||
.newlink-box {
|
||
text-align: center;
|
||
}
|
||
|
||
.netlink {
|
||
padding: 0 10px;
|
||
width: 450px;
|
||
height: 40px;
|
||
border-radius: 4px;
|
||
border: 1px solid #DCDFE6;
|
||
}
|
||
|
||
.conversion {
|
||
text-align: center;
|
||
}
|
||
|
||
.conversion-btn {
|
||
margin: 30px auto;
|
||
width: 100px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
background: #FFF;
|
||
border: 1px solid #DCDFE6;
|
||
color: #666;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
padding: 12px 20px;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 提示信息 */
|
||
.success-tip {
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 60px;
|
||
transform: translate(-50%);
|
||
padding: 10px;
|
||
background-color: #f0f9eb;
|
||
border-radius: 10px;
|
||
color: #67c23a;
|
||
font-size: 14px;
|
||
display: none;
|
||
}
|
||
|
||
#none-data {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
#pageNum {
|
||
display: inline-block;
|
||
}
|
||
|
||
.shows {
|
||
visibility: visible;
|
||
}
|
||
|
||
.nones {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.paginations {
|
||
|
||
font-size: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.paginations .page-li {
|
||
display: inline-block;
|
||
font-size: 15px;
|
||
line-height: 1;
|
||
-ms-user-select: none;
|
||
-moz-user-select: none;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.paginations .page-li.page-active {
|
||
cursor: default;
|
||
color: #fff;
|
||
border-color: #29BA9C;
|
||
background-color: #29BA9C;
|
||
}
|
||
|
||
.paginations .page-li.number-ellipsis {
|
||
border: none;
|
||
cursor: default;
|
||
}
|
||
.paginations .page-number {
|
||
margin: 0 5px;
|
||
padding: 5px 12px;
|
||
text-align: center;
|
||
border-radius: 2px;
|
||
background-color: #f4f4f5;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.paginations .page-prev {
|
||
padding: 5px 12px;
|
||
margin-right: 8px;
|
||
background-color: #f4f4f5;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.paginations .page-next {
|
||
padding: 5px 12px;
|
||
margin-left: 8px;
|
||
background-color: #f4f4f5;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.paginations .number-ellipsis {
|
||
display: inline-block;
|
||
font-size: 15px;
|
||
padding: 8px 14px;
|
||
}
|
||
|
||
.paginations .number-ellipsis.page-hidden {
|
||
display: none;
|
||
}
|
||
|
||
#page-go {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 多图上传 */
|
||
.multi-img-details{margin-top:.5em;position: relative;}
|
||
.multi-img-details .multi-item{max-width: 150px!important; position: absolute!important;left: 0!important;top: 0!important; margin-right: 18px;}
|
||
.multi-img-details .multi-item .img_box{width: 150px!important;height: 150px!important;}
|
||
.multi-img-details .multi-item img{width: 100%!important; height: 100%!important;}
|
||
.multi-img-details .multi-item em{position:absolute; top: 0; right: -14px;}
|
||
#img-dialog.el-dialog__wrapper {
|
||
padding: 20px!important;
|
||
margin: 100px auto!important;
|
||
width: 820px!important;
|
||
height: 77.8vh!important;
|
||
background-color: #fff!important;
|
||
border-radius: 5px!important;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
|
||
<div class="mark" id="mark-box">
|
||
<div class="el-dialog__wrapper" id="img-dialog" style="display: block;">
|
||
<!-- 右上角的X -->
|
||
<div class="eixt" onclick="closeImgDialog()"><i class="el-icon-close"></i></div>
|
||
<!-- 顶部切换项 -->
|
||
<div class="top-tab">
|
||
<span class="tab-title is-active" onclick="handlSelect()" id="sel-img-btn">选取图片</span>
|
||
<span class="tab-title" onclick="newWorkImg()" id="net-img-btn">提取网络图片</span>
|
||
<div class="upload-btn">点击上传<input type="file" accept="image/*" title="" id="uploadfle" /></div>
|
||
</div>
|
||
|
||
<!-- 选取图片start -->
|
||
<div id="sel-img">
|
||
<div style="display:flex">
|
||
<div class="scroll-box" style="flex-shrink: 0;">
|
||
<div class="left-group fl bor-right" id="group-item">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="el-date-editor el-input el-input--prefix el-input--suffix el-date-editor--month" style="margin:20px 0 0 10px;">
|
||
<input type="month" autocomplete="off" name="imageFilterTime" placeholder="选择月" class="el-input__inner" onchange="getImgList(1,'')">
|
||
<!-- <span class="el-input__prefix"><i class="el-input__icon el-icon-date"></i></span> -->
|
||
<span class="el-input__suffix">
|
||
<span class="el-input__suffix-inner">
|
||
<i class="el-input__icon"></i>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div id="imgList"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 选取图片end -->
|
||
|
||
<div>
|
||
<div class="foot clearfix" id="foot-box">
|
||
<span class="newgroup fl" onclick="newgroup()">新建分组</span>
|
||
<!-- 新建分组弹窗 -->
|
||
<div class="newdialog" id="new-dialog">
|
||
<p class="please-inp">请输入分组名</p>
|
||
<input class="group-inp" id="new-group" type="text" >
|
||
<div class="dio-btn">
|
||
<button class="new-group new-group-sure" onclick="srueGroup()" type="button">确定</button>
|
||
<button class="new-group new-group-cancel" onclick="cancleGroup()" type="button">取消</button>
|
||
</div>
|
||
<div class="triangle"></div>
|
||
</div>
|
||
<div class="fr">
|
||
<div class="page-box">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提取网络图片start -->
|
||
<div id="collect-img">
|
||
<div class="new-img" style="display:none">
|
||
<img id="show-net-img" >
|
||
</div>
|
||
|
||
<p style="margin-top:5px;text-align: center; color:#666">输入图片链接</p>
|
||
|
||
<div class="newlink-box">
|
||
<input type="text" class="netlink" id="net-img" placeholder="图片链接" onfocus="onfocusClick()" onblur="onblurClick()">
|
||
</div>
|
||
|
||
<div class="conversion">
|
||
<button class="conversion-btn" onclick="conversion()" type="button">转化</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foot-btn clearfix">
|
||
<div class="sel-num fl" id="selNum">
|
||
<span>已选择</span>
|
||
<span class="bule-text" id="startNum">0</span>
|
||
<span class="bule-text">/</span>
|
||
<span class="bule-text" id="totalNum">100</span>
|
||
<span class="bule-text">个图片</span>
|
||
</div>
|
||
<div class="sure-cancel fl">
|
||
<button class="footbtn srue" onclick="determine()" type="button">确定</button>
|
||
<button class="footbtn cancel" onclick="cancle()" type="button">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var input_image_name = ""
|
||
var byte_type = ""
|
||
var imgDialog = document.getElementById('img-dialog') //获取整个弹窗的id
|
||
var selImg = document.getElementById('sel-img')
|
||
var collectImg = document.getElementById('collect-img')
|
||
var selImgBtn = document.getElementById('sel-img-btn')
|
||
var netImgBtn = document.getElementById('net-img-btn')
|
||
var newDialog = document.getElementById('new-dialog')
|
||
var netlink = document.getElementsByClassName('netlink')[0]
|
||
var footBox = document.getElementById('foot-box')
|
||
var startNum = document.getElementById('startNum')
|
||
var totalNum = document.getElementById('totalNum')
|
||
var checkbox = document.getElementsByClassName('sel-checkbox')
|
||
var imgMark = document.getElementsByClassName('img-mark')
|
||
|
||
var imgObj = {}
|
||
var imgArr = [] //选中的图片
|
||
var tag = 'single';//单个选择的标识
|
||
// var tag = 'more';//多个选择的标识
|
||
var id = null;
|
||
var ids = null;
|
||
|
||
var groupData = [];//分组列表的数据
|
||
var newName = '';//新建分组的名字
|
||
var netIMgLink = '';//网络的图片链接
|
||
var groupId = '';//分组id
|
||
var imgList = [];
|
||
var total = null;
|
||
var last_page = 0;
|
||
var more_img_arr = [];//当前显示的图片链接（不包括删除）
|
||
|
||
//拖放变量初始化配置
|
||
var item_w,item_h,col_len,few_len,box_w,difNum;
|
||
var box_h = [];
|
||
var delete_num = [];//删除数量
|
||
var arrIndex = []; //展示的图片下标
|
||
var srcArr =[];//存所有图片链接（包括删除）
|
||
var current_element_num = 0;
|
||
|
||
//已保存的图片加拖放属性
|
||
$(document).ready(function() {
|
||
for(let i=0;i<$('.multi-img-details').length;i++) {
|
||
// 循环每个多图上传
|
||
let arr = [];
|
||
let num_arr = [];
|
||
let count = $('.multi-img-details').eq(i).children('.multi-item').length;//item数量
|
||
if($('.multi-img-details').eq(i).children('.multi-item').length > 0) {
|
||
|
||
$('.multi-img-details').eq(i).children('.multi-item').each(function(index){
|
||
$(this).addClass("items");
|
||
$(this).addClass(`${i}-element${index}`);
|
||
let val = $(this).find("input").val();
|
||
arr.push(val);
|
||
num_arr.push(index);
|
||
})
|
||
}
|
||
|
||
delete_num.push(0);
|
||
more_img_arr.push(arr);
|
||
srcArr.push(JSON.parse(JSON.stringify(arr))); // 深拷贝
|
||
arrIndex.push(num_arr);
|
||
info(count,i);
|
||
redraw(0,i);
|
||
tuofang(i);
|
||
}
|
||
})
|
||
|
||
function selcetImg(str) {
|
||
imgDialog.css("display", "block");
|
||
}
|
||
|
||
function getGroupList() {
|
||
var str = ''
|
||
$.ajax({
|
||
url: '{!! yzWebUrl("setting.media.tags") !!}', //请求接口的地址
|
||
type: "POST", //请求的方法GET/POST
|
||
data: { //需要传递的参数
|
||
source_type: 1,
|
||
},
|
||
async : false, //将ajax请求设置为同步请求
|
||
success: function (res) { //请求成功后的操作
|
||
if(res.result == 1) {
|
||
groupData = res.data
|
||
groupData.forEach((item,index) => {
|
||
str += `<p class="D-gro" ids=${item.id === ''?'all':item.id}>${item.title}(<span id=${item.id === ''?'all':item.id}>${item.source_count}</span>)</p>`
|
||
})
|
||
$('#group-item').html(str);
|
||
$('#group-item').find('p:first').addClass('text-bg');//选取第一个默认元素添加背景
|
||
}
|
||
},
|
||
error: function (err) { //请求失败后的操作
|
||
console.log(err); //请求失败在控制台输出22
|
||
}
|
||
})
|
||
}
|
||
|
||
getGroupList()//调用 不可去掉
|
||
|
||
function handlSelect() {
|
||
selImg.style.display = 'block';
|
||
collectImg.style.display = 'none';
|
||
selImgBtn.classList.add("is-active")
|
||
netImgBtn.classList.remove("is-active");
|
||
imgDialog.style.height = "700px"
|
||
footBox.style.display="block"
|
||
|
||
}
|
||
|
||
function newWorkImg() {
|
||
selImg.style.display = 'none';
|
||
collectImg.style.display = 'block';
|
||
netImgBtn.classList.add("is-active")
|
||
selImgBtn.classList.remove("is-active");
|
||
imgDialog.style.height = "560px"
|
||
footBox.style.display="none"
|
||
|
||
}
|
||
|
||
function newgroup() {
|
||
newDialog.style.display = "block"
|
||
}
|
||
|
||
//确定新建分组
|
||
function srueGroup() {
|
||
newName=document.getElementById("new-group").value;
|
||
if(newName == '') {
|
||
alert('分组名不能为空!')
|
||
return
|
||
}
|
||
$.ajax({
|
||
url: "{!! yzWebUrl("setting.media.addTag") !!}", //请求接口的地址
|
||
type: "POST", //请求的方法GET/POST
|
||
data: { //需要传递的参数
|
||
source_type:1,
|
||
title:newName
|
||
},
|
||
async : false, //将ajax请求设置为同步请求
|
||
success: function (res) { //请求成功后的操作
|
||
if(res.result == 1) {
|
||
alert('新建分组成功')
|
||
getGroupList()
|
||
getImgList(1,'')
|
||
newDialog.style.display = "none"
|
||
document.getElementById("new-group").value="";
|
||
startNum.innerHTML = '0'
|
||
imgObj = {}
|
||
imgArr =[]
|
||
}
|
||
},
|
||
error: function (err) { //请求失败后的操作
|
||
console.log(err); //请求失败在控制台输出22
|
||
}
|
||
})
|
||
}
|
||
|
||
function cancleGroup() {
|
||
newDialog.style.display = "none"
|
||
document.getElementById("new-group").value="";
|
||
}
|
||
|
||
function onfocusClick() {
|
||
netlink.style.border = '1px solid #29ba9c'
|
||
}
|
||
|
||
function onblurClick() {
|
||
netlink.style.border = '1px solid #DCDFE6'
|
||
}
|
||
|
||
function getImgList(page,tag_id) {//默认请求全部图片
|
||
let filterTime=$("input[name='imageFilterTime']").val();
|
||
console.log(filterTime);
|
||
if(filterTime){
|
||
filterTime={
|
||
year:parseInt(filterTime.split("-")[0]),
|
||
month:parseInt(filterTime.split("-")[1])
|
||
}
|
||
}else {
|
||
filterTime={
|
||
year:null,
|
||
month:null
|
||
};
|
||
}
|
||
$.ajax({
|
||
url: '{!! yzWebUrl("upload.uploadV3.getImage") !!}',
|
||
type: "POST",
|
||
data: {
|
||
page:page,
|
||
pageSize: 12,
|
||
tag_id:tag_id,
|
||
date:filterTime
|
||
},
|
||
async : false,
|
||
success: function (res) {
|
||
if(res.result == 1) {
|
||
imgList = res.data.data;
|
||
// console.log(imgList,'11111111111111')
|
||
total = res.data.total;
|
||
last_page = res.data.last_page || 1;
|
||
let str = ''
|
||
imgList.forEach((item,index) => {
|
||
str += ` <div class="img-source fl" id="sel-input"><img src="${item.url}" alt="">
|
||
<!--<p>${item.filename}</p>-->
|
||
<div class="img-mark" id=${item.id}>
|
||
<input type="checkbox" class="sel-checkbox" srcs=${item.url} id=${item.id} attachments=${item.attachment}>
|
||
</div>
|
||
</div>`
|
||
})
|
||
|
||
if(imgList.length <= 0) {
|
||
str = `<div id="none-data">暂无数据</div>`
|
||
}
|
||
$('#imgList').html(str)
|
||
}
|
||
},
|
||
error: function (err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
|
||
};
|
||
|
||
(function() {
|
||
getImgList(1,'');
|
||
})();
|
||
|
||
var file = document.getElementById('uploadfle')
|
||
// 点击上传
|
||
file.onchange = function () {
|
||
console.log(this.files,"this.files")
|
||
// var fileData = this.files[0]; //获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
|
||
uploadImage(this.files, 0);
|
||
|
||
}
|
||
|
||
function uploadImage(files, index) {
|
||
let fileData = files[index];
|
||
let fd = new FormData();
|
||
fd.append("file", fileData);
|
||
$.ajax({
|
||
url: "{!! yzWebUrl("upload.uploadV3.upload") !!}"+'&upload_type=image'+"&tag_id=" + groupId,
|
||
type: "POST",
|
||
contentType: false,
|
||
// 告诉jQuery不要去设置Content-Type请求头
|
||
processData: false,
|
||
// 告诉jQuery不要去处理发送的数据
|
||
data: fd ,
|
||
async : false,
|
||
success: function (res) {
|
||
if(res.result == 1) {
|
||
// alert('图片上传成功!')
|
||
if(index < files.length-1) {
|
||
// 多图采用递归上传
|
||
index++;
|
||
uploadImage(files, index);
|
||
return
|
||
}
|
||
getImgList(1, groupId)
|
||
imgArr = []
|
||
imgObj ={}
|
||
// 已经在getImgList方法里面执行；没必要再执行一次
|
||
// let str = ''
|
||
// imgList.forEach((item,index) => {
|
||
// str += ` <div class="img-source fl" id="sel-input"><img src="${item.url}" alt="">
|
||
// <!--<p>${item.filename}</p>-->
|
||
// <div class="img-mark" id=${item.id}>
|
||
// <input type="checkbox" class="sel-checkbox" srcs=${item.url} id=${item.id} attachments=${item.attachment}>
|
||
// </div>
|
||
// </div>`
|
||
// })
|
||
|
||
// $('#imgList').html(str)
|
||
|
||
// if(total == 0) {
|
||
// totalPage = 1;
|
||
// }
|
||
var slp = new SimplePagination(last_page)
|
||
slp.init({
|
||
container: '.page-box',
|
||
// maxShowBtnCount: 3,
|
||
onPageChange: state => {
|
||
page = state.pageNumber
|
||
// console.log(page)
|
||
getImgList(page,groupId)
|
||
slectImg()
|
||
startNum.innerHTML = '0'
|
||
imgObj = {}
|
||
imgArr =[]
|
||
}
|
||
})
|
||
totalNum.innerHTML = total
|
||
|
||
slectImg()
|
||
// 上传成功默认选中
|
||
// console.log(document.getElementsByClassName('sel-checkbox')[0])
|
||
|
||
// 可以勾选多个的时候执行
|
||
if(tag== "more") {
|
||
let defaultSels = document.getElementsByClassName('sel-checkbox')
|
||
|
||
for(let i = 0; i < files.length; i++) {
|
||
defaultSels[i].checked = true;
|
||
defaultSels[i].parentNode.classList.add('shows');
|
||
ids = defaultSels[i].attributes["id"].value;
|
||
let path = defaultSels[i].attributes["attachments"].value;
|
||
let paths = defaultSels[i].attributes["srcs"].value;
|
||
imgArr.push({"id":ids,"url":paths,"attachment":path});
|
||
}
|
||
|
||
startNum.innerHTML = imgArr.length
|
||
}
|
||
|
||
// 只能勾选单个的时候执行
|
||
if(tag== "single") {
|
||
let defaultSel = document.getElementsByClassName('sel-checkbox')[0]
|
||
defaultSel.checked = true
|
||
defaultSel.parentNode.classList.add('shows')
|
||
id = defaultSel.attributes["id"].value
|
||
let path = defaultSel.attributes["attachments"].value
|
||
let paths = defaultSel.attributes["srcs"].value
|
||
imgObj.id = id
|
||
imgObj.url = paths
|
||
imgObj.attachment = path
|
||
startNum.innerHTML = '1'
|
||
}
|
||
|
||
let gid = getEle()
|
||
// console.log(gid)
|
||
if(gid == '') {
|
||
gid ='all'
|
||
}
|
||
|
||
var newNum = document.getElementById(gid)
|
||
let num = Number(newNum.innerHTML)
|
||
num += 1
|
||
newNum.innerHTML = num
|
||
file.value = ''
|
||
|
||
} else {
|
||
alert(res.msg)
|
||
}
|
||
},
|
||
error: function (err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
}
|
||
|
||
function getEle() {
|
||
return groupId
|
||
}
|
||
|
||
function getNteImg(url,tag_id) {
|
||
$.ajax({
|
||
url: "{!! yzWebUrl("upload.uploadV3.fetch") !!}", //请求接口的地址
|
||
type: "POST", //请求的方法GET/POST
|
||
data: { //需要传递的参数
|
||
url:url,
|
||
tag_id:tag_id
|
||
},
|
||
async : false, //将ajax请求设置为同步请求
|
||
success: function (res) { //请求成功后的操作
|
||
if(res.result == 1) {
|
||
}
|
||
},
|
||
error: function (err) { //请求失败后的操作
|
||
console.log(err); //请求失败在控制台输出22
|
||
}
|
||
})
|
||
}
|
||
|
||
function conversion() {
|
||
document.querySelector(".new-img").style.display="block";
|
||
netIMgLink = document.getElementById("net-img").value;
|
||
// console.log(netIMgLink)
|
||
var showNetImg = document.getElementById('show-net-img')
|
||
showNetImg.src = netIMgLink
|
||
getNteImg(netIMgLink,0)//转入未分组，未分组的id是0
|
||
document.getElementById("net-img").value = '';
|
||
alert('图片提取到未分组')
|
||
}
|
||
|
||
|
||
function slectImg() {
|
||
imgObj ={}
|
||
if(tag == 'single' ) {
|
||
for (let index = 0; index < imgMark.length; index++) {
|
||
const imgMarkEl = imgMark[index];
|
||
imgMarkEl.onclick=function(){
|
||
id=imgMarkEl.id;
|
||
const checkEl= this.querySelector("input[type=checkbox]");
|
||
let checkedStatus=checkEl.checked= !checkEl.checked;
|
||
if(checkedStatus == true) {
|
||
id = checkEl.attributes["id"].value
|
||
var img = document.getElementById(id);
|
||
img.classList.add("shows");
|
||
let path = checkEl.attributes["attachments"].value
|
||
let paths = checkEl.attributes["srcs"].value
|
||
imgObj.id = id
|
||
imgObj.url = paths
|
||
imgObj.attachment = path
|
||
startNum.innerHTML = '1'
|
||
imgArr.push({"id":id,"url":paths,"attachment":path})
|
||
} else {
|
||
imgObj ={}
|
||
imgCount = 0
|
||
var img = document.getElementById(id)
|
||
img.classList.remove("shows");
|
||
startNum.innerHTML = '0'
|
||
}
|
||
imgArr.forEach((item,index) => {
|
||
if(item.id == id) {
|
||
imgArr.splice(index,1)
|
||
}
|
||
})
|
||
for(var i = 0;i < checkbox.length;i++) {
|
||
checkbox[i].checked = false
|
||
checkbox[i].parentNode.classList.remove("shows")
|
||
if(id == checkbox[i].id && checkedStatus == true) {
|
||
checkbox[i].checked = true
|
||
var img = document.getElementById(id)
|
||
img.classList.add("shows");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
for(var i = 0;i < checkbox.length;i++) {
|
||
checkbox[i].change = function(e) {
|
||
let checkedStatus = this.checked;
|
||
if(checkedStatus == true) {
|
||
id = this.attributes["id"].value
|
||
var img = document.getElementById(id);
|
||
img.classList.add("shows");
|
||
let path = this.attributes["attachments"].value
|
||
let paths = this.attributes["srcs"].value
|
||
imgObj.id = id
|
||
imgObj.url = paths
|
||
imgObj.attachment = path
|
||
startNum.innerHTML = '1'
|
||
} else {
|
||
imgObj ={}
|
||
imgCount = 0
|
||
var img = document.getElementById(id)
|
||
img.classList.remove("shows");
|
||
startNum.innerHTML = '0'
|
||
}
|
||
for(var i = 0;i < checkbox.length;i++) {
|
||
checkbox[i].checked = false
|
||
checkbox[i].parentNode.classList.remove("shows")
|
||
if(id == checkbox[i].id && checkedStatus == true) {
|
||
checkbox[i].checked = true
|
||
img.classList.add("shows");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if(tag == 'more') {
|
||
for (let index = 0; index < imgMark.length; index++) {
|
||
const imgMarkEl = imgMark[index];
|
||
imgMarkEl.onclick=function(){
|
||
id=imgMarkEl.id;
|
||
const checkEl= this.querySelector("input[type=checkbox]");
|
||
let checkedStatus= checkEl.checked= !checkEl.checked;
|
||
if(checkedStatus == true) {
|
||
id = checkEl.attributes["id"].value
|
||
var img = document.getElementById(id)
|
||
img.classList.add("shows");
|
||
let path = checkEl.attributes["attachments"].value
|
||
let paths = checkEl.attributes["srcs"].value
|
||
imgArr.push({"id":id,"url":paths,"attachment":path})
|
||
// console.log(imgArr,'执行了吗');
|
||
startNum.innerHTML = imgArr.length;
|
||
} else {
|
||
ids = checkEl.attributes["id"].value
|
||
imgArr.forEach((item,index) => {
|
||
if(item.id == ids) {
|
||
imgArr.splice(index,1)
|
||
}
|
||
})
|
||
var img = document.getElementById(ids)
|
||
img.classList.remove("shows");
|
||
startNum.innerHTML = imgArr.length
|
||
}
|
||
}
|
||
}
|
||
// console.log(imgArr,22);
|
||
for(var i = 0;i < checkbox.length;i++) {
|
||
checkbox[i].onchange = function(e) {
|
||
e.stopPropagation();
|
||
// console.log(i);
|
||
let checkedStatus = this.checked;
|
||
if(checkedStatus == true) {
|
||
id = this.attributes["id"].value
|
||
var img = document.getElementById(id)
|
||
img.classList.add("shows");
|
||
let path = this.attributes["attachments"].value
|
||
let paths = this.attributes["srcs"].value
|
||
imgArr.push({"id":id,"url":paths,"attachment":path})
|
||
// console.log(imgArr,'执行了吗');
|
||
startNum.innerHTML = imgArr.length;
|
||
} else {
|
||
ids = this.attributes["id"].value
|
||
imgArr.forEach((item,index) => {
|
||
if(item.id == ids) {
|
||
imgArr.splice(index,1)
|
||
}
|
||
})
|
||
var img = document.getElementById(ids)
|
||
img.classList.remove("shows");
|
||
startNum.innerHTML = imgArr.length
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// (function() {
|
||
slectImg() //调用 不可去掉
|
||
// })();
|
||
|
||
|
||
class SimplePagination {
|
||
constructor(totalPageCount) {
|
||
if (!totalPageCount) return
|
||
this.state = {
|
||
pageNumber: 1,
|
||
totalPageCount
|
||
}
|
||
}
|
||
|
||
init(paramsObj) {
|
||
let state = this.state
|
||
state.container = paramsObj.container || 'body'
|
||
state.maxShowBtnCount = paramsObj.maxShowBtnCount || 5
|
||
state.pCName = paramsObj.pCName || 'page-li',
|
||
state.activeCName = paramsObj.activeCName || 'page-active',
|
||
state.dataNumberAttr = paramsObj.dataNumberAttr || 'data-number',
|
||
state.prevCName = paramsObj.prevCName || 'page-prev',
|
||
state.nextCName = paramsObj.nextCName || 'page-next',
|
||
state.disbalePrevCName = paramsObj.disbalePrevCName || 'no-prev',
|
||
state.disbaleNextCName = paramsObj.disbaleNextCName || 'no-next',
|
||
state.pageNumberCName = paramsObj.pageNumberCName || 'page-number'
|
||
state.swEvent = paramsObj.swEvent || 'click'
|
||
state.onPageChange = paramsObj.onPageChange
|
||
state.totalPageCount > state.maxShowBtnCount + 2 && (state.activePosition = Math.ceil(state.maxShowBtnCount / 2))
|
||
this.renderPageDOM()
|
||
}
|
||
|
||
switchPage() {
|
||
let state = this.state
|
||
let pCNameList = this.selectorEle('.' + state.pCName, true)
|
||
let pageNumber
|
||
pCNameList.forEach(item => {
|
||
item.addEventListener(state.swEvent, e => {
|
||
const currentPageEle = e.target
|
||
if (this.hasClass(currentPageEle, state.activeCName)) return
|
||
let dataNumberAttr = currentPageEle.getAttribute(state.dataNumberAttr)
|
||
if (dataNumberAttr) {
|
||
// 点击 数字 按钮
|
||
pageNumber = +dataNumberAttr
|
||
} else if (this.hasClass(currentPageEle, state.prevCName)) {
|
||
// 点击 上一页 按钮
|
||
state.pageNumber > 1 && (pageNumber = state.pageNumber - 1)
|
||
} else if (this.hasClass(currentPageEle, state.nextCName)) {
|
||
// 点击 下一页 按钮
|
||
state.pageNumber < state.totalPageCount && (pageNumber = state.pageNumber + 1)
|
||
}
|
||
pageNumber && this.gotoPage(pageNumber)
|
||
})
|
||
})
|
||
}
|
||
gotoPage(pageNumber) {
|
||
let state = this.state
|
||
let evaNumberLi = this.selectorEle('.' + state.pageNumberCName, true)
|
||
let len = evaNumberLi.length
|
||
if (!len || this.isIllegal(pageNumber)) return
|
||
// 清除 active 样式
|
||
this.removeClass(this.selectorEle(`.${state.pCName}.${state.activeCName}`), state.activeCName)
|
||
if (state.activePosition) {
|
||
let rEllipseSign = state.totalPageCount - (state.maxShowBtnCount - state.activePosition) - 1
|
||
// 左边不需要出现省略符号占位
|
||
if (pageNumber <= state.maxShowBtnCount && (pageNumber < rEllipseSign)) {
|
||
if (+evaNumberLi[1].getAttribute(state.dataNumberAttr) > 2) {
|
||
for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
|
||
evaNumberLi[i].innerText = i + 1
|
||
evaNumberLi[i].setAttribute(state.dataNumberAttr, i + 1)
|
||
}
|
||
}
|
||
this.hiddenEllipse('.ellipsis-head')
|
||
this.hiddenEllipse('.ellipsis-tail', false)
|
||
this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
|
||
}
|
||
// 两边都需要出现省略符号占位
|
||
if (pageNumber > state.maxShowBtnCount && pageNumber < rEllipseSign) {
|
||
this.hiddenEllipse('.ellipsis-head', pageNumber === 2 && state.maxShowBtnCount === 1)
|
||
this.hiddenEllipse('.ellipsis-tail', false)
|
||
for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
|
||
evaNumberLi[i].innerText = pageNumber + (i - state.activePosition)
|
||
evaNumberLi[i].setAttribute(state.dataNumberAttr, pageNumber + (i - state.activePosition))
|
||
}
|
||
this.addClass(evaNumberLi[state.activePosition], state.activeCName)
|
||
}
|
||
// 右边不需要出现省略符号占位
|
||
if (pageNumber >= rEllipseSign) {
|
||
this.hiddenEllipse('.ellipsis-tail')
|
||
this.hiddenEllipse('.ellipsis-head', false)
|
||
if (+evaNumberLi[len - 2].getAttribute(state.dataNumberAttr) < state.totalPageCount - 1) {
|
||
for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
|
||
evaNumberLi[i].innerText = state.totalPageCount - (state.maxShowBtnCount - i) - 1
|
||
evaNumberLi[i].setAttribute(state.dataNumberAttr, state.totalPageCount - (state.maxShowBtnCount - i) - 1)
|
||
}
|
||
}
|
||
this.addClass(evaNumberLi[(state.maxShowBtnCount + 1) - (state.totalPageCount - pageNumber)], state.activeCName)
|
||
}
|
||
} else {
|
||
// 不需要省略符号占位
|
||
this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
|
||
}
|
||
state.pageNumber = pageNumber
|
||
state.onPageChange && state.onPageChange(state)
|
||
// 判断 上一页 下一页 是否可使用
|
||
this.switchPrevNextAble()
|
||
}
|
||
|
||
switchPrevNextAble() {
|
||
let state = this.state
|
||
let prevBtn = this.selectorEle('.' + state.prevCName)
|
||
let nextBtn = this.selectorEle('.' + state.nextCName)
|
||
// 当前页已经是第一页，则禁止 上一页 按钮的可用性
|
||
state.pageNumber > 1
|
||
? (this.hasClass(prevBtn, state.disbalePrevCName) && this.removeClass(prevBtn, state.disbalePrevCName))
|
||
: (!this.hasClass(prevBtn, state.disbalePrevCName) && this.addClass(prevBtn, state.disbalePrevCName))
|
||
// 当前页已经是最后一页，则禁止 下一页 按钮的可用性
|
||
state.pageNumber >= state.totalPageCount
|
||
? (!this.hasClass(nextBtn, state.disbaleNextCName) && this.addClass(nextBtn, state.disbaleNextCName))
|
||
: (this.hasClass(nextBtn, state.disbaleNextCName) && this.removeClass(nextBtn, state.disbaleNextCName))
|
||
}
|
||
|
||
renderPageDOM() {
|
||
// 渲染页码DOM
|
||
let state = this.state
|
||
let pageContainer = this.selectorEle(state.container)
|
||
if (!pageContainer) return
|
||
let { totalPageCount, pCName, prevCName, disbalePrevCName, pageNumberCName,
|
||
activeCName, dataNumberAttr, maxShowBtnCount, nextCName, disbaleNextCName } = state
|
||
let paginationStr = `
|
||
<ul class="clearfix paginations">
|
||
<li class="${pCName} ${prevCName} ${disbalePrevCName}"><</li>
|
||
<li class="${pCName} ${pageNumberCName} ${activeCName}" ${dataNumberAttr}='1'>1</li>
|
||
`
|
||
if (totalPageCount - 2 > maxShowBtnCount) {
|
||
paginationStr += `
|
||
<li class="${pCName} number-ellipsis ellipsis-head" style="display: none;">...</li>`
|
||
for (let i = 2; i < maxShowBtnCount + 2; i++) {
|
||
paginationStr += `<li class="${pCName} ${pageNumberCName} ${i === 1 ? activeCName : ''}" ${dataNumberAttr}='${i}'>${i}</li>`
|
||
}
|
||
paginationStr += `
|
||
<li class="${pCName} number-ellipsis ellipsis-tail">...</li>
|
||
<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${totalPageCount}'>${totalPageCount}</li>
|
||
`
|
||
} else {
|
||
for (let i = 2; i <= totalPageCount; i++) {
|
||
paginationStr += `<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${i}'>${i}</li>`
|
||
}
|
||
}
|
||
paginationStr += `<li class="${pCName} ${nextCName}${totalPageCount === 1 ? ' ' + disbaleNextCName : ''}">></li></ul>`
|
||
pageContainer.innerHTML = paginationStr
|
||
// 切换页码
|
||
this.switchPage()
|
||
}
|
||
|
||
isIllegal(pageNumber) {
|
||
let state = this.state
|
||
return (
|
||
state.pageNumber === pageNumber || Math.ceil(pageNumber) !== pageNumber ||
|
||
pageNumber > state.totalPageCount || pageNumber < 1 ||
|
||
typeof pageNumber !== 'number' || pageNumber !== pageNumber
|
||
)
|
||
}
|
||
|
||
hiddenEllipse(selector, shouldHidden = true) {
|
||
this.selectorEle(selector).style.display = shouldHidden ? 'none' : ''
|
||
}
|
||
|
||
selectorEle(selector, all = false) {
|
||
return all ? document.querySelectorAll(selector) : document.querySelector(selector)
|
||
}
|
||
|
||
hasClass(eleObj, className) {
|
||
return eleObj.classList.contains(className);
|
||
}
|
||
|
||
addClass(eleObj, className) {
|
||
eleObj.classList.add(className);
|
||
}
|
||
|
||
removeClass(eleObj, className) {
|
||
if (this.hasClass(eleObj, className)) {
|
||
eleObj.classList.remove(className);
|
||
}
|
||
}
|
||
}
|
||
totalNum.innerHTML = total
|
||
|
||
var slp = new SimplePagination(last_page)
|
||
slp.init({
|
||
container: '.page-box',
|
||
onPageChange: state => {
|
||
page = state.pageNumber
|
||
// console.log(page)
|
||
getImgList(page,groupId)
|
||
slectImg()
|
||
startNum.innerHTML = '0'
|
||
imgObj = {}
|
||
imgArr =[]
|
||
}
|
||
})
|
||
|
||
$('#group-item').on('click','.D-gro', function() {
|
||
groupId = $(this).attr('ids')
|
||
$(this).addClass('text-bg');
|
||
$(this).siblings('p').removeClass('text-bg');
|
||
getImgList(1,groupId)
|
||
// if(total == 0) {
|
||
// totalPage = 1;
|
||
// }
|
||
startNum.innerHTML = '0'
|
||
imgObj = {}
|
||
imgArr =[]
|
||
var slp = new SimplePagination(last_page)
|
||
slp.init({
|
||
container: '.page-box',
|
||
onPageChange: state => {
|
||
page = state.pageNumber
|
||
// console.log(page)
|
||
getImgList(page,groupId)
|
||
slectImg()
|
||
startNum.innerHTML = '0'
|
||
imgObj = {}
|
||
imgArr =[]
|
||
}
|
||
})
|
||
totalNum.innerHTML = total
|
||
slectImg()
|
||
});
|
||
|
||
// 点击确定函数，获取勾选图片的数据 单个选择获取的是imgObj 多个选择获取到的是imgArr 添加图片
|
||
function determine() {
|
||
// var markBox = document.getElementById('mark-box')
|
||
// var imgDialog = document.getElementById('img-dialog')
|
||
// markBox.style.display = "none"
|
||
// imgDialog.style.display = "none"
|
||
$("#imgList .img-mark").each(function() {
|
||
$(this).removeClass("shows");
|
||
$(this).children(".sel-checkbox").prop("checked",false);
|
||
})
|
||
$("#mark-box").hide();
|
||
|
||
if(tag == 'more') {
|
||
difNum = more_img_arr[current_element_num].length;
|
||
for(let i=0;i<imgArr.length;i++) {
|
||
let html = `
|
||
<div class="multi-item items ${current_element_num}-element${difNum+i+delete_num[current_element_num]}">
|
||
<div class="img_box">
|
||
<img onerror="this.src='{{static_url('./resource/images/nopic.jpg')}}'; this.title='图片未找到'" src="${imgArr[i].url}" class="img-responsive img-thumbnail">
|
||
</div>
|
||
<input type="hidden" name="${byte_type}[]" value="${imgArr[i].attachment}">
|
||
<em class="close" title="删除这张图片" onclick="deleteMultiImage2(this,${current_element_num})">×</em>
|
||
</div>
|
||
|
||
`
|
||
$(input_image_name).parent().parent().next().append(html);
|
||
arrIndex[current_element_num].push(difNum+i+delete_num[current_element_num]);
|
||
srcArr[current_element_num].push(imgArr[i].attachment);
|
||
more_img_arr[current_element_num].push(imgArr[i].attachment);
|
||
}
|
||
|
||
let count = arrIndex[current_element_num].length;
|
||
info(count, current_element_num);
|
||
redraw(0, current_element_num);
|
||
tuofang(current_element_num);
|
||
}else {
|
||
var ipt = $(input_image_name).parent().prev();
|
||
ipt.val(imgObj.attachment);
|
||
ipt.attr("filename",imgObj.filename);
|
||
ipt.attr("url",imgObj.url);
|
||
var img = ipt.parent().next().children();
|
||
img.get(0).src = imgObj.url
|
||
}
|
||
imgArr=[];
|
||
}
|
||
|
||
// 初始值
|
||
function info(count, index){
|
||
let curr = -1;
|
||
if(index !== '' && index !== undefined && index !== null) {
|
||
curr = index;
|
||
}else {
|
||
curr = current_element_num;
|
||
}
|
||
box_w = $(`.input-group`).width();//取总宽度
|
||
if(item_w===undefined || item_w===null){
|
||
item_w = $(".multi-item").outerWidth(true);//每个item占的横向位置
|
||
item_h = $(".img_box").outerHeight(true);//每个item占的横向位置
|
||
};
|
||
col_len = Math.floor(box_w/item_w);//共分多少列
|
||
few_len = Math.ceil(count/col_len);//共分多少行
|
||
box_h[index] = item_h*few_len;
|
||
|
||
$(`.multi-img-details`).eq(curr).height(box_h[index]+"px");
|
||
}
|
||
|
||
//调用绘制
|
||
function redraw(slidetime,index){
|
||
let curr = -1;
|
||
if(index !== '' && index !== undefined && index !== null) {
|
||
curr = index;
|
||
}else {
|
||
curr = current_element_num;
|
||
}
|
||
for(var i=0;i < more_img_arr[curr].length;i++){
|
||
this.computat(i,`${curr}-element${arrIndex[curr][i]}`,slidetime);
|
||
}
|
||
}
|
||
|
||
//绘制/移动
|
||
function draw(dom,col,few,slidetime){
|
||
dom.css({
|
||
"transition-duration": slidetime+"ms",
|
||
"transform":"translate("+col+"px,"+few+"px)",
|
||
});
|
||
}
|
||
|
||
//计算位置
|
||
function computat(index,domid,slidetime){
|
||
var item = $("."+domid);
|
||
item.attr({
|
||
"item":index,
|
||
});
|
||
var col_aliquot=index%col_len;
|
||
var row_aliquot=Math.floor(index/col_len);
|
||
var index_col = item_w*(col_aliquot);
|
||
var index_few = item_h*row_aliquot;
|
||
draw(item,index_col,index_few,slidetime);
|
||
item.attr({
|
||
"col":index_col,
|
||
"few":index_few
|
||
})
|
||
}
|
||
|
||
// 排序图片值
|
||
function sortImg(curr){
|
||
for(let i = 0;i<arrIndex[curr].length;i++){
|
||
$('.multi-img-details').eq(curr).children('.items').eq(i).find("input").val(srcArr[curr][arrIndex[curr][i]]);
|
||
}
|
||
}
|
||
|
||
//取消
|
||
function cancle() {
|
||
var markBox = document.getElementById('mark-box');
|
||
markBox.style.display = "none";
|
||
$("#imgList .img-mark").each(function() {
|
||
$(this).removeClass("shows");
|
||
$(this).children(".sel-checkbox").prop("checked",false);
|
||
})
|
||
imgArr=[];
|
||
}
|
||
|
||
//关闭选择图片
|
||
function closeImgDialog() {
|
||
$("#imgList .img-mark").each(function() {
|
||
$(this).removeClass("shows");
|
||
$(this).children(".sel-checkbox").prop("checked",false);
|
||
})
|
||
$("#mark-box").hide();
|
||
imgArr=[];
|
||
}
|
||
|
||
//打开选择图片
|
||
function showImageDialog2(el,type,b_type,num) {
|
||
$("#mark-box").show();
|
||
input_image_name = el
|
||
tag = type || 'single'
|
||
byte_type = b_type
|
||
current_element_num = num || 0;
|
||
var file = document.getElementById('uploadfle')
|
||
if(tag== "more") {
|
||
// 多图上传
|
||
file.setAttribute('multiple', true);
|
||
}else {
|
||
file.removeAttribute('multiple');
|
||
}
|
||
slectImg();
|
||
}
|
||
|
||
//删除图片
|
||
function deleteMultiImage2(elm,index){
|
||
let curr = -1;
|
||
if(index !== '' && index !== undefined && index !== null) {
|
||
curr = index;
|
||
}else {
|
||
curr = current_element_num;
|
||
}
|
||
delete_num[current_element_num]++;//已经删除的个数
|
||
let itemi = parseInt($(elm).parent().attr("item"));
|
||
let arr2 = [];
|
||
for(var i=0;i<arrIndex[curr].length;i++){
|
||
if(i==itemi){
|
||
arrIndex[curr][i]=null;
|
||
}else if(arrIndex[curr][i]!=null){
|
||
arr2.push(arrIndex[curr][i]);
|
||
};
|
||
}
|
||
|
||
new Promise(function(resolve) {
|
||
$(elm).parent().remove();
|
||
more_img_arr[curr].splice(itemi,1);
|
||
arrIndex[curr] = arr2;
|
||
redraw(200,curr);
|
||
resolve();
|
||
}).then(function() {
|
||
// sortImg()
|
||
});
|
||
//调整高度
|
||
let count = arr2.length;//item数量
|
||
info(count, curr);
|
||
}
|
||
|
||
//拖动排序
|
||
function tuofang(index){
|
||
let curr = -1;
|
||
if(index !== '' && index !== undefined && index !== null) {
|
||
curr = index;
|
||
}else {
|
||
curr = current_element_num;
|
||
}
|
||
var stsrtcol,stsrtfew,//初始位置
|
||
mobiexident,mobieyident,//移动标识
|
||
startindex;//当前点击元素的item值
|
||
var isdrag=false;//是否可以拖动
|
||
var ischange=false;//是否有改动
|
||
var dom;//按下后移动的对象
|
||
$(".multi-img-details").eq(curr).on({
|
||
mousedown:function(e){
|
||
e.preventDefault();
|
||
startindex=parseInt($(this).attr("item"));
|
||
$(this).css({"opacity":"0.8","z-index":"10"});
|
||
var startx=e.pageX;
|
||
var starty=e.pageY;
|
||
dom =e.currentTarget;
|
||
isdrag=true;
|
||
stsrtcol=parseInt($(this).attr("col"));
|
||
stsrtfew=parseInt($(this).attr("few"));
|
||
$(this).off("mousemove").off("mouseup").off("mouseleave").on({
|
||
mousemove:function(e){
|
||
if(isdrag){
|
||
var movex=e.pageX;
|
||
var movey=e.pageY;
|
||
var mobiex=stsrtcol+movex-startx;
|
||
var mobiey=stsrtfew+movey-starty;
|
||
if(mobiex>box_w-item_w){
|
||
mobiex=box_w-item_w;
|
||
}else if(mobiex < 0){
|
||
mobiex=0;
|
||
}
|
||
if(mobiey>box_h[curr]-item_h){
|
||
mobiey=box_h[curr]-item_h;
|
||
}else if(mobiey < 0){
|
||
mobiey=0;
|
||
}
|
||
|
||
if(Math.abs(movex-startx)>10||Math.abs(movey-starty)>10){
|
||
ischange=true;
|
||
mobiexident=Math.abs(Math.ceil((mobiex-item_w/2)/item_w));
|
||
mobieyident=Math.abs(Math.ceil((mobiey-item_h/2)/item_h));
|
||
draw($(this),mobiex,mobiey,0);
|
||
}
|
||
|
||
}
|
||
},
|
||
mouseup:function(e){
|
||
if(isdrag){
|
||
isdrag=false;
|
||
$(this).css({"opacity":"1","z-index":""});
|
||
draw($(this),stsrtcol,stsrtfew,0);
|
||
if(ischange){
|
||
ischange=false;
|
||
let toposion = mobieyident*col_len+mobiexident;
|
||
let difference=toposion-startindex;
|
||
if(difference > 1){//往后
|
||
let changesitem=arrIndex[curr].splice(startindex,1)[0];
|
||
arrIndex[curr].splice(toposion-1,0,changesitem);
|
||
redraw(200, curr);
|
||
sortImg(curr);
|
||
}else if(difference < 0){//往前
|
||
var changesitem=arrIndex[curr].splice(startindex,1)[0];
|
||
arrIndex[curr].splice(toposion,0,changesitem);
|
||
redraw(200, curr);
|
||
sortImg(curr);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mouseleave:function(e){
|
||
if(isdrag){
|
||
isdrag=false;
|
||
$(this).css({"opacity":"1","z-index":""});
|
||
draw($(this),stsrtcol,stsrtfew,0);
|
||
}
|
||
},
|
||
})
|
||
},
|
||
},".items")
|
||
}
|
||
|
||
function deleteImage2(elm){
|
||
$(elm).prev().attr("src", '{{static_url("resource/images/nopic.jpg")}}');
|
||
$(elm).parent().prev().find("input").val("");
|
||
}
|
||
</script> |