fix: 导航分类和标签的修改

Author: zhongchubing

geekape-nav-admin/src/constants/api.ts

@@ -1,12 +1,25 @@
-export interface Category {
+export interface CategoryModel {
   _id: string
   name: string
   parentId: string
-  children: Category[]
+  children: CategoryModel[]
 }
 
+export interface TagModel {
+  _id: string
+  name: string
+}
+
+
 export interface ApiResponse {
   code: number
   msg: string
   data: any
 }
+
+
+export enum NavStatus {
+  pass,
+  wait,
+  reject,
+}

geekape-nav-admin/src/pages/nav/Audit/index.tsx

@@ -3,6 +3,7 @@ import {API_NAV_AUDIT, API_NAV_LIST} from "@/services/api";
 import {ProColumns} from "@ant-design/pro-table";
 import {Popconfirm, Tag, Space} from "antd";
 import request from "@/utils/request";
+import {NavStatus} from "@/constants/api";
 
 function RandomColorTag({ children }) {
   const colors = [
@@ -69,15 +70,15 @@ export default function NavAuditListPage() {
     },
   ]
 
-  async function onActionClick(id: string, action: any, status = 0) {
+  async function onActionClick(id: string, action: any, status = NavStatus.pass) {
     await request({
       url: API_NAV_AUDIT,
       method: 'PUT',
       data: {
         id,
-        status: 0,
+        status,
       },
-      msg: status == 0 ? '通过成功' : '拒绝成功'
+      msg: status == NavStatus.pass ? '通过成功' : '拒绝成功'
     })
     action?.reload()
   }
@@ -86,8 +87,8 @@ export default function NavAuditListPage() {
     <GeekProTable
       columns={columns}
       requestParams={{url: API_NAV_LIST, method: 'GET'}}
-      renderOptions={(text, record, _, action) => record.status != 2 ? [
-        <Popconfirm title={'确定通过吗？'} onConfirm={() => onActionClick(record._id, action, 1)}>
+      renderOptions={(text, record, _, action) => record.status != NavStatus.reject ? [
+        <Popconfirm title={'确定通过吗？'} onConfirm={() => onActionClick(record._id, action, 0)}>
           <a>通过</a>
         </Popconfirm>,
         <Popconfirm title={'确定拒绝吗？'} onConfirm={() => onActionClick(record._id, action, 2)}>

geekape-nav-admin/src/pages/nav/Category/CategorySelect.tsx

@@ -0,0 +1,34 @@
+import {Select} from "antd";
+import request from "@/utils/request";
+import {API_CATEGORY_LIST} from "@/services/api";
+import {useEffect, useState} from "react";
+import {CategoryModel} from "@/constants/api";
+
+export default function CategorySelect(props: any) {
+  const [categoryList, setCategoryList] = useState<CategoryModel[]>([]);
+  const [value, setValue] = useState('')
+
+  useEffect(()=> {
+    async function getCategoryList() {
+      const res = await request({
+        url: API_CATEGORY_LIST,
+        method: 'GET'
+      })
+      setCategoryList(res.data)
+    }
+
+    getCategoryList()
+  }, [])
+
+  function onSelectChange(value: string) {
+    setValue(value)
+  }
+
+  return (
+    <Select onChange={onSelectChange} value={value} showSearch {...props}>
+      {categoryList.map(item => <Select.OptGroup label={item.name}>
+        {item.children.map(subItem => <Select.Option value={subItem._id}>{subItem.name}</Select.Option>)}
+      </Select.OptGroup>)}
+    </Select>
+  )
+}

geekape-nav-admin/src/pages/nav/Category/index.tsx

@@ -7,6 +7,7 @@ import {PlusOutlined} from "@ant-design/icons";
 import useGeekProTablePopup from "@/components/GeekProTable/useGeekProTablePopup";
 import CategoryForm from "@/pages/nav/Category/CategoryForm";
 import {useRef, useState} from "react";
+import {CategoryModel} from "@/constants/api";
 
 
 function transformCategoryList(list: any) {
@@ -80,7 +81,7 @@ export default function NavAuditListPage() {
           }}
           search={false}
           request={onRequestData}
-          renderOptions={(text, record, _, action)=> ([
+          renderOptions={(text, record: CategoryModel, _, action)=> ([
             <a onClick={()=> formProps.show({type: 'edit', data: record, action})}>编辑</a>,
             <Popconfirm title={'确定删除吗？'} onConfirm={() => onDelete(record._id, action)}>
               <a>删除</a>

geekape-nav-admin/src/pages/nav/List/NavListForm.tsx

@@ -1,15 +1,17 @@
 import {
-  DrawerForm, ProFormDependency,
+  DrawerForm, ProFormDependency, ProFormSelect,
   ProFormText,
   ProFormTextArea,
   ProFormUploadButton,
   ProFormUploadDragger
 } from "@ant-design/pro-form";
 import useProFormItem from "@/hooks/useProFormItem";
-import {UploadProps} from "antd";
+import {Form, UploadProps} from "antd";
 import useGeekProForm from "@/components/GeekProForm/useGeekProForm";
 import {API_NAV} from "@/services/api";
 import request from "@/utils/request";
+import CategorySelect from "@/pages/nav/Category/CategorySelect";
+import TagSelect from "@/pages/nav/Tag/TagSelect";
 
 export default function NavListForm(props: any) {
   const formProps = useGeekProForm({
@@ -39,6 +41,7 @@ export default function NavListForm(props: any) {
     label: '网站名称',
     required: true
   })
+
   const descProps = useProFormItem({
     name: 'desc',
     label: '网站描述',
@@ -64,6 +67,12 @@ export default function NavListForm(props: any) {
       </ProFormDependency>
 
       <ProFormText {...nameProps} />
+      <Form.Item name='categoryId' label='网站分类'>
+        <CategorySelect />
+      </Form.Item>
+      <Form.Item name='tags' label='网站标签'>
+        <TagSelect valueKey={'name'} />
+      </Form.Item>
       <ProFormTextArea {...descProps} />
       <ProFormText {...urlProps} />
       <ProFormText {...authorProps} />

geekape-nav-admin/src/pages/nav/List/index.tsx

@@ -3,24 +3,14 @@ import GeekProTable from "@/components/GeekProTable/GeekProTable";
 import {ProColumns} from "@ant-design/pro-table";
 import useGeekProTablePopup from "@/components/GeekProTable/useGeekProTablePopup";
 import NavListForm from "@/pages/nav/List/NavListForm";
-import {Popconfirm, Select} from "antd";
+import {Form, Popconfirm, Select} from "antd";
 import request from "@/utils/request";
 import {useRef, useState} from "react";
-import {Category} from "@/constants/api";
+import CategorySelect from "@/pages/nav/Category/CategorySelect";
 
 export default function NavListPage() {
   const tableRef = useRef();
   const formProps = useGeekProTablePopup()
-  const [categoryList, setCategoryList] = useState<Category[]>([]);
-
-  async function onChange() {
-    if (categoryList.length) return
-    const res = await request({
-      url: API_CATEGORY_LIST,
-      method: 'GET'
-    })
-    setCategoryList(res.data)
-  }
 
   const columns: ProColumns[] = [
     {
@@ -33,13 +23,7 @@ export default function NavListPage() {
       dataIndex: 'categoryId',
       width: 500,
       hideInTable: true,
-      renderFormItem: () => (
-        <Select onClick={onChange} showSearch>
-          {categoryList.map(item => <Select.OptGroup label={item.name}>
-            {item.children.map(subItem => <Select.Option value={subItem._id}>{subItem.name}</Select.Option>)}
-          </Select.OptGroup>)}
-        </Select>
-      )
+      renderFormItem: (props) => <CategorySelect {...props} />
     },
     {
       title: '网站描述',

geekape-nav-admin/src/pages/nav/Tag/TagSelect.tsx

@@ -0,0 +1,38 @@
+import {Select, SelectProps} from "antd";
+import request from "@/utils/request";
+import {API_TAG_list} from "@/services/api";
+import {useEffect, useState} from "react";
+import {TagModel} from "@/constants/api";
+
+interface TagSelectProps extends SelectProps<any> {
+  valueKey?: string
+}
+
+export default function TagSelect(props: TagSelectProps) {
+  const [tagList, setTagList] = useState<TagModel[]>([]);
+  const [value, setValue] = useState([])
+
+  useEffect(()=> {
+    async function getTagList() {
+      const { data } = await request({
+        url: API_TAG_list,
+        method: 'GET'
+      })
+      if (Array.isArray(data.data)) {
+        setTagList(data?.data)
+      }
+    }
+
+    getTagList()
+  }, [])
+
+  function onSelectChange(value: any) {
+    setValue(value)
+  }
+
+  return (
+    <Select onChange={onSelectChange} value={value} showSearch mode={'tags'} {...props}>
+        {tagList.map(subItem => <Select.Option value={subItem[props.valueKey || '_id']}>{subItem.name}</Select.Option>)}
+    </Select>
+  )
+}

geekape-nav-admin/src/pages/nav/Tag/form.tsx

@@ -1,5 +1,5 @@
 import {
-  ModalForm, ProFormSelect, ProFormText,
+  ModalForm, ProFormText,
 } from "@ant-design/pro-form";
 import useProFormItem from "@/hooks/useProFormItem";
 import useGeekProForm from "@/components/GeekProForm/useGeekProForm";

geekape-nav-admin/src/pages/nav/Tag/index.tsx

@@ -1,8 +1,8 @@
 import {Button, Popconfirm} from "antd";
 import request from "@/utils/request";
-import {API_CATEGORY, API_CATEGORY_LIST, API_TAG_list} from "@/services/api";
+import {API_TAG, API_TAG_list} from "@/services/api";
 import GeekProTable from "@/components/GeekProTable/GeekProTable";
-import {ActionType, ProColumns} from "@ant-design/pro-table";
+import type {ActionType, ProColumns} from "@ant-design/pro-table";
 import {PlusOutlined} from "@ant-design/icons";
 import useGeekProTablePopup from "@/components/GeekProTable/useGeekProTablePopup";
 import {useRef, useState} from "react";
@@ -29,7 +29,7 @@ export default function NavTagListPage() {
 
   async function onDelete(id: string, action: any) {
     await request({
-      url: API_CATEGORY,
+      url: API_TAG,
       method: 'DELETE',
       data: {
         id,

geekape-nav-server/app/controller/nav.ts

@@ -81,6 +81,10 @@ export default class NavController extends Controller {
 
   async edit() {
     this.ctx.request.body.updateTime = new Date()
+    const { tags } = this.ctx.request.body
+    if (Array.isArray(tags)) {
+      await this.ctx.service.tag.addMultiTag(tags)
+    }
     await super.update();
   }