EditDrawer.js 3.8 KB
Newer Older
钟是志's avatar
钟是志 committed
1 2 3 4
import { Button, Drawer, Input, message } from 'antd';
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'dva';
import ButtonDiy from '@/baseComponent/ButtonDiy';
钟是志's avatar
钟是志 committed
5
import moment from 'moment';
钟是志's avatar
钟是志 committed
6 7
import styles from './styles.less';
import { getUserInfo } from '@/webPublic/one_stop_public/utils/token';
钟是志's avatar
钟是志 committed
8 9 10 11

const { TextArea } = Input;

function EditDrawer(props) {
钟是志's avatar
钟是志 committed
12 13
	const { dispatch, templateData, TEMPLATE } = props;
	const [loading, setLoading] = useState(false);
14 15
  // const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
  const [showEdit, setShowEdit] = useState(false);
钟是志's avatar
钟是志 committed
16 17
	const saveTimeOut = useRef();
	const [lowCodeEdit, setLowCodeEdit] = useState({});
钟是志's avatar
钟是志 committed
18

钟是志's avatar
钟是志 committed
19 20 21 22 23 24 25 26
	useEffect(
		() => {
			if (templateData) {
				setLowCodeEdit({ ...templateData });
			}
		},
		[templateData],
	);
钟是志's avatar
钟是志 committed
27

钟是志's avatar
钟是志 committed
28 29 30
	const onClose = () => {
		setShowEdit(!showEdit);
	};
钟是志's avatar
钟是志 committed
31

钟是志's avatar
钟是志 committed
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
	const handleSaveTemplate = () => {
		lowCodeEdit.updateTime = moment().format('YYYY-MM-DD HH:mm:ss');
		const content = JSON.stringify(lowCodeEdit);
		message.info('正在保存数据,请耐心等待');
		setLoading(true);
		dispatch({
			type: 'lowCode_design/saveTemplateApi',
			payload: {
				name: lowCodeEdit.name,
				content,
				TEMPLATE,
			},
			callback: () => {
				saveTimeOut.current = null;
				setLoading(false);
			},
		});
	};
	const changeKey = (value, key) => {
		let newCodeEdit = lowCodeEdit;
		newCodeEdit[key] = value;
		setLowCodeEdit(newCodeEdit);
	};
钟是志's avatar
钟是志 committed
55

钟是志's avatar
钟是志 committed
56
	// TODO localStorage 事件中获取的state 不是最新的.
钟是志's avatar
钟是志 committed
57

钟是志's avatar
钟是志 committed
58 59 60 61 62 63 64 65 66 67 68 69 70 71
	const handleLocalStorageSave = (e) => {
		if (e.key === 'save-low-code-local') {
			const newV = e.newValue;
			if (newV && newV.length > 20) {
				changeKey(newV, 'beforeShow');
				if (!saveTimeOut.current) {
					saveTimeOut.current = window.setTimeout(() => {
						message.info('正在保存');
						handleSaveTemplate();
					}, 500);
				}
			}
		}
	};
钟是志's avatar
钟是志 committed
72

钟是志's avatar
钟是志 committed
73 74 75 76 77 78 79 80 81 82 83
	useEffect(
		() => {
			if (lowCodeEdit?.beforeShow) {
				window.addEventListener('storage', handleLocalStorageSave);
			}
			return () => {
				window.removeEventListener('storage', handleLocalStorageSave);
			};
		},
		[lowCodeEdit.beforeShow],
	);
钟是志's avatar
钟是志 committed
84

钟是志's avatar
钟是志 committed
85 86 87 88
	const editFullScreen = () => {
		localStorage.setItem('edit-low-code-local', JSON.stringify(lowCodeEdit));
		if (process.env.NODE_ENV === 'development') {
			window.open(
89
				'https://yx.bpi.edu.cn/wisdomYsgz/#/quanPingBianji?id=' + lowCodeEdit.TEMPLATE,
钟是志's avatar
钟是志 committed
90
			);
91
			return;
钟是志's avatar
钟是志 committed
92 93
		}
		window.open(
94
			window.location.origin + '/wisdomYsgz/#/quanPingBianji?id=' + lowCodeEdit.TEMPLATE,
钟是志's avatar
钟是志 committed
95 96
		);
	};
钟是志's avatar
钟是志 committed
97

钟是志's avatar
钟是志 committed
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
	return (
		<>
			<Drawer
				title="编辑"
				placement="right"
				onClose={onClose}
				visible={showEdit}
				width={700}
				maskClosable={false}>
				<TextArea
					autoSize={{
						minRows: 5,
						maxRows: 10,
					}}
					value={JSON.stringify(templateData, null, '\t')}
					disabled={true}
					style={{ marginBottom: '20px' }}
				/>
钟是志's avatar
钟是志 committed
116

钟是志's avatar
钟是志 committed
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
				{loading ? (
					'正在保存中请勿编辑'
				) : (
					<>
						挂载前执行
						<ButtonDiy name={'全屏编辑'} handleClick={editFullScreen} type={'danger'} />
						<TextArea
							autoSize={{
								minRows: 10,
								maxRows: 15,
							}}
							defaultValue={lowCodeEdit?.beforeShow || ''}
							onChange={(e) => {
								changeKey(e.target.value, 'beforeShow');
							}}
							// readOnly={true}
							style={{ marginBottom: '20px' }}
						/>
						<Button onClick={handleSaveTemplate} type={'primary'}>
							保存
						</Button>
					</>
				)}
			</Drawer>
			<div
				data-edit-point={'EditDrawer'}
				className={styles.editPoint}
				style={{
145
					display: getUserInfo().stuNo === 'admin' || process.env.NODE_ENV === 'development' ? 'block' : 'none',
钟是志's avatar
钟是志 committed
146 147 148 149 150 151 152 153
				}}
				onClick={() => {
					setShowEdit(!showEdit);
				}}>
				模板编辑
			</div>
		</>
	);
钟是志's avatar
钟是志 committed
154 155 156
}

export default connect(({ lowCode_design }) => {
钟是志's avatar
钟是志 committed
157 158 159
	return {
		templateData: lowCode_design.templateData,
	};
钟是志's avatar
钟是志 committed
160
})(EditDrawer);