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

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

parent 1c61663b
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 './index.less'
import deepClone from 'clone'
......@@ -8,6 +8,8 @@ import { PlusOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/ic
import cx from 'classnames'
import { useSelections } from '@umijs/hooks'
const { Search } = Input;
export interface TabTreeActions {
selected: ReactText[];
getExpandedKeys: () => ReactText[];
......@@ -37,10 +39,13 @@ export interface TabTreeProps extends TreeProps {
customTitle?: string | number;
handleSelect?: (key: ReactText, node: any) => void | Promise<any>;
handleSubmit?();
saveLoading?: boolean;
toolsRender?: toolsRenderProps;
getMenuSelectData?(): Promise<any>;
handleCheck?: (keys: any, nodes: any) => {};
customExpandkeys?: any[]; // props 传入自定义展开的key
enableSearch?: boolean; // 是否可搜索
searchPlaceholder?: string; // 搜索
resetSearch?: boolean;
}
export interface InnermostTreeNodeProps {}
......@@ -115,16 +120,14 @@ const RenderIcons: React.FC<RenderIconsProps> = props => {
/>
</Tooltip>
<Tooltip title="删除当前节点">
<Popconfirm title='确认删除当前节点?' onConfirm={e => {
<DeleteOutlined
onClick={e => {
e.stopPropagation();
toolsRender &&
toolsRender.deleteNode &&
toolsRender.deleteNode(props.node);
}}>
<DeleteOutlined
onClick={e => e.stopPropagation()}
}}
/>
</Popconfirm>
</Tooltip>
</Space>
);
......@@ -216,8 +219,12 @@ const TabTree: React.FC<TabTreeProps> = props => {
showSave,
getMenuSelectData,
handleSubmit,
saveLoading,
handleCheck,
customExpandkeys,
enableSearch = false,
searchPlaceholder = "搜索",
checkStrictly = false,
resetSearch,
} = props;
const selfActions = useTreeActions(actions)
......@@ -227,6 +234,19 @@ const TabTree: React.FC<TabTreeProps> = props => {
// 当前选中的node
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(
deepClone(treeData),
selectKey,
......@@ -237,7 +257,7 @@ const TabTree: React.FC<TabTreeProps> = props => {
customTitle,
);
// 重写选择方法, 只有在开启多选的时候才会启用
const checkedKeys = findTreeKeys(treeData, customKey as string);
const checkedKeys = findTreeKeys(treeData, customKey);
const {
selected,
select,
......@@ -256,6 +276,13 @@ const TabTree: React.FC<TabTreeProps> = props => {
}
}, []);
useEffect(() => {
if(customExpandkeys?.length) {
setExpandkeys(customExpandkeys)
setAutoExpandParent(true)
}
}, [customExpandkeys])
const toggleSelectAll = () => {
if (allSelected) {
unSelectAll();
......@@ -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 (
<div>
{title && (
<div className="god-tabtree-header">
<div>{title}</div>
<div className="god-tabtree-header-extra">
{checkable && !disabled && (
{checkable && (
<Button onClick={toggleSelectAll} disabled={disabled} type="link">
{allSelected ? '取消全选' : '全选'}
</Button>
)}
{showSave && checkable && (
<Button
type="link"
disabled={disabled}
loading={saveLoading}
onClick={handleSubmit}
>
<Button onClick={handleSubmit} disabled={disabled} type="link">
保存
</Button>
)}
</div>
</div>
)}
{
enableSearch && data?.length > 0 && <Search
style={{ marginBottom: 8 }}
placeholder={searchPlaceholder}
value={searchValue}
onChange={(v:any) => setSearchValue(v.target.value)}
onSearch={onSearchChange}
/>
}
<Tree
className="god-tabtree"
treeData={data}
blockNode
checkable={checkable}
checkedKeys={selected}
checkStrictly
expandedKeys={expandkeys}
autoExpandParent={autoExpandParent}
checkStrictly={checkStrictly}
onExpand={onExpand}
onCheck={(keys, nodes) => {
const { node, checked, checkedNodes } = nodes;
checked
? batchSelect(keys as any)
: setSelected(checkedNodes.map(v => v.key));
// 用户自定义的勾选后触发事件
if (handleCheck) {
handleCheck(keys, nodes);
......
......@@ -27,6 +27,7 @@ const PropertyValue: React.FC<{}> = () => {
const ref = useRef<any>({})
const [selectKey, setSelectKey] = useState(undefined)
const [selectNode, setSelectNode] = useState<any>()
const [customExpandkeys, setCustomExpandkeys] = useState<any>()
const {
treeStatus,
......@@ -44,6 +45,20 @@ const PropertyValue: React.FC<{}> = () => {
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(()=>{
if(selectKey)
ref.current.reload()
......@@ -56,6 +71,7 @@ const PropertyValue: React.FC<{}> = () => {
}
if(key){
let arr = key.split('_');
sessionStorage.setItem('beforeKeyPrefix', arr[0])
setSelectKey(arr[arr.length-1])
setSelectNode(node)
}
......@@ -178,6 +194,7 @@ const PropertyValue: React.FC<{}> = () => {
actions={treeActions}
handleSelect={(key, node) => onHandleSelect(key, node)}
customKey="id"
customExpandkeys={customExpandkeys}
/>
:
<>暂无菜单</>
......@@ -226,7 +243,7 @@ const PropertyValue: React.FC<{}> = () => {
type="primary"
icon={<PlusOutlined />}
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}}
>
......
......@@ -165,14 +165,15 @@ export const baseOrderListColumns: any[] = [
dataIndex: 'type',
key: 'type',
render: (text) => ORDER_TYPE[text],
// 1.询价采购2.需求采购3.现货采购4.集采5.渠道直采6.渠道现货7.积分兑换8.渠道积分兑换
filters: [
{text: '询价采购', value: 1},
{text: '需求采购', value: 2},
{text: '现货采购', value: 3},
{text: '集采', value: 4},
{text: '积分兑换', value: 5},
{text: '渠道直采', value: 6},
{text: '渠道现货', value: 7},
{text: '渠道直采', value: 5},
{text: '渠道现货', value: 6},
{text: '积分兑换', value: 7},
{text: '渠道积分兑换', value: 8},
],
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