292 lines
11 KiB
JavaScript
292 lines
11 KiB
JavaScript
/*d2/W8igdEoiDfKZHOKXModd9InlKX6nT5+qMGC8LXfw=*/
|
|
/*
|
|
* @Author: xiadling xiadling@yonyou.com
|
|
* @Date: 2023-06-14 11:11:19
|
|
* @LastEditors: xiadling xiadling@yonyou.com
|
|
* @LastEditTime: 2023-11-01 15:08:22
|
|
* @FilePath: \ncc2311\src\uapbd\material\material_base\card\event\imgEvent.js
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
*/
|
|
//主子表卡片
|
|
import { ajax, cardCache, toast, deepClone } from "nc-lightapp-front";
|
|
/**
|
|
*
|
|
* @param {*} info
|
|
* @returns
|
|
*/
|
|
export function onUploadImgChange (info ,status = true) {
|
|
let {fileList, file} = info;
|
|
this.maxLength = fileList.length;
|
|
setTimeout(() => {
|
|
let flag = false;
|
|
if (this.maxLength == fileList.length) {
|
|
fileList.forEach((file,index) => {
|
|
let {status} = file;
|
|
if (status == 'done') {
|
|
flag = true;
|
|
} else {
|
|
flag = false;
|
|
}
|
|
});
|
|
if (flag) {
|
|
if(!status) {
|
|
this.fileList = [];
|
|
}
|
|
if (fileList.length != this.fileList.length) {
|
|
let filelist = fileList.slice(-(fileList.length - this.fileList.length));
|
|
let { images, imagesrc, imgList, cleckImg, Larrowstate, Rarrowstate } = this.state;
|
|
filelist.forEach(file => {
|
|
let { response } = file;
|
|
if(response.data && response.data.length > 0){
|
|
// let img_url = response.data[0].previewUrl;
|
|
let { name, pk_doc, pk, suffix, fileSize, pk_billType } = response.data[0];
|
|
let img_url = getFileViewUrl(response.data[0].previewUrl);
|
|
let previewList = {fileType: "image",fullPath: "",isdoc: 'z', title: 'head_bg.png', url: '', suffix: 'png'};
|
|
previewList.title = name;
|
|
previewList.fullPath = img_url;
|
|
previewList.url = img_url;
|
|
previewList.size =fileSize;
|
|
previewList.suffix = suffix;
|
|
previewList.pk_doc = pk_doc;
|
|
previewList.pk = pk;
|
|
previewList.pk_billType = pk_billType;
|
|
if (!imagesrc.includes(img_url)) {
|
|
let repeatNameIndex = images.findIndex(item => item.name == name);
|
|
if (repeatNameIndex>-1) {
|
|
images.splice(repeatNameIndex, 1);
|
|
imagesrc.splice(repeatNameIndex, 1);
|
|
imgList.splice(repeatNameIndex, 1);
|
|
imgList.splice(repeatNameIndex, 1);
|
|
toast({
|
|
content: this.state.json["10140MPF-000061"] + name, color: 'warning'
|
|
})
|
|
}
|
|
images.push(response.data[0]);
|
|
imagesrc.push(img_url);
|
|
imgList.push(previewList);
|
|
cleckImg.push(false);
|
|
};
|
|
}else{
|
|
if (this.fileList.length < fileList.length) {
|
|
toast({color: "danger", content: response.error && response.error.message});
|
|
}
|
|
}
|
|
})
|
|
if (status) {
|
|
this.fileList = fileList;
|
|
} else {
|
|
this.fileList = [];
|
|
}
|
|
let curPageIndex = imagesrc.length -1;
|
|
for (let i = 0; i < cleckImg.length; i++) {
|
|
cleckImg[i] = false;
|
|
}
|
|
cleckImg[curPageIndex] = true;
|
|
let len = imagesrc.length;
|
|
let itemheight = 50; //32+4
|
|
if (len > 1) {
|
|
Larrowstate = true;
|
|
} else {
|
|
Larrowstate = false;
|
|
}
|
|
let transform = imagesrc.length > 4 ? `translatex(${-(len-4) *itemheight}px)` : transform; //超出四个了才出滚动动画
|
|
this.setState({isUploadImg : true, images, imagesrc, imgList, curPageIndex, cleckImg, Rarrowstate: false, transform, Larrowstate, }, () => {
|
|
if (this.state.defaultIndex == -1 && images.length>0) {
|
|
ajax({
|
|
url: this.urls.setDefaultImg,
|
|
async: false,
|
|
data: {
|
|
pk_maindoc: this.state.materialpfpk || '',
|
|
pk_doc : (images[0] && images[0].pk_doc) || ''
|
|
},
|
|
success:(res)=>{
|
|
let n = imagesrc.length - 4;
|
|
//一项的宽度
|
|
let itemheight = 46; //32+4
|
|
this.setState({
|
|
defaultIndex: 0
|
|
});
|
|
}
|
|
})
|
|
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, 500)
|
|
}
|
|
export function handleclickPrev() {
|
|
let { countnum, viewcount, curPageIndex, Rarrowstate, imagesrc } = this.state;
|
|
if (curPageIndex === imagesrc.length - viewcount) {
|
|
this.setState({
|
|
Rarrowstate: !Rarrowstate
|
|
});
|
|
}
|
|
if (curPageIndex != 0) {
|
|
getPage.call(this, curPageIndex - 1);
|
|
}
|
|
}
|
|
export function beforeUpload (file, fileList) {
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp' || file.type === 'image/jpg' || file.type === 'image/gif';
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isJPG) {
|
|
toast({ content: this.state.json['10140MPF-000028'], color: 'warning' });
|
|
fileList.splice(fileList.indexOf(file), 1)
|
|
} else if (!isLt2M) {
|
|
toast({ content: this.state.json['10140MPF-000029'], color: 'warning' });
|
|
fileList.splice(fileList.indexOf(file), 1)
|
|
}
|
|
return isJPG && isLt2M;
|
|
}
|
|
|
|
export function handleclickNext() {
|
|
let { imagesrc, viewcount, curPageIndex, Rarrowstate } = this.state;
|
|
if (curPageIndex < 0) {
|
|
curPageIndex = 0;
|
|
}
|
|
if (curPageIndex === 0) {
|
|
this.setState({
|
|
Larrowstate: true
|
|
});
|
|
}
|
|
if (curPageIndex != imagesrc.length - 1) {
|
|
getPage.call(this, curPageIndex + 1);
|
|
}
|
|
}
|
|
export function getPage(value) {
|
|
let { curPageIndex, viewcount, Larrowstate, Rarrowstate, imagesrc, cleckImg } = this.state;
|
|
let n = imagesrc.length - viewcount; //一项的宽度
|
|
let itemheight = 50; //32+4
|
|
let transform = imagesrc.length > 4 && value >= 4 ? `translatex(${-(value -4 + 1) *itemheight}px)` : transform; //超出四个了才出滚动动画
|
|
// value > n || value < 0 || this.setState({ transform });
|
|
for (let i = 0; i < cleckImg.length; i++) {
|
|
cleckImg[i] = false;
|
|
}
|
|
cleckImg[value] = true;
|
|
|
|
if (value == 0) {
|
|
Larrowstate = false;
|
|
Rarrowstate = true;
|
|
} else if (value == imagesrc.length - 1) {
|
|
Larrowstate = true;
|
|
Rarrowstate = false;
|
|
} else if (value < imagesrc.length - 1 && value > 0) {
|
|
Larrowstate = true;
|
|
Rarrowstate = true;
|
|
}
|
|
this.setState({
|
|
curPageIndex: value,
|
|
cleckImg,
|
|
Larrowstate,
|
|
Rarrowstate,
|
|
transform
|
|
});
|
|
}
|
|
/**
|
|
* 数据库删除图片
|
|
*/
|
|
export function deletePicture (urls, pictureIndex, callback) {
|
|
let { imagesrc, images, ifshow, width, transition, transform, Larrowstate, Rarrowstate, curPageIndex, cleckImg, imgList, defaultIndex } = this.state;
|
|
ajax({
|
|
url : urls.delImg,
|
|
data : {
|
|
billId : images[pictureIndex].billId,
|
|
fullPath: images[pictureIndex].fullPath,
|
|
pk_doc : images[pictureIndex].pk_doc
|
|
},
|
|
success:(res)=>{
|
|
let n = imagesrc.length - 4;
|
|
//一项的宽度
|
|
let itemheight = 50; //32+4
|
|
transform = `translatex(-${(n - 1) * itemheight}px)`;
|
|
n > 0 &&
|
|
pictureIndex == imagesrc.length - 1 &&
|
|
this.setState({
|
|
transform
|
|
});
|
|
|
|
imagesrc.splice(pictureIndex, 1);
|
|
images.splice(pictureIndex, 1);
|
|
imgList.splice(pictureIndex, 1);
|
|
cleckImg.splice(pictureIndex, 1)
|
|
for (let i = 0; i < images.length; i++) {
|
|
cleckImg[i] = false;
|
|
}
|
|
if (curPageIndex < 0) {
|
|
curPageIndex = 0;
|
|
};
|
|
if (pictureIndex == imagesrc.length) {
|
|
//删除的是最后一个
|
|
if (pictureIndex == curPageIndex) {
|
|
curPageIndex = pictureIndex - 1;
|
|
pictureIndex = pictureIndex - 1;
|
|
}
|
|
Rarrowstate = false;
|
|
}
|
|
cleckImg[pictureIndex] = true;
|
|
if (images.length == 1) {
|
|
Larrowstate = false;
|
|
}
|
|
if (pictureIndex < defaultIndex) {
|
|
defaultIndex = defaultIndex -1;
|
|
}
|
|
if (pictureIndex < curPageIndex) {
|
|
curPageIndex = curPageIndex -1;
|
|
}
|
|
if (images.length == 0) {
|
|
defaultIndex = -1;
|
|
}
|
|
this.setState({
|
|
imagesrc,
|
|
images,
|
|
curPageIndex,
|
|
cleckImg,
|
|
imgList,
|
|
isUploadImg : true,
|
|
Larrowstate,
|
|
Rarrowstate,
|
|
defaultIndex
|
|
});
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
* 设置封面
|
|
*/
|
|
export function SetDefaultPicture (urls, pk , index) {
|
|
let { imagesrc, images, ifshow, width, transition, transform, Larrowstate, Rarrowstate, curPageIndex, cleckImg, imgList } = this.state;
|
|
if (images[curPageIndex]&& images[curPageIndex].pk_doc) {
|
|
ajax({
|
|
url: urls.setDefaultImg,
|
|
data: {
|
|
pk_maindoc: pk || '',
|
|
pk_doc : images[curPageIndex].pk_doc || ''
|
|
},
|
|
success:(res)=>{
|
|
let n = imagesrc.length - 4;
|
|
//一项的宽度
|
|
let itemheight = 46; //32+4
|
|
this.setState({
|
|
defaultIndex: curPageIndex
|
|
});
|
|
}
|
|
})
|
|
}
|
|
}
|
|
/**
|
|
* 处理预览地址
|
|
* @param {} url
|
|
* @returns url 预览地址
|
|
*/
|
|
export function getFileViewUrl(url) {
|
|
if (url && url.indexOf("http") > -1) {
|
|
return url;
|
|
}
|
|
// return `http://10.16.225.5:5094/${url}`
|
|
return `${location.protocol}//${location.hostname}:${location.port}/${url}`
|
|
// return `${location.protocol}//${location.hostname}:${location.port ? location.port : location.protocol === 'https' ? '443' : '80'}/${url}`
|
|
}
|
|
|
|
|
|
/*d2/W8igdEoiDfKZHOKXModd9InlKX6nT5+qMGC8LXfw=*/ |