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 @@
display: flex;
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>
</head>
<body>
......@@ -80,46 +98,51 @@
<img v-bind:src="tbCfPosters.postersPicture" v-show="!!tbCfPosters.postersPicture"/>
<input type="file" placeholder="图片" @change="tirggerFile($event)"/>
</Form-item>
<Form-item label="跳转链接" prop="redirectUrl">
<i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/>
</Form-item>
<!-- <Form-item label="跳转链接" prop="redirectUrl">-->
<!-- <i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/>-->
<!-- </Form-item>-->
<div id="app">
<Card class="category-container" >
<p slot="title">
<label v-for="(element,index) in items" :key='index' style="margin-left:20px;">
<input type="checkbox" :checked='element.isChecked' @click='vHandleChange(element,index)' class="v-radio"/>
{{element.name}}
</label>
<span
v-for="(element,index) in items" :key='index'
@click='vHandleChange(element,index)'
style="margin-left:20px;"
class="vradio-wrapper"
>
<span class="vRadio" :class="[element.isChecked?'vRadio-active':null]"></span>
<i>{{element.name}}</i>
</span>
</p>
<section class="edit-container">
<!-- 链接 -->
<div v-if='active==0'>
<div v-if='typeActive==0'>
<i-Input v-model="link" placeholder="请输入目标链接" />
</div>
<!-- 分类子页面 -->
<div v-else-if='active==1'>
<span>一级分类</span>
<i-Select v-model="subcategoryListsActive" style="width:200px">
<i-Option v-for="item in subCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
<!-- <div v-else-if='typeActive==1'>-->
<!-- <span>一级分类</span>-->
<!-- <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-Select>-->
<span style="margin-left:20px;">二级分类</span>
<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-Select>
</div>
<!-- <span style="margin-left:20px;">二级分类</span>-->
<!-- <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-Select>-->
<!-- </div>-->
<!-- 商品列表页 -->
<div v-else-if='active==2' >
<div v-else-if='typeActive==1' >
<div class="productList">
<div>
<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-Select>
</div>
<div>
<span style="margin-left:20px;">二级分类</span>
<i-Select v-model="categoryListsActive2" style="width:100px">
<span style="margin-left:20px;" >二级分类</span>
<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-Select>
</div>
......@@ -143,13 +166,13 @@
<div class="productList-style-start">
<div>
<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-Select>
</div>
<div>
<span style="margin-left:20px;">二级分类</span>
<i-Select v-model="commoditycategoryListsActive2" style="width:100px">
<span style="margin-left:20px;" >二级分类</span>
<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-Select>
</div>
......@@ -167,17 +190,18 @@
<i-Button type="primary" style="width:100px;" @click='handleSearch()'>搜索</i-Button>
<i-Button style="width:100px;" @click="resetSelectedCategory('commodity')">重置</i-Button>
</div>
<section>
<section id="showItems">
表格内容。。。
</section>
</div>
<div class="btn-container">
<i-Button type="primary" @click='submit()'>确定</i-Button>
<i-Button >取消</i-Button>
</div>
<!-- <div class="btn-container">-->
<!-- <i-Button type="primary" @click='submit()'>确定</i-Button>-->
<!-- <i-Button >取消</i-Button>-->
<!-- </div>-->
</section>
</Card>
</div>
<br/>
<Form-item label="是否展示" prop="isShow">
<i-input v-model="tbCfPosters.isShow" placeholder="是否展示"/>
</Form-item>
......
platform-admin/src/main/webapp/js/sys/tbcfposters.js
浏览文件 @ 7c52e83c
......@@ -12,32 +12,35 @@ $(function () {
{label: '备注', name: 'remark', index: 'remark', width: 80}
]
});
});
let vm = new Vue({
el: '#rrapp',
data(){
return{
active:3, //显示索引
items:[
data() {
return {
typeActive: 0, //显示索引
items: [
{
name: '链接',
isChecked: true
},
// {
// name: '分类子页面',
// isChecked: false
// },
{
name:'链接',
isChecked:false
},{
name:'分类子页面',
isChecked:false
},{
name:'商品列表页',
isChecked:false
},{
name:'商品',
isChecked:true
name: '商品列表页',
isChecked: false
}, {
name: '商品',
isChecked: false
},
],
/*
--链接方式
*/
link:null,//链接
link: null,//链接
/*
--分类子页面
*/
......@@ -48,7 +51,7 @@ let vm = new Vue({
label: 'New'
}
],
subcategoryListsActive:null,
subcategoryListsActive: null,
// 二级分类
subsubCategoryLists: [
{
......@@ -56,7 +59,7 @@ let vm = new Vue({
label: 'York'
}
],
subsubCategoryListsActive:null,
subsubCategoryListsActive: null,
/*
--商品列表页
*/
......@@ -67,7 +70,7 @@ let vm = new Vue({
label: '一级'
}
],
categoryListsActive1:null,
categoryListsActive1: null,
//二级
CategoryLists2: [
{
......@@ -75,7 +78,7 @@ let vm = new Vue({
label: '二级'
}
],
categoryListsActive2:null,
categoryListsActive2: null,
//三级
CategoryLists3: [
{
......@@ -83,15 +86,15 @@ let vm = new Vue({
label: '三级'
}
],
categoryListsActive3:null,
categoryListsActive3: null,
// 独立
categoryLists:[
categoryLists: [
{
value: '独立',
label: '独立'
}
],
categoryListsActive:null,
categoryListsActive: null,
/*
--商品
*/
......@@ -101,7 +104,7 @@ let vm = new Vue({
label: '商品一级'
}
],
commoditycategoryListsActive1:null,
commoditycategoryListsActive1: null,
//二级
commodityCategoryLists2: [
{
......@@ -109,7 +112,7 @@ let vm = new Vue({
label: '商品二级'
}
],
commoditycategoryListsActive2:null,
commoditycategoryListsActive2: null,
//三级
commodityCategoryLists3: [
{
......@@ -117,9 +120,9 @@ let vm = new Vue({
label: '商品三级'
}
],
commoditycategoryListsActive3:null,
commoditycategoryListsActive3: null,
// 搜索
search:null,
search: null,
showList: true,
title: null,
tbCfPosters: {},
......@@ -134,6 +137,42 @@ let vm = new Vue({
}
},
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 () {
vm.reload();
},
......@@ -141,6 +180,7 @@ let vm = new Vue({
vm.showList = false;
vm.title = "新增";
vm.tbCfPosters = {};
},
update: function (event) {
let id = getSelectedRow("#jqGrid");
......@@ -151,6 +191,7 @@ let vm = new Vue({
vm.title = "修改";
vm.getInfo(id);
},
saveOrUpdate: function (event) {
let url = vm.tbCfPosters.id == null ? "../tbcfposters/save" : "../tbcfposters/update";
......@@ -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) {
let ids = getSelectedRows("#jqGrid");
if (ids == null) {
......@@ -194,6 +245,7 @@ let vm = new Vue({
vm.tbCfPosters = r.tbCfPosters;
}
});
},
reload: function (event) {
vm.showList = true;
......@@ -211,9 +263,33 @@ let vm = new Vue({
vm.reload();
},
handleSubmit: function (name) {
handleSubmitValidate(this, name, function () {
vm.saveOrUpdate()
});
let postersType = this.typeActive; //海报类型
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) {
handleResetForm(this, name);
......@@ -241,48 +317,131 @@ let vm = new Vue({
}
});
},
$(name){
$(name) {
return document.querySelectorAll(name);
},
//切换海报导航定向方式
vHandleChange(element,_index){
this.$('.v-radio').forEach((item,index)=>{
item.checked = false;
vHandleChange(element, _index) {
this.items.forEach((item, index) => {
item.isChecked = false
})
setTimeout(()=>{
this.$('.v-radio')[_index].checked = true;
_index!==3?this.$('.v-radio')[3].checked = false:null;
},0)
this.active = _index;
this.typeActive = _index;
this.items[_index].isChecked = true;
},
/* 重置选中的类别 */
resetSelectedCategory(e){
if(e==='commodity'){
this.search=this.commoditycategoryListsActive1=this.commoditycategoryListsActive2=this.commoditycategoryListsActive3=null;
}else{
this.categoryListsActive=this.categoryListsActive3=this.categoryListsActive2=this.categoryListsActive1=null;
resetSelectedCategory(e) {
if (e === 'commodity') {
this.search = this.commoditycategoryListsActive1 = this.commoditycategoryListsActive2 = this.commoditycategoryListsActive3 = null;
} else {
this.categoryListsActive = this.categoryListsActive3 = this.categoryListsActive2 = this.categoryListsActive1 = null;
}
},
/* 搜索 */
handleSearch(){
this.search?alert('你搜索的内容是'+this.search):alert('未输入搜索内容~');
handleSearch() {
this.search ? alert('你搜索的内容是' + this.search) : alert('未输入搜索内容~');
},
/* 确定 */
submit(){
if(this.active===0){
this.$Message.info('你提交的内容是'+this.items[this.active].name)
}else if(this.active===1){
this.$Message.info('你提交的内容是'+this.items[this.active].name)
}else if(this.active===1){
this.$Message.info('你提交的内容是'+this.items[this.active].name)
}else {
this.$Message.info('你提交的内容是'+this.items[this.active].name)
submit() {
if (this.typeActive === 0) {
this.$Message.info('你提交的内容是' + this.items[this.typeActive].name)
} else if (this.typeActive === 1) {
this.$Message.info('你提交的内容是' + this.items[this.typeActive].name)
} else if (this.typeActive === 1) {
this.$Message.info('你提交的内容是' + this.items[this.typeActive].name)
} else {
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
})
},
created(){
//查询三级分类
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
})
},
mounted(){
mounted() {
}
});
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论