parent
76e3471917
commit
c1f067e758
3 changed files with 541 additions and 4 deletions
@ -0,0 +1,519 @@ |
||||
<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> |
||||
</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="columnName" |
||||
show-overflow-tooltip |
||||
label="悬浮栏名称" |
||||
min-width="140"></el-table-column> |
||||
<el-table-column prop="typeId" |
||||
label="应用范围" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="typeId" |
||||
label="内容模块" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="typeId" |
||||
label="创建时间" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="typeId" |
||||
label="最近编辑" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column prop="typeId" |
||||
label="编辑人" |
||||
min-width="100"></el-table-column> |
||||
<el-table-column label="操作" |
||||
width="180"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" |
||||
type="text" |
||||
@click="edit(scope.row, 'edit')">编辑</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.menuVisible" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</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="moduleForm" |
||||
:rules="moduleRules"> |
||||
<el-form-item prop="columnName" |
||||
label="悬浮栏目名称" |
||||
label-width="110px"> |
||||
<el-input style="width: 200px" |
||||
placeholder="请输入栏目名称" |
||||
v-model="moduleForm.columnName" |
||||
clearable |
||||
maxlength="10"></el-input> |
||||
</el-form-item> |
||||
<el-table class="module-table" |
||||
:data="modules" |
||||
header-align="center" |
||||
row-key="id"> |
||||
<el-table-column prop="columnName" |
||||
label="图片" |
||||
min-width="140"></el-table-column> |
||||
<el-table-column prop="columnName" |
||||
label="标题" |
||||
min-width="140"></el-table-column> |
||||
<el-table-column prop="columnName" |
||||
label="内容" |
||||
min-width="140"></el-table-column> |
||||
<el-table-column label="操作" |
||||
:width="150" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
<div class="flex a-center"> |
||||
<el-switch v-model="scope.row.isEnable" |
||||
:active-value="1" |
||||
:inactive-value="0"> |
||||
</el-switch> |
||||
<i class="el-icon-edit-outline del" |
||||
@click="editRow(scope.row, scope.$index)"></i> |
||||
<i class="el-icon-delete del" |
||||
@click="delRow(scope.$index)"></i> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="plus"> |
||||
<i class="el-icon-circle-plus-outline" |
||||
@click="addRow"></i> |
||||
</div> |
||||
<el-form-item label="应用范围"> |
||||
<el-select v-model="moduleForm.range" |
||||
clearable> |
||||
<el-option v-for="item in ranges" |
||||
:key="item.id" |
||||
:label="item.title" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
</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="contentVisible" |
||||
width="700px" |
||||
:close-on-click-modal="false"> |
||||
<el-form ref="form" |
||||
:model="contentForm" |
||||
:rules="contentRules"> |
||||
<el-form-item prop="titleImg" |
||||
label="图片"> |
||||
<el-upload class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg,.gif" |
||||
:on-change="file => changeFile(file, 0)" |
||||
:show-file-list="false" |
||||
:action="this.api.upload" |
||||
:auto-upload="false"> |
||||
<img v-if="contentForm.titleImg" |
||||
:src="contentForm.titleImg" |
||||
class="avatar"> |
||||
<div class="uploader-default" |
||||
v-else> |
||||
<img class="plus" |
||||
src="@/assets/images/plus.png" |
||||
alt=""> |
||||
<p>点击上传</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item prop="columnName" |
||||
label="标题"> |
||||
<el-input style="width: 200px" |
||||
placeholder="请输入栏目名称" |
||||
v-model="contentForm.columnName" |
||||
clearable |
||||
maxlength="20"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="columnName" |
||||
label="内容设置"> |
||||
<el-radio-group v-model="contentForm.connectionType"> |
||||
<el-radio :label="1">富文本</el-radio> |
||||
<el-radio :label="2">链接</el-radio> |
||||
</el-radio-group> |
||||
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' |
||||
v-model="contentForm.connectionType" |
||||
:init="editorConfig" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" |
||||
class="dialog-footer"> |
||||
<el-button @click="contentVisible = false">取消</el-button> |
||||
<el-button type="primary" |
||||
@click="contentSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<!-- 剪裁组件弹窗 --> |
||||
<el-dialog title="图片裁剪" |
||||
append-to-body |
||||
:visible.sync="cropperModel" |
||||
width="1100px" |
||||
:close-on-click-modal="false"> |
||||
<Cropper ref="cropper" |
||||
:img-file.sync="file" |
||||
:is-upload="isUpload" |
||||
:fixed="true" |
||||
:fixedNumber.sync="fixedNumber" |
||||
@upload="customUpload" /> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import Axios from 'axios' |
||||
import Editor from '@tinymce/tinymce-vue' |
||||
import editorConfig from '@/components/editor' |
||||
export default { |
||||
data () { |
||||
return { |
||||
editorConfig, |
||||
siteId: this.$store.state.content.site.id, |
||||
siteName: this.$store.state.content.site.siteName, |
||||
templates: [], |
||||
listStyle: [], |
||||
pageStyle: [], |
||||
detailStyle: [], |
||||
keyword: '', |
||||
searchTimer: null, |
||||
list: [], |
||||
multipleSelection: [], |
||||
listLoading: false, |
||||
styleVisible: false, |
||||
ranges: [], |
||||
moduleForm: { |
||||
id: '', |
||||
columnName: '', |
||||
navigationStyle: 1, |
||||
styleTemplate: 1, |
||||
siteId: this.$store.state.content.site.id |
||||
}, |
||||
moduleRules: { |
||||
columnName: [ |
||||
{ required: true, message: '请输入悬浮栏目名称', trigger: 'blur' } |
||||
], |
||||
}, |
||||
moduleVisible: false, |
||||
modules: [{}], |
||||
|
||||
curRow: {}, |
||||
curModule: 0, |
||||
contentVisible: false, |
||||
contentForm: {}, |
||||
contentRules: { |
||||
columnName: [ |
||||
{ required: true, message: '请输入悬浮栏目名称', trigger: 'blur' } |
||||
], |
||||
}, |
||||
|
||||
cropperModel: false, |
||||
isUpload: false, |
||||
fixedNumber: [1.76, 1], |
||||
file: {}, // 当前被选择的图片文件 |
||||
}; |
||||
}, |
||||
components: { |
||||
Editor |
||||
}, |
||||
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.getData() |
||||
}, |
||||
methods: { |
||||
getData () { |
||||
this.$post(this.api.listWithTree, { |
||||
siteId: this.siteId, |
||||
columnName: this.keyword, |
||||
templateId: '', |
||||
typeId: '', |
||||
isSort: 1 |
||||
}).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.moduleVisible = true |
||||
}, |
||||
// 添加行 |
||||
addRow () { |
||||
// this.data.list.push(JSON.parse(JSON.stringify(this.data.historyForm))) |
||||
}, |
||||
// 编辑内容 |
||||
editRow (row, i = 0) { |
||||
this.curRow = JSON.parse(JSON.stringify(row)) |
||||
this.curModule = i |
||||
this.contentVisible = true |
||||
}, |
||||
// 删除行（通用） |
||||
delRow (i) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
// list.splice(i, 1) |
||||
}).catch(() => { }) |
||||
}, |
||||
edit (row, type) { |
||||
this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`) |
||||
}, |
||||
// 模块设置提交 |
||||
moduleSubmit () { |
||||
|
||||
}, |
||||
// 内容设置提交 |
||||
contentSubmit () { |
||||
|
||||
}, |
||||
// 图片裁剪上传事件 |
||||
customUpload (data) { |
||||
const formData = new FormData() |
||||
formData.append('file', data, this.file.name) |
||||
this.imgUpload(formData) |
||||
}, |
||||
// 图片上传到服务器 |
||||
imgUpload (formData) { |
||||
this.isUpload = true |
||||
Axios({ |
||||
method: 'post', |
||||
url: this.api.upload, |
||||
data: formData, |
||||
headers: { |
||||
'Content-Type': 'multipart/form-data', |
||||
token: Util.local.get(Setting.tokenKey) |
||||
}, |
||||
}).then(({ data }) => { |
||||
if (data.code === 401) { |
||||
Util.errorMsg("登录过期，请重新登录"); |
||||
setTimeout(() => { |
||||
this.$store.dispatch('user/logout') |
||||
}, 1000); |
||||
return false |
||||
} |
||||
this.$set(this.curForm, 'pic', data.url) |
||||
}).catch(res => { }) |
||||
this.$refs.cropper.isDisabled = false |
||||
this.isUpload = false |
||||
this.cropperModel = false |
||||
}, |
||||
// 图片改变钩子 |
||||
changeFile (file, form) { |
||||
const { size, name } = file |
||||
const ext = name.substring(name.lastIndexOf('.') + 1) |
||||
if (!Util.isImg(ext)) { |
||||
this.$message.error('请上传图片！') |
||||
return false |
||||
} |
||||
if (size / 1024 / 1024 > 100) { |
||||
this.$message.error('请上传100M以内的图片！') |
||||
return false |
||||
} |
||||
this.file = file |
||||
this.curForm = form |
||||
this.cropperModel = true |
||||
this.$nextTick(() => { |
||||
this.$refs.cropper.updateImg({ |
||||
url: window.URL.createObjectURL(file.raw), |
||||
size: file.size |
||||
}) |
||||
}) |
||||
}, |
||||
|
||||
del (row) { |
||||
this.$confirm("删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteColumn}?ids=${row.id}`).then(res => { |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff (val, row) { |
||||
this.$post(this.api.updateColumn, row).then(res => { }).catch((res) => { }) |
||||
}, |
||||
// 批量删除 |
||||
batchDel () { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.deleteColumn}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
handleCurrentChange (val) { |
||||
this.page = val |
||||
this.$router.push(`list?page=${val}`) |
||||
this.getData() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.plus { |
||||
margin-top: 10px; |
||||
font-size: 20px; |
||||
text-align: center; |
||||
color: $main-color; |
||||
cursor: pointer; |
||||
} |
||||
.del { |
||||
margin-left: 5px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
cursor: pointer; |
||||
} |
||||
$upload-width: 220px; |
||||
$upload-height: 102px; |
||||
$upload-lg-height: 102px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
border: 1px solid #dcdee0; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
.uploader-default { |
||||
display: flex; |
||||
height: $upload-height; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
background: #fafafa; |
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
} |
||||
&.avatar-uploader-lg { |
||||
.el-upload { |
||||
width: 100%; |
||||
max-width: 820px; |
||||
height: $upload-lg-height; |
||||
|
||||
.uploader-default { |
||||
height: $upload-lg-height; |
||||
} |
||||
} |
||||
} |
||||
.avatar { |
||||
display: block; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
} |
||||
.avatar-lg { |
||||
display: block; |
||||
width: 100%; |
||||
height: $upload-lg-height; |
||||
} |
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
p { |
||||
font-size: 12px; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
.style-wrap { |
||||
display: flex; |
||||
margin-top: 10px; |
||||
.label { |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,18 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
|
||||
const meta = {} |
||||
|
||||
const pre = 'article-' |
||||
|
||||
export default { |
||||
path: '/floatingFrame', |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
path: `/floatingFrame`, |
||||
component: () => import('@/pages/floatingFrame'), |
||||
meta: { title: '悬浮栏设置' } |
||||
}, |
||||
] |
||||
} |
||||
Loading…
Reference in new issue