Skip to content

S
SuperMan
Commit a8168dc2 authored by 罗超's avatar 罗超
Browse files
Options

导航优化功能开发

parent de43cdef
Show whitespace changes
Inline Side-by-side
Showing with 392 additions and 21 deletions
src/components/WebSet/NavigationConfig.vue 0 → 100644
View file @ a8168dc2
<style scoped>
.icon {
height: 30px;
}
</style>>
<template>
<div class="flexOne">
<div class="query-box">
<ul>
<li>
<span><em>名称</em><el-input v-model='msg.NavTitle' class="permiss-input" placeholder="请输入内容"></el-input></span>
</li>
<li>
<span><em>层级</em><el-select v-model="msg.Level" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="一级" value="1"></el-option>
<el-option label="二级" value="2"></el-option>
<el-option label="三级" value="3"></el-option>
</el-select>
</span>
</li>
<li>
<span><em>类型</em><el-select v-model="msg.Type" placeholder="请选择">
<el-option label="不限" value=""></el-option>
<el-option label="顶部" :value="1"></el-option>
<el-option label="底部" :value="2"></el-option>
<el-option label="底部图标" :value="3"></el-option>
</el-select>
</span>
</li>
<li>
<input type="button" class="hollowFixedBtn" name="" id="" value="查询" @click="resetPageIndex(),getList()" />
<input type="button" @click="outerVisible = true,dialogTitle='新增导航',clearMessage();" class="normalBtn" value="新增" />
</li>
</ul>
</div>
<el-table :data="DataList" style="width:100%" border v-loading='loading'>
<el-table-column fixed label="导航名称">
<template slot-scope="scope">
<div>
{{scope.row.NavTitle}}</div>
</template>
</el-table-column>
<el-table-column fixed label="导航地址">
<template slot-scope="scope">
<div>
{{scope.row.NavUrl}}</div>
</template>
</el-table-column>
<el-table-column fixed label="类型">
<template slot-scope="scope">
<div>
{{scope.row.TypeName}}</div>
</template>
</el-table-column>
<el-table-column fixed label="层级">
<template slot-scope="scope">
<div>
{{['', '一级', '二级','三级'][scope.row.Level]}}</div>
</template>
</el-table-column>
<el-table-column fixed label="是否打开新页面">
<template slot-scope="scope">
<div>
{{scope.row.IsNewOpen === 1 ? '是' : '否'}}</div>
</template>
</el-table-column>
<el-table-column fixed label="父级">
<template slot-scope="scope">
<div>
{{scope.row.ParentName}}</div>
</template>
</el-table-column>
<el-table-column fixed label="排序">
<template slot-scope="scope">
<div>
{{scope.row.SortNum}}</div>
</template>
</el-table-column>
<el-table-column fixed label="图标">
<template slot-scope="scope">
<img class="icon" @click="showImage(scope.row.Icon)" :src="scope.row.Icon"/>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,dialogTitle='编辑导航',updateData(scope.row)">
</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
<el-button v-if="!scope.row.IsLock" type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total='total'>
</el-pagination>
<el-dialog :title="dialogTitle" :visible.sync="outerVisible" center width="1000px">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="导航名称" prop="NavTitle">
<el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.NavTitle" maxlength="50" placeholder="导航名称">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跳转地址" prop="NavUrl">
<el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.NavUrl" maxlength="50" placeholder="跳转地址">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型" prop="Type">
<el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.Type" placeholder="请选择类型" @change="handleLevelChange">
<el-option label="顶部" :value="1"></el-option>
<el-option label="底部" :value="2"></el-option>
<el-option label="底部图标" :value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="SortNum">
<el-input style="width:217px" type="number" v-model="addMsg.SortNum" maxlength="10" placeholder="排序">
</el-input>
</el-form-item>
</el-col><el-col :span="12">
<el-form-item label="层级" prop="Level">
<el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.Level" placeholder="请选择" @change="handleLevelChange">
<el-option label="一级" :value="1"></el-option>
<el-option label="二级" :value="2"></el-option>
<el-option label="三级" :value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="父级分类" prop="ParentId">
<!-- <el-tree show-checkbox ref="tree" node-key="Id" :data="cateGoryTree" :props="{label: 'NavTitle', children: 'SubList'}"
check-strictly highlight-current @check-change="handleClick"></el-tree> -->
<el-select :disabled="addMsg.IsLock === 1" filterable v-model="addMsg.ParentId" placeholder="请选择">
<el-option v-for="item in cateGoryList" :key="item.Id" :label="item.NavTitle"
:value="item.Id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否打开新窗口" prop="IsNewOpen">
<el-switch v-model="addMsg.IsNewOpen"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12"><el-form-item label="图标" prop="Icon">
<!-- <el-input :value="addMsg.Icon" style="dispaly: none;" /> -->
<uploadImg :maxNum="1" ref="Icon"></uploadImg>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
<button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
</div>
</el-dialog>
<viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
<template slot-scope="scope">
<img v-for="src in scope.images" :src="src" :key="src">
</template>
</viewer>
</div>
</template>
<script>
import uploadImg from '../../pubComponents/uploadImg'
export default {
components: {uploadImg},
data() {
return {
imageOptions: {
navbar: false,
title: false
},
images: [],
dialogTitle: '',
loading: false,
DataList: [],
cateGoryTree: [],
cateGoryList: [],
total: 0,
pageSize: '',
currentPage: 1,
outerVisible: false,
msg: { //列表查询请求数据
"pageIndex": 1,
'pageSize': 15,
},
addMsg: {
'Level': '',
'ParentId': '',
'NavTitle': '',
'NavUrl': '',
'Icon': '',
'TypeId':'',
'SortNum':'',
'IsNewOpen': true,
},
rules:{
NavTitle:[
{ required: true, message: '请输入导航名称', trigger: 'blur' }
],
Level:[
{ required: true, message: '请选择层级', trigger: 'change' }
],
NavUrl:[
{ required: true, message: '请输入导航地址', trigger: 'blur' }
],
SortNum:[
{ required: true, message: '请输入排序值', trigger: 'blur' }
],
},
}
},
mounted() {
this.getList();
},
methods: {
showImage(src) {
this.$set(this.images, 0, src);
setTimeout(() => {
this.$viewer.show();
}, 1000);
},
inited(viewer) {
this.$viewer = viewer
},
handleClick(data,checked, node){
if(checked){
this.$refs.tree.setCheckedNodes([data]);
this.addMsg.ParentId = data.Id
}
},
getList() { //列表查询
this.loading = true
this.apipost('ws_get_GetNavPageList', this.msg, res => {
if(res.data.resultCode == 1) {
this.DataList = res.data.data.pageData;
this.total = res.data.data.count;
}
this.loading = false
}, err => {this.loading = false})
},
handleLevelChange() {
this.addMsg.ParentId = ''
if(this.addMsg.Level <= 1) {
this.cateGoryList = []
} else {
this.getCateGoryList()
}
},
getCateGoryList() {
this.apipost('ws_get_GetNavList', {Level: Number(this.addMsg.Level) - 1, NavTitle: '', pageIndex: 1, pageSize: 100}, res => {
if(res.data.resultCode == 1) {
this.cateGoryList = res.data.data;
}
}, err => {})
},
addData() { //新增数据
const icon = this.$refs.Icon.ImageList[0]
this.addMsg.Icon = icon
if(!this.addMsg.ParentId && this.addMsg.Level !== 1) {
this.$message.error('请选择父级分类!');
return
}
// if(!icon) {
// this.$message.error('请上传图标!');
// return
// }
let params = {...this.addMsg}
params.IsNewOpen = params.IsNewOpen ? 1 : 2
this.apipost('ws_post_SetNav', params, res => {
if(res.data.resultCode == 1){
this.outerVisible=false;
this.$message.success(res.data.message)
this.getList();
}else{
this.$message.error(res.data.message);
}
}, err => {})
},
updateData({Id}) { //修改
this.apipost('ws_get_GetNav',{Id},res=>{
let params = res.data.data
params.IsNewOpen = params.IsNewOpen === 1
params.ParentId = params.ParentId || ''
this.addMsg = params
this.$refs.Icon.ImageList = params.Icon ? [params.Icon] : []
if(this.addMsg.Level > 1) {
this.getCateGoryList()
}
},err=>{})
},
//删除
deleteData(item) {
var that = this;
that.Confirm("是否删除?", function () {
that.apipost(
"ws_post_RemoveNav", {
Id: item.Id
},
res => {
if (res.data.resultCode == 1) {
that.Success(res.data.message);
that.getList();
} else {
that.Error(res.data.message);
}
},
null
);
});
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
clearMessage() {
this.addMsg = {
'Level': '',
'ParentId': '',
'NavTitle': '',
'NavUrl': '',
'Icon': '',
'TypeId':'',
'SortNum':'',
'IsNewOpen': true,
}
this.$refs.Icon.ImageList = []
this.$refs.tree.setCheckedKeys([]);
},
resetPageIndex() {
this.msg.pageIndex = 1
this.currentPage = 1
},
submitForm(addMsg) {//提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.addData()
} else {
return false;
}
});
},
closeChangeMachie(done){//弹出框关闭初始化弹框内表单
done();
this.resetForm('addMsg');
},
resetForm(formName) {//弹出框取消 初始化谈框内表单
this.$refs[formName].resetFields();
}
}
}
</script>
\ No newline at end of file
src/components/WebSet/WebSiteConfig.vue
View file @ a8168dc2
...@@ -351,7 +351,7 @@ ...@@ -351,7 +351,7 @@
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="導航設定" name="third"> <el-tab-pane label="導航設定" name="third">
<el-col :span="7" style="margin-right:40px;"> <!-- <el-col :span="7" style="margin-right:40px;">
<div class="WebSite_Box"> <div class="WebSite_Box">
<div class="WebSite_Header"> <div class="WebSite_Header">
網站選單設定 網站選單設定
...@@ -376,8 +376,8 @@ ...@@ -376,8 +376,8 @@
</ul> </ul>
</div> </div>
</div> </div>
</el-col> </el-col> -->
<el-col :span="7" style="margin-right:40px;"> <!-- <el-col :span="7" style="margin-right:40px;">
<div class="WebSite_Box"> <div class="WebSite_Box">
<div class="WebSite_Header"> <div class="WebSite_Header">
刊尾選單設定 刊尾選單設定
...@@ -429,7 +429,7 @@ ...@@ -429,7 +429,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</el-col> </el-col> -->
<el-col :span="7" style="margin-right:40px;"> <el-col :span="7" style="margin-right:40px;">
<div class="WebSite_Box"> <div class="WebSite_Box">
<div class="WebSite_Header"> <div class="WebSite_Header">
......
src/components/WebSet/classification.vue
View file @ a8168dc2
...@@ -218,15 +218,6 @@ import uploadImg from '../../pubComponents/uploadImg' ...@@ -218,15 +218,6 @@ import uploadImg from '../../pubComponents/uploadImg'
Level:[ Level:[
{ required: true, message: '请选择层级', trigger: 'change' } { required: true, message: '请选择层级', trigger: 'change' }
], ],
// ParentId:[
// { required: true, message: '请选择父级ID', trigger: 'change' }
// ],
// Icon:[
// { required: true, message: '请上传图标', trigger: 'change' }
// ],
// BackgroundImage:[
// { required: true, message: '请上传背景图片', trigger: 'change' }
// ],
}, },
} }
}, },
...@@ -283,14 +274,14 @@ import uploadImg from '../../pubComponents/uploadImg' ...@@ -283,14 +274,14 @@ import uploadImg from '../../pubComponents/uploadImg'
this.$message.error('请选择父级分类!'); this.$message.error('请选择父级分类!');
return return
} }
if(!icon) { // if(!icon) {
this.$message.error('请上传图标!'); // this.$message.error('请上传图标!');
return // return
} // }
if(!background) { // if(!background) {
this.$message.error('请上传背景图片!'); // this.$message.error('请上传背景图片!');
return // return
} // }
let params = {...this.addMsg} let params = {...this.addMsg}
params.isHot = params.isHot ? 1 : 2 params.isHot = params.isHot ? 1 : 2
params.Enable = params.Enable ? 1 : 2 params.Enable = params.Enable ? 1 : 2
......
src/router/config.js
View file @ a8168dc2
...@@ -5273,6 +5273,14 @@ export default { ...@@ -5273,6 +5273,14 @@ export default {
title: '分类管理' title: '分类管理'
}, },
}, },
{
path: '/NavigationConfig',
name: 'NavigationConfig',
component: resolve => require(['@/components/WebSet/NavigationConfig'], resolve),
meta: {
title: '导航管理'
},
},
{ {
path: '/WebSiteCertificate', //前台网站签证护照管理【自定义前端网站】 path: '/WebSiteCertificate', //前台网站签证护照管理【自定义前端网站】
name: 'WebSiteCertificate', name: 'WebSiteCertificate',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment