You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

454 lines
18 KiB
Plaintext

2 months ago
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="cp_imagelist.aspx.cs" Inherits="WinWooWeb.ProductManage.cp_imagelist" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片库</title>
<meta name="referrer" content="no-referrer">
</head>
<script src="js/jquery.js"></script>
<script src="js/upload.js"></script>
<link rel="stylesheet" type="text/css" href="../css/New2.css?a=162344" />
<link href="../css/ListNew2.css?a=133" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-2.0.3.min.js" iconfont="true"></script>
<script src="js/Jsequencing.js?a=62" iconfont="true"></script>
<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../Scripts/Global.js" type="text/javascript"></script>
<script src="../Scripts/WindowLoad.js?t=1" type="text/javascript"></script>
<script src="../Scripts/jquery.url.js" type="text/javascript"></script>
<body>
<script type="text/javascript">
var dragImgUpload = null;
var dragImgUpload2 = null;
function blobToDataURL(blob, callback) {
let a = new FileReader();
a.onload = function (e) { callback(e.target.result); }
a.readAsDataURL(blob);
}
var imgulp = null;
var imgulp2 = null;
var imglist = null;
var code = "";
$(document).ready(function () {
ajaxInit(null);
Is_GYSDept();
code = $.url.param("code");
if (code != undefined || code != "") {
$("#txt_code").val(code);
GetGoodsImg();
}
$("#chk_all2").bind("click", function () {
if ($(this).is(":checked") == true) {
$("#img_ul2 input").prop("checked", true);
$("#img_ul2 input").each(function () {
var index = parseInt($(this).parents(".item").attr("item"));
var thisid = $(this).parents(".item").attr("id");
imgulp2.selectall(thisid, index,1);
});
}
else {
$("#img_ul2 input").prop("checked", false);
$("#img_ul2 input").each(function () {
var index = parseInt($(this).parents(".item").attr("item"));
var thisid = $(this).parents(".item").attr("id");
imgulp2.selectall(thisid, index,0);
});
}
});
$("#chk_all").bind("click", function () {
if ($(this).is(":checked") == true) {
$("#img_ul input").prop("checked", true);
$("#img_ul input").each(function () {
var index = parseInt($(this).parents(".item").attr("item"));
var thisid = $(this).parents(".item").attr("id");
imgulp.selectall(thisid, index,1);
});
}
else {
$("#img_ul input").prop("checked", false);
$("#img_ul input").each(function () {
var index = parseInt($(this).parents(".item").attr("item"));
var thisid = $(this).parents(".item").attr("id");
imgulp.selectall(thisid, index,0);
});
}
});
dragImgUpload = new DragImgUpload("#drop_area", {
callback: function (files) {
//回调函数,可以传递给后台等等
for (var i = 0; i < files.length; i++) {
var file = files[i];
// var img = window.URL.createObjectURL(file);
let reader = new FileReader() //新建一个FileReader对象
reader.readAsDataURL(file) //将读取的文件转换成base64格式
var imgbase64 = "";
reader.onload = function (e) {
//将img标签的src换成base64格式并显示出来
imgbase64 = e.target.result;
var param = new Object();
param.umgbase=imgbase64;
$.ajax({
type: "POST",
url: "cp_productservice.asmx/GetImg",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: 'json',
success: function (data, status) {
addimg2(data.d, 0);
}
});
}
}
}
});
dragImgUpload2 = new DragImgUpload("#drop_area2", {
callback: function (files) {
//回调函数,可以传递给后台等等
for (var i = 0; i < files.length; i++) {
var file = files[i];
let reader = new FileReader() //新建一个FileReader对象
reader.readAsDataURL(file) //将读取的文件转换成base64格式
var imgbase64 = "";
reader.onload = function (e) {
//将img标签的src换成base64格式并显示出来
imgbase64 = e.target.result;
var param = new Object();
param.umgbase=imgbase64;
$.ajax({
type: "POST",
url: "cp_productservice.asmx/GetImg",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: 'json',
success: function (data, status) {
addimg3(data.d, 0);
}
});
}
}
}
});
imgulp = new Jsequencing({
listid: "img_ul",//页面图片列表ID
thumbherf: "",//列表图片前缀
bigherf: "",//原图前缀[同列表图相同时,省略]
jsondata: true,
imgsrcarr: [//图片数据数组
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 1 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 2 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 3 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 4 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "", id: 5 }
],
});
imgulp2 = new Jsequencing({
listid: "img_ul2",//页面图片列表ID
thumbherf: "",//列表图片前缀
bigherf: "",//原图前缀[同列表图相同时,省略]
jsondata: true,
imgsrcarr: [//图片数据数组
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅0", id: 1 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅1", id: 2 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅2", id: 3 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅3", id: 4 },
//{ src: "http://files.winwoo.cn/images/item/2020/07/5856434_337679.jpg?x-oss-process=style/width250.jpg", title: "客厅4", id: 5 }
],
});
if (imglist != null) {
$(imglist).each(function () {
if (this.Is_master == 1)
addimg2(this.Img_url, this.Img_id);
else
addimg3(this.Img_url, this.Img_id);
});
}
});
var isgys = 0;
function Is_GYSDept() {
$.ajax({
url: "cp_productservice.asmx/Is_GYSDept",
// data: Sys.Serialization.JavaScriptSerializer.serialize(param),
async: false,
success: function (data) {
if (data.d > 0) {
isgys = 1;
$("#img_del,#img_del2").show();
}
}
});
}
function GetGoodsImg() {
var param = new Object();
param.code=code;
$.ajax({
url: "cp_productservice.asmx/GetListGoodsImg",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: "json",
async:false,
success: function (data) {
if (data.d != null) {
imglist = data.d;
}
}
});
}
function addimg2(ig, id) {
imgulp.addimgarr([
{ src: ig, title: "", id: id }
])
}
function addimg3(ig, id) {
imgulp2.addimgarr([
{ src: ig, title: "", id: id }
])
}
function GetSort() {
if ($("#txt_code").val() == "") {
alert("请填写货物编号");
return;
}
var arr = imgulp.getnewarr();
var simlist = new Array();
var sort = 1;
$(arr).each(function () {
var smd = new Object();
smd.Img_id = this.id;
smd.Img_url = this.src;
smd.Is_master = 1;
smd.Img_type = 1;
smd.Img_Sort = sort;
sort++;
smd.Item_bh = $("#txt_code").val();
Array.add(simlist, smd);
// alert(this.id);
});
var arr2 = imgulp2.getnewarr();
$(arr2).each(function () {
var smd = new Object();
smd.Img_type = 1;
smd.Img_id = this.id;
smd.Img_url = this.src;
smd.Is_master = 0;
smd.Img_Sort = sort;
sort++;
smd.Item_bh = $("#txt_code").val();
Array.add(simlist, smd);
// alert(this.id);
});
var param = new Object();
param.list = simlist;
param.list2=imglist;
$.ajax({
url: "cp_productservice.asmx/Save_GoodsImg",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: "json",
async:false,
success: function (data) {
alert("保存成功");
}
});
}
function addimg() {
imgulp.addimgarr([
{ src: 'a1.png?id=1' }
])
}
function deleteimg() {
if ($("#img_ul input:checked").length == 0) {
alert("请选择要删除的图片");
return;
}
if (window.confirm('确定要删除这些图片吗?') == false) return;
imgulp.datadel();
}
function deleteimg2() {
if ($("#img_ul2 input:checked").length == 0) {
alert("请选择要删除的图片");
return;
}
if (window.confirm('确定要删除这些图片吗?') == false) return;
imgulp2.datadel();
}
function SaveImgList2() {
if ($("#img_ul input:checked").length == 0) {
alert("请选择要下载的图片");
return;
}
var list = new Array();
$("#img_ul input:checked").each(function () {
var url = $(this).parent().find("img").attr("src");
if (url!= "") {
var md = new Object();
md.Img_url = url;
Array.add(list, md);
}
});
$("#a_tp2").hide();
var param = new Object();
param.list = list;
param.code = $("#txt_code").val();
$.ajax({
url: "cp_productservice.asmx/SaveImgRar",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: "json",
//async:false,
success: function (data) {
if (data.d != null) {
alert("打包完成,可以点击下载");
$("#a_tp2").show();
$("#a_tp2").attr("href", data.d);
// var params = { FilePath: data.d, FileName: "图片导出.rar" };
// Window.location ="../GlobalAshx/DownFile.ashx?" + jQuery.param(params);
}
}
});
}
function SaveImgList() {
if ($("#img_ul2 input:checked").length == 0) {
alert("请选择要下载的图片");
return;
}
var list = new Array();
$("#img_ul2 input:checked").each(function () {
var url = $(this).parent().find("img").attr("src");
if (url!= "") {
var md = new Object();
md.Img_url = url;
Array.add(list, md);
}
});
$("#a_tp").hide();
var param = new Object();
param.list = list;
param.code = $("#txt_code").val();
$.ajax({
url: "cp_productservice.asmx/SaveImgRar",
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
dataType: "json",
//async:false,
success: function (data) {
if (data.d != null) {
alert("打包完成,可以点击下载");
$("#a_tp").show();
$("#a_tp").attr("href", data.d);
// var params = { FilePath: data.d, FileName: "图片导出.rar" };
// Window.location ="../GlobalAshx/DownFile.ashx?" + jQuery.param(params);
}
}
});
}
</script>
<table width="100%" class="tableAll">
<tr>
<td class="f1" width="20%">货号:</td>
<td>
<input id="txt_code" type="text" />
</td>
</tr>
<tr>
<td class="f1" >主图:</td>
<td>
<h3>可将要上传的图片拖拽到下框中,图片可以拖动排序
<%-- <button onclick="addimg()" class="btn btn-primary radius">增加图片</button>--%>
</h3>
<div id="drop_area"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div class=""> <button onclick="deleteimg();" class="layui-btnblue" style="display:none" id="img_del">批量删除</button><input class="checkbox" name="" type="checkbox" value="全选" id="chk_all" />全选 <button onclick="deleteimg2();" class="layui-btnblue" style="display:none">批量删除</button> <button onclick="SaveImgList2();" class="layui-btnblue">打包图片</button> <a id="a_tp2" href="#" style="color:blue;cursor:pointer;display:none">点击下载图片</a>
</div>
<div class="cl imglist" id="img_ul"></div>
</td>
</tr>
<tr><td class="f1" >详情图:</td>
<td>
<h3>可将要上传的图片拖拽到下框中,图片可以拖动排序</h3>
<div id="drop_area2"></div>
</td>
</tr>
<tr>
<td colspan="2"> <div class=""><input class="checkbox" name="" type="checkbox" value="全选" id="chk_all2" />全选 <button onclick="deleteimg2();" class="layui-btnblue" id="img_del2">批量删除</button> <button onclick="SaveImgList();" class="layui-btnblue">打包图片</button> <a id="a_tp" href="#" style="color:blue;cursor:pointer;display:none">点击下载图片</a>
</div>
<div id="img_ul2" class="cl imglist" ></div>
</td>
</tr>
<tr><td align="center" colspan="2"> <button onclick="GetSort()" class="layui-btnblue">保存图片</button></td></tr>
</table>
</body>
</html>