Skip to content

W
WebPublic
提交 63d087b7 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

增加签章组件

上级 3d4ca361
隐藏空白字符变更
内嵌 并排
正在显示 包含 473 行增加 和 24 行删除
FormInsertDiy/AffairPage/publicApiService.js
浏览文件 @ 63d087b7
......@@ -6,10 +6,7 @@
* */
import { apiRequest } from '../request';
import { getFormArrayConfig } from '../config/index';
import { setHuanGeToken } from '@/utils/authority';
import { getOneStopConfig, isJSON } from '@/baseComponent/utils';
import config from '@/config/config';
const giveValue = (x) => {
if (x && x.rows) {
......
one_stop_public/libs/PictureSignature/PictureSignature.js 0 → 100644
浏览文件 @ 63d087b7
import React, { useState, useEffect, useRef } from 'react';
import styles from './styles.less';
import { Modal, Button, Icon } from 'antd';
import ShowItem, { dragEventList } from './ShowItem';
import { apiRequest } from "../../utils/request";
let fakeFileInfo = {
path: '/u/202112/09145847wsz2.jpg',
name: '摇摇后摇',
};
export default function PictureSignature({
json,
// fileInfo,
basicUrl,
openEdit = true,
}) {
let fileInfo = fakeFileInfo;
const [showModal, setShowModal] = useState(false);
const [otherProps, setOtherProps] = useState({});
const [imageInfo, setImageInfo] = useState({
width: 100,
height: 100,
});
const changeShowModal = () => {
setShowModal(!showModal);
};
useEffect(() => {
if (json.otherProps) {
try {
let func = new Function(json.otherProps);
let otherPropsX = func();
setOtherProps(otherPropsX);
dragEventList(setOtherProps, otherPropsX);
let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
image.src = basicUrl + fileInfo?.path;
image.onload = () => {
setImageInfo({
width: image.width,
height: image.height,
});
};
console.log(otherPropsX);
} catch (e) {
console.log('签章组件 其余配置项出错,没有返回一个正确的值');
return false;
}
}
}, [json.otherProps]);
const { ModalProps, signConfig, footerButtons } = otherProps;
const handleClickButton = (clickType) => {
switch (clickType){
case 'save':
apiRequest('/ImageLibApi/merge', {
background: fileInfo?.path,
content: JSON.stringify({
objs: otherProps.signConfig,
}),
})
break;
case 'restore':
let func = new Function(json.otherProps);
let otherPropsX = func();
setOtherProps(otherPropsX);
break;
default:
return true;
}
}
const Footer = () => {
if (openEdit) {
return footerButtons.map(g => {
return (
<Button type={g.type}
key={g.key}
onClick={()=>{handleClickButton(g.clickType)}}
>
{g.name}
</Button>
);
});
}else{
return null;
}
};
return (
<div className={styles.outSideDiv}>
{fileInfo && fileInfo?.path && (
<img
className={styles.onePic}
src={basicUrl + fileInfo?.path}
alt={fileInfo.name}
onClick={changeShowModal}
/>
)}
{showModal && (
<Modal
visible={true}
destroyOnClose={true}
maskClosable={false}
onCancel={changeShowModal}
className={styles.ModalClass}
footer={<Footer />}
title={'图片签章'}
width={'90vw'}
bodyStyle={{
minHeight: '80vh',
overflow: 'auto',
}}
{...ModalProps}
>
<div className={styles.modalParentDiv}>
{openEdit && ( // 开启签章功能
<div
className={styles.modalDiv}
style={{
backgroundImage: `url(${basicUrl + fileInfo?.path})`,
width: imageInfo.width,
height: imageInfo.height,
}}
alt={'拖拽区域'}
draggable={false}
id={'dropZone'}
>
{Array.isArray(signConfig) &&
signConfig.map(g => {
return (
<div
key={g.key}
data-mes={g.key}
draggable={false}
className={styles.oneSetItem}
style={{
top: g.y,
left: g.x,
}}
>
<div className={styles.draggableIcon} draggable={true}>
<Icon type="edit" />
</div>
<ShowItem {...g}
basicUrl={basicUrl}
/>
</div>
);
})}
</div>
)}
{!openEdit && ( // 不开启签章功能 只是预览图片
<div className={styles.readOnlyImage}>
<img
src={basicUrl + fileInfo?.path}
alt={fileInfo.name}
style={{ maxWidth: '95vw' }}
/>
</div>
)}
</div>
</Modal>
)}
</div>
);
}
one_stop_public/libs/PictureSignature/ShowItem.js 0 → 100644
浏览文件 @ 63d087b7
import React from "react";
const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => {
switch (type) {
case 'image':
return (
<img
draggable={false}
key={otherInfo.key}
src={basicUrl + otherInfo.path}
style={{
// border: '1px solid red',
cursor: 'pointer',
width: otherInfo.w,
height: otherInfo.h,
}}
/>
);
case 'text':
return (
<p
draggable={false}
key={otherInfo.key}
style={{
// border: '1px solid red',
cursor: 'pointer',
fontSize: otherInfo?.fontSize ? otherInfo.fontSize + 'px' : undefined,
fontFamily: otherInfo?.fontFamily ? otherInfo.fontFamily : undefined,
fontWeight: otherInfo?.fontStyle ? otherInfo.fontStyle : undefined,
color: otherInfo?.color ? otherInfo.color : undefined,
}}
>
{otherInfo.word}
</p>
);
}
};
export const dragEventList = (setOtherProps, otherProps) => {
let draggedRef = null;
document.addEventListener(
'dragstart',
function(event) {
// 保存拖动元素的引用(ref.)
draggedRef = event.target;
// 使其半透明
event.target.style.opacity = 0.5;
},
false,
);
document.addEventListener(
'dragend',
(event) => {
// 重置透明度
event.target.style.opacity = '';
},
false,
);
/* 放下目标节点时触发事件 */
document.addEventListener(
'dragover',
(event) => {
// 阻止默认动作
event.preventDefault();
},
false,
);
document.addEventListener(
'drop',
(event) => {
// 阻止默认动作（如打开一些元素的链接）
event.preventDefault();
// 将拖动的元素到所选择的放置目标节点中
if (event.target.id === 'dropZone') {
let left = event.offsetX;
if (left > event.target.offsetWidth - draggedRef.offsetWidth - 10) {
console.log('拖拽到了图片区域外部,不能进行拖拽');
return false;
}
let top = event.offsetY;
let key = draggedRef?.dataset?.mes || draggedRef?.parentNode?.dataset?.mes;
let item = otherProps.signConfig.find((g) => {
return g.key === key;
});
if(!item){
return false;
}
// left = left - (item.x /2 );
// top = top - (item.y / 2);
item.x = left;
item.y = top;
console.log(left, top);
setOtherProps({
...otherProps,
signConfig: otherProps.signConfig,
})
draggedRef.style.left = left; // `${left}px`;
draggedRef.style.top = top; // `${top}px`;
}
return true;
},
false,
);
}
export default ShowItem
one_stop_public/libs/PictureSignature/styles.less 0 → 100644
浏览文件 @ 63d087b7
.outSideDiv{
display: grid;
grid-template-rows: 1fr;
grid-auto-flow: column;
justify-items: center;
align-items: center;
.onePic{
width: 100px;
height: auto;
cursor: pointer;
}
}
.modalDiv{
display: grid;
width: 100%;
//grid-template-columns: 100px 1fr;
//grid-template-rows;
position: relative;
overflow: auto;
background-repeat: no-repeat;
background-position: center;
.rightSide{
overflow: auto;
}
}
.readOnlyImage{
width: 100%;
display: grid;
place-items: center;
min-height: 60vh;
}
.oneSetItem{
position: absolute;
//margin-top: 20px;
border: 1px solid red;
p{
margin-bottom: 0;
}
}
.modalParentDiv{
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
.ModalClass{
:global{
.ant-modal-footer{
text-align: center;
}
}
}
.draggableIcon{
position: absolute;
left: 10;
top: 10;
}
one_stop_public/libs/UploadCom.js
浏览文件 @ 63d087b7
......@@ -47,12 +47,11 @@ class UploadCom extends React.Component {
previewImage: '',
};
this.otherProps = {};
console.log(props);
if (props.json?.otherProps) {
this.otherProps = props.json?.otherProps;
try {
this.otherProps = new Function(this.otherProps)();
console.log(this.otherProps);
// console.log(this.otherProps);
} catch (e) {
}
}
......
one_stop_public/tableCompon/index.jsx
浏览文件 @ 63d087b7
......@@ -59,13 +59,15 @@ import DraftEditorCom from '../App/DraftEditorCom';
import MobileItem from './MobileItem';
import MobileCascader from './CascaderDiy/MobileCascader';
import { equal, errorHandler, getBase64, getRender, isJSON } from './Split_Index/staticInfo';
import PictureSignature from "@/webPublic/one_stop_public/libs/PictureSignature/PictureSignature";
const { TextArea } = Input;
const { Option } = Select;
const { RangePicker } = DatePicker;
const giveRender = (column = {}) => {
if (!column?.render) { // 超过30个字的字段 自动隐藏
if (!column?.render) {
// 超过30个字的字段 自动隐藏
column.render = (text, record) => {
if (text && typeof text === 'string' && text.length > 30) {
return <span title={text}>{text.slice(0, 30)}</span>;
......@@ -74,7 +76,7 @@ const giveRender = (column = {}) => {
};
}
return column;
}
};
@connect(({ DataColumn, SqlManageEntity, formList, loading }) => ({
DataColumn,
......@@ -398,7 +400,6 @@ export default class tableCom extends Component {
column = giveRender(column);
columns.push(column);
} else {
break;
......@@ -1550,6 +1551,26 @@ export default class tableCom extends Component {
''
);
break;
case 'PictureSignature':
const filesX = value.files || [];
cm = (
<>
<ul>
{filesX.map((f, index2) => {
return (
<li key={index2}>
<a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
{f.name}
</a>
</li>
);
})}
</ul>
{get === 'mobile' ? <br /> : ''}
</>
);
break;
case 'UploadCom':
const files = value.files || [];
......@@ -1557,16 +1578,6 @@ export default class tableCom extends Component {
<>
<ul>
{files.map((f, index2) => {
// 这里不再直接显示图片. 姚鑫国说的 2021年11月15日
// if (!this.props.isPrint && (f.path.indexOf('.png') !== -1 || f.path.indexOf('.jpg') !== -1)) {
// return (
// <img
// key={index2}
// style={{ width: 100, height: 100 }}
// src={queryApiActionPath() + f.path}
// />
// );
// }
return (
<li key={index2}>
<a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
......@@ -2007,7 +2018,65 @@ export default class tableCom extends Component {
}
break;
case 'PictureSignature':
if (!isEmpty(obj[dataColumn.base52])) {
// 首先判断是否为空对象
let ary;
/**
* 判断返回值是否为JSON字符串,不是则直接使用
*/
if (isJSON(obj[dataColumn.base52])) {
ary = JSON.parse(obj[dataColumn.base52]);
} else {
ary = obj[dataColumn.base52];
}
if (!!ary.files) {
// 然后判断存在多个附件的数组是否存在
const files = !isEmpty(ary) ? ary.files : [];
cm = (
<ul className={styles.imageUl}>
{files.map((f, index2) => {
return (
<li key={f.path}>
<PictureSignature json={json}
basicUrl={queryApiActionPath()}
fileInfo={f}
/>
</li>
);
})}
</ul>
);
} else {
const files = !isEmpty(ary) ? ary : [];
cm = (
<ul className={styles.imageUl}>
{Array.isArray(files) &&
files.map((f, index2) => {
return (
<li key={f.path}>
<PictureSignature json={json}
basicUrl={queryApiActionPath()}
fileInfo={f}
/>
</li>
);
})}
</ul>
);
}
} else {
cm = (
<span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
</span>
);
}
break;
case 'UploadCom':
/**
* 查找不到数据 添加判断
......@@ -2028,7 +2097,7 @@ export default class tableCom extends Component {
// 然后判断存在多个附件的数组是否存在
const files = !isEmpty(ary) ? ary.files : [];
cm = (
<ul>
<ul className={styles.imageUl}>
{files.map((f, index2) => {
// if (f.path.indexOf('.png') != -1 || f.path.indexOf('.jpg') != -1) {
// return (
......@@ -2063,7 +2132,7 @@ export default class tableCom extends Component {
} else {
const files = !isEmpty(ary) ? ary : [];
cm = (
<ul>
<ul className={styles.imageUl}>
{Array.isArray(files) &&
files.map((f, index2) => {
// if (f.filePath.indexOf('.png') != -1 || f.filePath.indexOf('.jpg') != -1) {
......@@ -2664,9 +2733,11 @@ export default class tableCom extends Component {
case 'Cascader':
//zsz
const filterF = function filter(inputValue, path) {
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
const filterF = function filter(inputValue, path) {
return path.some(
option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
);
};
cm = getFieldDecorator(dataColumn.base52, {
initialValue: initValue,
rules:
......@@ -2912,7 +2983,38 @@ export default class tableCom extends Component {
);
}
break;
case 'PictureSignature': // 签章组件
let filesPictureSignature = [];
if (initValue != null && !isEmpty(initValue.files)) {
filesPictureSignature = initValue.files;
}
cm = getFieldDecorator(dataColumn.base52, {
initialValue: { files: filesPictureSignature },
})(
<PictureSignature
json={json}
disabled={disabled || isPreview}
/>,
);
if (
get === 'mobile' &&
((json.isMobileLabel != null && json.isMobileLabel) ||
(json.isMobileLabel == null && json.isLabel)) &&
title
) {
cm = (
<MobileItem
isPreview={isPreview}
labelCol={{ span: json.labelSpan }}
wrapperCol={{ span: json.wrapperSpan }}
label={title}
>
{cm}
</MobileItem>
);
}
break;
case 'UploadCom':
let files = [];
// if (initValue != null) {
......
one_stop_public/tableCompon/style.less
浏览文件 @ 63d087b7
......@@ -239,3 +239,16 @@
}
}
.imageUl{
display: grid;
//grid-template-rows: 1fr;
grid-auto-flow: column;
justify-items: center;
align-items: center;
column-gap: 10px;
li{
width: 120px;
min-height: 50px;
}
}
zyd_public/components/DraggableSetting/index.js
浏览文件 @ 63d087b7
......@@ -14,7 +14,7 @@ import { ModalConfirm } from '@/baseComponent/Modal';
export default class FormatSetting extends Component {
dragEventList = () => {
const { formatSettingObject, updateFormatSettingObject } = this.props;
const { updateFormatSettingObject } = this.props;
let draggedRef = null;
document.addEventListener(
'dragstart',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论