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 30
31 31 /**获取文件预览地址
32 32 * **/
33   -export function getFilePreview(fileId: string) {
  33 +export function getFilePreview(fileId?: string) {
34 34 return get(
35 35 `/open/qgyun-service-fs-manager/file/p/origin/${fileId}`,
36 36 {
... ...
... ... @@ -159,7 +159,7 @@ button:focus-visible {
159 159
160 160 .sxjx-content-main {
161 161 background: #f7f7f7;
162   - height: 100vh;
  162 + min-height: 100vh;
163 163 width: 100vw;
164 164 box-sizing: border-box;
165 165 }
... ...
1 1 import React, {useEffect, useState} from 'react'
2 2 import './style.less'
3 3 import NavBar from '@/components/nav-bar'
4   -import {baseColorPrimary} from "@/utils/common";
5   -import {hexToRgba} from "@/utils/utils";
6 4 import _mp4 from './mp4.png';
7 5 import _pdf from './pdf.png';
  6 +import _preview from './preview.png';
8 7
9 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 13 interface ListType {
14 14 id: string;
... ... @@ -16,10 +16,16 @@ interface ListType {
16 16 type: 'pdf' | 'mp4' | string
17 17 }
18 18
  19 +type CheckboxValue = string | number
  20 +
19 21 const ProductionList: React.FC = () => {
20 22 const [title, setTitle] = useState<string>('');
21 23 const [list, setList] = useState<ListType[]>([]);
22 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 31 // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
... ... @@ -40,15 +46,18 @@ const ProductionList: React.FC = () => {
40 46 setShow(false);
41 47 getProductBook({pro_line: id}).then((res: any) => {
42 48 setShow(true);
  49 + let _checkItems = [];
43 50 const _list = res?.product_book?.map((item: any) => {
  51 + _checkItems.push(item?.guide_book_file_info_?.[0]?.fileId);
44 52 const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || [];
45 53 return {
46   - id: item?.id || '',
  54 + id: item?.guide_book_file_info_?.[0]?.fileId || '',
47 55 name: _arr?.[0] || '',
48 56 type: _arr?.[1] || '',
49 57 }
50 58 }) || [];
51 59 setList(_list)
  60 + setCheckItems(_checkItems)
52 61 }).catch((e: any) => {
53 62 setShow(true);
54 63 setList([])
... ... @@ -56,32 +65,109 @@ const ProductionList: React.FC = () => {
56 65 }
57 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 95 return (
61 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 100 !show ? <SpinLoading color='primary'/> :
66 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 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 167 </div>
  168 + </div> : ''
84 169 }
  170 +
85 171 </div>
86 172 </div>
87 173 )
... ...
1 1 .production-list {
2 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 69 .adm-spin-loading {
5 70 --size: 60px;
6 71 margin: 300px auto 0;
... ... @@ -14,7 +79,7 @@
14 79 &-item {
15 80 width: 312px;
16 81 height: 312px;
17   - color: #fff;
  82 + color: #333;
18 83 margin-right: 60px;
19 84 margin-bottom: 60px;
20 85 cursor: pointer;
... ... @@ -27,6 +92,8 @@
27 92 text-align: center;
28 93 flex-direction: column;
29 94
  95 + position: relative;
  96 +
30 97 &:nth-child(5n) {
31 98 margin-right: 0;
32 99 }
... ... @@ -42,6 +109,28 @@
42 109 height: 80px;
43 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 }
\ No newline at end of file
... ...