Skip to content

X
xiaomai-cloud-class-web
Commit 57f64f2f by guomingpang
Options

Merge branch 'dev' of… 

Merge branch 'dev' of ssh://xmgit.ixm5.cn:10022/xiaomai-cloud-class/xiaomai-cloud-class-web into dev
parents 5d32c483 5bc81318
Showing with 1410 additions and 1033 deletions
package.json
......@@ -80,6 +80,7 @@
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-async-component": "^2.0.0",
"react-cropper": "^2.1.8",
"react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1",
"react-infinite-scroller": "^1.2.4",
......
src/components/ImgClipModal.jsx 0 → 100644
import React from 'react';
import { Modal, Button } from 'antd';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import './ImgClipModal.less';
import { isNull } from 'underscore';
class ImgClipModal extends React.Component {
constructor(props) {
super(props);
this.state = {
hasImgReady: false, // 图片是否上传成功
cropperInstace:null,
}
}
render() {
const {
imgUrl,
title = "设置图片",
modalWidth=1080,
visible,
clipContentWidth='500px',
clipContentHeight='430px',
aspectRatio=16/9,
cropBoxWidth=500,
cropBoxHeight=282,
previewBoxWidth='500px',
previewBoxHeight='282px',
onConfirm,
onClose,
} = this.props;
const { hasImgReady,cropperInstace} = this.state;
return (
<Modal
className="img-clip-modal"
title={title}
width={modalWidth}
visible={visible}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => {
onClose();
}}
zIndex={10001}
footer={[
<Button
key="back"
onClick={() => {
onClose();
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
disabled={!hasImgReady}
onClick={() => {
const cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL();
const cutImageBlob = window.convertBase64ToBlob(cutImg);
onConfirm(cutImageBlob);
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
style={{
width:clipContentWidth,
height:clipContentHeight,
marginBottom: 0,
}}
>
<Cropper
style={{ height:clipContentHeight, width:clipContentWidth}}
className="cropper__box"
zoomTo={2}
aspectRatio={aspectRatio}
preview=".preview-url-box"
src={imgUrl}
viewMode={1}
guides={true}
background={false}
responsive={true}
autoCropArea={1}
checkOrientation={false}
cropBoxResizable={false}
center={true}
// minCropBoxWidth={cropBoxWidth}
// minCropBoxHeight={cropBoxHeight}
cropBoxMovable={false}
dragMode='move'
onInitialized={(instance) => {
this.setState({
cropperInstace:instance
})
}}
ready={()=>{
this.setState({
hasImgReady:true
})
this.state.cropperInstace.setCropBoxData({width:Number(cropBoxWidth),height:Number(cropBoxHeight),top:(215 - cropBoxHeight/2)});
console.log("height++++",this.state.cropperInstace.getImageData().height);
console.log("width++++",this.state.cropperInstace.getImageData().width);
const ratio = (this.state.cropperInstace.getImageData().width/2)/500;
console.log("ratio++++",ratio);
this.state.cropperInstace.setCanvasData({width:500});
const that = this;
// const containerData = this.state.cropperInstace.getContainerData();
// // Zoom to 50% from the center of the container.
// this.state.cropperInstace.zoomTo(.5, {
// x: containerData.width / 2,
// y: containerData.height / 2,
// });
document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
that.state.cropperInstace.rotate(90)
});
}}
/>
</div>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
<div id="preview-url-box" style={{width:previewBoxWidth,height:previewBoxHeight}} className="preview-url-box">
</div>
<div className="tip-box">
<div className="tip">温馨提示</div>
<div className="tip">①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div>
</div>
</div>
</Modal>
)
}
}
export default ImgClipModal;
\ No newline at end of file
src/components/ImgClipModal.less 0 → 100644
.img-clip-modal{
.preview-url-box{
overflow: hidden;
}
}
src/core/downloads.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-07-02 17:15:50
* @LastEditTime: 2021-07-02 17:23:47
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /xiaomai-cloud-class-web/src/core/downLoad.js
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.download = factory();
}
})(this, function () {
return function download(data, strFileName, strMimeType) {
var self = window, // this script is only for browsers anyway...
defaultMime = 'application/octet-stream', // this default mime also triggers iframe downloads
mimeType = strMimeType || defaultMime,
payload = data,
url = !strFileName && !strMimeType && payload,
anchor = document.createElement('a'),
toString = function (a) {
return String(a);
},
myBlob = self.Blob || self.MozBlob || self.WebKitBlob || toString,
fileName = strFileName || 'download',
blob,
reader;
myBlob = myBlob.call ? myBlob.bind(self) : Blob;
if (String(this) === 'true') {
//reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
payload = [payload, mimeType];
mimeType = payload[0];
payload = payload[1];
}
if (url && url.length < 2048) {
// if no filename and no mime, assume a url was passed as the only argument
fileName = url.split('/').pop().split('?')[0];
anchor.href = url; // assign href prop to temp anchor
if (anchor.href.indexOf(url) !== -1) {
// if the browser determines that it's a potentially valid url path:
var ajax = new XMLHttpRequest();
ajax.open('GET', url, true);
ajax.responseType = 'blob';
ajax.onload = function (e) {
download(e.target.response, fileName, defaultMime);
};
setTimeout(function () {
ajax.send();
}, 0); // allows setting custom ajax headers using the return:
return ajax;
} // end if valid url?
} // end if url?
//go ahead and download dataURLs right away
if (/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)) {
if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
payload = dataUrlToBlob(payload);
mimeType = payload.type || defaultMime;
} else {
return navigator.msSaveBlob // IE10 can't do a[download], only Blobs:
? navigator.msSaveBlob(dataUrlToBlob(payload), fileName)
: saver(payload); // everyone else can save dataURLs un-processed
}
} //end if dataURL passed?
blob = payload instanceof myBlob ? payload : new myBlob([payload], { type: mimeType });
function dataUrlToBlob(strUrl) {
var parts = strUrl.split(/[:;,]/),
type = parts[1],
decoder = parts[2] == 'base64' ? atob : decodeURIComponent,
binData = decoder(parts.pop()),
mx = binData.length,
i = 0,
uiArr = new Uint8Array(mx);
for (i; i < mx; ++i) uiArr[i] = binData.charCodeAt(i);
return new myBlob([uiArr], { type: type });
}
function saver(url, winMode) {
if ('download' in anchor) {
//html5 A[download]
anchor.href = url;
anchor.setAttribute('download', fileName);
anchor.className = 'download-js-link';
anchor.innerHTML = 'downloading...';
anchor.style.display = 'none';
document.body.appendChild(anchor);
setTimeout(function () {
anchor.click();
document.body.removeChild(anchor);
if (winMode === true) {
setTimeout(function () {
self.URL.revokeObjectURL(anchor.href);
}, 250);
}
}, 66);
return true;
}
// handle non-a[download] safari as best we can:
if (/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
url = url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
if (!window.open(url)) {
// popup blocked, offer direct download:
if (confirm('Displaying New Document\n\nUse Save As... to download, then click back to return to this page.')) {
location.href = url;
}
}
return true;
}
//do iframe dataURL download (old ch+FF):
var f = document.createElement('iframe');
document.body.appendChild(f);
if (!winMode) {
// force a mime that will download:
url = 'data:' + url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
}
f.src = url;
setTimeout(function () {
document.body.removeChild(f);
}, 333);
} //end saver
if (navigator.msSaveBlob) {
// IE10+ : (has Blob, but not a[download] or URL)
return navigator.msSaveBlob(blob, fileName);
}
if (self.URL) {
// simple fast and modern way using Blob and URL:
saver(self.URL.createObjectURL(blob), true);
} else {
// handle non-Blob()+non-URL browsers:
if (typeof blob === 'string' || blob.constructor === toString) {
try {
return saver('data:' + mimeType + ';base64,' + self.btoa(blob));
} catch (y) {
return saver('data:' + mimeType + ',' + encodeURIComponent(blob));
}
}
// Blob but not URL support:
reader = new FileReader();
reader.onload = function (e) {
saver(this.result);
};
reader.readAsDataURL(blob);
}
return true;
}; /* end download() */
});
\ No newline at end of file
src/core/page.less
......@@ -12,6 +12,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100%;
overflow: hidden;
.page {
position: fixed;
top: 60px;
......@@ -21,6 +22,7 @@
z-index: 102;
overflow: auto;
margin: 0 16px;
.box {
&:first-child {
margin-bottom: 8px;
......
src/index.html
<!--
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-21 15:12:28
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-04 09:55:24
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......
src/index.tsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-04-27 20:35:34
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-28 16:17:53
* @LastEditTime: 2021-07-04 09:55:15
* @Description:
*/
......@@ -18,6 +18,7 @@ import 'antd/dist/antd.less';
import 'video-react/dist/video-react.css';
import '@/common/less/index.less';
import '@/core/function';
// import '@/core/downloads';
import '@/core/xmTD';
import User from '@/common/js/user';
import Service from "@/common/js/service";
......
src/modules/college-manage/CollegeInfoPage.jsx
......@@ -6,6 +6,7 @@ import Upload from '@/core/upload';
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import Bus from '@/core/tbus';
import ImgClipModal from '@/components/ImgClipModal'
import "./CollegeInfoPage.less";
let cutFlag = false;
class CollegeInfoPage extends React.Component {
......@@ -17,6 +18,7 @@ class CollegeInfoPage extends React.Component {
logo:'',
showSelectFileModal:false,
cutImageBlob: null,
imageFile: null, // 需要被截取的图片
}
}
componentWillMount() {
......@@ -51,84 +53,88 @@ class CollegeInfoPage extends React.Component {
})
}
handleSelectCover = (file)=> {
this.uploadImage(file);
// this.uploadImage(file);
this.setState({
visible: true,
imageFile:file
});
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 128],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
// uploadImage = (imageFile) => {
// const { folderName } = imageFile;
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector("#headPicModal");
// const options = {
// size: [500, 128],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: "transparent",
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
// console.log(this.scale(), 'scale')
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
}, 500)
// }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error("图片上传失败了，请重新上传");
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip("#headPicModal", options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
}, 200);
}
);
};
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -150,16 +156,17 @@ class CollegeInfoPage extends React.Component {
logo:coverClicpPath
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(",")[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: "image/png" });
// };
updateInfo=()=>{
const { storeName, logo } = this.state;
if(!storeName){
......@@ -175,6 +182,7 @@ class CollegeInfoPage extends React.Component {
User.setStoreName(storeName);
Bus.trigger('storeNameChange',storeName);
message.success('保存成功');
Bus.trigger("updateCollegeInfo")
});
}
render() {
......@@ -185,6 +193,7 @@ class CollegeInfoPage extends React.Component {
hasImgReady,
logo,
cutImageBlob,
imageFile
} = this.state;
return (
<div className="page college-info-page">
......@@ -242,7 +251,7 @@ class CollegeInfoPage extends React.Component {
onSelect={this.handleSelectCover}
/>
}
<Modal
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -300,7 +309,10 @@ class CollegeInfoPage extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='125/32' cropBoxHeight='128' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
<div><Button type="primary" onClick={this.updateInfo} htmlType="submit" className="submit-btn">更新信息</Button></div>
</div>
......
src/modules/course-manage/components/AddLiveBasic.less
......@@ -82,3 +82,11 @@
width: 500px;
height: 300px;
}
.preview-url-box{
overflow: hidden;
// img{
// width:500px !important;
// height:282px !important;
// transform:none !important;
// }
}
\ No newline at end of file
src/modules/course-manage/components/AddLiveClass.jsx
......@@ -175,7 +175,10 @@ class AddLiveClass extends React.Component {
<Tooltip
overlayStyle={{maxWidth: 300, zIndex: '9999'}}
title={<div style={{width: '266px'}}>支持按上课日期批量创建直播课，创建后按“课程名称_日期”命名，例如：<br/>张三的语文课_9月18日<br/>张三的语文课_9月19日......</div>}>
<span className="iconfont">&#xe61d;</span>
<span
style={{ color: "rgba(191, 191, 191, 1)",fontWeight: 400 }}
className="iconfont"
>&#xe61d;</span>
</Tooltip>：
</span>
<div>
......
src/modules/course-manage/components/LiveCourseList.jsx
......@@ -175,7 +175,7 @@ class LiveCourseList extends React.Component {
</span>
</div>
<div className='teacher-assistant'>
{record.teacherName?.length > 4 ? (
{record.teacherName && record.teacherName.length > 4 ? (
<Tooltip title={record.teacherName}>
<span className='teacher'>讲师：{record.teacherName}</span>
</Tooltip>
......@@ -303,6 +303,7 @@ class LiveCourseList extends React.Component {
dataIndex: 'created',
sorter: true,
render: (val, item) => {
// -29000：与后端约定 在初始化学院时，创建时间（标志位-29000）默认展示为'-'
return <span>{val === -29000 ? '-' : formatDate('YYYY-MM-DD H:i', val)}</span>;
},
},
......@@ -449,7 +450,7 @@ class LiveCourseList extends React.Component {
</span>
</div>
<div className='teacher-assistant'>
{record.teacherName.length > 4 ? (
{record.teacherName && record.teacherName.length > 4 ? (
<Tooltip title={record.teacherName}>
<span className='teacher'>讲师：{record.teacherName}</span>
</Tooltip>
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-16 18:16:14
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-01 14:58:15
* @Description: 图文课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -25,6 +25,7 @@ import { randomString } from '@/domains/basic-domain/utils';
import User from '@/common/js/user';
import _ from 'underscore';
import Upload from '@/core/upload';
import ImgClipModal from '@/components/ImgClipModal'
import './AddGraphicsCourse.less';
const EDIT_BOX_KEY = Math.random();
......@@ -279,81 +280,85 @@ class AddGraphicsCourse extends React.Component {
};
handleSelectCover = (file) => {
this.uploadCoverImage(file);
};
//上传图片
uploadCoverImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector('#headPicModal');
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: 'transparent',
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
const _dataUrl = this.clip();
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale(),
});
}
}, 500);
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl,
});
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error('图片上传失败了，请重新上传');
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip();
self.setState({
dataUrl: _dataUrl,
hasImgReady: true,
});
}, 100);
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
if (!this.state.photoclip) {
const _photoclip = new PhotoClip('#headPicModal', options);
_photoclip.load(imgUrl);
// this.uploadCoverImage(file);
this.setState({
photoclip: _photoclip,
visible: true,
imageFile:file
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
}, 200);
}
);
};
//上传图片
// uploadCoverImage = (imageFile) => {
// const { folderName } = imageFile;
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'));
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector('#headPicModal');
// const options = {
// size: [500, 282],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: 'transparent',
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
// const _dataUrl = this.clip();
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale(),
// });
// }
// }, 500);
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl,
// });
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error('图片上传失败了，请重新上传');
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip();
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true,
// });
// }, 100);
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip('#headPicModal', options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
......@@ -378,15 +383,15 @@ class AddGraphicsCourse extends React.Component {
};
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(',')[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: 'image/png' });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(',')[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: 'image/png' });
// };
// 保存
handleSubmit = () => {
......@@ -619,7 +624,7 @@ class AddGraphicsCourse extends React.Component {
onSelect={this.handleSelectCover}
/>
)}
<Modal
{/* <Modal
title='设置图片'
width={1080}
visible={visible}
......@@ -652,6 +657,7 @@ class AddGraphicsCourse extends React.Component {
</Button>,
]}>
<div className='clip-box'>
<div
id='headPicModal'
ref='headPicModal'
......@@ -673,7 +679,10 @@ class AddGraphicsCourse extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{this.state.previewGraphicsModal}
</div>
);
......
src/modules/course-manage/modal/ManageCoursewareModal.jsx
......@@ -171,8 +171,6 @@ class ManageCoursewareModal extends React.Component {
const that = this;
switch (fileType) {
case 'PDF':
// window.open(item.srcDocUrl, "_blank");
// break;
case 'Excel':
case 'EXCEL':
case 'PPT':
......@@ -181,27 +179,6 @@ class ManageCoursewareModal extends React.Component {
case 'WORD':
case 'DOCX':
case 'DOC':
// let size = parseFloat(item.fileSize.replace(/M$|KB$/g, ''));
// if (item.fileSize.includes('KB')) {
// size = 0;
// }
// if (((fileType == 'word' || fileType == 'PPT') && size > 10) || ((fileType == 'Excel') && size > 5)) {
// Modal.confirm({
// title: '抱歉，不能在线预览',
// content: '由于文件较大，不支持在线预览，请下载后再查看',
// icon: <QuestionCircleOutlined />,
// okText:"下载",
// onOk:() => {
// const a = document.createElement('a');
// a.href = item.srcDocUrl;
// a.click();
// }
// });
// } else {
// const scanUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(item.srcDocUrl);
// window.open(scanUrl, "_blank");
// }
if (!item.fileVersionId) {
this.setState(
{
......
src/modules/course-manage/modal/ShareLiveModal.jsx
......@@ -109,13 +109,8 @@ class ShareLiveModal extends React.Component {
switch (type) {
case 'liveClass': // 直播课
if (courseMediaVOS && courseMediaVOS.length > 0) {
data.courseMediaVOS.map((item, index) => {
if (item.contentType === 'COVER') {
coverImgSrc = item.mediaUrl;
} else {
coverImgSrc = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
}
});
const coverItem = courseMediaVOS.filter((item) => item.contentType === 'COVER');
coverImgSrc = coverItem.length === 0 ? 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png' : coverItem[0].mediaUrl;
} else {
coverImgSrc = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
}
......
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: yuananting
* @LastEditTime: 2021-06-07 15:06:26
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-01 15:05:12
* @Description: 线下课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -38,6 +38,7 @@ import moment from 'moment';
import Upload from '@/core/upload';
import GraphicsEditor from '../components/GraphicsEditor';
import MultipleDatePicker from '@/components/MultipleDatePicker';
import ImgClipModal from '@/components/ImgClipModal'
import './AddOfflineCourse.less';
const { Option } = Select;
......@@ -355,83 +356,87 @@ class AddOfflineCourse extends React.Component {
}
handleSelectCover = (file)=> {
this.uploadCoverImage(file);
// this.uploadCoverImage(file);
this.setState({
visible: true,
imageFile:file
});
}
//上传图片
uploadCoverImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
// uploadCoverImage = (imageFile) => {
// const { folderName } = imageFile;
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector("#headPicModal");
// const options = {
// size: [500, 282],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: "transparent",
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
}, 500)
// }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error("图片上传失败了，请重新上传");
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip("#headPicModal", options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
}, 200);
}
);
};
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -455,15 +460,15 @@ class AddOfflineCourse extends React.Component {
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(",")[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: "image/png" });
// };
preSubmit = () => {
//过期判断
......@@ -786,6 +791,7 @@ class AddOfflineCourse extends React.Component {
quota,
offlinePlace,
isEditDisablie,
imageFile,
} = this.state;
const isDefaultCover = coverUrl === defaultCoverUrl;
return (
......@@ -1301,7 +1307,7 @@ class AddOfflineCourse extends React.Component {
onSelect={this.handleSelectCover}
/>
}
<Modal
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -1359,7 +1365,10 @@ class AddOfflineCourse extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{ this.state.previewOfflineModal }
</div>
)
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: wufan
* @LastEditTime: 2021-05-30 20:35:49
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-01 13:59:16
* @Description: 视频课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -11,7 +11,6 @@ import React from 'react'
import { Button, Input, Radio, message, Modal, Cascader } from 'antd'
import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
import { ImgCutModalNew } from '@/components'
import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs'
import moment from 'moment'
......@@ -26,8 +25,8 @@ import User from '@/common/js/user'
import _ from 'underscore'
import Upload from '@/core/upload'
import { randomString } from '@/domains/basic-domain/utils'
import ImgClipModal from '@/components/ImgClipModal'
import $ from 'jquery'
// import PhotoClip from 'photoclip';
import './AddVideoCourse.less'
const EDIT_BOX_KEY = Math.random()
......@@ -428,80 +427,84 @@ class AddVideoCourse extends React.Component {
})
}
handleSelectCover = (file) => {
this.uploadImage(file)
// this.uploadImage(file)
this.setState({
visible: true,
imageFile:file
});
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'))
const self = this
this.setState(
{
visible: true
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector('#headPicModal')
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: 'transparent'
},
done: function (dataUrl) {
clearTimeout(self.timer)
self.timer = setTimeout(() => {
if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl)
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl)
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false
}, 2000)
},
fail: (failInfo) => {
message.error('图片上传失败了，请重新上传')
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
}
}
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip('#headPicModal', options)
_photoclip.load(imgUrl)
this.setState({
photoclip: _photoclip
})
} else {
this.state.photoclip.clear()
this.state.photoclip.load(imgUrl)
}
}, 200)
}
)
}
// uploadImage = (imageFile) => {
// const { folderName } = imageFile
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'))
// const self = this
// this.setState(
// {
// visible: true
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector('#headPicModal')
// const options = {
// size: [500, 282],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: 'transparent'
// },
// done: function (dataUrl) {
// clearTimeout(self.timer)
// self.timer = setTimeout(() => {
// if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl)
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
// }, 500)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl)
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false
// }, 2000)
// },
// fail: (failInfo) => {
// message.error('图片上传失败了，请重新上传')
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
// }
// }
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip('#headPicModal', options)
// _photoclip.load(imgUrl)
// this.setState({
// photoclip: _photoclip
// })
// } else {
// this.state.photoclip.clear()
// this.state.photoclip.load(imgUrl)
// }
// }, 200)
// }
// )
// }
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -524,16 +527,16 @@ class AddVideoCourse extends React.Component {
coverId: coverId
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(',')[1])
const ab = new ArrayBuffer(bytes.length)
const ia = new Uint8Array(ab)
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i)
}
return new Blob([ab], { type: 'image/png' })
}
// // base64转换成blob
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(',')[1])
// const ab = new ArrayBuffer(bytes.length)
// const ia = new Uint8Array(ab)
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i)
// }
// return new Blob([ab], { type: 'image/png' })
// }
render() {
const {
pageType,
......@@ -736,7 +739,10 @@ class AddVideoCourse extends React.Component {
onSelect={this.handleSelectCover}
/>
)}
<Modal
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{/* <Modal
title='设置图片'
width={1080}
visible={visible}
......@@ -790,7 +796,7 @@ class AddVideoCourse extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{this.state.previewCourseModal}
</div>
)
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
......@@ -147,7 +147,7 @@ class VideoCourseList extends React.Component {
关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
</div>
}>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
&#xe61d;
</i>
</Tooltip>
......
src/modules/plan-manage/components/BasicInfo.jsx
/*
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-01 15:20:33
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-01 15:08:17
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,7 +12,7 @@ import { withRouter } from 'react-router-dom';
import SelectOperatorModal from '../modal/SelectOperatorModal';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
// import PhotoClip from 'photoclip'
import ImgClipModal from '@/components/ImgClipModal'
import './BasicInfo.less';
const { TextArea } = Input;
......@@ -22,6 +22,7 @@ class BasicInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
imageFile: null, // 需要被截取的图片
operatorModalVisible: false,
showSelectFileModal: false,
cutImageBlob: null,
......@@ -71,79 +72,83 @@ class BasicInfo extends React.Component {
}, 1000);
};
handleSelectCover = (file) => {
this.uploadImage(file);
// this.uploadImage(file);
this.setState({
visible: true,
imageFile:file
});
};
//上传图片
uploadImage = (imageFile) => {
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector('#headPicModal');
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: 'transparent',
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if (self.state.rotate !== this.rotate() || self.state.scale !== this.scale()) {
console.log(this.scale(), 'scale');
const _dataUrl = this.clip();
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale(),
});
}
}, 500);
// uploadImage = (imageFile) => {
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector('#headPicModal');
// const options = {
// size: [500, 282],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: 'transparent',
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if (self.state.rotate !== this.rotate() || self.state.scale !== this.scale()) {
// console.log(this.scale(), 'scale');
// const _dataUrl = this.clip();
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale(),
// });
// }
// }, 500);
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl,
});
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error('图片上传失败了，请重新上传');
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip();
self.setState({
dataUrl: _dataUrl,
hasImgReady: true,
});
}, 100);
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
if (!this.state.photoclip) {
const _photoclip = new PhotoClip('#headPicModal', options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
}, 200);
}
);
};
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl,
// });
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error('图片上传失败了，请重新上传');
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip();
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true,
// });
// }, 100);
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip('#headPicModal', options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -169,15 +174,15 @@ class BasicInfo extends React.Component {
}, 1000);
};
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(',')[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: 'image/png' });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(',')[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: 'image/png' });
// };
limitNumber = (value) => {
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : '';
......@@ -203,7 +208,7 @@ class BasicInfo extends React.Component {
};
render() {
const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob } = this.state;
const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob,imageFile} = this.state;
const { data } = this.props;
const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
data;
......@@ -403,7 +408,7 @@ class BasicInfo extends React.Component {
onSelect={this.handleSelectCover}
/>
)}
<Modal
{/* <Modal
title='设置图片'
width={1080}
visible={visible}
......@@ -457,7 +462,10 @@ class BasicInfo extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
</div>
);
}
......
src/modules/plan-manage/components/UserLearningData.jsx
......@@ -330,7 +330,7 @@ class UserLearningData extends React.Component {
<span>
<span>学习进度</span>
<Tooltip title='学员培训计划中达到“已完成”状态的课程数/总课程数'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
&#xe61d;
</i>
</Tooltip>
......
src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
......@@ -436,7 +436,7 @@ class SelectPrepareFileModal extends React.Component {
selectType,
multiple,
accept = ".ppt,.pptx,.doc,.docx,.pdf,.jpg,.jpeg,.png,.mp3,.mp4,.xlsx,.xls",
tooltip = '支持文件类型：ppt、word、excel、pdf、jpg、jpeg、png、mp3、mp4'
tooltip = '支持文件类型：ppt、word、excel、pdf、jpg、jpeg、png、mp3、mp4，支持批量上传文件'
} = this.props;
const selectedFileLength = selectedFileList.length;
......
src/modules/resource-disk/components/FolderList.jsx
......@@ -121,40 +121,6 @@ class FolderList extends React.Component {
break;
}
}
// getYoZoSign = (data,type,folderName)=>{
// return new Promise((resolve) => {
// let uploadParams;
// if(type==="UPLOAD"){
// uploadParams ={
// fileUrl:data,
// instId:window.currentUserInstInfo.instId,
// yoZoTypeEnum:'UPLOAD'
// }
// }else{
// uploadParams ={
// fileVersionId:data,
// instId:window.currentUserInstInfo.instId,
// yoZoTypeEnum:'VIEW',
// htmlTitle:folderName
// }
// }
// Service.Apollo('public/apollo/getYoZoSign', uploadParams).then(res => {
// const { result = [] } = res;
// resolve(result)
// });
// })
// }
// saveYoZoFileVersionId = (fileVersionId,folderId)=>{
// const params ={
// fileVersionId,
// folderId,
// instId: window.currentUserInstInfo.instId,
// }
// Service.Apollo('public/apollo/saveYoZoFileVersionId', params).then(res => {
// });
// }
// 预览文件
handleScanFile = async (folder) => {
const { folderFormat, folderSize, ossUrl,rights,fileVersionId,id,folderName} = folder;
......@@ -843,7 +809,7 @@ class FolderList extends React.Component {
<Choose>
<When condition={hasManagementAuthority}>
<div className="lottie-icon-title">你还没有上传文件，点击
<Tooltip title="支持文件类型：ppt、word、excel、pdf、jpg、mp3、mp4">
<Tooltip title="支持文件类型：ppt、word、excel、pdf、jpg、mp3、mp4，上传后默认私密，可邀请其他成员协作，支持批量上传文件">
<span
className="upload-btn"
onClick={this.handleChooseFile}
......
src/modules/resource-disk/components/OperateArea.jsx
......@@ -314,7 +314,7 @@ class OperateArea extends React.Component {
accept=".ppt,.pptx,.doc,.docx,.pdf,.jpg,.jpeg,.png,.mp3,.mp4,.xlsx,.xls"
onChange={(e) => this.handleUpload(e)}
/>
<Tooltip title="支持文件类型：ppt、word、excel、pdf、jpg、mp3、mp4，上传后默认私密，可邀请其他成员协作">
<Tooltip title="支持文件类型：ppt、word、excel、pdf、jpg、mp3、mp4，上传后默认私密，可邀请其他成员协作，支持批量上传文件">
<Button
type={!showResultPage?"primary":""}
disabled={showResultPage}
......
src/modules/root/CreateCollege.jsx
......@@ -5,6 +5,7 @@ import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService";
import User from "@/common/js/user";
import Breadcrumbs from "@/components/Breadcrumbs";
import ImgClipModal from '@/components/ImgClipModal'
import './CreateCollege.less';
let cutFlag = false;
......@@ -18,6 +19,7 @@ export default class CreateCollege extends React.Component {
logo: 'https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png',
name: '',
enterpriseId: User.getEnterpriseId(),
imageFile: null, // 需要被截取的图片
};
this.loginInputRef = React.createRef()
}
......@@ -46,95 +48,99 @@ export default class CreateCollege extends React.Component {
handleSelectCover = (e) => {
const imageFile = e.target.files[0];
Upload.uploadBlobToOSS(imageFile, 'cover' + (new Date()).valueOf()).then((url) => {
this.uploadImage({ folderName: imageFile.name, ossUrl: url });
this.setState({
visible: true,
imageFile:{ folderName: imageFile.name, ossUrl: url }
});
// this.uploadImage({ folderName: imageFile.name, ossUrl: url });
})
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 128],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
// uploadImage = (imageFile) => {
// const { folderName } = imageFile;
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector("#headPicModal");
// const options = {
// size: [500, 128],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: "transparent",
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
}, 500)
// }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error("图片上传失败了，请重新上传");
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip("#headPicModal", options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
}, 200);
}
);
};
// }, 200);
// }
// );
// };
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(",")[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: "image/png" });
// };
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -184,6 +190,7 @@ export default class CreateCollege extends React.Component {
hasImgReady,
cutImageBlob,
showError,
imageFile
} = this.state;
return (
<div className="college-manage-page">
......@@ -247,7 +254,7 @@ export default class CreateCollege extends React.Component {
style={{ display: "none" }}
onChange={this.handleSelectCover}
/>
<Modal
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -305,7 +312,10 @@ export default class CreateCollege extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='125/32' cropBoxHeight='128' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
</div>
)
}
......
src/modules/root/Login.jsx
......@@ -32,26 +32,6 @@ function Login(props) {
*/
useEffect(() => {
// const enterpriseId = getParameterByName('enterpriseId');
// const userId = getParameterByName('userId');
// const from = getParameterByName('from');
// const storeId = getParameterByName('storeId');
// if (storeId) {
// User.setCustomerStoreId(storeId);
// }
// if (from === 'customer' && enterpriseId && userId) {
// if (!user.getToken() || enterpriseId !== user.getEnterpriseId() || userId !== User.getUserId()) {
// getWXWorkLoginNoCheck(enterpriseId, userId);
// } else {
// window.RCHistory.push({
// pathname: `/switch-route`,
// });
// }
// } else {
// User.removeUserId();
// User.removeToken();
// User.removeEnterpriseId();
// }
User.removeUserId();
User.removeToken();
User.removeEnterpriseId();
......
src/modules/root/Menu.less
......@@ -51,12 +51,13 @@
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: calc(~'100% - 60px');
.nav {
-webkit-flex: 1;
cursor: default;
font-size: 16px;
height: calc(~'100% - 72px');
height: calc(~'100% - 84px');
overflow: auto;
&::-webkit-scrollbar {
display: none;
......@@ -134,34 +135,13 @@
color: #5e606a;
}
}
}
&.left-container-vertical {
width: 56px;
.menu-type-icon {
margin: 4px 0 0px 22px;
}
.left {
.ant-menu-submenu-arrow {
display: none !important;
}
}
}
.shink-footer {
left: 74px;
}
// &:hover{
// .menu-type-icon{
// display:inline-block;
// }
// }
.version-info {
position: absolute;
// position: absolute;
height: 84px;
bottom: 0;
width: 100%;
width: 180px;
cursor: pointer;
z-index: 10;
// z-index: 10;
padding-top: 10px;
background-color: white;
.row-1 {
......@@ -269,6 +249,29 @@
display: block;
}
}
}
&.left-container-vertical {
width: 56px;
.menu-type-icon {
margin: 4px 0 0px 22px;
}
.left {
.ant-menu-submenu-arrow {
display: none !important;
}
}
}
.shink-footer {
left: 74px;
}
// &:hover{
// .menu-type-icon{
// display:inline-block;
// }
// }
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
......
src/modules/root/Menu.tsx
......@@ -6,6 +6,7 @@ import classNames from 'classnames';
import React, { Key, useContext, useEffect, useMemo, useState } from 'react';
import { withRouter } from 'react-router-dom';
import _ from 'underscore';
import Bus from '@/core/tbus';
import { menuList } from '../../routes//config/menuList';
import { VersionContext, XMContext } from '../../store/context';
import './Menu.less';
......@@ -132,11 +133,20 @@ function Aside(props: any) {
});
}
return item;
});
}, [props.location.pathname]);
useEffect(() => {
getTopLeftLogo();
}, []);
})
}, [props.location.pathname])
useEffect(()=> {
getTopLeftLogo()
Bus.bind("updateCollegeInfo",updateCollegeInfo)
return ()=> {
Bus.unbind("updateCollegeInfo",updateCollegeInfo)
}
},[])
function updateCollegeInfo() {
getTopLeftLogo()
}
function getTopLeftLogo() {
if (User.getToken()) {
......@@ -273,8 +283,11 @@ function Aside(props: any) {
})}
</Menu>
</div>
{
menuType ? <VersionPanel /> : ""
}
</div>
{menuType ? <VersionPanel /> : ''}
</div>
);
}
......
src/modules/store-manage/StoreH5DecorationTab.jsx
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2021-06-21 11:16:21
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-01 15:38:47
* @Description: web学院banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -25,6 +25,7 @@ import "./StoreDecorationPage.less";
import Upload from "@/core/upload";
import { XMTable } from '@/components';
import college from '@/common/lottie/college';
import ImgClipModal from '@/components/ImgClipModal'
const { confirm } = Modal;
const DragHandle = sortableHandle(() => (
......@@ -51,7 +52,8 @@ class StoreH5Decoration extends React.Component {
photoclip: null,
preview: "",
cutImageBlob: null,
hasImgReady: false // 图片是否上传成功
hasImgReady: false, // 图片是否上传成功
imageFile: null // 需要被截取的图片
};
}
......@@ -211,84 +213,91 @@ class StoreH5Decoration extends React.Component {
this.setState({
showSelectFileModal: false,
});
this.uploadImage(file);
// this.uploadImage(file);
if(file){
this.setState({
visible: true,
imageFile:file
});
}
};
//上传图片
uploadImage = (imageFile) => {
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 172],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
// uploadImage = (imageFile) => {
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector("#headPicModal");
// const options = {
// size: [500, 172],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: "transparent",
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
// console.log(this.scale(), 'scale')
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
}, 500)
// }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error("图片上传失败了，请重新上传");
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip("#headPicModal", options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
}, 200);
}
);
};
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob) => {
......@@ -345,15 +354,15 @@ class StoreH5Decoration extends React.Component {
};
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(",")[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: "image/png" });
// };
render() {
const {
......@@ -362,7 +371,8 @@ class StoreH5Decoration extends React.Component {
diskList,
visible,
cutImageBlob,
hasImgReady
hasImgReady,
imageFile,
} = this.state;
const DraggableContainer = (props) => (
<SortableContainer
......@@ -423,7 +433,7 @@ class StoreH5Decoration extends React.Component {
}}
onSelect={this.handleSelectImg}
/>
<Modal
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -481,7 +491,10 @@ class StoreH5Decoration extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='500/172' cropBoxHeight='172' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
</div>
);
}
......
src/modules/store-manage/StoreInfo.jsx
......@@ -4,10 +4,10 @@ import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd';
import {industryList,childIndustryList} from '@/domains/store-domain/constants'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
// import PhotoClip from 'photoclip';
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import Bus from '@/core/tbus';
import ImgClipModal from '@/components/ImgClipModal'
import "./StoreInfo.less";
let cutFlag = false;
class StoreInfo extends React.Component {
......@@ -23,6 +23,7 @@ class StoreInfo extends React.Component {
logo:'',
showSelectFileModal:false,
cutImageBlob: null,
imageFile: null, // 需要被截取的图片
}
}
componentWillMount(){
......@@ -73,84 +74,88 @@ class StoreInfo extends React.Component {
})
}
handleSelectCover = (file)=> {
this.uploadImage(file);
// this.uploadImage(file);
this.setState({
visible: true,
imageFile:file
});
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 128],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
// uploadImage = (imageFile) => {
// const { folderName } = imageFile;
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector("#headPicModal");
// const options = {
// size: [500, 128],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: "transparent",
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
// console.log(this.scale(), 'scale')
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
}, 500)
// }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error("图片上传失败了，请重新上传");
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip("#headPicModal", options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
}, 200);
}
);
};
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -173,15 +178,15 @@ class StoreInfo extends React.Component {
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(",")[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: "image/png" });
// };
updateInfo=()=>{
const {storeName,storeFullName,logo,subjectType,corpIndustry,corpSubIndustry} = this.state;
if(!storeName){
......@@ -216,7 +221,7 @@ class StoreInfo extends React.Component {
});
}
render() {
const {storeName,storeFullName,subjectType,corpIndustry,corpSubIndustry,showSelectFileModal,visible,hasImgReady,logo,cutImageBlob } = this.state;
const {storeName,storeFullName,subjectType,corpIndustry,corpSubIndustry,showSelectFileModal,visible,hasImgReady,logo,cutImageBlob,imageFile} = this.state;
return (
<div className="page store-info-page">
<div className="content-header">学院基本信息</div>
......@@ -330,7 +335,7 @@ class StoreInfo extends React.Component {
onSelect={this.handleSelectCover}
/>
}
<Modal
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -388,7 +393,10 @@ class StoreInfo extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='125/32' cropBoxHeight='128' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
<div><Button type="primary" onClick={this.updateInfo} htmlType="submit" className="submit-btn">更新信息</Button></div>
</div>
......
src/modules/store-manage/StoreWebDecorationTab.jsx
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2021-06-21 11:16:31
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-01 15:38:32
* @Description: web学院banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -25,6 +25,7 @@ import "./StoreDecorationPage.less";
import Upload from "@/core/upload";
import { XMTable } from '@/components';
import college from '@/common/lottie/college';
import ImgClipModal from '@/components/ImgClipModal'
const { confirm } = Modal;
const DragHandle = sortableHandle(() => (
......@@ -51,7 +52,8 @@ class StoreWebDecoration extends React.Component {
photoclip: null,
preview: "",
cutImageBlob: null,
hasImgReady: false // 图片是否上传成功
hasImgReady: false,// 图片是否上传成功
imageFile: null // 需要被截取的图片
};
}
......@@ -210,83 +212,90 @@ class StoreWebDecoration extends React.Component {
this.setState({
showSelectFileModal: false,
});
this.uploadImage(file);
// this.uploadImage(file);
if(file){
this.setState({
visible: true,
imageFile:file
});
}
};
//上传图片
uploadImage = (imageFile) => {
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 73],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
// uploadImage = (imageFile) => {
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector("#headPicModal");
// const options = {
// size: [500, 73],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: "transparent",
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
// console.log(this.scale(), 'scale')
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
}, 500)
// }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error("图片上传失败了，请重新上传");
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip("#headPicModal", options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
}, 200);
}
);
};
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob) => {
......@@ -343,15 +352,15 @@ class StoreWebDecoration extends React.Component {
};
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(",")[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: "image/png" });
// };
render() {
const {
......@@ -360,7 +369,8 @@ class StoreWebDecoration extends React.Component {
diskList,
visible,
cutImageBlob,
hasImgReady
hasImgReady,
imageFile
} = this.state;
const DraggableContainer = (props) => (
<SortableContainer
......@@ -421,7 +431,7 @@ class StoreWebDecoration extends React.Component {
}}
onSelect={this.handleSelectImg}
/>
<Modal
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -479,7 +489,10 @@ class StoreWebDecoration extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='500/73' cropBoxHeight='73' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
</div>
);
}
......
src/modules/teach-tool/examination-manager/Index.tsx
......@@ -11,6 +11,8 @@ import { XMContext } from '@/store/context';
import ExamShareModal from './ExamShareModal';
import DataAnalysic from './DataAnalysic';
import PreviewModal from './PreviewModal';
import college from '@/common/lottie/college.json';
import './index.less';
const { RangePicker } = DatePicker;
const { Search } = Input;
......@@ -425,6 +427,7 @@ function ExaminationManager(props: any) {
pagination={false}
style={{ margin: '0px 0 16px' }}
renderEmpty={{
image: college,
description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>,
}}></XMTable>
{total > 0 && (
......
src/modules/teach-tool/paper-manage/OperatePaper.jsx
......@@ -584,8 +584,13 @@ class OperatePaper extends Component {
min={1}
max={100}
value={record.score || 2}
formatter={value => parseInt(value)}
parser={value => parseInt(value)}
onChange={(value) => {
value = Math.round(value);
value = Math.round(value)
if (value <= record.portionScore) {
return
}
const _selectQuestionList = [...selectQuestionList];
this.setState(
{
......@@ -609,7 +614,9 @@ class OperatePaper extends Component {
{record.questionType === 'GAP_FILLING' ? <span>半对得</span> : <span>漏选得</span>}{' '}
<InputNumber
min={0}
max={record.score - 1}
max={ record.score <= 0 ? 0 : record.score - 1}
formatter={value => parseInt(value)}
parser={value => parseInt(value)}
value={record.portionScore || 0}
onChange={(value) => {
value = Math.round(value);
......@@ -919,16 +926,20 @@ class OperatePaper extends Component {
<div className='paper-info-tip' style={{ margin: '0 auto 12px' }}>
总计<span>{totalScore}</span>分，共
<span>{questionCnt}</span>
题。 {singleChoiceCnt > 0 && `单选题${singleChoiceCnt}题，共${singleChoiceScore}分；`}
{multiChoiceCnt > 0 && `多选题${multiChoiceCnt}题，共${multiChoiceScore}分；`}
{judgeCnt > 0 && `判断题${judgeCnt}题，共${judgeScore}分，`}
{gapFillingCnt > 0 && `填空题${gapFillingCnt}题，共${gapFillingScore}分，`}
{indefiniteChoiceCnt > 0 && `不定项选择题${indefiniteChoiceCnt}题，共${indefiniteChoiceScore}分`}
题。{" "}
{singleChoiceCnt > 0 &&
`单选题${singleChoiceCnt}题，共${singleChoiceScore}分；`}
{multiChoiceCnt > 0 &&
`多选题${multiChoiceCnt}题，共${multiChoiceScore}分；`}
{judgeCnt > 0 && `判断题${judgeCnt}题，共${judgeScore}分；`}
{gapFillingCnt > 0 &&
`填空题${gapFillingCnt}题，共${gapFillingScore}分；`}
{indefiniteChoiceCnt > 0 &&
`不定项选择题${indefiniteChoiceCnt}题，共${indefiniteChoiceScore}分；`}
</div>
)}
<XMTable
className='table-style'
scroll={{ y: 350 }}
columns={this.parseColumns()}
dataSource={selectQuestionList}
pagination={false}
......
src/modules/teach-tool/paper-manage/OperatePaper.less
......@@ -7,6 +7,8 @@
.table-style {
border: 1px solid #f0f0f0 !important;
margin-bottom: 70px;
max-height: calc(~'100vh - 465px');
overflow: scroll;
}
.ant-tabs {
color: #666666;
......
src/modules/teach-tool/paper-manage/components/BatchScore.tsx
import React, { useEffect, useState} from "react";
import { Modal, Button, InputNumber } from 'antd';
import { Modal, Button, InputNumber, message } from 'antd';
import "./BatchScore.less"
import _ from "underscore";
......@@ -56,6 +56,12 @@ export default function BatchScore(props:BatchScoreProps) {
}
function onOk() {
for (let i = 0;i < rules.length;++i) {
if (rules[i].score <= 0 || rules[i].score > 100) {
message.error("分值设置错误")
return;
}
}
props.onOK(rules)
}
......@@ -84,6 +90,8 @@ export default function BatchScore(props:BatchScoreProps) {
value={rules[4].score}
defaultValue={rules[4].score}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
let _rules = [...rules]
......@@ -103,8 +111,13 @@ export default function BatchScore(props:BatchScoreProps) {
defaultValue={rules[3].score}
value={rules[3].score}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
if (v <= rules[3].portionScore) {
return
}
let _r = [...rules]
_r[3].score = v
setRules(_r)
......@@ -113,10 +126,12 @@ export default function BatchScore(props:BatchScoreProps) {
分，漏选得
<InputNumber
min={0}
max={rules[3].score-1}
max={rules[3].score <= 0 ? 0 : rules[3].score-1}
defaultValue={rules[3].portionScore}
value={rules[3].portionScore}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
let _r = [...rules]
......@@ -136,8 +151,13 @@ export default function BatchScore(props:BatchScoreProps) {
defaultValue={rules[1].score}
value={rules[1].score}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
if (v <= rules[1].portionScore) {
return
}
let _r = [...rules]
_r[1].score = v
setRules(_r)
......@@ -146,10 +166,12 @@ export default function BatchScore(props:BatchScoreProps) {
分，漏选得
<InputNumber
min={0}
max={rules[1].score-1}
max={rules[1].score <= 0 ? 0 : rules[1].score-1}
defaultValue={rules[1].portionScore}
value={rules[1].portionScore}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
let _r = [...rules]
......@@ -168,6 +190,8 @@ export default function BatchScore(props:BatchScoreProps) {
defaultValue={rules[2].score}
value={rules[2].score}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
let _r = [...rules]
......@@ -187,8 +211,13 @@ export default function BatchScore(props:BatchScoreProps) {
defaultValue={rules[0].score}
value={rules[0].score}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
if (v <= rules[0].portionScore) {
return
}
let _r = [...rules]
_r[0].score = v
setRules(_r)
......@@ -196,10 +225,12 @@ export default function BatchScore(props:BatchScoreProps) {
/>
分，半对得<InputNumber
min={0}
max={rules[0].score-1}
max={rules[0].score <= 0 ? 0 : rules[0].score-1}
defaultValue={rules[0].portionScore}
value={rules[0].portionScore}
style={inputNumberStyle}
formatter={(value:number|undefined) => String(value)}
parser={(value:string|undefined) => parseInt(String(value))}
onChange={(v)=> {
v = Math.round(v)
let _r = [...rules]
......
src/modules/teach-tool/paper-manage/components/PaperList.jsx
......@@ -31,6 +31,8 @@ import _ from "underscore";
import PaperPreviewModal from "../modal/PreviewPaperModal";
import MoveModal from '../../modal/MoveModal';
import Bus from "@/core/bus";
import college from '@/common/lottie/college';
const { Search } = Input;
......@@ -625,6 +627,7 @@ class PaperList extends Component {
bordered
loading={loading}
renderEmpty={{
image: college,
description: <span style={{ display: 'block', paddingBottom: 24 }}>还没有试卷</span>
}}
/>
......@@ -641,6 +644,7 @@ class PaperList extends Component {
pagination={false}
bordered
renderEmpty={{
image: college,
description: <span style={{ display: 'block', paddingBottom: 24 }}>还没有试卷</span>
}}
/>
......
src/modules/teach-tool/paper-manage/components/SelectQuestionList.jsx
......@@ -25,6 +25,8 @@ import AidToolService from "@/domains/aid-tool-domain/AidToolService";
import _ from "underscore";
import Bus from "@/core/bus";
import moment from 'moment';
import { XMTable } from '@/components';
import college from '@/common/lottie/college';
const { Search } = Input;
const { RangePicker } = DatePicker;
......@@ -201,19 +203,6 @@ class SelectQuestionList extends Component {
return columns;
};
// 自定义表格空状态
customizeRenderEmpty = () => {
return (
<Empty
image="https://image.xiaomaiketang.com/xm/emptyTable.png"
imageStyle={{
height: 100,
}}
description={"还没有题目"}
></Empty>
);
};
onShowSizeChange = (current, size) => {
if (current == size) {
return;
......@@ -431,8 +420,11 @@ class SelectQuestionList extends Component {
)}
</div>
<div className="select-question-content">
<ConfigProvider renderEmpty={this.customizeRenderEmpty}>
<Table
<XMTable
renderEmpty={{
image: college,
description: '还没有题目'
}}
rowSelection={rowSelection}
rowKey={(record) => record.id}
dataSource={dataSource}
......@@ -441,7 +433,6 @@ class SelectQuestionList extends Component {
onChange={this.handleChangeTable}
bordered
/>
</ConfigProvider>
<div className="box-footer">
<PageControl
current={current - 1}
......
src/modules/teach-tool/question-manage/components/QuestionList.jsx
......@@ -7,7 +7,7 @@
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from 'react';
import { Table, ConfigProvider, Empty, Row, Input, Select, Tooltip, Space, Button, Modal, message, Menu, Dropdown, DatePicker } from 'antd';
import { Row, Input, Select, Tooltip, Space, Button, Modal, message, Menu, Dropdown, DatePicker } from 'antd';
import _ from 'underscore';
import { Route, withRouter } from 'react-router-dom';
import { DownOutlined } from '@ant-design/icons';
......@@ -21,6 +21,8 @@ import Bus from '@/core/bus';
import moment from 'moment';
import Service from '@/common/js/service';
import MoveModal from '../../modal/MoveModal';
import college from '@/common/lottie/college';
import './QuestionList.less';
const { RangePicker } = DatePicker;
......@@ -671,6 +673,7 @@ class QuestionList extends Component {
onChange={this.handleChangeTable}
rowSelection={rowSelection}
renderEmpty={{
image: college,
description: (
<span style={{ display: 'block', paddingBottom: 24 }}>
<span>还没有题目</span>
......
yarn.lock
......@@ -6376,7 +6376,6 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^3.1.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
......@@ -8446,14 +8445,6 @@ mini-css-extract-plugin@0.9.0:
schema-utils "^1.0.0"
webpack-sources "^1.1.0"
mini-store@^3.0.1:
version "3.0.6"
resolved "https://registry.yarnpkg.com/mini-store/-/mini-store-3.0.6.tgz#44b86be5b2877271224ce0689b3a35a2dffb1ca9"
integrity sha512-YzffKHbYsMQGUWQRKdsearR79QsMzzJcDDmZKlJBqt5JNkqpyJHYlK6gP61O36X+sLf76sO9G6mhKBe83gIZIQ==
dependencies:
hoist-non-react-statics "^3.3.2"
shallowequal "^1.0.2"
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
......@@ -10787,7 +10778,6 @@ rc-table@~7.15.1:
"@babel/runtime" "^7.10.1"
classnames "^2.2.5"
rc-resize-observer "^1.0.0"
rc-util "^5.13.0"
shallowequal "^1.1.0"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment