index.js 3.1 KB
Newer Older
钟是志's avatar
钟是志 committed
1 2 3 4 5
/**
 *
 * 一站式请勿使用此组件
 * 2020年5月9日 拖拽组件
 * 钟是志
钟是志's avatar
钟是志 committed
6
 * 黔南的 录取通知书打印 位置设置
钟是志's avatar
钟是志 committed
7 8
 * */

9 10 11 12
import React, { Fragment, Component } from 'react';
import styles from './index.less';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import Shell from '@/baseComponent/Shell';
钟是志's avatar
钟是志 committed
13
import { ModalConfirm } from '@/baseComponent/Modal';
14 15

export default class FormatSetting extends Component {
16
	dragEventList = () => {
钟是志's avatar
钟是志 committed
17
		const { updateFormatSettingObject } = this.props;
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
		let draggedRef = null;
		document.addEventListener(
			'dragstart',
			function(event) {
				// 保存拖动元素的引用(ref.)
				draggedRef = event.target;
				// 使其半透明
				event.target.style.opacity = 0.5;
			},
			false,
		);
		document.addEventListener(
			'dragend',
			function(event) {
				// 重置透明度
				event.target.style.opacity = '';
			},
			false,
		);
37

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
		/* 放下目标节点时触发事件 */
		document.addEventListener(
			'dragover',
			function(event) {
				// 阻止默认动作
				event.preventDefault();
			},
			false,
		);
		document.addEventListener(
			'drop',
			function(event) {
				// 阻止默认动作(如打开一些元素的链接)
				event.preventDefault();
				// 将拖动的元素到所选择的放置目标节点中
				if (event.target.id === 'dropZone') {
					const left = event.offsetX;
					if (left > event.target.width - draggedRef.offsetWidth - 10) {
						console.log('拖拽到了图片区域外部,不能进行拖拽');
						return false;
					}
					const top = event.offsetY;
					updateFormatSettingObject(draggedRef.id, left, top);
					draggedRef.style.left = left; // `${left}px`;
					draggedRef.style.top = top; // `${top}px`;
				}
			},
			false,
		);
	};
68

69 70 71
	componentDidMount() {
		this.dragEventList();
	}
72

73 74 75 76 77 78 79
	initConfig = () => {
		ModalConfirm('您确定初始化打印录取通知书格式吗?', {
			onOk: () => {
				this.props.initConfig();
			},
		});
	};
80

81 82
	render() {
		const { bgImage, formatSettingObject, saveConfig } = this.props;
83

84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
		return (
			<Fragment>
				<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
					<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
						<ButtonDiy name="保存" className="primary" handleClick={saveConfig} />
						<ButtonDiy name={'初始化格式'} handleClick={this.initConfig} />
					</div>
				</Shell>
				<div className={styles.outSideDiv}>
					<div>
						<img
							src={bgImage}
							id={'dropZone'}
							draggable={false}
							className={styles.bgimage}
							alt={'背景图'}
						/>
						{formatSettingObject.map((x, index) => {
							return (
								<div
									draggable={true}
									className={styles.inSideItem}
									key={index}
									id={x.name}
									style={x.style}>
									{x.name}
								</div>
							);
						})}
					</div>
				</div>
			</Fragment>
		);
	}
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
}
/***
 * formatSettingObject: {
 *   content_set:  {
 *     font: "宋体"
       isNeedConfig: true
       key: "JjqCiRYamxs"
       name: "content_set"
       size: "12"
       style: {top: 300, left: 50}
       title: "--详细内容--"
 *   }
 * }
 *
 * */