feat: 控制分类是否显示到前台菜单

zhongchubing · zhongchubing · commit 8867b2521b4f · 2021-08-12T17:16:33.000+08:00
diff --git a/geekape-nav-admin/src/pages/nav/Category/CategoryForm.tsx b/geekape-nav-admin/src/pages/nav/Category/CategoryForm.tsx
@@ -1,5 +1,5 @@
 import {
-  ModalForm, ProFormSelect, ProFormText,
+  ModalForm, ProFormDependency, ProFormSelect, ProFormSwitch, ProFormText,
   ProFormUploadButton,
 } from "@ant-design/pro-form";
 import useProFormItem from "@/hooks/useProFormItem";
@@ -31,6 +31,11 @@ export default function CategoryForm(props: any) {
     label: '分类图标',
     width: 'sm',
   })
+  const showMenuProps = useProFormItem({
+    name: 'showInMenu',
+    label: '显示到菜单',
+    width: 'sm',
+  })
 
   const icons = [
     'iconfont icon-qianduan',
@@ -47,7 +52,6 @@ export default function CategoryForm(props: any) {
         id: props.isEdit ? props.selectedData?._id : undefined,
         ...values,
       }
-      console.log(data, 'data')
       await request({
         url: API_CATEGORY,
         method: props.isEdit ? 'PUT' : 'POST',
@@ -59,13 +63,13 @@ export default function CategoryForm(props: any) {
   }
 
   return (
-    <ModalForm {...props} {...formProps} onFinish={onFinish} width={300}>
+    <ModalForm {...props} {...formProps} onFinish={onFinish} width={350}>
       <ProFormText {...nameProps} />
       <ProFormSelect {...categoryProps} options={props.categoryList.reduce((t, v) => [...t, {label: v.name, value: v._id}], [])}/>
-      <ProFormSelect
-        {...categoryIconProps}
-        options={icons.reduce((t, v) => [...t, {label: <i className={v}></i>, value: v}], [])}
-      />
+      <ProFormDependency name={['icon']}>
+        {({ icon })=> <ProFormText {...categoryIconProps} formItemProps={{extra: <i className={icon}></i>}} />}
+      </ProFormDependency>
+      <ProFormSwitch {...showMenuProps} />
     </ModalForm>
   )
 }
diff --git a/geekape-nav-admin/src/pages/nav/Category/index.tsx b/geekape-nav-admin/src/pages/nav/Category/index.tsx
@@ -25,13 +25,16 @@ function transformCategoryList(list: any) {
 
 export default function NavAuditListPage() {
   const formProps = useGeekProTablePopup()
-  const tableRef = useRef<ActionType>(null);
+  const tableRef = useRef<ActionType>();
   const [categoryList, setCategoryList] = useState([]);
 
   async function onRequestData() {
     const res = await request({
       url: API_CATEGORY_LIST,
-      method: 'GET'
+      method: 'GET',
+      data: {
+        showInMenu: false
+      }
     })
     const data = transformCategoryList(res.data)
     setCategoryList(data)
@@ -56,7 +59,16 @@ export default function NavAuditListPage() {
     {
       title: '分类名',
       dataIndex: 'name'
-    }
+    },
+    {
+      title: '显示在菜单',
+      dataIndex: 'showInMenu',
+      valueType: 'select',
+      valueEnum: {
+        true: { text: '显示', status: 'Success' },
+        false: { text: '不显示', status: 'Error' },
+      }
+    },
   ]
   return (
       <div>
diff --git a/geekape-nav-admin/src/pages/nav/List/NavListForm.tsx b/geekape-nav-admin/src/pages/nav/List/NavListForm.tsx
@@ -1,5 +1,5 @@
 import {
-  DrawerForm,
+  DrawerForm, ProFormDependency,
   ProFormText,
   ProFormTextArea,
   ProFormUploadButton,
@@ -14,14 +14,7 @@ import request from "@/utils/request";
 export default function NavListForm(props: any) {
   const formProps = useGeekProForm({
     ...props,
-    onInitialValues(values: any): object {
-      if (typeof values.logo === 'string') {
-        values.logo = [{url: values.logo}]
-      }
-      return values
-    },
     onFinish: async (values) => {
-      values.logo = values.logo[0]?.url
       const data = {
         id: props.isEdit ? props.selectedData?._id : undefined,
         ...values
@@ -36,7 +29,7 @@ export default function NavListForm(props: any) {
       props.tableRef?.reload()
     }
   })
-  const logoProps = useProFormItem<UploadProps>({
+  const logoProps = useProFormItem({
     name: 'logo',
     label: '网站LOGO',
     required: true,
@@ -66,7 +59,10 @@ export default function NavListForm(props: any) {
   })
   return (
     <DrawerForm {...props} {...formProps}>
-      <ProFormUploadButton {...logoProps} />
+      <ProFormDependency name={['logo']}>
+        {({ logo })=> <ProFormText {...logoProps} formItemProps={{extra: <img width={50} src={logo} />}} />}
+      </ProFormDependency>
+
       <ProFormText {...nameProps} />
       <ProFormTextArea {...descProps} />
       <ProFormText {...urlProps} />
diff --git a/geekape-nav-main/components/AppHeader.vue b/geekape-nav-main/components/AppHeader.vue
@@ -1,10 +1,15 @@
 <template>
   <el-header>
     <AppSearch />
-    <div>
-      <el-tooltip content="意见反馈"><i class="el-icon-question" @click="onJumpFeedback"></i></el-tooltip>
-      <el-tooltip content="推荐网站"><i class="el-icon-circle-plus" @click="$emit('showPopup')"></i></el-tooltip>
-    </div>
+
+    <el-row type="flex">
+      <el-col>
+        <el-tooltip content="意见反馈"><i class="el-icon-question" @click="onJumpFeedback"></i></el-tooltip>
+      </el-col>
+      <el-col>
+        <el-tooltip content="推荐网站"><i class="el-icon-circle-plus" @click="$emit('showPopup')"></i></el-tooltip>
+      </el-col>
+    </el-row>
   </el-header>
 </template>
 
@@ -53,9 +58,24 @@ export default {
 
   i {
     font-size: 25px;
-    margin-left: 30px;
+    margin-left: 2rem;
     color: #999;
     cursor: pointer;
   }
 }
+
+@media screen and (max-width: 568px) {
+  .app-search {
+    /deep/ .el-select {
+      display: none;
+    }
+  }
+}
+@media screen and (min-width: 569px) {
+  .app-search {
+    /deep/ .el-select {
+      display: block;
+    }
+  }
+}
 </style>
diff --git a/geekape-nav-main/components/AppNavItem.vue b/geekape-nav-main/components/AppNavItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-col :xs="24" :sm="8" :md="4" lg="4" class="website-item">
+  <el-col :xs="24" :sm="8" :md="6" :lg="4" class="website-item">
     <div class="wrap">
       <a class="link" target="_blank" :href="data.href">
         <el-tooltip content="链接直达" property="top">
diff --git a/geekape-nav-main/components/AppNavMenus.vue b/geekape-nav-main/components/AppNavMenus.vue
@@ -210,4 +210,16 @@ $sidebar-w: auto;
 }
 
 
+@media screen and (max-width: 568px) {
+  .app-search,
+  .sidebar-fix {
+    display: none;
+  }
+}
+@media screen and (min-width: 569px) {
+  .app-search,
+  .sidebar-fix {
+    display: block;
+  }
+}
 </style>
diff --git a/geekape-nav-main/layouts/default.vue b/geekape-nav-main/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <nuxt />
+    <nuxt keep-alive />
   </div>
 </template>
 
diff --git a/geekape-nav-main/nuxt.config.js b/geekape-nav-main/nuxt.config.js
@@ -1,3 +1,5 @@
+const nuxtPageCache = require('nuxt-page-cache')
+
 module.exports = {
   mode: "universal",
   telemetry: false,
@@ -86,5 +88,14 @@ module.exports = {
      */
     extend(config, ctx) {},
     vendor: ["axios"]
-  }
+  },
+
+  // serverMiddleware: [
+  //   nuxtPageCache.cacheSeconds(1, req => {
+  //     if (req.query && req.query.pageType) {
+  //       return req.query.pageType
+  //     }
+  //     return false
+  //   })
+  // ]
 }
diff --git a/geekape-nav-main/package.json b/geekape-nav-main/package.json
@@ -29,6 +29,7 @@
     "https": "^1.0.0",
     "mongoose": "^5.9.24",
     "nuxt": "^2.0.0",
+    "nuxt-page-cache": "^0.0.5",
     "request": "^2.88.2",
     "vuex": "^3.6.2"
   },
diff --git a/geekape-nav-main/pages/index.vue b/geekape-nav-main/pages/index.vue
@@ -66,12 +66,11 @@ export default {
   },
   methods: {
     async getCategoryList() {
-      const { data } = await this.$api.getCategoryList();
-      this.categorys = data.data;
+      const { data: categorys } = await this.$api.getCategoryList();
+      this.categorys = categorys;
 
-      if (this.categorys.length) {
-        const { children } = this.categorys.slice(0, 1)[0];
-        const categoryId = children[0]._id;
+      if (Array.isArray(categorys)) {
+        const categoryId = categorys[0]._id;
         this.findNav(categoryId);
       }
     },
@@ -107,22 +106,10 @@ export default {
       data
     };
   },
-  mounted() {
-    window.onresize = () => {
-      return (() => {
-        window.screenWidth = document.body.clientWidth;
-        if (window.screenWidth < 481) {
-          this.isLeftbar = false;
-        } else {
-          this.isLeftbar = true;
-        }
-      })();
-    };
-    window.onresize();
-  },
-  created() {
-    console.log(process.env.navUrl, "process.env");
-  }
+  // created() {
+  //   this.getCategoryList()
+  //   console.log(process.env.navUrl, "process.env");
+  // }
 };
 </script>
 
@@ -151,20 +138,6 @@ export default {
   }
 }
 
-@media screen and (max-width: 568px) {
-  .user-layout {
-    /deep/ .el-header .arrow {
-      display: none;
-    }
-  }
-}
-@media screen and (min-width: 569px) {
-  .user-layout {
-    /deep/ .el-header .arrow {
-      display: block;
-    }
-  }
-}
 
 /deep/ .el-menu--popup-right-start {
   height: 500px !important;
diff --git a/geekape-nav-main/pages/nav/_id.vue b/geekape-nav-main/pages/nav/_id.vue
@@ -16,7 +16,7 @@
 
     <div class="container">
       <el-row :gutter="25" class="site-info">
-        <el-col span="6" xs="24">
+        <el-col :md="6" :xs="24">
           <div class="left">
             <div class="img-wrap">
               <el-image :src="detail.logo" />
@@ -40,7 +40,7 @@
             </div>
           </div>
         </el-col>
-        <el-col span="10" xs="24">
+        <el-col :md="10" :xs="24">
           <div class="content">
 <!--            <div class="category-bar">-->
 <!--              <span class="category">素材资源</span>-->
@@ -55,7 +55,7 @@
             </div>
           </div>
         </el-col>
-        <el-col span="8" xs="24">
+        <el-col :md="8" :xs="24">
           <div class="right">
             <div class="app-card">
               <div class="app-card-header">
@@ -126,7 +126,7 @@ export default {
 .container {
   max-width: 1200px;
   margin: auto;
-  padding: 3rem 0;
+  padding: 3rem 15px;
 }
 
 .placeholder {
@@ -458,4 +458,14 @@ export default {
     margin-right: 8px;
   }
 }
+
+
+@media screen and (max-width: 568px) {
+  .site-info {
+    margin-top: 0;
+    .el-col {
+      margin-bottom: 40px;
+    }
+  }
+}
 </style>
diff --git a/geekape-nav-main/yarn.lock b/geekape-nav-main/yarn.lock
@@ -5652,7 +5652,7 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
-lru-cache@^4.0.1, lru-cache@^4.1.2:
+lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.3:
   version "4.1.5"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -6323,6 +6323,13 @@ number-is-nan@^1.0.0:
   resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+nuxt-page-cache@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.nlark.com/nuxt-page-cache/download/nuxt-page-cache-0.0.5.tgz#9d32ad3f037105e6fc7788734f1bda4a162e8ec3"
+  integrity sha1-nTKtPwNxBeb8d4hzTxvaShYujsM=
+  dependencies:
+    lru-cache "^4.1.3"
+
 nuxt@^2.0.0:
   version "2.13.3"
   resolved "https://registry.npmjs.org/nuxt/-/nuxt-2.13.3.tgz#494f0df34851dfcdbdf4fd092112fa1d4bed1b02"
diff --git a/geekape-nav-server/app/controller/category.ts b/geekape-nav-server/app/controller/category.ts
@@ -3,15 +3,15 @@ import Controller from './common';
 export default class CategoryController extends Controller {
   async list() {
     const { ctx } = this
+    const { showInMenu = true } = ctx.query
     try {
-      let data = await ctx.model.Category.find({}).limit(100000)
-      const stairCategory = data.filter(item=> !item.categoryId)
-      const secondCategory = data.filter(item=> item.categoryId)
+      const params: any = {}
+      if (showInMenu && showInMenu !== "false") {
+        params.showInMenu = { $in: [null, true] }
+      }
+      let data = await ctx.model.Category.find(params).limit(100000)
 
-      let newData = stairCategory.map(item=> {
-        item.children = [...secondCategory.filter(cate=> item._id == cate.categoryId)]
-        return item
-      })
+      const newData = ctx.service.category.formatCategoryList(data)
       this.success(newData)
     } catch (error) {
       this.error(error.message)
diff --git a/geekape-nav-server/app/controller/nav.ts b/geekape-nav-server/app/controller/nav.ts
diff --git a/geekape-nav-server/app/model/category.ts b/geekape-nav-server/app/model/category.ts
diff --git a/geekape-nav-server/app/model/nav.ts b/geekape-nav-server/app/model/nav.ts
diff --git a/geekape-nav-server/app/service/Category.ts b/geekape-nav-server/app/service/Category.ts
diff --git a/geekape-nav-server/app/service/Nav.ts b/geekape-nav-server/app/service/Nav.ts
