设备巡检二维码设计支持批量操作

src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.js

-import React, { useState, useImperativeHandle, forwardRef, useMemo, useEffect } from 'react'
+import React, { useState, useImperativeHandle, forwardRef, useMemo, useEffect, useRef } from 'react'
 import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message, Tag, Spin, Select } from 'antd'
 import { UploadOutlined, FileOutline, ArrowDownOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import QRCode from 'qrcode.react'
-import { GetDeviceQRCodeConfig, EditOrAddDeviceQRCodeConfig } from '@/services/flow/flow'
+import { GetDeviceQRCodeConfig, EditOrAddDeviceQRCodeConfig, BatchEditDeviceQRCodeConfig } from '@/services/flow/flow'
 import html2canvas from 'html2canvas'
 import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
@@ -137,10 +137,12 @@ const QRCodeViewSuzhou = props => {
 const QRCodeDesign = (props, ref) => {
 
   useImperativeHandle(ref, () => ({
-    open
+    open,
+    batchEditOpen
   }))
 
   const [record, setRecord] = useState({})
+  const [isBatchEdit, setBatchEdit] = useState(false);
   const [visible, setVisible] = useState(false)
   const [show, setShow] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -153,7 +155,7 @@ const QRCodeDesign = (props, ref) => {
   const [minVisible, setMinVisible] = useState(false)
   const [active, setActive] = useState('')
   const [form] = Form.useForm()
-
+  let accountNames = useRef([]);
   const columns = useMemo(() => {
     return [
       {
@@ -393,9 +395,29 @@ const QRCodeDesign = (props, ref) => {
     setRecord(record)
     setShow(false)
     setVisible(true)
+    setBatchEdit(false);
     getDataSource(record)
   }
 
+  const batchEditOpen = (keys)=>{
+    console.log(keys, '批量选中台账名')
+    if(!keys || keys.length == 0){
+      message.warn('请选择需要批量设计的数据');
+      return;
+    }
+    if(values){
+      let vals = values;
+      Object.keys(vals).forEach(k=> vals[k] = '')
+      form?.setFieldsValue(vals)
+      setValues(vals)
+    }
+    setShowList([]);
+    accountNames.current = keys;
+    setShow(true);
+    setVisible(true);
+    setBatchEdit(true);
+  }
+
   const onValuesChange = (values) => {
     form.setFieldsValue(values)
     setValues(form.getFieldsValue(true))
@@ -438,6 +460,28 @@ const QRCodeDesign = (props, ref) => {
     })
   }
 
+  const batchSave = async ()=>{
+    let params = {
+      AccountNamelist: accountNames.current,
+      DeviceQRCodeConfig: {
+        corporateName: values.CorporateName,
+        title: values.Title,
+        labelLogoUrl: values.LabelLogoUrl,
+        isSystemLogo: values.IsSystemLogo === '系统LOGO' ? 1 : 0,
+        isPandaLogo: values.IsPandaLogo ? 1 : 0,
+        Template: values.Template || 'default'
+      }
+    }
+    const { code, data } = await BatchEditDeviceQRCodeConfig(params)
+    if (code === 0) {
+      message.success('保存成功!')
+      setShow(false)
+      setVisible(false)
+    } else {
+      message.error('保存失败!')
+    }
+  }
+
   const save = async () => {
     let params = {
       ID: parentQRCode.ID,
@@ -472,8 +516,8 @@ const QRCodeDesign = (props, ref) => {
           </>
         ) : (
           <>
-            <Button onClick={() => setShow(false)}>返回</Button>
-            <Button type='primary' onClick={() => save()}>保存</Button>
+            {!isBatchEdit && <Button onClick={() => setShow(false)}>返回</Button>}
+            <Button type='primary' onClick={() => !isBatchEdit ? save() : batchSave()}>保存</Button>
           </>
         )
       }
@@ -481,7 +525,8 @@ const QRCodeDesign = (props, ref) => {
   )
 
   return (
-    <Modal
+    <>{visible && 
+      <Modal
       wrapClassName={styles.QRCodeModal}
       visible={visible}
       onCancel={() => setVisible(false)}
@@ -668,6 +713,8 @@ const QRCodeDesign = (props, ref) => {
         }
       </div>
     </Modal>
+    }</>
+   
   )
 }
 

src/pages/bsmanager/patrolMaintenance/maintenance/maintenance.jsx

@@ -20,6 +20,7 @@ import {
   PlusOutlined,
   OrderedListOutlined,
   ApartmentOutlined,
+  SettingOutlined 
 } from '@ant-design/icons';
 import styles from './maintenance.less';
 import AddModal from './AddModal';
@@ -36,6 +37,7 @@ const maintenance = () => {
   const [addVisible, setAddVisible] = useState(false);
   const [addVisibleNew, setAddVisibleNew] = useState(false);
   const [optionVisible, setOptionVisible] = useState(false);
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [type, setType] = useState('');
   const [formObj, setFormObj] = useState('');
   const [treeLoading, setTreeLoading] = useState(false);
@@ -736,7 +738,7 @@ const maintenance = () => {
                 {/* <EditTwoTone onClick={() => editOption(record)} style={{ fontSize: '16px' }} /> */}
               </Tooltip>
               <Tooltip title="二维码设计">
-                <Button type='link' onClick={() => editQrCode(record)}>二维码设计</Button>
+                <Button type='link' onClick={() => editQrCode(record)}>二维码设计111</Button>
                 {/* <EditTwoTone onClick={() => editQrCode(record)} style={{ fontSize: '16px' }} /> */}
               </Tooltip>
             </Space>
@@ -755,6 +757,11 @@ const maintenance = () => {
 
     setType('add');
   };
+
+  const batchEditQRCode= ()=>{
+    QRCodeDesignRef.current.batchEditOpen(selectedRowKeys)
+  }
+  
   const editEventType = record => {
     if (activeName === 'project') {
       setAddVisibleNew(true);
@@ -922,6 +929,27 @@ const maintenance = () => {
                 维保模板
               </div> */}
             </div>
+            <span
+              style={{
+                float: 'right',
+                marginRight: '10px',
+                display: activeName === 'configuration' ? 'block' : 'none',
+              }}
+            >
+              <Button
+                icon={<SettingOutlined className={styles.icon}/>}
+                onClick={batchEditQRCode}
+                type="primary"
+                style={{
+                  verticalAlign: 'middle',
+                  marginTop: '10px',
+                  marginRight: '20px',
+                }}
+              >
+                <span style={{ marginTop: '-2px' }}>批量二维码设计</span>
+              </Button>
+            </span>
+
             <span
               style={{
                 float: 'right',
@@ -980,7 +1008,7 @@ const maintenance = () => {
           ) : (
             <Table
               size="small"
-              rowKey="ID"
+              rowKey={record=> record.AccountName}
               bordered
               loading={treeLoading}
               onRow={record => ({
@@ -993,6 +1021,13 @@ const maintenance = () => {
                   }
                 }, // 双击
               })}
+              rowSelection={{
+                selectedRowKeys,
+                onChange: (RowKeys, selectedRows) => {
+                  setSelectedRowKeys(RowKeys);
+                  console.log(`selectedRowKeys: ${RowKeys}`, 'selectedRows: ', selectedRows);
+                },
+              }}
               columns={columns}
               dataSource={filterTableData}
               scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}

src/services/flow/flow.js

@@ -114,6 +114,9 @@ export const GetDeviceQRCodeConfig = (param) => get(`${PUBLISH_SERVICE}/WorkOrde
 //新增或修改维保二维码配置
 export const EditOrAddDeviceQRCodeConfig = query => post(`${PUBLISH_SERVICE}/WorkOrderCenter/EditOrAddDeviceQRCodeConfig`, query);
 
+//新增或修改维保二维码配置
+export const BatchEditDeviceQRCodeConfig = query => post(`${PUBLISH_SERVICE}/WorkOrderCenter/BatchEditDeviceQRCodeConfig`, query);
+
 //修改流程节点顺序
 export const UpdateFlowNodeOrder = query => get(`${PUBLISH_SERVICE}/WorkOrderCenter/UpdateFlowNodeOrder`, query);