Skip to content

A
airtable
Commit 0039eb8d authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update

parent b4e046cd
Show whitespace changes
Inline Side-by-side
Showing with 571 additions and 30 deletions
src/apollo-table/component/base/_utils/getFormatter.tsx
View file @ 0039eb8d
import moment from 'moment';
import { isNumber } from '@/apollo-table/utils/utils';
import { checkoutFileType } from '@/apollo-table/component/base/extra/upload/utils';
export const GetFormatter = {
INPUT: (val) => {
......@@ -22,7 +23,7 @@ export const GetFormatter = {
size = s1;
return '';
});
return { value: item.value, name: text, size };
return { value: item.value, name: text, size, ...checkoutFileType(item.value) };
});
},
CHECKBOX: (val, config) => {
......
src/apollo-table/component/base/_utils/setFormatter.tsx
View file @ 0039eb8d
......@@ -17,7 +17,7 @@ export const SetFormatter = {
return [{ value: value, text: value }];
},
UPLOAD: (val) => {
if (!val) return null;
if (!val) return emptyModel;
return val.map((item) => ({ value: item.value, text: item.name + '(' + item.size + ')' }));
},
CHECKBOX: (value) => {
......
src/apollo-table/component/base/config.tsx
View file @ 0039eb8d
......@@ -33,10 +33,10 @@ export const config: any = {
},
'4': {
name: '附件上传',
component: require('./edit/input').default,
setFormatter: SetFormatter['INPUT'],
getFormatter: GetFormatter['INPUT'],
detail: require('./detail/input').default,
component: require('./edit/upload').default,
setFormatter: SetFormatter['UPLOAD'],
getFormatter: GetFormatter['UPLOAD'],
detail: require('./detail/upload').default,
},
'5': {
name: '复选',
......
src/apollo-table/component/base/detail/upload/index.tsx
View file @ 0039eb8d
......@@ -2,6 +2,7 @@ import React from 'react';
// import Upload from '../../extra/upload';
import styles from './styles.less';
import { UploadProps } from '../detailInterface';
import {checkoutFileType} from '@/apollo-table/component/base/extra/upload/utils';
const itemWidth = 20;
const itemSpace = 5;
......@@ -15,7 +16,7 @@ export default function Detail(props: UploadProps) {
themeValue = formatValue.map((item) => {
return {
...item,
// ...Upload.checkoutFileType(item.value),
...checkoutFileType(item.value),
};
});
}
......
src/apollo-table/component/base/edit/container/index.tsx
View file @ 0039eb8d
import React from 'react';
import {Modal} from 'antd';
import s from './index.less';
import { antiAssign } from '@/apollo-table/utils/utils';
......@@ -17,7 +18,7 @@ export default function CellContainer<P extends Props>(Comp) {
value: props.value, // 组件的值
option: undefined, // 选择项
};
console.log('props.value',props.value)
console.log('props.value', props.value);
}
componentDidMount(): void {
document.addEventListener('click', this.onBlur, false);
......@@ -26,13 +27,13 @@ export default function CellContainer<P extends Props>(Comp) {
document.removeEventListener('click', this.onBlur, false);
}
changeValue = (value: any, option: any) => {
console.log('value',value)
console.log('value', value);
this.setState({ value, option });
};
onBlur = () => {
const { onEmitChange } = this.props;
const { value, option } = this.state;
console.log('state.value',value)
console.log('state.value', value);
if (typeof onEmitChange === 'function') {
onEmitChange(value, option);
}
......@@ -46,7 +47,11 @@ export default function CellContainer<P extends Props>(Comp) {
const { value } = this.state;
return (
<div className={s.container} onClick={this.onClick}>
<Comp {...selfProps} value={value} onChange={this.changeValue} />
<Comp
{...selfProps}
value={value}
onChange={this.changeValue}
/>
</div>
);
}
......
src/apollo-table/component/base/edit/editInterface.tsx
View file @ 0039eb8d
......@@ -6,6 +6,7 @@ import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox';
import { TreeSelectProps } from 'antd/es/tree-select';
import { CascaderProps } from 'antd/es/cascader';
import { RateProps } from 'antd/es/rate';
import { UploadProps } from 'antd/es/upload';
export interface LinkData {
text?: string;
......@@ -57,3 +58,6 @@ export interface ApolloCascaderProps extends CascaderProps, CommonProps {
request: Function;
}
export interface ApolloRateProps extends RateProps, CommonProps {}
export interface ApolloUploadProps extends UploadProps, CommonProps {
isMultiple?: boolean;
}
src/apollo-table/component/base/edit/upload/index.less 0 → 100644
View file @ 0039eb8d
@import '~@/common';
.container {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
.add {
cursor: pointer;
font-size: @textFontGen;
}
.picContainer {
margin-left: @marginSmX;
.pic {
height: 30px;
}
}
}
.uploadContainer {
height: 500px;
overflow-y: auto;
}
src/apollo-table/component/base/edit/upload/index.tsx
View file @ 0039eb8d
// import UpLoad from '../../extra/upload';
import React, { useEffect, useRef, useState } from 'react';
import { ApolloUploadProps } from '../editInterface';
import { antiAssign } from '@/apollo-table/utils/utils';
import CellContainer from '../container';
import s from './index.less';
import Upload from '../../extra/upload';
import IconFont from '@/apollo-table/component/base/extra/iconFont';
import { Modal, Tooltip } from 'antd';
// export default UpLoad;
const ApolloUpload = (props) => {
const { isMultiple, onEmitChange } = props;
const selfProps = antiAssign(props, ['onChange', 'value']);
if (isMultiple) {
selfProps.multiple = true;
}
const [value, setValue] = useState(props.value || []);
const changeValue = (value) => {
console.log(value);
setValue(value);
};
const [visible, setVisible] = useState(false);
const refHelper = useRef(visible);
const toggleUploadDialog = (flag) => {
refHelper.current = flag;
setVisible(flag);
};
useEffect(() => {
document.addEventListener('click', onBlur, false);
return () => {
document.removeEventListener('click', onBlur, false);
};
}, []);
const onBlur = () => {
if (refHelper.current) {
return;
}
if (typeof onEmitChange === 'function') {
onEmitChange(props.value);
}
};
const onOk = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
toggleUploadDialog(false);
};
const onCancel = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(props.value);
}
toggleUploadDialog(false);
};
const onClickContainer = (e) => {
e.stopPropagation(); //阻止事件冒泡
e.nativeEvent.stopImmediatePropagation();
};
return (
<div className={s.container} onClick={onClickContainer}>
<div className={s.add} onClick={toggleUploadDialog.bind(null, true)}>
<IconFont type="iconxinzeng" />
</div>
{value &&
value.map((item, i) => {
return (
<div key={i} className={s.picContainer}>
<Tooltip placement="bottom" title={item.name}>
<img className={s.pic} src={item.thumbUrl} />
</Tooltip>
</div>
);
})}
<Modal visible={visible} title="文件上传" onOk={onOk} onCancel={onCancel}>
<div className={s.uploadContainer}>
<Upload {...selfProps} value={value} onChange={changeValue} />
</div>
</Modal>
</div>
);
};
export default ApolloUpload;
src/apollo-table/component/base/edit/upload/styles.less deleted 100644 → 0
View file @ b4e046cd
.container {
position: relative;
top: 0;
left: 0;
.input {
padding-right: 100px;
}
.wordNumber {
position: absolute;
color: #E1E1E1FF;
font-size: 12px;
right: 7px;
top: 7px;
}
}
src/apollo-table/component/base/extra/upload/detail.less 0 → 100644
View file @ 0039eb8d
@import "~@/common";
.fileList {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.fileListCenter {
justify-content: center;
}
.wrap {
position: relative;
cursor: pointer;
}
.wrap:hover .fileBoxHove {
display: flex;
}
.fileBox {
padding: 10px;
width: 100px;
display: flex;
flex-flow: column;
justify-items: center;
align-items: center;
border-radius: 4px;
overflow: hidden;
}
.fileBoxHove {
position: absolute;
top: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
.icon {
color: #fff;
padding: 5px;
}
}
.fileName {
margin-top: 5px;
width: 80px;
font-size: 12px;
font-weight: 400;
color: rgba(90, 104, 118, 1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.fileStyle {
height: 56px;
}
.dialog {
width: 900px !important;
min-height: 500px;
}
.textUploadList {
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
zoom: 1;
.textUploadListItem {
position: relative;
height: 22px;
margin-top: 8px;
font-size: 14px;
.textUploadListItemInfo {
height: 100%;
padding: 0 12px 0 4px;
.textUploadListItemBox {
display: flex;
align-items: center;
.textUploadListItemInfoName {
display: inline-block;
margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #5a6876;
&:hover {
color: #5c99ff;
}
}
}
}
}
}
.downIcon {
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
.pictureTextUploadList {
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
zoom: 1;
overflow: hidden;
width: 100%;
.textUploadListItem {
position: relative;
display: flex;
justify-items: center;
height: 41px;
margin-top: 10px;
font-size: 14px;
width: 100%;
.textUploadListItemInfo {
width: 100%;
height: 100%;
padding: 0 12px 0 4px;
.textUploadListItemBox {
display: flex;
align-items: center;
height: 100%;
.fileImgStyle {
width: 32px;
margin-right: 10px;
cursor: pointer;
}
.textUploadListItemInfoName {
display: inline-block;
margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: @textGeneralColor;
&:hover {
color: @primaryColor;
}
}
&:hover{
.downIcon{
opacity: 1;
}
}
.downIcon {
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
color: @textSupplyColor;
opacity: 0;
transition: opacity 0.2s linear;
}
}
}
}
}
// .textUploadListItemInfo:hover {
// background: #e6f7ff;
// }
src/apollo-table/component/base/extra/upload/fileType.ts 0 → 100644
View file @ 0039eb8d
const CDN_PATH = 'https://static.mttop.cn/admin';
export const fileType = {
image: {},
ppt: {
thumbUrl: `${CDN_PATH}/pptIcon.png`,
},
pptx: {
thumbUrl: `${CDN_PATH}/pptIcon.png`,
},
zip: {
thumbUrl: `${CDN_PATH}/zipIcon.png`,
},
xlsx: {
thumbUrl: `${CDN_PATH}/xlsIcon.png`,
},
xls: {
thumbUrl: `${CDN_PATH}/xlsIcon.png`,
},
doc: {
thumbUrl: `${CDN_PATH}/docIcon.png`,
},
docx: {
thumbUrl: `${CDN_PATH}/docIcon.png`,
},
pdf: {
thumbUrl: `${CDN_PATH}/pdfIcon.png`,
},
other: {
thumbUrl: `${CDN_PATH}/otherIcon.png`,
},
};
src/apollo-table/component/base/extra/upload/index.less 0 → 100644
View file @ 0039eb8d
@import '~@/common';
.container {
.upload {
}
}
src/apollo-table/component/base/extra/upload/index.tsx 0 → 100644
View file @ 0039eb8d
import React, { useEffect, useRef, useState } from 'react';
import { message, Upload } from 'antd';
import moment from 'moment';
import { getToken } from '@/apollo-table/services/globalSearchApi';
import IconFont from '@/apollo-table/component/base/extra/iconFont';
import s from './index.less';
import { antiAssign, getRandom } from '@/apollo-table/utils/utils';
import { checkoutFileType } from './utils';
import Preview from './preview';
message.config({
maxCount: 1,
});
const UploadCom = (props) => {
const { onChange, CDN_HOST, getFormat, setFormat } = props;
const selfProps = antiAssign(props, ['onChange', 'CDN_HOST']);
const getFormatFileList = (fileList = []) => {
if (!fileList) {
return [];
}
if (typeof getFormat === 'function') {
return getFormat(fileList);
}
return fileList.map((item: any) => {
return {
name: item.name,
value: item.value,
size: item.size,
uid: item.value,
...checkoutFileType(item.value),
};
});
};
const setFormatFile = (file) => {
if (!file) {
return {};
}
if (typeof setFormat === 'function') {
return setFormat(fileList);
}
const data = file.response || {};
const url = `${domain ? 'https://' + domain : CDN_HOST}/${data.key}`;
return {
uid: file.uid,
name: file.name,
value: url,
size: file.size,
...checkoutFileType(url),
};
};
const [fileList, setFileList] = useState(getFormatFileList(props.value));
useEffect(() => {
setFileList(getFormatFileList(props.value));
}, [props.value]);
const [token, setToken] = useState(null);
const [domain, setDomain] = useState(null);
const previewModel = useRef<any>();
//自定义七牛文件唯一key
const getKey = (file) => {
if (!file) return;
let suffix = file.name.match(/\.\w+$/)[0];
let rand6 = getRandom();
let time = moment().format('YYYYMMDDHHmmss');
return time + rand6 + suffix;
};
//七牛上传额外数据，token和key
const getData = (file) => {
return {
token,
key: getKey(file),
};
};
//获取七牛上传token
const getUploadToken = async () => {
const response = await getToken();
if (response && response.success && response.data) {
setToken(response.data.token);
setDomain(response.data.domain);
}
};
const onSaveFileList = (fileList = []) => {
if (typeof onChange === 'function') {
onChange(fileList);
}
};
const beforeUpload = async () => {
await getUploadToken();
return true;
};
const changeFileList = ({ file, fileList }) => {
let newList = fileList;
if (file.status === 'done' && file.response) {
const itemObj = setFormatFile(file);
newList = fileList.map((item) => {
return item.uid === itemObj.uid ? itemObj : item;
});
onSaveFileList(newList);
}
setFileList(newList);
};
const previewFile = (file) => {
return new Promise((res, rej) => {
const obj = checkoutFileType(file.name);
const typeArr = file.name.match(/\.[a-zA-Z]+$/);
const type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
if (!['png', 'gif', 'bmp', 'jpg', 'jpeg'].includes(type)) {
res(obj.thumbUrl);
}
});
};
const onPreview = (file) => {
if (previewModel.current && previewModel.current.onPreview) {
previewModel.current.onPreview(file.value, file.name);
}
};
const onRemove = (file) => {
const newFileList = fileList.filter((item) => item.uid !== file.uid);
onSaveFileList(newFileList);
};
return (
<div className={s.container}>
<Upload
className={s.upload}
listType="picture"
action="https://upload-z1.qiniup.com/" //七牛上传地址
data={getData}
beforeUpload={beforeUpload}
multiple
fileList={fileList}
{...selfProps}
onChange={changeFileList}
onRemove={onRemove}
previewFile={previewFile}
onPreview={onPreview}
showUploadList={{
showPreviewIcon: true,
showRemoveIcon: true,
showDownloadIcon: true,
}}
>
<IconFont type="iconxinzeng" />
</Upload>
<Preview ref={previewModel} />
</div>
);
};
export default UploadCom;
src/apollo-table/component/base/extra/upload/preview.tsx 0 → 100644
View file @ 0039eb8d
import React from 'react';
import styles from './detail.less';
import { message, Modal } from 'antd';
export default class uploadDetail extends React.Component {
state = {
showDialog: false,
type: 'image',
url: '',
};
onPreview = (url, name) => {
const typeArr = (name || url).match(/\.[a-zA-Z]+$/);
let type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
type = type.toLowerCase();
if (['png', 'gif', 'bmp', 'jpg', 'jpeg'].includes(type)) {
this.setState({ showDialog: true, type: 'image', url });
} else if (['doc', 'docx', 'document', 'xls', 'xlsx', 'ppt', 'pptx'].includes(type)) {
this.setState({ showDialog: true, type: 'office', url });
} else if (type === 'pdf') {
this.setState({ showDialog: true, type: 'pdf', url });
} else {
message.warn('暂不支持预览');
}
};
handleCancel = () => {
this.setState({ showDialog: false });
};
render() {
const { showDialog, type, url } = this.state;
return (
<div>
<Modal className={styles.dialog} visible={showDialog} onCancel={this.handleCancel} footer={null}>
<div>
{type === 'image' ? <img alt="example" style={{ width: '100%' }} src={url} /> : null}
{type === 'office' ? (
<iframe
width={'100%'}
height={500}
src={`https://view.officeapps.live.com/op/view.aspx?src=${url}`}
/>
) : null}
{type === 'pdf' ? <iframe width={'100%'} height={500} src={`${url}`} /> : null}
</div>
</Modal>
</div>
);
}
}
src/apollo-table/component/base/extra/upload/utils.ts 0 → 100644
View file @ 0039eb8d
import { fileType } from './fileType';
export const checkoutFileType = (url = '') => {
const typeArr = url.match(/\.[a-zA-Z]+$/);
let type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
type = type.toLowerCase();
if (type === 'png' || type === 'jpg' || type === 'gif' || type === 'bmp' || type === 'jpeg') {
return { thumbUrl: url + '?imageView2/1/w/120/h/120', fileType: type };
}
return fileType[type] ? fileType[type] : fileType['other'];
};
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