Browse Source

统一图片上传组件

mentoswzq 4 years ago
parent
commit
92c459d1eb

+ 14 - 11
js/component/manageCenter/set/business/businessCategory.jsx

@@ -7,6 +7,7 @@ import '../content.less';
 import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload,Popconfirm,TimePicker,Tabs } from 'antd';
 import {categoryState} from '../../../dataDic.js';
 import {getCategoryState,splitUrl} from '../../../tools.js';
+import ImgList from "../../../common/imgList";
 //图片组件
 const PicturesWall = React.createClass({
     getInitialState() {
@@ -43,18 +44,19 @@ const PicturesWall = React.createClass({
         );
         return (
             <div style={{display:"inline-block"}}>
-                <Upload
-                    action={globalConfig.context + "/api/admin/Varieties/uploadPicture"}
-                    data={{ 'sign': this.props.pictureSign }}
-                    listType="picture-card"
+                <ImgList
+                    domId={this.props.domId}
+                    uploadConfig={{
+                        action:globalConfig.context + "/api/admin/Varieties/uploadPicture",
+                        data:{ 'sign': this.props.pictureSign },
+                        multiple:true,
+                        listType:"picture-card",
+                    }}
+                    onChange={(infor)=>{
+                        this.handleChange(infor)
+                    }}
                     fileList={fileList}
-                    onPreview={this.handlePreview}
-                    onChange={this.handleChange} >
-                    {fileList.length >= 1 ? null : uploadButton}
-                </Upload>
-                <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
-                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
-                </Modal>
+                />
             </div>
         );
     }
@@ -839,6 +841,7 @@ const BusinessCategory=Form.create()(React.createClass({
 					                        wrapperCol={{ span: 12 }}
 					                        label="业务品类图标" >
 					                        <PicturesWall
+                                                domId={'businessCategory1'}
 					                            pictureSign="varieties_picture"
 					                            fileList={this.getOrgCodeUrl}
 					                            pictureUrl={this.state.orgCodeUrl} />

+ 15 - 11
js/component/manageCenter/set/business/businessProject.jsx

@@ -8,6 +8,7 @@ import { citySelect,provinceList,areaSelect,provinceSelect} from '../../../NewDi
 import { Form,Radio, Icon, Button, Input,Tabs, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload,Popconfirm,TimePicker,Cascader } from 'antd';
 import {categoryState,industry,conditionOrganization,gameState} from '../../../dataDic.js';
 import {getCategoryState,getGameState,splitUrl,getprovince} from '../../../tools.js';
+import ImgList from "../../../common/imgList";
 const TabPane = Tabs.TabPane;
 //图片组件
 const PicturesWall = React.createClass({
@@ -45,18 +46,19 @@ const PicturesWall = React.createClass({
         );
         return (
             <div style={{display:"inline-block"}}>
-                <Upload
-                    action={globalConfig.context + "/api/admin/ProjectSize/uploadPicture"}
-                    data={{ 'sign': this.props.pictureSign }}
-                    listType="picture-card"
+                <ImgList
+                    domId={this.props.domId}
+                    uploadConfig={{
+                        action:globalConfig.context + "/api/admin/ProjectSize/uploadPicture",
+                        data:{ 'sign': this.props.pictureSign },
+                        multiple:true,
+                        listType:"picture-card",
+                    }}
+                    onChange={(infor)=>{
+                        this.handleChange(infor)
+                    }}
                     fileList={fileList}
-                    onPreview={this.handlePreview}
-                    onChange={this.handleChange} >
-                    {fileList.length >= 1 ? null : uploadButton}
-                </Upload>
-                <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
-                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
-                </Modal>
+                />
             </div>
         );
     }
@@ -2251,6 +2253,7 @@ const BusinessProject=Form.create()(React.createClass({
                               label="业务项目图标"
                             >
                               <PicturesWall
+                                domId={'businessProject1'}
                                 pictureSign="business_project_min_picture"
                                 fileList={this.getOrgCodeUrl}
                                 pictureUrl={this.state.orgCodeUrl}
@@ -2264,6 +2267,7 @@ const BusinessProject=Form.create()(React.createClass({
                               label="业务项目图标"
                             >
                               <PicturesWall
+                                domId={'businessProject2'}
                                 pictureSign="business_project_max_picture"
                                 fileList={this.getCompanyLogoUrl}
                                 pictureUrl={this.state.companyLogoUrl}

+ 15 - 11
js/component/manageCenter/set/business/businessQuery.jsx

@@ -8,6 +8,7 @@ import { citySelect,provinceList,areaSelect,provinceSelect} from '../../../NewDi
 import { Form,Radio, Icon, Button, Input,Tabs, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload,Popconfirm,TimePicker,Cascader } from 'antd';
 import {categoryState,industry,conditionOrganization,gameState} from '../../../dataDic.js';
 import {getCategoryState,getGameState,splitUrl,getprovince} from '../../../tools.js';
+import ImgList from "../../../common/imgList";
 const TabPane = Tabs.TabPane;
 //图片组件
 const PicturesWall = React.createClass({
@@ -45,18 +46,19 @@ const PicturesWall = React.createClass({
         );
         return (
             <div style={{display:"inline-block"}}>
-                <Upload
-                    action={globalConfig.context + "/api/admin/ProjectSize/uploadPicture"}
-                    data={{ 'sign': this.props.pictureSign }}
-                    listType="picture-card"
+                <ImgList
+                    domId={this.props.domId}
+                    uploadConfig={{
+                        action:globalConfig.context + "/api/admin/ProjectSize/uploadPicture",
+                        data:{ 'sign': this.props.pictureSign },
+                        multiple:true,
+                        listType:"picture-card",
+                    }}
+                    onChange={(infor)=>{
+                        this.handleChange(infor)
+                    }}
                     fileList={fileList}
-                    onPreview={this.handlePreview}
-                    onChange={this.handleChange} >
-                    {fileList.length >= 1 ? null : uploadButton}
-                </Upload>
-                <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
-                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
-                </Modal>
+                />
             </div>
         );
     }
@@ -1527,6 +1529,7 @@ const BusinessProject=Form.create()(React.createClass({
 					                        wrapperCol={{ span: 10 }}
 					                        label="业务项目图标" >
 					                        <PicturesWall
+                                                domId={'businessQuery1'}
 					                            pictureSign="business_project_min_picture"
 					                            fileList={this.getOrgCodeUrl}
 					                            pictureUrl={this.state.orgCodeUrl} />
@@ -1537,6 +1540,7 @@ const BusinessProject=Form.create()(React.createClass({
 					                        wrapperCol={{ span: 12 }}
 					                        label="业务项目图标" > 
 					                        <PicturesWall
+                                                domId={'businessQuery2'}
 					                            pictureSign="business_project_max_picture"
 					                            fileList={this.getCompanyLogoUrl}
 					                            pictureUrl={this.state.companyLogoUrl} />

+ 14 - 11
js/component/manageCenter/set/userManagementS/newUser.jsx

@@ -7,6 +7,7 @@ import {socialAttribute,cityArr,station,post} from '../../../dataDic.js';
 import {splitUrl} from '../../../tools.js';
 const Option = AutoComplete.Option;
 import moment from 'moment';
+import ImgList from "../../../common/imgList";
 
 //图片组件
 const PicturesWall = React.createClass({
@@ -47,18 +48,19 @@ const PicturesWall = React.createClass({
         );
         return (
             <div style={{display:"inline-block"}}>
-                <Upload
-                    action={globalConfig.context + "/api/admin/superviser/uploadAdminImg"}
-                    data={{ 'sign': this.props.pictureSign }}
-                    listType="picture-card"
+                <ImgList
+                    domId={this.props.domId}
+                    uploadConfig={{
+                        action:globalConfig.context + "/api/admin/superviser/uploadAdminImg",
+                        data:{ 'sign': this.props.pictureSign },
+                        multiple:true,
+                        listType:"picture-card",
+                    }}
+                    onChange={(infor)=>{
+                        this.handleChange(infor)
+                    }}
                     fileList={fileList}
-                    onPreview={this.handlePreview}
-                    onChange={this.handleChange} >
-                    {fileList.length >= 1 ? null : uploadButton}
-                </Upload>
-                <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
-                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
-                </Modal>
+                />
             </div>
         );
     }
@@ -556,6 +558,7 @@ const Newuser = Form.create()(React.createClass({
 							                        wrapperCol={{ span: 18 }}
 							                        label="用户头像" >
 							                        <PicturesWall
+                                                        domId={'newUser1'}
 							                            pictureSign="customer_sys_file"
 							                            fileList={this.getOrgCodeUrl}
 							                            pictureUrl={this.state.orgCodeUrl} />

+ 1 - 0
js/component/manageCenter/statistics/personnel/addPicModal.jsx

@@ -68,6 +68,7 @@ const AddPicModal = React.createClass({
             label="附件"
           >
             <PicturesWall
+              domId={'addPicModal1'}
               fileList={this.getVoucherUrl}
               pictureUrl={this.state.voucherUrl}
               url="/api/admin/personnel/uploadFile"

+ 15 - 45
js/component/manageCenter/statistics/personnel/picturesWall.js

@@ -1,31 +1,13 @@
 import React, { Component } from "react";
-import { Modal, Icon, Upload } from "antd";
-import { timingSafeEqual } from "crypto";
+import ImgList from "../../../common/imgList";
 
 class PicturesWall extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      previewVisible: false,
-      previewImage: "",
       fileList: this.props.pictureUrl,
     };
-    this.handleCancel = this.handleCancel.bind(this);
     this.handleChange = this.handleChange.bind(this);
-    this.handlePreview = this.handlePreview.bind(this);
-  }
-
-  handleCancel() {
-    this.setState({
-      previewVisible: false,
-    });
-  }
-
-  handlePreview(file) {
-    this.setState({
-      previewImage: file.url || file.thumbUrl,
-      previewVisible: true,
-    });
   }
 
   handleChange(info) {
@@ -42,34 +24,22 @@ class PicturesWall extends Component {
   }
 
   render() {
-    const { previewVisible, previewImage, fileList } = this.state;
-    const uploadButton = (
-      <div>
-        <Icon type="plus" />
-        <div className="ant-upload-text">点击上传</div>
-      </div>
-    );
+    const { fileList } = this.state;
     return (
       <div style={{ display: "inline-block" }}>
-        <Upload
-          action={globalConfig.context + this.props.url}
-          data={{ sign: this.props.sign }}
-          listType="picture-card"
-          fileList={fileList}
-          multiple={true}
-          onPreview={this.handlePreview}
-          onChange={this.handleChange}
-        >
-          {uploadButton}
-        </Upload>
-        <Modal
-          maskClosable={false}
-          visible={previewVisible}
-          footer={null}
-          onCancel={this.handleCancel}
-        >
-          <img alt="example" style={{ width: "100%" }} src={previewImage} />
-        </Modal>
+        <ImgList
+            domId={this.props.domId}
+            uploadConfig={{
+              action:globalConfig.context + this.props.url,
+              data:{ sign: this.props.sign },
+              multiple:true,
+              listType:"picture-card",
+            }}
+            onChange={(infor)=>{
+              this.handleChange(infor)
+            }}
+            fileList={fileList}
+        />
       </div>
     );
   }