feat:对接品类/属性相关功能

407ec7d9 · 前端-钟卫鹏 · 8710eda0 · c00b230d · 407ec7d9 · 407ec7d9
Commit 407ec7d9 authored Jul 17, 2020 by 前端-钟卫鹏
51 changed files
--- a/config/config.ts
+++ b/config/config.ts
@@ -21,7 +21,7 @@ export default defineConfig({
    ['import', { libraryName: 'god', libraryDirectory: 'es', style: true }, 'god']
  ],
  history: {
-    type: 'hash', // 'brower' | 'hash'
+    type: 'browser', // 'brower' | 'hash'
  },
  // 用于
  analyze: {

--- a/config/router.ts
+++ b/config/router.ts

+import { default as routes } from './routes'
+
 /**
 * @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
 */
@@ -31,165 +33,17 @@ const router = [
    routes: [
      {
        path: '/',
-        name: 'index',
-        icon: 'smile',
-        component: '@/pages/index',
-      },
-      {
-        path: '/classAndProperty',
-        name: 'classAndProperty',
-        icon: 'smile',
-        routes: [
-          {
-            path: '/classAndProperty/class',
-            name: 'class',
-            icon: 'smile',
-            component: '@/pages/classAndProperty/class',
-          },
-          {
-            path: '/classAndProperty/attribute',
-            name: 'attribute',
-            icon: 'smile',
-            component: '@/pages/classAndProperty/attribute',
-          },
-          {
-            path: '/classAndProperty/attribute/addAttribute',
-            name: 'addAttribute',
-            icon: 'smile',
-            component: '@/pages/classAndProperty/attribute/addAttribute',
-            hideInMenu: true,
-          },
-          {
-            path: '/classAndProperty/propertyValue',
-            name: 'propertyValue',
-            icon: 'smile',
-            component: '@/pages/classAndProperty/propertyValue',
-          },
-          {
-            path: '/classAndProperty/propertyValue/addPropertyValue',
-            name: 'addPropertyValue',
-            icon: 'smile',
-            component: '@/pages/classAndProperty/propertyValue/addPropertyValue',
-            hideInMenu: true,
-          },
-          {
-            path: '/classAndProperty/categoryAttributes',
-            name: 'categoryAttributes',
-            icon: 'smile',
-            component: '@/pages/classAndProperty/categoryAttributes',
-          },
-          {
-            path: '/classAndProperty/categoryAttributes/viewAttributes',
-            name: 'viewAttributes',
-            icon: 'smile',
-            component: '@/pages/classAndProperty/categoryAttributes/viewAttributes',
-          },
-        ]
-      },
-      {
-        path: '/trademark',
-        name: 'trademark',
-        icon: 'smile',
-        component: '@/pages/trademark',
-      },
-      {
-        path: '/trademark/addBrand',
-        name: 'addBrand',
-        icon: 'smile',
-        component: '@/pages/trademark/addBrand',
-      },
-      {
-        path: '/trademark/viewBrand',
-        name: 'viewBrand',
-        icon: 'smile',
-        component: '@/pages/trademark/viewBrand',
-      },
-      {
-        path: '/commodity',
-        name: 'commodity',
-        icon: 'smile',
-        routes: [
-          {
-            path: '/commodity/goods',
-            name: 'goods',
-            icon: 'smile',
-            component: '@/pages/commodity/goods',
-          },
-          {
-            path: '/commodity/goods/addGoods',
-            name: 'addGoods',
-            icon: 'smile',
-            component: '@/pages/commodity/goods/addGoods',
-          },
-          {
-            path: '/commodity/products',
-            name: 'products',
-            icon: 'smile',
-            component: '@/pages/commodity/products',
-          },
-          {
-            path: '/commodity/products/addProducts',
-            name: 'addProducts',
-            icon: 'smile',
-            component: '@/pages/commodity/products/addProducts',
-          },
-          {
-            path: '/commodity/products/viewProducts',
-            name: 'viewProducts',
-            icon: 'smile',
-            component: '@/pages/commodity/products/viewProducts',
-          },
-          {
-            path: '/commodity/products/fastModifyPrice',
-            name: 'fastModifyPrice',
-            icon: 'smile',
-            component: '@/pages/commodity/products/fastModifyPrice',
-          },
-          {
-            path: '/commodity/products/directChannel',
-            name: 'directChannel',
-            icon: 'smile',
-            component: '@/pages/commodity/products/directChannel',
-          },
-          {
-            path: '/commodity/products/addDirectChannel',
-            name: 'addDirectChannel',
-            icon: 'smile',
-            component: '@/pages/commodity/products/addDirectChannel',
-          },
-          {
-            path: '/commodity/products/viewDirectChannel',
-            name: 'viewDirectChannel',
-            icon: 'smile',
-            component: '@/pages/commodity/products/viewDirectChannel',
-          },
-          
-        ]
-      },
-      {
-        path: '/repositories',
-        name: 'repositories',
-        icon: 'smile',
-        component: './repositories',
+        redirect: '/home'
      },
      {
-        path: '/repositories/addRepository',
-        name: 'addRepository',
+        // 首页
+        path: '/home',
+        name: 'home',
        icon: 'smile',
-        component: './repositories/addRepository',
-      },
-      {
-        path: '/repositories/adjustRepository',
-        name: 'adjustRepository',
-        icon: 'smile',
-        component: './repositories/adjustRepository',
-      },
-      {
-        path: '/repositories/viewRepository',
-        name: 'viewRepository',
-        icon: 'smile',
-        component: './repositories/viewRepository',
+        key: 'home',
+        component: '@/pages/index',
      },
+      ...routes,
      {
        component: '@/pages/404',
      },

--- a/config/routes/commodityRoute.ts
+++ b/config/routes/commodityRoute.ts
+/*
+ * 商品能力路由
+ * @Author: ghua 
+ * @Date: 2020-07-10 11:36:32 
+ * @Last Modified by: ghua
+ * @Last Modified time: 2020-07-10 15:37:39
+ */
+
+const CommodityRoute = {
+  // 商品能力
+  path: '/commodityAbility',
+  name: 'commodityAbility',
+  key: 'commodityAbility',
+  routes: [
+    {
+      path: '/commodityAbility/classAndProperty',
+      name: 'classAndProperty',
+      key: 'classAndProperty',
+      routes: [
+        {
+          path: '/commodityAbility/classAndProperty/class',
+          name: 'class',
+          icon: 'smile',
+          component: '@/pages/classAndProperty/class',
+        },
+        {
+          path: '/commodityAbility/classAndProperty/attribute',
+          name: 'attribute',
+          icon: 'smile',
+          component: '@/pages/classAndProperty/attribute',
+        },
+        {
+          path: '/commodityAbility/classAndProperty/attribute/addAttribute',
+          name: 'addAttribute',
+          icon: 'smile',
+          component: '@/pages/classAndProperty/attribute/addAttribute',
+          hideInMenu: true,
+        },
+        {
+          path: '/commodityAbility/classAndProperty/propertyValue',
+          name: 'propertyValue',
+          icon: 'smile',
+          component: '@/pages/classAndProperty/propertyValue',
+        },
+        {
+          path: '/commodityAbility/classAndProperty/propertyValue/addPropertyValue',
+          name: 'addPropertyValue',
+          icon: 'smile',
+          component: '@/pages/classAndProperty/propertyValue/addPropertyValue',
+          hideInMenu: true,
+        },
+        {
+          path: '/commodityAbility/classAndProperty/categoryAttributes',
+          name: 'categoryAttributes',
+          icon: 'smile',
+          component: '@/pages/classAndProperty/categoryAttributes',
+        },
+        {
+          path: '/commodityAbility/classAndProperty/categoryAttributes/viewAttributes',
+          name: 'viewAttributes',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/classAndProperty/categoryAttributes/viewAttributes',
+        },
+      ]
+    },
+    {
+      path: '/commodityAbility/trademark',
+      name: 'trademark',
+      icon: 'smile',
+      component: '@/pages/trademark',
+    },
+    {
+      path: '/commodityAbility/trademark/addBrand',
+      name: 'addBrand',
+      icon: 'smile',
+      hideInMenu: true,
+      component: '@/pages/trademark/addBrand',
+    },
+    {
+      path: '/commodityAbility/trademark/viewBrand',
+      name: 'viewBrand',
+      hideInMenu: true,
+      icon: 'smile',
+      component: '@/pages/trademark/viewBrand',
+    },
+    {
+      path: '/commodityAbility/commodity',
+      name: 'commodity',
+      icon: 'smile',
+      routes: [
+        {
+          path: '/commodityAbility/commodity/goods',
+          name: 'goods',
+          icon: 'smile',
+          component: '@/pages/commodity/goods',
+        },
+        {
+          path: '/commodityAbility/commodity/goods/addGoods',
+          name: 'addGoods',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/commodity/goods/addGoods',
+        },
+        {
+          path: '/commodityAbility/commodity/products',
+          name: 'products',
+          icon: 'smile',
+          component: '@/pages/commodity/products',
+        },
+        {
+          path: '/commodityAbility/commodity/products/addProducts',
+          name: 'addProducts',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/commodity/products/addProducts',
+        },
+        {
+          path: '/commodityAbility/commodity/products/viewProducts',
+          name: 'viewProducts',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/commodity/products/viewProducts',
+        },
+        {
+          path: '/commodityAbility/commodity/products/fastModifyPrice',
+          name: 'fastModifyPrice',
+          icon: 'smile',
+          component: '@/pages/commodity/products/fastModifyPrice',
+        },
+        {
+          path: '/commodityAbility/commodity/products/directChannel',
+          name: 'directChannel',
+          icon: 'smile',
+          component: '@/pages/commodity/products/directChannel',
+        },
+        {
+          path: '/commodityAbility/commodity/products/addDirectChannel',
+          name: 'addDirectChannel',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/commodity/products/addDirectChannel',
+        },
+        {
+          path: '/commodityAbility/commodity/products/viewDirectChannel',
+          name: 'viewDirectChannel',
+          hideInMenu: true,
+          icon: 'smile',
+          component: '@/pages/commodity/products/viewDirectChannel',
+        },
+
+      ]
+    },
+    {
+      path: '/commodityAbility/repositories',
+      name: 'repositories',
+      icon: 'smile',
+      component: './repositories',
+    },
+    {
+      path: '/commodityAbility/repositories/addRepository',
+      name: 'addRepository',
+      icon: 'smile',
+      hideInMenu: true,
+      component: './repositories/addRepository',
+    },
+    {
+      path: '/commodityAbility/repositories/adjustRepository',
+      name: 'adjustRepository',
+      icon: 'smile',
+      hideInMenu: true,
+      component: './repositories/adjustRepository',
+    },
+    {
+      path: '/commodityAbility/repositories/viewRepository',
+      name: 'viewRepository',
+      icon: 'smile',
+      hideInMenu: true,
+      component: './repositories/viewRepository',
+    },
+  ]
+}
+
+export default CommodityRoute
--- a/config/routes/index.ts
+++ b/config/routes/index.ts
+import CommodityRoute from './commodityRoute'
+import MemberRoute from './memberRoute'
+import ShopRoute from './shopRoute'
+
+const routes = [CommodityRoute, MemberRoute, ShopRoute]
+
+export default routes
\ No newline at end of file
--- a/config/routes/memberRoute.ts
+++ b/config/routes/memberRoute.ts
+/*
+ * 会员能力路由
+ * @Author: ghua 
+ * @Date: 2020-07-10 16:15:28 
+ * @Last Modified by:   ghua 
+ * @Last Modified time: 2020-07-10 16:15:28 
+ */
+
+const MemberRoute = {
+  path: '/memberAbility',
+  name: 'memberAbility',
+  key: 'memberAbility',
+  icon: 'smile',
+  routes: [
+    {
+      path: '/memberAbility/manage',
+      name: 'memberManage',
+      key: 'memberManage',
+      routes: [
+        {
+          path: '/memberAbility/manage/import',
+          name: 'memberImport',
+          component: '@/pages/index',
+        }
+      ]
+    }
+  ]
+
+}
+
+export default MemberRoute
\ No newline at end of file
--- a/config/routes/shopRoute.ts
+++ b/config/routes/shopRoute.ts
+/*
+ * 店铺能力路由
+ * @Author: ghua 
+ * @Date: 2020-07-10 16:16:37 
+ * @Last Modified by: ghua
+ * @Last Modified time: 2020-07-10 16:48:50
+ */
+
+const ShopRoute = {
+  path: '/shopAbility',
+  name: 'shopAbility',
+  key: 'shopAbility',
+  icon: 'smile',
+  routes: [
+    {
+      path: '/shopAbility/infoManage',
+      name: 'shopInfoManage',
+      key: 'shopInfoManage',
+      component: '@/pages/shop/shopInfo',
+    },
+    {
+      path: '/shopAbility/template',
+      name: 'shopTemplate',
+      key: 'shopTemplate',
+      component: '@/pages/shop/shopTemplate',
+    },
+    {
+      path: '/shopAbility/template/detail',
+      name: 'shopTemplate',
+      key: 'shopTemplate',
+      hideInMenu: true,
+      component: '@/pages/shop/templateDetail',
+    }
+  ]
+
+}
+
+export default ShopRoute
\ No newline at end of file
--- a/package.json
+++ b/package.json
@@ -23,13 +23,16 @@
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@ant-design/pro-layout": "^5.0.16",
+    "@formily/antd": "^1.2.7",
+    "@formily/antd-components": "^1.2.7",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.2.0",
    "bizcharts": "^4.0.7",
-    "god": "0.0.31",
+    "god": "^0.1.7",
    "lint-staged": "^10.0.7",
    "mobx": "^5.15.4",
    "mobx-react": "^6.2.2",
+    "moment": "^2.27.0",
    "prettier": "^1.19.1",
    "qrcode": "^1.4.4",
    "react": "^16.12.0",

--- a/src/app.tsx
+++ b/src/app.tsx
@@ -2,7 +2,7 @@ import { IRoutes } from '.';
 import { history, RequestConfig } from 'umi';
 import React from 'react'
 import MobxProvider from './store'
-
+import 'antd/es/form/style/index.less';
 import '@/global/styles/global.less';  // 导入全局样式

 let extraRoutes: never[] = []

--- a/src/assets/imgs/template_default_img.png
+++ b/src/assets/imgs/template_default_img.png
--- a/src/components/RequireItem/index.less
+++ b/src/components/RequireItem/index.less
+.require_item {
+  display: inline-block;
+  width: 180px;
+  color: #6B778C;
+
+  &.require {
+    &::after {
+      display: inline-block;
+      margin-left: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+    }
+  }
+}
\ No newline at end of file
--- a/src/components/RequireItem/index.tsx
+++ b/src/components/RequireItem/index.tsx
+import React from 'react'
+import cx from 'classnames'
+import styles from './index.less'
+
+interface RequireItemPropsType {
+  label: string;
+  isRequire?: boolean;
+}
+
+const RequireItem: React.FC<RequireItemPropsType> = (props) => {
+  const { label, isRequire = false } = props
+
+  return <label className={cx(styles.require_item, isRequire ? styles.require : '')}>{label}</label>
+}
+
+export default RequireItem
\ No newline at end of file
--- a/src/global/styles/global.less
+++ b/src/global/styles/global.less
@@ -84,4 +84,20 @@ h1, h2, h3, h4, h5, h6 {
 .commonStatusInvalid{
  .commonStatus();
  background-color: @status-invalid;  // 无效、未生成
+}
+
+.commonSearchBtn { //表格搜索按钮
+  border-left: none;
+  border-radius: 0 2px 2px 0;
+  background-color: #EBECF0FF;
+  &:hover, &:focus, &:active{
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.65);
+    background: #EBECF0FF;
+    border-color: #d9d9d9;
+  }
+}
+
+.mb-30{
+  margin-bottom: 30px;
 }
\ No newline at end of file
--- a/src/layouts/BasicLayout.tsx
+++ b/src/layouts/BasicLayout.tsx
@@ -3,6 +3,7 @@ import ProLayout, {
  BasicLayoutProps as ProLayoutProps,
  Settings,
  DefaultFooter,
+  getMenuData
 } from '@ant-design/pro-layout';
 import React, { useState, useEffect } from 'react';
 import { Link, useIntl } from 'umi';
@@ -18,8 +19,10 @@ export interface BasicLayoutProps extends ProLayoutProps {
  };
  route: ProLayoutProps['route'] & {
    authority: string[];
+    routes: Array<any>
  };
  settings: Settings;
+  location: any;
  // dispatch: Dispatch;
 }
 export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
@@ -41,35 +44,53 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
    children,
    // collapsed,
    settings,
-    location = {
-      pathname: '/',
-    },
+    location,
  } = props;
+  const [openKeys, setOpenKeys] = useState<string[]>([])
  const [collapsed, setCollapsed] = useState(false)
-  // useEffect(() => {
-  //   if (dispatch) {
-  //     dispatch({
-  //       type: 'user/fetchCurrent',
-  //     });
-  //   }
-  // }, []);

  const handleMenuCollapse = (payload: boolean): void => {
-    // if (dispatch) {
-    //   dispatch({
-    //     type: 'global/changeLayoutCollapsed',
-    //     payload,
-    //   });
-    // }
    setCollapsed(payload)
+    if (payload) {
+      setOpenKeys([])
+    }
    console.log('点击了缩起', payload)
  };

+  const getMenuRouter = (routes: any, pathname: any) => {
+    let list = routes.filter((item: any) => pathname.indexOf(item.key) > -1)
+    return list[0]
+  }
+  const initOpendKeys = (routes: any) => {
+    if (routes) {
+      return routes.map((item: any) => item.key)
+    }
+    return []
+  }
+
  const { formatMessage } = useIntl();
+  const basicInfo = getMenuData(props.route.routes, { locale: true }, formatMessage)
+  const menuData = basicInfo.menuData
+
+  const menuRouter = getMenuRouter(menuData, location.pathname)
+
+
+  useEffect(() => {
+    if (menuRouter && menuRouter.children) {
+      if (collapsed) {
+        setOpenKeys([])
+      } else {
+        setOpenKeys(initOpendKeys(menuRouter.children))
+      }
+
+    } else {
+      setOpenKeys([])
+    }
+  }, [location.pathname, collapsed])

  return (
    <ProLayout
-      style={{minHeight:'100vh'}}
+      style={{ minHeight: '100vh' }}
      logo={logo}
      formatMessage={formatMessage}
      menuHeaderRender={(logoDom, titleDom) => (
@@ -80,9 +101,16 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
      )}
      onCollapse={handleMenuCollapse}
      breadcrumbRender={(routers = []) => [
-        
+
      ]}
-      menuRender={()=><MenuSlider collapseState={collapsed} />}
+      menuRender={() => <MenuSlider
+        currentSelectKey={[location.pathname]}
+        openKeys={openKeys}
+        menuData={menuData}
+        pathname={location.pathname}
+        collapseState={collapsed}
+        changeOpenKeys={(keys: string[]) => setOpenKeys(keys)}
+      />}
      footerRender={() => defaultFooterDom}
      rightContentRender={() => <RightContent />}
      {...props}

--- a/src/layouts/components/MenuSlider.tsx
+++ b/src/layouts/components/MenuSlider.tsx
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import { Layout, Menu } from 'antd'
-import { Link } from 'umi';
-import { 
+import { Link, history } from 'umi';
+import {
  BorderOutlined,
- } from '@ant-design/icons'
+} from '@ant-design/icons'
 import OuterSider from './OuterSide'
 import '../styles/MenuSlider.less'

@@ -12,69 +12,80 @@ const { SubMenu } = Menu;

 export interface MenuSliderProps {
  collapseState: boolean | undefined;
+  menuData: Array<any>;
+  pathname: string | undefined;
+  currentSelectKey: string[];
+  openKeys: string[];
+  changeOpenKeys: Function;
 }

-const MenuSlider:React.FC<MenuSliderProps> = (props) => {
+const MenuSlider: React.FC<MenuSliderProps> = (props) => {
+  const { menuData, pathname, currentSelectKey = [], openKeys = [], changeOpenKeys } = props
  const [innerCollapsed, setInnerCollapsed] = useState(false)
+  let menuItemsCache = null
+
+  const getMenuRouter = (routes: any, pathname: any) => {
+    let list = routes.filter((item: any) => pathname.indexOf(item.key) > -1)
+    return list[0]
+  }
+
+  const getMenus = (menuArray: any, hasChildren: boolean = false) => {
+    if (!!menuArray && menuArray.length > 0) {
+      return menuArray.map((item: any) => {
+        if (item.hideInMenu) {
+          return null
+        }
+        if (item.children) {
+          return (
+            <SubMenu
+              key={item.key}
+              title={item.name}
+            >
+              {getMenus(item.children, true)}
+            </SubMenu>
+          )
+        }
+        return (
+          <Menu.Item key={item.path} className={hasChildren ? "menuItem" : ""}>
+            {
+              hasChildren && <BorderOutlined rotate={45} style={{ fontSize: 6, verticalAlign: 'middle' }} />
+            }
+            <Link to={item.path}>
+              <span>{item.name}</span>
+            </Link>
+          </Menu.Item>
+        )
+      });
+    }
+  }
+
+  const menuRouter = getMenuRouter(menuData, pathname)
+
+  if (menuRouter && menuRouter.children) {
+    menuItemsCache = getMenus(menuRouter.children)
+  }
+
+  const handleOpenchange = (keys: string[]) => {
+    changeOpenKeys(keys)
+  }

  return <>
-    <OuterSider />
+    <OuterSider {...props} />
    <Sider theme="light" collapsed={props.collapseState}>
      <div className="logo">LOGOLOGOGOG</div>
+      <div className="menuTitle">
+        {menuRouter?.name}
+      </div>
      <Menu
-        defaultSelectedKeys={['1']}
-        defaultOpenKeys={['sub1']}
+        className="menuSlider"
+        onOpenChange={handleOpenchange}
+        selectedKeys={currentSelectKey}
+        openKeys={openKeys}
        mode="inline"
-        // inlineCollapsed={innerCollapsed}
      >
-        <Menu.Item key="1">
-          通用
-        </Menu.Item>
-        <Menu.Item key="2">
-          <Link to="/">首页</Link>
-        </Menu.Item>
-        <SubMenu key="sub1" title="商品品类及属性">
-          <Menu.Item key="5">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/classAndProperty/class">品类</Link>
-          </Menu.Item>
-          <Menu.Item key="6">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/classAndProperty/attribute">属性</Link>
-          </Menu.Item>
-          <Menu.Item key="7">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/classAndProperty/propertyValue">属性值</Link>
-          </Menu.Item>
-          <Menu.Item key="8">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/classAndProperty/categoryAttributes">品类属性</Link>
-          </Menu.Item>
-        </SubMenu>
-        <Menu.Item key="3">
-          <Link to="/trademark">品牌</Link>
-        </Menu.Item>
-        <SubMenu key="sub2" title="商品">
-          <Menu.Item key="9">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/commodity/goods">货品</Link>
-          </Menu.Item>
-          <Menu.Item key="10">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/commodity/products">商品</Link>
-          </Menu.Item>
-          <Menu.Item key="11">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/commodity/products/fastModifyPrice">快捷修改单价</Link>
-          </Menu.Item>
-          <Menu.Item key="12">
-            <BorderOutlined rotate={45} style={{fontSize: 6, verticalAlign: 'middle'}} />
-            <Link to="/commodity/products/directChannel">渠道直采商品</Link>
-          </Menu.Item>
-        </SubMenu>
-        <Menu.Item key="4">
-          <Link to="/repositories">仓位</Link>
-        </Menu.Item>
+        {
+          menuItemsCache
+        }
      </Menu>
    </Sider>
  </>

--- a/src/layouts/components/OuterSide.tsx
+++ b/src/layouts/components/OuterSide.tsx
 import React from 'react'
 import { Layout, Menu } from 'antd'
 import { AppstoreOutlined } from '@ant-design/icons'
-
+import { Link } from 'umi'
 import '../styles/MenuSlider.less'

 const { Sider } = Layout

-export interface OuterSiderProps {}
+export interface OuterSiderProps {
+  menuData: Array<any>;
+  pathname: string | undefined;
+}
+
+const OuterSider: React.FC<OuterSiderProps> = (props) => {
+  const { menuData, pathname = "/" } = props
+  let defaultSelectedKeys: string = ""
+  const getSubMenu = () => {
+    const subHeadMenus: Array<any> = []
+    menuData.forEach(item => {
+      if (pathname.indexOf(item.key) > -1) {
+        defaultSelectedKeys = item.key
+      }

-const OuterSider:React.FC<OuterSiderProps> = (props) => {
+      subHeadMenus.push({
+        path: item.path,
+        title: item.name,
+        icon: item.icon,
+        key: item.key
+      })
+    })
+    return subHeadMenus
+  }
+
+  const siderMunu = getSubMenu()
  return <>
    <Sider collapsed={true} collapsedWidth={64} className="wrapperSilder">
      <div className="userPic" />
      <ul className="menuBox">
-        <li className="currentItem">
-          <a>
-            <AppstoreOutlined />
-            <span>通用</span>
-          </a>
-        </li>
-        <li>
-          <a>
-            <AppstoreOutlined />
-            <span>渠道</span>
-          </a>
-        </li>
-        <li>
-          <a>
-            <AppstoreOutlined />
-            <span>采购</span>
-          </a>
-        </li>
-        <li>
-          <a>
-            <AppstoreOutlined />
-            <span>供应</span>
-          </a>
-        </li>
-        <li>
-          <a>
-            <AppstoreOutlined />
-            <span>加工</span>
-          </a>
-        </li>
-        <li>
-          <a>
-            <AppstoreOutlined />
-            <span>物流</span>
-          </a>
-        </li>
+        {
+          siderMunu.map(item => (
+            <li key={item.key} className={defaultSelectedKeys === item.key ? "currentItem" : ''}>
+              <Link to={item.path}>
+                <AppstoreOutlined />
+                <span>{item.title}</span>
+              </Link>
+            </li>
+          ))
+        }
+
      </ul>
      {/* <Menu mode="inline" defaultSelectedKeys={['1']}>
        <Menu.Item key="1">

--- a/src/layouts/styles/MenuSlider.less
+++ b/src/layouts/styles/MenuSlider.less
-.logo{
+.logo {
  height: 32px;
  background: rgba(255, 255, 255, 1);
  margin: 16px;
 }

+.menuTitle {
+  height: 64px;
+  font-size: 14px;
+  color: #6B778C;
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  border-top: 1px solid #F4F5F7;
+  border-right: 1px solid #F4F5F7;
+}

 // 外层导航
-.userPic{
+.userPic {
  height: 32px;
  width: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  border-radius: 50%;
 }
-.wrapperSilder{
+
+.wrapperSilder {
  background-color: #38414A;
-  .menuBox{
+
+  .menuBox {
    padding: 0;
    text-align: center;
-    li{
+
+    li {
      height: 60px;
      line-height: 60px;
      margin: 28px 0;
-      span{
+
+      span {
        display: block;
-        height:24px;
-        font-size:12px;
-        font-weight:400;
-        color:rgba(151,160,175,1);
-        line-height:24px;
-        & :first-child{
+        height: 24px;
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(151, 160, 175, 1);
+        line-height: 24px;
+
+        & :first-child {
          font-size: 24px;
        }
      }
    }
  }
 }
-.currentItem{
-  span{
+
+.currentItem {
+  span {
    color: #fff !important;
  }
+}
+
+.menuItem {
+  padding-left: 30px !important;
+}
+
+
+.ant-menu-submenu-open {
+
+  .ant-menu-submenu-title {
+    background: rgba(0, 0, 0, 0.02);
+
+  }
+}
+
+.menuSlider {
+
+  .ant-menu-submenu-title {
+    height: 48px !important;
+    line-height: 48px !important;
+  }
 }
\ No newline at end of file
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
+import menu from './zh-CN/menu'
+
 export default {
-  'menu.welcome': '欢迎',
-  'menu.index': '主页',
-  'menu.home': '首页',
-  'menu.admin': '管理页',
-  'menu.admin.sub-page': '二级管理页',
-  'menu.login': '登录',
-  'menu.register': '注册',
-  'menu.register.result': '注册结果',
-  'menu.exception.403': '403',
-  'menu.exception.404': '404',
-  'menu.exception.500': '500',
-  //
-  'menu.classAndProperty': '商品品类及属性',
-  'menu.classAndProperty.class': '品类',
-  'menu.classAndProperty.attribute': '属性',
-  'menu.classAndProperty.addAttribute': '新建属性',
-  'menu.classAndProperty.propertyValue': '属性值',
-  'menu.classAndProperty.addPropertyValue': '新建属性值',
-  'menu.classAndProperty.categoryAttributes': '品类属性',
-  'menu.classAndProperty.viewAttributes': '品类属性',
-  'menu.trademark': '品牌',
-  'menu.addBrand': '新建品牌',
-  'menu.viewBrand': '品牌详情',
-  'menu.commodity': '商品',
-  'menu.commodity.goods': '货品',
-  'menu.commodity.addGoods': '新建货品',
-  'menu.commodity.products': '商品',
-  'menu.commodity.addProducts': '新建商品',
-  'menu.commodity.viewProducts': '商品详情',
-  'menu.commodity.fastModifyPrice': '快捷修改单价',
-  'menu.commodity.directChannel': '渠道直采商品',
-  'menu.commodity.addDirectChannel': '新建渠道直采商品',
-  'menu.commodity.viewDirectChannel': '渠道直采商品详情',
-  'menu.repositories': '仓位',
-  'menu.addRepository': '新建仓位',
-  'menu.adjustRepository': '仓位库存调拨',
-  'menu.viewRepository': '查看仓位库存',
-};
\ No newline at end of file
+  'global.siteName': '瓴犀',
+  ...menu,
+}
--- a/src/locales/zh-CN/menu.ts
+++ b/src/locales/zh-CN/menu.ts
+export default {
+  'menu.welcome': '欢迎',
+  'menu.home': '首页',
+  'menu.admin': '管理页',
+  'menu.admin.sub-page': '二级管理页',
+  'menu.login': '登录',
+  'menu.register': '注册',
+  'menu.register.result': '注册结果',
+  'menu.exception.403': '403',
+  'menu.exception.404': '404',
+  'menu.exception.500': '500',
+  //商品能力
+  'menu.commodityAbility': '商品',
+  'menu.commodityAbility.classAndProperty': '品类及属性',
+  'menu.commodityAbility.classAndProperty.class': '品类',
+  'menu.commodityAbility.classAndProperty.attribute': '属性',
+  'menu.commodityAbility.classAndProperty.addAttribute': '新建属性',
+  'menu.commodityAbility.classAndProperty.propertyValue': '属性值',
+  'menu.commodityAbility.classAndProperty.addPropertyValue': '新建属性值',
+  'menu.commodityAbility.classAndProperty.categoryAttributes': '关联品类属性',
+  'menu.commodityAbility.classAndProperty.viewAttributes': '品类属性',
+  'menu.commodityAbility.trademark': '品牌',
+  'menu.commodityAbility.addBrand': '新建品牌',
+  'menu.commodityAbility.viewBrand': '品牌详情',
+  'menu.commodityAbility.commodity': '商品',
+  'menu.commodityAbility.commodity.goods': '货品',
+  'menu.commodityAbility.commodity.addGoods': '新建货品',
+  'menu.commodityAbility.commodity.products': '商品',
+  'menu.commodityAbility.commodity.addProducts': '新建商品',
+  'menu.commodityAbility.commodity.viewProducts': '商品详情',
+  'menu.commodityAbility.commodity.fastModifyPrice': '快捷修改单价',
+  'menu.commodityAbility.commodity.directChannel': '渠道直采商品',
+  'menu.commodityAbility.commodity.addDirectChannel': '新建渠道直采商品',
+  'menu.commodityAbility.commodity.viewDirectChannel': '渠道直采商品详情',
+
+  'menu.commodityAbility.repositories': '仓位',
+  'menu.commodityAbility.addRepository': '新建仓位',
+  'menu.commodityAbility.adjustRepository': '仓位库存调拨',
+  'menu.commodityAbility.viewRepository': '查看仓位库存',
+  // 会员能力
+  'menu.memberAbility': '会员',
+  'menu.memberAbility.memberManage': '会员管理',
+  'menu.memberAbility.memberManage.memberImport': '会员导入',
+
+  // 店铺能力
+  'menu.shopAbility': '店铺',
+  'menu.shopAbility.shopInfoManage': '店铺信息',
+  'menu.shopAbility.shopTemplate': '店铺装修模板',
+
+};
\ No newline at end of file
--- a/src/pages/classAndProperty/attribute/addAttribute.tsx
+++ b/src/pages/classAndProperty/attribute/addAttribute.tsx
--- a/src/pages/classAndProperty/attribute/index.less
+++ b/src/pages/classAndProperty/attribute/index.less
+.commonSearchBtn {
+  border-left: none;
+  border-radius: 0 2px 2px 0;
+  background-color: #EBECF0FF;
+  &:hover, &:focus, &:active{
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.65);
+    background: #EBECF0FF;
+    border-color: #d9d9d9;
+  }
+}
\ No newline at end of file
--- a/src/pages/classAndProperty/attribute/index.tsx
+++ b/src/pages/classAndProperty/attribute/index.tsx
@@ -5,23 +5,21 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import {
  PlusOutlined,
  PlayCircleOutlined,
-  EyeOutlined
+  EyeOutlined,
+  PauseCircleOutlined
 } from '@ant-design/icons'
 import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
-import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController'
 import { getAttributeLists, updateAttributeStatus, deleteAttribute } from '@/services/classAndProperty/attribute'
+// import styles from './index.less'

 const Attribute: React.FC<{}> = () => {
  const ref = useRef({})
-  const [currentPage, setCurrentPage] = useState(1)
-  const [pageSize, setpageSize] = useState(10)
-  const [searchName, setsearchName] = useState('')

  const fetchData = (params?:any) => {
    console.log(params, '搜索参数')
    return new Promise((resolve, reject) => {
-      getAttributeLists({current: currentPage, name: searchName, pageSize}).then( res =>{
+      getAttributeLists({current: params.page, name: params.name||'', pageSize: params.rows}).then( res =>{
        resolve(res.data)
      })
    })
@@ -37,8 +35,7 @@ const Attribute: React.FC<{}> = () => {
      title: '属性名称',
      dataIndex: 'name',
      key: 'name',
-      // onClick={()=>handleSee(record)}
-      render: (text:any, record:any) => <span className="commonPickColor">{text}&nbsp;<EyeOutlined /></span> 
+      render: (text:any, record:any) => <span className="commonPickColor" onClick={()=>handleSee(record)}>{text}&nbsp;<EyeOutlined /></span> 
    },
    {
      title: '属性组名',
@@ -72,7 +69,11 @@ const Attribute: React.FC<{}> = () => {
          okText="是"
          cancelText="否"
        >
-          <Button type="link" style={record.isEnable?{color:'#00B37A'}:{color:'red'}}>{record.isEnable?'有效':'无效'} <PlayCircleOutlined /></Button>
+          <Button 
+            type="link" 
+            style={record.isEnable?{color:'#00B37A'}:{color:'red'}}>
+              {record.isEnable?<>有效 <PlayCircleOutlined /></>:<>无效 <PauseCircleOutlined/></>}
+          </Button>
        </Popconfirm>
      )
    },
@@ -94,34 +95,8 @@ const Attribute: React.FC<{}> = () => {
    }
  ];

-  const search: IFormFilter[] = [
-    {
-      type: 'Input',
-      value: 'keywords',
-      col: 4,
-      placeHolder: '输入属性名称'
-    }
-  ]
-
-  const searchBarActions: IButtonFilter[] = [
-    {
-      text: '查询',
-      handler: (params) => {
-        console.log('查询', params, ref)
-      }
-    },
-    {
-      type: 'primary',
-      text: '新建',
-      icon: <PlusOutlined />,
-      handler: ()=>{
-        history.push('/classAndProperty/attribute/addAttribute')
-      }
-    }
-  ]
-
  const handleSee = (record:any) => {
-    history.push(`/trademark/viewBrand?id=${record.id}`)
+    history.push(`/commodityAbility/classAndProperty/attribute/addAttribute?id=${record.id}&isSee=true`)
  }

  const confirm = (record:any) => {
@@ -146,7 +121,7 @@ const Attribute: React.FC<{}> = () => {
  }

  const handleEdit = (record: any) => {
-    history.push(`/classAndProperty/attribute/addAttribute?id=${record.id}`)
+    history.push(`/commodityAbility/classAndProperty/attribute/addAttribute?id=${record.id}`)
  }

  const cancel = () => {
@@ -160,8 +135,40 @@ const Attribute: React.FC<{}> = () => {
          columns={columns}
          currentRef={ref}
          fetchTableData={(params:any) => fetchData(params)}
-          formFilters={search}
-          buttonFilters={searchBarActions}
+          formilyLayouts={{
+            justify: 'space-between'
+          }}
+          formilyProps={{
+            layouts: {
+              order: 1
+            },
+            ctx: {
+                schema: {
+                type: 'object',
+                properties: {
+                  name: {
+                    type: 'string',
+                    'x-component-props': {
+                      placeHolder: '属性名称'
+                    },
+                    'x-component': 'Search'
+                  }
+                }
+              }
+            }
+          }}
+          formilyChilds={{
+            layouts: {
+              order: 0
+            },
+            children: (
+              <>
+                <Button type="primary" icon={<PlusOutlined />} onClick={()=>{history.push('/commodityAbility/classAndProperty/attribute/addAttribute')}}>
+                  新建
+                </Button>
+              </>
+            )
+          }}
        />
      </Card>
    </PageHeaderWrapper>

--- a/src/pages/classAndProperty/categoryAttributes/index.tsx
+++ b/src/pages/classAndProperty/categoryAttributes/index.tsx
--- a/src/pages/classAndProperty/categoryAttributes/viewAttributes.tsx
+++ b/src/pages/classAndProperty/categoryAttributes/viewAttributes.tsx
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Row, Col, Form, Input, Select, Popconfirm, Button, Card, Checkbox, Tooltip } from 'antd';
 import { history } from 'umi';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ReutrnEle from '@/components/ReturnEle';
+import { getAttributeDetail } from '@/services/classAndProperty/attribute'

 const { Option } = Select;

@@ -15,28 +16,23 @@ const layout = {
    span: 16,
  },
 };
-const tailLayout = {
-  wrapperCol: {
-    offset: 6,
-    span: 12,
-  },
-};
-

 const viewAtttributes: React.FC<{}> = () => {
  const [menuForm] = Form.useForm();
+  const [queryId, setQueryId] = useState('') 
+  const [formValue, setFormValue] = useState<any>({})

-  const handleSubmitAllSetting = () => {
-    menuForm.validateFields().then(values  => {
-      console.log(values, 'menu values')
-    }).catch(error => {
-      console.error(error)
-    })
-  }
-
-  const handleDeleteMenu = () => {
-    console.log('delete')
-  }
+  useEffect(() => {
+    const { location } = history
+    if(location.query.id) {
+      setQueryId(location.query.id)
+      getAttributeDetail({id: location.query.id}).then(res=>{
+        const { data } = res
+        setFormValue(data)
+        menuForm.setFieldsValue(data)
+      })
+    }
+  }, [])

  return  <PageHeaderWrapper
      onBack={() => history.goBack()}
@@ -52,111 +48,88 @@ const viewAtttributes: React.FC<{}> = () => {
              layout="horizontal"
              labelAlign="left"
              {...layout}
+              initialValues={formValue}
            >
              <Row gutter={24}>
                <Col span={18}>
                  <Form.Item
-                    name='classGroupName'
+                    name='id'
+                    label='属性ID'
+                  >
+                    <Input disabled />
+                  </Form.Item>
+                </Col>
+                <Col span={18}>
+                  <Form.Item
+                    name='groupName'
                    label='属性组名'
-                    rules={[
-                      {
-                        required: true,
-                        message: '输入属性组名!',
-                      },
-                    ]}
                  >
-                    <Input disabled placeholder="输入属性组名" />
+                    <Input disabled />
                  </Form.Item>
                </Col>
                <Col span={18}>
                  <Form.Item
-                    name='className'
+                    name='name'
                    label='属性名称'
-                    rules={[
-                      {
-                        required: true,
-                        message: '输入属性名称!',
-                      },
-                    ]}
                  >
-                    <Input disabled placeholder="输入属性名称" />
+                    <Input disabled />
                  </Form.Item>
                </Col>
                <Col span={18}>
                  <Form.Item
-                    name='displayType'
+                    name='type'
                    label='展示方式'
-                    rules={[
-                      {
-                        required: true,
-                        message: '展示方式为必须项!',
-                      },
-                    ]}
                  >
-                    <Select defaultValue="duo" disabled>
-                      <Option value="duo">多选</Option>
-                      <Option value="dan">单选</Option>
-                      <Option value="shu">输入</Option>
+                    <Select disabled>
+                      <Option value={2}>多选</Option>
+                      <Option value={1}>单选</Option>
+                      <Option value={3}>输入</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={18}>
                <Form.Item
-                  name='attrSetting'
                  label='属性设置'
                >
-                  <Checkbox.Group disabled style={{ width: '100%' }}>
-                    <Row>
-                      <Col span={24}>
-                        <Checkbox value="required">必填</Checkbox>
-                      </Col>
-                      <Col span={24}>
-                        <Checkbox value="upload">上传图片</Checkbox>
-                        <Tooltip title="这是一条描述文字！">
-                          <InfoCircleOutlined />
-                        </Tooltip>
-                      </Col>
-                      <Col span={24}>
-                        <Checkbox value="name">名称属性</Checkbox>
-                        <Tooltip title="这是一条描述文字！">
-                          <InfoCircleOutlined />
-                        </Tooltip>
-                      </Col>
-                      <Col span={24}>
-                        <Checkbox value="price">价格属性</Checkbox>
-                        <Tooltip title="这是一条描述文字！">
-                          <InfoCircleOutlined />
-                        </Tooltip>
-                      </Col>
-                      <Col span={24}>
-                        <Checkbox value="search">搜索属性</Checkbox>
-                        <Tooltip title="这是一条描述文字！">
-                          <InfoCircleOutlined />
-                        </Tooltip>
-                      </Col>
-                    </Row>
-                  </Checkbox.Group>
+                  <Row>
+                    <Col span={24}>
+                      <Form.Item name="isEmpty" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled>必填</Checkbox></Form.Item>
+                    </Col>
+                    <Col span={24}>
+                      <Form.Item name="isImage" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled>上传图片</Checkbox></Form.Item>
+                      <Tooltip title="勾选后对于此属性的属性值可以上传属性值的对应图片！">
+                        <InfoCircleOutlined />
+                      </Tooltip>
+                    </Col>
+                    <Col span={24}>
+                      <Form.Item name="isName" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled>名称属性</Checkbox></Form.Item>
+                      <Tooltip title="勾选后对于此属性的属性值会将属性值添加到商品名称之后，中间以/区隔！">
+                        <InfoCircleOutlined />
+                      </Tooltip>
+                    </Col>
+                    <Col span={24}>
+                      <Form.Item name="isPrice" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled>价格属性</Checkbox></Form.Item>
+                      <Tooltip title="勾选后对于此属性的每个属性值会在商品发布时按属性设置不同的价格！">
+                        <InfoCircleOutlined />
+                      </Tooltip>
+                    </Col>
+                    <Col span={24}>
+                      <Form.Item name="isSearch" valuePropName="checked" initialValue={false} noStyle><Checkbox disabled>搜索属性</Checkbox></Form.Item>
+                      <Tooltip title="勾选后对于此属性会在商城店铺商品列表进行筛选操作时作为筛选项！">
+                        <InfoCircleOutlined />
+                      </Tooltip>
+                    </Col>
+                  </Row>
                </Form.Item>
                </Col>
                <Col span={18}>
                  <Form.Item
                    label='状态'
+                    name="isEnable"
                  >
-                    <span className="commonStatusValid"></span>有效
+                    {formValue.isEnable?<><span className="commonStatusValid"></span>有效</>:<><span className="commonStatusInvalid"></span>无效</>}
                  </Form.Item>
                </Col>
-                {/* <Col span={18}>
-                  <Form.Item {...tailLayout}>
-                    <Button onClick={handleSubmitAllSetting} type="primary" style={{ marginTop: 32, marginBottom: 16, marginRight: 24}}>
-                      保存
-                    </Button>
-                    <Popconfirm title="确定要取消吗？" okText="是" cancelText="否" onConfirm={handleDeleteMenu}>
-                      <Button style={{ marginTop: 32, marginBottom: 16}}>
-                        取消
-                      </Button>
-                    </Popconfirm>
-                  </Form.Item>
-                </Col> */}
              </Row>
            </Form>
        </Col>

--- a/src/pages/classAndProperty/class/index.tsx
+++ b/src/pages/classAndProperty/class/index.tsx
--- a/src/pages/classAndProperty/propertyValue/addPropertyValue.tsx
+++ b/src/pages/classAndProperty/propertyValue/addPropertyValue.tsx
--- a/src/pages/classAndProperty/propertyValue/index.tsx
+++ b/src/pages/classAndProperty/propertyValue/index.tsx
--- a/src/pages/commodity/goods/index.tsx
+++ b/src/pages/commodity/goods/index.tsx
@@ -130,7 +130,7 @@ const Goods: React.FC<{}> = () => {
      render: (text:any, record:any) => {
        return (
          <>
-            <Button type='link' onClick={()=>history.push(`/commodity/goods/addGoods?id=${record.key}`)}>修改</Button>
+            <Button type='link' onClick={()=>history.push(`/commodityAbility/commodity/goods/addGoods?id=${record.key}`)}>修改</Button>
            <Button type='link'>删除</Button>
          </>
        )
@@ -189,7 +189,7 @@ const Goods: React.FC<{}> = () => {
      text: '新建',
      icon: <PlusOutlined />,
      handler: ()=>{
-        history.push('/commodity/goods/addGoods')
+        history.push('/commodityAbility/commodity/goods/addGoods')
      }
    },
    {

--- a/src/pages/commodity/products/index.tsx
+++ b/src/pages/commodity/products/index.tsx
@@ -279,7 +279,7 @@ const Products: React.FC<{}> = () => {
      text: '新建',
      icon: <PlusOutlined />,
      handler: ()=>{
-        history.push('/commodity/products/addProducts')
+        history.push('/commodityAbility/commodity/products/addProducts')
      }
    },
    {
@@ -318,7 +318,7 @@ const fetchData = (params:any) => {

  const handleSee = (record:any) => {
    console.log('see')
-    history.push(`/commodity/products/viewProducts?id=${record.id}`)
+    history.push(`/commodityAbility/commodity/products/viewProducts?id=${record.id}`)
  }

  const confirm = () => {

--- a/src/pages/shop/components/citySelect/index.less
+++ b/src/pages/shop/components/citySelect/index.less
+.city_select_line {
+  display: flex;
+
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
+  .opration_btn {
+    width: 32px;
+    height: 32px;
+    background: rgba(250, 251, 252, 1);
+    border: 1px solid rgba(235, 236, 240, 1);
+    color: #6B778C;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    margin-right: 16px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: .8;
+    }
+
+    &.add {
+      background: rgba(0, 179, 122, 1);
+      border: 1px solid rgba(0, 179, 122, 1);
+      color: #ffffff;
+    }
+  }
+}
\ No newline at end of file
--- a/src/pages/shop/components/citySelect/index.tsx
+++ b/src/pages/shop/components/citySelect/index.tsx
+import React, { memo, useState, Fragment, forwardRef } from 'react'
+import { Select } from 'antd'
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons'
+import cx from 'classnames'
+import styles from './index.less'
+
+interface CitySelectPropsType {
+  selectData: Array<{
+    provinceId: number;
+    cityId: number;
+  }>;
+  onAdd: Function;
+  onReduce: Function;
+  onChange: Function;
+}
+
+interface selectItemType {
+  index: number;
+  lable: string;
+  value: number;
+}
+
+const { Option } = Select;
+const provinceData = [
+  {
+    lable: '广东省',
+    value: 1,
+  },
+  {
+    lable: '浙江省',
+    value: 2
+  },
+]
+const cityData: any = {
+  1: [
+    {
+      lable: '广州市',
+      value: 11
+    },
+    {
+      lable: '深圳市',
+      value: 12
+    }
+  ],
+  2: [
+    {
+      lable: '杭州市',
+      value: 21
+    },
+    {
+      lable: '温州市',
+      value: 22
+    }
+  ],
+};
+
+const getProviceById = (id: number) => {
+  let result: number = 0
+  provinceData && provinceData.map(item => {
+    if (item.value === id) {
+      result = item.value
+    }
+  })
+  return result
+}
+
+const CityCascader: React.FC<CitySelectPropsType> = (props) => {
+
+  const { selectData, onAdd, onReduce, onChange } = props
+  const [cities, setCities] = useState([])
+
+  const handleProvinceChange = (value: number, index: number) => {
+    let newData = JSON.parse(JSON.stringify(selectData))
+    let proviceById = getProviceById(value)
+    setCities(cityData[proviceById])
+    newData.map((item: any) => {
+      if (item.index === index) {
+        item.provinceId = value
+      }
+      return item
+    })
+    onChange(newData)
+  }
+
+  const onSecondCityChange = (value: number, index: number) => {
+    let newData = JSON.parse(JSON.stringify(selectData))
+    newData.map((item: any) => {
+      if (item.index === index) {
+        item.cityId = value
+      }
+      return item
+    })
+    onChange(newData)
+  }
+
+  const handleAddNewSelect = (index: number) => {
+    onAdd({ index, provinceId: 0, cityId: 0 })
+  }
+  const handleReduceSelect = (index: number) => {
+    if (selectData.length > 1) {
+      onReduce(index)
+    }
+  }
+  return (
+    <Fragment>
+      {
+        selectData && selectData.map((item: any, index) => (
+          <div className={styles.city_select_line} key={`selectDataItem-${index}`}>
+            <Select
+              style={{ width: 278 }}
+              value={item.provinceId ? item.provinceId : undefined}
+              onChange={(value) => handleProvinceChange(value, item.index)}
+              placeholder="请选择"
+            >
+              {provinceData.map(item => (
+                <Option value={item.value} key={item.value}>{item.lable}</Option>
+              ))}
+            </Select>
+            <Select
+              style={{ width: 278, marginLeft: 16, marginRight: 24 }}
+              value={item.cityId ? item.cityId : undefined}
+              onChange={(value) => onSecondCityChange(value, item.index)}
+              placeholder="请选择"
+            >
+              {cities.map((item: any) => (
+                <Option value={item.value} key={item.value}>{item.lable}</Option>
+              ))}
+            </Select>
+            {
+              index === selectData.length - 1 && (
+                <div className={cx(styles.opration_btn, styles.add)} onClick={() => handleAddNewSelect(index + 1)}>
+                  <PlusOutlined />
+                </div>
+              )
+            }
+            <div className={styles.opration_btn} onClick={() => handleReduceSelect(item.index)}>
+              <MinusOutlined />
+            </div>
+          </div>
+        ))
+      }
+    </Fragment>
+  )
+}
+
+const CitySelect: React.FC<CitySelectPropsType> = forwardRef((props, ref) => {
+  const { selectData, onAdd, onReduce, onChange } = props
+
+  return (
+    <div className={styles.city_select}>
+      <CityCascader selectData={selectData} onAdd={onAdd} onReduce={onReduce} onChange={onChange} />
+    </div>
+  )
+})
+
+export default CitySelect
--- a/src/pages/shop/components/templateItem/index.less
+++ b/src/pages/shop/components/templateItem/index.less
+.template_item {
+  // width: 386px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+  height: 100%;
+  padding-bottom: 24px;
+
+  .img_box {
+    position: relative;
+    // height: 218px;
+    height: 0;
+    padding-bottom: 67%;
+    overflow: hidden;
+    background-size: auto 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    &:hover {
+      .img_box_mask {
+        opacity: 1;
+      }
+    }
+
+    .img_box_mask {
+      position: absolute;
+      width: 100%;
+      opacity: 0;
+      transition: all .5s;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.45);
+      z-index: 8;
+
+      .detail_btn {
+        position: relative;
+        display: block;
+        left: 0;
+        right: 0;
+        top: 50%;
+        margin: 0 auto;
+        margin-top: -20px;
+        width: 240px;
+        height: 40px;
+        background: rgba(0, 0, 0, 0.85);
+        color: #ffffff;
+        text-align: center;
+        line-height: 40px;
+        font-weight: 500;
+        cursor: pointer;
+
+        &:hover {
+          opacity: .9;
+        }
+      }
+    }
+
+    .type_tag {
+      position: absolute;
+      top: 0;
+      width: 72px;
+      height: 24px;
+      color: #ffffff;
+      text-align: center;
+      line-height: 24px;
+      font-size: 14px;
+      background: #4279DF;
+      border-radius: 8px 0px 8px 0px;
+      z-index: 3;
+
+      &.h5 {
+        background: #6554C0;
+      }
+    }
+
+    &>img {
+      // height: 100%;
+      width: 100%;
+    }
+  }
+
+  .template_info {
+    padding: 0 24px;
+
+    .template_info_name {
+      display: flex;
+      align-items: center;
+      color: #172B4D;
+      font-weight: bold;
+      line-height: 24px;
+      padding: 16px 0;
+
+      .tag {
+        padding: 0 8px;
+        height: 24px;
+        background: rgba(244, 245, 247, 1);
+        border-radius: 4px;
+        margin-left: 8px;
+        color: #42526E;
+        font-weight: 400;
+
+      }
+    }
+
+    .template_info_content {
+      display: flex;
+      align-items: flex-end;
+      height: 52px;
+
+      &.goods {
+        height: 32px;
+      }
+
+      .template_info_content_text_wrap {
+        flex: 1;
+        font-size: 14px;
+        line-height: 22px;
+
+        .template_info_content_text_line {
+          &:not(:last-child) {
+            margin-bottom: 8px;
+          }
+
+          &>label {
+            color: #6B778C;
+            margin-right: 8px;
+          }
+
+          &>span {
+            color: #172B4D;
+          }
+        }
+      }
+
+      .template_item_btn {
+        width: 88px;
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgba(250, 251, 252, 1);
+        border: 1px solid rgba(235, 236, 240, 1);
+        cursor: pointer;
+        color: #42526E;
+        font-size: 14px;
+        // margin-top: auto;
+        margin-left: auto;
+
+        &.active {
+          background: #00B37A;
+          border: 1px solid #00B37A;
+          color: #ffffff;
+        }
+
+        &>label {
+          margin-left: 8px;
+          cursor: pointer;
+        }
+
+        &:hover {
+          opacity: .8;
+        }
+      }
+    }
+
+  }
+}
\ No newline at end of file
--- a/src/pages/shop/components/templateItem/index.tsx
+++ b/src/pages/shop/components/templateItem/index.tsx
+import React from 'react'
+import { PlayCircleOutlined } from '@ant-design/icons'
+import cx from 'classnames'
+import { Link } from 'umi'
+import default_img from '@/assets/imgs/template_default_img.png'
+import styles from './index.less'
+
+interface TemplateItemPropsType {
+  templateInfo: any;
+  type: string;
+}
+
+const TemplateItem: React.FC<TemplateItemPropsType> = (props) => {
+  const { templateInfo, type } = props
+
+  return (
+    <div className={styles.template_item}>
+      <div className={styles.img_box} style={{ backgroundImage: `url(${default_img})` }}>
+        <div className={styles.img_box_mask}>
+          <Link to={`/shopAbility/template/detail?type=${type}`} className={styles.detail_btn}>查看详情</Link>
+        </div>
+        <div className={cx(styles.type_tag, templateInfo.platform === 'H5' ? styles.h5 : '')}>{templateInfo.platform}</div>
+      </div>
+      <div className={styles.template_info}>
+        <div className={styles.template_info_name}>
+          <span>{templateInfo.name}</span>
+          {
+            templateInfo.isDefault && <div className={styles.tag}>默认模板</div>
+          }
+        </div>
+        <div className={cx(styles.template_info_content, type === 'goods' ? styles.goods : '')}>
+          <div className={styles.template_info_content_text_wrap}>
+            <div className={styles.template_info_content_text_line}>
+              <label>使用站点：</label>
+              <span>{templateInfo.station}</span>
+            </div>
+
+            <div className={styles.template_info_content_text_line}>
+              <label>使用商城：</label>
+              <span>{templateInfo.useShopCenter}</span>
+            </div>
+          </div>
+          <div className={cx(styles.template_item_btn, templateInfo.isUse ? styles.active : '')}>
+            <PlayCircleOutlined />
+            <label>{templateInfo.isUse ? '启用中' : '启用'}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TemplateItem
--- a/src/pages/shop/components/useModal/index.less
+++ b/src/pages/shop/components/useModal/index.less
+.selectBox {
+  width: 100%;
+}
+
+.text_line {
+  margin-bottom: 8px;
+
+  &>span {
+    color: #6B778C;
+
+  }
+
+  &>label {
+    color: #172B4D;
+    margin: 0 3px;
+  }
+}
\ No newline at end of file
--- a/src/pages/shop/components/useModal/index.tsx
+++ b/src/pages/shop/components/useModal/index.tsx
+import React from 'react'
+import { Modal, Form, Select, Checkbox } from 'antd'
+import styles from './index.less'
+
+interface UseModalPropsType {
+  visible: boolean;
+  onOk: Function;
+  onCancel: Function;
+  title: string;
+}
+
+const UseModal: React.FC<UseModalPropsType> = (props) => {
+  const { visible, onOk, onCancel, title } = props
+
+
+  return (
+    <Modal
+      width={576}
+      title={title}
+      visible={visible}
+      onOk={() => onOk()}
+      centered
+      onCancel={() => onCancel()}
+    >
+      <div className={styles.text_line}>
+        <span>您选择的站点</span>
+        <label>美国站-WEB商城</label>
+        <span>现在使用的模板是</span>
+        <label>“模板003-清新类”</label>
+        <span>模板，</span>
+      </div>
+      <div className={styles.text_line}>
+        <span>您是否使用</span>
+        <label>“模板001-清新类”</label>
+        <span>模板，来替换您正在使用的模板</span>
+      </div>
+    </Modal>
+  )
+}
+
+export default UseModal
--- a/src/pages/shop/shopInfo/index.less
+++ b/src/pages/shop/shopInfo/index.less
+.shop_info {
+  background-color: #ffffff;
+  padding: 32px 24px;
+  border-radius: 8px;
+
+  .add_template_form {
+
+    :global {
+      .ant-form-item-label>label::after {
+        display: none;
+      }
+    }
+  }
+
+  .form_item {
+    width: 572px;
+  }
+
+  .form_item_wrap {
+    display: flex;
+    align-items: center;
+
+    .size_require {
+      margin-left: 24px;
+      color: #97A0AF;
+    }
+  }
+
+  .upload_btn {
+
+    width: 104px;
+    height: 104px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6B778C;
+    flex-direction: column;
+    background: rgba(250, 251, 252, 1);
+    border-radius: 2px;
+    border: 1px dashed rgba(223, 225, 230, 1);
+    cursor: pointer;
+
+    &.large {
+      width: 175px;
+      height: 120px;
+    }
+
+    &>p {
+      margin-top: 12px;
+    }
+  }
+}
\ No newline at end of file
--- a/src/pages/shop/shopInfo/index.tsx
+++ b/src/pages/shop/shopInfo/index.tsx
+import React, { useState } from 'react'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { Form, Input, Select, Button, Upload } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import CitySelect from '../components/citySelect'
+import RequireItem from '@/components/RequireItem'
+import cx from 'classnames'
+import styles from './index.less'
+
+const ShopInfo: React.FC = () => {
+  const [selectCityData, setSelectCityData] = useState([{ index: 0, provinceId: 0, cityId: 0 }])
+
+  const uploadProps = {
+    name: 'file',
+    action: '',
+    headers: {
+      authorization: 'authorization-text',
+    },
+    onChange(info: any) {
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList);
+      }
+      if (info.file.status === 'done') {
+
+      } else if (info.file.status === 'error') {
+
+      }
+    },
+  };
+
+  const handleAddNewCitySelect = (item: any) => {
+    let temp = [...selectCityData]
+    temp.push(item)
+    setSelectCityData(temp)
+  }
+
+  const handleReduceCitySelect = (index: number) => {
+    let temp = JSON.parse(JSON.stringify(selectCityData))
+    temp = temp.filter((item: any) => item.index !== index)
+    setSelectCityData(temp)
+  }
+
+  const handleCityChange = (data: any) => {
+    setSelectCityData(data)
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <div className={styles.shop_info}>
+        <Form
+          className={styles.add_template_form}
+          hideRequiredMark={true}
+        >
+          <Form.Item
+            labelAlign="left"
+            name="templateName"
+            label={<RequireItem label="归属地市" isRequire={true} />}
+          >
+            <CitySelect
+              selectData={selectCityData}
+              onAdd={handleAddNewCitySelect}
+              onReduce={handleReduceCitySelect}
+              onChange={handleCityChange}
+            />
+          </Form.Item>
+          <Form.Item
+            labelAlign="left"
+            name="applicable"
+            label={<RequireItem label="公司LOGO" isRequire={true} />}
+          >
+            <div className={styles.form_item_wrap}>
+              <Upload {...uploadProps}>
+                <div className={styles.upload_btn}>
+                  <PlusOutlined />
+                  <p>点击上传</p>
+                </div>
+              </Upload>
+              <div className={styles.size_require}>
+                <p>支持JPG/PNG/JPEG， <br />最大不超过 50K， <br />尺寸：xxxx</p>
+              </div>
+            </div>
+          </Form.Item>
+          <Form.Item
+            labelAlign="left"
+            name="description"
+            label={<RequireItem label="公司简介" isRequire={true} />}
+            rules={[{ required: true, message: "请输入公司简介" }]}
+          >
+            <Input.TextArea allowClear rows={4} className={styles.form_item} placeholder="最长400个字条，200个汉字" maxLength={100} />
+          </Form.Item>
+          <Form.Item
+            labelAlign="left"
+            name="photo"
+            label={<RequireItem label="厂房照片" />}
+          >
+            <div className={styles.form_item_wrap}>
+              <Upload {...uploadProps}>
+                <div className={cx(styles.upload_btn, styles.large)}>
+                  <PlusOutlined />
+                  <p>点击上传</p>
+                </div>
+              </Upload>
+              <div className={styles.size_require}>
+                <p>支持JPG/PNG/JPEG， <br />最大不超过 100K， <br />尺寸：xxxx</p>
+              </div>
+            </div>
+          </Form.Item>
+          <Form.Item
+            labelAlign="left"
+            name="photo"
+            label={<RequireItem label="资质荣誉" />}
+          >
+            <div className={styles.form_item_wrap}>
+              <Upload {...uploadProps}>
+                <div className={cx(styles.upload_btn, styles.large)}>
+                  <PlusOutlined />
+                  <p>点击上传</p>
+                </div>
+              </Upload>
+              <div className={styles.size_require}>
+                <p>支持JPG/PNG/JPEG， <br />最大不超过 100K， <br />尺寸：xxxx</p>
+              </div>
+            </div>
+          </Form.Item>
+
+          <Form.Item
+            name="buttonGroup"
+            label={<RequireItem label="" />}
+          >
+            <Button type="primary" style={{ marginRight: 16 }}>保存</Button>
+            <Button>取消</Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </PageHeaderWrapper>
+  )
+}
+
+export default ShopInfo
--- a/src/pages/shop/shopTemplate/index.less
+++ b/src/pages/shop/shopTemplate/index.less
+.shop_center_template {
+
+  .add_card {
+    display: flex;
+    height: 100%;
+    border-radius: 2px;
+    border: 1px dashed rgba(223, 225, 230, 1);
+    background: rgba(250, 251, 252, 1);
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    flex-direction: column;
+
+    &:hover {
+      border: 1px dashed rgba(200, 200, 230, 1);
+    }
+
+    .add_card_btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 48px;
+      height: 48px;
+      background: rgba(235, 236, 240, 1);
+      border-radius: 50%;
+      margin-bottom: 24px;
+      font-size: 22px;
+      color: #97A0AF;
+    }
+
+    &>p {
+      color: #6B778C;
+    }
+  }
+
+}
\ No newline at end of file
--- a/src/pages/shop/shopTemplate/index.tsx
+++ b/src/pages/shop/shopTemplate/index.tsx
+import React from 'react'
+import { Row, Col } from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import TemplateItem from '../components/templateItem'
+import styles from './index.less'
+
+const ShopTemplate: React.FC = () => {
+
+  const template_data_mock = [
+    {
+      id: 1,
+      name: '模板001-清新类',
+      platform: 'PC',
+      station: '中国站',
+      useShopCenter: 'WEB用户商城',
+      isUse: true,
+      isDefault: true,
+    },
+    {
+      id: 2,
+      name: '模板002-科技类',
+      platform: 'H5',
+      station: '美国站',
+      useShopCenter: 'H5用户商城',
+      isUse: true,
+      isDefault: true,
+    },
+    {
+      id: 3,
+      name: '模板003-科技类',
+      platform: 'PC',
+      station: '美国站',
+      useShopCenter: 'WEB用户商城',
+      isUse: false,
+      isDefault: false,
+    }
+  ]
+
+  return (
+    <PageHeaderWrapper>
+      <div className={styles.shop_center_template}>
+        <Row gutter={24} className={styles.template_list}>
+          {
+            template_data_mock.map(item => (
+              <Col span={6} key={item.id}>
+                <TemplateItem templateInfo={item} type="shop" />
+              </Col>
+            ))
+          }
+        </Row>
+      </div>
+    </PageHeaderWrapper>
+  )
+}
+
+export default ShopTemplate
--- a/src/pages/shop/templateDetail/index.less
+++ b/src/pages/shop/templateDetail/index.less
+.template_detail {
+  height: 224px;
+  background-color: #ffffff;
+  display: flex;
+  margin: -24px;
+  align-items: center;
+
+  .back_btn {
+    color: #6B778C;
+    margin-left: 27px;
+    font-size: 16px;
+    margin-top: 40px;
+    cursor: pointer;
+    align-self: flex-start;
+  }
+
+  .template_info_wrap {
+    display: flex;
+    margin-left: 36px;
+    flex: 1;
+    align-items: center;
+
+    .template_img_box {
+      position: relative;
+      width: 250px;
+      height: 165px;
+      border-radius: 8px 8px 0px 0px;
+      overflow: hidden;
+
+      .type_tag {
+        position: absolute;
+        top: 0;
+        width: 72px;
+        height: 24px;
+        color: #ffffff;
+        text-align: center;
+        line-height: 24px;
+        font-size: 14px;
+        background: #4279DF;
+        border-radius: 8px 0px 8px 0px;
+        z-index: 3;
+
+        &.h5 {
+          background: #6554C0;
+        }
+      }
+
+      &>img {
+        height: 100%;
+        width: auto;
+        display: block;
+        margin: 0 auto;
+      }
+    }
+
+    .template_info {
+      margin-left: 24px;
+
+      .template_info_line {
+        line-height: 22px;
+
+        &:not(:last-child) {
+          margin-bottom: 8px;
+        }
+
+        &>label {
+          color: #6B778C;
+
+        }
+
+        &>span {
+          color: #172B4D;
+        }
+      }
+    }
+  }
+
+  .btn {
+    margin-left: 24px;
+    padding: 0 20px;
+    min-width: 88px;
+    height: 40px;
+    background: rgba(250, 251, 252, 1);
+    border: 1px solid rgba(235, 236, 240, 1);
+    color: #42526E;
+    cursor: pointer;
+    line-height: 38px;
+    text-align: center;
+
+    &>label {
+      margin-left: 5px;
+    }
+
+    &.use {
+      background: #00B37A;
+      color: #ffffff;
+    }
+
+    &:hover {
+      opacity: .8;
+    }
+
+    &:last-child {
+      margin-right: 48px;
+    }
+  }
+}
\ No newline at end of file
--- a/src/pages/shop/templateDetail/index.tsx
+++ b/src/pages/shop/templateDetail/index.tsx
+import React, { useState } from 'react'
+import { history } from 'umi';
+import { ArrowLeftOutlined, EyeOutlined, PushpinOutlined } from '@ant-design/icons'
+import cx from 'classnames'
+import UseModal from '../components/useModal'
+import default_img from '@/assets/imgs/template_default_img.png'
+import styles from './index.less'
+
+interface TemplateDetailPropsType {
+  location: {
+    query: {
+      type: string; // 商城模板：shopCenter ；店铺模板：shop; 商品描述模板: goods
+    }
+  }
+}
+
+const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
+  const { location: { query } } = props
+
+  const [useModalVisible, setUseModalVisible] = useState<boolean>(false)
+
+  return (
+    <div className={styles.template_detail}>
+      <div className={styles.back_btn} onClick={() => history.goBack()}>
+        <ArrowLeftOutlined />
+      </div>
+      <div className={styles.template_info_wrap}>
+        <div className={styles.template_img_box}>
+          <div className={cx(styles.type_tag)}>PC</div>
+          <img src={default_img} />
+        </div>
+        <div className={styles.template_info}>
+          <div className={styles.template_info_line}>
+            <label>模板名称：</label>
+            <span>模板001-清新类</span>
+          </div>
+          <div className={styles.template_info_line}>
+            <label>适用环境：</label>
+            <span>PC</span>
+          </div>
+          <div className={styles.template_info_line}>
+            <label>模板描述：</label>
+            <span>此模板只适用于PC端</span>
+          </div>
+          <div className={styles.template_info_line}>
+            <label>使用站点：</label>
+            <span>中国站</span>
+          </div>
+          <div className={styles.template_info_line}>
+            <label>使用商城：</label>
+            <span>WEB用户商城</span>
+          </div>
+        </div>
+      </div>
+      <div className={styles.btn}>
+        <EyeOutlined />
+        <label>预览</label>
+      </div>
+      <div className={cx(styles.btn, styles.use)}>
+        <PushpinOutlined />
+        <label>店铺装修</label>
+      </div>
+      <div className={cx(styles.btn, styles.use)} onClick={() => setUseModalVisible(true)}>
+        <PushpinOutlined />
+        <label>使用</label>
+      </div>
+
+      <UseModal
+        title="使用商场模板"
+        visible={useModalVisible}
+        onOk={() => { }}
+        onCancel={() => setUseModalVisible(false)}
+      />
+    </div>
+  )
+}
+
+export default TemplateDetail
--- a/src/pages/trademark/index.tsx
+++ b/src/pages/trademark/index.tsx
-import React, { ReactNode, useRef } from 'react'
+import React, { ReactNode, useRef, useEffect } from 'react'
 import { history } from 'umi'
-import { Button, Popconfirm, Card } from 'antd'
+import { Button, Popconfirm, Card, message } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import {
  PlusOutlined,
  PlayCircleOutlined,
-  EyeOutlined
+  EyeOutlined,
+  PauseCircleOutlined
 } from '@ant-design/icons'
 import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
-import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController'
-
-const data = [
-  {
-    key: '1',
-    role: '百达翡丽',
-    applyTime: '2019-45-74 45:02:12',
-    status: 1,
-    check: 0
-  },
-  {
-    key: '2',
-    role: '万宝龙',
-    applyTime: '2019-23-12 24:12:12',
-    check: 1,
-    status: 0,
-  },
-]
-
-// 模拟请求
-const fetchData = (params:any) => {
-  return new Promise((resolve, reject) => {
-    const queryResult = data.find(v => v.key === params.keywords)
-    setTimeout(() => {
-      resolve({
-        code: 200,
-        message: '',
-        data: queryResult ? [queryResult] : data
-      })
-    }, 1000)
-  })
-}
+import { getTradeMarkLists, updateTradeMarkStatus, deleteTradeMark } from '@/services/trademark'
+import moment from 'moment'

 const Trademark: React.FC<{}> = () => {
  const ref = useRef({})

+  const fetchData = (params:any) => {
+    return new Promise((resolve, reject) => {
+      getTradeMarkLists({current: params.page, pageSize: params.rows, name: params.name||'', status: params.status||0}).then(res=>{
+        const { data } = res
+        resolve(data)
+      })
+    })
+  }
+
  const columns: ColumnType<any>[] = [
    {
      title: 'ID',
-      dataIndex: 'key',
-      align: 'center',
-      key: 'key',
+      dataIndex: 'id',
+      key: 'id',
    },
    {
      title: '品牌名称',
-      dataIndex: 'role',
-      align: 'center',
-      key: 'role',
+      dataIndex: 'name',
+      key: 'name',
      className: 'commonPickColor',
      render: (text:any, record:any) => <span className="commonPickColor" onClick={()=>handleSee(record)}>{text}&nbsp;<EyeOutlined /></span> 
    },
    {
      title: '申请时间',
-      align: 'center',
      dataIndex: 'applyTime',
      key: 'applyTime',
+      render: (text:any, record:any) => moment(text).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '状态',
-      align: 'center',
-      dataIndex: 'status',
-      key: 'status',
+      dataIndex: 'isEnable',
+      key: 'isEnable',
      render: (text: any, record:any) => {
        let component: ReactNode = null
        component = (
          <Popconfirm
            title="确定要执行这个操作?"
-            onConfirm={confirm}
+            onConfirm={()=>confirm(record)}
            onCancel={cancel}
            okText="是"
            cancelText="否"
          >
-            <Button type="link" onClick={()=>handleModify(record)} style={record.status===1?{color:'#00B37A'}:{color:'red'}}>{record.status===1?'有效':'无效'} <PlayCircleOutlined /></Button>
+            <Button 
+              type="link" 
+              style={record.isEnable?{color:'#00B37A'}:{color:'red'}}>{record.isEnable?<>有效 <PlayCircleOutlined /></>:<>无效 <PauseCircleOutlined /></>}</Button>
          </Popconfirm>
        )
        return component
@@ -89,19 +68,18 @@ const Trademark: React.FC<{}> = () => {
    },
    {
      title: '审核状态',
-      align: 'center',
-      dataIndex: 'check',
-      key: 'check',
-      render: (text:any, record:any) => {
+      dataIndex: 'status',
+      key: 'status',
+      render: (text:any, record:any) => { 
        let component: ReactNode = null
-        if(record.check === 0)
-          component = (<><span className="commonStatusValid"></span>通过</>)
-        else if(record.check === 1)
-          component = (<><span className="commonStatusInvalid"></span>待提交</>)
-        else if(record.check === 2)
+        if(record.status === 1)
+          component = (<><span className="commonStatusInvalid"></span>待提交审核</>)
+        else if(record.status === 2)
          component = (<><span className="commonStatusModify"></span>待审核</>)
-        else if(record.check === 3)
+        else if(record.status === 3)
          component = (<><span className="commonStatusStop"></span>审核不通过</>)
+        else if(record.status === 4)
+          component = (<><span className="commonStatusValid"></span>审核通过</>)
        return component
      }
    },
@@ -112,80 +90,50 @@ const Trademark: React.FC<{}> = () => {
      render: (text:any, record:any) => {
        return (
          <>
-            {record.check === 1?<Button type='link'>提交审核</Button>:''}
-            {(record.check === 1||record.check === 3)?<Button type='link'>修改</Button>:''}
-            <Button type='link'>删除</Button>
+            {record.status === 1?<Button type='link'>提交审核</Button>:''}
+            {(record.status === 1||record.status === 3)?<Button type='link'>修改</Button>:''}
+            <Popconfirm
+              title="确定要执行这个操作?"
+              onConfirm={()=>handelDelete(record)}
+              onCancel={cancel}
+              okText="是"
+              cancelText="否"
+            >
+              <Button type='link'>删除</Button>
+            </Popconfirm>
          </>
        )
      }
    }
  ];

-  const search: IFormFilter[] = [
-    {
-      type: 'Input',
-      value: 'keywords',
-      col: 4,
-      placeHolder: '输入品牌名称'
-    },
-    {
-      type: 'Select',
-      value: 'status',
-      col: 4,
-      defaultValue: '0',
-      statusList: [
-        {
-          type: 'Select',
-          label: '状态(全部)',
-          value: '0'
-        },
-        {
-          type: 'Select',
-          label: '还不错',
-          value: '1'
-        },
-        {
-          type: 'Select',
-          label: '还可以',
-          value: '2'
-        }
-      ]
-    },
-  ]
-
-  const searchBarActions: IButtonFilter[] = [
-    {
-      text: '查询',
-      handler: () => {
-        console.log('查询')
-      }
-    },
-    {
-      type: 'primary',
-      text: '新建',
-      icon: <PlusOutlined />,
-      handler: ()=>{
-        history.push('/trademark/addBrand')
-      }
-    }
-  ]
-
  const handleSee = (record:any) => {
    console.log('see')
-    history.push(`/trademark/viewBrand?id=${record.id}`)
+    history.push(`/commodityAbility/trademark/viewBrand?id=${record.id}`)
  }

-  const confirm = () => {
-    console.log('confirm')
+  const confirm = (record: any) => {
+    updateTradeMarkStatus({id: record.id, isEnable: !record.isEnable}).then(res=>{
+      if(res.code===1000){
+        message.success(res.message)
+        //@ts-ignore
+        ref.current.reload()
+      }
+    })
  }

  const cancel = () => {
    console.log('cancel')
  }

-  const handleModify = (record: object) => {
-    // 通过传入的params字符串判断是修改那种类型的数据
-    console.log('执行状态修改', record)
+  const handelDelete = (record: any) => {
+    deleteTradeMark({id: record.id}).then(res=>{
+      if(res.code===1000){
+        message.success(res.message)
+        //@ts-ignore
+        ref.current.reload()
+      }
+    })
  }

  return (
@@ -195,8 +143,66 @@ const Trademark: React.FC<{}> = () => {
          columns={columns}
          currentRef={ref}
          fetchTableData={(params:any) => fetchData(params)}
-          formFilters={search}
-          buttonFilters={searchBarActions}
+          formilyLayouts={{
+            justify: 'space-between'
+          }}
+          formilyProps={{
+            layouts: {
+              order: 1,
+              span: 8,
+            },
+            ctx: {
+                inline: false,
+                schema: {
+                type: 'object',
+                properties: {
+                  megaLayout0: {
+                    type: 'object',
+                    'x-component': 'mega-layout',
+                    "x-component-props": {
+                      grid: true,
+                      columns: 2,
+                    },
+                    properties: {
+                      status: {
+                        type: 'string',
+                        enum: [
+                          { label: '全部', value: 0 },
+                          { label: '待提交审核', value: 1 },
+                          { label: '待审核', value: 2 },
+                          { label: '审核不通过', value: 3 },
+                          { label: '审核通过', value: 4 }
+                        ],
+                        // default: 0,
+                        'x-component-props': {
+                          placeholder: '状态',
+                        }
+                      },
+                      name: {
+                        type: 'string',
+                        'x-component-props': {
+                          placeholder: '品牌名称',
+                        },
+                        'x-component': 'Search'
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }}
+          formilyChilds={{
+            layouts: {
+              order: 0
+            },
+            children: (
+              <>
+                <Button type="primary" icon={<PlusOutlined />} onClick={()=>history.push('/commodityAbility/trademark/addBrand')}>
+                  新建
+                </Button>
+              </>
+            )
+          }}
        />
      </Card>
    </PageHeaderWrapper>

--- a/src/services/classAndProperty/attribute/API.d.ts
+++ b/src/services/classAndProperty/attribute/API.d.ts
 declare namespace AttributeApi {

-  interface innerAttribute {
+  export interface innerAttribute {
    id: number;
    groupName: string;
    name: string;
@@ -74,7 +74,12 @@ declare namespace AttributeApi {
    pageSize: number;
    name: string;
    groupName: string;
-    // isEnable: boolean;
+    isEnable: boolean;
+  }
+
+  export interface PlatformAttributeListsModel {
+    totalCount: number;
+    data: PlatformAttributeItem[];
  }



--- a/src/services/classAndProperty/attribute/index.ts
+++ b/src/services/classAndProperty/attribute/index.ts
@@ -82,7 +82,7 @@ export async function updateAttributeStatus(params: AttributeApi.AttributeByUpda
 */

 export async function getPlatformAttribute(params: AttributeApi.PlatformAttributeByQueryDTO) {
-  return request<AttributeApi.PlatformAttributeItem>('/platform/getAttributeList', {
+  return request<AttributeApi.PlatformAttributeListsModel>('/platform/getAttributeList', {
    prefix,
    params
  })

--- a/src/services/classAndProperty/categoryAttributes/API.d.ts
+++ b/src/services/classAndProperty/categoryAttributes/API.d.ts
+import '../attribute/API'
+
+declare namespace CategoyAttributeApi {
+
+  //品类下的属性列表 .Model. 使用属性API
+
+  export interface CategoyAttributeListsByQueryDTO {
+    current: number;
+    pageSize: number;
+    categoryId: number;
+    name: string;
+  }
+
+  // 新增 修改 解除共用
+  export interface CategoyAttributeByUpdateDTO {
+    customerCategoryId: number;
+    customerAttributeIds: number[];
+  }
+
+  // 关联的属性列表 .Model. 使用属性API
+
+}
\ No newline at end of file
--- a/src/services/classAndProperty/categoryAttributes/index.ts
+++ b/src/services/classAndProperty/categoryAttributes/index.ts
+import request from '@/utils/request';
+import { CategoyAttributeApi } from './API';
+
+const prefix = '/product'
+
+/**
+ * @description 查询品类下的属性列表
+ * @param {CategoyAttributeApi.CategoyAttributeListsByQueryDTO} params 
+ */
+
+export async function getCategoyAttributeLists(params: CategoyAttributeApi.CategoyAttributeListsByQueryDTO) {
+  return request<AttributeApi.AttributeListsModel>('/customer/getCustomerCategoryAttributeList', {
+    prefix,
+    params
+  })
+}
+
+/**
+ * @description 新增/修改品类属性
+ * @param {CategoyAttributeApi.CategoyAttributeByUpdateDTO} params 
+ */
+
+export async function updateCategoyAttribute(params: CategoyAttributeApi.CategoyAttributeByUpdateDTO) {
+  return request('/customer/saveCustomerCategoryAttribute', {
+    prefix,
+    method: 'post',
+    data: params
+  })
+}
+
+/**
+ * @description 解除品类属性关联
+ */
+export async function deleteCategoryAttribute(params: CategoyAttributeApi.CategoyAttributeByUpdateDTO) {
+  return request('/customer/deleteCustomerCategoryAttribute', {
+    prefix,
+    method: 'post',
+    data: params
+  })
+}
\ No newline at end of file
--- a/src/services/classAndProperty/class/API.d.ts
+++ b/src/services/classAndProperty/class/API.d.ts
 declare namespace CategoryTreeApi {

  interface CategoryTreeItem {
+    id: number;
    key: string;	
    title: string	;
    checked: boolean;
  }

  export interface CategoryTreeModel {
+    id: number;
    key: string;	
    title: string	;
    checked: boolean;

--- a/src/services/classAndProperty/class/index.ts
+++ b/src/services/classAndProperty/class/index.ts
@@ -12,6 +12,15 @@ export async function getCustomerCategoryTree() {
 }

 /**
+ * @description 获取平台后台品类树
+ */
+export async function getPlatformCategoryTree() {
+  return request<CategoryTreeApi.CategoryTreeModel>('/platform/getCategoryTree', {
+    prefix
+  })
+}
+
+/**
 * @description 查询品类信息
 * @param {CategoryTreeApi.CategoryByQueryDTO} params 
 */
@@ -56,6 +65,7 @@ export async function updateCategory(params: CategoryTreeApi.CategoryListItem) {
 export async function deleteCategory(params: CategoryTreeApi.CategoryByQueryDTO) {
  return request('/customer/deleteCustomerCategory', {
    prefix,
+    params
  })
 }


--- a/src/services/classAndProperty/propertyValue/API.d.ts
+++ b/src/services/classAndProperty/propertyValue/API.d.ts
+import '../attribute/API'
+
+declare namespace PropertyValueApi {
+
+  export interface PropertyValueItem {
+    id?: number;
+    value: string;
+    imageUrl?: string;
+    isEnable: boolean;
+    customerAttribute?: AttributeApi.innerAttribute;
+    attributeValue?: {
+      id: number;
+      value: string;
+    }
+  }
+
+  export interface PropertyValueListsModel {
+    totalCount: number;
+    data: PropertyValueItem[];
+  }
+
+  export interface PropertyValueListsByQueryDTO {
+    current: number;
+    pageSize: number;
+    name: string;
+    customerAttributeId: number;
+  }
+
+  // 查询 删除共用
+  export interface PropertyValueByQueryDTO {
+    id: number;
+  }
+
+  // 新增 修改共用
+  export interface PropertyValueByUpdateDTO {
+    id?: number;
+    value: string;
+    imageUrl?: string;
+    isEnable: boolean;
+    customerAttributeId: string;
+    attributeValue?: {
+      id: number;
+      value: string;
+    }
+  }
+
+  export interface PropertyValueByUpdateStatusDTO {
+    id: number;
+    status: boolean;
+  }
+
+
+  // 关联平台后台属性值
+   export interface PlatformPropertyValueItem {
+    id?: number;
+    value: string;
+    imageUrl?: string;
+    isEnable: boolean;
+    attribute?: AttributeApi.innerAttribute;
+  }
+
+  export interface PlatformPropertyValueByQueryDTO {
+    current: number;
+    pageSize: number;
+    name: string;
+    isEnable: boolean;
+  }
+
+  export interface PlatformPropertyValueListsModel {
+    totalCount: number;
+    data?: PlatformPropertyValueItem[];
+  }
+
+  interface PropertyValueTreeItem {
+    id: number;
+    key: string;	
+    title: string;
+    checked: boolean;
+  }
+
+  export interface PlatformPropertyValueTreeModel {
+    id: number;
+    key: string;	
+    title: string;
+    checked: boolean;
+    children: PropertyValueTreeItem[];
+  }
+
+}
\ No newline at end of file
--- a/src/services/classAndProperty/propertyValue/index.ts
+++ b/src/services/classAndProperty/propertyValue/index.ts
+import request from '@/utils/request';
+import { PropertyValueApi } from './API';
+
+const prefix = '/product'
+
+/**
+ * @description 查询属性值信息
+ * @param {PropertyValueApi.PropertyValueByQueryDTO} params 
+ */
+
+export async function getPropertyValueDetail(params: PropertyValueApi.PropertyValueByQueryDTO) {
+  return request<PropertyValueApi.PropertyValueItem>('/customer/getCustomerAttributeValue', {
+    prefix,
+    params
+  })
+}
+
+/**
+ * @description 查询属性值列表
+ * @param {PropertyValueApi.PropertyValueListsByQueryDTO} params 
+ */
+
+export async function getPropertyValueLists(params: PropertyValueApi.PropertyValueListsByQueryDTO) {
+  return request<PropertyValueApi.PropertyValueListsModel>('/customer/getCustomerAttributeValueList', {
+    prefix,
+    params
+  })
+}
+
+/**
+ * @description 新增/修改属性值
+ * @param {PropertyValueApi.PropertyValueByUpdateDTO} params 
+ */
+
+export async function updatePropertyValue(params: PropertyValueApi.PropertyValueByUpdateDTO) {
+  return request('/customer/saveOrUpdateCustomerAttributeValue', {
+    prefix,
+    method: 'post',
+    data: params
+  })
+}
+
+/**
+ * @description 删除属性值
+ * @param {PropertyValueApi.PropertyValueByQueryDTO} params 
+ */
+
+export async function deletePropertyValue(params: PropertyValueApi.PropertyValueByQueryDTO) {
+  return request('/customer/deleteCustomerAttributeValue', {
+    prefix,
+    params
+  })
+}
+
+/**
+ * @description 启用停用属性值
+ * @param {PropertyValueApi.PropertyValueByUpdateStatusDTO} params 
+ */
+
+export async function updatePropertyValueStatus(params: PropertyValueApi.PropertyValueByUpdateStatusDTO) {
+  return request('/customer/updateCustomerAttributeValueStatus', {
+    prefix,
+    params,
+    // ctlType: 'message'
+  })
+}
+
+
+// 关联 平台后台属性值列表
+
+/**
+ * @description 关联平台后台属性值
+ * @param {PropertyValueApi.PlatformAttributeByQueryDTO} params 
+ */
+
+export async function getPlatformPropertyValue(params: PropertyValueApi.PlatformPropertyValueByQueryDTO) {
+  return request<PropertyValueApi.PlatformPropertyValueListsModel>('/platform/getAttributeValueList', {
+    prefix,
+    params
+  })
+}
+
+// 关联 平台后台属性值树
+
+/**
+ * @description 关联平台后台属性值树
+ */
+
+export async function getPlatformPropertyValueTree() {
+  return request<PropertyValueApi.PlatformPropertyValueTreeModel>('/platform/getAttributeValueTree', {
+    prefix,
+  })
+}
\ No newline at end of file
--- a/src/services/trademark/API.d.ts
+++ b/src/services/trademark/API.d.ts
+declare namespace TradeMarkApi {
+
+  // export interface innerAttribute {
+  //   id: number;
+  //   groupName: string;
+  //   name: string;
+  // }
+
+  export interface TradeMarkItem {
+    id?: number;
+    name: string;
+    logoUrl: string;
+    applyTime: string;
+    status: number;
+    checkTime: string;
+    isEnable: boolean;
+    proveUrl: {
+      mapkey: {},
+      mapValue: {}
+    }
+  }
+
+  export interface TradeMarkListsModel {
+    totalCount: number;
+    data: TradeMarkItem[];
+  }
+
+  export interface TradeMarkListsByQueryDTO {
+    current: number;
+    pageSize: number;
+    name: string;
+    status?: number;
+  }
+
+  // 查询 删除 提交审核共用
+  export interface TradeMarkByQueryDTO {
+    id: number;
+  }
+
+  export interface TradeMarkByUpdateStatusDTO {
+    id: number;
+    isEnable: boolean;
+  }
+
+}
\ No newline at end of file
--- a/src/services/trademark/index.ts
+++ b/src/services/trademark/index.ts
+import request from '@/utils/request';
+
+const prefix = '/product'
+
+/**
+ * @description 查询品牌信息
+ * @param {TradeMarkApi.TradeMarkListsByQueryDTO} params 
+ */
+
+export async function getTradeMarkDetail(params: TradeMarkApi.TradeMarkByQueryDTO) {
+  return request<TradeMarkApi.TradeMarkItem>('/brand/getBrand', {
+    prefix,
+    params
+  })
+}
+
+/**
+ * @description 查询品牌列表
+ * @param {TradeMarkApi.TradeMarkListsByQueryDTO} params 
+ */
+
+export async function getTradeMarkLists(params: TradeMarkApi.TradeMarkListsByQueryDTO) {
+  return request<TradeMarkApi.TradeMarkListsModel>('/brand/getBrandList', {
+    prefix,
+    params
+  })
+}
+
+/**
+ * @description 新增/修改品牌
+ * @param {TradeMarkApi.TradeMarkItem} params 
+ */
+
+export async function updateTradeMark(params: TradeMarkApi.TradeMarkItem) {
+  return request('/brand/saveOrUpdateBrand', {
+    prefix,
+    method: 'post',
+    data: params
+  })
+}
+
+/**
+ * @description 删除品牌
+ * @param {TradeMarkApi.TradeMarkByQueryDTO} params 
+ */
+
+export async function deleteTradeMark(params: TradeMarkApi.TradeMarkByQueryDTO) {
+  return request('/brand/deleteBrand', {
+    prefix,
+    params
+  })
+}
+
+/**
+ * @description 启用停用品牌
+ * @param {TradeMarkApi.TradeMarkByUpdateStatusDTO} params 
+ */
+
+export async function updateTradeMarkStatus(params: TradeMarkApi.TradeMarkByUpdateStatusDTO) {
+  return request('/brand/updateBrandEnable', {
+    prefix,
+    params,
+    // ctlType: 'message'
+  })
+}
+
+/**
+ * @description 提交品牌审核
+ * @param {TradeMarkApi.TradeMarkByQueryDTO} params 
+ */
+export async function applyCheckTradeMark(params: TradeMarkApi.TradeMarkByQueryDTO){
+  return request('/brand/applyCheckBrand', {
+    prefix,
+    params
+  })
+}
\ No newline at end of file