提交

src/pages/device/deviceVesion/components/CreateForm.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Modal, Form, Input, Button, Select,Upload} from 'antd';
+import React, { useRef, useState } from 'react';
+import { Modal, Form, Input, Button, Select, Upload, InputNumber,message } from 'antd';
 import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import { GetCosRequestURL } from '../services';
 import axios from 'axios';
@@ -8,7 +8,7 @@ import axios from 'axios';
 const CreateForm = (props) => {
   props.form.setFieldsValue(props.values);
   const { Option, OptGroup } = Select;
-  const uploadProp = {
+  const uploadProp1 = {
     name: 'file',
     showUploadList: false,
     multiple: false,
@@ -52,7 +52,7 @@ const CreateForm = (props) => {
           }).then(response => {
             console.log('onSuccess', response, file);
             if (response.status == 200 || response.statusText == 'OK') {
-              props.form.setFieldsValue({ templatePath: r.seeUrl });
+              props.form.setFieldsValue({ productUrl: r.seeUrl });
             }
             // onSuccess(response, file);
           })
@@ -69,6 +69,91 @@ const CreateForm = (props) => {
 
   };
 
+  const uploadProp = {
+    name: 'file',
+    showUploadList: true,
+    multiple: false,
+    accept: '.png, .jpg, .jpeg, .gif',
+    // 这里需要指定文件上传的content-type
+    headers: {
+      'Content-Type': 'application/octet-stream',
+    },
+    customRequest({
+      action,
+      file,
+      headers,
+      onError,
+      onProgress,
+      withCredentials,
+    }) {
+      //覆盖action 上传之前获取上传地址
+      var index = file.name.lastIndexOf(".");
+      var ext = file.name.substr(index + 1);
+      let fileData = null;
+      GetCosRequestURL({ directory: "applet", fileExtension: ext, method: "PUT" }).then((r) => {
+        action = r.allUrl;
+        const reader = new FileReader();
+        reader.readAsArrayBuffer(file);
+        reader.onload = (e) => {
+          fileData = e.target.result;
+          axios.put(action, fileData, {
+            withCredentials,
+            headers,
+            onUploadProgress: ({ total, loaded }) => {
+              onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
+            },
+          }).then(response => {
+
+            if (response.status == 200 || response.statusText == 'OK') {
+              debugger
+              const tempUploadImage = JSON.parse(JSON.stringify(props.currentImage));
+              tempUploadImage.materialPath=[];
+              tempUploadImage.materialPath.push(r.seeUrl);
+              props.setCurrentImage(tempUploadImage);
+             // props.form.setFieldsValue({ productUrl: r.seeUrl });
+              message.success('上传成功！');
+            }
+          }).catch(onError);
+        };
+      });
+      return {
+        abort() {
+          console.log('upload progress is aborted.');
+        },
+      };
+    },
+  };
+
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div
+        style={{
+          marginTop: 8,
+        }}
+      >
+        Upload
+      </div>
+    </div>
+  );
+
+  const handlePreview = async (file) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+    setPreviewImage(file.url || file.preview);
+    setPreviewVisible(true);
+    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
+  };
+
+  const handleChange = ({ fileList: newFileList }) => {
+    debugger
+    newFileList.forEach(item => {
+      item.status = 'done'
+    });
+    props.setFileList(newFileList)
+  };
+
   return (
     <Modal
       title={props.values.id ? '编辑' : '新建'}
@@ -91,8 +176,8 @@ const CreateForm = (props) => {
         <Form.Item name="id" hidden={true}>
           <Input />
         </Form.Item>
-        <Form.Item label={"所属产品"} name="productId"  rules={[{ required: true,max:50}]} >
-        <Select>
+        <Form.Item label={"所属产品"} name="productId" rules={[{ required: true, max: 50 }]} >
+          <Select>
             {props.dicData.map((item, index) => {
               return (
                 <Select.Option index={index} value={item.id} key={item.id}>
@@ -102,10 +187,40 @@ const CreateForm = (props) => {
             })}
           </Select>
         </Form.Item>
-        <Form.Item label={"版本号"} name="vesion"  rules={[{ required: true,max:50}]} >
+        <Form.Item label={"版本号"} name="vesion" rules={[{ required: true, max: 50 }]} >
           <Input />
         </Form.Item>
-        
+        <Form.Item label={"仓位数量"} name="productNumber" rules={[{ required: true, }]} >
+          <InputNumber min={1} />
+        </Form.Item>
+        <Form.Item label={"图片"}  >
+          <Upload
+            listType="picture-card"
+            fileList={props.fileList}
+            onPreview={handlePreview}
+            onChange={handleChange}
+            onRemove={(remove) => {
+              const findIndex = props.fileList.findIndex(item => item.uid === remove.uid);
+              if (findIndex > -1) {
+                const tempUpload = JSON.parse(JSON.stringify(props.currentImage));
+                tempUpload.materialPath.splice(findIndex, 1);
+                props.setCurrentImage(tempUpload);
+              }
+            }}
+            {...uploadProp}
+          >
+            {
+              (() => {
+                if (props.fileList.length >= 1) {
+                  return null;
+                } else {
+                  return uploadButton
+                }
+              })()
+            }
+          </Upload>
+        </Form.Item>
+
         <Form.Item>
           <Button type="primary" htmlType="submit">
             保存

src/pages/device/deviceVesion/index.jsx

@@ -1,5 +1,5 @@
 
-import { Modal, Button, message, Form, Upload, Tag ,Popconfirm} from 'antd';
+import { Modal, Button, message, Form, Upload, Tag ,Popconfirm,Image} from 'antd';
 import React, { useState, useRef, useEffect } from 'react';
 import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
 import { PlusOutlined } from '@ant-design/icons';
@@ -19,6 +19,22 @@ const GoodsTypeManage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isAddGoodsTemplate,setIsAddGoodsTemplate]=useState(false);
   const [form] = Form.useForm();
+  const [fileList, setFileList] = useState([
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: '',
+    },
+  ]);
+  const [currentImage, setCurrentImage] = useState({
+    id: '',
+    pageId: '',
+    materialName: '',
+    materialCode: '',
+    materialPath: [],
+    materialType: 0
+});
   const props = {
     beforeUpload: (file) => {
       if (
@@ -56,6 +72,7 @@ const GoodsTypeManage = () => {
 //添加
 const handleAdd = async (fields) => {
   try {
+    fields.productUrl=currentImage?.materialPath[0];
     message.loading('正在添加', key);
     await AddDeviceVesion(JSON.stringify(fields)).then((r) => {
       message.destroy(key);
@@ -78,6 +95,8 @@ const handleAdd = async (fields) => {
 //修改
 const handleUpdate = async (fields) => {
   try {
+    fields.productUrl=currentImage?.materialPath[0];
+    debugger
     message.loading('正在修改', key);
     message.destroy(key);
     await UpdateDeviceVesion(JSON.stringify(fields)).then((r) => {
@@ -140,6 +159,22 @@ const handleRemove = async (selectedRows) => {
       dataIndex: 'productName',
       valueType: 'textarea',
     },
+    {
+      title: '仓位数量',
+      dataIndex: 'productNumber',
+      valueType: 'textarea',
+    },
+    {
+      title: '图片',
+      dataIndex: 'productUrl',
+      render: (_, record) => (
+        <Image
+             style={{ width: '50%', height: '50%' }}
+            src={record?.productUrl}
+            fallback="data:image/png;base64,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">
+        </Image>
+    )
+    },
     // {
     //   title: '是否存在模板',
     //   dataIndex: 'templatePath',
@@ -163,6 +198,16 @@ const handleRemove = async (selectedRows) => {
           onClick={() => {
             handleModalVisible(true);
             setCurrentRow(record);
+            const tempUploadImage = JSON.parse(JSON.stringify([
+              {
+                uid: '-1',
+                name: 'image.png',
+                status: 'done',
+                url: '',
+              },
+            ]));
+            tempUploadImage[0].url=record.productUrl;
+            setFileList(tempUploadImage);
             // form.setFielsValue(record)
           }} > 更新</a>,
           <Popconfirm
@@ -259,6 +304,7 @@ const handleRemove = async (selectedRows) => {
             key="primary"
             onClick={() => {
               // form.setFielsValue(currentRow)
+              setFileList([]);
               handleModalVisible(true);
             }} >
             <PlusOutlined /> 新建
@@ -335,6 +381,10 @@ const handleRemove = async (selectedRows) => {
         createModalVisible={createModalVisible}
         values={currentRow || {}}
         form={form}
+        currentImage={currentImage}
+        setCurrentImage={setCurrentImage}
+        fileList={fileList}
+        setFileList={setFileList}
         dicData={DictData}
       />
       <Modal title="上传工艺模版" open={isModalOpen} footer={null} onCancel={() => { setIsModalOpen(false) }}>