parent
99d7f85580
commit
c8bad88c91
7 changed files with 441 additions and 6 deletions
@ -0,0 +1,412 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-input placeholder="请输入标题/按钮文字" v-model.trim="keyword" clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="primary" @click="add">新增</el-button> |
||||
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" @click="batchDel">删除</el-button> |
||||
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:更改排序'" class="lg" @click="sort">更改排序</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table v-loading="listLoading" ref="table" :data="list" default-expand-all class="table" header-align="center" |
||||
@selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column prop="title" show-overflow-tooltip label="标题" min-width="140"></el-table-column> |
||||
<el-table-column prop="scopeOfApplication" label="图标" min-width="140"> |
||||
<template slot-scope="scope"> |
||||
<img v-if="scope.row.icon" :src="scope.row.icon" alt="" class="icon m-t-10 m-b-10"> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="buttonText" label="按钮文字" min-width="140" align="center"></el-table-column> |
||||
<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column> |
||||
<el-table-column prop="updateTime" label="最近编辑" width="160"></el-table-column> |
||||
<el-table-column prop="editorSName" label="编辑人" width="120"></el-table-column> |
||||
<el-table-column label="状态" width="100"> |
||||
<template slot-scope="scope">{{ scope.row.isDisable ? '禁用' : '启用' }}</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="160"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text" |
||||
@click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text" |
||||
@click="del(scope.row)">删除</el-button> |
||||
<el-switch class="m-l-10" v-model="scope.row.isDisable" :active-value="0" :inactive-value="1" |
||||
@change="switchOff(scope.row)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<el-dialog title="导航图标设置" :visible.sync="moduleVisible" width="1000px" :close-on-click-modal="false"> |
||||
<el-form ref="form" :model="form" label-suffix="：" label-width="130px"> |
||||
<el-form-item label="标题" required> |
||||
<el-input style="width: 200px" placeholder="请输入标题" v-model="form.title" clearable maxlength="10"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="按钮文字"> |
||||
<div class="flex"> |
||||
<el-input style="width: 200px" placeholder="请输入按钮文字" v-model="form.buttonText" clearable |
||||
maxlength="10"></el-input> |
||||
<p class="m-l-10">按钮文字和图标至少填写一个</p> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="图标"> |
||||
<el-upload accept=".jpg,.png,.jpeg" :action="this.api.upload" :on-remove="handleRemove" |
||||
:on-error="uploadError" :before-remove="beforeRemove" :headers="headers" :file-list="fileList" |
||||
:on-success="res => uploadSuccess(res, 'icon')"> |
||||
<div style="text-align: left;"> |
||||
<el-button size="small" type="primary">上传图标</el-button> |
||||
{{ form.icon }} |
||||
<div class="m-t-10"> |
||||
<img v-if="form.icon" :src="form.icon" class="icon"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>只能上传jpg/png/svg文件，请上传25*25以内的图标</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="按钮内容设置" required> |
||||
<el-radio-group class="m-t-10" v-model="form.buttonContent"> |
||||
<el-radio label="0">链接</el-radio> |
||||
<el-radio label="1">图片</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
|
||||
<template v-if="form.buttonContent === '0'"> |
||||
<el-form-item label="链接地址" required> |
||||
<el-input style="width: 200px" placeholder="请输入链接地址" v-model="form.linkAddress" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="是否新开页面"> |
||||
<el-switch v-model="form.newTab" :active-value="1" :inactive-value="0"> |
||||
</el-switch> |
||||
</el-form-item> |
||||
</template> |
||||
|
||||
<el-form-item v-else-if="form.buttonContent === '1'" label="图片"> |
||||
<el-upload accept=".jpg,.png,.jpeg" :action="this.api.upload" :on-error="uploadError" |
||||
:before-remove="beforeRemove" :headers="headers" :show-file-list="false" |
||||
:on-success="res => uploadSuccess(res, 'imagePath')"> |
||||
<div style="text-align: left;"> |
||||
<el-button size="small" type="primary">上传图片</el-button> |
||||
<div class="m-t-10"> |
||||
<img v-if="form.imagePath" :src="form.imagePath" style="max-width: 100px;"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>只能上传jpg/png/svg文件，请上传1920px以内的图片</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="moduleVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="moduleSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="编辑栏目排序" :visible.sync="sortVisible" width="750px" :close-on-click-modal="false"> |
||||
<div class="sort-wrap"> |
||||
<ul class="thead"> |
||||
<li style="width: 300px;padding-left: 30px">标题</li> |
||||
<li style="width: 280px">图标</li> |
||||
<li>按钮文字</li> |
||||
</ul> |
||||
<el-tree class="sort" :data="sortColumns" node-key="id" default-expand-all draggable :allow-drop="allowDrop"> |
||||
<ul class="sort-line" slot-scope="{ node, data }"> |
||||
<li>{{ data.title }}</li> |
||||
<li><img v-if="data.icon" :src="data.icon" alt="" style="max-height: 20px"></li> |
||||
<li>{{ data.buttonText }}</li> |
||||
</ul> |
||||
</el-tree> |
||||
</div> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="sortVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="sortSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import Axios from 'axios' |
||||
import _ from 'lodash' |
||||
export default { |
||||
data () { |
||||
return { |
||||
headers: { |
||||
token: Util.local.get(Setting.tokenKey) |
||||
}, |
||||
siteId: this.$store.state.content.site.id, |
||||
siteName: this.$store.state.content.site.siteName, |
||||
keyword: '', |
||||
searchTimer: null, |
||||
list: [], |
||||
multipleSelection: [], |
||||
listLoading: false, |
||||
originForm: {}, |
||||
form: { |
||||
editorId: this.$store.state.user.userId, |
||||
title: '', |
||||
type: '', |
||||
newTab: 1, |
||||
linkAddress: '', |
||||
imagePath: '', |
||||
icon: '', |
||||
buttonText: '', |
||||
buttonContent: '', |
||||
siteId: this.$store.state.content.site.id, |
||||
}, |
||||
fileList: [], |
||||
moduleVisible: false, |
||||
|
||||
sortVisible: false, |
||||
sortColumns: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理' |
||||
}, |
||||
{ |
||||
name: '导航图标设置' |
||||
} |
||||
]) |
||||
this.originForm = _.cloneDeep(this.form) |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData () { |
||||
this.$post(`${this.api.navList}?siteId=${this.siteId}`, { |
||||
siteId: this.siteId, |
||||
search: this.keyword, |
||||
}).then(({ data }) => { |
||||
this.list = data |
||||
this.listLoading = false |
||||
}).catch(err => { |
||||
this.listLoading = false |
||||
}) |
||||
}, |
||||
// 重置列表 |
||||
initData () { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
add () { |
||||
this.fileList = [] |
||||
this.form = _.cloneDeep(this.originForm) |
||||
this.moduleVisible = true |
||||
}, |
||||
async edit (row) { |
||||
this.moduleVisible = true |
||||
const { data } = await this.$post(`${this.api.navFind}?id=${row.id}`) |
||||
this.form = data |
||||
this.fileList = data.icon ? [{ |
||||
name: data.icon, |
||||
url: data.icon |
||||
}] : [] |
||||
}, |
||||
// 模块设置提交 |
||||
moduleSubmit () { |
||||
this.$refs.form.validate(async (valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
const form = _.cloneDeep(this.form) |
||||
if (!form.title) return Util.warningMsg('请填写标题') |
||||
if (!form.buttonText && !form.icon) return Util.warningMsg('按钮文字和图标至少填写一个') |
||||
if (!form.buttonContent) return Util.warningMsg('请选择按钮内容') |
||||
if (form.buttonContent === '0' && !form.linkAddress) return Util.warningMsg('请设置链接地址') |
||||
if (form.buttonContent === '1' && !form.imagePath) return Util.warningMsg('请上传图片') |
||||
|
||||
this.submiting = true |
||||
// form.isDisable = 1 |
||||
if (!form.id) form.founderId = form.editorId // 新增则创建人即编辑人 |
||||
try { |
||||
await this.$post(this.api.navSave, form) |
||||
Util.successMsg('新增成功！') |
||||
this.moduleVisible = false |
||||
this.getData() |
||||
setTimeout(() => { |
||||
this.submiting = false |
||||
}, 2000) |
||||
} catch (e) { |
||||
this.submiting = false |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
del (row) { |
||||
this.$confirm('确定要删除吗？', "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.navDel}?ids=${row.id}`).then(res => { |
||||
Util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
}, |
||||
// 禁用启用 |
||||
async switchOff (row) { |
||||
try { |
||||
await this.$post(`${this.api.navEnable}?id=${row.id}&isDisable=${row.isDisable}`) |
||||
this.getData() |
||||
} catch (e) { } |
||||
}, |
||||
// 批量删除 |
||||
batchDel () { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const ids = list.map(e => { |
||||
return 'ids=' + e.id |
||||
}) |
||||
this.$post(`${this.api.navDel}?${ids.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
Util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
Util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
|
||||
handleExceed () { // 上传文件 |
||||
Util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！") |
||||
}, |
||||
// 附件上传成功 |
||||
uploadSuccess (data, prop) { |
||||
if (data.code === 401) { |
||||
Util.errorMsg("登录过期，请重新登录") |
||||
setTimeout(() => { |
||||
this.$store.dispatch('user/logout') |
||||
}, 1000) |
||||
return false |
||||
} |
||||
this.form[prop] = data.url |
||||
if (prop === 'icon') this.fileList = [{ |
||||
name: data.original, |
||||
url: data.url |
||||
}] |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}); |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove () { |
||||
this.form.icon = '' |
||||
}, |
||||
|
||||
|
||||
// 更改排序 |
||||
sort () { |
||||
this.sortColumns = _.cloneDeep(this.list) |
||||
this.sortVisible = true |
||||
}, |
||||
// 拖拽放置的条件(只能存在一级) |
||||
allowDrop (draggingNode, dropNode, type) { |
||||
return type !== 'inner' |
||||
}, |
||||
// 排序提交 |
||||
async sortSubmit () { |
||||
const result = this.sortColumns.map((e, i) => { |
||||
return { |
||||
id: e.id, |
||||
sortOrder: i + 1 |
||||
} |
||||
}) |
||||
await this.$post(this.api.navSort, result) |
||||
Util.successMsg('修改成功') |
||||
this.sortVisible = false |
||||
this.getData() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.icon { |
||||
max-width: 30px; |
||||
} |
||||
|
||||
.sort-wrap { |
||||
max-height: 400px; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.thead { |
||||
display: flex; |
||||
line-height: 44px; |
||||
background-color: #f7f7f7; |
||||
|
||||
li { |
||||
padding: 0 10px; |
||||
font-size: 12px; |
||||
font-weight: 500; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
color: #323232; |
||||
} |
||||
} |
||||
|
||||
/deep/.sort { |
||||
.el-tree-node__content { |
||||
height: auto; |
||||
border-bottom: 1px solid #ebedf0; |
||||
} |
||||
} |
||||
|
||||
.sort-line { |
||||
display: flex; |
||||
width: 100%; |
||||
|
||||
li { |
||||
padding: 12px 0; |
||||
|
||||
&:first-child { |
||||
width: 230px; |
||||
} |
||||
|
||||
&:nth-child(2) { |
||||
position: absolute; |
||||
left: 310px; |
||||
} |
||||
|
||||
&:last-child { |
||||
position: absolute; |
||||
right: 80px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,16 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
|
||||
const meta = {} |
||||
|
||||
export default { |
||||
path: '/nav', |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
path: `/nav`, |
||||
component: () => import('@/pages/nav'), |
||||
meta: { title: '导航图标设置' } |
||||
}, |
||||
] |
||||
} |
||||
Loading…
Reference in new issue