fix: '事件管理图片库'

src/pages/bsmanager/workOrder/incident/PreviewModal.jsx

+/* 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;

src/pages/bsmanager/workOrder/incident/PreviewModal.less

+.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;
+}

src/pages/bsmanager/workOrder/incident/incident.less

@@ -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);

src/pages/platformCenter/integratedLogin/PreviewModal.jsx

@@ -31,6 +31,8 @@ const PreviewModal = props => {
   }, [visible]);
 
   const update = () => {
+    console.log(keepImgeUrl);
+    console.log(imageUrl);
     GetIntegratedloginIcon()
       .then(res => {
         if (res.code === 0) {

src/pages/productCenter/webConfig/menuconfig/ParmarModal.jsx

@@ -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: '请填写参数' }]}

src/services/integratedLogin/api.js

@@ -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);