|
|
|
|
@ -2,204 +2,132 @@ |
|
|
|
|
<div class="page"> |
|
|
|
|
<div class="tool"> |
|
|
|
|
<div class="search-wrap"> |
|
|
|
|
<el-input placeholder="请输入悬浮栏名称" |
|
|
|
|
v-model.trim="keyword" |
|
|
|
|
clearable></el-input> |
|
|
|
|
<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 + ':内容管理:栏目管理:新增'" 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"> |
|
|
|
|
<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="schemeName" show-overflow-tooltip label="悬浮栏名称" min-width="140"></el-table-column> |
|
|
|
|
<el-table-column prop="scopeOfApplication" label="应用范围" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="numberOfContentModules" label="内容模块" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="createTime" label="创建时间" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="updateTime" label="最近编辑" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="editorSName" label="编辑人" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column label="状态" min-width="100"> |
|
|
|
|
<template slot-scope="scope">{{ scope.row.isDisable ? '禁用' : '启用' }}</template> |
|
|
|
|
</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-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($event, scope.row, scope.$index)"> |
|
|
|
|
</el-switch> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background @current-change="handleCurrentChange" :current-page="page" |
|
|
|
|
layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
<el-dialog title="模块管理" :visible.sync="moduleVisible" width="1000px" :close-on-click-modal="false"> |
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-suffix="："> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<el-form-item prop="schemeName" label="悬浮栏目名称" label-width="130px"> |
|
|
|
|
<el-input style="width: 200px" placeholder="请输入悬浮栏目名称" v-model="form.schemeName" clearable |
|
|
|
|
maxlength="10"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-form-item prop="style" label="悬浮栏样式" label-width="110px"> |
|
|
|
|
<el-select v-model="form.floatingBarStyle" clearable> |
|
|
|
|
<el-option v-for="item in styles" :key="item.id" :label="item.name" :value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> --> |
|
|
|
|
</div> |
|
|
|
|
<el-table class="module-table" :data="form.floatingColumnSchemeModules" header-align="center" row-key="id"> |
|
|
|
|
<el-table-column prop="pictureAddress" label="图片" min-width="140"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<img class="pic" :src="scope.row.pictureAddress" alt=""> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="schemeTitle" label="标题" min-width="240"></el-table-column> |
|
|
|
|
<el-table-column prop="schemeContentJson" label="内容" min-width="240"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<div v-html="scope.row.schemeContentJson"></div> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" :width="110" 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 v-model="scope.row.isDisable" :active-value="0" :inactive-value="1"> |
|
|
|
|
</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> |
|
|
|
|
<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 class="plus m-b-30"> |
|
|
|
|
<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> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<el-radio-group class="m-t-10" v-model="range"> |
|
|
|
|
<el-radio :label="0">网站全局</el-radio> |
|
|
|
|
<el-radio :label="1">选择栏目</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
|
|
<el-cascader v-if="range" class="m-l-30" v-model="selectColumn" :options="columns" :props="columnProps" |
|
|
|
|
clearable></el-cascader> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="moduleVisible = false">取消</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="moduleSubmit">确定</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=""> |
|
|
|
|
|
|
|
|
|
<el-dialog title="新增内容" :visible.sync="contentVisible" width="900px" :close-on-click-modal="false"> |
|
|
|
|
<el-form ref="contentForm" :model="curRow" :rules="contentRules" label-width="100px" label-suffix="："> |
|
|
|
|
<el-form-item prop="pictureAddress" label="图片"> |
|
|
|
|
<el-upload class="avatar-uploader" accept=".jpg,.png,.jpeg,.gif" :on-change="file => changeFile(file)" |
|
|
|
|
:show-file-list="false" :action="this.api.upload" :auto-upload="false"> |
|
|
|
|
<img v-if="curRow.pictureAddress" :src="curRow.pictureAddress" 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 prop="schemeTitle" label="标题"> |
|
|
|
|
<el-input style="width: 200px" placeholder="请输入标题" v-model="curRow.schemeTitle" 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 prop="schemeContentJson" label="内容设置"> |
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="curRow.schemeContentJson" |
|
|
|
|
:init="editorConfig" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="contentVisible = false">取消</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="contentSubmit">确定</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 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> |
|
|
|
|
@ -208,47 +136,67 @@ |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import Axios from 'axios' |
|
|
|
|
import Cropper from '@/components/img-upload/Cropper' |
|
|
|
|
import Editor from '@tinymce/tinymce-vue' |
|
|
|
|
import editorConfig from '@/components/editor' |
|
|
|
|
import _ from 'lodash' |
|
|
|
|
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: [], |
|
|
|
|
page: 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
total: 0, |
|
|
|
|
multipleSelection: [], |
|
|
|
|
listLoading: false, |
|
|
|
|
styleVisible: false, |
|
|
|
|
ranges: [], |
|
|
|
|
moduleForm: { |
|
|
|
|
id: '', |
|
|
|
|
columnName: '', |
|
|
|
|
navigationStyle: 1, |
|
|
|
|
styleTemplate: 1, |
|
|
|
|
siteId: this.$store.state.content.site.id |
|
|
|
|
range: 0, |
|
|
|
|
selectColumn: [], |
|
|
|
|
columns: [], |
|
|
|
|
columnProps: { |
|
|
|
|
multiple: true, |
|
|
|
|
value: 'id', |
|
|
|
|
label: 'columnName' |
|
|
|
|
}, |
|
|
|
|
moduleRules: { |
|
|
|
|
columnName: [ |
|
|
|
|
originForm: {}, |
|
|
|
|
form: { |
|
|
|
|
editorId: this.$store.state.user.userId, |
|
|
|
|
schemeName: '', |
|
|
|
|
floatingBarStyle: '1', |
|
|
|
|
siteId: this.$store.state.content.site.id, |
|
|
|
|
floatingColumnSchemeModules: [], |
|
|
|
|
floatingColumnSchemeScopeOfApplications: [], |
|
|
|
|
}, |
|
|
|
|
originModules: { |
|
|
|
|
pictureAddress: '', |
|
|
|
|
schemeContentJson: '', |
|
|
|
|
schemeTitle: '', |
|
|
|
|
isDisable: 0, |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
schemeName: [ |
|
|
|
|
{ required: true, message: '请输入悬浮栏目名称', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
moduleVisible: false, |
|
|
|
|
modules: [{}], |
|
|
|
|
modules: [], |
|
|
|
|
|
|
|
|
|
curRow: {}, |
|
|
|
|
curModule: 0, |
|
|
|
|
contentVisible: false, |
|
|
|
|
contentForm: {}, |
|
|
|
|
contentRules: { |
|
|
|
|
columnName: [ |
|
|
|
|
{ required: true, message: '请输入悬浮栏目名称', trigger: 'blur' } |
|
|
|
|
pictureAddress: [ |
|
|
|
|
{ required: true, message: '请上传图片', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
schemeTitle: [ |
|
|
|
|
{ required: true, message: '请输入标题', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
schemeContentJson: [ |
|
|
|
|
{ required: true, message: '请输入内容', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -259,7 +207,8 @@ export default { |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
Editor |
|
|
|
|
Editor, |
|
|
|
|
Cropper, |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
keyword: function (val) { |
|
|
|
|
@ -282,18 +231,20 @@ export default { |
|
|
|
|
name: '悬浮栏设置' |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
this.originForm = _.cloneDeep(this.form) |
|
|
|
|
this.getData() |
|
|
|
|
this.getColumn() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData () { |
|
|
|
|
this.$post(this.api.listWithTree, { |
|
|
|
|
this.$post(this.api.listFloating, { |
|
|
|
|
siteId: this.siteId, |
|
|
|
|
columnName: this.keyword, |
|
|
|
|
templateId: '', |
|
|
|
|
typeId: '', |
|
|
|
|
isSort: 1 |
|
|
|
|
search: this.keyword, |
|
|
|
|
pageNum: this.page, |
|
|
|
|
pageSize: this.pageSize, |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
this.list = data |
|
|
|
|
this.list = data.records |
|
|
|
|
this.total = +data.total |
|
|
|
|
this.listLoading = false |
|
|
|
|
}).catch(err => { |
|
|
|
|
this.listLoading = false |
|
|
|
|
@ -305,16 +256,32 @@ export default { |
|
|
|
|
this.page = 1 |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
// 栏目树形 |
|
|
|
|
async getColumn () { |
|
|
|
|
const { data } = await this.$post(this.api.listWithTree, { |
|
|
|
|
siteId: this.siteId, |
|
|
|
|
columnName: '', |
|
|
|
|
templateId: '', |
|
|
|
|
typeId: '', |
|
|
|
|
isSort: 1 |
|
|
|
|
}) |
|
|
|
|
this.columns = data |
|
|
|
|
}, |
|
|
|
|
add () { |
|
|
|
|
this.range = 0 |
|
|
|
|
this.selectColumn = [] |
|
|
|
|
this.form = _.cloneDeep(this.originForm) |
|
|
|
|
this.moduleVisible = true |
|
|
|
|
}, |
|
|
|
|
// 添加行 |
|
|
|
|
addRow () { |
|
|
|
|
// this.data.list.push(JSON.parse(JSON.stringify(this.data.historyForm))) |
|
|
|
|
this.curRow = _.cloneDeep(this.originModules) |
|
|
|
|
this.curModule = -1 |
|
|
|
|
this.contentVisible = true |
|
|
|
|
}, |
|
|
|
|
// 编辑内容 |
|
|
|
|
editRow (row, i = 0) { |
|
|
|
|
this.curRow = JSON.parse(JSON.stringify(row)) |
|
|
|
|
this.curRow = _.cloneDeep(row) |
|
|
|
|
this.curModule = i |
|
|
|
|
this.contentVisible = true |
|
|
|
|
}, |
|
|
|
|
@ -323,19 +290,84 @@ export default { |
|
|
|
|
this.$confirm('确定要删除吗？', '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
// list.splice(i, 1) |
|
|
|
|
this.form.floatingColumnSchemeModules.splice(i, 1) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
edit (row, type) { |
|
|
|
|
this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`) |
|
|
|
|
async edit (row) { |
|
|
|
|
this.moduleVisible = true |
|
|
|
|
const { data } = await this.$post(`${this.api.findFloating}?id=${row.floatingBarSchemeId}`) |
|
|
|
|
const range = data.floatingColumnSchemeScopeOfApplications |
|
|
|
|
// 应用范围数组里有一个对象的applicationScopeId为0，则是网站全局 |
|
|
|
|
this.range = row.isGlobal ? 0 : 1 |
|
|
|
|
if (!row.isGlobal) { |
|
|
|
|
const column = [] |
|
|
|
|
// 选择栏目 |
|
|
|
|
range.map(e => { |
|
|
|
|
column.push(e.applicationScopeId.split(',').map(n => +n)) |
|
|
|
|
}) |
|
|
|
|
this.selectColumn = column |
|
|
|
|
console.log("🚀 ~ edit ~ this.selectColumn:", this.selectColumn) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.form = data |
|
|
|
|
}, |
|
|
|
|
// 模块设置提交 |
|
|
|
|
moduleSubmit () { |
|
|
|
|
this.$refs.form.validate(async (valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.submiting) return false |
|
|
|
|
const form = JSON.parse(JSON.stringify(this.form)) |
|
|
|
|
if (!form.floatingColumnSchemeModules.length) return Util.warningMsg('请添加内容模块') |
|
|
|
|
const column = this.selectColumn |
|
|
|
|
if (this.range && !column.length) return Util.warningMsg('请选择栏目') |
|
|
|
|
|
|
|
|
|
this.submiting = true |
|
|
|
|
if (this.range) { |
|
|
|
|
const scope = [] |
|
|
|
|
// debugger |
|
|
|
|
column.map(e => { |
|
|
|
|
scope.push({ |
|
|
|
|
applicationScopeId: typeof e === 'number' ? e : e.join(',') |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
form.floatingColumnSchemeScopeOfApplications = scope |
|
|
|
|
} else { |
|
|
|
|
form.floatingColumnSchemeScopeOfApplications = [{ |
|
|
|
|
applicationScopeId: 0 |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
if (!form.floatingBarSchemeId) form.founderId = form.editorId |
|
|
|
|
// debugger |
|
|
|
|
try { |
|
|
|
|
await this.$post(this.api.saveFloating, form) |
|
|
|
|
Util.successMsg('新增成功！') |
|
|
|
|
this.moduleVisible = false |
|
|
|
|
this.getData() |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.submiting = false |
|
|
|
|
}, 2000) |
|
|
|
|
} catch (e) { |
|
|
|
|
this.submiting = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 内容设置提交 |
|
|
|
|
contentSubmit () { |
|
|
|
|
|
|
|
|
|
this.$refs.contentForm.validate(async (valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
this.contentVisible = false |
|
|
|
|
const row = this.curRow |
|
|
|
|
if (this.curModule === -1) { |
|
|
|
|
this.form.floatingColumnSchemeModules.push(_.cloneDeep(row)) |
|
|
|
|
} else { |
|
|
|
|
const list = this.form.floatingColumnSchemeModules[this.curModule] |
|
|
|
|
for (const i in row) { |
|
|
|
|
this.$set(list, i, row[i]) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 图片裁剪上传事件 |
|
|
|
|
customUpload (data) { |
|
|
|
|
@ -362,14 +394,14 @@ export default { |
|
|
|
|
}, 1000); |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
this.$set(this.curForm, 'pic', data.url) |
|
|
|
|
this.$set(this.curRow, 'pictureAddress', data.url) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
this.$refs.cropper.isDisabled = false |
|
|
|
|
this.isUpload = false |
|
|
|
|
this.cropperModel = false |
|
|
|
|
}, |
|
|
|
|
// 图片改变钩子 |
|
|
|
|
changeFile (file, form) { |
|
|
|
|
changeFile (file) { |
|
|
|
|
const { size, name } = file |
|
|
|
|
const ext = name.substring(name.lastIndexOf('.') + 1) |
|
|
|
|
if (!Util.isImg(ext)) { |
|
|
|
|
@ -381,7 +413,6 @@ export default { |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
this.file = file |
|
|
|
|
this.curForm = form |
|
|
|
|
this.cropperModel = true |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.$refs.cropper.updateImg({ |
|
|
|
|
@ -392,38 +423,37 @@ export default { |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
del (row) { |
|
|
|
|
this.$confirm("删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？", "提示", { |
|
|
|
|
this.$confirm('确定要删除吗？', "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}).then(() => { |
|
|
|
|
this.$post(`${this.api.deleteColumn}?ids=${row.id}`).then(res => { |
|
|
|
|
util.successMsg("删除成功") |
|
|
|
|
this.$post(`${this.api.batchDeletionFloating}?id=${row.floatingBarSchemeId}`).then(res => { |
|
|
|
|
Util.successMsg("删除成功") |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
// 禁用启用 |
|
|
|
|
switchOff (val, row) { |
|
|
|
|
this.$post(this.api.updateColumn, row).then(res => { }).catch((res) => { }) |
|
|
|
|
async switchOff (val, row) { |
|
|
|
|
await this.$post(`${this.api.enableOrDisableScheme}?id=${row.floatingBarSchemeId}&isDisable=${row.isDisable}`) |
|
|
|
|
}, |
|
|
|
|
// 批量删除 |
|
|
|
|
batchDel () { |
|
|
|
|
const list = this.multipleSelection |
|
|
|
|
if (list.length) { |
|
|
|
|
this.$confirm('删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？', '提示', { |
|
|
|
|
this.$confirm('确定要删除吗？', '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
const data = [] |
|
|
|
|
list.map(e => { |
|
|
|
|
data.push('ids=' + e.id) |
|
|
|
|
const ids = list.map(e => { |
|
|
|
|
return 'id=' + e.floatingBarSchemeId |
|
|
|
|
}) |
|
|
|
|
this.$post(`${this.api.deleteColumn}?${data.join('&')}`).then(res => { |
|
|
|
|
this.$post(`${this.api.batchDeletionFloating}?${ids.join('&')}`).then(res => { |
|
|
|
|
this.$refs.table.clearSelection() |
|
|
|
|
util.successMsg("删除成功") |
|
|
|
|
Util.successMsg("删除成功") |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
} else { |
|
|
|
|
util.errorMsg('请先选择数据 ！') |
|
|
|
|
Util.errorMsg('请先选择数据 ！') |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
handleSelectionChange (val) { |
|
|
|
|
@ -440,80 +470,88 @@ export default { |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.plus { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: $main-color; |
|
|
|
|
cursor: pointer; |
|
|
|
|
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; |
|
|
|
|
margin-left: 8px; |
|
|
|
|
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; |
|
|
|
|
.el-upload { |
|
|
|
|
position: relative; |
|
|
|
|
width: $upload-width; |
|
|
|
|
height: $upload-height; |
|
|
|
|
border: 1px solid #dcdee0; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
height: $upload-lg-height; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.avatar { |
|
|
|
|
display: block; |
|
|
|
|
width: $upload-width; |
|
|
|
|
height: $upload-height; |
|
|
|
|
.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-lg { |
|
|
|
|
display: block; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.avatar-uploader-lg { |
|
|
|
|
.el-upload { |
|
|
|
|
width: 100%; |
|
|
|
|
max-width: 820px; |
|
|
|
|
height: $upload-lg-height; |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
height: $upload-lg-height; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.el-upload__tip { |
|
|
|
|
margin-top: 0; |
|
|
|
|
p { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
|
max-width: 100px; |
|
|
|
|
margin: 10px 0; |
|
|
|
|
} |
|
|
|
|
</style> |
