Skip to content

J
jinfa-admin
Commit 0fb72669 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix:品类属性品牌使用tree

parent 643ece4f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1150 additions and 253 deletions
config/routes/calssPropertyRoute.ts 0 → 100644
View file @ 0fb72669
/*
* 商品能力路由
* @Author: ghua
* @Date: 2020-07-10 11:36:32
* @Last Modified by: ghua
* @Last Modified time: 2020-07-18 11:19:36
*/
const router = {
path: '/classAndProperty',
name: 'classAndProperty',
icon: 'SmileOutlined',
hidePageHeader: true,
routes: [
{
path: '/classAndProperty/class',
name: 'class',
component: '@/pages/classAndProperty/class',
},
{
path: '/classAndProperty/attribute',
name: 'attribute',
component: '@/pages/classAndProperty/attribute',
},
{
path: '/classAndProperty/attribute/addAttribute',
name: 'addAttribute',
component: '@/pages/classAndProperty/attribute/addAttribute',
hideInMenu: true,
},
{
path: '/classAndProperty/propertyValue',
name: 'propertyValue',
component: '@/pages/classAndProperty/propertyValue',
},
{
path: '/classAndProperty/propertyValue/addPropertyValue',
name: 'addPropertyValue',
component: '@/pages/classAndProperty/propertyValue/addPropertyValue',
hideInMenu: true,
},
{
path: '/classAndProperty/categoryAttributes',
name: 'categoryAttributes',
component: '@/pages/classAndProperty/categoryAttributes',
},
{
path: '/classAndProperty/categoryAttributes/viewAttributes',
name: 'viewAttributes',
component: '@/pages/classAndProperty/categoryAttributes/viewAttributes',
hideInMenu: true,
},
]
}
export default router
config/routes/commodityRoute.ts
View file @ 0fb72669
/* /*
* 商品能力路由 * 商品审核路由
* @Author: ghua
* @Date: 2020-07-10 11:36:32
* @Last Modified by: ghua
* @Last Modified time: 2020-07-18 11:19:36
*/ */
const router = { const router = {
path: '/classAndProperty', path: '/commodity',
name: 'classAndProperty', name: 'commodity',
icon: 'SmileOutlined', icon: 'SmileOutlined',
hidePageHeader: true, hidePageHeader: true,
routes: [ routes: [
{ {
path: '/classAndProperty/class', path: '/commodity/products',
name: 'class', name: 'products',
component: '@/pages/classAndProperty/class', component: '@/pages/commodity/products',
}, },
{ {
path: '/classAndProperty/attribute', path: '/commodity/products/viewProducts',
name: 'attribute', name: 'viewProducts',
component: '@/pages/classAndProperty/attribute', component: '@/pages/commodity/products/viewProducts',
},
{
path: '/classAndProperty/attribute/addAttribute',
name: 'addAttribute',
component: '@/pages/classAndProperty/attribute/addAttribute',
hideInMenu: true, hideInMenu: true,
}, },
{ {
path: '/classAndProperty/propertyValue', path: '/commodity/products/checkProducts',
name: 'propertyValue', name: 'checkProducts',
component: '@/pages/classAndProperty/propertyValue', component: '@/pages/commodity/products/checkProducts',
},
{
path: '/classAndProperty/propertyValue/addPropertyValue',
name: 'addPropertyValue',
component: '@/pages/classAndProperty/propertyValue/addPropertyValue',
hideInMenu: true, hideInMenu: true,
}, },
{ {
path: '/classAndProperty/categoryAttributes', path: '/commodity/productWillCheck',
name: 'categoryAttributes', name: 'productWillCheck',
component: '@/pages/classAndProperty/categoryAttributes', component: '@/pages/commodity/productWillCheck',
},
{
path: '/classAndProperty/categoryAttributes/viewAttributes',
name: 'viewAttributes',
component: '@/pages/classAndProperty/categoryAttributes/viewAttributes',
hideInMenu: true,
}, },
] ]
} }
......
config/routes/index.ts
View file @ 0fb72669
...@@ -9,12 +9,13 @@ ...@@ -9,12 +9,13 @@
* @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes * @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
*/ */
import pageCustomized from './pageCustomized' import pageCustomized from './pageCustomized'
import commodityRoute from './commodityRoute' // 商品能力路由 import calssPropertyRoute from './calssPropertyRoute' // 品类属性路由
import trademarkRoute from './brandRoute' // 品牌路由 import trademarkRoute from './brandRoute' // 品牌路由
import commodity from './commodityRoute' // 商品审核路由
import logisticsRoutes from './logisticsRoutes' import logisticsRoutes from './logisticsRoutes'
import memberAbility from './memberAbility' import memberAbility from './memberAbility'
import ruleSettingRoutes from './ruleSettingRoutes' import ruleSettingRoutes from './ruleSettingRoutes'
const routeList = [pageCustomized, commodityRoute, trademarkRoute, logisticsRoutes, memberAbility, ruleSettingRoutes] const routeList = [pageCustomized, calssPropertyRoute, trademarkRoute, commodity, logisticsRoutes, memberAbility, ruleSettingRoutes]
const router = [ const router = [
{ {
path: '/login', path: '/login',
......
package.json
View file @ 0fb72669
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"@ant-design/pro-layout": "^5.0.12", "@ant-design/pro-layout": "^5.0.12",
"@formily/antd": "^1.2.11", "@formily/antd": "^1.2.11",
"@formily/antd-components": "^1.2.11", "@formily/antd-components": "^1.2.11",
"@umijs/hooks": "^1.9.3",
"@umijs/preset-react": "1.x", "@umijs/preset-react": "1.x",
"@umijs/test": "^3.2.0", "@umijs/test": "^3.2.0",
"braft-editor": "^2.3.9", "braft-editor": "^2.3.9",
......
src/components/TabTree/index.less 0 → 100644
View file @ 0fb72669
@import '../../constants/styles/_var.less';
.god-tabtree-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 54px;
background: #fff;
font-size: 18px;
font-weight: 700;
color: @main-font-bold-color;
}
#root .ant-tree.god-tabtree {
.ant-tree-treenode {
cursor: pointer;
&:hover {
.god-tabtree-icons {
opacity: 1;
}
}
}
.god-tabtree-icons {
opacity: 0;
transition: .3s;
&.show {
opacity: 1;
}
}
.god-tabtree-select {
background: none;
border-color: @tree-node-border;
&.show {
border-color: @main-color;
background: @tree-node_hover;
.tree-node-circle {
background: @main-color;
}
}
&.hide {
.tree-node-circle {
background: @status-stop;
}
}
}
}
src/components/TabTree/index.tsx 0 → 100644
View file @ 0fb72669
import React, { useState, ReactText, useImperativeHandle } from 'react'
import { Tree, Space, Tooltip, Button } from 'antd'
import { findItemAndDelete, findTreeKeys } from '@/utils'
import './index.less'
import deepClone from 'clone'
import { TreeProps } from 'antd/lib/tree'
import { PlusOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons'
import cx from 'classnames'
import { EventDataNode } from 'rc-tree/lib/interface'
import { useSelections } from '@umijs/hooks'
export interface TabTreeActions {
getExpandedKeys: () => ReactText[],
getSelectKey: () => ReactText,
getSelectKeys: () => ReactText[],
setExpandedKeys: (keys: ReactText[]) => void,
setSelectKey: (key: ReactText) => void
setSelectKeys: (keys: ReactText[]) => void
}
export interface toolsRenderProps {
addNode?(node),
addChildNode?(node),
deleteNode?(node)
}
export interface TabTreeProps extends TreeProps {
treeData: any[],
fetchData(params?): Promise<any>,
actions?: TabTreeActions,
title?: React.ReactNode,
// 若传入该字段， 则会作为tree识别的节点, 默认是`key`, 传入后原有的key值将无效
customKey?: string | number,
customTitle?: string | number,
handleSelect?: (key: ReactText, node: EventDataNode) => void | Promise<any>,
toolsRender?: toolsRenderProps
}
export interface InnermostTreeNodeProps {
}
export interface RenderIconsProps {
node: any,
nowKey: any,
toolsRender?: toolsRenderProps
}
export const useTreeActions = (): TabTreeActions => {
const actions: TabTreeActions = {
getExpandedKeys(){ return [] },
getSelectKey(){ return '' },
getSelectKeys(){ return [] },
setSelectKey(){},
setSelectKeys(){},
setExpandedKeys(){},
}
return actions
}
const InnermostTreeNode: React.FC<InnermostTreeNodeProps> = (props) => {
return <span style={{display: 'flex', alignItems: 'center'}}>
<span className='tree-node-circle'></span>
<span>{props.children}</span>
</span>
}
const RenderIcons: React.FC<RenderIconsProps> = (props) => {
const {
toolsRender
} = props
// @todo 去掉点击active时， 保持icon显示
// return <Space className={cx('god-tabtree-icons', props.nowKey === props.node.key ? 'show' : 'hide')}>
return <Space className={cx('god-tabtree-icons')}>
<Tooltip title='新增节点'>
<PlusCircleOutlined onClick={(e) => {
e.stopPropagation()
toolsRender && toolsRender.addNode && toolsRender.addNode(props.node)
}}/>
</Tooltip>
<Tooltip title='新增子节点'>
<PlusCircleOutlined onClick={(e) => {
e.stopPropagation()
toolsRender && toolsRender.addChildNode && toolsRender.addChildNode(props.node)
}}/>
</Tooltip>
<Tooltip title='删除当前节点'>
<DeleteOutlined onClick={(e) => {
e.stopPropagation()
toolsRender && toolsRender.deleteNode && toolsRender.deleteNode(props.node)
}}/>
</Tooltip>
</Space>
}
// 将无children的叶子节点中的title 转化为带有样式的title， 由于每次render 都需要重新deepClone深拷贝，可以优化
// 在多选模式下无需转化
function transformSingleTitle(data, nowKey, checkable, disabled, toolsRender, customKey?, customTitle?) {
if (Array.isArray(data) && data.length > 0) {
for (let item = 0; item < data.length; item++) {
// 指定默认key
if (customKey) {
data[item]._key = data[item].key
data[item].key = data[item][customKey]
}
if (data[item].children) {
transformSingleTitle(data[item].children, nowKey, checkable, disabled, toolsRender, customKey, customTitle)
}
data[item]._title = data[item]._title || data[item].title
data[item].title = <span className='god-tabtree-title' style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
{ (checkable || (data[item].children && data[item].children.length !== 0)) ? data[item].title : <InnermostTreeNode>{data[item].title}</InnermostTreeNode> }
<div>
{ toolsRender && <RenderIcons node={data[item]} nowKey={nowKey} toolsRender={toolsRender}/> }
</div>
</span>
// 使选中样式受控
data[item].className= cx('god-tabtree-select', nowKey === data[item].key ? 'show' : 'hide')
if (disabled) {
data[item].disableCheckbox = disabled
}
if (customTitle) {
data[item]._title = data[item].title
data[item].title = data[item][customTitle]
}
}
}
return data;
}
const TabTree:React.FC<TabTreeProps> = (props) => {
const {
title,
treeData,
actions,
checkable,
customKey,
customTitle,
toolsRender,
disabled
} = props
// 需展开的key
const [expandkeys, setExpandkeys] = useState<ReactText[]>([])
// 当前选中的node
const [selectKey, setSelectKey] = useState<string | number>('')
const data = transformSingleTitle(deepClone(treeData), selectKey, checkable, disabled, toolsRender, customKey, customTitle)
// 重写选择方法, 只有在开启多选的时候才会启用
const checkedKeys = findTreeKeys(treeData)
const { selected, select,setSelected, unSelect, allSelected, unSelectAll, selectAll } = useSelections(
checkedKeys,
[]
);
const toggleSelectAll = () => {
if (allSelected) {
unSelectAll()
} else {
selectAll()
}
}
if (actions) {
actions.getExpandedKeys = () => expandkeys
actions.getSelectKey = () => selectKey
actions.getSelectKeys = () => selected
actions.setSelectKeys = (keys: ReactText[]) => {
setSelected(keys)
}
actions.setExpandedKeys = (keys: ReactText[]) => {
setExpandkeys(keys)
}
actions.setSelectKey = (key: ReactText) => {
setSelectKey(key)
}
}
const batchSelect = (items: any[]) => {
items.forEach(v => select(v))
}
return (
<div>
{title &&
<div className='god-tabtree-header'>
<div>{title}</div>
{checkable && <Button onClick={toggleSelectAll} disabled={disabled} type='link'>{ allSelected ? '取消全选' : '全选'}</Button>}
</div>
}
<Tree
className="god-tabtree"
treeData={data}
blockNode
checkable={checkable}
checkedKeys={selected}
expandedKeys={expandkeys}
onCheck={(keys, nodes) => {
const { node, checked, checkedNodes } = nodes
checked ? batchSelect(keys as any) : setSelected(checkedNodes)
}}
onSelect={(keys, e) => {
// 控制点击node时可以展开
const { node, selected } = e
// 用户自定义的选择后触发事件
if (props.handleSelect) {
const result:any = props.handleSelect(node.key, node)
// 存在返回值则不执行选中事件, 一般用于切换node时，不希望离开当前页面
if (result !== undefined) {
result.then(() => {
// 若promise 是resolve状态， 说明确认离开了当前页面
setSelectKey(selectKey === node.key ? '' : node.key)
setExpandkeys(expandkeys.includes(node.key) ? findItemAndDelete(expandkeys, node.key) : [...expandkeys, node.key])
}).catch(() => {
})
return false
}
}
// 如果重复点击 需要取消选中
setSelectKey(selectKey === node.key ? '' : node.key)
setExpandkeys(expandkeys.includes(node.key) ? findItemAndDelete(expandkeys, node.key) : [...expandkeys, node.key])
}}
>
</Tree>
</div>
)
}
TabTree.defaultProps = {}
export default TabTree
\ No newline at end of file
src/constants/styles/_var.less
View file @ 0fb72669
// global // global
@main-color: #00B37A; @main-color: #00B37A;
@main-font-bold-color: #172B4D;
// layout // layout
@header-global-nav-bg: #38414A; @header-global-nav-bg: #38414A;
...@@ -12,3 +13,8 @@ ...@@ -12,3 +13,8 @@
@status-modify: #669EDE; @status-modify: #669EDE;
@status-valid: #41CC9E; @status-valid: #41CC9E;
@status-invalid: #FFC400; @status-invalid: #FFC400;
// component
@tree-node: #FBFCFD;
@tree-node_hover: #EBF7F2;
@tree-node-border: rgba(0, 0, 0, 0.04);
src/global.less
View file @ 0fb72669
...@@ -287,4 +287,74 @@ ol { ...@@ -287,4 +287,74 @@ ol {
.ant-menu-inline .ant-menu-item-selected::after { .ant-menu-inline .ant-menu-item-selected::after {
display: none; display: none;
} }
// 处理ant tree组件
// .ant-tree-checkbox {
// order: 10;
// }
.ant-tree .ant-tree-treenode {
padding-bottom: 0;
padding-right: 16px;
background: @tree-node;
border: 1px solid @tree-node-border;
margin-bottom: 4px;
align-items: center;
height: 32px;
&.ant-tree-treenode-selected {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode:hover {
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode-selected {
.tree-node-circle {
background: @main-color;
}
}
}
.tree-node-circle {
width: 4px;
height: 4px;
border-radius: 50%;
margin-right: 12px;
background: @status-stop;
}
.ant-tree .ant-tree-checkbox {
margin: 0;
}
.ant-tree .ant-tree-node-content-wrapper:hover {
background: none;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
background: none;
}
.ant-tree .ant-tree-switcher {
width: 28px;
height: 28px;
line-height: 32px;
}
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon {
font-size: 14px;
}
.black-tabs {
&.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
margin-right: 0;
}
}
} }
\ No newline at end of file
src/hooks/useTreeTabs.ts 0 → 100644
View file @ 0fb72669
import { useMap } from '@umijs/hooks'
import { useState, useEffect } from 'react'
import { Modal } from 'antd'
export enum FormState {
FREE, // 空闲状态
EDIT, // 编辑状态
ADD, // 新增状态
}
export interface useTreeTabOptions {
selectCallback?(selectKey?, node?),
fetchMenuData?(),
fetchItemDetailData?(id),
resetDetail?(),
}
export const useTreeTabs = (options: useTreeTabOptions = {}) => {
const { selectCallback, fetchMenuData, fetchItemDetailData, resetDetail } = options
const [ treeExtraMaps, { set, get } ] = useMap<any, any>()
const [ treeData, setTreeData ] = useState<any[]>([])
const [ treeStatus, setTreeStatus ] = useState<FormState>(FormState.FREE)
const [ nodeRecord, setNodeRecord ] = useState<any>(null)
const [isEditForm, setIsEditForm] = useState<boolean>(false)
useEffect(() => {
resetMenu()
}, [])
const resetMenu = async () => {
if (fetchMenuData) {
const res = await fetchMenuData()
setTreeData(res.data || [])
}
}
const handleSelect = (selectKey?, node?) => {
if (selectCallback) {
selectCallback(selectKey, node)
return ;
}
// 首次新增菜单的时候没有节点信息
if (!node) {
setNodeRecord(null)
setTreeStatus(FormState.ADD)
return ;
}
// key相等时 不刷新右侧表单
if (nodeRecord && nodeRecord.key === selectKey) {
setNodeRecord(node)
setTreeStatus(FormState.EDIT)
} else {
if (isEditForm) {
// 有填写过表单
return new Promise((resolve, reject) => {
Modal.confirm({
content: '确认要离开当前页面吗,您提交的数据尚未保存',
onOk() {
// 确认离开当前页, 需改变node state
setNodeRecord(node)
setTreeStatus(FormState.EDIT)
// 点击菜单，请求数据重置
handleFindDetail(selectKey)
setIsEditForm(false)
resetDetail && resetDetail()
resolve()
},
onCancel() {
reject()
}
})
})
} else {
// 编辑页， 需回显
handleFindDetail(selectKey)
setNodeRecord(node)
setTreeStatus(FormState.EDIT)
}
}
}
const handleFindDetail = (id) => {
fetchItemDetailData && fetchItemDetailData({id}).then(res => {
const { data } = res
set(id, data)
})
}
return {
handleSelect,
treeStatus,
setTreeStatus,
treeData,
setTreeData,
nodeRecord,
setNodeRecord,
isEditForm,
setIsEditForm,
treeExtraMaps,
setTreeMaps: set,
getTreeMaps: get,
resetMenu
}
}
\ No newline at end of file
src/locales/zh-CN/menu.ts
View file @ 0fb72669
...@@ -91,5 +91,12 @@ export default { ...@@ -91,5 +91,12 @@ export default {
'menu.trademark.viewBrand': '品牌详情', 'menu.trademark.viewBrand': '品牌详情',
'menu.trademark.trademarkWillCheck': '待审核品牌', 'menu.trademark.trademarkWillCheck': '待审核品牌',
//商品审核
'menu.commodity': '商品审核',
'menu.commodity.products': '商品查询',
'menu.commodity.viewProducts': '商品详情',
'menu.commodity.productWillCheck': '待审核商品',
'menu.commodity.checkProducts': '审核商品',
} }
// export default utils.transformDataPre(data, 'menu') // export default utils.transformDataPre(data, 'menu')
src/pages/classAndProperty/attribute/addAttribute.tsx
View file @ 0fb72669
...@@ -3,7 +3,6 @@ import { history } from 'umi' ...@@ -3,7 +3,6 @@ import { history } from 'umi'
import { Row, Col, Form, Input, Select, Popconfirm, Button, Card, Modal, Checkbox, Tooltip, message, Table } from 'antd'; import { Row, Col, Form, Input, Select, Popconfirm, Button, Card, Modal, Checkbox, Tooltip, message, Table } from 'antd';
import { LinkOutlined, QuestionCircleOutlined, InfoCircleOutlined } from '@ant-design/icons'; import { LinkOutlined, QuestionCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { StandardTable } from 'god'
import {ColumnType} from 'antd/lib/table/interface'; import {ColumnType} from 'antd/lib/table/interface';
import ReutrnEle from '@/components/ReturnEle'; import ReutrnEle from '@/components/ReturnEle';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
...@@ -52,7 +51,7 @@ const AddAtttribute: React.FC<{}> = () => { ...@@ -52,7 +51,7 @@ const AddAtttribute: React.FC<{}> = () => {
delete values.attributeShow delete values.attributeShow
if(JSON.stringify(values.attribute)==='{}') if(JSON.stringify(values.attribute)==='{}')
delete values.attribute delete values.attribute
PublicApi.postProductCustomerSaveOrUpdateCustomerAttribute(values) PublicApi.postProductPlatformSaveOrUpdateAttribute(values)
}).catch(error => { }).catch(error => {
console.error(error) console.error(error)
}) })
...@@ -208,7 +207,18 @@ const AddAtttribute: React.FC<{}> = () => { ...@@ -208,7 +207,18 @@ const AddAtttribute: React.FC<{}> = () => {
<Col span={24}> <Col span={24}>
<Form.Item name="isEmpty" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled={pageStatus === 2}>必填</Checkbox></Form.Item> <Form.Item name="isEmpty" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled={pageStatus === 2}>必填</Checkbox></Form.Item>
</Col> </Col>
<Col span={24}>
<Form.Item name="isImage" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled={pageStatus === 2}>上传图片</Checkbox></Form.Item>
<Tooltip title="勾选后对于此属性的属性值可以上传属性值的对应图片！">
<InfoCircleOutlined />
</Tooltip>
</Col>
<Col span={24}>
<Form.Item name="isName" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled={pageStatus === 2}>名称属性</Checkbox></Form.Item>
<Tooltip title="勾选后对于此属性的属性值会将属性值添加到商品名称之后，中间以/区隔！">
<InfoCircleOutlined />
</Tooltip>
</Col>
<Col span={24}> <Col span={24}>
<Form.Item name="isPrice" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled={pageStatus === 2}>价格属性</Checkbox></Form.Item> <Form.Item name="isPrice" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled={pageStatus === 2}>价格属性</Checkbox></Form.Item>
<Tooltip title="勾选后对于此属性的每个属性值会在商品发布时按属性设置不同的价格！"> <Tooltip title="勾选后对于此属性的每个属性值会在商品发布时按属性设置不同的价格！">
......
src/pages/classAndProperty/categoryAttributes/index.tsx
View file @ 0fb72669
import React, { useState, useRef, ReactNode, useEffect } from 'react' import React, { useState, useRef, ReactNode, useEffect } from 'react'
import { Row, Col, Tooltip, Popconfirm, Button, Modal, message } from 'antd'; import { Row, Col, Tooltip, Popconfirm, Button, Modal, Card } from 'antd';
import { import {
PauseCircleOutlined, PauseCircleOutlined,
PlayCircleOutlined, PlayCircleOutlined,
...@@ -12,86 +12,87 @@ import { MenuTree, StandardTable } from 'god'; ...@@ -12,86 +12,87 @@ import { MenuTree, StandardTable } from 'god';
import { ColumnType, TableRowSelection } from 'antd/lib/table/interface'; import { ColumnType, TableRowSelection } from 'antd/lib/table/interface';
import styles from './index.less'; import styles from './index.less';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
import TabTree from '@/components/TabTree';
import { createFormActions } from '@formily/antd';
import { useTreeTabs } from '@/hooks/useTreeTabs';
function formatter(params: any) { // 字段title转换为name const formActions = createFormActions()
params.name = params.title
delete params.title const fetchCategoryTreeData = async (params?) => {
if (params.children.length > 0) const res = await PublicApi.getProductPlatformGetCategoryTree()
params.children.map((item: any) => formatter(item)) return res
return params
} }
let requestLinkFlag: boolean = false
const CategoryAttributes: React.FC<{}> = () => { const CategoryAttributes: React.FC<{}> = () => {
const ref = useRef({}) const ref = useRef<any>({})
const refLink = useRef({}) const refLink = useRef({})
const [selectKeys, setSelectKeys] = useState(undefined) const currentCategoryRef = useRef<any>() // 保存最新的品类id
const [selectKey, setSelectKey] = useState<any>()
const [selectNode, setSelectNode] = useState<any>()
const [roleVisible, setRoleVisible] = useState(false) const [roleVisible, setRoleVisible] = useState(false)
const [selectRow, setSelectRow] = useState<any>({}) const [selectRow, setSelectRow] = useState<any>({})
const [selectTableRow, setSelectTableRow] = useState<any[]>([]) const [selectTableRow, setSelectTableRow] = useState<any[]>([])
const [selectedTableRowKeys, setSelectedTableRowKeys] = useState<Array<number>>([]) //表格选择 const [selectedTableRowKeys, setSelectedTableRowKeys] = useState<Array<number>>([]) //表格选择
const [linkTableRowData, setLinkTableRowData] = useState<any[]>([]) const [linkTableRowData, setLinkTableRowData] = useState<any[]>([])
const [treeData, setTreeData] = useState<CategoryTreeApi.CategoryTreeModel[]>([]) // 初始品类树
useEffect(() => { const {
PublicApi.getProductCustomerGetCustomerCategoryTree().then(res=>{ treeStatus,
const { data } = res setTreeStatus,
let newArr: CategoryTreeApi.CategoryTreeModel[] = [] treeData,
//@ts-ignore setIsEditForm, //是否编辑状态
data.length > 0 && data.map((item: any) => { nodeRecord,
let arrItem = formatter(item) setNodeRecord,
newArr.push(arrItem) handleSelect,
}) getTreeMaps,
setTreeData(newArr) setTreeMaps,
resetMenu
} = useTreeTabs({
fetchMenuData: fetchCategoryTreeData,
}) })
}, [])
// 获取选中项的关联属性列表 // 获取选中项的关联属性列表
useEffect(() => { useEffect(() => {
if (JSON.stringify(selectRow) != '{}') { if (selectKey)
requestLinkFlag = true ref.current.reload({ current: 1, pageSize: 10, name: '', categoryId: selectKey })
//@ts-ignore }, [selectKey])
ref.current.reload({ page: 1, rows: 5, name: '', customerAttributeId: selectRow.id })
}
}, [selectRow])
const fetchLinkAttributeData = (params: any) => { const fetchLinkAttributeData = (params: any) => {
if (requestLinkFlag) { console.log(params, 'params')
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
PublicApi.getProductCustomerGetCustomerCategoryAttributeList({current: params.page, pageSize: params.rows, categoryId: selectRow.id, name: params.name || ''}).then(res=>{ PublicApi.getProductPlatformGetCategoryAttributeList({...params, categoryId: selectKey, name: params.name || ''}).then(res=>{
resolve(res.data) resolve(res.data)
setLinkTableRowData(res.data.data) setLinkTableRowData(res.data.data)
}) })
}) })
} else {
return new Promise((resolve, reject) => { })
}
} }
// 获取所有属性列表 // 获取所有属性列表
const fetchAttributeData = (params: any) => { const fetchAttributeData = (params: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
PublicApi.getProductCustomerGetCustomerAttributeList({ current: params.page, name: params.name || '', pageSize: params.rows }).then(res=>{ PublicApi.getProductPlatformGetAttributeList({ ...params, name: params.name || '' }).then(res=>{
resolve(res.data) resolve(res.data)
}) })
}) })
} }
const handleSee = (record: any) => { const handleSee = (record: any) => {
history.push(`/memberCenter/commodityAbility/classAndProperty/categoryAttributes/viewAttributes?id=${record.id}`) history.push(`/classAndProperty/categoryAttributes/viewAttributes?id=${record.id}`)
console.log(record) console.log(record)
} }
const handleSelectOk = () => { const handleSelectOk = () => {
setRoleVisible(false) setRoleVisible(false)
if (selectTableRow.length) { if (selectTableRow.length) {
PublicApi.postProductCustomerSaveCustomerCategoryAttribute({ customerCategoryId: selectRow.id, customerAttributeIds: selectedTableRowKeys }).then(res=>{ PublicApi.postProductPlatformSaveCategoryAttribute({ categoryId: selectKey, attributeIds: selectedTableRowKeys }).then(res=>{
//@ts-ignore //@ts-ignore
ref.current.reload() ref.current.reload()
}) })
} }
console.log(selectRow) console.log(selectRow)
} }
const handleSelectCancel = () => { const handleSelectCancel = () => {
setRoleVisible(false) setRoleVisible(false)
setSelectedTableRowKeys([]) setSelectedTableRowKeys([])
...@@ -237,16 +238,14 @@ const CategoryAttributes: React.FC<{}> = () => { ...@@ -237,16 +238,14 @@ const CategoryAttributes: React.FC<{}> = () => {
}; };
const clickRelief = (paramsId: number) => { const clickRelief = (paramsId: number) => {
PublicApi.postProductCustomerDeleteCustomerCategoryAttribute({ customerCategoryId: selectRow.id, customerAttributeIds: [paramsId] }).then(res=>{ PublicApi.postProductPlatformDeleteCategoryAttribute({ categoryId: currentCategoryRef.current, attributeIds: [paramsId] }).then(res=>{
//@ts-ignore
ref.current.reload() ref.current.reload()
}) })
} }
const confirm = (record: any) => { const confirm = (record: any) => {
console.log(record, 'record') console.log(record, 'record')
PublicApi.postProductCustomerUpdateCustomerAttributeStatus({ id: record.id, isEnable: !record.isEnable }).then(res=>{ PublicApi.postProductPlatformUpdateAttributeStatus({ id: record.id, isEnable: !record.isEnable }).then(res=>{
//@ts-ignore
ref.current.reload() ref.current.reload()
}) })
} }
...@@ -265,32 +264,36 @@ const CategoryAttributes: React.FC<{}> = () => { ...@@ -265,32 +264,36 @@ const CategoryAttributes: React.FC<{}> = () => {
setSelectedTableRowKeys(linkArray) setSelectedTableRowKeys(linkArray)
} }
const onHandleSelect = (key, node) => {
setSelectKey(key)
setSelectNode(node)
currentCategoryRef.current = key
console.log(key, node, 'handle')
}
return <PageHeaderWrapper> return <PageHeaderWrapper>
<Row gutter={[24, 36]}> <Row gutter={[24, 36]}>
<Col span={8}> <Col span={8}>
<div className={styles.innerBox}>
{/* 商品品类列表 */} {/* 商品品类列表 */}
<MenuTree <Card>
headerTitle='选择要编辑的项目' <h3 className="mb-30">选择要编辑的项目</h3>
menuData={treeData}
menuProps={
{ {
// @ts-ignore treeData && treeData.length > 0
onSelect: (key: string, item: any) => { ? <TabTree
console.log(key, item) fetchData = {params => fetchCategoryTreeData(params)}
//@ts-ignore treeData={treeData}
setSelectKeys(key) handleSelect={(key, node) => onHandleSelect(key, node)}
setSelectRow(item) customKey="id"
},
selectedKeys: selectKeys,
}
}
/> />
</div> :
<>暂无菜单</>
}
</Card>
</Col> </Col>
<Col span={16}> <Col span={16}>
{ {
selectKeys && (<div className={styles.innerBox}><StandardTable selectKey && (<div className={styles.innerBox}><StandardTable
columns={columns} columns={columns}
currentRef={ref} currentRef={ref}
fetchTableData={(params: any) => fetchLinkAttributeData(params)} fetchTableData={(params: any) => fetchLinkAttributeData(params)}
......
src/pages/classAndProperty/categoryAttributes/viewAttributes.tsx
View file @ 0fb72669
...@@ -26,7 +26,7 @@ const viewAtttributes: React.FC<{}> = () => { ...@@ -26,7 +26,7 @@ const viewAtttributes: React.FC<{}> = () => {
const { location } = history const { location } = history
if(location.query.id) { if(location.query.id) {
setQueryId(location.query.id) setQueryId(location.query.id)
PublicApi.getProductCustomerGetCustomerAttribute({id: location.query.id}).then(res=>{ PublicApi.getProductPlatformGetAttribute({id: location.query.id}).then(res=>{
const { data } = res const { data } = res
setFormValue(data) setFormValue(data)
menuForm.setFieldsValue(data) menuForm.setFieldsValue(data)
......
src/pages/classAndProperty/class/index.tsx
View file @ 0fb72669
This diff is collapsed.
src/pages/classAndProperty/class/schema/index.ts 0 → 100644
View file @ 0fb72669
import { ISchema } from '@formily/antd';
export const classSchema: ISchema = {
type: 'object',
properties: {
megaLayout: {
type: 'object',
"x-component": "mega-layout",
"x-component-props": {
grid: true,
columns: 16,
labelAlign: 'top'
},
properties: {
noField1: {
type: 'object',
"x-component": 'mega-layout',
"x-component-props": {
full: true,
},
"x-mega-props": {
span: 1
},
properties: {
name: {
type: 'string',
title: '品类名称',
required: true,
"x-component-props": {
placeholder: '请输入品类名称'
}
},
type: {
type: 'number',
title: '品类类型',
required: true,
"x-component-props": {
placeholder: '请选择品类类型'
},
enum: [
{ label: '实物商品', value: 1 },
{ label: '虚拟商品', value: 2 },
{ label: '服务商品', value: 3 },
{ label: '积分兑换商品', value: 4 }
],
},
imageUrl: {
title: '品类图片',
'x-component': 'CustomUpload'
},
}
},
}
}
}
}
\ No newline at end of file
src/pages/classAndProperty/propertyValue/addPropertyValue.tsx
View file @ 0fb72669
...@@ -5,7 +5,6 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout'; ...@@ -5,7 +5,6 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {MenuTree} from 'god'; import {MenuTree} from 'god';
import { history } from 'umi'; import { history } from 'umi';
import ReutrnEle from '@/components/ReturnEle'; import ReutrnEle from '@/components/ReturnEle';
import { PropertyValueApi } from '@/services/classAndProperty/propertyValue/API'
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
const layout = { const layout = {
...@@ -34,18 +33,14 @@ function formatter(params:any){ // 字段title转换为name ...@@ -34,18 +33,14 @@ function formatter(params:any){ // 字段title转换为name
const AddPropertyValue: React.FC<{}> = () => { const AddPropertyValue: React.FC<{}> = () => {
const ref = useRef({}) const ref = useRef({})
const [attrValueForm] = Form.useForm(); const [attrValueForm] = Form.useForm();
const [roleVisible, setRoleVisible] = useState(false)
const [formValue, setFormValue] = useState<any>({}) const [formValue, setFormValue] = useState<any>({})
const [treeData, setTreeData] = useState<PropertyValueApi.PlatformPropertyValueTreeModel[]>([]) // 初始平台属性值树数据
const [selectKeys, setSelectKeys] = useState<any>(undefined)
const [selectRow, setSelectRow] = useState<any>({})
const [attributeValueId, setAttributeValueId] = useState(null) // url传入 可判断是编辑/新增 const [attributeValueId, setAttributeValueId] = useState(null) // url传入 可判断是编辑/新增
const [isSee, setIsSee] = useState(false) // 判断查看依据 const [isSee, setIsSee] = useState(false) // 判断查看依据
useEffect(() => { useEffect(() => {
const { attrId, attrName, attrValueId, isSee } = history.location.query const { attrId, attrName, attrValueId, isSee } = history.location.query
if(attrId){ if(attrId){
attrValueForm.setFieldsValue({customerAttribute: { id: Number(attrId)}}) attrValueForm.setFieldsValue({attribute: { id: Number(attrId)}})
} }
if(attrName){ if(attrName){
attrValueForm.setFieldsValue({attributeName: attrName}) attrValueForm.setFieldsValue({attributeName: attrName})
...@@ -53,8 +48,7 @@ const AddPropertyValue: React.FC<{}> = () => { ...@@ -53,8 +48,7 @@ const AddPropertyValue: React.FC<{}> = () => {
if(attrValueId){ // 编辑 if(attrValueId){ // 编辑
attrValueForm.setFieldsValue({id: attrValueId}) attrValueForm.setFieldsValue({id: attrValueId})
setAttributeValueId(attrValueId) setAttributeValueId(attrValueId)
PublicApi.getProductCustomerGetCustomerAttributeValue({id: attrValueId}).then(res=>{ PublicApi.getProductPlatformGetAttributeValue({id: attrValueId}).then(res=>{
console.log(res, 'detail')
if(res.code===1000){ if(res.code===1000){
setFormValue(res.data) setFormValue(res.data)
attrValueForm.setFieldsValue(res.data) attrValueForm.setFieldsValue(res.data)
...@@ -64,16 +58,6 @@ const AddPropertyValue: React.FC<{}> = () => { ...@@ -64,16 +58,6 @@ const AddPropertyValue: React.FC<{}> = () => {
if(isSee){ if(isSee){
setIsSee(true) setIsSee(true)
} }
PublicApi.getProductPlatformGetAttributeValueTree().then(res=>{ // 初始平台属性值树数据
const { data } = res
let tempArr:PropertyValueApi.PlatformPropertyValueTreeModel[] = []
//@ts-ignore
data.length > 0 && data.map((item: any) => {
let arrItem = formatter(item)
tempArr.push(arrItem)
})
setTreeData(tempArr)
})
}, []) }, [])
const handleSubmitAllSetting = () => { const handleSubmitAllSetting = () => {
...@@ -84,28 +68,13 @@ const AddPropertyValue: React.FC<{}> = () => { ...@@ -84,28 +68,13 @@ const AddPropertyValue: React.FC<{}> = () => {
if(JSON.stringify(pararms.attributeValue)==='{}') if(JSON.stringify(pararms.attributeValue)==='{}')
delete pararms.attributeValue delete pararms.attributeValue
//@ts-ignore //@ts-ignore
PublicApi.postProductCustomerSaveOrUpdateCustomerAttributeValue(pararms) PublicApi.postProductPlatformSaveOrUpdateAttributeValue(pararms)
}).catch(error => { }).catch(error => {
console.error(error) console.error(error)
}) })
} }
const handleSelectOk = () => {
setRoleVisible(false)
if(JSON.stringify(selectRow)!=='{}'){
attrValueForm.setFieldsValue({attributeValue: {id: selectRow.id, value: selectRow.name}})
}
}
const handleLink = () => {
setRoleVisible(true)
let formData = attrValueForm.getFieldValue('attributeValue')
console.log(formData, 'formData')
let chooseKey = formData && formData.id || undefined
setSelectKeys(`${chooseKey}`)
}
return <PageHeaderWrapper return <PageHeaderWrapper
onBack={() => history.goBack()} onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回"/>} backIcon={<ReutrnEle description="返回"/>}
...@@ -131,7 +100,7 @@ const AddPropertyValue: React.FC<{}> = () => { ...@@ -131,7 +100,7 @@ const AddPropertyValue: React.FC<{}> = () => {
<Input disabled /> <Input disabled />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={['customerAttribute','id']} name={['attribute','id']}
label='属性ID' label='属性ID'
> >
<Input disabled /> <Input disabled />
...@@ -153,28 +122,6 @@ const AddPropertyValue: React.FC<{}> = () => { ...@@ -153,28 +122,6 @@ const AddPropertyValue: React.FC<{}> = () => {
</Col> </Col>
<Col span={18}> <Col span={18}>
<Form.Item <Form.Item
label={
<span>
对应平台属性值&nbsp;
<Tooltip title="如果需要在商城中通过平台定义的品类及属性筛选商品，需要在对应平台属性值一栏中关联平台定义的商品属性值。">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
>
<Row>
<Col span={20} style={{display: 'none'}}><Form.Item name={['attributeValue', 'id']}><Input disabled /></Form.Item></Col>
<Col span={20}><Form.Item name={['attributeValue', 'value']}><Input disabled /></Form.Item></Col>
<Col span={4}>
<Button type="primary" icon={<LinkOutlined />} style={{backgroundColor: '#6B778C', borderColor: '#6B778C'}} onClick={handleLink}>
关联
</Button>
</Col>
</Row>
</Form.Item>
</Col>
<Col span={18}>
<Form.Item
name='attributeName' name='attributeName'
label='属性名称' label='属性名称'
> >
...@@ -213,31 +160,6 @@ const AddPropertyValue: React.FC<{}> = () => { ...@@ -213,31 +160,6 @@ const AddPropertyValue: React.FC<{}> = () => {
</Form> </Form>
</Col> </Col>
</Row> </Row>
<Modal
title="关联平台属性值"
visible={roleVisible}
onOk={handleSelectOk}
onCancel={()=>setRoleVisible(false)}
okText="确认"
cancelText="取消"
>
<MenuTree
headerTitle='平台属性值列表'
menuData={treeData}
menuProps={
{
//@ts-ignore
onSelect: (key: string, item: any) => {
console.log(item, key,'onSelect')
// @ts-ignore
setSelectKeys(key)
setSelectRow(item)
},
selectedKeys: selectKeys,
}
}
/>
</Modal>
</Card> </Card>
</PageHeaderWrapper> </PageHeaderWrapper>
} }
......
src/pages/classAndProperty/propertyValue/index.tsx
View file @ 0fb72669
...@@ -14,61 +14,66 @@ import { history } from 'umi'; ...@@ -14,61 +14,66 @@ import { history } from 'umi';
import { MenuTree, StandardTable } from 'god'; import { MenuTree, StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface'; import { ColumnType } from 'antd/lib/table/interface';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
import { createFormActions } from '@formily/antd';
import { useTreeTabs } from '@/hooks/useTreeTabs';
import TabTree from '@/components/TabTree';
import { GetProductCustomerGetCustomerAttributeResponse } from '@/services';
function formatter(params: any) { // 字段title转换为name const formActions = createFormActions()
params.name = params.title
delete params.title const fetchAttributeTreeData = async (params?) => {
if (params.children.length > 0) const res = await PublicApi.getProductPlatformGetAttributeTree()
params.children.map((item: any) => formatter(item)) return res
return params
} }
let requestFlag: boolean = false
const PropertyValue: React.FC<{}> = () => { const PropertyValue: React.FC<{}> = () => {
const ref = useRef({}) const ref = useRef<any>({})
const [selectKeys, setSelectKeys] = useState(undefined) const [selectKey, setSelectKey] = useState(undefined)
const [selectRow, setSelectRow] = useState<any>({}) const [selectNode, setSelectNode] = useState<any>()
const [attributeTreeData, setAttributeTreeData] = useState<AttributeApi.AttributeTreeModel[]>([])
// 加载属性树 转换字段 const {
useEffect(() => { treeStatus,
PublicApi.getProductCustomerGetCustomerAttributeTree().then(res=>{ setTreeStatus,
const { data } = res treeData,
let newArr: CategoryTreeApi.CategoryTreeModel[] = [] setIsEditForm, //是否编辑状态
//@ts-ignore nodeRecord,
data.length > 0 && data.map((item: any) => { setNodeRecord,
let arrItem = formatter(item) handleSelect,
newArr.push(arrItem) getTreeMaps,
}) setTreeMaps,
setAttributeTreeData(newArr) resetMenu
console.log(res, 'res', newArr, 'newArr') } = useTreeTabs({
fetchMenuData: fetchAttributeTreeData,
}) })
}, [])
// 获取选中项的属性值列表 useEffect(()=>{
useEffect(() => { if(selectKey)
if (JSON.stringify(selectRow) != '{}') { ref.current.reload({current: 1, pageSize: 10, name: '', attributeId: selectKey})
requestFlag = true }, [selectKey])
//@ts-ignore
ref.current.reload({ page: 1, rows: 5, name: '', customerAttributeId: selectRow.id }) const onHandleSelect = (key, node) => {
} if(key){
}, [selectRow]) setSelectKey(key[key.length-1])
setSelectNode(node)
}
}
const fetchData = (params: any) => { const fetchData = (params: any) => {
if (requestFlag) { console.log(params, 'params')
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
PublicApi.getProductCustomerGetCustomerAttributeValueList({ current: params.page, pageSize: params.rows, name: params.name || '', customerAttributeId: selectRow.id }).then(res=>{ PublicApi.getProductPlatformGetAttributeValueList({
...params,
name: params.name || '',
attributeId: selectKey
}).then(res=>{
const { data } = res const { data } = res
resolve(data) resolve(data)
}) })
}) })
} else {
return new Promise((resolve, reject) => { })
}
} }
const handleSee = (record: any) => { const handleSee = (record: any) => {
history.push(`/memberCenter/commodityAbility/classAndProperty/propertyValue/addPropertyValue?attrId=${selectRow.id}&attrName=${selectRow.name}&attrValueId=${record.id}&isSee=true`) history.push(`/classAndProperty/propertyValue/addPropertyValue?attrId=${selectKey}&attrName=${selectNode._title}&attrValueId=${record.id}&isSee=true`)
} }
const columns: ColumnType<any>[] = [ const columns: ColumnType<any>[] = [
...@@ -121,7 +126,7 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -121,7 +126,7 @@ const PropertyValue: React.FC<{}> = () => {
record.isEnable ? '' : <> record.isEnable ? '' : <>
<Button <Button
type='link' type='link'
onClick={() => history.push(`/memberCenter/commodityAbility/classAndProperty/propertyValue/addPropertyValue?attrId=${selectRow.id}&attrName=${selectRow.name}&attrValueId=${record.id}`)} onClick={() => history.push(`/classAndProperty/propertyValue/addPropertyValue?attrId=${selectKey}&attrName=${selectNode._title}&attrValueId=${record.id}`)}
> >
编辑 编辑
</Button> </Button>
...@@ -143,15 +148,13 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -143,15 +148,13 @@ const PropertyValue: React.FC<{}> = () => {
]; ];
const confirm = (record: any) => { const confirm = (record: any) => {
PublicApi.postProductCustomerUpdateCustomerAttributeValueStatus({id: record.id, isEnable: !record.isEnable}).then(res=>{ PublicApi.postProductPlatformUpdateAttributeValueStatus({id: record.id, isEnable: !record.isEnable}).then(res=>{
//@ts-ignore
ref.current.reload() ref.current.reload()
}) })
} }
const clickDelete = (record: any) => { const clickDelete = (record: any) => {
PublicApi.postProductCustomerDeleteCustomerAttributeValue({ id: record.id }).then(res=>{ PublicApi.postProductPlatformDeleteAttributeValue({ id: record.id }).then(res=>{
//@ts-ignore
ref.current.reload() ref.current.reload()
}) })
} }
...@@ -164,29 +167,24 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -164,29 +167,24 @@ const PropertyValue: React.FC<{}> = () => {
<Row gutter={[24, 36]}> <Row gutter={[24, 36]}>
<Col span={8}> <Col span={8}>
<Card> <Card>
<MenuTree <h3 className="mb-30">选择要编辑的项目</h3>
headerTitle='选择要编辑的项目'
// checkedText='全选'
menuData={attributeTreeData}
menuProps={
{ {
//@ts-ignore treeData && treeData.length > 0
onSelect: (key: string, item: any) => { ? <TabTree
console.log(item, key) fetchData = {params => fetchAttributeTreeData(params)}
setSelectRow(item) treeData={treeData}
//@ts-ignore handleSelect={(key, node) => onHandleSelect(key, node)}
setSelectKeys(key) customKey="id"
},
selectedKeys: selectKeys,
}
}
/> />
:
<>暂无菜单</>
}
</Card> </Card>
</Col> </Col>
<Col span={16}> <Col span={16}>
<Card> <Card>
{ {
selectKeys && (<StandardTable selectKey && (<StandardTable
columns={columns} columns={columns}
currentRef={ref} currentRef={ref}
fetchTableData={(params: any) => fetchData(params)} fetchTableData={(params: any) => fetchData(params)}
...@@ -221,7 +219,7 @@ const PropertyValue: React.FC<{}> = () => { ...@@ -221,7 +219,7 @@ const PropertyValue: React.FC<{}> = () => {
<Button <Button
type="primary" type="primary"
icon={<PlusOutlined />} icon={<PlusOutlined />}
onClick={() => { history.push(`/memberCenter/commodityAbility/classAndProperty/propertyValue/addPropertyValue?attrId=${selectRow.id}&attrName=${selectRow.name}`) }} onClick={() => { history.push(`/classAndProperty/propertyValue/addPropertyValue?attrId=${selectKey}&attrName=${selectNode._title}`) }}
> >
新建 新建
</Button> </Button>
......
src/pages/commodity/productWillCheck/index.less 0 → 100644
View file @ 0fb72669
.step0Description{
text-align: left;
width: 280px;
margin: 0 auto;
list-style-type: decimal;
li{
color: #6B778C;
font-size: 14px;
}
}
.step1Description{
h4{
height:22px;
font-size:14px;
font-weight:500;
color:rgba(23,43,77,1);
line-height:22px;
}
p{
height:20px;
font-size:14px;
font-weight:400;
color:rgba(107,119,140,1);
line-height:20px;
}
}
//图片画廊
.picture-card-box{
margin-bottom: 30px;
// display: flex;
.card-add-box{
width: 196px;
height: 196px;
border:1px solid rgba(235,236,240,1);
box-sizing: border-box;
background:rgba(250,251,252,1);
cursor: pointer;
p{
margin-top: 70px;
text-align: center;
height: 24px;
line-height: 24px;
color: #6B778C;
}
}
.card-box{
width: 196px;
height: 196px;
padding: 20px;
margin-right: 24px;
border:1px solid rgba(235,236,240,1);
box-sizing: border-box;
.content-box{
position: relative;
width: 100%;
height: 100%;
img{
display: block;
width: 100%;
height: 100%;
}
p{
display: none;
position: absolute;
right: -16px;
bottom: -16px;
margin: 0;
Button{
color: #fff;
background:rgba(0,0,0,0.45);
border-radius:4px;
margin: 4px;
}
}
&:hover{
p{
display: block;
}
}
}
}
}
.ml20{
margin-left: 20px;
}
// 商品描述
.descript-box{
position: relative;
width: 790px;
margin: 24px auto;
border:1px solid rgba(235,236,240,1);
text-align: center;
color:rgba(151,160,175,1);
height: 128px;
p{
height: 128px;
line-height: 128px;
}
.pVideo, .middleAddBtn{
height: 44px;
line-height: 1.5;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.right-btn{
position: absolute;
top: 0;
right: 0;
Button{
display: block;
width:36px;
height:36px;
background:rgba(250,251,252,1);
border-color: #ebecf0;
border-radius: 0px;
border-top: none;
border-right: none;
}
}
}
// 商品详情
.description-box{
margin: 24px;
padding: 12px 0;
border:1px solid rgba(235,236,240,1);
display: flex;
justify-content: left;
.imgItem{
width:104px;
height:104px;
margin-left: 16px;
border:1px solid rgba(235,236,240,1);
}
p{
padding: 16px;
}
}
.product-img-box{
margin: 24px;
padding: 12px 0;
display: flex;
justify-content: left;
.imgItem{
width:104px;
height:104px;
margin-right: 16px;
border:1px solid rgba(235,236,240,1);
.pic{
width: 100%;
height: 100%;
}
}
}
.pruduct-status{
display: inline-block;
width:58px;
height:24px;
line-height: 24px;
text-align: center;
background:rgba(235,247,242,1);
border-radius:4px;
color:rgba(0,179,122,1);
}
// 修改单价
.site-input-right {
border-left-width: 0;
}
.site-input-right:hover,
.site-input-right:focus {
border-left-width: 1px;
}
.site-input-right {
border-right-width: 0;
}
.site-input-right:hover,
.site-input-right:focus {
border-right-width: 1px;
}
\ No newline at end of file
src/pages/commodity/productWillCheck/index.tsx 0 → 100644
View file @ 0fb72669
This diff is collapsed.
src/pages/commodity/products/checkProducts.tsx 0 → 100644
View file @ 0fb72669
This diff is collapsed.
src/pages/commodity/products/index.less 0 → 100644
View file @ 0fb72669
.step0Description{
text-align: left;
width: 280px;
margin: 0 auto;
list-style-type: decimal;
li{
color: #6B778C;
font-size: 14px;
}
}
.step1Description{
h4{
height:22px;
font-size:14px;
font-weight:500;
color:rgba(23,43,77,1);
line-height:22px;
}
p{
height:20px;
font-size:14px;
font-weight:400;
color:rgba(107,119,140,1);
line-height:20px;
}
}
//图片画廊
.picture-card-box{
margin-bottom: 30px;
// display: flex;
.card-add-box{
width: 196px;
height: 196px;
border:1px solid rgba(235,236,240,1);
box-sizing: border-box;
background:rgba(250,251,252,1);
cursor: pointer;
p{
margin-top: 70px;
text-align: center;
height: 24px;
line-height: 24px;
color: #6B778C;
}
}
.card-box{
width: 196px;
height: 196px;
padding: 20px;
margin-right: 24px;
border:1px solid rgba(235,236,240,1);
box-sizing: border-box;
.content-box{
position: relative;
width: 100%;
height: 100%;
img{
display: block;
width: 100%;
height: 100%;
}
p{
display: none;
position: absolute;
right: -16px;
bottom: -16px;
margin: 0;
Button{
color: #fff;
background:rgba(0,0,0,0.45);
border-radius:4px;
margin: 4px;
}
}
&:hover{
p{
display: block;
}
}
}
}
}
.ml20{
margin-left: 20px;
}
// 商品描述
.descript-box{
position: relative;
width: 790px;
margin: 24px auto;
border:1px solid rgba(235,236,240,1);
text-align: center;
color:rgba(151,160,175,1);
height: 128px;
p{
height: 128px;
line-height: 128px;
}
.pVideo, .middleAddBtn{
height: 44px;
line-height: 1.5;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.right-btn{
position: absolute;
top: 0;
right: 0;
Button{
display: block;
width:36px;
height:36px;
background:rgba(250,251,252,1);
border-color: #ebecf0;
border-radius: 0px;
border-top: none;
border-right: none;
}
}
}
// 商品详情
.description-box{
margin: 24px;
padding: 12px 0;
border:1px solid rgba(235,236,240,1);
display: flex;
justify-content: left;
.imgItem{
width:104px;
height:104px;
margin-left: 16px;
border:1px solid rgba(235,236,240,1);
}
p{
padding: 16px;
}
}
.product-img-box{
margin: 24px;
padding: 12px 0;
display: flex;
justify-content: left;
.imgItem{
width:104px;
height:104px;
margin-right: 16px;
border:1px solid rgba(235,236,240,1);
.pic{
width: 100%;
height: 100%;
}
}
}
.pruduct-status{
display: inline-block;
width:58px;
height:24px;
line-height: 24px;
text-align: center;
background:rgba(235,247,242,1);
border-radius:4px;
color:rgba(0,179,122,1);
}
// 修改单价
.site-input-right {
border-left-width: 0;
}
.site-input-right:hover,
.site-input-right:focus {
border-left-width: 1px;
}
.site-input-right {
border-right-width: 0;
}
.site-input-right:hover,
.site-input-right:focus {
border-right-width: 1px;
}
\ No newline at end of file
src/pages/commodity/products/index.tsx 0 → 100644
View file @ 0fb72669
This diff is collapsed.
src/pages/commodity/products/viewProducts.tsx 0 → 100644
View file @ 0fb72669
This diff is collapsed.
src/pages/trademark/trademarkSearch/checkBrand.tsx
View file @ 0fb72669
...@@ -26,7 +26,7 @@ const CheckBrand: React.FC<{}> = () => { ...@@ -26,7 +26,7 @@ const CheckBrand: React.FC<{}> = () => {
const { id } = history.location.query const { id } = history.location.query
if(id){ if(id){
setQueryId(id) setQueryId(id)
PublicApi.getProductBrandGetBrand({id: id}).then(res => { PublicApi.getProductBrandGetPlatformBrand({id: id}).then(res => {
console.log(res.data, 'data') console.log(res.data, 'data')
if(res.code===1000){ if(res.code===1000){
setBrandInfo(res.data) setBrandInfo(res.data)
...@@ -141,8 +141,8 @@ const CheckBrand: React.FC<{}> = () => { ...@@ -141,8 +141,8 @@ const CheckBrand: React.FC<{}> = () => {
</Descriptions> </Descriptions>
</> </>
const handleApplyCheck = (status: string) => { const handleApplyCheck = (status: number) => {
PublicApi.getProductBrandCheckBrand({ id: brandInfo.id, status: status }) // post问题 PublicApi.postProductBrandCheckBrand({ id: brandInfo.id, status: status }) // post问题
} }
return ( return (
...@@ -153,8 +153,8 @@ const CheckBrand: React.FC<{}> = () => { ...@@ -153,8 +153,8 @@ const CheckBrand: React.FC<{}> = () => {
content={content} content={content}
extra={[ extra={[
<Button <Button
key="1" key="0"
onClick={()=>handleApplyCheck('3')} onClick={()=>handleApplyCheck(3)}
> >
审核不通过 审核不通过
</Button>, </Button>,
...@@ -162,7 +162,7 @@ const CheckBrand: React.FC<{}> = () => { ...@@ -162,7 +162,7 @@ const CheckBrand: React.FC<{}> = () => {
icon={<CheckSquareOutlined />} icon={<CheckSquareOutlined />}
key="1" key="1"
type="primary" type="primary"
onClick={()=>handleApplyCheck('4')} onClick={()=>handleApplyCheck(4)}
> >
审核通过 审核通过
</Button> </Button>
......
src/pages/trademark/trademarkSearch/index.tsx
View file @ 0fb72669
...@@ -51,7 +51,9 @@ const Trademark: React.FC<{}> = () => { ...@@ -51,7 +51,9 @@ const Trademark: React.FC<{}> = () => {
title: '申请时间', title: '申请时间',
dataIndex: 'applyTime', dataIndex: 'applyTime',
key: 'applyTime', key: 'applyTime',
render: (text: any, record: any) => text && moment(text).format('YYYY-MM-DD HH:mm:ss') render: (text: any, record: any) => text && moment(text).format('YYYY-MM-DD HH:mm:ss'),
defaultSortOrder: 'descend',
sorter: (a, b) => a.applyTime - b.applyTime,
}, },
{ {
title: '审核状态', title: '审核状态',
......
src/pages/trademark/trademarkSearch/viewBrand.tsx
View file @ 0fb72669
...@@ -25,8 +25,7 @@ const viewBrand: React.FC<{}> = () => { ...@@ -25,8 +25,7 @@ const viewBrand: React.FC<{}> = () => {
const { id } = history.location.query const { id } = history.location.query
if(id){ if(id){
setQueryId(id) setQueryId(id)
PublicApi.getProductBrandGetBrand({id: id}).then(res => { PublicApi.getProductBrandGetPlatformBrand({id: id}).then(res => {
console.log(res.data, 'data')
if(res.code===1000){ if(res.code===1000){
setBrandInfo(res.data) setBrandInfo(res.data)
if(res.data.status===1) if(res.data.status===1)
......
src/pages/trademark/trademarkWillCheck/index.tsx
View file @ 0fb72669
...@@ -53,7 +53,9 @@ const Trademark: React.FC<{}> = () => { ...@@ -53,7 +53,9 @@ const Trademark: React.FC<{}> = () => {
title: '申请时间', title: '申请时间',
dataIndex: 'applyTime', dataIndex: 'applyTime',
key: 'applyTime', key: 'applyTime',
render: (text: any, record: any) => text && moment(text).format('YYYY-MM-DD HH:mm:ss') render: (text: any, record: any) => text && moment(text).format('YYYY-MM-DD HH:mm:ss'),
defaultSortOrder: 'descend',
sorter: (a, b) => a.applyTime - b.applyTime,
}, },
{ {
title: '审核状态', title: '审核状态',
...@@ -108,7 +110,7 @@ const Trademark: React.FC<{}> = () => { ...@@ -108,7 +110,7 @@ const Trademark: React.FC<{}> = () => {
}) })
} }
const handleApplyCheck = (record:any) => { const handleApplyCheck = (record:any) => {
PublicApi.getProductBrandApplyCheckBrand({id: record.id}).then(res=>{ PublicApi.postProductBrandApplyCheckBrand({id: record.id}).then(res=>{
//@ts-ignore //@ts-ignore
ref.current.reload() ref.current.reload()
}) })
......
src/services/index.ts
View file @ 0fb72669
This source diff could not be displayed because it is too large. You can view the blob instead.
src/utils/index.ts
View file @ 0fb72669
import deepClone from 'clone'
import moment from 'moment'; import moment from 'moment';
function isArray(arr: any) { function isArray(arr: any) {
...@@ -149,6 +149,20 @@ export const findItemAndDelete = (arr: any[], target) => { ...@@ -149,6 +149,20 @@ export const findItemAndDelete = (arr: any[], target) => {
} }
} }
// 遍历树拿到所有key的集合
export const findTreeKeys = (arr: any[], keyword?: string) => {
const copyArr: any[] = deepClone(arr)
const results: any[] = []
while(copyArr.length > 0) {
const item = copyArr.shift()
results.push(keyword ? item[keyword] : item.key)
if (item.children) {
copyArr.push(...item.children)
}
}
return results
}
export default { export default {
isArray, isArray,
isObject, isObject,
......
src/utils/request.ts
View file @ 0fb72669
...@@ -46,7 +46,8 @@ const errorHandler = (error: ResponseError):IRequestError => { ...@@ -46,7 +46,8 @@ const errorHandler = (error: ResponseError):IRequestError => {
} }
const defaultHeaders = { const defaultHeaders = {
'Content-Type': 'Application/json' 'Content-Type': 'Application/json',
'token': 'e0ad7389eb024e5cda8ac92762f4454a'
} }
/** /**
......
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