模板空字段渲染类型时处理
This commit is contained in:
red-deng-deng
parent
9dccbbc452
commit
a497e54185
|
|
@ -115,9 +115,22 @@ getLandingdata(val){
|
|||
template=typePage;
|
||||
}
|
||||
let exchangeList=newEditor.exchange;
|
||||
if(!exchangeList){
|
||||
exchangeList={};
|
||||
exchangeList.land=model;
|
||||
exchangeList.product_list=product_list;
|
||||
exchangeList.product_detail=product_detail;
|
||||
}
|
||||
|
||||
exchangeList['land'].title=newEditor.title;
|
||||
exchangeList['land'].sort=newEditor.sort;
|
||||
let whiteList=newEditor.access_conf;
|
||||
if(!whiteList){
|
||||
whiteList={}
|
||||
whiteList.land=model;
|
||||
whiteList.product_list=product_list;
|
||||
whiteList.product_detail=product_detail;
|
||||
}
|
||||
whiteList['land'].title=newEditor.title;
|
||||
whiteList['land'].sort=newEditor.sort;
|
||||
newEditor.exchangeList=exchangeList;
|
||||
|
|
@ -579,7 +592,6 @@ getLandingdata(val){
|
|||
case 812:style={width:'375px',height:'812px',transform: 'scale(0.75)'};fontSize=10000/(375*0.75);break;
|
||||
case 500:style={width:'375px',height:'500px',transform: 'scale(0.75)'};fontSize=10000/(375*0.75);break;
|
||||
}
|
||||
console.log('fontSize',fontSize);
|
||||
this.setState({setStyle:style,activeHeight:height,fontSize});
|
||||
}
|
||||
componentWillUnmount(){
|
||||
|
|
|
|||
|
|
@ -1,8 +1,20 @@
|
|||
import ReactDOM from 'react-dom';
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button,Tag,Sweetalert,CombinedDateRangePicker,Notify,Switch,Pop} from 'zent';
|
||||
import "./main.less"
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import {
|
||||
Link
|
||||
} from "react-router-dom";
|
||||
import {
|
||||
Button,
|
||||
Tag,
|
||||
Sweetalert,
|
||||
CombinedDateRangePicker,
|
||||
Notify,
|
||||
Switch,
|
||||
Pop
|
||||
} from 'zent';
|
||||
import "./main.less"
|
||||
import _ from "lodash";
|
||||
import "../../../assets/comm.css"
|
||||
import Ipt from "../../../components/input/main"
|
||||
|
|
@ -10,19 +22,22 @@ import Grid from "../../../components/gird/main.js"
|
|||
import TabPage from "../../../components/tabPage/main.js"
|
||||
import Filterbar from "../../../components/filterbar/main.js"
|
||||
import menu from "../../../assets/enum.js"
|
||||
import {handelResponse,getTheme,delTheme} from "../../../assets/api.js"
|
||||
const Column = [
|
||||
{
|
||||
import {
|
||||
handelResponse,
|
||||
getTheme,
|
||||
delTheme
|
||||
} from "../../../assets/api.js"
|
||||
const Column = [{
|
||||
title: '缩略图',
|
||||
name: 'thumb',
|
||||
prop:'thumb',
|
||||
prop: 'thumb',
|
||||
type: "slot",
|
||||
width:'10%',
|
||||
width: '10%',
|
||||
}, {
|
||||
title: '标题',
|
||||
prop:'title',
|
||||
prop: 'title',
|
||||
name: 'title',
|
||||
width:'auto',
|
||||
width: 'auto',
|
||||
type: "normal",
|
||||
},
|
||||
{
|
||||
|
|
@ -30,7 +45,7 @@ const Column = [
|
|||
prop: 'client',
|
||||
name: 'client',
|
||||
type: "slot",
|
||||
width:'auto',
|
||||
width: 'auto',
|
||||
|
||||
},
|
||||
{
|
||||
|
|
@ -38,7 +53,7 @@ const Column = [
|
|||
prop: 'update_time',
|
||||
name: 'update_time',
|
||||
type: "normal",
|
||||
width:'auto',
|
||||
width: 'auto',
|
||||
|
||||
},
|
||||
{
|
||||
|
|
@ -46,7 +61,7 @@ const Column = [
|
|||
prop: 'user_name',
|
||||
name: 'user_name',
|
||||
type: "normal",
|
||||
width:'auto',
|
||||
width: 'auto',
|
||||
|
||||
},
|
||||
{
|
||||
|
|
@ -54,235 +69,350 @@ const Column = [
|
|||
prop: 'edit',
|
||||
name: 'edit',
|
||||
type: "slot",
|
||||
width:'auto',
|
||||
width: 'auto',
|
||||
},
|
||||
];
|
||||
|
||||
export default class acclist extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
distdata:[],
|
||||
total:0,
|
||||
combinedValue:[],
|
||||
page:1,
|
||||
limit:10,
|
||||
tabList:[{title:"我的模板列表"}],
|
||||
DateTime:'',//数据更新时间
|
||||
key_word:'',
|
||||
tableHeight:600,
|
||||
dataCount:0,
|
||||
export default class acclist extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
distdata: [],
|
||||
total: 0,
|
||||
combinedValue: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
tabList: [{
|
||||
title: "我的模板列表"
|
||||
}],
|
||||
DateTime: '', //数据更新时间
|
||||
key_word: '',
|
||||
tableHeight: 600,
|
||||
dataCount: 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps,prevState){
|
||||
// 参数分别为改变之前的数据状态对象
|
||||
if(prevState.key_word!=this.state.key_word &&!this.state.key_word){
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
// 参数分别为改变之前的数据状态对象
|
||||
if (prevState.key_word != this.state.key_word && !this.state.key_word) {
|
||||
this.sureFn();
|
||||
}
|
||||
|
||||
this.sureFn();
|
||||
}
|
||||
}
|
||||
}
|
||||
//敲回车查询
|
||||
sureFn(){
|
||||
sureFn() {
|
||||
|
||||
this.setState({page:1});
|
||||
this.setState({limit:10})
|
||||
this.setState({
|
||||
page: 1
|
||||
});
|
||||
this.setState({
|
||||
limit: 10
|
||||
})
|
||||
|
||||
let data = {
|
||||
page:1,
|
||||
limit:10,
|
||||
title:this.state.key_word
|
||||
}
|
||||
let data = {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
title: this.state.key_word
|
||||
}
|
||||
this.getTableList(data);
|
||||
}
|
||||
editFn(e,row){
|
||||
editFn(e, row) {
|
||||
|
||||
if(row.creator == 0 )
|
||||
{
|
||||
Notify.clear();
|
||||
Notify.error("系统模板不可编辑");
|
||||
return
|
||||
}
|
||||
if (row.creator == 0) {
|
||||
Notify.clear();
|
||||
Notify.error("系统模板不可编辑");
|
||||
return
|
||||
}
|
||||
|
||||
sessionStorage.setItem("pageInfo", JSON.stringify(row))
|
||||
sessionStorage.setItem("pageInfo", JSON.stringify(row))
|
||||
|
||||
sessionStorage.setItem("mouldType", 1)
|
||||
sessionStorage.setItem("mouldType", 1)
|
||||
|
||||
sessionStorage.setItem("pageChange", 1)
|
||||
// let link = window.location.href.replace(window.location.hash, "#/edittemplate");
|
||||
// window.open(link, "_blank")
|
||||
window.location.href="/#/edittemplate";
|
||||
}
|
||||
getTableList(data){
|
||||
getTheme(data).then(res=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
sessionStorage.setItem("pageChange", 1)
|
||||
// let link = window.location.href.replace(window.location.hash, "#/edittemplate");
|
||||
// window.open(link, "_blank")
|
||||
window.location.href = "/#/edittemplate";
|
||||
}
|
||||
getTableList(data) {
|
||||
getTheme(data).then(res => {
|
||||
handelResponse(res, (req, msg) => {
|
||||
|
||||
this.setState({dataCount:req.total})
|
||||
this.setState({distdata:req.data})
|
||||
this.setState({
|
||||
dataCount: req.total
|
||||
})
|
||||
this.setState({
|
||||
distdata: req.data
|
||||
})
|
||||
|
||||
},(err)=>{
|
||||
}, (err) => {
|
||||
|
||||
})
|
||||
}).catch(err=>{
|
||||
});
|
||||
}
|
||||
|
||||
componentWillMount(){
|
||||
let selt=this;
|
||||
this.setState({tableHeight:window.innerHeight-390});
|
||||
let data={
|
||||
page:this.state.page,
|
||||
limit:this.state.limit
|
||||
}
|
||||
if(this.state.combinedValue&&this.state.combinedValue[0]){
|
||||
data.begin_time=this.state.combinedValue[0];
|
||||
data.end_time=this.state.combinedValue[1];
|
||||
}
|
||||
this.getTableList(data);
|
||||
}
|
||||
|
||||
//limit
|
||||
countChange(e){
|
||||
this.setState({page:1,limit:e});
|
||||
let data = {
|
||||
page:e,
|
||||
limit:this.state.limit
|
||||
})
|
||||
}).catch(err => {});
|
||||
}
|
||||
|
||||
this.getTableList(data);
|
||||
}
|
||||
componentWillMount() {
|
||||
let selt = this;
|
||||
this.setState({
|
||||
tableHeight: window.innerHeight - 390
|
||||
});
|
||||
let data = {
|
||||
page: this.state.page,
|
||||
limit: this.state.limit
|
||||
}
|
||||
if (this.state.combinedValue && this.state.combinedValue[0]) {
|
||||
data.begin_time = this.state.combinedValue[0];
|
||||
data.end_time = this.state.combinedValue[1];
|
||||
}
|
||||
this.getTableList(data);
|
||||
}
|
||||
|
||||
pageChange(e){
|
||||
this.setState({page:e})
|
||||
let data = {
|
||||
page:e,
|
||||
limit:this.state.limit
|
||||
}
|
||||
if(this.state.key_word){
|
||||
data.title=this.state.key_word;
|
||||
}
|
||||
this.getTableList(data);
|
||||
}
|
||||
//limit
|
||||
countChange(e) {
|
||||
this.setState({
|
||||
page: 1,
|
||||
limit: e
|
||||
});
|
||||
let data = {
|
||||
page: e,
|
||||
limit: this.state.limit
|
||||
}
|
||||
|
||||
newTemplate(e){
|
||||
sessionStorage.setItem("pageInfo",null)
|
||||
let link = window.location.href.replace(window.location.hash, "#/home/mytempMould");
|
||||
window.open(link, "_blank")
|
||||
}
|
||||
this.getTableList(data);
|
||||
}
|
||||
|
||||
pageChange(e) {
|
||||
this.setState({
|
||||
page: e
|
||||
})
|
||||
let data = {
|
||||
page: e,
|
||||
limit: this.state.limit
|
||||
}
|
||||
if (this.state.key_word) {
|
||||
data.title = this.state.key_word;
|
||||
}
|
||||
this.getTableList(data);
|
||||
}
|
||||
|
||||
newTemplate(e) {
|
||||
sessionStorage.setItem("pageInfo", null)
|
||||
let link = window.location.href.replace(window.location.hash, "#/home/mytempMould");
|
||||
window.open(link, "_blank")
|
||||
}
|
||||
|
||||
|
||||
|
||||
delFn(e,row){
|
||||
if(row.creator == 0 )
|
||||
{
|
||||
Notify.error("系统模板不可删除");
|
||||
return
|
||||
}
|
||||
delFn(e, row) {
|
||||
if (row.creator == 0) {
|
||||
Notify.error("系统模板不可删除");
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
||||
let self=this;
|
||||
Sweetalert.confirm({
|
||||
type:'warning',
|
||||
closeBtn:true,
|
||||
title:'确认操作',
|
||||
content: <p>是否删除<b>[{row.title}]</b>？</p>,
|
||||
onConfirm:()=>{
|
||||
delTheme(row.id).then(res=>{
|
||||
handelResponse(res,(response,msg)=>{
|
||||
Notify.clear();
|
||||
Notify.success(msg);
|
||||
let data = {
|
||||
page:this.state.page,
|
||||
limit:this.state.limit,
|
||||
title:this.state.key_word
|
||||
}
|
||||
let self = this;
|
||||
Sweetalert.confirm({
|
||||
type: 'warning',
|
||||
closeBtn: true,
|
||||
title: '确认操作',
|
||||
content: < p > 是否删除 < b > [{
|
||||
row.title
|
||||
}] < /b>？</p > ,
|
||||
onConfirm: () => {
|
||||
delTheme(row.id).then(res => {
|
||||
handelResponse(res, (response, msg) => {
|
||||
Notify.clear();
|
||||
Notify.success(msg);
|
||||
let data = {
|
||||
page: this.state.page,
|
||||
limit: this.state.limit,
|
||||
title: this.state.key_word
|
||||
}
|
||||
|
||||
self.getTableList(data);
|
||||
},(err)=>{
|
||||
self.getTableList(data);
|
||||
}, (err) => {
|
||||
|
||||
})
|
||||
}).catch(err=>{
|
||||
});
|
||||
},
|
||||
onCancel: this.onCancel,
|
||||
className:'questModal',
|
||||
parentComponent: this
|
||||
});
|
||||
}
|
||||
render(){
|
||||
})
|
||||
}).catch(err => {});
|
||||
},
|
||||
onCancel: this.onCancel,
|
||||
className: 'questModal',
|
||||
parentComponent: this
|
||||
});
|
||||
}
|
||||
render() {
|
||||
|
||||
const { current, pageSize } = this.state;
|
||||
return(
|
||||
<div id="exchangecodelist">
|
||||
<TabPage tabs={this.state.tabList}>
|
||||
<p className="codetable dflexj">
|
||||
<
|
||||
Button type = "primary"
|
||||
icon = "plus"
|
||||
onClick={(e)=>{ this.newTemplate(e) }}
|
||||
const {
|
||||
current,
|
||||
pageSize
|
||||
} = this.state;
|
||||
return ( <
|
||||
div id = "exchangecodelist" >
|
||||
<
|
||||
TabPage tabs = {
|
||||
this.state.tabList
|
||||
} >
|
||||
<
|
||||
p className = "codetable dflexj" >
|
||||
<
|
||||
Button type = "primary"
|
||||
icon = "plus"
|
||||
onClick = {
|
||||
(e) => {
|
||||
this.newTemplate(e)
|
||||
}
|
||||
}
|
||||
|
||||
> 新增模板 < /Button>
|
||||
{/* <Button type="info">批量操作</Button> */}
|
||||
<Ipt onClearItem={(e)=>{this.setState({key_word:''})}} wordSearch={this.sureFn.bind(this)} onChange={(e)=>this.setState({key_word:e})} value={this.state.key_word} icon="search" placeholder={"请输入关键字进行匹配查询"} countShow={false} height={'36px'} width={'260px'} alignment={'left'}/>
|
||||
</p>
|
||||
<div className="code-table">
|
||||
<Grid
|
||||
spliteColor={'#fff'}
|
||||
tableData={this.state.distdata}
|
||||
Column={Column}
|
||||
maxheight={this.state.tableHeight}
|
||||
countbarVisible={false}
|
||||
isSwitch={false}
|
||||
page={this.state.page}
|
||||
dataCount={this.state.dataCount}
|
||||
isMultiple={false}
|
||||
pageChange={(e)=>{
|
||||
this.pageChange(e)
|
||||
}}
|
||||
countChange={
|
||||
(e)=>{
|
||||
this.countChange(e)
|
||||
}
|
||||
}
|
||||
checkChange ={(selection)=>{
|
||||
|
||||
}}
|
||||
ComponentHandler={(com,rowData)=>{
|
||||
|
||||
if(com=='thumb'){
|
||||
return <Pop trigger="hover" position="right-center" content={<img src={rowData.thumb} alt="" style={{width:'375px',transform:'scale(.8)'}}/>}>
|
||||
<img src={rowData.thumb} alt="" style={{width:'30px',height:'30px'}}/>
|
||||
</Pop>
|
||||
>
|
||||
新增模板 < /Button> {
|
||||
/* <Button type="info">批量操作</Button> */ } <
|
||||
Ipt onClearItem = {
|
||||
(e) => {
|
||||
this.setState({
|
||||
key_word: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
wordSearch = {
|
||||
this.sureFn.bind(this)
|
||||
}
|
||||
onChange = {
|
||||
(e) => this.setState({
|
||||
key_word: e
|
||||
})
|
||||
}
|
||||
value = {
|
||||
this.state.key_word
|
||||
}
|
||||
icon = "search"
|
||||
placeholder = {
|
||||
"请输入关键字进行匹配查询"
|
||||
}
|
||||
countShow = {
|
||||
false
|
||||
}
|
||||
height = {
|
||||
'36px'
|
||||
}
|
||||
width = {
|
||||
'260px'
|
||||
}
|
||||
alignment = {
|
||||
'left'
|
||||
}
|
||||
/> <
|
||||
/p> <
|
||||
div className = "code-table" >
|
||||
<
|
||||
Grid spliteColor = {
|
||||
'#fff'
|
||||
}
|
||||
tableData = {
|
||||
this.state.distdata
|
||||
}
|
||||
Column = {
|
||||
Column
|
||||
}
|
||||
maxheight = {
|
||||
this.state.tableHeight
|
||||
}
|
||||
countbarVisible = {
|
||||
false
|
||||
}
|
||||
isSwitch = {
|
||||
false
|
||||
}
|
||||
page = {
|
||||
this.state.page
|
||||
}
|
||||
dataCount = {
|
||||
this.state.dataCount
|
||||
}
|
||||
isMultiple = {
|
||||
false
|
||||
}
|
||||
pageChange = {
|
||||
(e) => {
|
||||
this.pageChange(e)
|
||||
}
|
||||
}
|
||||
countChange = {
|
||||
(e) => {
|
||||
this.countChange(e)
|
||||
}
|
||||
}
|
||||
checkChange = {
|
||||
(selection) => {
|
||||
|
||||
}
|
||||
if (com == "client") {
|
||||
return <span > < font className = "icon"
|
||||
style = {
|
||||
{
|
||||
background: menu.pageTypeStatusBg(parseInt(rowData.page))
|
||||
}
|
||||
} > < /font>{menu.pageTypeStatus(parseInt(rowData.page))}</span > ;
|
||||
}
|
||||
}
|
||||
ComponentHandler = {
|
||||
(com, rowData) => {
|
||||
|
||||
if (com == "edit") {
|
||||
return <span >
|
||||
<
|
||||
a
|
||||
className = "grid-link" onClick={(e)=>{
|
||||
this.editFn(e,rowData)
|
||||
}} > 编辑 < /a> <
|
||||
a onClick={(e)=>{this.delFn(e,rowData)}}
|
||||
className = "grid-link" > 删除 < /a>
|
||||
if (com == 'thumb') {
|
||||
return <Pop trigger = "hover"
|
||||
position = "right-center"
|
||||
content = {
|
||||
< img src = {
|
||||
rowData.thumb
|
||||
}
|
||||
alt = ""
|
||||
style = {
|
||||
{
|
||||
width: '375px',
|
||||
transform: 'scale(.8)'
|
||||
}
|
||||
}
|
||||
/>}> <
|
||||
img src = {
|
||||
rowData.thumb
|
||||
}
|
||||
alt = ""
|
||||
style = {
|
||||
{
|
||||
width: '30px',
|
||||
height: '30px'
|
||||
}
|
||||
}
|
||||
/> <
|
||||
/Pop>
|
||||
|
||||
<
|
||||
/span>
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TabPage>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (com == "client") {
|
||||
return <span > < font className = "icon"
|
||||
style = {
|
||||
{
|
||||
background: menu.pageTypeStatusBg(parseInt(rowData.page))
|
||||
}
|
||||
} > < /font>{menu.pageTypeStatus(parseInt(rowData.page))}</span > ;
|
||||
}
|
||||
|
||||
if (com == "edit") {
|
||||
return <span >
|
||||
<
|
||||
a
|
||||
className = "grid-link"
|
||||
onClick = {
|
||||
(e) => {
|
||||
this.editFn(e, rowData)
|
||||
}
|
||||
} > 编辑 < /a> <
|
||||
a onClick = {
|
||||
(e) => {
|
||||
this.delFn(e, rowData)
|
||||
}
|
||||
}
|
||||
className = "grid-link" > 删除 < /a>
|
||||
|
||||
<
|
||||
/span>
|
||||
}
|
||||
}
|
||||
}
|
||||
/> <
|
||||
/div> <
|
||||
/TabPage> <
|
||||
/div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -9,9 +9,31 @@ import "../../../assets/comm.css"
|
|||
import PreviewItem from "./preview.js"
|
||||
import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom} from "../../../assets/api.js"
|
||||
|
||||
window.addEventListener('scroll',function(){
|
||||
console.log('滚动');
|
||||
});
|
||||
|
||||
let model={
|
||||
title:"落地页标题",
|
||||
top_image: "",
|
||||
middle_image: "",
|
||||
describe: {type:"",content :"",bg_image:''},
|
||||
bg_color:"#EEEEEE",
|
||||
sort:1,
|
||||
type_id:{ key:2,text:'通用'},
|
||||
font_color:"#000000",
|
||||
thumb:''
|
||||
}
|
||||
//商品列表
|
||||
let product_list={
|
||||
top_image: "",
|
||||
list:"2",
|
||||
font_color:"#ffffff",
|
||||
button_color: "#FACD6A",
|
||||
describe: {type : "", content : "",bg_image:''},
|
||||
}
|
||||
let product_detail={
|
||||
font_color:"#ffffff",
|
||||
button_color: "#FACD6A",
|
||||
describe:{type: "", content: "",bg_image:''},
|
||||
}
|
||||
export default class mytemplate extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
|
|
@ -225,14 +247,24 @@ export default class mytemplate extends React.Component{
|
|||
|
||||
onPreview(row){
|
||||
let rowdata={};
|
||||
rowdata.model=model;
|
||||
rowdata.product_list=product_list;
|
||||
rowdata.product_detail=product_detail;
|
||||
let exchangedata={}
|
||||
exchangedata.model=model;
|
||||
exchangedata.product_list=product_list;
|
||||
exchangedata.product_detail=product_detail;
|
||||
this.setState({moudleData:row,showPage:1,pageStep:1,activeHeight:667, setStyle:{width:'375px',height:'667px',transform: 'scale(0.75)'}});
|
||||
rowdata.model=row.access_conf.land;
|
||||
rowdata.product_list=row.access_conf.product_list;
|
||||
rowdata.product_detail=row.access_conf.product_detail;
|
||||
exchangedata.model=row.exchange.land;
|
||||
exchangedata.product_list=row.exchange.product_list;
|
||||
exchangedata.product_detail=row.exchange.product_detail;
|
||||
if(row.access_conf){
|
||||
rowdata.model=row.access_conf.land;
|
||||
rowdata.product_list=row.access_conf.product_list;
|
||||
rowdata.product_detail=row.access_conf.product_detail;
|
||||
}
|
||||
if(row.exchange){
|
||||
exchangedata.model=row.exchange.land;
|
||||
exchangedata.product_list=row.exchange.product_list;
|
||||
exchangedata.product_detail=row.exchange.product_detail;
|
||||
}
|
||||
this.setState({preview_url:row.href})
|
||||
this.setState({preview_visible:true,showType:row.page})
|
||||
this.setState({previewwhite:rowdata})
|
||||
|
|
|
|||
Loading…
Reference in New Issue