fix: 样式、自行排查

zhangyongtian

2024-09-14 0d40ce565cdc87668f83dbeddbf1246536986f9e

 gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 17:41:09
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 20:03:51
 * @LastEditTime: 2024-09-04 15:16:56
 * @FilePath: \gzDyh\gz-customerSystem\src\components\SelectObjModal\selectPerson.jsx
 * @Description: 选择经办人
 */
@@ -11,14 +11,33 @@
import { Button, Space, Input, Tree } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';
import MyModal from '../MyModal';
import * as $$ from '../../utils/utility';
import { Modal, Spin } from '@arco-design/web-react';

const { Search } = Input;

const txtMap = {
   dept: '部门',
   person: '人',
   unit: '组织'
}

// 获取人员，组织，部门数据
function getDataApi(type, searchData) {
   const url = type === 'person' ? 'ctUser/userChoose' : type === 'unit' ? 'ctUser/unitList' : 'ctUser/deptList';
   let url
   switch (type) {
      case 'dept':
         url = `ctUnit/unitChoose`
         break;
      case 'person':
         url = 'ctUser/userChoose'
         break
      case 'unit':
         url = 'ctUser/unitList'
         break
      default:
         break;
   }
   return $$.ax.request({ url, type: 'get', data: searchData, service: 'cust' });
}

@@ -31,36 +50,38 @@
 * onClose, // 关闭
 * onOk, // 点击确定的回调
 */
const SelectObjModal = ({ visible = false, checkKeys = [], type = 'person', isCheckbox = false, searchData = {}, onClose, onOk }) => {
const SelectObjModal = ({ visible = false, checkKeys = [], type = 'dept', isCheckbox = false, searchData = {}, onClose, onOk, }) => {
   const nameStr = txtMap[type];
   // 默认调解员查询'22_00024-4'
   const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {};
   const [data, setData] = useState([]);

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

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

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

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

   const [dataList, setDataList] = useState([]);
   const [loading, setLoading] = useState(false);

   // tree复选框选择
   function handleCheck(checkedKeys, e) {
      if (!isCheckbox && checkedKeys.checked.length > 1) {
         $$.info({ type: 'warning', content: '当前选择只可单选' });
         return;
   useEffect(() => {
      if (!visible) return;
      // 获取数据
      async function getData() {
         setLoading(true)
         const res = await getDataApi(type, { ...searchRole, ...searchData });
         setLoading(false)
         if (res.type) {
            setData(res.data || []);
         }
      }
      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 });
   }
      if (checkKeys.length !== 0) {
         let keys = [];
         checkKeys.forEach((x) => keys.push(x.value));
         setCheckedKeys({ keys, items: checkKeys });
      } else {
         setCheckedKeys({ keys: [], items: [] });
      }
      getData();
   }, [type, visible]);

   // 搜索
   useEffect(() => {
@@ -80,39 +101,6 @@
      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;
   };

   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('newExpandedKeys',newExpandedKeys);
      setExpandedKeys(newExpandedKeys);
      setSearchValue(value);
      setAutoExpandParent(true);
   }

   const treeData = useMemo(() => {
      const loop = (data) =>
@@ -150,62 +138,92 @@
      return loop(data);
   }, [searchValue, data]);

  // 默认调解员查询'22_00024-4'
   const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {};
   // 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 });
   }

   useEffect(() => {
      if (!visible) return;
      // 获取数据
      async function getData() {
         global.setSpinning(true);
         const res = await getDataApi(type, { ...searchRole, ...searchData });
         global.setSpinning(false);
         if (res.type) {
            setData(res.data || []);
   // 删除选项
   function handleDelete(t) {
      checkedKeys.keys.splice(t, 1);
      checkedKeys.items.splice(t, 1);
      setCheckedKeys({ ...checkedKeys });
   }

   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);
            }
         }
      }
    console.log(checkKeys,'checkKeys')
    console.log(checkedKeys,'checkedKeys')
      if (checkKeys.length !== 0) {
         let keys = [];
         checkKeys.forEach((x) => keys.push(x.value));
         setCheckedKeys({ keys, items: checkKeys });
      } else {
         setCheckedKeys({ keys: [], items: [] });
      }
      getData();
   }, [type, visible]);
      return parentKey;
   };

   const nameStr = type === 'person' ? '人员' : type === 'unit' ? '组织' : '部门';
   function handleSearch(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);
      setExpandedKeys(newExpandedKeys);
      setSearchValue(value);
      setAutoExpandParent(true);
   }

   return (
      <MyModal visible={!!visible} title={`选择${nameStr}`} width={560} footer={false} onCancel={onClose}>
      <Modal
         visible={!!visible}
         title={`选择${nameStr}`}
         footer={null}
         onCancel={onClose}
         unmountOnExit={true}
         maskClosable={false}
         style={{ width: '560px' }}
      >
         <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()
                  )}
                  <Spin loading={loading} style={{ width: '100%', height: '100%' }}>
                     {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' }}
                           height={400}
                        />
                     ) : (
                        $$.MyEmpty()
                     )}
                  </Spin>
               </div>
            </div>
            <div className="selectObjModal-right">
@@ -219,7 +237,7 @@
            </div>
         </div>
         <div className="selectObjModal-footer">
            <div>已选中：{checkedKeys.keys.length}人</div>
            <div>已选中：{checkedKeys.keys.length}{txtMap[type]}</div>
            <Space size="middle">
               <Button onClick={onClose}>取消</Button>
               <Button type="primary" onClick={() => onOk && onOk(checkedKeys)}>
@@ -227,7 +245,7 @@
               </Button>
            </Space>
         </div>
      </MyModal>
      </Modal>
   );
};