feat: 完成图文集新增

11 months ago · 5903993f79
parent eac43e49c0
commit 5903993f79
4 changed files with 73 additions and 32 deletions
--- a/src/stores/AuthStore.js
+++ b/src/stores/AuthStore.js
@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
 import { fetchJSON, postForm } from '@/utils/request'
 import { isEmpty, isNotEmpty } from '@/utils/commons'
 import { API_HOST } from '@/config'
@ -6,7 +7,7 @@ import { API_HOST } from '@/config'
 export const PERM_MERGE_CONVERSATION = 'merge-conversation'
 export const PERM_ASSIGN_NEW_CONVERSATION = 'assign-new-conversation'

-const useAuthStore = create((set, get) => ({
+const useAuthStore = create(devtools((set, get) => ({
  loginUser: {
    userId: -1,
    userIdStr: '-1',
@ -158,6 +159,6 @@ const useAuthStore = create((set, get) => ({
        }
      })
  },
-}))
+}), { name: 'authStore' }))

 export default useAuthStore
--- a/src/stores/SnippetStore.js
+++ b/src/stores/SnippetStore.js
@ -11,6 +11,13 @@ const useSnippetStore = create(devtools((set, get) => ({
  typeAllList: [],
  snippetList: [],
  drawerOpen: false,
+  currentSnippet: {
+    snippetId: 0,
+    title: '',
+    owner: '',
+    category: '',
+    content: {html: ''}
+  },

  openDrawer: () => {
    set(() => ({
@ -25,7 +32,7 @@ const useSnippetStore = create(devtools((set, get) => ({
  },

  fetchParamList: async () => {
-    const fetchOwnerUrl = `${API_HOST}/v2/GetAutoDocParameters`
+    const fetchOwnerUrl = `${API_HOST}/GetAutoDocParameters`
    const params = {};

    return fetchJSON(fetchOwnerUrl, params)
@ -50,7 +57,7 @@ const useSnippetStore = create(devtools((set, get) => ({
  },

  fetchSnippetList: async (formValues) => {
-    const fetchSnippetListUrl = `${API_HOST}/v2/QueryAutoDocInfo`
+    const fetchSnippetListUrl = `${API_HOST}/QueryAutoDocInfo`

    return fetchJSON(fetchSnippetListUrl, formValues)
      .then(json => {
@ -64,15 +71,25 @@ const useSnippetStore = create(devtools((set, get) => ({
      })
  },

-  fetchSnippetDetail: async (snippetId) => {
-    const fetchSnippetDetailUrl = `${API_HOST}/v2/GetAutoDocInfoDetail`
-    const params = {adi_sn: snippetId};
+  fetchSnippetDetail: async (snippet) => {
+    const fetchSnippetDetailUrl = `${API_HOST}/GetAutoDocInfoDetail`
+    const params = {adi_sn: snippet.adi_sn};

    return fetchJSON(fetchSnippetDetailUrl, params)
      .then(json => {
        if (json.errcode === 0 && json?.result.length > 0) {
-          console.info(json)
-          return json?.result[0].adi_content
+          const detail = json?.result[0]
+          const content = detail.adi_content
+          set(() => ({
+            currentSnippet: {
+              snippetId: snippet.adi_sn,
+              title: snippet.adi_title,
+              owner: snippet.adi_owner,
+              category: snippet.adi_type,
+              content: { html: detail.adi_content}
+            }
+          }))
+          return content
        } else {
          throw new Error(json?.errmsg + ': ' + json.errcode)
        }
@ -80,10 +97,10 @@ const useSnippetStore = create(devtools((set, get) => ({
  },

  saveOrUpdateSnippet: async (formValues) => {
-    const postSnippetUrl = `${API_HOST}/v2/AddAutoDocInfo`
+    const postSnippetUrl = `${API_HOST}/AddAutoDocInfo`
    const formData = new FormData()
    formData.append('adi_sn', formValues.snippetId)
-    formData.append('owner', 383)
+    formData.append('owner', formValues.owner)
    formData.append('type', formValues.category)
    formData.append('title', formValues.title)
    formData.append('adi_content', formValues.content.html)
@ -92,7 +109,15 @@ const useSnippetStore = create(devtools((set, get) => ({
    return postForm(postSnippetUrl, formData)
      .then(json => {
        if (json.errcode === 0) {
-          console.info(json)
+          set(() => ({
+            currentSnippet: {
+              snippetId: formValues.snippetId,
+              title: formValues.title,
+              owner: formValues.owner,
+              category: formValues.category,
+              content: formValues.content
+            }
+          }))
        } else {
          throw new Error(json?.errmsg + ': ' + json.errcode)
        }
--- a/src/views/accounts/Profile.jsx
+++ b/src/views/accounts/Profile.jsx
@ -7,7 +7,6 @@ function Profile() {
  const [loginUser, setWhatsAppBusiness] = useAuthStore((state) => [state.loginUser, state.setWhatsAppBusiness])

  useEffect(() => {
-    console.info(loginUser)
    // 测试错误捕获：
    // throw new Error('💥 CABOOM 💥')
    // eslint-disable-next-line react-hooks/exhaustive-deps
--- a/src/views/accounts/SnippetList.jsx
+++ b/src/views/accounts/SnippetList.jsx
@ -17,7 +17,7 @@ import { useState, useRef, useEffect } from 'react'
 import LexicalEditorInput from './LexicalEditorInput'
 import HtmlPreview from './HtmlPreview'
 import useSnippetStore from '@/stores/SnippetStore'
-import LexicalEditor from '@/components/LexicalEditor'
+import useAuthStore from '@/stores/AuthStore'
 import { isEmpty, isNotEmpty } from '@/utils/commons'

 function SnippetList() {
@ -35,6 +35,7 @@ function SnippetList() {
    fetchSnippetList,
    snippetList,
    fetchSnippetDetail,
+    currentSnippet,
    saveOrUpdateSnippet
  ] = useSnippetStore((state) => [
    state.fetchParamList,
@ -44,22 +45,22 @@ function SnippetList() {
    state.fetchSnippetList,
    state.snippetList,
    state.fetchSnippetDetail,
+    state.currentSnippet,
    state.saveOrUpdateSnippet
  ])

+  const [loginUser] = useAuthStore((state) => [state.loginUser])
+
  const [isSnippetModalOpen, setSnippetModalOpen] = useState(false)
-  const [editorContent, setEditorContent] = useState('')
  const [isHtmlLoading, setHtmlLoading] = useState(false)

  const onSnippetFinish = (values) => {
    console.log('onSnippetFinish:', values)
    saveOrUpdateSnippet(values)
-    // console.info(JSON.stringify(editorRef.current.getEditorState()))
  }

  const onSnippetFailed = (error) => {
    console.log('Failed:', error)
-    // form.resetFields()
  }

  const handleSearchFinish = (values) => {
@ -67,15 +68,17 @@ function SnippetList() {
    fetchSnippetList(values)
  }

-  const handleSnippetSelected = (snippetId) => {
+  const handleSnippetSelected = (snippet) => {
    setHtmlLoading(true)
-    fetchSnippetDetail(snippetId)
-      .then((content) => {
-        setEditorContent(content)
-      })
+    fetchSnippetDetail(snippet)
      .finally(() => setHtmlLoading(false))
  }

+  const handelSnippetEdit = () => {
+    snippetForm.setFieldsValue(currentSnippet)
+    setSnippetModalOpen(true)
+  }
+
  useEffect(() => {
    fetchParamList()
  }, [])
@ -115,18 +118,31 @@ function SnippetList() {
          rules={[
            {
              required: true,
-              message: 'title required',
+              message: '标题必填',
            },
          ]}>
          <Input />
        </Form.Item>
+        <Form.Item label='所有者' name='owner'
+          rules={[
+            {
+              required: true,
+              message: '所有者必选',
+            },
+          ]}>
+            <Select
+              options={ownerList}
+              showSearch
+              optionFilterProp='label'
+              notFoundContent={'找不到'}></Select>
+          </Form.Item>
        <Form.Item
          label='类型'
          name='category'
          rules={[
            {
              required: true,
-              message: 'title required',
+              message: '类型必选',
            },
          ]}>
          <Select options={typeList}>
@ -138,7 +154,7 @@ function SnippetList() {
          rules={[
            {
              required: true,
-              message: 'content required',
+              message: '内容必填',
            },
          ]}>
          <LexicalEditorInput />
@ -151,7 +167,7 @@ function SnippetList() {
          form={searchform}
          onFinish={handleSearchFinish}
          initialValues={{
-            owner: '', // 默认登录登账号
+            owner: loginUser.userId + '/2', // 默认是登录账号
            type: '',
          }}>
          <Form.Item label='所有者' name='owner'>
@ -188,16 +204,16 @@ function SnippetList() {
            <List
              bordered
              dataSource={snippetList}
-              renderItem={(item) => (
+              renderItem={(snippet) => (
                <List.Item
                  className='hover:bg-stone-50'
                  onClick={() => {
-                    handleSnippetSelected(item.adi_sn)
+                    handleSnippetSelected(snippet)
                  }}>
                  <Row gutter={16} className='w-full'>
-                    <Col span={20}>{item.adi_title}</Col>
+                    <Col span={20}>{snippet.adi_title}</Col>
                    <Col span={4}>
-                      <Tag color='blue'>{item.adi_type_name}</Tag>
+                      <Tag color='blue'>{snippet.adi_type_name}</Tag>
                    </Col>
                  </Row>
                </List.Item>
@ -205,8 +221,8 @@ function SnippetList() {
            />
          </Col>
          <Col span={16}>
-            <HtmlPreview value={editorContent} loading={isHtmlLoading}
-              onEdit={() => console.info('onEdit')}
+            <HtmlPreview value={currentSnippet.content.html} loading={isHtmlLoading}
+              onEdit={() => handelSnippetEdit()}
              onCopied={() => messageApi.success('已复制')}
              onDelete={() => console.info('onDelete')} />
          </Col>