upp

后台管理/src/assets/styles/base.css

@@ -211,3 +211,16 @@ textarea {
 .ant-image-preview-operations-wrapper {
   z-index: 10002 !important;
 }
+.bf-controlbar .link-editor-dropdown,
+.bf-controlbar .bf-emoji-dropdown {
+  display: none !important;
+}
+.bf-controlbar .button[data-title='无序列表'] {
+  display: none !important;
+}
+.bf-controlbar .button[data-title='有序列表'] {
+  display: none !important;
+}
+.bf-controlbar .button[data-title='清除链接'] {
+  display: none !important;
+}

后台管理/src/assets/styles/base.less

@@ -281,3 +281,20 @@ textarea {
 //     right: 0;
 //   }
 // }
+
+// 富文本隐藏表情
+.bf-controlbar {
+  .link-editor-dropdown,
+  .bf-emoji-dropdown {
+    display: none !important;
+  }
+  .button[data-title='无序列表'] {
+    display: none !important;
+  }
+  .button[data-title='有序列表'] {
+    display: none !important;
+  }
+  .button[data-title='清除链接'] {
+    display: none !important;
+  }
+}

后台管理/src/pages/A4screen/A4look/index.module.scss

@@ -10,6 +10,7 @@
   overflow: hidden;
   :global {
     .A4Lmain {
+      overflow: hidden;
       position: absolute;
       top: 50%;
       left: 50%;
@@ -31,7 +32,7 @@
       color: #fff;
       text-align: center;
       .A4Lscale2 {
-        margin-top: 20px;
+        margin: 20px auto 0;
         width: 300px;
         height: 2px;
         background-color: #fff;
@@ -52,10 +53,6 @@
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
-      .A4LmoveImg {
-        width: 20%;
-        height: auto;
-      }
     }
     .A4Lx {
       position: absolute;

后台管理/src/pages/A4screen/A4look/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef, useCallback } from 'react'
+import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react'
 import styles from './index.module.scss'
 import { Button } from 'antd'
 import { baseURL } from '@/utils/http'
@@ -15,21 +15,23 @@ const btnArr = ['短屏侧', '长屏侧']
 
 type Props = {
   html: string
-  closeFu: () => void
+  closeFu: (val: any) => void
   name: string
   url: string
   txtMoveTemp: any
-  setTxtMove: (val: any, key: '1' | '2') => void
 }
 
-function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
+function A4look({ html, closeFu, name, url, txtMoveTemp }: Props) {
   const [cut, setCut] = useState('短屏侧')
 
-  const txtMove = useMemo(() => {
-    let obj = { ...txtMoveTemp['1'] }
-    if (name === '户外裸眼3D' && cut !== '短屏侧') obj = { ...txtMoveTemp['2'] }
-    return obj
-  }, [cut, name, txtMoveTemp])
+  const [txtMove, setTxtMove] = useState({
+    1: { left: 10, top: 10, scale: 5 },
+    2: { left: 10, top: 10, scale: 5 }
+  })
+
+  useEffect(() => {
+    setTxtMove({ ...txtMoveTemp })
+  }, [txtMoveTemp])
 
   const page = useMemo(() => {
     let txt = name
@@ -62,11 +64,11 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
         isDragging: true,
         startX: e.clientX,
         startY: e.clientY,
-        startLeft: txtMove.left,
-        startTop: txtMove.top
+        startLeft: txtMove[cut === '短屏侧' ? '1' : '2'].left,
+        startTop: txtMove[cut === '短屏侧' ? '1' : '2'].top
       }
     },
-    [txtMove.left, txtMove.top]
+    [cut, txtMove]
   )
 
   // 滑块拖动相关
@@ -83,10 +85,10 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
       scaleDragRef.current = {
         isDragging: true,
         startX: e.clientX,
-        startScale: txtMove.scale
+        startScale: txtMove[cut === '短屏侧' ? '1' : '2'].scale
       }
     },
-    [txtMove.scale]
+    [cut, txtMove]
   )
 
   // 全局鼠标移动和抬起事件
@@ -101,7 +103,8 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
         const percentY = (deltaY / page[1]) * 100 * (1 / domSize)
         const newLeft = Math.max(0, Math.min(100, txtDragRef.current.startLeft + percentX))
         const newTop = Math.max(0, Math.min(100, txtDragRef.current.startTop + percentY))
-        setTxtMove({ left: newLeft, top: newTop }, cut === '短屏侧' ? '1' : '2')
+        const key = cut === '短屏侧' ? '1' : '2'
+        setTxtMove(prev => ({ ...prev, [key]: { ...prev[key], left: newLeft, top: newTop } }))
       }
       // 滑块拖动
       if (scaleDragRef.current.isDragging && scaleBarRef.current) {
@@ -112,7 +115,8 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
           1,
           Math.min(100, scaleDragRef.current.startScale + deltaX * percentPerPixel)
         )
-        setTxtMove({ scale: newScale }, cut === '短屏侧' ? '1' : '2')
+        const key = cut === '短屏侧' ? '1' : '2'
+        setTxtMove(prev => ({ ...prev, [key]: { ...prev[key], scale: newScale } }))
       }
     }
 
@@ -145,9 +149,9 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
           className='A4Lmove'
           dangerouslySetInnerHTML={{ __html: html }}
           style={{
-            left: txtMove.left + '%',
-            top: txtMove.top + '%',
-            transform: `scale(${txtMove.scale})`
+            left: txtMove[cut === '短屏侧' ? '1' : '2'].left + '%',
+            top: txtMove[cut === '短屏侧' ? '1' : '2'].top + '%',
+            transform: `scale(${txtMove[cut === '短屏侧' ? '1' : '2'].scale})`
           }}
           onMouseDown={handleTxtMouseDown}
         ></div>
@@ -155,10 +159,10 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
 
       {/* 顶部放大进度条 */}
       <div className='A4Lscale'>
-        <h3>鼠标移入文字，按住可拖动文字移动</h3>
+        <h3>鼠标移入文字，按住可拖动文字移动；鼠标按住下方白色手柄拖动调节文字大小</h3>
         <div className='A4Lscale2' ref={scaleBarRef}>
           <div
-            style={{ left: ((txtMove.scale - 1) / 99) * 100 + '%' }}
+            style={{ left: ((txtMove[cut === '短屏侧' ? '1' : '2'].scale - 1) / 99) * 100 + '%' }}
             onMouseDown={handleScaleMouseDown}
           ></div>
         </div>
@@ -174,7 +178,7 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
         </div>
       ) : null}
 
-      <Button className='A4Lx' onClick={closeFu}>
+      <Button className='A4Lx' onClick={() => closeFu(txtMove)}>
         关闭
       </Button>
     </div>

后台管理/src/pages/A4screen/A4set/index.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { Button, Checkbox, Radio, Table } from 'antd'
+import { Button, Checkbox, Radio, Select, Table } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
-import { API_A4getInfo, API_A4save } from '@/store/action/A4screen'
+import { API_A4getInfo, API_A4save, API_A4setScreen } from '@/store/action/A4screen'
 import { A4RowType } from '../data'
 import UpBtn from '@/utils/UpBtn'
 import { MessageFu } from '@/utils/message'
@@ -104,6 +104,7 @@ function A4set({ id, closeFu }: Props) {
       if (info.rtf) {
         const txtObj = JSON.parse(info.rtf || '{}')
         if (txtObj.html) txtRef.current.ritxtShowFu(txtObj.html)
+        // console.log('-------', txtObj)
 
         // 回显文字位置和大小
         const txtSize = {
@@ -131,15 +132,32 @@ function A4set({ id, closeFu }: Props) {
     [info, videlAc]
   )
 
+  // 长短屏切换
+  const screenChange = useCallback(
+    async (id: number, type: string) => {
+      const res = await API_A4setScreen(id, type)
+      if (res.code === 0) {
+        setInfo({
+          ...info,
+          file: info.file.map(v => ({
+            ...v,
+            subType: v.id === id ? type : v.subType
+          }))
+        })
+      }
+    },
+    [info]
+  )
+
   const tableLastBtn = useMemo(() => {
-    return [
+    const arr: any[] = [
       {
         title: '拖动排序',
         width: 100
       },
       {
         title: '选择',
-        width: 200,
+        width: 100,
         render: (item: any) => {
           const flag = videlAc.includes(item.id)
           return (
@@ -159,26 +177,46 @@ function A4set({ id, closeFu }: Props) {
       {
         title: '文件名称',
         render: (item: any) => item.fileName || '（空）'
-      },
-      {
-        width: 300,
-        title: '操作',
-        render: (item: any) => {
-          return (
-            <>
-              <Button
-                size='small'
-                type='text'
-                onClick={() => downloadFileByUrl(item.filePath, item.fileName)}
-              >
-                下载
-              </Button>
-              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
-            </>
-          )
-        }
       }
     ]
+
+    if (info.name === '户外裸眼3D') {
+      arr.push({
+        width: 200,
+        title: '类型',
+        render: (item: any) => (
+          <Select
+            value={item.subType}
+            onChange={e => screenChange(item.id, e)}
+            options={[
+              { value: '1', label: '短屏侧' },
+              { value: '2', label: '长屏侧' }
+            ]}
+          />
+        )
+      })
+    }
+
+    arr.push({
+      width: 150,
+      title: '操作',
+      render: (item: any) => {
+        return (
+          <>
+            <Button
+              size='small'
+              type='text'
+              onClick={() => downloadFileByUrl(item.filePath, item.fileName)}
+            >
+              下载
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+          </>
+        )
+      }
+    })
+
+    return arr
   }, [delTableFu, videlAc])
 
   // -----------------图文相关----------------------
@@ -205,13 +243,6 @@ function A4set({ id, closeFu }: Props) {
     2: { left: 10, top: 10, scale: 5 }
   })
 
-  const setTxtMoveFu = useCallback(
-    (val: any, key: '1' | '2') => {
-      setTxtMove({ ...txtMove, [key]: { ...txtMove[key], ...val } })
-    },
-    [txtMove]
-  )
-
   // 点击提交
   const btnOk = useCallback(async () => {
     if (info.type === 'video') {
@@ -426,12 +457,16 @@ function A4set({ id, closeFu }: Props) {
       {/* 打开效果预览 */}
       {lookHtml ? (
         <A4look
+          txtMoveTemp={txtMove}
           name={info.name}
           html={lookHtml}
-          closeFu={() => setLookHtml('')}
+          closeFu={val => {
+            // console.log(val)
+
+            setTxtMove(val)
+            setLookHtml('')
+          }}
           url={imgAc.thumbPc}
-          txtMoveTemp={txtMove}
-          setTxtMove={(val, key) => setTxtMoveFu(val, key)}
         />
       ) : null}
     </div>

后台管理/src/store/action/A4screen.ts

@@ -28,3 +28,8 @@ export const API_A4delFile = (ids: number[]) => {
   const data = ids.map(v => v + '')
   return http.post('cms/file/removes', data)
 }
+
+// 投屏管理-附件设置长短屏
+export const API_A4setScreen = (id: number, type: string) => {
+  return http.get(`cms/screen/fileUpdateSubType/${id}/${type}`)
+}