console
var Main = {
data() {
return {
chooseFormVisible: false,
kuPage:[{id:1,title:'火锅季',createData:'2018-12-13'},{id:12,title:'健身季',createData:'2018-12-13'},{id:23,title:'美食季',createData:'2018-12-13'}],
kuForm: {
titleRadio:'1'
},
bannerForm: 'left',
detailPage:[{id:1,title:'双人SPA',createData:'2018-12-13'},{id:12,title:'出国旅游',createData:'2018-12-13'},{id:23,title:'香河游',createData:'2018-12-13'}],
fileList: [],
list:[{id:1,city:'北京'},{id:2,city:'上海'},{id:3,city:'深圳'}],
popList:[{id:1,name:'教育型城市弹窗'},{id:2,name:'健康型城市弹窗'},{id:3,name:'美食型城市弹窗'}],
activeName: 'first',
radioCity: '2',
radioBanner: '2',
dialogFormVisible: false,
cityShow : true,
cityForm: {
city: ''
},
popCityForm:{
popCityRadio:'1'
},
bannerForm: {
show:false
},
rules: {
city:[
{ required: true, message: '请选择城市名称', trigger: 'change' }
]
},
rulesCity: {
popCityRadio:[
{ required: true, message: '请选择城市弹窗', trigger: 'change' }
]
},
urlForm: {
url: ''
},
urlRules: {
url: [
{ required: true, message: '请输入URL', trigger: 'blur' }
]
},
};
},
methods: {
changeKuRadio(value){
console.log(value);
},
changeDetailRadio(value){
console.log(value);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleClick(tab, event) {
console.log(tab, event);
},
changeHandler(value) {
if(value=='2'){
this.cityShow=true
}else{
this.cityShow=false
}
},
changeBanner(value) {
if(value=='2'){
this.cityShow=true
}else{
this.cityShow=false
}
},
changeCityRadio(value){
console.log(value);
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
submitCityForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
} else {
console.log('error submit!!');
return false;
}
this.dialogFormVisible=false;
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.2.0/lib/index.js"></script>
<div id="app">
<el-form :model="firstForm" label-width="80px">
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="城市筛选" name="first">
<div>
<el-radio-group v-model="radioCity" @change="changeHandler">
<el-radio class="radio" label="1">显示组件</el-radio>
<el-radio class="radio" label="2">不显示组件</el-radio>
</el-radio-group>
</div>
<el-form ref="cityForm" :rules="rules" ref="cityForm" :model="cityForm" v-if="cityShow" label-width="80px">
<el-form-item label="城市名称" prop="city">
<el-select v-model="cityForm.city" placeholder="请选择城市">
<el-option v-for="(item,index) in list"
:label="item.city" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="链接">
<el-button type="primary" @click="dialogFormVisible = true">选择对象</el-button>
</el-form-item>
</el-form>
<el-form-item>
<el-button type="primary" @click="submitForm('cityForm')">下一步</el-button>
<el-button @click="resetForm('cityForm')">重置</el-button>
</el-form-item>
<el-dialog title="弹窗" :visible.sync="dialogFormVisible">
<el-tabs type="border-card">
<el-tab-pane label="城市筛选弹窗">
<el-form :model="popCityForm" :rules="rulesCity" ref="popCityForm">
<template>
<el-table highlight-current-row :data="popList" stripe style="width: 100%">
<el-table-column label="选择" width="180">
<template scope="scope">
<el-radio @change="changeCityRadio(scope.row.id)" :label="null" ></el-radio>
</template>
</el-table-column>
<el-table-column property="name" label="标题" width="180">
</el-table-column>
</el-table>
</template>
<el-form-item label="选择了"> </el-form-item>
<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
<el-form-item>
<el-button type="primary" @click="submitCityForm('popCityForm')">确定</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-dialog>
</el-tab-pane>
<el-tab-pane label="Banner组件" name="second">
<div>
<el-radio-group v-model="radioBanner" @change="changeBanner">
<el-radio class="radio" label="1">显示组件</el-radio>
<el-radio class="radio" label="2">不显示组件</el-radio>
</el-radio-group>
</div>
<el-form ref="bannerForm" :model="bannerForm" v-if="show" label-width="80px">
<el-button type="text">第一个Banner(必填)</el-button>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<el-form-item label="链接">
<el-button type="primary" @click="chooseFormVisible = true">选择对象</el-button>
</el-form-item>
<el-dialog title="选择对象" :visible.sync="chooseFormVisible">
<el-form :model="objectsForm">
<template>
<el-tabs v-model="activeName2" @tab-click="objectClick">
<el-tab-pane label="ku页面" name="first">
<el-form ref="kuForm" :model="kuForm" label-width="80px">
<template>
<el-table highlight-current-row :data="kuPage" stripe style="width: 100%">
<el-table-column label="选择" width="180">
<template scope="scope">
<el-radio @change="changeKuRadio(scope.row.id)" :label="null" ></el-radio>
</template>
</el-table-column>
<el-table-column property="title" label="标题" width="180">
</el-table-column>
<el-table-column property="createData" label="更新日期" width="180">
</el-table-column>
</el-table>
</template>
</el-form>
</el-tab-pane>
<el-tab-pane label="详情页" name="second">
<el-tabs v-model="activeName3" @tab-click="detailClick">
<el-tab-pane label="产品详情" name="first">
<el-form ref="proDetailForm" :model="proDetailForm" label-width="80px">
<template>
<el-table highlight-current-row :data="detailPage" stripe style="width: 100%">
<el-table-column label="选择" width="180">
<template scope="scope">
<el-radio @change="changeDetailRadio(scope.row.id)" :label="null" ></el-radio>
</template>
</el-table-column>
<el-table-column property="title" label="标题" width="180">
</el-table-column>
<el-table-column property="createData" label="更新日期" width="180">
</el-table-column>
</el-table>
</template>
</el-form>
</el-tab-pane>
<el-tab-pane label="文章详情" name="second"></el-tab-pane>
<el-tab-pane label="KOL详情" name="third"></el-tab-pane>
<el-tab-pane label="品牌详情" name="fourth"></el-tab-pane>
<el-tab-pane label="场景详情" name="fifth"></el-tab-pane>
<el-tab-pane label="O2O商家详情" name="sixth"></el-tab-pane>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="URL" name="third">
<el-form :model="urlForm" :rules="urlRules" ref="urlForm" label-width="100px">
<el-form-item label="请输入URL" prop="url">
<el-input v-model="urlForm.url"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="不可点击" name="fourth">
</el-tab-pane>
</el-tabs>
</template>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="chooseFormVisible = false">取 消</el-button>
<el-button type="primary" @click="chooseFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</el-form>
</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</template>
</el-form>
</div>
<script id="pop-list" type="text/x-template">
<ul>
<li v-for="(pop, index) in popList">
<slot :row="pop" :$index="index"></slot>
</li>
</ul>
</script>
<script id="tb-list" type="text/x-template">
<ul>
<li v-for="(ku, index) in kuPage">
<slot :row="ku" :$index="index"></slot>
</li>
</ul>
</script>
<script id="detail-list" type="text/x-template">
<ul>
<li v-for="(detail, index) in detailPage">
<slot :row="detail" :$index="index"></slot>
</li>
</ul>
</script>
@import url("//unpkg.com/element-ui@2.2.0/lib/theme-chalk/index.css");