/*
|
* @Company: hugeInfo
|
* @Author: claude
|
* @Date: 2025-04-09 14:32:15
|
* @LastEditTime: 2025-05-19 16:29:32
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 选择人员页面
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { NavBar, SearchBar, List, Checkbox, Toast } from 'dingtalk-design-mobile';
|
import { SearchOutlined, RightArrow2Outlined } from 'dd-icons';
|
|
import { useHistory, useLocation } from 'react-router-dom';
|
import { Scrollbars } from 'react-custom-scrollbars';
|
|
import NavBarPage from '../../components/NavBarPage';
|
import * as $$ from '../../utils/utility';
|
|
import './index.less';
|
|
// 选择指派人员
|
function userChooseApi(searchData) {
|
return $$.ax.request({ url: 'ctUser/userChoose', data: searchData, type: 'get', service: 'cust' });
|
}
|
|
function choosePrincipalApi(submitData) {
|
return $$.ax.request({ url: `caseInfoUnfold/choosePrincipal`, data: submitData, type: 'get', service: 'mediate' });
|
}
|
|
//删除经办人
|
function deletePrincipalApi(caseId, caseTaskId) {
|
return $$.ax.request({ url: `caseInfoUnfold/deletePrincipal?caseId=${caseId}&caseTaskId=${caseTaskId}`, type: 'get', service: 'mediate' });
|
}
|
|
// 联合处置选择部门
|
function unitChooseApi(searchData) {
|
return $$.ax.request({ url: 'ctUnit/unitChoose', data: searchData, type: 'get', service: 'cust' });
|
}
|
|
const SelectPerson = () => {
|
// 1:指派经办人 2:联合处置选择部门 3.选择承办部门 4.选择配合部门
|
const type = $$.getQueryString('type');
|
// 是否可以多选
|
const isMultiple = $$.getQueryString('isMultiple') || false;
|
const caseId = $$.getQueryString('caseId');
|
const caseTaskId = $$.getQueryString('caseTaskId');
|
|
const history = useHistory();
|
const location = useLocation();
|
|
// 状态定义
|
const [keyword, setKeyword] = useState(''); // 搜索关键词
|
const [loading, setLoading] = useState(false); // 加载状态
|
const [selectedPersons, setSelectedPersons] = useState([]); // 已选人员
|
|
const [title, setTitle] = useState(''); // 标题
|
|
const [subTitle, setSubTitle] = useState(''); // 副标题
|
// 数据定义
|
const [data, setData] = useState([]); // 数据
|
// 市一级
|
const [cityList, setCityList] = useState([]);
|
// 区一级
|
const [areaList, setAreaList] = useState([]);
|
// 街道一级
|
const [streetList, setStreetList] = useState([]);
|
const [personList, setPersonList] = useState([]); // 人员列表
|
// 部门一级
|
const [departments, setDepartments] = useState([]); // 部门列表
|
const [currentDeptId, setCurrentDeptId] = useState(''); // 当前选中部门ID
|
|
// 获取部门列表
|
async function userChoose() {
|
global.setSpinning(true);
|
const res = type === '1' ? await userChooseApi({ roleCode: '22_00024-4' }) : await unitChooseApi();
|
global.setSpinning(false);
|
console.log(res, 'res');
|
if (res.type) {
|
setData(res.data || []);
|
// 设置市级数据
|
setCityList(res.data || []);
|
}
|
}
|
|
// 判断是否选中（考虑chainList）
|
const isSelected = (item) => {
|
if (!item.chainList) {
|
return selectedPersons.some((p) => p.value === item.value);
|
}
|
return selectedPersons.some((p) => p.chainList && p.chainList.includes(item.value));
|
};
|
|
// 处理市级数据选择
|
const handleCitySelect = (item) => {
|
if (!item.checkable) {
|
setAreaList(item.children || []);
|
setStreetList([]);
|
setPersonList([]);
|
} else {
|
handleSelectPerson(item);
|
}
|
};
|
|
// 处理区级数据选择
|
const handleAreaSelect = (item) => {
|
if (!item.checkable) {
|
setStreetList(item.children || []);
|
setPersonList([]);
|
} else {
|
handleSelectPerson(item);
|
}
|
};
|
|
// 处理街道级数据选择
|
const handleStreetSelect = (item) => {
|
if (!item.checkable) {
|
setPersonList(item.children || []);
|
} else {
|
handleSelectPerson(item);
|
}
|
};
|
|
// 处理人员选择
|
const handlePersonSelect = (item) => {
|
if (item.checkable) {
|
handleSelectPerson(item);
|
}
|
};
|
|
// 选择/取消选择人员（优化版）
|
const handleSelectPerson = (person) => {
|
// 承办部门单选
|
if (type === '3') {
|
setSelectedPersons([
|
{
|
...person,
|
chainList: person.chainList || [person.value],
|
},
|
]);
|
return;
|
}
|
|
// 配合部门多选
|
if (type === '4') {
|
const index = selectedPersons.findIndex((item) => {
|
if (item.chainList && person.chainList) {
|
return item.chainList.join(',') === person.chainList.join(',');
|
}
|
return item.value === person.value;
|
});
|
|
let newSelected = [...selectedPersons];
|
|
if (index > -1) {
|
newSelected.splice(index, 1);
|
} else {
|
newSelected.push({
|
...person,
|
chainList: person.chainList || [person.value],
|
});
|
}
|
|
setSelectedPersons(newSelected);
|
return;
|
}
|
|
// 原有的选择逻辑
|
if (!isMultiple && selectedPersons.length > 0 && !selectedPersons.some((p) => p.value === person.value)) {
|
$$.showToast({ type: 'fail', content: '当前为单选模式，请先取消已选人员' });
|
return;
|
}
|
|
const index = selectedPersons.findIndex((item) => {
|
if (item.chainList && person.chainList) {
|
return item.chainList.join(',') === person.chainList.join(',');
|
}
|
return item.value === person.value;
|
});
|
|
let newSelected = [...selectedPersons];
|
|
if (index > -1) {
|
newSelected.splice(index, 1);
|
} else {
|
if (!isMultiple) {
|
newSelected = [
|
{
|
...person,
|
chainList: person.chainList || [person.value],
|
},
|
];
|
} else {
|
newSelected.push({
|
...person,
|
chainList: person.chainList || [person.value],
|
});
|
}
|
}
|
|
setSelectedPersons(newSelected);
|
};
|
|
// 渲染级联项
|
const renderCascadeItem = (item, level) => {
|
const isItemSelected = isSelected(item);
|
const hasChildren = item.children && item.children.length > 0;
|
|
return (
|
<div
|
key={item.value}
|
className={`cascade-item ${item.checkable ? 'checkable' : ''} ${isItemSelected ? 'selected' : ''}`}
|
onClick={() => {
|
switch (level) {
|
case 'city':
|
handleCitySelect(item);
|
break;
|
case 'area':
|
handleAreaSelect(item);
|
break;
|
case 'street':
|
handleStreetSelect(item);
|
break;
|
case 'person':
|
handlePersonSelect(item);
|
break;
|
default:
|
break;
|
}
|
}}
|
>
|
<span className="item-name">{item.label}</span>
|
{!item.checkable && hasChildren && (
|
<span className="arrow-right">
|
<RightArrow2Outlined />
|
</span>
|
)}
|
{item.checkable && isItemSelected && <span className="check-icon">✓</span>}
|
</div>
|
);
|
};
|
|
// 获取人员列表
|
function getPersonList() {}
|
// 选择部门
|
const handleSelectDept = (deptId) => {
|
setCurrentDeptId(deptId);
|
getPersonList(deptId);
|
};
|
|
// 搜索
|
const handleSearch = (value) => {
|
setKeyword(value);
|
getPersonList(currentDeptId, value);
|
};
|
|
// 确认选择
|
const handleConfirm = () => {
|
if (selectedPersons.length === 0) {
|
$$.showToast({ type: 'fail', content: `请至少选择一个${type === '1' ? '人员' : '部门'}` });
|
return;
|
}
|
|
switch (type) {
|
case '1':
|
if (!isMultiple && selectedPersons.length > 1) {
|
$$.showToast({ type: 'info', content: '当前为单选模式，请只选择一名人员' });
|
return;
|
}
|
if (caseId) {
|
choosePrincipal(selectedPersons);
|
} else {
|
$$.setLocal('selectPerson', selectedPersons);
|
history.goBack();
|
}
|
break;
|
case '2':
|
$$.setLocal('selectDept', selectedPersons);
|
history.goBack();
|
break;
|
case '3':
|
if (selectedPersons.length > 1) {
|
$$.showToast({ type: 'info', content: '承办部门只能选择一个' });
|
return;
|
}
|
$$.setLocal('mainDept', selectedPersons);
|
history.goBack();
|
break;
|
case '4':
|
$$.setLocal('cooperateDepts', selectedPersons);
|
history.goBack();
|
break;
|
default:
|
break;
|
}
|
};
|
|
async function choosePrincipal(selectedPersons) {
|
let nowData = selectedPersons[0];
|
global.setSpinning(true);
|
const res = await choosePrincipalApi({ userId: nowData.value, caseId, caseTaskId });
|
global.setSpinning(false);
|
if (res.type) {
|
$$.setLocal('selectPerson', true);
|
history.goBack();
|
}
|
}
|
|
// 返回上一页
|
const handleBack = () => {
|
history.goBack();
|
};
|
|
// 初始化
|
useEffect(() => {
|
let text = '';
|
let subText = '';
|
switch (type) {
|
case '1':
|
text = '指派经办人';
|
subText = '经办人姓名';
|
break;
|
case '2':
|
text = '选择配合部门';
|
subText = '配合部门';
|
break;
|
case '3':
|
text = '选择承办部门';
|
subText = '承办部门';
|
break;
|
case '4':
|
text = '选择配合部门';
|
subText = '配合部门（可多选）';
|
break;
|
default:
|
break;
|
}
|
setTitle(text);
|
setSubTitle(subText);
|
userChoose();
|
// 如果有预选人员，设置已选状态
|
if (location.state?.preSelectedPersons) {
|
setSelectedPersons(location.state.preSelectedPersons);
|
}
|
}, []);
|
|
return (
|
<NavBarPage title={title}>
|
<div className="select-person">
|
<div className="select-person-search">
|
<SearchBar placeholder={`请输入${subTitle}`} value={keyword} onChange={handleSearch} cancelText="查询" />
|
</div>
|
<Scrollbars style={{ height: 'calc(100vh - 160px)', backgroundColor: '#F2F2F2' }}>
|
<div className="select-person-cascade">
|
{/* 市级数据 */}
|
<div className="cascade-level">{cityList.map((item) => renderCascadeItem(item, 'city'))}</div>
|
|
{/* 区级数据 */}
|
{areaList.length > 0 && <div className="cascade-level">{areaList.map((item) => renderCascadeItem(item, 'area'))}</div>}
|
|
{/* 街道级数据 */}
|
{streetList.length > 0 && <div className="cascade-level">{streetList.map((item) => renderCascadeItem(item, 'street'))}</div>}
|
|
{/* 人员列表 */}
|
{personList.length > 0 && <div className="cascade-level">{personList.map((item) => renderCascadeItem(item, 'person'))}</div>}
|
</div>
|
</Scrollbars>
|
<div className="select-person-footer">
|
<div className="selected-info">
|
已选：<span className="selected-count">{selectedPersons.length}</span>
|
{type === '1' ? '人' : '个部门'}
|
</div>
|
<div className="selectPerson-buttons">
|
<button className="cancel-btn" onClick={handleBack}>
|
取消
|
</button>
|
<button className="confirm-btn" onClick={handleConfirm}>
|
确定
|
</button>
|
</div>
|
</div>
|
</div>
|
</NavBarPage>
|
);
|
};
|
|
export default SelectPerson;
|
