Commit e76d05de authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

fix: 处理订单类型筛选异常,处理属性值新增编辑后返回无法展开属性树‘

parent 1c61663b
import React, { useState, ReactText, useImperativeHandle, useEffect, useRef } from 'react' import React, { useState, ReactText, useImperativeHandle, useEffect, useRef } from 'react'
import { Tree, Space, Tooltip, Button, Popconfirm } from 'antd' import { Tree, Space, Tooltip, Button, Input } from 'antd'
import { findItemAndDelete, findTreeKeys, treeReduction, getParentTreeTitles } from '@/utils' import { findItemAndDelete, findTreeKeys, treeReduction, getParentTreeTitles } from '@/utils'
import './index.less' import './index.less'
import deepClone from 'clone' import deepClone from 'clone'
...@@ -8,6 +8,8 @@ import { PlusOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/ic ...@@ -8,6 +8,8 @@ import { PlusOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/ic
import cx from 'classnames' import cx from 'classnames'
import { useSelections } from '@umijs/hooks' import { useSelections } from '@umijs/hooks'
const { Search } = Input;
export interface TabTreeActions { export interface TabTreeActions {
selected: ReactText[]; selected: ReactText[];
getExpandedKeys: () => ReactText[]; getExpandedKeys: () => ReactText[];
...@@ -37,10 +39,13 @@ export interface TabTreeProps extends TreeProps { ...@@ -37,10 +39,13 @@ export interface TabTreeProps extends TreeProps {
customTitle?: string | number; customTitle?: string | number;
handleSelect?: (key: ReactText, node: any) => void | Promise<any>; handleSelect?: (key: ReactText, node: any) => void | Promise<any>;
handleSubmit?(); handleSubmit?();
saveLoading?: boolean;
toolsRender?: toolsRenderProps; toolsRender?: toolsRenderProps;
getMenuSelectData?(): Promise<any>; getMenuSelectData?(): Promise<any>;
handleCheck?: (keys: any, nodes: any) => {}; handleCheck?: (keys: any, nodes: any) => {};
customExpandkeys?: any[]; // props 传入自定义展开的key
enableSearch?: boolean; // 是否可搜索
searchPlaceholder?: string; // 搜索
resetSearch?: boolean;
} }
export interface InnermostTreeNodeProps {} export interface InnermostTreeNodeProps {}
...@@ -115,16 +120,14 @@ const RenderIcons: React.FC<RenderIconsProps> = props => { ...@@ -115,16 +120,14 @@ const RenderIcons: React.FC<RenderIconsProps> = props => {
/> />
</Tooltip> </Tooltip>
<Tooltip title="删除当前节点"> <Tooltip title="删除当前节点">
<Popconfirm title='确认删除当前节点?' onConfirm={e => { <DeleteOutlined
onClick={e => {
e.stopPropagation();
toolsRender && toolsRender &&
toolsRender.deleteNode && toolsRender.deleteNode &&
toolsRender.deleteNode(props.node); toolsRender.deleteNode(props.node);
}}> }}
<DeleteOutlined
onClick={e => e.stopPropagation()}
/> />
</Popconfirm>
</Tooltip> </Tooltip>
</Space> </Space>
); );
...@@ -216,8 +219,12 @@ const TabTree: React.FC<TabTreeProps> = props => { ...@@ -216,8 +219,12 @@ const TabTree: React.FC<TabTreeProps> = props => {
showSave, showSave,
getMenuSelectData, getMenuSelectData,
handleSubmit, handleSubmit,
saveLoading,
handleCheck, handleCheck,
customExpandkeys,
enableSearch = false,
searchPlaceholder = "搜索",
checkStrictly = false,
resetSearch,
} = props; } = props;
const selfActions = useTreeActions(actions) const selfActions = useTreeActions(actions)
...@@ -227,6 +234,19 @@ const TabTree: React.FC<TabTreeProps> = props => { ...@@ -227,6 +234,19 @@ const TabTree: React.FC<TabTreeProps> = props => {
// 当前选中的node // 当前选中的node
const [selectKey, setSelectKey] = useState<string | number>(''); const [selectKey, setSelectKey] = useState<string | number>('');
// 自动展开父级
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(false)
// 搜索的值
const [searchValue, setSearchValue] = useState()
useEffect(()=> {
if(resetSearch) {
setSearchValue(null)
setExpandkeys([])
}
}, [resetSearch])
const data = transformSingleTitle( const data = transformSingleTitle(
deepClone(treeData), deepClone(treeData),
selectKey, selectKey,
...@@ -237,7 +257,7 @@ const TabTree: React.FC<TabTreeProps> = props => { ...@@ -237,7 +257,7 @@ const TabTree: React.FC<TabTreeProps> = props => {
customTitle, customTitle,
); );
// 重写选择方法, 只有在开启多选的时候才会启用 // 重写选择方法, 只有在开启多选的时候才会启用
const checkedKeys = findTreeKeys(treeData, customKey as string); const checkedKeys = findTreeKeys(treeData, customKey);
const { const {
selected, selected,
select, select,
...@@ -256,6 +276,13 @@ const TabTree: React.FC<TabTreeProps> = props => { ...@@ -256,6 +276,13 @@ const TabTree: React.FC<TabTreeProps> = props => {
} }
}, []); }, []);
useEffect(() => {
if(customExpandkeys?.length) {
setExpandkeys(customExpandkeys)
setAutoExpandParent(true)
}
}, [customExpandkeys])
const toggleSelectAll = () => { const toggleSelectAll = () => {
if (allSelected) { if (allSelected) {
unSelectAll(); unSelectAll();
...@@ -299,45 +326,66 @@ const TabTree: React.FC<TabTreeProps> = props => { ...@@ -299,45 +326,66 @@ const TabTree: React.FC<TabTreeProps> = props => {
} }
}; };
// 展开/收起的回调
const onExpand = expandedKeys => {
setAutoExpandParent(false)
setExpandkeys(expandedKeys)
};
const onSearchChange = v => {
// todo 找到目标节点的父级key
setSearchValue(v)
if(v) {
const reductData = Object.values(treeReduction(treeData))
const expandedKeys = reductData.filter(item => item['title'].indexOf(v) > -1).map(_item => _item['parentId'])
setExpandkeys(expandedKeys)
setAutoExpandParent(true)
} else {
setExpandkeys([])
}
}
return ( return (
<div> <div>
{title && ( {title && (
<div className="god-tabtree-header"> <div className="god-tabtree-header">
<div>{title}</div> <div>{title}</div>
<div className="god-tabtree-header-extra"> {checkable && (
{checkable && !disabled && (
<Button onClick={toggleSelectAll} disabled={disabled} type="link"> <Button onClick={toggleSelectAll} disabled={disabled} type="link">
{allSelected ? '取消全选' : '全选'} {allSelected ? '取消全选' : '全选'}
</Button> </Button>
)} )}
{showSave && checkable && ( {showSave && checkable && (
<Button <Button onClick={handleSubmit} disabled={disabled} type="link">
type="link"
disabled={disabled}
loading={saveLoading}
onClick={handleSubmit}
>
保存 保存
</Button> </Button>
)} )}
</div> </div>
</div>
)} )}
{
enableSearch && data?.length > 0 && <Search
style={{ marginBottom: 8 }}
placeholder={searchPlaceholder}
value={searchValue}
onChange={(v:any) => setSearchValue(v.target.value)}
onSearch={onSearchChange}
/>
}
<Tree <Tree
className="god-tabtree" className="god-tabtree"
treeData={data} treeData={data}
blockNode blockNode
checkable={checkable} checkable={checkable}
checkedKeys={selected} checkedKeys={selected}
checkStrictly
expandedKeys={expandkeys} expandedKeys={expandkeys}
autoExpandParent={autoExpandParent}
checkStrictly={checkStrictly}
onExpand={onExpand}
onCheck={(keys, nodes) => { onCheck={(keys, nodes) => {
const { node, checked, checkedNodes } = nodes; const { node, checked, checkedNodes } = nodes;
checked checked
? batchSelect(keys as any) ? batchSelect(keys as any)
: setSelected(checkedNodes.map(v => v.key)); : setSelected(checkedNodes.map(v => v.key));
// 用户自定义的勾选后触发事件 // 用户自定义的勾选后触发事件
if (handleCheck) { if (handleCheck) {
handleCheck(keys, nodes); handleCheck(keys, nodes);
......
...@@ -27,6 +27,7 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -27,6 +27,7 @@ const PropertyValue: React.FC<{}> = () => {
const ref = useRef<any>({}) const ref = useRef<any>({})
const [selectKey, setSelectKey] = useState(undefined) const [selectKey, setSelectKey] = useState(undefined)
const [selectNode, setSelectNode] = useState<any>() const [selectNode, setSelectNode] = useState<any>()
const [customExpandkeys, setCustomExpandkeys] = useState<any>()
const { const {
treeStatus, treeStatus,
...@@ -44,6 +45,20 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -44,6 +45,20 @@ const PropertyValue: React.FC<{}> = () => {
fetchMenuData: fetchAttributeTreeData, fetchMenuData: fetchAttributeTreeData,
}) })
useEffect(() => {
let prefix = sessionStorage.getItem('beforeKeyPrefix')
let beforeKey: any = history.location.query.attrId
if(beforeKey){ // 展开之前的选择项 拼接含有字母字符串的key
setSelectKey(beforeKey)
let evilKey = `${prefix}_${beforeKey}`
treeActions.setExpandedKeys([evilKey])
setCustomExpandkeys([evilKey])
treeActions.setSelectKeys([evilKey])
console.log(evilKey, '展开的key')
}
}, [])
useEffect(()=>{ useEffect(()=>{
if(selectKey) if(selectKey)
ref.current.reload() ref.current.reload()
...@@ -56,6 +71,7 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -56,6 +71,7 @@ const PropertyValue: React.FC<{}> = () => {
} }
if(key){ if(key){
let arr = key.split('_'); let arr = key.split('_');
sessionStorage.setItem('beforeKeyPrefix', arr[0])
setSelectKey(arr[arr.length-1]) setSelectKey(arr[arr.length-1])
setSelectNode(node) setSelectNode(node)
} }
...@@ -178,6 +194,7 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -178,6 +194,7 @@ const PropertyValue: React.FC<{}> = () => {
actions={treeActions} actions={treeActions}
handleSelect={(key, node) => onHandleSelect(key, node)} handleSelect={(key, node) => onHandleSelect(key, node)}
customKey="id" customKey="id"
customExpandkeys={customExpandkeys}
/> />
: :
<>暂无菜单</> <>暂无菜单</>
...@@ -226,7 +243,7 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -226,7 +243,7 @@ const PropertyValue: React.FC<{}> = () => {
type="primary" type="primary"
icon={<PlusOutlined />} icon={<PlusOutlined />}
onClick={() => { onClick={() => {
history.push(`/classAndProperty/propertyValue/addPropertyValue?attrId=${selectKey||history.location.query.attrId}&attrName=${selectNode._title||history.location.query.attrName}&type=${selectNode?.type||history.location.query.type}`) history.push(`/classAndProperty/propertyValue/addPropertyValue?attrId=${selectKey||history.location.query.attrId}&attrName=${selectNode?._title||history.location.query.attrName}&type=${selectNode?.type||history.location.query.type}`)
}} }}
style={{marginBottom: 24}} style={{marginBottom: 24}}
> >
......
...@@ -165,14 +165,15 @@ export const baseOrderListColumns: any[] = [ ...@@ -165,14 +165,15 @@ export const baseOrderListColumns: any[] = [
dataIndex: 'type', dataIndex: 'type',
key: 'type', key: 'type',
render: (text) => ORDER_TYPE[text], render: (text) => ORDER_TYPE[text],
// 1.询价采购2.需求采购3.现货采购4.集采5.渠道直采6.渠道现货7.积分兑换8.渠道积分兑换
filters: [ filters: [
{text: '询价采购', value: 1}, {text: '询价采购', value: 1},
{text: '需求采购', value: 2}, {text: '需求采购', value: 2},
{text: '现货采购', value: 3}, {text: '现货采购', value: 3},
{text: '集采', value: 4}, {text: '集采', value: 4},
{text: '积分兑换', value: 5}, {text: '渠道直采', value: 5},
{text: '渠道直采', value: 6}, {text: '渠道现货', value: 6},
{text: '渠道现货', value: 7}, {text: '积分兑换', value: 7},
{text: '渠道积分兑换', value: 8}, {text: '渠道积分兑换', value: 8},
], ],
onFilter: (value, record) => value === record.type, onFilter: (value, record) => value === record.type,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment