fix: '事件和流程审查添加快速搜索功能'

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

@@ -58,6 +58,8 @@ import ProcessModal from './ProcessModal';
 import SortModal from './SortModal';
 import ViewModal from './ViewModal';
 
+const { Search } = Input;
+
 const incident = () => {
   const history = useHistory();
   const [treeLoading, setTreeLoading] = useState(false);
@@ -84,6 +86,8 @@ const incident = () => {
   const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
   const [keepIdValue, setKeepIdValue] = useState([]);
   const [editBusinessVisible, setEditBusinessVisible] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
   const [addForm] = Form.useForm();
   const [file, setFile] = useState(); // 上传文件信息
 
@@ -95,7 +99,7 @@ const incident = () => {
       width: 150,
       render: (text,record) => (
         <Tooltip placement="topLeft" title={text}>
-          {text}
+          {searchStyle(text)}
         </Tooltip>
       ),
     },
@@ -106,7 +110,7 @@ const incident = () => {
       width: 200,
       render: record => (
         <Tooltip placement="topLeft" title={record}>
-          {record}
+          {searchStyle(record)}
         </Tooltip>
       ),
     },
@@ -316,7 +320,9 @@ const incident = () => {
 
   useEffect(() => {
     setTreeLoading(true);
-    GetCM_Event_LoadEventTable().then(res => {
+    GetCM_Event_LoadEventTable({
+      filter: searchValue
+    }).then(res => {
       setTreeLoading(false);
       if (res.code === 0) {
         console.log(res.data);
@@ -375,6 +381,11 @@ const incident = () => {
         console.log(rember);
         console.log(newArr[rember]);
         console.log(newArr, 'newArr');
+        if(!newArr[rember]){
+          setRember(0)
+          setPickItem(newArr[0]);
+          setRember1(newArr[0])
+        }
         setTreeData(newArr);
       } else {
         notification.error({
@@ -582,6 +593,30 @@ const incident = () => {
       });
   };
 
+  // 搜索
+  const handleSearch = text => {
+    setFlag(flag + 1);
+    setShowSearchStyle(true);
+  };
+  // 搜索框改变时存储输入的值
+  const handleChange = e => {
+    setSearchValue(e.target.value);
+  };
+
+  // 模糊查询匹配的样式
+  const searchStyle = val => {
+    let n;
+    if (showSearchStyle) {
+      n = val.replace(
+        new RegExp(searchValue, 'g'),
+        `<span style='color:red'>${searchValue}</span>`,
+      );
+    } else {
+      n = val;
+    }
+    return <div dangerouslySetInnerHTML={{ __html: n }} />;
+  };
+
   return (
     <div className={styles.incidentContainer}>
       <div className={styles.contentContainers}>
@@ -678,14 +713,26 @@ const incident = () => {
             [styles.userContainerHide]: !treeVisible,
           })}
         >
-          <div style={{ height: '50px' }}>
+          <div style={{ height: '50px', lineHeight: '50px' }}>
             {pickItem?<span><span className={styles.titleName}>【{pickItem}】</span>
               <span>
                 <Tooltip title="编辑业务类型名称">
                   <FormOutlined className={styles.iconSize} onClick={editBusiness} />
                 </Tooltip>
               </span></span>:null}
-            <span style={{ float: 'right', marginRight: '10px', marginTop: '10px' }}>
+            <span>
+              <span style={{  marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
+              <Search
+                allowClear
+                placeholder='请输入事件类型或事件主表'
+                onSearch={handleSearch}
+                onChange={handleChange}
+                value={searchValue}
+                enterButton
+                style={{ width: '300px',marginTop: '10px' }}
+              />
+            </span>
+            <span className={styles.buttonList}>
               <Upload showUploadList={false} accept=".json" beforeUpload={beforeUpload}>
                 <Button style={{ marginLeft: '10px' }} type="primary" ghost>
                   <div style={{ display: 'flex', alignItems: 'center' }}>

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

@@ -421,6 +421,18 @@
   line-height: 50px;
 }
 
+.buttonList {
+  float: right;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  
+  >span {
+    display: flex;
+  }
+}
+
 // .panda-pro-pages-platform-center-bsmanager-work-order-incident-filed_listItem {
 //   display: flex;
 // }
\ No newline at end of file

src/pages/bsmanager/workOrder/workFlow/flow.jsx

@@ -12,6 +12,7 @@ import {
   notification,
   message,
   Button,
+  Input,
 } from 'antd';
 import {
   DoubleLeftOutlined,
@@ -30,6 +31,7 @@ import Order from './flowComponents/Order';
 import Timelimit from './flowComponents/Timelimit';
 import styles from './flow.less';
 
+const { Search } = Input;
 const Flow = () => {
   const history = useHistory();
   const [tableData, setTableData] = useState([]); // 流程对应的回显的表格
@@ -40,6 +42,8 @@ const Flow = () => {
   const [treeVisible, setTreeVisible] = useState(true);
   const [pickItemIndex, setPickItemIndex] = useState(0); // 选中流程索引
   const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
+  const [searchValue, setSearchValue] = useState('');
+  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
   const [visible, setVisible] = useState({
     processConfig: false,
     order: false,
@@ -47,10 +51,12 @@ const Flow = () => {
   }); // 弹窗显示
   // 初始化
   useEffect(() => {
-    // 初始化流程列表
-    getProcessData();
-    if (history.location.state && history.location.state.pickItemIndex) {
+    if (history.location.state && history.location.state.dataSource) {
       setDataSource('back');
+      getProcessData(history.location.state.searchValue);
+    } else {
+      // 初始化流程列表
+      getProcessData();
     }
   }, []);
   // 表格数据改变后处理
@@ -62,6 +68,8 @@ const Flow = () => {
     if (dataSource === 'back') {
       setPickItemIndex(history.location.state.pickItemIndex);
       setTableData(processData[history.location.state.pickItemIndex].root);
+      setSearchValue(history.location.state.searchValue);
+      setDataSource('');
     } else {
       setTableData(processData[pickItemIndex].root);
     }
@@ -71,13 +79,19 @@ const Flow = () => {
     setVisible({ ...visible, [key]: value });
   };
   // 初始化流程列表
-  const getProcessData = () => {
+  const getProcessData = (filter = '') => {
     setTreeLoading(true);
-    reloadFlows()
+    if (searchValue) {
+      setPickItemIndex(0);
+    }
+    reloadFlows({
+      filter,
+    })
       .then(res => {
         setTreeLoading(false);
         if (res.code === 0) {
           setProcessData(res.data);
+          setTableData(res.data);
         } else {
           notification.error({
             message: '提示',
@@ -128,12 +142,22 @@ const Flow = () => {
     console.log(flowName);
     history.push({
       pathname: '/biz/workflow/caseNode',
-      state: { flowName, pickItemIndex, allDisabled: true },
+      state: { flowName, pickItemIndex, searchValue, allDisabled: true },
     });
   };
   // 定义表格
   const columns = [
-    { title: '名称', dataIndex: 'name', width: 150, align: 'center' },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      width: 150,
+      align: 'center',
+      render: (text, record) => (
+        <Tooltip placement="topLeft" title={text}>
+          {searchStyle(text)}
+        </Tooltip>
+      ),
+    },
     {
       title: '办理样式',
       dataIndex: 'extendWebPage',
@@ -246,6 +270,33 @@ const Flow = () => {
       ),
     },
   ];
+
+  // 搜索
+  const handleSearch = text => {
+    // loadTable(text, 'search');
+    // setSelectTableName('');
+    // setPickIndex(0);
+    // setSelect(groupArr[0].type);
+    getProcessData(text);
+    setShowSearchStyle(true);
+  };
+  // 搜索框改变时存储输入的值
+  const handleChange = e => {
+    setSearchValue(e.target.value);
+  };
+  // 模糊查询匹配的样式
+  const searchStyle = val => {
+    let n;
+    if (showSearchStyle) {
+      n = val.replace(
+        new RegExp(searchValue, 'g'),
+        `<span style='color:red'>${searchValue}</span>`,
+      );
+    } else {
+      n = val;
+    }
+    return <div dangerouslySetInnerHTML={{ __html: n }} />;
+  };
   return (
     <PageContainer>
       <div className={styles.flowContainer}>
@@ -305,6 +356,18 @@ const Flow = () => {
 
         <div className={styles.processContainer}>
           <div className={styles.buttonList}>
+            <span>
+              <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
+              <Search
+                allowClear
+                placeholder="请输入流程名称"
+                onSearch={handleSearch}
+                onChange={handleChange}
+                value={searchValue}
+                enterButton
+                style={{ width: '300px' }}
+              />
+            </span>
             <Button
               onClick={() => {
                 showModal('order', true);

src/pages/bsmanager/workOrder/workFlow/flow.less

@@ -88,13 +88,17 @@
 
     .buttonList {
       display: flex;
-      justify-content: flex-end;
+      justify-content: space-between;
       margin: 10px 10px 10px 0;
 
       .ant-btn {
         vertical-align: middle;
         line-height: 2px;
       }
+      span {
+        display: flex;
+        align-items: center;
+      }
     }
 
     .ant-table-pagination {

src/pages/bsmanager/workOrder/workFlow/flowNode/flowNode.jsx

@@ -18,7 +18,7 @@ import end from '@/assets/images/icons/结束节点.png';
 
 const FlowNode = () => {
   const history = useHistory();
-  const { flowName, pickItemIndex, allDisabled } = history.location.state;
+  const { flowName, pickItemIndex, allDisabled, searchValue } = history.location.state;
   const [visible, setVisible] = useState({
     nodeEdit: false,
     auxiliaryView: false,
@@ -410,7 +410,7 @@ const FlowNode = () => {
   const backFlow = () => {
     history.push({
       pathname: '/biz/workflow/case',
-      state: { pickItemIndex },
+      state: { pickItemIndex, searchValue, dataSource: true },
     });
   };
   // 定义表格