Skip to content

C
chinafrica
提交 7c52e83c authored 作者: zgy's avatar zgy
浏览文件
操作

海报管理优化

上级 e94a2d49
隐藏空白字符变更
内嵌 并排
正在显示 包含 274 行增加 和 91 行删除
platform-admin/src/main/webapp/WEB-INF/page/sys/tbcfposters.html
浏览文件 @ 7c52e83c
...@@ -36,6 +36,24 @@ ...@@ -36,6 +36,24 @@
display: flex; display: flex;
justify-content: start; justify-content: start;
} }
.vRadio{
display: inline-block;
width:20px;
height:20px;
background:#eeeeee;
border-radius: 4px;
transition: all 0.4s;
}
.vradio-wrapper{
cursor: pointer;
}
.vRadio-active{
background:#000;
opacity: 0.6;
}
.vradio-wrapper>i{
vertical-align:top;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -80,46 +98,51 @@ ...@@ -80,46 +98,51 @@
<img v-bind:src="tbCfPosters.postersPicture" v-show="!!tbCfPosters.postersPicture"/> <img v-bind:src="tbCfPosters.postersPicture" v-show="!!tbCfPosters.postersPicture"/>
<input type="file" placeholder="图片" @change="tirggerFile($event)"/> <input type="file" placeholder="图片" @change="tirggerFile($event)"/>
</Form-item> </Form-item>
<Form-item label="跳转链接" prop="redirectUrl"> <!-- <Form-item label="跳转链接" prop="redirectUrl">-->
<i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/> <!-- <i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/>-->
</Form-item> <!-- </Form-item>-->
<div id="app"> <div id="app">
<Card class="category-container" > <Card class="category-container" >
<p slot="title"> <p slot="title">
<label v-for="(element,index) in items" :key='index' style="margin-left:20px;"> <span
<input type="checkbox" :checked='element.isChecked' @click='vHandleChange(element,index)' class="v-radio"/> v-for="(element,index) in items" :key='index'
{{element.name}} @click='vHandleChange(element,index)'
</label> style="margin-left:20px;"
class="vradio-wrapper"
>
<span class="vRadio" :class="[element.isChecked?'vRadio-active':null]"></span>
<i>{{element.name}}</i>
</span>
</p> </p>
<section class="edit-container"> <section class="edit-container">
<!-- 链接 --> <!-- 链接 -->
<div v-if='active==0'> <div v-if='typeActive==0'>
<i-Input v-model="link" placeholder="请输入目标链接" /> <i-Input v-model="link" placeholder="请输入目标链接" />
</div> </div>
<!-- 分类子页面 --> <!-- 分类子页面 -->
<div v-else-if='active==1'> <!-- <div v-else-if='typeActive==1'>-->
<span>一级分类</span> <!-- <span>一级分类</span>-->
<i-Select v-model="subcategoryListsActive" style="width:200px"> <!-- <i-Select v-model="subcategoryListsActive" style="width:200px" @on-change="changeSubCateType">-->
<i-Option v-for="item in subCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <!-- <i-Option v-for="item in subCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>-->
</i-Select> <!-- </i-Select>-->
<span style="margin-left:20px;">二级分类</span> <!-- <span style="margin-left:20px;">二级分类</span>-->
<i-Select v-model="subsubCategoryListsActive" style="width:200px"> <!-- <i-Select v-model="subsubCategoryListsActive" style="width:200px">-->
<i-Option v-for="item in subsubCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <!-- <i-Option v-for="item in subsubCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>-->
</i-Select> <!-- </i-Select>-->
</div> <!-- </div>-->
<!-- 商品列表页 --> <!-- 商品列表页 -->
<div v-else-if='active==2' > <div v-else-if='typeActive==1' >
<div class="productList"> <div class="productList">
<div> <div>
<span>一级分类</span> <span>一级分类</span>
<i-Select v-model="categoryListsActive1" style="width:100px"> <i-Select v-model="categoryListsActive1" style="width:100px" @on-change="changeSubCateType">
<i-Option v-for="item in CategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in CategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
<div> <div>
<span style="margin-left:20px;">二级分类</span> <span style="margin-left:20px;" >二级分类</span>
<i-Select v-model="categoryListsActive2" style="width:100px"> <i-Select v-model="categoryListsActive2" @on-change="queryMiniCatagory(2)" style="width:100px">
<i-Option v-for="item in CategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in CategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
...@@ -143,13 +166,13 @@ ...@@ -143,13 +166,13 @@
<div class="productList-style-start"> <div class="productList-style-start">
<div> <div>
<span>一级分类</span> <span>一级分类</span>
<i-Select v-model="commoditycategoryListsActive1" style="width:100px"> <i-Select v-model="commoditycategoryListsActive1" style="width:100px" @on-change="changeSubCateType">
<i-Option v-for="item in commodityCategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in commodityCategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
<div> <div>
<span style="margin-left:20px;">二级分类</span> <span style="margin-left:20px;" >二级分类</span>
<i-Select v-model="commoditycategoryListsActive2" style="width:100px"> <i-Select v-model="commoditycategoryListsActive2" @on-change="queryMiniCatagory(3)" style="width:100px">
<i-Option v-for="item in commodityCategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option> <i-Option v-for="item in commodityCategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select> </i-Select>
</div> </div>
...@@ -167,17 +190,18 @@ ...@@ -167,17 +190,18 @@
<i-Button type="primary" style="width:100px;" @click='handleSearch()'>搜索</i-Button> <i-Button type="primary" style="width:100px;" @click='handleSearch()'>搜索</i-Button>
<i-Button style="width:100px;" @click="resetSelectedCategory('commodity')">重置</i-Button> <i-Button style="width:100px;" @click="resetSelectedCategory('commodity')">重置</i-Button>
</div> </div>
<section> <section id="showItems">
表格内容。。。 表格内容。。。
</section> </section>
</div> </div>
<div class="btn-container"> <!-- <div class="btn-container">-->
<i-Button type="primary" @click='submit()'>确定</i-Button> <!-- <i-Button type="primary" @click='submit()'>确定</i-Button>-->
<i-Button >取消</i-Button> <!-- <i-Button >取消</i-Button>-->
</div> <!-- </div>-->
</section> </section>
</Card> </Card>
</div> </div>
<br/>
<Form-item label="是否展示" prop="isShow"> <Form-item label="是否展示" prop="isShow">
<i-input v-model="tbCfPosters.isShow" placeholder="是否展示"/> <i-input v-model="tbCfPosters.isShow" placeholder="是否展示"/>
</Form-item> </Form-item>
......
platform-admin/src/main/webapp/js/sys/tbcfposters.js
浏览文件 @ 7c52e83c
...@@ -7,37 +7,40 @@ $(function () { ...@@ -7,37 +7,40 @@ $(function () {
{label: '排序', name: 'sort', index: 'sort', width: 80}, {label: '排序', name: 'sort', index: 'sort', width: 80},
{label: '图片', name: 'postersPicture', index: 'posters_picture', width: 80, formatter: imageFormat}, {label: '图片', name: 'postersPicture', index: 'posters_picture', width: 80, formatter: imageFormat},
{label: '跳转链接', name: 'redirectUrl', index: 'redirect_url', width: 80}, {label: '跳转链接', name: 'redirectUrl', index: 'redirect_url', width: 80},
{label: '是否展示', name: 'isShow', index: 'is_show', width: 80, formatter: validFormat}, {label: '是否展示', name: 'isShow', index: 'is_show', width: 80, formatter: validFormat},
{label: '创建时间', name: 'createTime', index: 'create_time', width: 80}, {label: '创建时间', name: 'createTime', index: 'create_time', width: 80},
{label: '备注', name: 'remark', index: 'remark', width: 80} {label: '备注', name: 'remark', index: 'remark', width: 80}
] ]
}); });
}); });
let vm = new Vue({ let vm = new Vue({
el: '#rrapp', el: '#rrapp',
data(){ data() {
return{ return {
active:3, //显示索引 typeActive: 0, //显示索引
items:[ items: [
{
name: '链接',
isChecked: true
},
// {
// name: '分类子页面',
// isChecked: false
// },
{ {
name:'链接', name: '商品列表页',
isChecked:false isChecked: false
},{ }, {
name:'分类子页面', name: '商品',
isChecked:false isChecked: false
},{
name:'商品列表页',
isChecked:false
},{
name:'商品',
isChecked:true
}, },
], ],
/* /*
--链接方式 --链接方式
*/ */
link:null,//链接 link: null,//链接
/* /*
--分类子页面 --分类子页面
*/ */
...@@ -48,7 +51,7 @@ let vm = new Vue({ ...@@ -48,7 +51,7 @@ let vm = new Vue({
label: 'New' label: 'New'
} }
], ],
subcategoryListsActive:null, subcategoryListsActive: null,
// 二级分类 // 二级分类
subsubCategoryLists: [ subsubCategoryLists: [
{ {
...@@ -56,7 +59,7 @@ let vm = new Vue({ ...@@ -56,7 +59,7 @@ let vm = new Vue({
label: 'York' label: 'York'
} }
], ],
subsubCategoryListsActive:null, subsubCategoryListsActive: null,
/* /*
--商品列表页 --商品列表页
*/ */
...@@ -67,7 +70,7 @@ let vm = new Vue({ ...@@ -67,7 +70,7 @@ let vm = new Vue({
label: '一级' label: '一级'
} }
], ],
categoryListsActive1:null, categoryListsActive1: null,
//二级 //二级
CategoryLists2: [ CategoryLists2: [
{ {
...@@ -75,7 +78,7 @@ let vm = new Vue({ ...@@ -75,7 +78,7 @@ let vm = new Vue({
label: '二级' label: '二级'
} }
], ],
categoryListsActive2:null, categoryListsActive2: null,
//三级 //三级
CategoryLists3: [ CategoryLists3: [
{ {
...@@ -83,15 +86,15 @@ let vm = new Vue({ ...@@ -83,15 +86,15 @@ let vm = new Vue({
label: '三级' label: '三级'
} }
], ],
categoryListsActive3:null, categoryListsActive3: null,
// 独立 // 独立
categoryLists:[ categoryLists: [
{ {
value: '独立', value: '独立',
label: '独立' label: '独立'
} }
], ],
categoryListsActive:null, categoryListsActive: null,
/* /*
--商品 --商品
*/ */
...@@ -101,7 +104,7 @@ let vm = new Vue({ ...@@ -101,7 +104,7 @@ let vm = new Vue({
label: '商品一级' label: '商品一级'
} }
], ],
commoditycategoryListsActive1:null, commoditycategoryListsActive1: null,
//二级 //二级
commodityCategoryLists2: [ commodityCategoryLists2: [
{ {
...@@ -109,7 +112,7 @@ let vm = new Vue({ ...@@ -109,7 +112,7 @@ let vm = new Vue({
label: '商品二级' label: '商品二级'
} }
], ],
commoditycategoryListsActive2:null, commoditycategoryListsActive2: null,
//三级 //三级
commodityCategoryLists3: [ commodityCategoryLists3: [
{ {
...@@ -117,9 +120,9 @@ let vm = new Vue({ ...@@ -117,9 +120,9 @@ let vm = new Vue({
label: '商品三级' label: '商品三级'
} }
], ],
commoditycategoryListsActive3:null, commoditycategoryListsActive3: null,
// 搜索 // 搜索
search:null, search: null,
showList: true, showList: true,
title: null, title: null,
tbCfPosters: {}, tbCfPosters: {},
...@@ -134,6 +137,42 @@ let vm = new Vue({ ...@@ -134,6 +137,42 @@ let vm = new Vue({
} }
}, },
methods: { methods: {
//获取二级分类
changeGoodstype() {
let url = "../tbcfstationitem/queryByItemType?typeId=" + this.tbCfStationItem.itemCategory;
// console.log('url',url)
let that = this;
Ajax.request({
url: url,
type: "get",
contentType: "application/json",
successCallback: function (r) {
if (r.code === 0) {
that.Goodstype2 = r.list
if (r.list.length === 0) {
that.tbCfStationItem.itemCategorytwo = null
}
}
}
});
},
changeGoodstype2() {
let url = "../tbcfstationitem/queryByItemTypeTwo?typeTwoId=" + this.tbCfStationItem.itemCategorytwo;
let that = this;
Ajax.request({
url: url,
type: "get",
contentType: "application/json",
successCallback: function (r) {
if (r.code === 0) {
that.Goodstype3 = r.descripiton
if (r.descripiton.length === 0) {
that.tbCfStationItem.itemDescritionId = null
}
}
}
});
},
query: function () { query: function () {
vm.reload(); vm.reload();
}, },
...@@ -141,6 +180,7 @@ let vm = new Vue({ ...@@ -141,6 +180,7 @@ let vm = new Vue({
vm.showList = false; vm.showList = false;
vm.title = "新增"; vm.title = "新增";
vm.tbCfPosters = {}; vm.tbCfPosters = {};
}, },
update: function (event) { update: function (event) {
let id = getSelectedRow("#jqGrid"); let id = getSelectedRow("#jqGrid");
...@@ -151,6 +191,7 @@ let vm = new Vue({ ...@@ -151,6 +191,7 @@ let vm = new Vue({
vm.title = "修改"; vm.title = "修改";
vm.getInfo(id); vm.getInfo(id);
}, },
saveOrUpdate: function (event) { saveOrUpdate: function (event) {
let url = vm.tbCfPosters.id == null ? "../tbcfposters/save" : "../tbcfposters/update"; let url = vm.tbCfPosters.id == null ? "../tbcfposters/save" : "../tbcfposters/update";
...@@ -166,6 +207,16 @@ let vm = new Vue({ ...@@ -166,6 +207,16 @@ let vm = new Vue({
} }
}); });
}, },
getItemList: function () {
Ajax.request({
url: "../tbcfstationitem/list",
async: true,
successCallback: function (r) {
vm.itemList = r.list;
console(123456789, vm.itemList);
}
});
},
del: function (event) { del: function (event) {
let ids = getSelectedRows("#jqGrid"); let ids = getSelectedRows("#jqGrid");
if (ids == null) { if (ids == null) {
...@@ -194,6 +245,7 @@ let vm = new Vue({ ...@@ -194,6 +245,7 @@ let vm = new Vue({
vm.tbCfPosters = r.tbCfPosters; vm.tbCfPosters = r.tbCfPosters;
} }
}); });
}, },
reload: function (event) { reload: function (event) {
vm.showList = true; vm.showList = true;
...@@ -211,9 +263,33 @@ let vm = new Vue({ ...@@ -211,9 +263,33 @@ let vm = new Vue({
vm.reload(); vm.reload();
}, },
handleSubmit: function (name) { handleSubmit: function (name) {
handleSubmitValidate(this, name, function () { let postersType = this.typeActive; //海报类型
vm.saveOrUpdate() let redirectUrl = null
}); switch (this.typeActive) {
case 0:
redirectUrl = this.link;
console.log('保存连接方式',redirectUrl);
break;
case 1:
!this.subcategoryListsActive?this.$Message.info('请至少选择一级分类'):(()=>{
if(this.subsubCategoryListsActive){
redirectUrl = this.subcategoryListsActive+','+this.subsubCategoryListsActive
}else{
redirectUrl = this.subcategoryListsActive
}
console.log('保存分类子页面',redirectUrl)
})()
break;
case 2:
console.log('保存商品列表页')
break;
case 3:
console.log('保存商品')
break;
}
// handleSubmitValidate(this, name, function () {
// vm.saveOrUpdate()
// });
}, },
handleReset: function (name) { handleReset: function (name) {
handleResetForm(this, name); handleResetForm(this, name);
...@@ -241,48 +317,131 @@ let vm = new Vue({ ...@@ -241,48 +317,131 @@ let vm = new Vue({
} }
}); });
}, },
$(name){ $(name) {
return document.querySelectorAll(name); return document.querySelectorAll(name);
}, },
//切换海报导航定向方式 //切换海报导航定向方式
vHandleChange(element,_index){ vHandleChange(element, _index) {
this.$('.v-radio').forEach((item,index)=>{ this.items.forEach((item, index) => {
item.checked = false; item.isChecked = false
}) })
setTimeout(()=>{ this.typeActive = _index;
this.$('.v-radio')[_index].checked = true; this.items[_index].isChecked = true;
_index!==3?this.$('.v-radio')[3].checked = false:null;
},0)
this.active = _index;
}, },
/* 重置选中的类别 */ /* 重置选中的类别 */
resetSelectedCategory(e){ resetSelectedCategory(e) {
if(e==='commodity'){ if (e === 'commodity') {
this.search=this.commoditycategoryListsActive1=this.commoditycategoryListsActive2=this.commoditycategoryListsActive3=null; this.search = this.commoditycategoryListsActive1 = this.commoditycategoryListsActive2 = this.commoditycategoryListsActive3 = null;
}else{ } else {
this.categoryListsActive=this.categoryListsActive3=this.categoryListsActive2=this.categoryListsActive1=null; this.categoryListsActive = this.categoryListsActive3 = this.categoryListsActive2 = this.categoryListsActive1 = null;
} }
}, },
/* 搜索 */ /* 搜索 */
handleSearch(){ handleSearch() {
this.search?alert('你搜索的内容是'+this.search):alert('未输入搜索内容~'); this.search ? alert('你搜索的内容是' + this.search) : alert('未输入搜索内容~');
}, },
/* 确定 */ /* 确定 */
submit(){ submit() {
if(this.active===0){ if (this.typeActive === 0) {
this.$Message.info('你提交的内容是'+this.items[this.active].name) this.$Message.info('你提交的内容是' + this.items[this.typeActive].name)
}else if(this.active===1){ } else if (this.typeActive === 1) {
this.$Message.info('你提交的内容是'+this.items[this.active].name) this.$Message.info('你提交的内容是' + this.items[this.typeActive].name)
}else if(this.active===1){ } else if (this.typeActive === 1) {
this.$Message.info('你提交的内容是'+this.items[this.active].name) this.$Message.info('你提交的内容是' + this.items[this.typeActive].name)
}else { } else {
this.$Message.info('你提交的内容是'+this.items[this.active].name) this.$Message.info('你提交的内容是' + this.items[this.typeActive].name)
} }
},
//获取分类子页面二级分类数据
changeSubCateType(){
let ID = null;
if(this.typeActive===1000){
ID = this.subcategoryListsActive
}else if(this.typeActive===1){
ID = this.categoryListsActive1
}else{
ID = this.commoditycategoryListsActive1
}
this.subsubCategoryLists = [];
this.CategoryLists2 = [];
this.commodityCategoryLists2 = [];
$.get('../tbcfstationitem/queryByItemType?typeId='+ID, res => {
let _res = JSON.parse(res);
_res.code===0?(()=>{
if(this.typeActive===1000){
_res.list.forEach((item)=>{
this.subsubCategoryLists.push({
label:item.goodstwotypeTitle,
value:item.goodstwotypeId
})
})
}else if(this.typeActive===1){
_res.list.forEach((item)=>{
this.CategoryLists2.push({
label:item.goodstwotypeTitle,
value:item.goodstwotypeId
})
})
}else{
_res.list.forEach((item)=>{
this.commodityCategoryLists2.push({
label:item.goodstwotypeTitle,
value:item.goodstwotypeId
})
})
}
})():null
})
},
//查询三级分类
queryMiniCatagory(status){
let ID = null
status===2?ID = this.categoryListsActive2:ID = this.commoditycategoryListsActive2
$.get('../tbcfstationitem/queryByItemTypeTwo?typeTwoId='+ID, res => {
this.CategoryLists3 = [];
this.commodityCategoryLists3 = [];
let _res = JSON.parse(res);
_res.code===0?(()=>{
_res.descripiton.forEach((item)=>{
this.CategoryLists3.push({
label:item.descripitionName,
value:item.descripitionId
})
this.commodityCategoryLists3.push({
label:item.descripitionName,
value:item.descripitionId
})
})
console.log(this.CategoryLists3)
})():null
})
} }
}
,
created() {
//获取分类子页面一级分类数据
$.get('../tbcfgoodstype/queryAll', res => {
res.code===0?(()=>{
this.subCategoryLists = [];
this.commodityCategoryLists1 = [];
this.CategoryLists1= [];
res.list.forEach((item)=>{
this.subCategoryLists.push({
label:item.goodstypeTitle,
value:item.goodstypeId
});
this.commodityCategoryLists1.push({
label:item.goodstypeTitle,
value:item.goodstypeId
});
this.CategoryLists1.push({
label:item.goodstypeTitle,
value:item.goodstypeId
})
})
})():null
})
}, },
created(){ mounted() {
},
mounted(){
} }
}); });
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论