✨ feat: 新增seo优化页

config/routes/index.ts

@@ -32,6 +32,7 @@ import contentRoute from './contentRoute';  // 内容管理
 // import returnManageRoute from './returnManageRoute'; // 退货申请单管理
 // import repairManageRoute from './repairManageRoute'; // 维修申请单管理
 import purchaseBidRoute from './purchaseBidRoute'; // 采购竞价单审核
+import seoSettingRoutes from './seoSettingRoutes' // seo优化
 
 //@ts-ignore
 import asyncRoutes from '../router.config.json'

config/routes/seoSettingRoutes.ts

+/*
+ * @Author: HJX
+ * @PageName: SEO优化
+ */
+
+const router = {
+  path: '/seoSettingManager',
+  name: 'SEO优化',
+  key: 'seoSettingManager',
+  icon: 'SmileOutlined',
+  routes: [
+    {
+      path: '/seoSettingManager/seo',
+      name: 'SEO设置',
+      component: '@/pages/seoSettingManager/seo',
+      hidePageHeader: true,
+    },
+    {
+      path: '/seoSettingManager/seo/add',
+      name: '新增SEO',
+      hidePageHeader: true,
+      hideInMenu: true,
+      component: '@/pages/seoSettingManager/seo/add',
+    },
+    {
+      path: '/seoSettingManager/seo/edit',
+      name: '修改SEO',
+      hidePageHeader: true,
+      hideInMenu: true,
+      component: '@/pages/seoSettingManager/seo/add',
+    },
+    {
+      path: '/seoSettingManager/seo/detail',
+      name: '查看SEO',
+      hidePageHeader: true,
+      hideInMenu: true,
+      component: '@/pages/seoSettingManager/seo/add',
+    }
+  ]
+}
+export default router

src/components/RequireItem/index.tsx

@@ -3,14 +3,18 @@ import cx from 'classnames'
 import styles from './index.less'
 
 interface RequireItemPropsType {
-  label: string;
+  label: string | React.ReactNode;
+  brief?: string | React.ReactNode;
   isRequire?: boolean;
 }
 
 const RequireItem: React.FC<RequireItemPropsType> = (props) => {
-  const { label, isRequire = false } = props
+  const { label, isRequire = false, brief } = props
 
-  return <label className={cx(styles.require_item, isRequire ? styles.require : '')}>{label}</label>
+  return <label className={cx(styles.require_item, isRequire ? styles.require : '')}>
+    <span>{label}</span>
+    {brief && brief}
+  </label>
 }
 
-export default RequireItem
\ No newline at end of file
+export default RequireItem

src/constants/index.ts

@@ -1595,8 +1595,14 @@ export const ExpertRectractStatus = {
 
 /** 页面类型 */
 export const SELECT_NAME = {
-  1: '店铺首页',
-  2: '关于我们'
+  1: '平台首页',
+  2: '企业商城首页',
+  3: '渠道服务首页',
+  4: '积分商城首页',
+  5: '企业直采首页',
+  6: '物流服务首页',
+  7: '加工服务首页',
+  8: '行情资讯首页',
 }
 
 /** 门户类型 */

src/pages/seoSettingManager/seo/add.tsx

+import React, { useEffect, useState } from 'react';
+import { history, Prompt } from 'umi';
+import { Card, Button, Tabs, Form, Select, Tooltip, Input, Typography } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ReutrnEle from '@/components/ReturnEle';
+import RequireItem from '@/components/RequireItem';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { SELECT_NAME } from '@/constants';
+import { PublicApi } from '@/services/api';
+const { TabPane } = Tabs
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '174px' } },
+  wrapperCol: { span: 9 },
+  labelAlign: "left"
+}
+
+const ShopSeoAdded = () => {
+  const { query: { id }, pathname } = history.location;
+  const link = pathname.split('/')[pathname.split('/').length - 1];
+  console.log(link)
+  const [form] = Form.useForm()
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
+  const [formIsHalfFilledOut, setFormIsHalfFilledOut] = useState<boolean>(false);
+  const handleFormValueChange = () => {
+    setFormIsHalfFilledOut(true)
+  }
+
+  const handleSave = (e: any) => {
+    e.preventDefault()
+    const fetch = (link === 'add' ? PublicApi.postManageSeoAdd : PublicApi.postManageSeoUpdate);
+    form.validateFields().then((value: any) => {
+      const type: number = value.type;
+      const params = {
+        id,
+        ...value,
+        name: SELECT_NAME[type]
+      }
+      setConfirmLoading(true)
+      fetch(params).then(res => {
+        if (res.code !== 1000) {
+          setConfirmLoading(false);
+          return
+        }
+        setConfirmLoading(false)
+        setFormIsHalfFilledOut(false)
+        history.goBack();
+      }).catch(() => {
+        setConfirmLoading(false)
+      })
+    })
+  }
+
+  useEffect(() => {
+    if (id) {
+      PublicApi.getManageSeoGet({ id }).then(res => {
+        if (res.code !== 1000) {
+          return
+        }
+        form.setFieldsValue({...res.data})
+      })
+    }
+  }, [])
+
+  return (
+    <PageHeaderWrapper
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回" />}
+      extra={
+        link !== 'detail' && <Button type="primary" loading={confirmLoading} onClick={handleSave}> 保存</Button>
+      }
+    >
+      <Prompt when={formIsHalfFilledOut} message="您还有未保存的内容，是否确定要离开？" />
+      <Card>
+        <Tabs
+          type="card"
+        >
+          <TabPane tab='基本信息' key='1'>
+            <Form
+              {...layout}
+              form={form}
+              hideRequiredMark={true}
+              onValuesChange={handleFormValueChange}
+            >
+              <Form.Item
+                name='type'
+                label={<RequireItem label="页面名称" isRequire={true} />}
+                rules={[{ required: true, message: "请选择页面名称" }]}
+              >
+                <Select disabled={link === 'detail'}>
+                  <Select.Option value={1}>平台首页</Select.Option>
+                  <Select.Option value={2}>企业商城首页</Select.Option>
+                  <Select.Option value={3}>渠道服务首页</Select.Option>
+                  <Select.Option value={4}>积分商城首页</Select.Option>
+                  <Select.Option value={5}>企业直采首页</Select.Option>
+                  <Select.Option value={6}>物流服务首页</Select.Option>
+                  <Select.Option value={7}>加工服务首页</Select.Option>
+                  <Select.Option value={8}>行情资讯首页</Select.Option>
+                </Select>
+              </Form.Item>
+              <Form.Item
+                name='link'
+                label={<RequireItem label="访问链接" brief={<Tooltip placement="top" title="访问该页面的链接"><QuestionCircleOutlined /></Tooltip>} />}
+              >
+                <Input disabled={link === 'detail'} addonBefore={<Typography.Text type='secondary'>http://</Typography.Text>} />
+              </Form.Item>
+              <Form.Item
+                name='title'
+                label={<RequireItem label="标题" isRequire={true} brief={<Tooltip placement="top" title="用于显示在页面title标签的内容，便于搜索引擎抓取"><QuestionCircleOutlined /></Tooltip>} />}
+                rules={[{ required: true, message: "请输入标题" }]}
+              >
+                <Input disabled={link === 'detail'} placeholder='最长100个字符，50个汉字' />
+              </Form.Item>
+              <Form.Item
+                name='description'
+                label={<RequireItem label="描述" isRequire={true} brief={<Tooltip placement="top" title="用于显示在页面Description标签的内容，便于搜索引擎抓取"><QuestionCircleOutlined /></Tooltip>} />}
+                rules={[{ required: true, message: "请输入描述" }]}
+              >
+                <Input.TextArea disabled={link === 'detail'} rows={5} placeholder="最长200个字符，100个汉字" maxLength={200} />
+              </Form.Item>
+              <Form.Item
+                name='keywords'
+                label={<RequireItem label="关键字" isRequire={true} brief={<Tooltip placement="top" title="用于显示在页面Keywords标签的内容，便于搜索引擎通过关键词搜索时抓取页面，多个关键词用豆号分隔"><QuestionCircleOutlined /></Tooltip>} />}
+                rules={[{ required: true, message: "请输入关键字" }]}
+              >
+                <Input.TextArea disabled={link === 'detail'} rows={5} placeholder="最长200个字符，100个汉字" maxLength={200} />
+              </Form.Item>
+            </Form>
+          </TabPane>
+        </Tabs>
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default ShopSeoAdded;

src/pages/seoSettingManager/seo/index.tsx

+import React, { ReactNode, useRef } from 'react';
+import { ISchema } from '@formily/antd';
+import { history } from 'umi';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Card, Row, Col, Button, Popconfirm, Typography } from 'antd';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import { PublicApi } from '@/services/api';
+import NiceForm from '@/components/NiceForm';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { searchSelectGetSelectCategoryOptionEffect } from '@/pages/systemManage/effect';
+import { PauseCircleOutlined, PlayCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+const ShopSeo = () => {
+  const ref = useRef<any>({});
+  const formActions = createFormActions();
+  /** 修改状态 */
+  const confirm = (e: any) => {
+    const enableStatus = e.status === 1 ? 0 : 1;
+    PublicApi.postManageSeoUpdateStatus({ id: e.id, enableStatus }).then(res => {
+      if (res.code !== 1000) {
+        return
+      }
+      ref.current.reload();
+    })
+  }
+  /** 删除 */
+  const handleDelete = (id: number) => {
+    PublicApi.postManageSeoDelete({ id }).then(res => {
+      if (res.code !== 1000) {
+        return
+      }
+      ref.current.reload();
+    })
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      key: 'id',
+      dataIndex: 'id',
+      width: 128,
+    },
+    {
+      title: '页面名称',
+      key: 'name',
+      dataIndex: 'name',
+      render: (text: any,record: any) => <Typography.Link href={`/seoSettingManager/seo/detail?id=${record.id}`}>{text}</Typography.Link>
+    },
+    {
+      title: '访问链接',
+      key: 'link',
+      dataIndex: 'link',
+      render: (text: any) => `http://${text}`
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status',
+      width: 256,
+      render: (text: any, record: any) => {
+        let component: ReactNode = null
+        component = (
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={() => confirm(record)}
+            okText="是"
+            cancelText="否"
+          >
+            <Button
+              type="link"
+              style={record.status === 1 ? { color: '#00B37A' } : { color: 'red' }}>
+              {record.status === 1 ? <>有效 <PlayCircleOutlined /></> : <>无效 <PauseCircleOutlined /></>}
+            </Button>
+          </Popconfirm>
+        )
+        return component
+      }
+    },
+    {
+      title: '操作',
+      key: 'action',
+      dataIndex: 'action',
+      width: 256,
+      render: (_text: any, record: any) => (
+        <>
+          <Popconfirm
+            title="确定要执行这个操作?"
+            onConfirm={() => handleDelete(record.id)}
+            disabled={record.status === 1}
+            okText="是"
+            cancelText="否"
+          >
+            <Button disabled={record.status === 1} type='link'>删除</Button>
+          </Popconfirm>
+          <Button disabled={record.status === 1} type='link' onClick={() => history.push(`/seoSettingManager/seo/edit?id=${record.id}`)}>修改</Button>
+        </>
+      )
+    }
+  ]
+
+  // 搜索
+  const search = (values: any) => {
+    ref.current.reload(values)
+  }
+
+  const fetchData = (params: any) => {
+    return new Promise(resolve => {
+      PublicApi.getManageSeoPage({ ...params }).then(res => {
+        resolve(res.data)
+      })
+    })
+  }
+
+  const controllerBtns = <Row>
+    <Col span={6}>
+      <Button
+        onClick={() => history.push('/seoSettingManager/seo/add')}
+        type="primary"
+        icon={<PlusOutlined />}
+      >
+        新建
+      </Button>
+    </Col>
+  </Row>
+
+  const schema: ISchema = {
+    type: 'object',
+    properties: {
+      megalayout: {
+        type: 'object',
+        "x-component": 'mega-layout',
+        "x-component-props": {
+          grid: true
+        },
+        properties: {
+          ctl: {
+            type: 'object',
+            "x-component": "Children",
+            "x-component-props": {
+              children: "{{controllerBtns}}"
+            }
+          },
+          name: {
+            type: 'string',
+            "x-component": "Search",
+            "x-mega-props": {
+
+            },
+            "x-component-props": {
+              placeholder: '页面名称',
+              advanced: false
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          tableProps={{
+            rowKey: 'id',
+          }}
+          columns={columns}
+          currentRef={ref}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <NiceForm
+              actions={formActions}
+              expressionScope={{ controllerBtns }}
+              onSubmit={values => search(values)}
+              effects={($, actions) => {
+                useStateFilterSearchLinkageEffect($, actions, 'name', FORM_FILTER_PATH)
+                FormEffectHooks.onFieldChange$('category').subscribe(state => {
+                  searchSelectGetSelectCategoryOptionEffect(actions, 'category')
+                })
+              }}
+              schema={schema}
+            >
+            </NiceForm>
+          }
+        />
+      </Card>
+    </PageHeaderWrapper >
+  )
+}
+export default ShopSeo;