定制化模块
This commit is contained in:
parent
5209fc5c01
commit
050be9055c
|
@ -22,6 +22,7 @@
|
|||
display: flex;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
.dflexac{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -104,4 +105,9 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
|
|||
/* border: 2px solid rgb(159, 222, 252); */
|
||||
margin-right: 5px;
|
||||
|
||||
}
|
||||
|
||||
.delfilebtn{
|
||||
color: #296bef;
|
||||
cursor: pointer;
|
||||
}
|
|
@ -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,17 +57,10 @@ export default class acclist extends React.Component{
|
|||
}
|
||||
//上传文件
|
||||
onUploadFileChange = files => {
|
||||
this.setState({file:files[0].file});
|
||||
};
|
||||
|
||||
|
||||
onUploadError = (type, data) => {
|
||||
if (type === 'overMaxAmount') {
|
||||
Notify.error(`最多可上传 ${data.maxAmount} 个文件`);
|
||||
} else if (type === 'overMaxSize') {
|
||||
Notify.error(`文件大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
if(files.length>0){
|
||||
this.setState({file:files[0].file});
|
||||
}
|
||||
};
|
||||
//提交
|
||||
onNextStep(){
|
||||
let _self=this;
|
||||
|
@ -67,28 +70,56 @@ export default class acclist extends React.Component{
|
|||
Notify.clear();
|
||||
Notify.warn('请先上传文件图片');
|
||||
}else{
|
||||
let fd=new FormData();
|
||||
let data=_.cloneDeep(this.state.model);
|
||||
fd.append('thumb',this.state.headImg);
|
||||
fd.append('file',this.state.file);
|
||||
fd.append('client',data.client.key);
|
||||
fd.append('scope',data.scope.key);
|
||||
fd.append('title',data.title);
|
||||
postThemecustom(fd).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.clear();
|
||||
Notify.success(msg);
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
}).catch(err=>{
|
||||
});
|
||||
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(_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);
|
||||
postThemecustom(fd).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.clear();
|
||||
Notify.success(msg);
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
}).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}
|
||||
onError={this.onUploadError}
|
||||
sortable
|
||||
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} />
|
||||
|
|
Loading…
Reference in New Issue