Skip to content

html / happiness-plus-platform-admin

Go to a project
Commit 0db1861a by gaolei
Options

修改弹窗内容

parent 0df09c0c
Showing with 609 additions and 540 deletions
src/router.js
......@@ -50,6 +50,11 @@ import ActivityShenhe from './views/fitness/ActivityShenhe.vue'
Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default new Router({
routes: [
{
......
src/views/home/ActivityPropaganda.vue
......@@ -5,46 +5,41 @@
<div class="btn-warp tr mb15">
<el-button type="primary" size="small" @click="addBannerHandle">banner新增</el-button>
</div>
<el-table
:data="activityBannerList"
border
header-cell-class-name="table-header-row">
<el-table :data="activityBannerList" border header-cell-class-name="table-header-row">
<el-table-column
type="index"
align="center"
label="序号"
:width="$store.state.tableTrWidth.index + 'px'">
</el-table-column>
<el-table-column
prop="bannerImg"
align="center"
width="340"
label="banner缩略图">
:width="$store.state.tableTrWidth.index + 'px'"
></el-table-column>
<el-table-column prop="bannerImg" align="center" width="340" label="banner缩略图">
<template slot-scope="scope">
<img :src="$imgUrl + scope.row.bannerPath" width="200" height="70" style="margin: auto" />
<img
:src="$imgUrl + scope.row.bannerPath"
width="200"
height="70"
style="margin: auto"
/>
</template>
</el-table-column>
<el-table-column
prop="createTime"
align="center"
:width="$store.state.tableTrWidth.dateTime + 'px'"
label="操作日期">
</el-table-column>
label="操作日期"
></el-table-column>
<el-table-column
align="left"
prop="createUser"
:width="$store.state.tableTrWidth.handleMan + 'px'"
label="操作人">
</el-table-column>
<el-table-column
align="left"
prop="bannerMark"
label="备注">
</el-table-column>
label="操作人"
></el-table-column>
<el-table-column align="left" prop="bannerMark" label="备注"></el-table-column>
<el-table-column
align="center"
label="操作"
:width="$store.state.tableTrWidth.buttonTwoWarp + 'px'">
:width="$store.state.tableTrWidth.buttonTwoWarp + 'px'"
>
<template slot-scope="scope">
<div>
<el-button icon="el-icon-edit" size="small" @click="bannerEdit(scope.row)"></el-button>
......@@ -60,8 +55,8 @@
:current-page="currentPage1"
:page-size="pageSize1"
layout="prev, pager, next"
:total="totalPage1">
</el-pagination>
:total="totalPage1"
></el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="活动文章" name="second">
......@@ -73,64 +68,52 @@
:data="activityList"
class="mb20"
border
header-cell-class-name="table-header-row">
header-cell-class-name="table-header-row"
>
<el-table-column
type="index"
align="center"
label="序号"
:width="$store.state.tableTrWidth.index + 'px'">
</el-table-column>
<el-table-column
prop="activeTitle"
:show-overflow-tooltip="true"
label="文章名称">
</el-table-column>
<el-table-column
prop="classifyName"
label="文章类型"
align="center"
width="150">
</el-table-column>
:width="$store.state.tableTrWidth.index + 'px'"
></el-table-column>
<el-table-column prop="activeTitle" :show-overflow-tooltip="true" label="文章名称"></el-table-column>
<el-table-column prop="classifyName" label="文章类型" align="center" width="150"></el-table-column>
<el-table-column
prop="createTime"
align="center"
:width="$store.state.tableTrWidth.dateTime + 'px'"
label="创建时间">
</el-table-column>
label="创建时间"
></el-table-column>
<el-table-column
prop="createUser"
:width="$store.state.tableTrWidth.handleMan + 'px'"
label="上传人">
</el-table-column>
label="上传人"
></el-table-column>
<el-table-column
prop="activePublisher"
:width="$store.state.tableTrWidth.handleMan + 'px'"
label="发布人">
</el-table-column>
<el-table-column
prop="activeStatus"
width="90"
label="状态">
<template slot-scope="scope">
{{scope.row.activeStatus == '1' ? '发布' : '未发布'}}
</template>
label="发布人"
></el-table-column>
<el-table-column prop="activeStatus" width="90" label="状态">
<template slot-scope="scope">{{scope.row.activeStatus == '1' ? '发布' : '未发布'}}</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
:width="$store.state.tableTrWidth.buttonThreeWarp + 'px'">
:width="$store.state.tableTrWidth.buttonThreeWarp + 'px'"
>
<template slot-scope="scope">
<div>
<el-button icon="el-icon-edit" size="small" @click="articleEdit(scope.row)"></el-button>
<el-switch
v-model="scope.row.activeStatus"
@change="switchChange(scope.$index, scope.row)"
:active-value=1
:inactive-value=2
:active-value="1"
:inactive-value="2"
active-color="#13ce66"
inactive-color="#666"
style="margin: 0 15px">
</el-switch>
style="margin: 0 15px"
></el-switch>
<el-button icon="el-icon-delete" size="small" @click="articleDel(scope.row.id)"></el-button>
</div>
</template>
......@@ -143,8 +126,8 @@
:current-page="currentPage2"
:page-size="pageSize2"
layout="prev, pager, next"
:total="totalPage2">
</el-pagination>
:total="totalPage2"
></el-pagination>
</div>
</el-tab-pane>
</el-tabs>
......@@ -153,8 +136,15 @@
:visible.sync="actBannerDialogVisible"
width="40%"
class="custom_form"
center>
<el-form ref="myForm" :model="actBannerForm" label-width="100px" :rules="$rules.common" :inline-message="true">
center
>
<el-form
ref="myForm"
:model="actBannerForm"
label-width="100px"
:rules="$rules.common"
:inline-message="true"
>
<el-form-item label="图片上传" prop="imgFilePath">
<el-col :sm="20">
<el-upload
......@@ -162,13 +152,22 @@
:action="$baseURL + '/active/banner/upload'"
:multiple="false"
:show-file-list="false"
accept="image/jpeg,image/png,image/gif"
accept="image/jpeg, image/png, image/gif"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="actBannerForm.imgFilePath" :src="$imgUrl + actBannerForm.imgFilePath" class="avatar">
:before-upload="beforeAvatarUpload"
>
<img
v-if="actBannerForm.imgFilePath"
:src="$imgUrl + actBannerForm.imgFilePath"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p class="img-upload-inter">* 请上传尺寸为 <em>400*260</em>，或参照这一比例（长度最小为400px），大小不超过<em>5M</em>的图片</p>
<p class="img-upload-inter">
* 请上传尺寸为
<em>400*260</em>，或参照这一比例（长度最小为400px），大小不超过
<em>5M</em>的图片
</p>
</el-col>
</el-form-item>
<el-form-item label="图片大小">
......@@ -198,32 +197,43 @@
class="custom_form"
:visible.sync="outLinkDialogVisible"
width="30%"
center>
center
>
<el-form :model="outLink" ref="ruleOutLink" label-width="100px" :rules="$rules.common">
<el-form-item label="文章名称" prop='articleName'>
<el-form-item label="文章名称" prop="articleName">
<el-col :sm="18">
<el-input v-model="outLink.articleName" autocomplete="off"></el-input>
</el-col>
</el-form-item>
<el-form-item label="文章类型" prop='articleType'>
<el-form-item label="文章类型" prop="articleType">
<el-col :sm="18">
<!-- <el-select v-model="outLink.articleType" placeholder="请选择文章类型" style="width: 100%">
<el-option label="活动" :value=1></el-option>
<el-option label="专题" :value=2></el-option>
</el-select> -->
</el-select>-->
<el-select v-model="outLink.articleType" placeholder="类型" style="width: 100%">
<el-option :label="item.classifyName" v-for="(item, index) in activitys" :key="index" :value='item.id'></el-option>
<el-option
:label="item.classifyName"
v-for="(item, index) in activitys"
:key="index"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="发布人" prop='activePublisher'>
<el-form-item label="发布人" prop="activePublisher">
<el-col :sm="18">
<el-select v-model="outLink.activePublisher" placeholder="发布人" style="width: 100%">
<el-option :label="index" :value="index" v-for="(item, index) in activePublishers" :key="item"></el-option>
<el-option
:label="index"
:value="index"
v-for="(item, index) in activePublishers"
:key="item"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="文章链接" prop='articleLink'>
<el-form-item label="文章链接" prop="articleLink">
<el-col :sm="18">
<el-input v-model="outLink.articleLink" autocomplete="off"></el-input>
</el-col>
......@@ -235,17 +245,17 @@
<div class="btn-warp">
<el-button @click="outLinkDialogVisible = false">取 消</el-button>
<el-button type="danger" @click="addOutLink('ruleOutLink')" v-if="articleId == ''">发 布</el-button>
<el-button type="danger" @click="saveOutLink('ruleOutLink')" v-if="articleId != ''">确 认</el-button>
<el-button
type="danger"
@click="saveOutLink('ruleOutLink')"
v-if="articleId != ''"
>确 认</el-button>
</div>
</el-col>
</el-row>
</div>
</el-dialog>
<el-dialog
title="文章编辑"
:visible.sync="articleDialogVisible"
width="50%"
center>
<el-dialog title="文章编辑" :visible.sync="articleDialogVisible" width="50%" center>
<el-form :model="articleForm" label-width="100px">
<el-form-item label="文章标题">
<el-col :sm="10">
......@@ -255,8 +265,8 @@
<el-form-item label="文章类型">
<el-col :sm="10">
<el-select v-model="articleForm.articleType" placeholder="请选择文章类型" style="width: 100%">
<el-option label="活动" :value=1></el-option>
<el-option label="专题" :value=2></el-option>
<el-option label="活动" :value="1"></el-option>
<el-option label="专题" :value="2"></el-option>
</el-select>
</el-col>
</el-form-item>
......@@ -266,8 +276,8 @@
<quill-editor
v-model="articleForm.editorContent"
ref="myQuillEditor"
:options="editorOption">
</quill-editor>
:options="editorOption"
></quill-editor>
</div>
</el-col>
</el-form-item>
......@@ -288,29 +298,29 @@
</template>
<script>
import rules from '../../util/validator'
import rules from "../../util/validator";
export default {
name: 'activityPropaganda',
data () {
name: "activityPropaganda",
data() {
return {
activeName: 'first',
activeName: "first",
currentPage1: 1,
pageSize1: 10,
totalPage1: null,
activityList: [],
outLinkDialogVisible: false,
outLink: {
articleName: '',
articleType: '',
articleLink: '',
activePublisher: ''
articleName: "",
articleType: "",
articleLink: "",
activePublisher: ""
},
articleDialogVisible: false,
articleForm: {
articleTitle: '',
articleType: '',
editorContent: ''
articleTitle: "",
articleType: "",
editorContent: ""
},
editorOption: {},
activityBannerList: [],
......@@ -318,417 +328,443 @@ export default {
pageSize2: 10,
totalPage2: null,
actBannerDialogVisible: false,
dialogTitle1: '新增活动banner',
imageUrl: '',
bannerOriginalName: '',
bannerPixel: '1920*502',
dialogTitle1: "新增活动banner",
imageUrl: "",
bannerOriginalName: "",
bannerPixel: "1920*502",
actBannerForm: {
bannerFileName: '',
bannerOriginalName: '',
bannerSize: '',
imgFilePath: '',
bannerMark: ''
bannerFileName: "",
bannerOriginalName: "",
bannerSize: "",
imgFilePath: "",
bannerMark: ""
},
rules: rules,
actBannerId: '',
articleId: '',
actBannerId: "",
articleId: "",
activePublishers: {},
activitys: []
}
};
},
mounted () {
this._getActiveBannerList()
this._getActiveList()
this._getActivePublisher()
this._getActivityClassify()
mounted() {
this._getActiveBannerList();
this._getActiveList();
this._getActivePublisher();
this._getActivityClassify();
},
methods: {
/** *********** 活动banner *************/
_getActiveBannerList () { // 活动banner列表
let _this = this
this.$axios.get('/active/banner/list', {
params: {
'p': _this.currentPage1,
'c': _this.pageSize1
}
}).then(function (res) {
_this.totalPage1 = res.count
_this.activityBannerList = res.list
})
_getActiveBannerList() {
// 活动banner列表
let _this = this;
this.$axios
.get("/active/banner/list", {
params: {
p: _this.currentPage1,
c: _this.pageSize1
}
})
.then(function(res) {
_this.totalPage1 = res.count;
_this.activityBannerList = res.list;
});
},
handleSizeChange1: function (size) {
this.pageSize1 = size
handleSizeChange1: function(size) {
this.pageSize1 = size;
},
handleCurrentChange1: function (currentPage) {
this.currentPage1 = currentPage
this._getActiveBannerList()
handleCurrentChange1: function(currentPage) {
this.currentPage1 = currentPage;
this._getActiveBannerList();
},
handleAvatarSuccess (res, file) { // 图片上传
this.actBannerForm.imgFilePath = res.data.filePath // 图片路径
this.actBannerForm.bannerFileName = res.data.fileName // 图片名称
this.actBannerForm.bannerOriginalName = res.data.fileOriginalName // 图片原名称
this.actBannerForm.bannerSize = res.data.fileSize // 图片大小
handleAvatarSuccess(res, file) {
// 图片上传
this.actBannerForm.imgFilePath = res.data.filePath; // 图片路径
this.actBannerForm.bannerFileName = res.data.fileName; // 图片名称
this.actBannerForm.bannerOriginalName = res.data.fileOriginalName; // 图片原名称
this.actBannerForm.bannerSize = res.data.fileSize; // 图片大小
},
beforeAvatarUpload (file) {
const isLt5M = file.size / 1024 / 1024 < 5
beforeAvatarUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error('上传图片大小不能超过 5MB!')
this.$message.error("上传图片大小不能超过 5MB!");
}
return isLt5M
return isLt5M;
},
addBannerHandle () {
this.dialogTitle1 = '新增活动banner'
this.actBannerDialogVisible = true
this.actBannerForm.imgFilePath = '' // 图片路径
this.actBannerForm.bannerFileName = '' // 图片名称
this.actBannerForm.bannerOriginalName = '' // 图片原名称
this.actBannerForm.bannerSize = '' // 图片大小
this.actBannerForm.bannerMark = '' // 备注
addBannerHandle() {
this.dialogTitle1 = "新增活动banner";
this.actBannerDialogVisible = true;
this.actBannerForm.imgFilePath = ""; // 图片路径
this.actBannerForm.bannerFileName = ""; // 图片名称
this.actBannerForm.bannerOriginalName = ""; // 图片原名称
this.actBannerForm.bannerSize = ""; // 图片大小
this.actBannerForm.bannerMark = ""; // 备注
},
bannerEdit (item) {
this.dialogTitle1 = '编辑活动banner'
this.actBannerDialogVisible = true
this.actBannerForm.imgFilePath = item.bannerPath
this.actBannerForm.bannerMark = item.bannerMark
this.actBannerId = item.id
this.actBannerForm.bannerSize = item.bannerSize
this.actBannerForm.bannerFileName = item.bannerName
this.actBannerForm.bannerOriginalName = item.bannerOriginalName
bannerEdit(item) {
this.dialogTitle1 = "编辑活动banner";
this.actBannerDialogVisible = true;
this.actBannerForm.imgFilePath = item.bannerPath;
this.actBannerForm.bannerMark = item.bannerMark;
this.actBannerId = item.id;
this.actBannerForm.bannerSize = item.bannerSize;
this.actBannerForm.bannerFileName = item.bannerName;
this.actBannerForm.bannerOriginalName = item.bannerOriginalName;
},
bannerAddHandle (myForm) { // 编辑 or 添加
this.$refs[myForm].validate((valid) => {
bannerAddHandle(myForm) {
// 编辑 or 添加
this.$refs[myForm].validate(valid => {
if (valid) {
var _this = this
var _this = this;
var paramsAdd = {
'bannerMark': _this.actBannerForm.bannerMark,
'bannerName': _this.actBannerForm.bannerFileName,
'bannerOriginalName': _this.actBannerForm.bannerOriginalName,
'bannerPath': _this.actBannerForm.imgFilePath,
'bannerSize': _this.actBannerForm.bannerSize
}
bannerMark: _this.actBannerForm.bannerMark,
bannerName: _this.actBannerForm.bannerFileName,
bannerOriginalName: _this.actBannerForm.bannerOriginalName,
bannerPath: _this.actBannerForm.imgFilePath,
bannerSize: _this.actBannerForm.bannerSize
};
var paramsEdit = {
'bannerMark': _this.actBannerForm.bannerMark,
'bannerName': _this.actBannerForm.bannerFileName,
'bannerOriginalName': _this.actBannerForm.bannerOriginalName,
'bannerPath': _this.actBannerForm.imgFilePath,
'bannerSize': _this.actBannerForm.bannerSize,
'id': _this.actBannerId
}
if (_this.dialogTitle1 === '新增活动banner') {
this.$axios.post('/active/banner/add', paramsAdd)
.then(function (res) {
bannerMark: _this.actBannerForm.bannerMark,
bannerName: _this.actBannerForm.bannerFileName,
bannerOriginalName: _this.actBannerForm.bannerOriginalName,
bannerPath: _this.actBannerForm.imgFilePath,
bannerSize: _this.actBannerForm.bannerSize,
id: _this.actBannerId
};
if (_this.dialogTitle1 === "新增活动banner") {
this.$axios
.post("/active/banner/add", paramsAdd)
.then(function(res) {
if (res) {
_this.$message({
type: 'success',
message: '添加成功!'
})
_this._getActiveBannerList()
_this.actBannerDialogVisible = false
type: "success",
message: "添加成功!"
});
_this._getActiveBannerList();
_this.actBannerDialogVisible = false;
}
})
});
} else {
this.$axios.post('/active/banner/update', paramsEdit)
.then(function (res) {
console.log(res)
this.$axios
.post("/active/banner/update", paramsEdit)
.then(function(res) {
console.log(res);
if (res) {
_this.$message({
type: 'success',
message: '修改成功!'
})
_this._getActiveBannerList()
_this.actBannerDialogVisible = false
type: "success",
message: "修改成功!"
});
_this._getActiveBannerList();
_this.actBannerDialogVisible = false;
}
})
});
}
} else { return false }
})
} else {
return false;
}
});
},
bannerDel (item) { // 活动banner删除
this.$confirm('确定删除这条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let _this = this
this.$axios.get('/active/banner/delete/' + item.id)
.then(function (res) {
if (res) {
// _this.currentPage1 = 1
_this._getActiveBannerList()
_this.$message({
type: 'success',
message: '删除成功!'
})
}
})
}).catch(() => { console.log('取消删除') })
bannerDel(item) {
// 活动banner删除
this.$confirm("确定删除这条数据吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
let _this = this;
this.$axios
.get("/active/banner/delete/" + item.id)
.then(function(res) {
if (res) {
// _this.currentPage1 = 1
_this._getActiveBannerList();
_this.$message({
type: "success",
message: "删除成功!"
});
}
});
})
.catch(() => {
console.log("取消删除");
});
},
/** *********** 活动文章 *************/
// 跳转到活动文章新增页面
goNewArticlePage () {
this.$router.push({ name: 'newArticle' })
goNewArticlePage() {
this.$router.push({ name: "newArticle" });
},
// 点击显示文章链接弹窗
addNewArticleLink () {
this.outLinkDialogVisible = true
this.outLink.articleName = ''
this.outLink.articleType = ''
this.outLink.activePublisher = ''
this.outLink.articleLink = ''
addNewArticleLink() {
this.outLinkDialogVisible = true;
this.outLink.articleName = "";
this.outLink.articleType = "";
this.outLink.activePublisher = "";
this.outLink.articleLink = "";
},
// 获取发布人
_getActivePublisher () {
let _this = this
this.$axios.get('/active/publisher/list')
.then(res => {
// console.log(res)
_this.activePublishers = res
})
_getActivePublisher() {
let _this = this;
this.$axios.get("/active/publisher/list").then(res => {
// console.log(res)
_this.activePublishers = res;
});
},
_getActiveList () { // 文章列表
let _this = this
this.$axios.get('/active/list', {
params: {
'p': _this.currentPage2,
'c': _this.pageSize2
}
}).then(function (res) {
_this.activityList = res.list
_this.totalPage2 = res.count
})
_getActiveList() {
// 文章列表
let _this = this;
this.$axios
.get("/active/list", {
params: {
p: _this.currentPage2,
c: _this.pageSize2
}
})
.then(function(res) {
_this.activityList = res.list;
_this.totalPage2 = res.count;
});
},
handleSizeChange2: function (size) {
this.pageSize2 = size
handleSizeChange2: function(size) {
this.pageSize2 = size;
},
handleCurrentChange2: function (currentPage) {
this.currentPage2 = currentPage
this._getActiveList()
handleCurrentChange2: function(currentPage) {
this.currentPage2 = currentPage;
this._getActiveList();
},
switchChange (index, item) { // 修改发布状态
let id = item.id
let flag = item.activeStatus // 保存点击之后v-modeld的值
var msg = ''
if (item.activeStatus === 1) { // 保存点击之前的状态
item.activeStatus = 2
msg = '发布'
switchChange(index, item) {
// 修改发布状态
let id = item.id;
let flag = item.activeStatus; // 保存点击之后v-modeld的值
var msg = "";
if (item.activeStatus === 1) {
// 保存点击之前的状态
item.activeStatus = 2;
msg = "确定发布这篇文章吗?（请确认好文章内容）";
} else {
item.activeStatus = 1
msg = '取消发布'
item.activeStatus = 1;
msg = "确定取消发布这篇文章吗?";
}
this.$confirm(`确定${msg}这篇文章吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if (flag === 1) {
console.log(1)
item.activeStatus = 1
// this.$message.success('打开成功!')
this.$_switchHand(id, 1)
} else {
console.log(2)
item.activeStatus = 2
// this.$message.success('关闭成功！')
this.$_switchHand(id, 2)
}
}).catch(() => {
console.log('取消操作')
this.$confirm(`${msg}`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
if (flag === 1) {
console.log(1);
item.activeStatus = 1;
// this.$message.success('打开成功!')
this.$_switchHand(id, 1);
} else {
console.log(2);
item.activeStatus = 2;
// this.$message.success('关闭成功！')
this.$_switchHand(id, 2);
}
})
.catch(() => {
console.log("取消操作");
});
},
$_switchHand (id, type) {
let _this = this
this.$axios.post('/active/update/status', {
'activeStatus': type, // 1=>发布 2=>不发布
'id': id
}).then(function (res) {
if (res === 'OK') {
_this.$message({
type: 'success',
message: '状态修改成功!'
})
_this._getActiveList()
}
})
$_switchHand(id, type) {
let _this = this;
this.$axios
.post("/active/update/status", {
activeStatus: type, // 1=>发布 2=>不发布
id: id
})
.then(function(res) {
if (res === "OK") {
_this.$message({
type: "success",
message: "状态修改成功!"
});
_this._getActiveList();
}
});
},
articleDel (id) { // 活动文章删除
this.$confirm('确定删除这条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let _this = this
this.$axios.get('/active/delete/' + id)
.then(function (res) {
articleDel(id) {
// 活动文章删除
this.$confirm("确定删除这条数据吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
let _this = this;
this.$axios.get("/active/delete/" + id).then(function(res) {
if (res) {
// _this.currentPage2 = 1
_this._getActiveList()
_this._getActiveList();
_this.$message({
type: 'success',
message: '删除成功!'
})
type: "success",
message: "删除成功!"
});
}
})
}).catch(err => console.log(err))
});
})
.catch(err => console.log(err));
},
// 跳转到编辑页面
articleEdit (item) {
this.articleId = item.id
console.log(item)
if (item.linkType === 1) { // 文本（文章编辑）
articleEdit(item) {
this.articleId = item.id;
console.log(item);
if (item.linkType === 1) {
// 文本（文章编辑）
// this.articleForm.articleTitle = item.activeTitle
// this.articleForm.articleType = item.activeType
// this.articleForm.editorContent = item.activeContent
// this.articleDialogVisible = true
this.$router.push({ name: 'newArticle', params: item })
} else { // 外链
this.outLink.articleName = item.activeTitle
this.outLink.articleType = item.activeType
this.outLink.articleLink = item.linkUrl
this.outLink.activePublisher = item.activePublisher
this.outLinkDialogVisible = true
this.$router.push({ name: "newArticle", params: item });
} else {
// 外链
this.outLink.articleName = item.activeTitle;
this.outLink.articleType = item.activeType;
this.outLink.articleLink = item.linkUrl;
this.outLink.activePublisher = item.activePublisher;
this.outLinkDialogVisible = true;
}
},
addActivityRest (articleForm) { // 文章编辑(添加)
let _this = this
addActivityRest(articleForm) {
// 文章编辑(添加)
let _this = this;
let params = {
'activeContent': _this.articleForm.editorContent,
'activeStatus': 1,
'activeTitle': _this.articleForm.articleTitle,
'activeType': _this.articleForm.articleType
}
this.$axios.post('/active/add', params)
.then(function (res) {
if (res) {
_this.$message({
type: 'success',
message: '文章发布成功!'
})
_this._getActiveList()
_this.articleDialogVisible = false
}
})
activeContent: _this.articleForm.editorContent,
activeStatus: 1,
activeTitle: _this.articleForm.articleTitle,
activeType: _this.articleForm.articleType
};
this.$axios.post("/active/add", params).then(function(res) {
if (res) {
_this.$message({
type: "success",
message: "文章发布成功!"
});
_this._getActiveList();
_this.articleDialogVisible = false;
}
});
},
saveActivityRest () { // 文章编辑(修改)
let _this = this
saveActivityRest() {
// 文章编辑(修改)
let _this = this;
let params = {
'activeContent': _this.articleForm.editorContent,
'activePropagandaId': _this.articleId,
'activeTitle': _this.articleForm.articleTitle,
'activeType': _this.articleForm.articleType
}
this.$axios.post('/active/update', params)
.then(function (res) {
if (res) {
_this.$message({
type: 'success',
message: '文章修改成功!'
})
_this._getActiveList()
_this.articleDialogVisible = false
}
})
activeContent: _this.articleForm.editorContent,
activePropagandaId: _this.articleId,
activeTitle: _this.articleForm.articleTitle,
activeType: _this.articleForm.articleType
};
this.$axios.post("/active/update", params).then(function(res) {
if (res) {
_this.$message({
type: "success",
message: "文章修改成功!"
});
_this._getActiveList();
_this.articleDialogVisible = false;
}
});
},
addOutLink (ruleOutLink) { // 文章链接(添加)
let _this = this
_this.$refs[ruleOutLink].validate((valid) => {
addOutLink(ruleOutLink) {
// 文章链接(添加)
let _this = this;
_this.$refs[ruleOutLink].validate(valid => {
if (valid) {
let params = {
'activeStatus': 1,
'activeTitle': _this.outLink.articleName,
'activeType': _this.outLink.articleType,
'activePublisher': _this.outLink.activePublisher,
'linkUrl': _this.outLink.articleLink
}
this.$axios.post('/active/add/links', params)
.then(function (res) {
if (res) {
_this.$message({
type: 'success',
message: '文章添加成功!'
})
_this._getActiveList()
_this.outLinkDialogVisible = false
}
})
activeStatus: 1,
activeTitle: _this.outLink.articleName,
activeType: _this.outLink.articleType,
activePublisher: _this.outLink.activePublisher,
linkUrl: _this.outLink.articleLink
};
this.$axios.post("/active/add/links", params).then(function(res) {
if (res) {
_this.$message({
type: "success",
message: "文章添加成功!"
});
_this._getActiveList();
_this.outLinkDialogVisible = false;
}
});
}
})
});
},
saveOutLink (ruleOutLink) { // 文章链接(修改)
let _this = this
_this.$refs[ruleOutLink].validate((valid) => {
saveOutLink(ruleOutLink) {
// 文章链接(修改)
let _this = this;
_this.$refs[ruleOutLink].validate(valid => {
if (valid) {
let params = {
'activePropagandaId': _this.articleId,
'activeTitle': _this.outLink.articleName,
'activePublisher': _this.outLink.activePublisher,
'activeType': _this.outLink.articleType,
'linkUrl': _this.outLink.articleLink
}
this.$axios.post('/active/update/links', params)
.then(function (res) {
if (res) {
_this.$message({
type: 'success',
message: '文章修改成功!'
})
_this._getActiveList()
_this.outLinkDialogVisible = false
}
})
activePropagandaId: _this.articleId,
activeTitle: _this.outLink.articleName,
activePublisher: _this.outLink.activePublisher,
activeType: _this.outLink.articleType,
linkUrl: _this.outLink.articleLink
};
this.$axios.post("/active/update/links", params).then(function(res) {
if (res) {
_this.$message({
type: "success",
message: "文章修改成功!"
});
_this._getActiveList();
_this.outLinkDialogVisible = false;
}
});
}
})
});
},
// 获取文章类型
_getActivityClassify () {
let _this = this
this.$axios.get('/active/classify')
.then(res => {
// console.log(res)
_this.activitys = res
})
},
_getActivityClassify() {
let _this = this;
this.$axios.get("/active/classify").then(res => {
// console.log(res)
_this.activitys = res;
});
}
},
beforeRouteEnter (to, from, next) {
beforeRouteEnter(to, from, next) {
// console.log('to', to)
// console.log('from', from)
next(vm => {
if (from.name === 'newArticle') {
vm.activeName = 'second'
if (from.name === "newArticle") {
vm.activeName = "second";
} else {
vm.activeName = 'first'
vm.activeName = "first";
}
})
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../assets/css/main.scss';
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100%;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 80px;
line-height: 80px !important;
text-align: center;
}
.avatar {
width: 178px;
height: auto;
max-height: 100px;
overflow: hidden;
display: block;
margin: auto;
}
@import "../../assets/css/main.scss";
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100%;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 80px;
line-height: 80px !important;
text-align: center;
}
.avatar {
width: 178px;
height: auto;
max-height: 100px;
overflow: hidden;
display: block;
margin: auto;
}
</style>
src/views/home/NewArticle.vue
......@@ -9,25 +9,31 @@
<el-form-item label="类型">
<el-col :sm="4">
<el-select v-model="activeType" placeholder="类型" style="width: 100%">
<el-option :label="item.classifyName" v-for="(item, index) in activitys" :key="index" :value='item.id'></el-option>
<el-option
:label="item.classifyName"
v-for="(item, index) in activitys"
:key="index"
:value="item.id"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="发布人">
<el-col :sm="4">
<el-select v-model="activePublisher" placeholder="发布人" style="width: 100%">
<el-option :label="index" :value="index" v-for="(item, index) in activePublishers" :key="item"></el-option>
<el-option
:label="index"
:value="index"
v-for="(item, index) in activePublishers"
:key="item"
></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="详情">
<el-col :sm="16">
<div class="mb20">
<quill-editor
v-model="activeContent"
ref="myQuillEditor"
:options="editorOption">
</quill-editor>
<quill-editor v-model="activeContent" ref="myQuillEditor" :options="editorOption"></quill-editor>
</div>
</el-col>
</el-form-item>
......@@ -35,16 +41,17 @@
<el-col :sm="16" style="text-align: center">
<el-button type="primary" class="mr50" @click="$_publishHand">发布</el-button>
<el-button type="danger" class="mr50" @click="$_saveHand">保存</el-button>
<el-button type="danger" v-if="activeContent" plain class="mr50" @click="$_previewHand">预览</el-button>
<el-button type="danger" v-if="activeContent" plain class="mr50" @click="$_previewHand">预览</el-button>
<el-button class="mr30" @click="$router.go(-1)">取消</el-button>
</el-col>
</el-form-item>
</el-form>
<el-dialog
:title=activeTitle
:title="activeTitle"
:visible.sync="dialogVisible"
class="active-content"
width="54%">
class="active-content"
width="54%"
>
<div class="sub_title">
<!-- <span>发布时间：2020-06-28</span> -->
<span style="margin-right: 30px">发布人：{{activePublisher}}</span>
......@@ -54,24 +61,24 @@
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span> -->
</span>-->
</el-dialog>
</div>
</template>
<script>
export default {
name: 'newArticle',
data () {
name: "newArticle",
data() {
return {
articleId: '', // 文章id
activeTitle: '', // 文章标题
activeType: '', // 文章类型id
articleId: "", // 文章id
activeTitle: "", // 文章标题
activeType: "", // 文章类型id
activitys: [],
activePublisher: '', // 发布人
activePublisher: "", // 发布人
activePublishers: {},
activeContent: '', // 富文本内容
activePublishTime: '',
activeContent: "", // 富文本内容
activePublishTime: "",
editorOption: {
style: {},
modules: {
......@@ -79,66 +86,71 @@ export default {
// highlight: text => hljs.highlightAuto(text).value
// },
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['link', 'image']// 去除video
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["link", "image"] // 去除video
]
},
placeholder: '编辑文章...'
placeholder: "编辑文章..."
},
dialogVisible: false
}
};
},
mounted () {
console.log('父组件：mounted')
this._getActivityClassify()
this._getActivePublisher()
this._getDetail()
mounted() {
console.log("父组件：mounted");
this._getActivityClassify();
this._getActivePublisher();
this._getDetail();
},
methods: {
_getDetail () {
console.log(this.$route.params)
const { activeTitle, activeContent, activePublisher, activeType, createTime, id } = this.$route.params
this.activeTitle = activeTitle
this.activeContent = activeContent
this.activePublisher = activePublisher
this.activeType = activeType
this.activePublishTime = createTime
this.articleId = id
_getDetail() {
console.log(this.$route.params);
const {
activeTitle,
activeContent,
activePublisher,
activeType,
createTime,
id
} = this.$route.params;
this.activeTitle = activeTitle;
this.activeContent = activeContent;
this.activePublisher = activePublisher;
this.activeType = activeType;
this.activePublishTime = createTime;
this.articleId = id;
},
// 获取活动类型
_getActivityClassify () {
let _this = this
this.$axios.get('/active/classify')
.then(res => {
// console.log(res)
_this.activitys = res
})
_getActivityClassify() {
let _this = this;
this.$axios.get("/active/classify").then(res => {
// console.log(res)
_this.activitys = res;
});
},
// 获取发布人
_getActivePublisher () {
let _this = this
this.$axios.get('/active/publisher/list')
.then(res => {
// console.log(res)
_this.activePublishers = res
})
_getActivePublisher() {
let _this = this;
this.$axios.get("/active/publisher/list").then(res => {
// console.log(res)
_this.activePublishers = res;
});
},
// 预览
$_previewHand () {
$_previewHand() {
// this.$previewAlert({
// title: '幸运书单公布——4.23世界读书日活动',
// contentHtml: this.articleDetail
......@@ -146,75 +158,91 @@ export default {
// this.$alert(this.activeContent, {
// dangerouslyUseHTMLString: true
// })
this.dialogVisible = true
this.dialogVisible = true;
},
// 添加操作
$_addHand (type, msg) {
let _this = this
this.$axios.post('/active/add', {
'activeContent': _this.activeContent,
'activePublisher': _this.activePublisher,
'activeStatus': type, // 1 => 发布 2 => 保存
'activeTitle': _this.activeTitle,
'activeType': _this.activeType
}).then(function (res) {
if (res) {
_this.$message({
type: 'success',
message: msg
})
}
})
$_addHand(type, msg) {
let _this = this;
this.$axios
.post("/active/add", {
activeContent: _this.activeContent,
activePublisher: _this.activePublisher,
activeStatus: type, // 1 => 发布 2 => 保存
activeTitle: _this.activeTitle,
activeType: _this.activeType
})
.then(function(res) {
if (res) {
_this.$message({
type: "success",
message: msg,
duration:'1000',
onClose: () => {
//此处写提示关闭后需要执行的函数
_this.$router.push({ path: "/home/activityPropaganda" });
}
});
}
});
},
// 更新操作
$_updateHand (type) {
let _this = this
this.$axios.post('/active/update', {
'activeContent': _this.activeContent,
'activePropagandaId': _this.articleId,
'activeStatus': type, // 1 => 发布 2 => 保存
'activePublisher': _this.activePublisher,
'activeTitle': _this.activeTitle,
'activeType': _this.activeType
}).then(function (res) {
if (res) {
_this.$message({
type: 'success',
message: '更新成功!'
})
}
})
$_updateHand(type) {
let _this = this;
this.$axios
.post("/active/update", {
activeContent: _this.activeContent,
activePropagandaId: _this.articleId,
activeStatus: type, // 1 => 发布 2 => 保存
activePublisher: _this.activePublisher,
activeTitle: _this.activeTitle,
activeType: _this.activeType
})
.then(function(res) {
if (res) {
_this.$message({
type: "success",
message: "更新成功!"
});
}
});
},
// 发布
$_publishHand () {
if (this.articleId) { // 更新操作
this.$_updateHand(1)
$_publishHand() {
if (this.articleId) {
// 更新操作
this.$_updateHand(1);
} else {
this.$_addHand(1, '发布成功')
this.$_addHand(1, "发布成功");
}
},
// 保存
$_saveHand () {
$_saveHand() {
if (this.articleId) {
this.$_updateHand(2)
this.$_updateHand(2);
} else {
this.$_addHand(2, '保存成功')
this.$_addHand(2, "保存成功");
}
}
}
}
};
</script>
<style lang="scss">
.active-content {
.el-dialog__body {
padding-top: 10px;
img {max-width: 100% !important;}
}
.el-dialog__title {
font-weight: bold;
font-size: 26px;
.active-content {
.el-dialog__body {
padding-top: 10px;
img {
max-width: 100% !important;
}
}
.sub_title {color: #999; font-size: 14px; margin-bottom: 10px;}
.el-dialog__title {
font-weight: bold;
font-size: 26px;
}
}
.sub_title {
color: #999;
font-size: 14px;
margin-bottom: 10px;
}
</style>
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 sign in to comment