@aliretail/react-material-selector
Version:
970 lines (817 loc) • 29.1 kB
JavaScript
import _Table from "@alifd/next/es/table";
import _Pagination from "@alifd/next/es/pagination";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _Message from "@alifd/next/es/message";
import _Balloon from "@alifd/next/es/balloon";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useEffect, useLayoutEffect } from 'react';
import { materialsList, materialsIconList, materialsVideoList } from '../statedata/index';
import axios from 'axios';
import './index.scss';
var Tooltip = _Balloon.Tooltip;
export function Content(props) {
var _props$treeId = props.treeId,
treeId = _props$treeId === void 0 ? '' : _props$treeId,
setcontentPage = props.setcontentPage,
contentPage = props.contentPage,
inputValue = props.inputValue,
value = props.value,
tabTypeValue = props.tabTypeValue,
contentFlag = props.contentFlag,
setPicData = props.setPicData,
picData = props.picData,
totalData = props.totalData,
setTotalData = props.setTotalData,
newPage = props.newPage,
setNewPage = props.setNewPage;
var realValue = value || [];
var _useState = useState(realValue),
arrayList = _useState[0],
setArrayList = _useState[1];
var _useState2 = useState(0),
startPage = _useState2[0],
setStartPage = _useState2[1];
var newList = [];
var getFilterData = function getFilterData(data) {
if (arrayList.length === 0) {
return arrayList.concat(data);
}
var res = arrayList.filter(function (item) {
return item.id === data.id;
});
if (res.length > 0) {
return arrayList.filter(function (item) {
return item.id !== data.id;
});
}
return arrayList.concat(data);
};
var getFilterDataTwo = function getFilterDataTwo(data) {
newList[0] = data;
return newList;
}; // 获取像素的方法
var getUrlInfo = function getUrlInfo(url) {
var image = new Image();
var iw;
var ih;
return new Promise(function (resolve) {
image.onload = function () {
// 异步方法就没有获取到长宽高
iw = image.width; // 图片宽度
ih = image.height; // 图片高度
var flagOne = true;
var flagTwo = true;
if (props.imgWidth) {
if (iw != props.imgWidth) {
_Message.error("" + props.imgWidthErrorMessage);
flagOne = false;
}
}
if (props.imgHeight && flagOne) {
if (ih != props.imgHeight) {
_Message.error("" + props.imgHeightErrorMessage);
flagTwo = false;
}
}
if (!flagOne || !flagTwo) {
resolve(false);
}
resolve(true);
image = null;
};
image.src = url;
});
};
var _onClick = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
var arr, type, flag, res;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (data === void 0) {
data = {};
}
if (!props.imgSelectFormat) {
_context.next = 7;
break;
}
arr = data.filePath.split('.');
type = arr[arr.length - 1].toLowerCase();
if (!(props.imgSelectFormat.indexOf(type) === -1)) {
_context.next = 7;
break;
}
_Message.error(props.imgSelectFormatErrorMessage);
return _context.abrupt("return");
case 7:
if (!props.imgSelectSize) {
_context.next = 11;
break;
}
if (!(data.fileSize > props.imgSelectSize)) {
_context.next = 11;
break;
}
_Message.error(props.imgSelectSizeErrorMessage);
return _context.abrupt("return");
case 11:
_context.next = 13;
return getUrlInfo(data.filePath);
case 13:
flag = _context.sent;
if (!(flag == false)) {
_context.next = 16;
break;
}
return _context.abrupt("return");
case 16:
res = [];
if (props.multiSelect) {
res = getFilterData(data);
} else {
res = getFilterDataTwo(data);
}
setArrayList(res); // setArrayList(newArrayList)
// 将newArrayList返给父组件
props.getOnclickValue(res);
props.getPicData(res);
props.setResult(res);
case 22:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function onClick(_x) {
return _ref.apply(this, arguments);
};
}(); // 翻页进行的请求
var axiosPageData = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(Page) {
var page, res;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
delete axios.defaults.xsrfCookieName;
delete axios.defaults.xsrfHeaderName;
if (!(!tabTypeValue || !treeId || !Page)) {
_context2.next = 4;
break;
}
return _context2.abrupt("return");
case 4:
page = contentPage === 1 ? contentPage : Page;
_context2.next = 7;
return axios({
method: 'post',
// url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
url: props.apis.materialSearchURL,
data: {
dirId: treeId,
title: inputValue || '',
page: page,
apiContext: {
belongOrganizationId: '1'
},
type: tabTypeValue
}
});
case 7:
res = _context2.sent;
if (res && res.data && res.data.success && res.data.result) {
setPicData(res.data.result); // 飞鹤的是content，恒安的没有
setTotalData(res.data.total); // 恒安的是total
if (res.data.result.length > 0 || inputValue) {
contentFlag(true);
setcontentPage(0);
} else if (res.data.result.length == 0) {
contentFlag(false);
}
} else if (res.data.success == false) {
contentFlag(false);
_Message.error(res.data.message);
} else {
_Message.error('此素材尚未上传');
}
case 9:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function axiosPageData(_x2) {
return _ref2.apply(this, arguments);
};
}();
var onChange = function onChange(Page) {
setNewPage(Page);
setStartPage((Page - 1) * 10);
axiosPageData(Page);
};
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: "materialsTotal"
}, /*#__PURE__*/React.createElement("div", {
className: "materialsTotal contentHeight"
}, picData ? picData.map(function (data, index) {
var id = data.id,
filePath = data.filePath,
title = data.title,
thumbUrl = data.thumbUrl,
fileSize = data.fileSize;
return /*#__PURE__*/React.createElement("div", {
key: id,
id: id,
onClick: function onClick() {
return _onClick({
id: id,
title: title,
filePath: filePath,
thumbUrl: thumbUrl,
fileSize: fileSize
});
},
className: "materialsStyle"
}, /*#__PURE__*/React.createElement("div", {
className: "pictureStyle " + (arrayList.filter(function (item) {
return item.id === id;
}).length > 0 ? 'ImgBorder' : '')
}, /*#__PURE__*/React.createElement("img", {
src: filePath,
className: "materialsImgStyle"
})), /*#__PURE__*/React.createElement(Tooltip, {
trigger: /*#__PURE__*/React.createElement("div", {
className: "imgTitle tooltipBottom materialsNameStyle " + (arrayList.filter(function (item) {
return item.id === id;
}).length > 0 ? 'titleStyle' : '')
}, title),
align: "b",
style: {
fontSize: '12px'
}
}, title));
}) : null), /*#__PURE__*/React.createElement("div", {
className: "paginationsPosition picPaginationPosition"
}, /*#__PURE__*/React.createElement(_Pagination, {
current: Number(newPage),
shape: "arrow-only",
pageSizePosition: "end",
showJump: false,
onChange: onChange,
total: totalData // 得获取全部数据有多少才能实现分页效果,后端得返回来全部数据长度
,
pageSize: 10 // 每一页有多少条
}))));
} // icon素材图片内容区
export function IconContent(props) {
var _props$treeId2 = props.treeId,
treeId = _props$treeId2 === void 0 ? '' : _props$treeId2,
setcontentPage = props.setcontentPage,
contentPage = props.contentPage,
inputValue = props.inputValue,
value = props.value,
tabTypeValue = props.tabTypeValue,
contentFlag = props.contentFlag,
setPicData = props.setPicData,
picData = props.picData,
totalData = props.totalData,
setTotalData = props.setTotalData,
newPage = props.newPage,
setNewPage = props.setNewPage;
var realValue = value || [];
var _useState3 = useState(realValue),
arrayList = _useState3[0],
setArrayList = _useState3[1];
var newList = [];
var getFilterData = function getFilterData(data) {
if (arrayList.length === 0) {
return arrayList.concat(data);
}
var res = arrayList.filter(function (item) {
return item.id === data.id;
});
if (res.length > 0) {
return arrayList.filter(function (item) {
return item.id !== data.id;
});
}
return arrayList.concat(data);
};
var getFilterDataTwo = function getFilterDataTwo(data) {
newList[0] = data;
return newList;
};
var _onClick2 = function onClick(data) {
if (data === void 0) {
data = {};
}
// 选中的icon素材的格式--飞鹤
if (props.iconSelectFormat) {
var arr = data.filePath.split('.');
var type = arr[arr.length - 1];
if (props.iconSelectFormat.indexOf(type) === -1) {
_Message.error(props.iconSelectFormatErrorMessage);
return;
}
}
var res = [];
if (props.multiSelect) {
res = getFilterData(data);
} else {
res = getFilterDataTwo(data);
}
setArrayList(res); // setArrayList(newArrayList)
// 将newArrayList返给父组件
props.getOnclickValue(res);
props.getPicData(res);
props.setResult(res);
}; // 翻页进行的请求
var axiosPageData = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(Page) {
var page, res;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
delete axios.defaults.xsrfCookieName;
delete axios.defaults.xsrfHeaderName;
if (!(!tabTypeValue || !treeId || !Page)) {
_context3.next = 4;
break;
}
return _context3.abrupt("return");
case 4:
page = contentPage === 1 ? contentPage : Page;
_context3.next = 7;
return axios({
method: 'post',
// url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
url: props.apis.materialSearchURL,
data: {
dirId: treeId,
title: inputValue || '',
page: page,
apiContext: {
belongOrganizationId: '1'
},
type: tabTypeValue
}
});
case 7:
res = _context3.sent;
if (res && res.data && res.data.success && res.data.result) {
setPicData(res.data.result); // 飞鹤的是content，恒安的没有
setTotalData(res.data.total); // 恒安的是total
if (res.data.result.length > 0 || inputValue) {
contentFlag(true);
setcontentPage(0);
} else if (res.data.result.length == 0) {
contentFlag(false);
}
} else if (res.data.success == false) {
contentFlag(false);
_Message.error(res.data.message);
} else {
_Message.error('此素材尚未上传');
}
case 9:
case "end":
return _context3.stop();
}
}
}, _callee3);
}));
return function axiosPageData(_x3) {
return _ref3.apply(this, arguments);
};
}();
var onChange = function onChange(Page) {
setNewPage(Page);
axiosPageData(Page);
};
return /*#__PURE__*/React.createElement("div", {
className: "materialsTotal"
}, /*#__PURE__*/React.createElement("div", {
className: "materialsTotal IconHeight"
}, picData ? picData.map(function (data, index) {
var id = data.id,
filePath = data.filePath,
title = data.title,
thumbUrl = data.thumbUrl;
return /*#__PURE__*/React.createElement("div", {
key: id,
id: id,
onClick: function onClick() {
return _onClick2({
id: id,
title: title,
filePath: filePath,
thumbUrl: thumbUrl
});
},
className: "materials_Style"
}, /*#__PURE__*/React.createElement("div", {
className: "materials_Style_Box " + (arrayList.filter(function (item) {
return item.id === id;
}).length > 0 ? 'ImgBorder' : '')
}, /*#__PURE__*/React.createElement("img", {
src: filePath,
className: "materials_Style_Box_Icon"
})), /*#__PURE__*/React.createElement(Tooltip, {
trigger: /*#__PURE__*/React.createElement("div", {
className: "iconTitle tooltipBottom materialsNameStyle " + (arrayList.filter(function (item) {
return item.id === id;
}).length > 0 ? 'titleStyle' : '')
}, title),
align: "b",
style: {
fontSize: '12px'
}
}, title));
}) : null), /*#__PURE__*/React.createElement("div", {
className: "paginationsPosition iconPosition"
}, /*#__PURE__*/React.createElement(_Pagination, {
current: Number(newPage),
shape: "arrow-only",
pageSizePosition: "end",
showJump: false,
onChange: onChange,
total: totalData // 得获取全部数据有多少才能实现分页效果,后端得返回来全部数据长度
,
pageSize: 10 // 每一页有多少条我得定好,total和pageSize写好之后怎么会用Warning
})));
} // 视频图片内容区
export function VideoContent(props) {
var _props$treeId3 = props.treeId,
treeId = _props$treeId3 === void 0 ? '' : _props$treeId3,
setcontentPage = props.setcontentPage,
contentPage = props.contentPage,
inputValue = props.inputValue,
value = props.value,
tabTypeValue = props.tabTypeValue,
contentFlag = props.contentFlag,
setPicData = props.setPicData,
picData = props.picData,
totalData = props.totalData,
setTotalData = props.setTotalData,
newPage = props.newPage,
setNewPage = props.setNewPage;
var realValue = value || [];
var _useState4 = useState(realValue),
arrayList = _useState4[0],
setArrayList = _useState4[1];
var newList = [];
var getFilterData = function getFilterData(data) {
if (arrayList.length === 0) {
return arrayList.concat(data);
}
var res = arrayList.filter(function (item) {
return item.id === data.id;
});
if (res.length > 0) {
return arrayList.filter(function (item) {
return item.id !== data.id;
});
}
return arrayList.concat(data);
};
var getFilterDataTwo = function getFilterDataTwo(data) {
newList[0] = data;
return newList;
}; // 通过地址获取文件大小
var getVideoSize = function getVideoSize(url) {
var audioElement = new Audio(url);
return new Promise(function (resolve) {
audioElement.addEventListener('loadedmetadata', function (_event) {
var _audioElement = audioElement,
duration = _audioElement.duration;
if (props.videoSelectDuration) {
if (duration > props.videoSelectDuration) {
_Message.error(props.videoSelectDurationErrorMessage); // 商品
resolve(false);
}
resolve(true);
} else {
resolve(true);
}
audioElement = null;
});
});
};
var _onClick3 = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(data) {
var arr, type, canUpload, res;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
if (data === void 0) {
data = {};
}
if (!props.videoSelectFormat) {
_context4.next = 7;
break;
}
arr = data.filePath.split('.');
type = arr[arr.length - 1];
if (!(props.videoSelectFormat.indexOf(type) === -1)) {
_context4.next = 7;
break;
}
_Message.error(props.videoSelectFormatErrorMessage);
return _context4.abrupt("return");
case 7:
_context4.next = 9;
return getVideoSize(data.filePath);
case 9:
canUpload = _context4.sent;
if (canUpload) {
_context4.next = 12;
break;
}
return _context4.abrupt("return");
case 12:
if (!props.videoSelectSize) {
_context4.next = 16;
break;
}
if (!(data.fileSize > props.videoSelectSize)) {
_context4.next = 16;
break;
}
_Message.error(props.videoSelectErrorMessage);
return _context4.abrupt("return");
case 16:
res = [];
if (props.multiSelect) {
res = getFilterData(data);
} else {
res = getFilterDataTwo(data);
}
setArrayList(res); // setArrayList(newArrayList)
// 将newArrayList返给父组件
props.getOnclickValue(res);
props.getPicData(res);
props.setResult(res);
case 22:
case "end":
return _context4.stop();
}
}
}, _callee4);
}));
return function onClick(_x4) {
return _ref4.apply(this, arguments);
};
}(); // 翻页进行的请求
var axiosPageData = /*#__PURE__*/function () {
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(Page) {
var page, res;
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
delete axios.defaults.xsrfCookieName;
delete axios.defaults.xsrfHeaderName;
if (!(!tabTypeValue || !treeId || !Page)) {
_context5.next = 4;
break;
}
return _context5.abrupt("return");
case 4:
page = contentPage === 1 ? contentPage : Page;
_context5.next = 7;
return axios({
method: 'post',
// url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
url: props.apis.materialSearchURL,
data: {
dirId: treeId,
title: inputValue || '',
page: page,
apiContext: {
belongOrganizationId: '1'
},
type: tabTypeValue
}
});
case 7:
res = _context5.sent;
if (res && res.data && res.data.success && res.data.result) {
setPicData(res.data.result); // 飞鹤的是content，恒安的没有
setTotalData(res.data.total); // 恒安的是total
if (res.data.result.length > 0 || inputValue) {
contentFlag(true);
setcontentPage(0);
} else if (res.data.result.length == 0) {
contentFlag(false);
}
} else if (res.data.success == false) {
contentFlag(false);
_Message.error(res.data.message);
} else {
_Message.error('此素材尚未上传');
}
case 9:
case "end":
return _context5.stop();
}
}
}, _callee5);
}));
return function axiosPageData(_x5) {
return _ref5.apply(this, arguments);
};
}();
var onChange = function onChange(Page) {
setNewPage(Page);
axiosPageData(Page);
};
return /*#__PURE__*/React.createElement("div", {
className: "materialsTotal"
}, /*#__PURE__*/React.createElement("div", {
className: "materialsTotal videoHeight"
}, picData ? picData.map(function (data, index) {
var id = data.id,
filePath = data.filePath,
title = data.title,
thumbUrl = data.thumbUrl,
fileSize = data.fileSize;
return /*#__PURE__*/React.createElement("div", {
key: id,
id: id,
onClick: function onClick() {
return _onClick3({
id: id,
title: title,
filePath: filePath,
thumbUrl: thumbUrl,
fileSize: fileSize
});
},
className: "videoMaterials_Style"
}, /*#__PURE__*/React.createElement("div", {
className: "videoMaterials_Style_Box " + (arrayList.filter(function (item) {
return item.id === id;
}).length > 0 ? 'ImgBorder' : '')
}, /*#__PURE__*/React.createElement("img", {
className: "Materials_Style_Box_Video",
src: thumbUrl
})), /*#__PURE__*/React.createElement(Tooltip, {
trigger: /*#__PURE__*/React.createElement("div", {
className: "videoTitle tooltipBottom materialsNameStyle " + (arrayList.filter(function (item) {
return item.id === id;
}).length > 0 ? 'titleStyle' : '')
}, title),
align: "b",
style: {
fontSize: '12px'
}
}, title));
}) : null), /*#__PURE__*/React.createElement("div", {
className: "paginationsPosition"
}, /*#__PURE__*/React.createElement(_Pagination, {
current: Number(newPage),
shape: "arrow-only",
pageSizePosition: "end",
showJump: false,
onChange: onChange,
total: totalData // 得获取全部数据有多少才能实现分页效果,后端得返回来全部数据长度
,
pageSize: 10 // 每一页有多少条我得定好
})));
}
export var Others = function Others(props) {
var _props$treeId4 = props.treeId,
treeId = _props$treeId4 === void 0 ? '' : _props$treeId4,
setcontentPage = props.setcontentPage,
contentPage = props.contentPage,
inputValue = props.inputValue,
value = props.value,
tabTypeValue = props.tabTypeValue,
contentFlag = props.contentFlag,
setPicData = props.setPicData,
picData = props.picData,
totalData = props.totalData,
setTotalData = props.setTotalData,
newPage = props.newPage,
setNewPage = props.setNewPage;
var realValue = value || [];
var _useState5 = useState(realValue),
arrayList = _useState5[0],
setArrayList = _useState5[1];
var _useState6 = useState(0),
startPage = _useState6[0],
setStartPage = _useState6[1]; // 翻页进行的请求
var axiosPageData = /*#__PURE__*/function () {
var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(Page) {
var page, res;
return _regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
delete axios.defaults.xsrfCookieName;
delete axios.defaults.xsrfHeaderName;
if (!(!tabTypeValue || !treeId || !Page)) {
_context6.next = 4;
break;
}
return _context6.abrupt("return");
case 4:
page = contentPage === 1 ? contentPage : Page;
_context6.next = 7;
return axios({
method: 'post',
// url: 'http://tny.dev.retailcloud.zacz.cn/crm/dubbo/api/material/search',
url: props.apis.materialSearchURL,
data: {
dirId: treeId,
title: inputValue || '',
page: page,
apiContext: {
belongOrganizationId: '1'
},
type: tabTypeValue
}
});
case 7:
res = _context6.sent;
if (res && res.data && res.data.success && res.data.result) {
setPicData(res.data.result); // 飞鹤的是content，恒安的没有
setTotalData(res.data.total); // 恒安的是total
if (res.data.result.length > 0 || inputValue) {
contentFlag(true);
setcontentPage(0);
} else if (res.data.result.length == 0) {
contentFlag(false);
}
} else if (res.data.success == false) {
contentFlag(false);
_Message.error(res.data.message);
} else {
_Message.error('此素材尚未上传');
}
case 9:
case "end":
return _context6.stop();
}
}
}, _callee6);
}));
return function axiosPageData(_x6) {
return _ref6.apply(this, arguments);
};
}();
var onChange = function onChange(Page) {
setNewPage(Page);
setStartPage((Page - 1) * 10);
axiosPageData(Page);
};
var tableSelectionChange = function tableSelectionChange(keyArr, recrodArr) {
props.getPicData(recrodArr);
props.setResult(recrodArr);
};
return /*#__PURE__*/React.createElement("div", {
className: "others materialsTotal"
}, /*#__PURE__*/React.createElement(_Table, {
dataSource: picData,
hasBorder: false,
rowSelection: {
onChange: tableSelectionChange
},
primaryKey: "id"
}, /*#__PURE__*/React.createElement(_Table.Column, {
title: "\u6587\u4EF6\u540D\u79F0",
dataIndex: "title"
}), /*#__PURE__*/React.createElement(_Table.Column, {
title: "\u6587\u4EF6\u7C7B\u578B",
dataIndex: "filePath",
cell: function cell(value, index, row) {
var valueIndex = value.lastIndexOf('.');
var kind = value.slice(valueIndex);
return /*#__PURE__*/React.createElement("div", null, kind);
}
}), /*#__PURE__*/React.createElement(_Table.Column, {
title: "\u6DFB\u52A0\u65F6\u95F4",
dataIndex: "gmtCreate",
cell: function cell(value, index, row) {
var json_date = new Date(value).toJSON();
var time = new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
return /*#__PURE__*/React.createElement("div", null, time);
}
})), /*#__PURE__*/React.createElement("div", {
className: "paginationsPosition"
}, /*#__PURE__*/React.createElement(_Pagination, {
current: Number(newPage),
shape: "arrow-only",
pageSizePosition: "end",
showJump: false,
onChange: onChange,
total: totalData // 得获取全部数据有多少才能实现分页效果,后端得返回来全部数据长度
,
pageSize: 10 // 每一页有多少条我得定好
})));
};