fix:市平台项目更新

xusd

7 days ago 544148eddae96db824423cd059ebecb9d13c392e

 src/components/SelectObjModal/selectJudge.jsx

@@ -10,7 +10,7 @@

// 获取法官数据
function getDataApi(searchData) {
  return $$.ax.request({ url: 'ctUserole/listJudge', type: 'get', data: searchData, service: 'cust' });
   return $$.ax.request({ url: 'ctUserole/listJudge', type: 'get', data: searchData, service: 'cust' });
}

/**
@@ -22,94 +22,99 @@
 * onOk, // 点击确定的回调
 */
const SelectObjModal = ({ visible = false, courtId, checkKeys = [], nameStr, isCheckbox = false, searchData = {}, onClose, onOk }) => {
  const [data, setData] = useState([]);
   const [data, setData] = useState([]);

  const [checkedKeys, setCheckedKeys] = useState({ keys: [], items: [] });
   const [checkedKeys, setCheckedKeys] = useState({ keys: [], items: [] });

  const [expandedKeys, setExpandedKeys] = useState([]);
   const [expandedKeys, setExpandedKeys] = useState([]);

  const [searchValue, setSearchValue] = useState('');
   const [searchValue, setSearchValue] = useState('');

  const [autoExpandParent, setAutoExpandParent] = useState(true);
   const [autoExpandParent, setAutoExpandParent] = useState(true);

  const [dataList, setDataList] = useState([]);
   const [dataList, setDataList] = useState([]);

  // tree复选框选择
  function handleCheck(checkedKeys, e) {
    if (!isCheckbox && checkedKeys.checked.length > 1) {
      $$.info({ type: 'warning', content: '当前选择只可单选' });
      return;
    }
    let checkedNodes = e.checkedNodes;
    checkedNodes.forEach((x) => delete x.children);
    setCheckedKeys({ keys: checkedKeys.checked, items: checkedNodes });
  }
   // tree复选框选择
   function handleCheck(checkedKeys, e) {
      if (!isCheckbox && checkedKeys.checked.length > 1) {
         $$.info({ type: 'warning', content: '当前选择只可单选' });
         return;
      }
      let checkedNodes = e.checkedNodes;
      checkedNodes.forEach((x) => delete x.children);
      setCheckedKeys({ keys: checkedKeys.checked, items: checkedNodes });
   }

  // 删除选项
  function handleDelete(t) {
    checkedKeys.keys.splice(t, 1);
    checkedKeys.items.splice(t, 1);
    setCheckedKeys({ ...checkedKeys });
  }
   // 删除选项
   function handleDelete(t) {
      checkedKeys.keys.splice(t, 1);
      checkedKeys.items.splice(t, 1);
      setCheckedKeys({ ...checkedKeys });
   }

  // 搜索
  useEffect(() => {
    if (!visible) return;
    const arr = [];
    const generateList = (data) => {
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const { value, label } = node;
        arr.push({ value, label });
        if (node.children) {
          generateList(node.children);
        }
      }
    };
    generateList(data);
    setDataList(arr);
    handleSearch('', arr);
  }, [data]);
  
   // 搜索
   useEffect(() => {
      if (!visible) return;
      const arr = [];
      const generateList = (data) => {
         for (let i = 0; i < data.length; i++) {
            const node = data[i];
            const { value, label } = node;
            arr.push({ value, label });
            if (node.children) {
               generateList(node.children);
            }
         }
      };
      generateList(data);
      setDataList(arr);
      handleSearch('', arr);
   }, [data]);

  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.value === key)) {
          parentKey = node.value;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };
   const getParentKey = (key, tree) => {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
         const node = tree[i];
         if (node.children) {
            if (node.children.some((item) => item.value === key)) {
               parentKey = node.value;
            } else if (getParentKey(key, node.children)) {
               parentKey = getParentKey(key, node.children);
            }
         }
      }
      return parentKey;
   };

  function handleSearch(value, dataList) {
   function handleSearch(value, dataList) {
      console.log('value, dataList', value, dataList);
      const newExpandedKeys = dataList
         .map((item) => {
            if (item.label.indexOf(value) > -1) {
               return getParentKey(item.value, data);
            }
            return null;
         })
         .filter((item, i, self) => item && self.indexOf(item) === i);

    console.log('value, dataList', value, dataList);
    const newExpandedKeys = dataList
      .map((item) => {
        if (item.label.indexOf(value) > -1) {
          return getParentKey(item.value, data);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);

    console.log('newExpandedKeys', newExpandedKeys);
    setExpandedKeys(newExpandedKeys);
    setSearchValue(value);
    setAutoExpandParent(true);
  }
      console.log('newExpandedKeys', newExpandedKeys);
      setExpandedKeys(newExpandedKeys);
      setSearchValue(value);
      setAutoExpandParent(true);
   }

  const treeData = useMemo(() => {
    const loop = (data) =>
      data.map((item) => {
    const loop = (data) => {
      const copiedData = JSON.parse(JSON.stringify(data));
      return copiedData.map((item, idx) => {
        const strTitle = item.label;
        const index = strTitle.indexOf(searchValue);

        // 只保留包含 searchValue 的项
        if (index <= -1 && !item.children) {
          return null; // 返回 null 表示不包含在最终结果中
        }

        const beforeStr = strTitle.substring(0, index);
        const afterStr = strTitle.slice(index + searchValue.length);
        const label =
@@ -122,113 +127,122 @@
          ) : (
            <span>{strTitle}</span>
          );

        if (item.children) {
          const filteredChildren = loop(item.children).filter(Boolean); // 递归处理子项并过滤掉 null
          return {
            label,
            name: strTitle,
            value: item.value,
            checkable: item.checkable,
            children: loop(item.children),
            children: filteredChildren.length > 0 ? filteredChildren : undefined,
          };
        }

        return {
          label,
          name: strTitle,
          checkable: item.checkable,
          value: item.value,
        };
      });
    // data = data.filter(i => i.label?.indexOf(searchValue) > -1);
    // console.log('data.filter',data.filter(i => i.label?.indexOf(searchValue) > -1));
    console.log('loop(data)', loop(data));
      }).filter(Boolean); // 过滤掉 null
    };

    return loop(data);

  }, [searchValue, data]);

   useEffect(() => {
      if (!visible) return;
      // 获取数据
      async function getData() {
         global.setSpinning(true);
         const res = await getDataApi({ courtId });
         global.setSpinning(false);
         if (res.type) {
            setData(res.data || []);
         }
      }
      if (checkKeys.length !== 0) {
         let keys = [];
         checkKeys.forEach((x) => keys.push(x.value));
         setCheckedKeys({ keys, items: checkKeys });
      } else {
         setCheckedKeys({ keys: [], items: [] });
      }
      getData();
   }, [visible]);

  useEffect(() => {
    if (!visible) return;
    // 获取数据
    async function getData() {
      global.setSpinning(true);
      const res = await getDataApi({ courtId });
      global.setSpinning(false);
      if (res.type) {
        setData(res.data || []);
      }
    }
    if (checkKeys.length !== 0) {
      let keys = [];
      checkKeys.forEach((x) => keys.push(x.value));
      setCheckedKeys({ keys, items: checkKeys });
    } else {
      setCheckedKeys({ keys: [], items: [] });
    }
    getData();
  }, [visible]);

  return (
    <MyModal visible={!!visible} title={`选择${nameStr}`} width={560} footer={false} onCancel={onClose}>
      <div className="selectObjModal-main">
        <div className="selectObjModal-left">
          <div className="selectObjModal-left-search">
            <Search placeholder={`查询${nameStr}名称`} onChange={(e) => handleSearch(e.target.value, dataList)} />
          </div>
          <div className="selectObjModal-left-main">
            {data.length > 0 ? (
              <Tree
                checkable
                checkStrictly
                defaultExpandAll
                onExpand={(newExpandedKeys) => {
                  setExpandedKeys(newExpandedKeys);
                  setAutoExpandParent(false);
                }}
                expandedKeys={expandedKeys}
                autoExpandParent={autoExpandParent}
                selectable={false}
                onCheck={(checkedKeys, e) => handleCheck(checkedKeys, e)}
                checkedKeys={checkedKeys.keys}
                treeData={treeData}
                fieldNames={{ title: 'label', key: 'value' }}
              />
            ) : (
              $$.MyEmpty()
            )}
          </div>
        </div>
        <div className="selectObjModal-right">
          {checkedKeys.items.map((x, t) => (
            <div className="selectObjModal-right-item" key={x.value}>
              <span className="selectObjModal-right-item-name">{x.label}</span>
              <CloseOutlined onClick={() => handleDelete(t)} className="selectObjModal-right-item-icon" />
            </div>
          ))}
          {checkedKeys.items.length === 0 && <div className="selectObjModal-none">{$$.MyEmpty({ description: '尚未选择' + nameStr })}</div>}
        </div>
      </div>
      <div className="selectObjModal-footer">
        <div>已选中：{checkedKeys.keys.length}人</div>
        <Space size="middle">
          <Button onClick={onClose}>取消</Button>
          <Button type="primary" onClick={() => onOk && onOk(checkedKeys)}>
            确定
          </Button>
        </Space>
      </div>
    </MyModal>
  );
   return (
      <MyModal visible={!!visible} title={`选择${nameStr}`} width={560} footer={false} onCancel={onClose}>
         <div className="selectObjModal-main">
            <div className="selectObjModal-left">
               <div className="selectObjModal-left-search">
                  <Search
                     placeholder={`查询${nameStr}名称`}
                     onSearch={(e) => {
                        // handleSearch('', dataList)
                        if (!e) {
                           handleSearch('', dataList);
                        } else {
                           handleSearch(e, dataList);
                        }
                     }}
                  />
               </div>
               <div className="selectObjModal-left-main">
                  {data.length > 0 ? (
                     <Tree
                        checkable
                        checkStrictly
                        defaultExpandAll
                        onExpand={(newExpandedKeys) => {
                           setExpandedKeys(newExpandedKeys);
                           setAutoExpandParent(false);
                        }}
                        expandedKeys={expandedKeys}
                        autoExpandParent={autoExpandParent}
                        selectable={false}
                        onCheck={(checkedKeys, e) => handleCheck(checkedKeys, e)}
                        checkedKeys={checkedKeys.keys}
                        treeData={treeData}
                        fieldNames={{ title: 'label', key: 'value' }}
                     />
                  ) : (
                     $$.MyEmpty()
                  )}
               </div>
            </div>
            <div className="selectObjModal-right">
               {checkedKeys.items.map((x, t) => (
                  <div className="selectObjModal-right-item" key={x.value}>
                     <span className="selectObjModal-right-item-name">{x.label}</span>
                     <CloseOutlined onClick={() => handleDelete(t)} className="selectObjModal-right-item-icon" />
                  </div>
               ))}
               {checkedKeys.items.length === 0 && <div className="selectObjModal-none">{$$.MyEmpty({ description: '尚未选择' + nameStr })}</div>}
            </div>
         </div>
         <div className="selectObjModal-footer">
            <div>已选中：{checkedKeys.keys.length}人</div>
            <Space size="middle">
               <Button onClick={onClose}>取消</Button>
               <Button type="primary" onClick={() => onOk && onOk(checkedKeys)}>
                  确定
               </Button>
            </Space>
         </div>
      </MyModal>
   );
};

SelectObjModal.propTypes = {
  visible: PropTypes.any,
  checkKeys: PropTypes.array,
  type: PropTypes.string,
  isCheckbox: PropTypes.bool,
  searchData: PropTypes.object,
  onClose: PropTypes.func,
  onOk: PropTypes.func,
   visible: PropTypes.any,
   checkKeys: PropTypes.array,
   type: PropTypes.string,
   isCheckbox: PropTypes.bool,
   searchData: PropTypes.object,
   onClose: PropTypes.func,
   onOk: PropTypes.func,
};

export default SelectObjModal;