106 lines
3.5 KiB
JavaScript
106 lines
3.5 KiB
JavaScript
import {Cascader, SearchBar} from "antd-mobile";
|
|
import React, {useEffect, useState} from "react";
|
|
import {
|
|
Form,
|
|
} from 'antd-mobile'
|
|
import "./index.css"
|
|
import {CloseCircleFill} from "antd-mobile-icons";
|
|
import {useChildList} from "../../hooks/useChildList";
|
|
|
|
const ParentTask = (props) => {
|
|
const {form, disabled, pName, pidArray, addEditPName, removePid} = props;
|
|
const [parentValue, setParentValue] = useState(pidArray ?? [])
|
|
const [visible, setVisible] = useState(false)
|
|
const {
|
|
options, removeTaskId, changeInitPidArray, changeSearchValue,
|
|
changeSelectValue, changeCurrentLab, changeTaskId
|
|
} = useChildList();
|
|
|
|
useEffect(() => {
|
|
initDate()
|
|
}, [props])
|
|
|
|
function initDate() {
|
|
if (removePid) {
|
|
removeTaskId(removePid)
|
|
}
|
|
if (pidArray && pidArray.length > 0) {
|
|
setParentValue(pidArray)
|
|
changeInitPidArray(pidArray)
|
|
}
|
|
}
|
|
|
|
return <Form.Item
|
|
name='pidArray'
|
|
label='主线任务'
|
|
value={parentValue}
|
|
disabled={disabled}
|
|
arrow={
|
|
(form.getFieldValue('pidArray') && form.getFieldValue('pidArray').length > 0) ? (
|
|
<CloseCircleFill
|
|
style={{
|
|
color: 'var(--adm-color-light)',
|
|
fontSize: 14,
|
|
}}
|
|
onClick={e => {
|
|
form.setFieldsValue({pidArray: []})
|
|
setParentValue([])
|
|
// 阻止冒泡
|
|
e.stopPropagation()
|
|
// 阻止所有后续事件处理程序
|
|
// e.nativeEvent.stopImmediatePropagation();
|
|
}}
|
|
/>) : true
|
|
|
|
}
|
|
onClick={() => {
|
|
setVisible(true)
|
|
}}
|
|
>
|
|
<Cascader
|
|
title={<SearchBar placeholder='搜索当前层相关标题' onChange={
|
|
// 获取当前选卡，过滤当前选项
|
|
(value) => {
|
|
changeSearchValue(value);
|
|
}
|
|
}/>}
|
|
options={options}
|
|
visible={visible}
|
|
defaultValue={pidArray}
|
|
onClose={() => {
|
|
setVisible(false)
|
|
}}
|
|
value={parentValue}
|
|
onConfirm={(val) => {
|
|
console.log(val)
|
|
setParentValue(val[val.length - 1])
|
|
form.setFieldValue('pidArray', val)
|
|
}}
|
|
onTabsChange={index => {
|
|
changeCurrentLab(index)
|
|
}}
|
|
onSelect={value => {
|
|
console.log({value})
|
|
if (value && value.length > 0) {
|
|
changeSelectValue(value)
|
|
changeTaskId(value)
|
|
}
|
|
}}
|
|
>
|
|
{items => {
|
|
if (items.every(item => item === null)) {
|
|
return (pName && form.getFieldValue('pidArray') && form.getFieldValue('pidArray').length > 0) ? (
|
|
<span>{pName}</span>) : disabled ?
|
|
(<span>主线任务选填</span>) :
|
|
(<span style={{color: "#cccccc"}}>主线任务选填</span>)
|
|
} else if (items) {
|
|
if (addEditPName) {
|
|
addEditPName(items[items.length - 1].label)
|
|
}
|
|
return items[items.length - 1].label
|
|
}
|
|
}}
|
|
</Cascader>
|
|
</Form.Item>
|
|
}
|
|
export default ParentTask; |