Commit 6a8cebfd authored by 皮倩雯's avatar 皮倩雯

fix: '事件管理图片库'

parent 0e186560
Pipeline #58488 waiting for manual action with stages
......@@ -35,6 +35,8 @@ import {
Menu,
Button,
Tooltip,
Upload,
Image,
} from 'antd';
import {
GetCM_Event_LoadEventTypeTable,
......@@ -44,11 +46,12 @@ import {
GetCM_Event_QueryEventType,
CM_Event_AddEventTable,
} from '@/services/standingBook/api';
import { PlusOutlined, DownOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { PlusOutlined, DownOutlined, InfoCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './incident.less';
import ChangeAdd from './changeAdd';
import ChangeEdit from './changeEdit';
import RMSComponents from '@/components/RolePmSite/index';
import PreviewModal from './PreviewModal';
const { Option } = Select;
const AddModal = props => {
......@@ -479,6 +482,11 @@ const AddModal = props => {
const [chooseGroupName, setChooseGroupName] = useState(['角色', '部门', '站点']);
const [keepFiled, setKeepFiled] = useState([]);
const { Item } = Form;
const [imageUrl, setImageUrl] = useState();
const [keepImgeUrl, setKeepImgeUrl] = useState('');
const [im, setIm] = useState();
const [previewModal, setPreviewModal] = useState(false);
const [show, setShow] = useState('hidden');
const onSubmit = () => {
form.validateFields().then(validate => {
......@@ -617,6 +625,16 @@ const AddModal = props => {
setType1(res.data.root.BusinessType);
setOrder(res.data.root.Order);
form.setFieldsValue({ ...res.data.root });
if (res.data.root.ImageExpression) {
setImageUrl(window.location.origin + `/${res.data.root.ImageExpression}`);
setIm(res.data.root.ImageExpression);
} else {
form.setFieldsValue({
ImageExpression: '',
});
setImageUrl('');
setIm('');
}
LoadEventFields({
eventTableName: res.data.root.TableName,
distinctFields: '',
......@@ -672,6 +690,9 @@ const AddModal = props => {
setReportFromMobile(false);
setReportFromWeb(false);
form.resetFields();
setImageUrl('');
setIm('');
setKeepImgeUrl('');
setValue('');
setChee('');
setSummaryIsShow('none');
......@@ -927,8 +948,6 @@ const AddModal = props => {
};
const formateArrDataA = (initialArr, name) => {
console.log(initialArr);
console.log(name);
// 判定传参是否符合规则
if (!(initialArr instanceof Array)) {
return '请传入正确格式的数组';
......@@ -943,7 +962,6 @@ const AddModal = props => {
nameArr.push(initialArr[i][`${name}`]);
}
}
console.log(nameArr);
//新建一个包含多个list的结果对象
let tempObj = {};
// 根据不同的"name"生成多个数组
......@@ -953,12 +971,10 @@ const AddModal = props => {
if (initialArr[j][`${name}`] == nameArr[k]) {
// 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
console.log(initialArr[j]);
tempObj[nameArr[k]].push(initialArr[j]);
}
}
}
console.log(tempObj);
for (let key in tempObj) {
let arr = [];
tempObj[key].map(item => {
......@@ -971,20 +987,16 @@ const AddModal = props => {
const groupArr = (initialArr, name) => {
let list = {};
console.log(initialArr);
initialArr.data.map(i => {
console.log(i);
let ar = [];
i.root.map(j => {
let ss = {};
ss.label = j.Name;
ss.value = j.ID.toString();
ar.push(ss);
// console.log(ss);
});
list[i.groupType] = ar;
});
console.log(list);
return list;
};
......@@ -1272,6 +1284,33 @@ const AddModal = props => {
}
};
const pictruePreview = () => {
setPreviewModal(true);
};
const uploadButton = (
<div>
<div
style={{
marginTop: 8,
}}
>
请从图片库中选择
</div>
</div>
);
const onOk = props => {
console.log(props);
if (props) {
setImageUrl(window.location.origin + `/${props}`);
setIm(props);
setKeepImgeUrl(props);
form.setFieldsValue({ ImageExpression: `${props}` });
}
setShow('hidden');
};
return (
<Drawer
title={type === 'add' ? '添加事件类型' : '编辑事件类型'}
......@@ -1287,7 +1326,7 @@ const AddModal = props => {
}
// confirmLoading={loading}
>
<Form form={form} style={{ overflowY: 'scroll' }}>
<Form form={form}>
<Row>
<Col span={15}>
<Item
......@@ -1730,6 +1769,7 @@ const AddModal = props => {
<Input placeholder="请输入处理视图" allowClear />
</Item>
</Col>
{/* <Col span={24}>
<Item label="关联事件" name="RelatedEvents" labelCol={{ span: 5 }}>
<Input placeholder="请输入关联事件" allowClear />
......@@ -1773,6 +1813,77 @@ const AddModal = props => {
</Item>
</Col>
</Row>
<Row>
<Col span={10}>
<Item
label="图标"
name="ImageExpression"
style={{ height: '112px' }}
labelCol={{ span: 12 }}
>
{imageUrl ? (
<div
style={{
width: '104px',
height: '104px',
border: '1px solid #d9d9d9',
borderRadius: '2px',
padding: '8px',
position: 'relative',
}}
onMouseEnter={() => setShow('visible')}
onMouseLeave={() => setShow('hidden')}
>
<img
src={imageUrl}
alt="singleFile"
style={{
width: '100%',
backgroundColor: '#2881a1',
}}
/>
{show == 'visible' ? (
<>
<div className={styles.imgg} />
<DeleteOutlined
onClick={() => {
setImageUrl('');
setIm('');
setKeepImgeUrl('');
form.setFieldsValue({ ImageExpression: '' });
}}
style={{
position: 'relative',
fontSize: '18px',
left: '34px',
top: '10px',
color: 'white',
}}
/>
</>
) : (
<></>
)}
</div>
) : (
<Image
width="104px"
// height={100}
src="error"
fallback="data:image/png;base64,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"
/>
)}
</Item>
</Col>
<Col span={12}>
<Item>
<Button type="primary" onClick={pictruePreview} style={{ marginTop: '33px' }}>
从图片库中选择
</Button>
</Item>
</Col>
</Row>
</Form>
{/* <ChangeAdd
visible={isVisible}
......@@ -1782,6 +1893,16 @@ const AddModal = props => {
filed11={filed1}
pickItem={pickItem}
/> */}
<PreviewModal
visible={previewModal}
onCancel={() => {
setPreviewModal(false);
}}
imageUrl={im}
keepImgeUrl={keepImgeUrl}
type={type}
callBackSubmit={onOk}
/>
<RMSComponents
visible={isVisible}
onCancel={onCancel}
......
/* eslint-disable no-useless-escape */
/* eslint-disable no-lonely-if */
/* eslint-disable no-unused-expressions */
/* eslint-disable prefer-template */
/* eslint-disable react/jsx-boolean-value */
import React, { useState, useEffect } from 'react';
import { Modal, Collapse, notification, Upload, Input, Empty } from 'antd';
import { GetImageOrderByFile, GetImageOrderByPath } from '@/services/integratedLogin/api';
import classnames from 'classnames';
import styles from './PreviewModal.less';
const { Panel } = Collapse;
const PreviewModal = props => {
const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl, type } = props;
const [imgData, setImgData] = useState([]);
const [pickItem, setPickItem] = useState('');
const [chooseItem, setChooseItem] = useState('');
const [keepItem, setKeepItem] = useState('');
const [keepGroupName, setKeepGroupName] = useState([]);
const [search, setSearch] = useState('');
const { Search } = Input;
useEffect(() => {
console.log(imageUrl);
console.log(keepImgeUrl);
if (visible) {
setChooseItem(imageUrl);
update();
} else {
setPickItem('');
setKeepItem('');
setChooseItem('');
}
}, [visible]);
const update = () => {
GetImageOrderByFile({
maxLength: 279.1525423728813,
path: 'assets/images/caseCenter/events',
})
.then(resdata => {
if (resdata.code === 0) {
let bb = [];
let aa = [];
resdata.data.map((i, a) => {
if (i.list.length > 0) {
bb.push(i);
aa.push(i.text);
}
});
setKeepGroupName(aa);
setImgData(bb);
resdata.data.map(i => {
i.list.map((j, index) => {
if (keepImgeUrl) {
if (j.value == keepImgeUrl) {
setKeepItem(i.text);
setPickItem(index);
setChooseItem(j.value);
}
} else {
if (chooseItem == j.value) {
setKeepItem(i.text);
setPickItem(index);
setChooseItem(j.value);
}
}
});
});
} else {
notification.error({
message: '获取失败',
description: resdata.msg,
});
}
})
.catch(err => {
console.error(err);
});
};
// 提交
const onSubmit = () => {
if (keepItem) {
let aa = imgData.find(i => i.text === keepItem);
callBackSubmit(chooseItem);
}
onCancel();
};
const handleCollapseChange = key => {
setKeepGroupName(key);
};
const onSearch = e => {
setSearch(e.target.value);
};
const submitSearch = () => {
GetImageOrderByPath({
maxLength: 279.1525423728813,
path: 'assets/images/caseCenter/events',
fileName: search,
})
.then(resdata => {
if (resdata.code === 0) {
let bb = [];
let aa = [];
resdata.data.map((i, a) => {
if (i.list.length > 0) {
bb.push(i);
aa.push(i.text);
}
});
setKeepGroupName(aa);
setImgData(bb);
resdata.data.map(i => {
i.list.map((j, index) => {
console.log(j.value);
console.log(chooseItem);
if (`/${chooseItem}` == j.value) {
setKeepItem(i.text);
setPickItem(index);
console.log(j.value);
setChooseItem(j.value);
console.log(i.text);
console.log(index);
}
});
});
} else {
notification.error({
message: '获取失败',
description: resdata.msg,
});
}
})
.catch(err => {
console.error(err);
});
};
return (
<Modal
title="图片库"
style={{ top: '100px' }}
width="1000px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
forceRender={true}
getContainer={false}
>
<Search
placeholder="搜索图库"
// size="middle"
value={search}
enterButton
style={{ width: '50%' }}
onChange={e => onSearch(e)}
onSearch={submitSearch}
allowClear
/>
{imgData.length > 0 ? (
<Collapse
style={{ height: '600px', overflow: 'scroll', marginTop: '20px' }}
bordered={false}
activeKey={keepGroupName}
onChange={handleCollapseChange}
>
{imgData.map((i, j) => {
return (
<Panel
header={i.text}
key={i.text}
style={{
marginBottom: '24px',
overflow: 'hidden',
border: '0px',
background: '#f7f7f7',
borderRadius: '2px',
}}
>
{i.list &&
i.list.map((k, index) => {
return (
<div className={styles.divItem} key={index}>
<img
src={window.location.origin + `/${k.value}`}
className={classnames({
[styles.imgHidden]: k.value !== chooseItem,
[styles.imgItem]: k.value == chooseItem,
})}
height="80px"
width="80px"
alt="集成登录默认"
onClick={e => {
setPickItem(index);
setKeepItem(i.text);
setChooseItem(k.value);
}}
/>
<div style={{ textAlign: 'center' }}>
<p>{k.text}</p>
</div>
</div>
);
})}
</Panel>
);
})}
</Collapse>
) : (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description="暂无数据"
style={{ height: '600px', margin: '20px auto 0px auto', paddingTop: '50px' }}
/>
)}
</Modal>
);
};
export default PreviewModal;
.divItem {
display: inline-block;
margin-left: 30px;
margin-bottom: 30px;
// width: 80px;
}
.imgItem {
border: 3px solid rgb(24, 144, 255);
box-sizing: border-box;
border-radius: 5px;
display: inline-block;
background-color: #2881a1;
}
.imgHidden {
border: none;
display: inline-block;
background-color: #2881a1;
}
.imgHidden:hover {
border: 3px solid rgb(24, 144, 255);
box-sizing: border-box;
border-radius: 5px;
display: inline-block;
}
.iconItem {
// position: relative;
// left: 70px;
// top: 10px;
// font-size: 17px;
margin-top: -3px;
font-size: 17px;
float: right;
margin-left: -10px;
}
.iconHidden {
display: none;
}
.iconHidden:hover {
// position: relative;
// left: 70px;
// top: 10px;
// font-size: 17px;
margin-top: -3px;
font-size: 17px;
float: right;
margin-left: -10px;
}
.table {
background-color: white;
height: calc(100vh - 130px);
margin-top: 10px;
overflow-y: scroll;
}
.ant-card-body {
padding: 0px 24px 24px 17px;
}
.sel {
width: 200px;
}
.icon {
margin-top: -5px !important;
vertical-align: text-bottom;
}
.redText {
color: red;
}
......@@ -271,6 +271,20 @@
margin-left: 20px;
}
}
.imgg {
position: absolute;
top: 0;
left: 0;
height: 104px;
width: 104px;
background: rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
.imgg :hover {
opacity: 0.7;
width: '100%';
background-color: '#2881a1';
}
.containerBox {
width: 100vm;
height: calc(100vh - 90px);
......
......@@ -31,6 +31,8 @@ const PreviewModal = props => {
}, [visible]);
const update = () => {
console.log(keepImgeUrl);
console.log(imageUrl);
GetIntegratedloginIcon()
.then(res => {
if (res.code === 0) {
......
......@@ -54,11 +54,12 @@ const ParmarModal = props => {
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Space
key={key}
style={{ display: 'flex', marginBottom: 8, justifyContent: 'center' }}
style={{ display: 'flex', marginBottom: '5px', justifyContent: 'center' }}
align="baseline"
>
<Form.Item
{...restField}
style={{ marginBottom: '5px' }}
name={[name, 'key']}
fieldKey={[fieldKey, 'key']}
validateTrigger={['onChange', 'onBlur']}
......@@ -83,6 +84,7 @@ const ParmarModal = props => {
</Form.Item>
<Form.Item
{...restField}
style={{ marginBottom: '5px' }}
name={[name, 'value']}
fieldKey={[fieldKey, 'value']}
rules={[{ required: true, message: '请填写参数' }]}
......
......@@ -2,7 +2,7 @@
* @Description:
* @Author: leizhe
* @Date: 2022-06-09 10:01:10
* @LastEditTime: 2022-07-19 18:38:45
* @LastEditTime: 2022-08-24 11:16:18
* @LastEditors: leizhe
*/
import { get, post, PUBLISH_SERVICE, CITY_SERVICE } from '@/services/index';
......@@ -36,3 +36,11 @@ export const AddIntegratedloginSetting = param =>
// 集成登录-获取集成登录网站配置
export const GetIntegratedloginSetting = param =>
get(`${PUBLISH_SERVICE}/GetIntegratedloginSetting`, param);
// 根据路径选择图片
export const GetImageOrderByFile = param =>
get(`${PUBLISH_SERVICE}/FileCenter/GetImageOrderByFile`, param);
// 展示路径下所有图片
export const GetImageOrderByPath = param =>
get(`${PUBLISH_SERVICE}/FileCenter/GetImageOrderByPath`, param);
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