回收站/藏品附件-静态

src/components/MyPopconfirm.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { Button, Popconfirm } from 'antd'
 
 type Props = {
-  txtK: '删除' | '取消' | '重置密码' | '退出登录' | '清空' | '撤回'
+  txtK: '删除' | '取消' | '重置密码' | '退出登录' | '清空' | '撤回' | '恢复'
   onConfirm: () => void
   Dom?: React.ReactNode
   loc?: 'bottom'
@@ -16,7 +16,8 @@ function MyPopconfirm({ txtK, onConfirm, Dom, loc }: Props) {
       重置密码: ['密码重制后为Aa147852，是否重置?', '重置'],
       退出登录: ['确定退出吗?', '确定'],
       清空: ['确定清空吗?', '确定'],
-      撤回: ['确定撤回吗?', '确定']
+      撤回: ['确定撤回吗?', '确定'],
+      恢复: ['确定恢复吗?', '确定']
     }
     return Reflect.get(obj, txtK) || ['', '']
   }, [txtK])
@@ -32,7 +33,7 @@ function MyPopconfirm({ txtK, onConfirm, Dom, loc }: Props) {
     >
       {Dom ? (
         Dom
-      ) : txtK === '删除' ? (
+      ) : ['删除', '恢复'].includes(txtK) ? (
         <Button size='small' type='text' danger>
           {txtK}
         </Button>

src/pages/C_goodsManage/C1ledger/index.tsx

@@ -75,7 +75,6 @@ function C1ledger() {
   // 待完善 各种参数 接口
 
   const tableLastBtn = useMemo(() => {
-    //   看状态和账号角色显示按钮 待完善
     return [
       {
         title: '操作',
@@ -209,9 +208,7 @@ function C1ledger() {
                 查询
               </Button>
               &emsp;
-              <Button type='primary' onClick={resetSelectFu}>
-                重置
-              </Button>
+              <Button onClick={resetSelectFu}>重置</Button>
             </>
           )}
         </div>

src/pages/C_goodsManage/C2files/data.ts

@@ -0,0 +1,27 @@
+import { C2InputKeyType, TypeC2Form } from './type'
+
+export const C2baseFormData: TypeC2Form = {
+  aaaa: '',
+  bbbb: '',
+  cccc: '',
+  dddd: '',
+  eeee: '',
+  startTime: '',
+  endTime: '',
+  ffff: '',
+  pageNum: 1,
+  pageSize: 10
+}
+
+export const C2InputKeyArr: {
+  name: string
+  key: C2InputKeyType
+  type: '输入框' | '下拉框' | '级联'
+}[] = [
+  { name: '藏品总登记号', key: 'aaaa', type: '下拉框' },
+  { name: '藏品编号', key: 'bbbb', type: '输入框' },
+  { name: '藏品名称', key: 'cccc', type: '输入框' },
+  { name: '附件名称', key: 'dddd', type: '输入框' },
+  { name: '用途', key: 'dddd', type: '级联' },
+  { name: '上传人', key: 'dddd', type: '输入框' }
+]

src/pages/C_goodsManage/C2files/index.module.scss

@@ -1,4 +1,46 @@
 .C2files {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px 24px 0;
   :global {
+    .C2top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 28px;
+      .C2topll {
+        display: flex;
+        & > div {
+          position: relative;
+          margin-right: 15px;
+          display: flex;
+          align-items: center;
+          position: relative;
+          & > span {
+            position: absolute;
+            top: -18px;
+            left: 0;
+            pointer-events: none;
+          }
+          .ant-select {
+            width: 150px;
+          }
+          .ant-input {
+            width: 150px;
+          }
+        }
+        .ant-btn {
+          margin-right: 15px;
+        }
+      }
+    }
+    .C2top2 {
+      margin-bottom: 15px;
+    }
+    .ant-select-selection-placeholder {
+      color: black !important;
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/C_goodsManage/C2files/index.tsx

@@ -1,10 +1,287 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { Y33BtnArr } from '@/pages/Y_goodsDetails/Y1cathet/data'
+import { Button, Cascader, Checkbox, DatePicker, Input, Select } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import Y33setType from '@/pages/Y_goodsDetails/Y2look/Y33setType'
+import { C2baseFormData, C2InputKeyArr } from './data'
+import { C2InputKeyType } from './type'
+import dayjs from 'dayjs'
+import MyTable from '@/components/MyTable'
+import ImageLazy from '@/components/ImageLazy'
+import YtableVideo from '@/components/YtableVideo'
+import { C2tableC } from '@/utils/tableData'
+const { RangePicker } = DatePicker
+
 function C2files() {
+  const [formData, setFormData] = useState(C2baseFormData)
+  const formDataRef = useRef(C2baseFormData)
+
+  useEffect(() => {
+    formDataRef.current = formData
+  }, [formData])
+
+  const [btnAc, setBtnAc] = useState('全部')
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(0)
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setFormData({ ...formData, pageNum: 1 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [formData])
+
+  // 时间选择器改变
+  const timeChange = useCallback(
+    (date: any, dateString: any) => {
+      let startTime = ''
+      let endTime = ''
+      if (dateString[0] && dateString[1]) {
+        startTime = dateString[0] + ' 00:00:00'
+        endTime = dateString[1] + ' 23:59:59'
+      }
+      setFormData({ ...formData, startTime, endTime })
+    },
+    [formData]
+  )
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(() => {
+    console.log('发送请求', { ...formDataRef.current, type: btnAc })
+  }, [btnAc])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu, timeKey])
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: C2InputKeyType) => {
+      setFormData({
+        ...formData,
+        [key]: txt
+      })
+    },
+    [formData]
+  )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setFormData(C2baseFormData)
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [])
+
+  // 页码变化
+  const paginationChange = useCallback(
+    (pageNum: number, pageSize: number) => {
+      setFormData({ ...formData, pageNum, pageSize })
+      setTimeout(() => {
+        setTimeKey(Date.now())
+      }, 50)
+    },
+    [formData]
+  )
+
+  // 多选
+  const [checkArr, setCheckArr] = useState<number[]>([])
+
+  const checkFu = useCallback(
+    (id: number) => {
+      if (checkArr.includes(id)) setCheckArr(checkArr.filter(v => v !== id))
+      else setCheckArr([...checkArr, id])
+    },
+    [checkArr]
+  )
+
+  // 批量和单个设置
+  const [typeMo, setTypeMo] = useState({ leiXin: '', yongTu: '', flag: '', show: false })
+
+  const startBtn = useMemo(() => {
+    let arr: any = [
+      {
+        title: '选择',
+        width: 50,
+        render: (item: any) => (
+          <Checkbox checked={checkArr.includes(item.id)} onChange={() => checkFu(item.id)} />
+        )
+      }
+    ]
+
+    if (['全部', '图像', '视频'].includes(btnAc))
+      arr.push({
+        title: '缩略图/视频',
+        render: (item: any) => {
+          return item.type === '图像' ? (
+            <div className='tableImgAuto'>
+              <ImageLazy width={60} height={60} srcBig={item.src} src={item.src} offline={true} />
+            </div>
+          ) : item.type === '视频' ? (
+            <YtableVideo item={item} />
+          ) : (
+            ' - '
+          )
+        }
+      })
+
+    return arr
+  }, [btnAc, checkArr, checkFu])
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: any) => {
+          return (
+            <>
+              <Button size='small' type='text'>
+                <a href={item.src} download target='_blank' rel='noreferrer'>
+                  下载
+                </a>
+              </Button>
+              <>
+                <Button
+                  size='small'
+                  type='text'
+                  onClick={() =>
+                    setTypeMo({
+                      leiXin: item.type,
+                      yongTu: '',
+                      flag: '单个',
+                      show: true
+                    })
+                  }
+                >
+                  设置
+                </Button>
+                <MyPopconfirm txtK='删除' onConfirm={() => {}} />
+              </>
+            </>
+          )
+        }
+      }
+    ]
+  }, [])
+
   return (
     <div className={styles.C2files}>
       <div className='pageTitle'>藏品附件</div>
-      <p>待开发</p>
+
+      {/* 第一行 */}
+      <div className='C2top'>
+        <div className='C2topll'>
+          {Y33BtnArr.map(v => (
+            <Button
+              key={v.name}
+              onClick={() => setBtnAc(v.name)}
+              type={btnAc === v.name ? 'primary' : 'default'}
+            >
+              {v.name}
+            </Button>
+          ))}
+        </div>
+
+        <div className='C2toprr'>
+          <Button type='primary' disabled={checkArr.length === 0}>
+            批量下载
+          </Button>
+          &emsp;
+          <Button
+            type='primary'
+            disabled={checkArr.length === 0}
+            onClick={() =>
+              setTypeMo({
+                leiXin: '',
+                yongTu: '',
+                flag: '批量',
+                show: true
+              })
+            }
+          >
+            批量设置
+          </Button>
+          &emsp;
+          <Button type='primary' onClick={clickSearch}>
+            查询
+          </Button>
+          &emsp;
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+      </div>
+
+      {/* 第二行 */}
+      <div className='C2top C2top2'>
+        <div className='C2topll'>
+          {C2InputKeyArr.map(item => (
+            <div key={item.name}>
+              <span>{item.name}：</span>
+
+              {item.type === '下拉框' ? <Select placeholder='全部' /> : null}
+              {item.type === '输入框' ? (
+                <Input
+                  placeholder='请输入'
+                  maxLength={30}
+                  value={formData[item.key]}
+                  onChange={e => txtChangeFu(e.target.value, item.key)}
+                />
+              ) : null}
+
+              {item.type === '级联' ? (
+                <Cascader
+                  changeOnSelect
+                  options={[]}
+                  placeholder='全部'
+                  // fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+                  allowClear={false}
+                />
+              ) : null}
+            </div>
+          ))}
+          <div>
+            <span>上传起止日期：</span>
+            <RangePicker
+              value={
+                formData.startTime ? [dayjs(formData.startTime), dayjs(formData.endTime)] : null
+              }
+              onChange={timeChange}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 表格 */}
+      <MyTable
+        yHeight={600}
+        list={[
+          {
+            id: 1,
+            type: '图像',
+            src: 'https://houseoss.4dkankan.com/project/DEMO/staticResource/touxiang.jpg'
+          },
+          {
+            id: 2,
+            type: '视频',
+            src: 'https://houseoss.4dkankan.com/project/DEMO/staticResource/loop.mp4'
+          },
+          {
+            id: 3,
+            type: '3D'
+          }
+        ]}
+        columnsTemp={C2tableC}
+        lastBtn={tableLastBtn}
+        startBtn={startBtn}
+        pageNum={formData.pageNum}
+        pageSize={formData.pageSize}
+        total={0}
+        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+      />
+
+      {typeMo.show ? <Y33setType info={typeMo} closeFu={() => setTypeMo({} as any)} /> : null}
     </div>
   )
 }

src/pages/C_goodsManage/C2files/type.d.ts

@@ -0,0 +1,14 @@
+export type TypeC2Form = {
+  aaaa: string
+  bbbb: string
+  cccc: string
+  dddd: string
+  eeee: string
+  startTime: string
+  endTime: string
+  ffff: string
+  pageNum: number
+  pageSize: number
+}
+
+export type C2InputKeyType = keyof TypeC2Form

src/pages/C_goodsManage/C8recycleBin/data.ts

@@ -0,0 +1,16 @@
+import { C1baseFormData1 } from '../C1ledger/data'
+import { TYpeC1Form1 } from '../C1ledger/type'
+
+export interface TYpeC8Form extends TYpeC1Form1 {
+  pageSize: number
+  pageNum: number
+}
+
+export type C8InputKeyType = keyof TYpeC8Form
+
+export const C8baseFormData: TYpeC8Form = {
+  pageNum: 1,
+  pageSize: 10,
+
+  ...C1baseFormData1
+}

src/pages/C_goodsManage/C8recycleBin/index.module.scss

@@ -1,4 +1,45 @@
 .C8recycleBin {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 24px 24px 0;
   :global {
+    .C8top {
+      display: flex;
+      justify-content: space-between;
+      .C8topll {
+        width: calc(100% - 150px);
+        display: flex;
+        flex-wrap: wrap;
+        & > div {
+          margin-bottom: 24px;
+          position: relative;
+          margin-right: 15px;
+          display: flex;
+          align-items: center;
+          position: relative;
+          & > span {
+            position: absolute;
+            top: -18px;
+            left: 0;
+            pointer-events: none;
+          }
+          .ant-select {
+            width: 150px;
+          }
+          .ant-input {
+            width: 150px;
+          }
+        }
+      }
+      .C8toprr {
+        width: 150px;
+      }
+    }
+    .ant-select-selection-placeholder {
+      color: black !important;
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/C_goodsManage/C8recycleBin/index.tsx

@@ -1,10 +1,170 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { C1InputKeyArr1 } from '../C1ledger/data'
+import { Button, Cascader, Input, Select } from 'antd'
+import { C8baseFormData } from './data'
+import { openGoodsInfoFu } from '@/utils/history'
+import classNames from 'classnames'
+import { C1InputKeyType } from '../C1ledger/type'
+import MyTable from '@/components/MyTable'
+import { C1tableC } from '@/utils/tableData'
+import Y1cathet from '@/pages/Y_goodsDetails/Y1cathet'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
 function C8recycleBin() {
+  const [formData, setFormData] = useState(C8baseFormData)
+  const formDataRef = useRef(C8baseFormData)
+  useEffect(() => {
+    formDataRef.current = formData
+  }, [formData])
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(0)
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setFormData({ ...formData, pageNum: 1 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [formData])
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(() => {
+    console.log('发送请求', formDataRef.current)
+  }, [])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu, timeKey])
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: C1InputKeyType) => {
+      setFormData({
+        ...formData,
+        [key]: txt
+      })
+    },
+    [formData]
+  )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setFormData(C8baseFormData)
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [])
+
+  // 页码变化
+  const paginationChange = useCallback(
+    (pageNum: number, pageSize: number) => {
+      setFormData({ ...formData, pageNum, pageSize })
+      setTimeout(() => {
+        setTimeKey(Date.now())
+      }, 50)
+    },
+    [formData]
+  )
+  // 待完善 各种参数 接口
+
+  const regainFu = useCallback((id: number) => {}, [])
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: any) => {
+          return (
+            <>
+              <Button size='small' type='text' onClick={() => openGoodsInfoFu(item.id)}>
+                查看
+              </Button>
+              <MyPopconfirm txtK='恢复' onConfirm={() => regainFu(item.id)} />
+            </>
+          )
+        }
+      }
+    ]
+  }, [regainFu])
+
+  // 打开侧边栏
+  const [cathet, setCathet] = useState(0)
+
+  const startBtn = useMemo(() => {
+    return [
+      {
+        title: '藏品编号',
+        render: (item: any) => {
+          return (
+            <span
+              onClick={() => setCathet(item.id)}
+              className={classNames('D1GtNum', item.id === cathet ? 'D1GtNumAc' : '')}
+            >
+              {item.num}
+            </span>
+          )
+        }
+      }
+    ]
+  }, [cathet])
+
   return (
     <div className={styles.C8recycleBin}>
       <div className='pageTitle'>回收站</div>
-      <p>待开发</p>
+      <div className='C8top'>
+        <div className='C8topll'>
+          {C1InputKeyArr1.map(item => (
+            <div key={item.name}>
+              <span>{item.name}：</span>
+
+              {item.type === '下拉框' ? <Select placeholder='全部' /> : null}
+              {item.type === '输入框' ? (
+                <Input
+                  placeholder='请输入'
+                  maxLength={30}
+                  value={formData[item.key as 'aaaa']}
+                  onChange={e => txtChangeFu(e.target.value, item.key)}
+                />
+              ) : null}
+
+              {item.type === '级联' ? (
+                <Cascader
+                  changeOnSelect
+                  options={[]}
+                  placeholder='全部'
+                  // fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+                  allowClear={false}
+                />
+              ) : null}
+            </div>
+          ))}
+        </div>
+        <div className='C8toprr'>
+          <Button type='primary' onClick={clickSearch}>
+            查询
+          </Button>
+          &emsp;
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+      </div>
+
+      {/* 表格 */}
+      <MyTable
+        yHeight={586}
+        list={[{ id: 66, thumb: '', num: 'xxx' }]}
+        columnsTemp={[...C1tableC, ['txt', '删除日期', 'xxxx']]}
+        lastBtn={tableLastBtn}
+        startBtn={startBtn}
+        pageNum={formData.pageNum}
+        pageSize={formData.pageSize}
+        total={0}
+        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+      />
+
+      {/* 打开侧边栏 */}
+      <Y1cathet sId={cathet} closeFu={() => setCathet(0)} />
     </div>
   )
 }

src/pages/Layout/data.ts

@@ -68,7 +68,7 @@ const tabLeftArr: RouterType = [
       },
       {
         id: 320,
-        name: '藏品附件222',
+        name: '藏品附件',
         path: '/files',
         Com: React.lazy(() => import('../C_goodsManage/C2files'))
       },
@@ -104,7 +104,7 @@ const tabLeftArr: RouterType = [
       },
       {
         id: 380,
-        name: '回收站111',
+        name: '回收站',
         path: '/recycleBin',
         Com: React.lazy(() => import('../C_goodsManage/C8recycleBin'))
       }

src/utils/tableData.ts

@@ -76,6 +76,18 @@ export const C1tableC = [
 ]
 
 // 待完善
+export const C2tableC = [
+  ['txt', '附件类型', 'type'],
+  ['txt', '用途', 'description'],
+  ['txt', '藏品名称', 'description'],
+  ['txt', '总登记号', 'description'],
+  ['txt', '附件名称', 'description'],
+  ['txt', '上传日期', 'description'],
+  ['txt', '上传人', 'description'],
+  ['txt', '文件大小', 'description']
+]
+
+// 待完善
 export const D1tableC = [
   ['txt', '区域名称', 'name1'],
   ['txt', '排架', 'userName'],