industry / sxjx-h5 · Commits

Commit a9c6fc826447d670116361bc8e694f03377ac351

Authored by 史婷婷
1 parent 40df7784

feat: 生产线明细-批量操作-预览

Inline Side-by-side
Showing 5 changed files with 199 additions and 24 deletions
@@ -30,7 +30,7 @@ export function getProductBook(data: {pro_line: string}) { @@ -30,7 +30,7 @@ export function getProductBook(data: {pro_line: string}) {
30 30
31 /**获取文件预览地址 31 /**获取文件预览地址
32 * **/ 32 * **/
33 -export function getFilePreview(fileId: string) { 33 +export function getFilePreview(fileId?: string) {
34 return get( 34 return get(
35 `/open/qgyun-service-fs-manager/file/p/origin/${fileId}`, 35 `/open/qgyun-service-fs-manager/file/p/origin/${fileId}`,
36 { 36 {
@@ -159,7 +159,7 @@ button:focus-visible { @@ -159,7 +159,7 @@ button:focus-visible {
159 159
160 .sxjx-content-main { 160 .sxjx-content-main {
161 background: #f7f7f7; 161 background: #f7f7f7;
162 - height: 100vh; 162 + min-height: 100vh;
163 width: 100vw; 163 width: 100vw;
164 box-sizing: border-box; 164 box-sizing: border-box;
165 } 165 }
1 import React, {useEffect, useState} from 'react' 1 import React, {useEffect, useState} from 'react'
2 import './style.less' 2 import './style.less'
3 import NavBar from '@/components/nav-bar' 3 import NavBar from '@/components/nav-bar'
4 -import {baseColorPrimary} from "@/utils/common";  
5 -import {hexToRgba} from "@/utils/utils";  
6 import _mp4 from './mp4.png'; 4 import _mp4 from './mp4.png';
7 import _pdf from './pdf.png'; 5 import _pdf from './pdf.png';
  6 +import _preview from './preview.png';
8 7
9 import {useSearchParams} from "react-router-dom"; 8 import {useSearchParams} from "react-router-dom";
10 -import {getProductBook} from "@/api/apiConfig";  
11 -import {SpinLoading} from 'antd-mobile' 9 +import {getFilePreview, getProductBook} from "@/api/apiConfig";
  10 +import {SpinLoading, Checkbox} from 'antd-mobile'
  11 +import { useNavigate } from "react-router-dom";
12 12
13 interface ListType { 13 interface ListType {
14 id: string; 14 id: string;
@@ -16,10 +16,16 @@ interface ListType { @@ -16,10 +16,16 @@ interface ListType {
16 type: 'pdf' | 'mp4' | string 16 type: 'pdf' | 'mp4' | string
17 } 17 }
18 18
  19 +type CheckboxValue = string | number
  20 +
19 const ProductionList: React.FC = () => { 21 const ProductionList: React.FC = () => {
20 const [title, setTitle] = useState<string>(''); 22 const [title, setTitle] = useState<string>('');
21 const [list, setList] = useState<ListType[]>([]); 23 const [list, setList] = useState<ListType[]>([]);
22 const [show, setShow] = useState<boolean>(false); 24 const [show, setShow] = useState<boolean>(false);
  25 + const [showBatch, setShowBatch] = useState<boolean>(false);
  26 + const navigate = useNavigate();
  27 + const [checkItems, setCheckItems] = useState<CheckboxValue[]>([])
  28 + const [checkValues, setCheckValues] = useState<CheckboxValue[]>([])
23 29
24 30
25 // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组 31 // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
@@ -40,15 +46,18 @@ const ProductionList: React.FC = () => { @@ -40,15 +46,18 @@ const ProductionList: React.FC = () => {
40 setShow(false); 46 setShow(false);
41 getProductBook({pro_line: id}).then((res: any) => { 47 getProductBook({pro_line: id}).then((res: any) => {
42 setShow(true); 48 setShow(true);
  49 + let _checkItems = [];
43 const _list = res?.product_book?.map((item: any) => { 50 const _list = res?.product_book?.map((item: any) => {
  51 + _checkItems.push(item?.guide_book_file_info_?.[0]?.fileId);
44 const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || []; 52 const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || [];
45 return { 53 return {
46 - id: item?.id || '', 54 + id: item?.guide_book_file_info_?.[0]?.fileId || '',
47 name: _arr?.[0] || '', 55 name: _arr?.[0] || '',
48 type: _arr?.[1] || '', 56 type: _arr?.[1] || '',
49 } 57 }
50 }) || []; 58 }) || [];
51 setList(_list) 59 setList(_list)
  60 + setCheckItems(_checkItems)
52 }).catch((e: any) => { 61 }).catch((e: any) => {
53 setShow(true); 62 setShow(true);
54 setList([]) 63 setList([])
@@ -56,32 +65,109 @@ const ProductionList: React.FC = () => { @@ -56,32 +65,109 @@ const ProductionList: React.FC = () => {
56 } 65 }
57 }, [id]) 66 }, [id])
58 67
  68 + const rightInfo = (
  69 + <div className={'production-list_nav-right'}>
  70 + <span
  71 + className={'production-list_nav-right-info'}
  72 + onClick={() => setShowBatch(true)}
  73 + >批量操作</span>
  74 + </div>
  75 + )
  76 +
  77 + const checkboxChange = (value: CheckboxValue[]) => {
  78 + console.log('checkboxChange-value', value)
  79 + setCheckValues(value)
  80 + }
  81 + const toDetail = (ids: CheckboxValue[]) => {
  82 + console.log('toDetail-ids', ids)
  83 + if (ids?.[0]) {
  84 + const _id: string = ids?.[0].toString() || '';
  85 + getFilePreview(_id).then((res: any) => {
  86 + console.log('res', res)
  87 + window.open(res, '_blank')
  88 + }).catch((err: any) => {
  89 + console.log('err', err)
  90 + })
  91 + }
  92 + // navigate(`/production/detail?id=${item?.id}&name=${item?.name}`);
  93 + }
59 94
60 return ( 95 return (
61 <div className={'sxjx-content-main sxjx-layout-main-unfoot'}> 96 <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
62 - <div className={'production-list'}>  
63 - <NavBar title={title} showBack={true}/> 97 + <div className={`production-list ${showBatch ? 'production-list--batch' : ''}`}>
  98 + <NavBar title={title} showBack={true} rightInfo={ !showBatch ? rightInfo : ''}/>
64 { 99 {
65 !show ? <SpinLoading color='primary'/> : 100 !show ? <SpinLoading color='primary'/> :
66 <div className={'production-list_list'}> 101 <div className={'production-list_list'}>
67 - {  
68 - list?.map((item: any) => {  
69 - return <div  
70 - key={item?.id}  
71 - className={'production-list_list-item'}  
72 - style={{backgroundColor: hexToRgba(baseColorPrimary, 0.55)}}  
73 - >  
74 - <img className={'production-list_list-item-img'}  
75 - src={item?.type === 'mp4' ? _mp4 : _pdf}/>  
76 - <div className={'omit2 production-list_list-item-name'}>  
77 - {item?.name} 102 + <Checkbox.Group
  103 + onChange={checkboxChange}
  104 + value={checkValues}
  105 + >
  106 + {
  107 + list?.map((item: ListType) => {
  108 + return <div
  109 + key={item?.id}
  110 + className={`production-list_list-item ${item?.id}`}
  111 + style={{backgroundColor: '#fff'}}
  112 + onClick={() => {
  113 + if (!showBatch) {
  114 + toDetail([item?.id || ''])
  115 + }
  116 + }}
  117 + >
  118 + <img className={'production-list_list-item-img'}
  119 + src={item?.type === 'mp4' ? _mp4 : _pdf}/>
  120 + <div className={'omit2 production-list_list-item-name'}>
  121 + {item?.name}
  122 + </div>
  123 + {
  124 + showBatch ? <Checkbox key={item?.id} value={item?.id} /> : ''
  125 + }
78 </div> 126 </div>
79 - </div>  
80 - })  
81 - } 127 + })
  128 + }
  129 + </Checkbox.Group>
82 130
  131 +
  132 + </div>
  133 + }
  134 + {
  135 + showBatch ? <div className={'production-list--batch_info'}>
  136 + <div className={'production-list--batch_info-top'}>
  137 + <Checkbox
  138 + indeterminate={checkValues.length > 0 && checkValues?.length < checkItems?.length}
  139 + checked={checkValues?.length === checkItems?.length}
  140 + onChange={checked => {
  141 + if (checked) {
  142 + setCheckValues(checkItems)
  143 + } else {
  144 + setCheckValues([])
  145 + }
  146 + }}
  147 + >
  148 + 全选
  149 + </Checkbox>
  150 + <div className={'production-list--batch_info-top-choose'}>已选择<span>{checkValues?.length}</span>条</div>
  151 + <div className={'production-list--batch_info-top-close'}
  152 + onClick={() => {
  153 + setShowBatch(false);
  154 + setCheckValues([])
  155 + }}
  156 + >取消</div>
  157 + </div>
  158 + <div className={'production-list--batch_info-bottom'}>
  159 + <div className={'production-list--batch_info-bottom_item'}>
  160 + <img className={'production-list--batch_info-bottom_item-icon'} src={_preview} alt=""/>
  161 + <span className={'production-list--batch_info-bottom_item-info'}
  162 + onClick={() => {
  163 + toDetail(checkValues)
  164 + }}
  165 + >预览</span>
  166 + </div>
83 </div> 167 </div>
  168 + </div> : ''
84 } 169 }
  170 +
85 </div> 171 </div>
86 </div> 172 </div>
87 ) 173 )
1 .production-list { 1 .production-list {
2 background: #f7f7f7; 2 background: #f7f7f7;
3 3
  4 + &--batch {
  5 + margin-bottom: 221px;
  6 +
  7 + &_info {
  8 + position: fixed;
  9 + bottom: 0;
  10 + left: 0;
  11 + right: 0;
  12 + background: #fff;
  13 + height: calc(221px + env(safe-area-inset-bottom));
  14 + height: calc(221px + env(safe-area-inset-bottom));
  15 + z-index: 100;
  16 + &-top {
  17 + height: 100px;
  18 + border-bottom: 1px solid #eee;
  19 + padding: 0 60px;
  20 + display: flex;
  21 + justify-content: space-between;
  22 + align-items: center;
  23 + font-size: 28px;
  24 +
  25 + .adm-checkbox {
  26 + --icon-size: 28px;
  27 + --font-size: 28px;
  28 + color: #aeb1b8;
  29 + }
  30 +
  31 + &-choose {
  32 + color: #aeb1b8;
  33 + cursor: pointer;
  34 + span {
  35 + color: #1677ff;
  36 + padding: 0 10px;
  37 + }
  38 + }
  39 + &-close {
  40 + color: #1677ff;
  41 + }
  42 + }
  43 + &-bottom {
  44 + height: 120px;
  45 + display: flex;
  46 + justify-content: center;
  47 + align-items: center;
  48 +
  49 + &_item {
  50 + display: flex;
  51 + flex-direction: column;
  52 + cursor: pointer;
  53 + &-icon {
  54 + width: 56px;
  55 + height: 56px;
  56 + }
  57 + &-info {
  58 + font-size: 20px;
  59 + width: 56px;
  60 + text-align: center;
  61 + color: #333;
  62 + }
  63 + }
  64 +
  65 + }
  66 + }
  67 + }
  68 +
4 .adm-spin-loading { 69 .adm-spin-loading {
5 --size: 60px; 70 --size: 60px;
6 margin: 300px auto 0; 71 margin: 300px auto 0;
@@ -14,7 +79,7 @@ @@ -14,7 +79,7 @@
14 &-item { 79 &-item {
15 width: 312px; 80 width: 312px;
16 height: 312px; 81 height: 312px;
17 - color: #fff; 82 + color: #333;
18 margin-right: 60px; 83 margin-right: 60px;
19 margin-bottom: 60px; 84 margin-bottom: 60px;
20 cursor: pointer; 85 cursor: pointer;
@@ -27,6 +92,8 @@ @@ -27,6 +92,8 @@
27 text-align: center; 92 text-align: center;
28 flex-direction: column; 93 flex-direction: column;
29 94
  95 + position: relative;
  96 +
30 &:nth-child(5n) { 97 &:nth-child(5n) {
31 margin-right: 0; 98 margin-right: 0;
32 } 99 }
@@ -42,6 +109,28 @@ @@ -42,6 +109,28 @@
42 height: 80px; 109 height: 80px;
43 line-height: 40px; 110 line-height: 40px;
44 } 111 }
  112 +
  113 + .adm-checkbox {
  114 + position: absolute;
  115 + top: 0;
  116 + left: 30px;
  117 + width: 100%;
  118 + height: 100%;
  119 + --icon-size: 30px;
  120 + display: flex;
  121 + align-items: start;
  122 + padding-top: 30px;
  123 + }
  124 + }
  125 + }
  126 +
  127 + &_nav-right {
  128 + font-size: 26px;
  129 + padding-right: 20px;
  130 + &-info {
  131 + cursor: pointer;
  132 + display: inline-block;
  133 + padding: 0 10px;
45 } 134 }
46 } 135 }
47 } 136 }