虚拟场景管理

src/pages/B2line/index.tsx

@@ -61,6 +61,7 @@ function B2line() {
 
   // 新增/编辑
   const [editInfo, setEditInfo] = useState({} as B1ListType)
+
   return (
     <div className={styles.B2line}>
       <div className='pageTitle'>线路管理</div>

src/pages/B3scene/B3add/index.module.scss

@@ -0,0 +1,52 @@
+.B3add {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 800px !important;
+    }
+    .B3Amain {
+      border-top: 1px solid #ccc;
+      padding-top: 20px;
+
+      .ant-form-item-label {
+        width: 81px;
+      }
+
+      .formRow {
+        display: flex;
+
+        .formLeft {
+          position: relative;
+          top: 3px;
+          width: 81px;
+          text-align: right;
+
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+
+        .formRight {
+          width: calc(100% - 81px);
+        }
+      }
+      .A3fromRow {
+        position: relative;
+
+        .A3_6Frow {
+          position: absolute;
+          left: 185px;
+          top: 5px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .B3Abtn {
+        margin-top: 40px;
+        padding-left: 80px;
+      }
+    }
+  }
+}

src/pages/B3scene/B3add/index.tsx

@@ -0,0 +1,174 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { B1ListType } from '@/pages/B1panorama/data'
+import { Button, Form, FormInstance, Input, InputNumber, Modal, Select } from 'antd'
+import { MessageFu } from '@/utils/message'
+import { B1_APIsave } from '@/store/action/B1panorama'
+import { B3Select } from '../data'
+import ZupOne from '@/components/ZupOne'
+import TextArea from 'antd/es/input/TextArea'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+type Props = {
+  info: B1ListType
+  closeFu: () => void
+  addTableFu: () => void
+  upTableFu: (type: string) => void
+}
+
+function B3add({ info, closeFu, addTableFu, upTableFu }: Props) {
+  const getInfoFu = useCallback((info: B1ListType) => {
+    FormBoxRef.current?.setFieldsValue(info)
+    // 设置封面图
+    ZupThumbRef.current?.setFileComFileFu({
+      fileName: '',
+      filePath: info.thumbPc,
+      thumb: info.thumb
+    })
+  }, [])
+
+  useEffect(() => {
+    if (info.id > 0) getInfoFu(info)
+    else FormBoxRef.current?.setFieldsValue({ sort: 999 })
+  }, [getInfoFu, info])
+
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 封面图的ref
+  const ZupThumbRef = useRef<any>(null)
+
+  // 附件 是否 已经点击过确定
+  const [fileCheck, setFileCheck] = useState(false)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setFileCheck(true)
+  }, [])
+
+  //  通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      setFileCheck(true)
+
+      const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
+      // 没有传 封面图
+      if (!coverUrl1.filePath) return MessageFu.warning('请上传封面')
+
+      const obj = {
+        ...values,
+        id: info.id > 0 ? info.id : null,
+        thumb: coverUrl1.thumb || '',
+        thumbPc: coverUrl1.filePath || '',
+        module: 'scene'
+      }
+
+      // if (1 + 1 === 2) {
+      //   console.log('------222', obj)
+      //   return
+      // }
+
+      const res = await B1_APIsave(obj)
+
+      if (res.code === 0) {
+        MessageFu.success(`${info.id > 0 ? '编辑' : '新增'}成功`)
+        info.id > 0 ? upTableFu(values.type) : addTableFu()
+
+        closeFu()
+      }
+    },
+    [addTableFu, closeFu, info.id, upTableFu]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.B3add}
+      open={true}
+      title={info.id > 0 ? '编辑' : '新增'}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='B3Amain'>
+        <Form
+          ref={FormBoxRef}
+          name='basic'
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+          scrollToFirstError
+        >
+          <Form.Item
+            label='标题'
+            getValueFromEvent={e => e.target.value.trim()}
+            name='name'
+            rules={[{ required: true, message: '请输入标题' }]}
+          >
+            <Input maxLength={20} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <Form.Item label='板块' name='type' rules={[{ required: true, message: '请选择板块' }]}>
+            <Select style={{ width: 300 }} options={B3Select} placeholder='请选择' />
+          </Form.Item>
+
+          {/* 封面 */}
+          <div className='formRow'>
+            <div className='formLeft'>
+              <span>* </span>
+              封面：
+            </div>
+            <div className='formRight'>
+              <ZupOne
+                ref={ZupThumbRef}
+                isLook={false}
+                fileCheck={fileCheck}
+                size={5}
+                dirCode='B1panorama'
+                myUrl='cms/content/upload'
+                format={['image/jpeg', 'image/png']}
+                formatTxt='png、jpg和jpeg'
+                checkTxt='请上传封面'
+                upTxt='最多1张；建议尺寸：500 X 240'
+                myType='thumb'
+              />
+            </div>
+          </div>
+
+          <Form.Item
+            label='全景链接'
+            name='link'
+            rules={[{ required: true, message: '请输入内容' }]}
+          >
+            <TextArea maxLength={200} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='A3fromRow'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              rules={[{ required: true, message: '请输入排序值' }]}
+            >
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
+            </Form.Item>
+            <div className='A3_6Frow'>
+              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <Form.Item className='B3Abtn'>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoB3add = React.memo(B3add)
+
+export default MemoB3add

src/pages/B3scene/data.ts

@@ -0,0 +1,10 @@
+export const B3Select = [
+  {
+    value: '精准扶贫主题陈列展览',
+    label: '精准扶贫主题陈列展览'
+  },
+  {
+    value: '铸牢中华民族体意识研究与教育基地',
+    label: '铸牢中华民族体意识研究与教育基地'
+  }
+]

src/pages/B3scene/index.module.scss

@@ -1,4 +1,22 @@
 .B3scene {
   :global {
+    .B3top {
+      border-radius: 10px;
+      padding: 15px 24px;
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+      .ant-select-selection-placeholder {
+        color: black;
+      }
+    }
+
+    .tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: #fff;
+    }
   }
 }

src/pages/B3scene/index.tsx

@@ -1,9 +1,113 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import { useDispatch, useSelector } from 'react-redux'
+import { B1baseFromData, B1ListType } from '../B1panorama/data'
+import { B1_APIdel, B1_APIgetList } from '@/store/action/B1panorama'
+import { RootState } from '@/store'
+import { MessageFu } from '@/utils/message'
+import { Button, Select } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { B3Select } from './data'
+import MyTable from '@/components/MyTable'
+import { B3tableC } from '@/utils/tableData'
+import B3add from './B3add'
 function B3scene() {
+  const dispatch = useDispatch()
+
+  // 顶部筛选
+  const [fromData, setFromData] = useState(B1baseFromData)
+
+  // 封装发送请求的函数
+  const getList = useCallback(async () => {
+    dispatch(B1_APIgetList(fromData, 'scene'))
+  }, [dispatch, fromData])
+
+  useEffect(() => {
+    getList()
+  }, [getList])
+
+  // 从仓库中获取表格数据
+  const tableInfo = useSelector((state: RootState) => state.B1panorama.tableInfo.scene)
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await B1_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getList()
+      }
+    },
+    [getList]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: B1ListType) => {
+          return (
+            <>
+              <Button size='small' type='text' onClick={() => setEditInfo(item)}>
+                编辑
+              </Button>
+              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+            </>
+          )
+        }
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增/编辑
+  const [editInfo, setEditInfo] = useState({} as B1ListType)
+
   return (
     <div className={styles.B3scene}>
-      <h1>B3scene</h1>
+      <div className='pageTitle'>虚拟场景管理</div>
+      <div className='B3top'>
+        <div>
+          <span>板块：</span>
+          <Select
+            style={{ width: 300 }}
+            allowClear
+            placeholder='全部'
+            value={fromData.type || undefined}
+            onChange={e => setFromData({ ...fromData, pageNum: 1, type: e })}
+            options={B3Select}
+          />
+        </div>
+
+        <div>
+          <Button type='primary' onClick={() => setEditInfo({ id: -1 } as B1ListType)}>
+            新增
+          </Button>
+        </div>
+      </div>
+      {/* 表格主体 */}
+      <div className='tableBox'>
+        <MyTable
+          widthSet={{ content: 800 }}
+          yHeight={617}
+          list={tableInfo.list}
+          columnsTemp={B3tableC}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+        />
+      </div>
+      {editInfo.id ? (
+        <B3add
+          info={editInfo}
+          closeFu={() => setEditInfo({} as B1ListType)}
+          addTableFu={() => setFromData({ ...B1baseFromData })}
+          upTableFu={type => {
+            type === fromData.type ? getList() : setFromData({ ...B1baseFromData })
+          }}
+        />
+      ) : null}
     </div>
   )
 }

src/utils/tableData.ts

@@ -42,6 +42,13 @@ export const B2tableC = [
   ['txt', '排序值', 'sort']
 ]
 
+export const B3tableC = [
+  ['txt', '板块', 'type'],
+  ['txt', '名称', 'name'],
+  ['img', '图片', 'thumb'],
+  ['txt', '排序值', 'sort']
+]
+
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],
   ['txtChange', '角色', 'isAdmin', { 1: '管理员', 0: '普通成员' }],