Skip to content

J
jinfa-platform
Commit e80fc922 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix：处理品类属性区块关联平台树无法回显展开，关联平台品类树添加可搜索功能，编辑品牌时对应信息不做禁用处理/品牌列表添加原品牌列

parent e07df5e0
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 46 deletions
src/components/TabTree/index.tsx
View file @ e80fc922
import React, { useState, ReactText, useImperativeHandle, useEffect, useRef } from 'react'
import { Tree, Space, Tooltip, Button } 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[];
......@@ -40,6 +42,8 @@ export interface TabTreeProps extends TreeProps {
toolsRender?: toolsRenderProps;
getMenuSelectData?(): Promise<any>;
handleCheck?: (keys: any, nodes: any) => {};
customExpandkeys?: any[]; // props 传入自定义展开的key
enableSearch?: boolean; // 是否可搜索
}
export interface InnermostTreeNodeProps {}
......@@ -213,7 +217,9 @@ const TabTree: React.FC<TabTreeProps> = props => {
showSave,
getMenuSelectData,
handleSubmit,
handleCheck,
handleCheck,
customExpandkeys,
enableSearch = false,
} = props;
const selfActions = useTreeActions(actions)
......@@ -223,6 +229,8 @@ const TabTree: React.FC<TabTreeProps> = props => {
// 当前选中的node
const [selectKey, setSelectKey] = useState<string | number>('');
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(false) // 自动展开父级
const data = transformSingleTitle(
deepClone(treeData),
selectKey,
......@@ -252,6 +260,13 @@ const TabTree: React.FC<TabTreeProps> = props => {
}
}, []);
useEffect(() => {
if(customExpandkeys?.length) {
setExpandkeys(customExpandkeys)
setAutoExpandParent(true)
}
}, [customExpandkeys])
const toggleSelectAll = () => {
if (allSelected) {
unSelectAll();
......@@ -295,6 +310,20 @@ const TabTree: React.FC<TabTreeProps> = props => {
}
};
// 展开/收起的回调
const onExpand = expandedKeys => {
setAutoExpandParent(false)
setExpandkeys(expandedKeys)
};
const onSearchChange = v => {
// todo 找到目标节点的父级key
const reductData = Object.values(treeReduction(treeData))
const expandedKeys = reductData.filter(item => item['title'].indexOf(v) > -1).map(_item => _item['parentId'])
setExpandkeys(expandedKeys)
setAutoExpandParent(true)
}
return (
<div>
{title && (
......@@ -312,7 +341,9 @@ const TabTree: React.FC<TabTreeProps> = props => {
)}
</div>
)}
{
enableSearch && data?.length > 0 && <Search style={{ marginBottom: 8 }} placeholder="搜索" onSearch={onSearchChange} />
}
<Tree
className="god-tabtree"
treeData={data}
......@@ -320,6 +351,8 @@ const TabTree: React.FC<TabTreeProps> = props => {
checkable={checkable}
checkedKeys={selected}
expandedKeys={expandkeys}
autoExpandParent={autoExpandParent}
onExpand={onExpand}
onCheck={(keys, nodes) => {
const { node, checked, checkedNodes } = nodes;
checked
......
src/pages/classAndProperty/class/index.tsx
View file @ e80fc922
import React, { useState, useEffect } from 'react'
import { Row, Col, Tooltip, Form, Input, Select, Popconfirm, Button, Card, Upload, message, Modal } from 'antd';
import {
LoadingOutlined,
PlusOutlined,
LinkOutlined,
import {
LoadingOutlined,
PlusOutlined,
LinkOutlined,
} from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree';
......@@ -42,6 +42,8 @@ const ClassProperty: React.FC<{}> = () => {
const [plateformSelectNode, setPlateformSelectNode] = useState<any>()
const plateformTreeActions = useTreeActions()
const [customPlateformExpandkeys, setCustomPlateformExpandkeys] = useState<any>()
/* 选择品类树 */
const {
treeStatus,
......@@ -66,16 +68,8 @@ const ClassProperty: React.FC<{}> = () => {
const formInitValue = (nodeRecord && treeStatus === FormState.EDIT) ? getTreeMaps(nodeRecord.key) : {}
// useEffect(() => {
// if(treeActions.setExpandedKeys){
// console.log(treeActions.setExpandedKeys)
// treeActions.setSelectKey(85)
// treeActions.setExpandedKeys([85])
// }
// }, [])
/* 关联平台后台品类树 */
const {
const {
treeData: plateformTreeData,
} = useTreeTabs({
fetchMenuData: fetchPlatformTreeData,
......@@ -89,7 +83,6 @@ const ClassProperty: React.FC<{}> = () => {
parentId: nodeRecord ? nodeRecord.parentId : 0,
id: null,
}
// delete params.category.name
PublicApi.postProductCustomerSaveOrUpdateCustomerCategory(params).then(res => {
resetMenu()
setTreeStatus(FormState.FREE)
......@@ -109,8 +102,6 @@ const ClassProperty: React.FC<{}> = () => {
const handleSelectCancel = () => {
setPlateformVisible(false)
// setSelectLinkKeys(undefined)
// setSelectLinkRow({})
plateformTreeActions.setExpandedKeys && plateformTreeActions.setExpandedKeys([])
}
......@@ -124,9 +115,10 @@ const ClassProperty: React.FC<{}> = () => {
const handleConnectCategroyBtn = () => {
setPlateformVisible(true)
if(formInitValue?.category?.id) {
let arr = [formInitValue.category.parentId + '', formInitValue.category.id + '']
plateformTreeActions.setExpandedKeys && plateformTreeActions.setExpandedKeys(arr)
plateformTreeActions.setSelectKey && plateformTreeActions.setSelectKey(formInitValue?.category?.id)
setCustomPlateformExpandkeys([formInitValue.category.id])
// let arr = [formInitValue.category.parentId + '', formInitValue.category.id + '']
// plateformTreeActions.setExpandedKeys && plateformTreeActions.setExpandedKeys(arr)
plateformTreeActions.setSelectKey && plateformTreeActions.setSelectKey(formInitValue.category.id)
}
}
......@@ -148,13 +140,14 @@ const ClassProperty: React.FC<{}> = () => {
<h3 className="mb-30">选择要编辑的项目</h3>
{
treeData && treeData.length > 0
? <TabTree
? <TabTree
fetchData = {params => fetchClassTreeData(params)}
treeData={treeData}
toolsRender={toolsRender}
actions={treeActions}
handleSelect={(key, node) => clickSelect(key, node)}
customKey="id"
// customExpandkeys={['8']}
/>
:
<Button block type='primary' onClick={() => handleSelect()}>暂无菜单, 开始新增</Button>
......@@ -179,7 +172,6 @@ const ClassProperty: React.FC<{}> = () => {
setIsEditForm(true)
})
$('onFieldValueChange', 'name, type, imageUrl, category').subscribe(state => {
console.log(flag,'flag')
if(flag){
setIsEditForm(true)
flag = false
......@@ -220,7 +212,6 @@ const ClassProperty: React.FC<{}> = () => {
cancelText="取消"
forceRender
getContainer='#root'
// destroyOnClose={true}
>
<TabTree
fetchData = {params => fetchPlatformTreeData(params)}
......@@ -228,9 +219,11 @@ const ClassProperty: React.FC<{}> = () => {
handleSelect={(key, node) => handlePlateformSelect(key, node)}
actions={plateformTreeActions}
customKey="id"
enableSearch={true}
customExpandkeys={customPlateformExpandkeys}
/>
</Modal>
</PageHeaderWrapper>
}
......
src/pages/classAndProperty/propertyValue/addPropertyValue.tsx
View file @ e80fc922
......@@ -4,12 +4,11 @@ import { LinkOutlined, QuestionCircleOutlined, } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { history } from 'umi';
import ReutrnEle from '@/components/ReturnEle';
import { PropertyValueApi } from '@/services/classAndProperty/propertyValue/API'
import { PublicApi } from '@/services/api';
import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree';
import { useTreeTabs } from '@/hooks/useTreeTabs';
import { GetManageAreaAllResponse } from '@/services';
import { validatorByte } from '@/utils/regExp';
import { treeReduction } from '@/utils';
const layout = {
labelCol: {
......@@ -43,8 +42,9 @@ const AddPropertyValue: React.FC<{}> = () => {
const [attributeValueId, setAttributeValueId] = useState(null) // url传入 可判断是编辑/新增
const [isSee, setIsSee] = useState(false) // 判断查看依据
const [specialType, setSpecialType] = useState<any>() // 1-日期; 2-地区
const [proviceOptions, setProviceOptions] = useState<GetManageAreaAllResponse>()
const [proviceOptions, setProviceOptions] = useState<any>()
const [areaString, setAreaString] = useState<string>()
const [customPlateformExpandkeys, setCustomPlateformExpandkeys] = useState<any>()
/* 平台属性值列表树 */
const {
......@@ -60,8 +60,7 @@ const AddPropertyValue: React.FC<{}> = () => {
let arr = [...res.data] //裁去最后一级别
for (let index in arr) {
for (let _index in arr[index].areaResponses) {
let o = arr[index].areaResponses
//@ts-ignore
let o: any = arr[index].areaResponses
o[_index].areaResponses = null
}
}
......@@ -133,10 +132,14 @@ const AddPropertyValue: React.FC<{}> = () => {
let formData = attrValueForm.getFieldValue('attributeValue')
let chooseKey = formData && formData.id || undefined
setSelectKey(chooseKey)
// 树回显
console.log(selectRow, formData, 'select')
// plateformActions.setExpandedKeys && plateformActions.setExpandedKeys(arr)
// plateformActions.setSelectKey && plateformActions.setSelectKey(formInitValue?.category?.id)
if(formData?.id) {
const reductData = Object.values(treeReduction(treeData))
// 筛选同名称的id
let aimKey = reductData.filter(item => item['title'] === formData.value).map(_item => _item['id'])
setCustomPlateformExpandkeys(aimKey)
// todo 树回显 无法选中 可能是因为key为含字母字符串原因
plateformActions.setSelectKey && plateformActions.setSelectKey(aimKey[0])
}
}
const handlePlateformSelect = (key, node) => {
......@@ -326,6 +329,7 @@ const AddPropertyValue: React.FC<{}> = () => {
handleSelect={(key, node) => handlePlateformSelect(key, node)}
customKey="id"
actions={plateformActions}
customExpandkeys={customPlateformExpandkeys}
/>
</Modal>
</Card>
......
src/pages/classAndProperty/propertyValue/index.tsx
View file @ e80fc922
......@@ -17,7 +17,6 @@ import { PublicApi } from '@/services/api';
import { createFormActions } from '@formily/antd';
import { useTreeTabs } from '@/hooks/useTreeTabs';
import TabTree, { createTreeActions } from '@/components/TabTree';
import { GetProductCustomerGetCustomerAttributeResponse } from '@/services';
// const formActions = createFormActions()
const treeActions = createTreeActions()
......@@ -32,7 +31,7 @@ const PropertyValue: React.FC<{}> = () => {
const ref = useRef<any>({})
const [selectKey, setSelectKey] = useState(undefined)
const [selectNode, setSelectNode] = useState<any>()
const [innerExpandKeys, setInnerExpandKeys] = useState<any[]>([])
const [customExpandkeys, setCustomExpandkeys] = useState<any>()
const {
treeStatus,
......@@ -54,11 +53,13 @@ const PropertyValue: React.FC<{}> = () => {
let prefix = sessionStorage.getItem('beforeKeyPrefix')
let beforeKey = history.location.query.attrId
if(beforeKey){ // 展开之前的选择项
if(beforeKey){ // 展开之前的选择项 拼接含有字母字符串的key
setSelectKey(beforeKey)
setInnerExpandKeys([`${prefix}_${beforeKey}`])
treeActions.setExpandedKeys([`${prefix}_${beforeKey}`]) // 拼接不正常的key
console.log(`${prefix}_${beforeKey}`, '展开的key')
let evilKey = `${prefix}_${beforeKey}`
treeActions.setExpandedKeys([evilKey])
setCustomExpandkeys([evilKey])
treeActions.setSelectKeys([evilKey])
console.log(evilKey, '展开的key')
}
}, [])
......@@ -83,9 +84,9 @@ const PropertyValue: React.FC<{}> = () => {
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
PublicApi.getProductCustomerGetCustomerAttributeValueList({
PublicApi.getProductCustomerGetCustomerAttributeValueList({
...params,
name: params.name || '',
name: params.name || '',
customerAttributeId: selectKey
}).then(res=>{
const { data } = res
......@@ -192,12 +193,13 @@ const PropertyValue: React.FC<{}> = () => {
<h3 className="mb-30">选择要编辑的项目</h3>
{
treeData && treeData.length > 0
? <TabTree
? <TabTree
fetchData = {params => fetchAttributeTreeData(params)}
treeData={treeData}
actions={treeActions}
handleSelect={(key, node) => onHandleSelect(key, node)}
customKey="id"
customExpandkeys={customExpandkeys}
/>
:
<>暂无菜单</>
......@@ -242,8 +244,8 @@ const PropertyValue: React.FC<{}> = () => {
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => {
history.push(`/memberCenter/commodityAbility/classAndProperty/propertyValue/add?attrId=${selectKey||history.location.query.attrId}&attrName=${selectNode?._title||history.location.query.attrName}&type=${selectNode?.type||history.location.query.type}`)
onClick={() => {
history.push(`/memberCenter/commodityAbility/classAndProperty/propertyValue/add?attrId=${selectKey||history.location.query.attrId}&attrName=${selectNode?._title||history.location.query.attrName}&type=${selectNode?.type||history.location.query.type}`)
}}
>
新建
......
src/pages/trademark/index.tsx
View file @ e80fc922
......@@ -43,6 +43,11 @@ const Trademark: React.FC<{}> = () => {
render: (text: any, record: any) => <span className="commonPickColor" onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></span>
},
{
title: '原品牌',
dataIndex: ['sourceBrand', 'name'],
key: 'sourceBrand',
},
{
title: '申请审核时间',
dataIndex: 'applyTime',
key: 'applyTime',
......
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