定制化模块

src/assets/comm.css

@@ -22,6 +22,7 @@
   display: flex;
   justify-content:flex-end;
 }
+
 .dflexac{
   display: flex;
   align-items: center;
@@ -105,3 +106,8 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
   margin-right: 5px;
 
 }
+
+.delfilebtn{
+  color: #296bef;
+  cursor: pointer;
+}

src/pages/system/customize/main.js

@@ -6,8 +6,17 @@ import {Select,Button,ImageUpload ,Upload,Card,onUpload,Sweetalert,Notify} from
 import Ipt from "../../../components/input/main"
 import Form from "../../../components/form/main"
 import FormItem from "../../../components/form-item/main"
-import {uploadImg,handelResponse,postThemecustom} from "../../../assets/api.js"
+import {uploadImg,handelResponse,postThemecustom,getPersonnel} from "../../../assets/api.js"
 import _ from "lodash"
+import "../../../assets/comm.css"
+const CustomItem = props => {
+  const { item, i18n, onRetry, onDelete } = props;
+  return (
+    <div className="dflexj">
+      <span>{item.name}</span><span className="delfilebtn"  onClick={() => onDelete(item)}>删除</span>
+    </div>
+  )
+};
 export default class acclist extends React.Component{
   constructor(props){
     super(props)
@@ -20,7 +29,8 @@ export default class acclist extends React.Component{
 			},
 			client:[],
 			file:'',
-			headImg:''//上传图片的地址
+			headImg:'',//上传图片的地址,
+			account:[],
     }
 	}
 	//上传图片
@@ -47,15 +57,8 @@ export default class acclist extends React.Component{
 	}
 	//上传文件
   onUploadFileChange = files => {
+		if(files.length>0){	
 			this.setState({file:files[0].file});
-  };
-
-
-  onUploadError = (type, data) => {
-    if (type === 'overMaxAmount') {
-      Notify.error(`最多可上传 ${data.maxAmount} 个文件`);
-    } else if (type === 'overMaxSize') {
-      Notify.error(`文件大小不能超过 ${data.formattedMaxSize}`);
 		}
 	};
 //提交
@@ -67,10 +70,17 @@ export default class acclist extends React.Component{
 				Notify.clear();
 				Notify.warn('请先上传文件图片');
 			}else{
+				Sweetalert.confirm({
+					type:'warning',
+					closeBtn:true,
+					title:'确认操作',
+				content:<p>是否新增<b>[{_self.state.model.title}]</b>模板？</p>,
+					onConfirm:()=>{
+						console.log(_self.state.file);
 						let fd=new FormData();
-				let data=_.cloneDeep(this.state.model);
-				fd.append('thumb',this.state.headImg);
-				fd.append('file',this.state.file);
+						let data=_.cloneDeep(_self.state.model);
+						fd.append('thumb',_self.state.headImg);
+						fd.append('file',_self.state.file);
 						fd.append('client',data.client.key);
 						fd.append('scope',data.scope.key);
 						fd.append('title',data.title);
@@ -83,12 +93,33 @@ export default class acclist extends React.Component{
 								})
 								}).catch(err=>{
 							});
+					},
+					onCancel: this.onCancel,
+					className:'questModal',
+					parentComponent: this
+				});
+			
 			}
 		}
 	}
 	onCancel(){
 		window.history.back();
 	}
+	//获取归属账号
+	getAccount(){
+		let self=this;
+		getPersonnel().then((res)=>{
+			handelResponse(res,(req,msg)=>{
+				let account=req.map(item=>{
+					return({key:item.id,text:item.user_name})
+				});
+				 self.setState({account});
+				},(err)=>{
+		
+				})
+				}).catch(err=>{
+			});
+	}
 	//归属账号
 	onscopeChange(e){
 		let model2 = this.state.model
@@ -97,6 +128,11 @@ export default class acclist extends React.Component{
 		  model:model2
 		});
 	}
+  onUploadError = (type, data) => {
+    if (type === 'overMaxSize') {
+      Notify.error(`文件大小不能超过 ${data.formattedMaxSize}`);
+    }
+  };
 	onclientChange(e){
 		let model2 = this.state.model
 		model2.client = e;
@@ -105,6 +141,7 @@ export default class acclist extends React.Component{
 		});
 	}
 	componentWillMount(){
+			this.getAccount();
 		let enmuStatus=JSON.parse(sessionStorage.getItem('enmu'));
   	let enumobj=enmuStatus.theme_client_type.code;
 	  let type=[];
@@ -112,6 +149,7 @@ export default class acclist extends React.Component{
 			type.push({key:i,text:enumobj[i]})
 		}
 		this.setState({client:type});
+	
 	}
   render(){
 	  //校验规则
@@ -126,25 +164,6 @@ export default class acclist extends React.Component{
 							{ type: "required", message: "请选择归属账号"},
 						]
 	       }
-	  		 const options = [
-	  		   {
-	  		     key: '1',
-	  		     text: 'Option 1',
-	  		   },
-	  		   {
-	  		     key: '2',
-	  		     text: 'Option 2',
-	  		   },
-	  		   {
-	  		     key: '3',
-	  		     text: 'Option 3',
-	  		     disabled: true,
-	  		   },
-	  		     {
-	  		     key: '4',
-	  		     text: `君不见，黄河之水天上来，奔流到海不复回`,
-	  		   },
-	  		 ];
     return(
        <div className="customize">
 	   <Card type="nested" title="定制化模板" className="customize-card">
@@ -164,12 +183,14 @@ export default class acclist extends React.Component{
 			<Upload
         multiple
         className="zent-upload-demo-pic"
-        maxSize={10 * 1024 * 1024}
-        tips="单个文件不超过 10M"
+        maxSize={50 * 1024 }
+				tips="单个文件不超过 50kb"
         onChange={(e)=>this.onUploadFileChange(e)}
 				onUpload={this.onUpload}
+				customUploadItem={CustomItem}
 				onError={this.onUploadError}
 				sortable
+			
       />
 		  </FormItem>	
 		  <FormItem labelname="截图上传" prop="picurl">
@@ -184,7 +205,7 @@ export default class acclist extends React.Component{
 		  </FormItem>	
 		  
 		  <FormItem labelname="归属账号" prop="scope" id="scope">
-			<Select options={options} onChange={(e)=>{this.onscopeChange(e)}}  placeholder="选择一项" width={515}  value={this.state.model.scope}     />
+			<Select options={this.state.account} onChange={(e)=>{this.onscopeChange(e)}}  placeholder="选择一项" width={515}  value={this.state.model.scope}     />
 		  </FormItem>	
 		  <FormItem labelname="页面类型" prop="client" id="client">
 		  <Select options={this.state.client} onChange={(e)=>{this.onclientChange(e)}}  placeholder="选择一项"  width={515}  value={this.state.model.client}     />