优化代码
This commit is contained in:
18500206848
@@ -147,7 +147,7 @@ export default [
|
|||||||
},
|
},
|
||||||
props: true,
|
props: true,
|
||||||
component: () => import(
|
component: () => import(
|
||||||
/* webpackChunkName: "views" */ '@/views/manage/jlhome/news/addNews')
|
/* webpackChunkName: "views" */ '@/views/manage/policies/news/addNews')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -169,7 +169,7 @@ export default [
|
|||||||
},
|
},
|
||||||
props: true,
|
props: true,
|
||||||
component: () => import(
|
component: () => import(
|
||||||
/* webpackChunkName: "views" */ '@/views/manage/jlhome/article/allArticle/addNews')
|
/* webpackChunkName: "views" */ '@/views/manage/policies/article/allArticle/addNews')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -310,7 +310,7 @@ export default {
|
|||||||
display: false,
|
display: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "零工岗位名称",
|
label: "岗位名称",
|
||||||
prop: "servicesName",
|
prop: "servicesName",
|
||||||
display: false,
|
display: false,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -126,8 +126,8 @@
|
|||||||
<el-form-item label="合同编号:">
|
<el-form-item label="合同编号:">
|
||||||
<el-input v-model="search.contractNo" placeholder="合同编号" clearable></el-input>
|
<el-input v-model="search.contractNo" placeholder="合同编号" clearable></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="零工岗位名称:">
|
<el-form-item label="岗位名称:">
|
||||||
<el-input v-model="search.servicesName" placeholder="零工岗位名称" clearable></el-input>
|
<el-input v-model="search.servicesName" placeholder="岗位名称" clearable></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="员工姓名:">
|
<el-form-item label="员工姓名:">
|
||||||
<el-input v-model="search.userName" placeholder="员工姓名" clearable></el-input>
|
<el-input v-model="search.userName" placeholder="员工姓名" clearable></el-input>
|
||||||
|
|||||||
@@ -1,296 +0,0 @@
|
|||||||
<template>
|
|
||||||
<basic-container>
|
|
||||||
<jl-go-back></jl-go-back>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="8">
|
|
||||||
<avue-form :option="formOption" :upload-before="uploadBefore" v-model="form" @submit="handleSubmit" ref="form">
|
|
||||||
</avue-form>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<Tinymce v-model="form.note" ref="tinymce"></Tinymce>
|
|
||||||
<!-- <quill-editor v-model="ruleForm.content" :options="editorOption" -->
|
|
||||||
<!-- @change="onEditorChange($event)" ref="QuillEditor">-->
|
|
||||||
<!-- </quill-editor>-->
|
|
||||||
<!-- <el-upload class="avatar-uploader" :action="putFile" :show-file-list="false" :on-success="handleAvatarSuccess"-->
|
|
||||||
<!-- :before-upload="beforeAvatarUpload">-->
|
|
||||||
<!-- <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
|
|
||||||
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
||||||
<!-- </el-upload>-->
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</basic-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import 'quill/dist/quill.core.css'
|
|
||||||
import 'quill/dist/quill.snow.css'
|
|
||||||
import 'quill/dist/quill.bubble.css'
|
|
||||||
import { quillEditor } from "vue-quill-editor";
|
|
||||||
|
|
||||||
|
|
||||||
import { addNews, getNewsDetail, editNews } from "@/api/manage/news"
|
|
||||||
import { putFile } from "@/api/resource/oss";
|
|
||||||
import Tinymce from "@/components/Tinymce";
|
|
||||||
import {getClassifyDic} from '@/api/help/article/classify'
|
|
||||||
|
|
||||||
const toolbarItems = [
|
|
||||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
|
||||||
["blockquote", "code-block"], // 引用 代码块
|
|
||||||
[{ header: 1 }, { header: 2 }], // 1、2 级标题
|
|
||||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
|
||||||
[{ script: "sub" }, { script: "super" }], // 上标/下标
|
|
||||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
|
||||||
// [{'direction': 'rtl'}], // 文本方向
|
|
||||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
|
||||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
|
||||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
|
||||||
[{ font: [] }], // 字体种类
|
|
||||||
[{ align: [] }], // 对齐方式
|
|
||||||
["clean"], // 清除文本格式
|
|
||||||
["image"], // 链接、图片、视频
|
|
||||||
]
|
|
||||||
export default {
|
|
||||||
components: { quillEditor, Tinymce},
|
|
||||||
props: {
|
|
||||||
id: Number,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.onload()
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
putFile,
|
|
||||||
imageUrl: '',
|
|
||||||
ruleForm: {
|
|
||||||
content: null,
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
note: ''
|
|
||||||
},
|
|
||||||
description:'',
|
|
||||||
formOption: {
|
|
||||||
// labelWidth:120,
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
type: "tree",
|
|
||||||
label: "分类",
|
|
||||||
span: 24,
|
|
||||||
size: "small",
|
|
||||||
prop: "type",
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请选择分类",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
filterable: true,
|
|
||||||
dicUrl: getClassifyDic(),
|
|
||||||
props: {
|
|
||||||
label: "name",
|
|
||||||
value: "type",
|
|
||||||
},
|
|
||||||
dicFormatter(resp) {
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章名称",
|
|
||||||
prop: "articleTitle",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
maxlength:50,
|
|
||||||
showWordLimit:true,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入文章名称'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "摘要",
|
|
||||||
prop: "description",
|
|
||||||
rows:3,
|
|
||||||
type: 'textarea',
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入摘要'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
maxlength:200,
|
|
||||||
showWordLimit:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章来源",
|
|
||||||
prop: "articleSrc",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
maxlength:50,
|
|
||||||
showWordLimit:true,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章源地址",
|
|
||||||
prop: "articleSrcUrl",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
maxlength:100,
|
|
||||||
showWordLimit:true,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "作者",
|
|
||||||
prop: "author",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入作者'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
maxlength:50,
|
|
||||||
showWordLimit:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "首页图",
|
|
||||||
prop: "headPic",
|
|
||||||
type: "upload",
|
|
||||||
action: putFile(),
|
|
||||||
span: 12,
|
|
||||||
showFileList: false,
|
|
||||||
listType: "picture-img",
|
|
||||||
multiple: false,
|
|
||||||
canvasOption: {},
|
|
||||||
headers: [],
|
|
||||||
data: [],
|
|
||||||
propsHttp: {
|
|
||||||
url: "msg",
|
|
||||||
},
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请上传首页图'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
editorOption: {
|
|
||||||
modules: {
|
|
||||||
toolbar: {
|
|
||||||
container: toolbarItems,
|
|
||||||
handlers: {
|
|
||||||
'image': function (value) {
|
|
||||||
if (value) {
|
|
||||||
document.querySelector('.avatar-uploader input').click()
|
|
||||||
} else {
|
|
||||||
this.quill.format('image', false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},//工具菜单栏配置
|
|
||||||
},
|
|
||||||
placeholder: "请在这里编写文章内容", //提示
|
|
||||||
readyOnly: false, //是否只读
|
|
||||||
theme: "snow", //主题 snow/bubble
|
|
||||||
syntax: true, //语法检测
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
uploadBefore(file, done, loading, column) {
|
|
||||||
this.form.headPic = ''
|
|
||||||
done()
|
|
||||||
},
|
|
||||||
// 值发生变化
|
|
||||||
onEditorChange(editor) {
|
|
||||||
this.content = editor.html;
|
|
||||||
},
|
|
||||||
handleSubmit(form, done) {
|
|
||||||
// this.form['note'] = this.$refs.tinymce.getContent()
|
|
||||||
|
|
||||||
if(this.form.note.length>64*512){
|
|
||||||
this.$message.error('文章内容不能超过64KB！');
|
|
||||||
done()
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
if (this.type == 'add') {
|
|
||||||
addNews(
|
|
||||||
this.form.articleTitle,
|
|
||||||
this.form.headPic,
|
|
||||||
this.form.articleSrc,
|
|
||||||
this.form.articleSrcUrl,
|
|
||||||
this.form.author,
|
|
||||||
this.form.description,
|
|
||||||
this.form.note,
|
|
||||||
this.form.type
|
|
||||||
).then(() => {
|
|
||||||
this.$message.success('添加成功');
|
|
||||||
this.$router.go(-1);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else if (this.type == 'edit') {
|
|
||||||
editNews(
|
|
||||||
this.id,
|
|
||||||
this.form.articleTitle,
|
|
||||||
this.form.headPic,
|
|
||||||
this.form.articleSrc,
|
|
||||||
this.form.articleSrcUrl,
|
|
||||||
this.form.author,
|
|
||||||
this.form.description,
|
|
||||||
this.form.note,
|
|
||||||
this.form.type
|
|
||||||
).then(() => {
|
|
||||||
this.$message.success('修改成功');
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
/*上传图片*/
|
|
||||||
handleAvatarSuccess(res) {
|
|
||||||
let quill = this.$refs.QuillEditor.quill
|
|
||||||
let length = quill.getSelection().index;//获取光标所在位置
|
|
||||||
quill.insertEmbed(length, 'image', res.data.link)
|
|
||||||
quill.setSelection(length + 1)//光标后移一位
|
|
||||||
},
|
|
||||||
beforeAvatarUpload(file) {
|
|
||||||
const isJPG = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"].indexOf(file.type) != -1;
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
||||||
if (!isJPG) {
|
|
||||||
this.$message.error('上传图片格式不正确');
|
|
||||||
}
|
|
||||||
if (!isLt2M) {
|
|
||||||
this.$message.error('上传图片大小不能超过 2MB!');
|
|
||||||
}
|
|
||||||
return isJPG && isLt2M;
|
|
||||||
},
|
|
||||||
onload() {
|
|
||||||
if (this.id && this.type == 'edit') {
|
|
||||||
getNewsDetail(this.id).then(res => {
|
|
||||||
this.form = res.data.data;
|
|
||||||
this.description=this.form.description;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.avatar-uploader {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-editor {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,299 +0,0 @@
|
|||||||
<template>
|
|
||||||
<basic-container>
|
|
||||||
<!--搜索栏-->
|
|
||||||
<el-form size="small" label-position="right" style="padding-left: 10px; padding-right: 10px" :inline="true">
|
|
||||||
<el-row :span="24">
|
|
||||||
<el-form-item label="文章名称：">
|
|
||||||
<el-input v-model="query.articleTitle"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="作者：">
|
|
||||||
<el-input v-model="query.author"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="发稿日期：">
|
|
||||||
<el-date-picker v-model="query.searchDate" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期" value-format="yyyy-MM-dd">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<div class="searchBtn">
|
|
||||||
<el-button type="primary" size="small" icon="el-icon-search" @click="searchChange">搜 索</el-button>
|
|
||||||
<el-button size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
|
|
||||||
</div>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
<!--搜索栏-->
|
|
||||||
<avue-crud :option="option" :data="data" :page="page" v-model="form" @on-load="onLoad" @row-update="rowUpdate"
|
|
||||||
@row-save="rowSave" @row-del="rowDel" @current-change="currentChange" @size-change="sizeChange"
|
|
||||||
@selection-change="selectionChange" @refresh-change="refreshChange">
|
|
||||||
<template slot="headPic" slot-scope="{ row }">
|
|
||||||
<img class="img" :src="row.headPic" alt="" srcset="" />
|
|
||||||
</template>
|
|
||||||
<template slot="menu" slot-scope="{row}">
|
|
||||||
<el-button type="text" @click="editNewsInfo(row.id)" icon="el-icon-edit">修改</el-button>
|
|
||||||
<!--<el-button type="text" @click="setCover(row.id)">设置为封面</el-button>-->
|
|
||||||
<el-button type="text" v-if="row.status==0" @click="release(row.id,'release')">发布</el-button>
|
|
||||||
<el-button type="text" v-if="row.status==1" @click="release(row.id,'offShelf')">下架</el-button>
|
|
||||||
</template>
|
|
||||||
<template slot="menuLeft">
|
|
||||||
<el-button @click="addNewsInfo" icon="el-icon-plus" type="primary">添加文章</el-button>
|
|
||||||
</template>
|
|
||||||
<template slot="sort" slot-scope="{row}">
|
|
||||||
<el-button type="text" @click="orderItem(row,'ascs')">上移</el-button>
|
|
||||||
<el-button type="text" @click="orderItem(row,'desc')">下移</el-button>
|
|
||||||
</template>
|
|
||||||
<template slot="articleTitle" slot-scope="{row}">
|
|
||||||
<span class="articleTitle" @click="showNewsDetail(row.id)">{{row.articleTitle}}</span>
|
|
||||||
</template>
|
|
||||||
<template slot="articleSrcUrl" slot-scope="{row}">
|
|
||||||
<a :href="row.articleSrcUrl" style="color: #6699FF;" target="blank">{{row.articleSrcUrl}}</a>
|
|
||||||
</template>
|
|
||||||
</avue-crud>
|
|
||||||
<!-- <news-detail ref="detail"></news-detail>-->
|
|
||||||
</basic-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { getList, delNews, order, release } from "@/api/manage/news";
|
|
||||||
// import newsDetail from './Dialog/newsDetail'
|
|
||||||
export default {
|
|
||||||
components:{
|
|
||||||
// newsDetail
|
|
||||||
},
|
|
||||||
name: "manage_jlhome_news",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: [],
|
|
||||||
selectionList: [],
|
|
||||||
query: {},
|
|
||||||
form: {},
|
|
||||||
drawer: false,
|
|
||||||
option: {
|
|
||||||
border: true,
|
|
||||||
index: true,
|
|
||||||
indexLabel: "序号",
|
|
||||||
labelWidth: 100,
|
|
||||||
selection: false,
|
|
||||||
align: "center",
|
|
||||||
editBtn: false,
|
|
||||||
delBtn: true,
|
|
||||||
addBtn: false,
|
|
||||||
|
|
||||||
addText: '文章信息',
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "文章名称",
|
|
||||||
prop: "articleTitle",
|
|
||||||
slot:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "首页图",
|
|
||||||
prop: "headPic",
|
|
||||||
slot: true,
|
|
||||||
type: "upload",
|
|
||||||
span: 12,
|
|
||||||
showFileList: false,
|
|
||||||
listType: "picture-img",
|
|
||||||
multiple: false,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "发稿日期",
|
|
||||||
prop: "createTime",
|
|
||||||
type: "date",
|
|
||||||
formslot: true,
|
|
||||||
format: "yyyy-MM-dd",
|
|
||||||
editDisplay: false,
|
|
||||||
addDisplay: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "分类",
|
|
||||||
prop: "typeName",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章原地址",
|
|
||||||
prop: "articleSrcUrl",
|
|
||||||
slot:true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "作者",
|
|
||||||
prop: "author",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "上传人",
|
|
||||||
prop: "createUserName",
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '状态',
|
|
||||||
prop: 'status',
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
dicData: [
|
|
||||||
{
|
|
||||||
label: '已发布',
|
|
||||||
value: '1'
|
|
||||||
}, {
|
|
||||||
label: '未发布',
|
|
||||||
value: '0'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "排序",
|
|
||||||
prop: "sort",
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
slot: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
group: [
|
|
||||||
{
|
|
||||||
label: "文章内容",
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '文章内容',
|
|
||||||
prop: 'newsInfo',
|
|
||||||
formslot: true
|
|
||||||
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
page: {
|
|
||||||
currentPage: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
total: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
currentChange(current) {
|
|
||||||
this.page.currentPage = current;
|
|
||||||
this.onLoad(this.page);
|
|
||||||
},
|
|
||||||
sizeChange(size) {
|
|
||||||
this.page.pageSize = size;
|
|
||||||
this.onLoad(this.page);
|
|
||||||
},
|
|
||||||
selectionChange(select) {
|
|
||||||
this.selectionList = select;
|
|
||||||
},
|
|
||||||
searchChange() {
|
|
||||||
if (this.query.searchDate) {
|
|
||||||
this.query['beginTime'] = this.query.searchDate[0];
|
|
||||||
this.query['endTime'] = this.query.searchDate[1];
|
|
||||||
}
|
|
||||||
this.onLoad(this.page, this.query);
|
|
||||||
},
|
|
||||||
searchReset() {
|
|
||||||
this.query = {};
|
|
||||||
this.onLoad(this.page);
|
|
||||||
},
|
|
||||||
refreshChange() {
|
|
||||||
this.page.currentPage = 1;
|
|
||||||
this.onLoad(this.page)
|
|
||||||
},
|
|
||||||
onLoad(page, params = {}) {
|
|
||||||
getList(
|
|
||||||
page.currentPage,
|
|
||||||
page.pageSize,
|
|
||||||
Object.assign(this.query, params)
|
|
||||||
).then((res) => {
|
|
||||||
const data = res.data.data;
|
|
||||||
this.data = data.records;
|
|
||||||
this.data.forEach(ele => {
|
|
||||||
if (ele.articleTitle.length > 15) {
|
|
||||||
ele.articleTitle = ele.articleTitle.slice(0, 15) + '...';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.page.total = data.total;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/**添加文章 */
|
|
||||||
addNewsInfo() {
|
|
||||||
this.$router.push({ name: '添加/修改文章article', params: { type: 'add', id: null } })
|
|
||||||
},
|
|
||||||
/*修改文章内容*/
|
|
||||||
editNewsInfo(id) {
|
|
||||||
this.$router.push({ name: '添加/修改文章article', params: { type: 'edit', id: id } })
|
|
||||||
},
|
|
||||||
/*删除文章*/
|
|
||||||
rowDel(row) {
|
|
||||||
this.$confirm('是否确认删除该文章？', {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning"
|
|
||||||
}).then(() => {
|
|
||||||
return delNews(row.id)
|
|
||||||
}).then(() => {
|
|
||||||
this.$message.success('删除成功！')
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
/*设置为封面*/
|
|
||||||
|
|
||||||
/*排序*/ //当order==total时，不能下移
|
|
||||||
orderItem(row, type) {
|
|
||||||
if (type == 'ascs') {
|
|
||||||
order(row.id, Number(row.sort), 1).then(() => {
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else if (type == 'desc') {
|
|
||||||
order(row.id, Number(row.sort), 0).then(() => {
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
release(id, type) {
|
|
||||||
if (type == 'release') {
|
|
||||||
this.$confirm("是否确定发布此篇文章?", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning"
|
|
||||||
}).then(() => {
|
|
||||||
release(id,1).then(() => {
|
|
||||||
this.$message.success('发布成功');
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if(type=='offShelf'){
|
|
||||||
this.$confirm("是否确定下架此篇文章?", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning"
|
|
||||||
}).then(() => {
|
|
||||||
release(id,0).then(() => {
|
|
||||||
this.$message.success('下架成功');
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
showNewsDetail(id){//点击文章名称预览文章内容
|
|
||||||
this.$refs.detail.open(id)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchBtn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
.articleTitle{
|
|
||||||
color: #6699FF;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,214 +0,0 @@
|
|||||||
<template>
|
|
||||||
<basic-container>
|
|
||||||
<avue-crud
|
|
||||||
:option="option"
|
|
||||||
:table-loading="loading"
|
|
||||||
:data="data"
|
|
||||||
:page.sync="page"
|
|
||||||
ref="crud"
|
|
||||||
@search-change="searchChange"
|
|
||||||
@current-change="currentChange"
|
|
||||||
@size-change="sizeChange"
|
|
||||||
@refresh-change="refreshChange"
|
|
||||||
@on-load="onLoad"
|
|
||||||
>
|
|
||||||
<template slot="createTime" slot-scope="{row}">
|
|
||||||
<div>{{dateFormat(new Date(row.createTime), "yyyy/MM/dd")}}</div>
|
|
||||||
</template>
|
|
||||||
<template slot="menuLeft">
|
|
||||||
<el-button size="small" type="primary" @click="add">新增分类</el-button>
|
|
||||||
</template>
|
|
||||||
<template slot="menu" slot-scope="{row}">
|
|
||||||
<el-button size="small" type="text" @click="modify(row)">编辑</el-button>
|
|
||||||
<el-button size="small" type="text" @click="del(row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</avue-crud>
|
|
||||||
<!-- 新增、编辑 -->
|
|
||||||
<el-drawer :title="drawerTitle" :visible.sync="viewDrawer" size="60%">
|
|
||||||
<el-form :model="formOption" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
||||||
<el-form-item label="分类名称" prop="name">
|
|
||||||
<el-input v-model="formOption.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="btnLoading">保存</el-button>
|
|
||||||
<el-button @click="resetForm('ruleForm')">取消</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
</el-form>
|
|
||||||
</el-drawer>
|
|
||||||
</basic-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { dateFormat } from "@/util/date";
|
|
||||||
import {getArticleCategoryList, articleCategoryAdd, articleCategoryEdit, articleCategoryDel} from '@/api/help/article/classify'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "index",
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
btnLoading:false,
|
|
||||||
loading:false,
|
|
||||||
viewDrawer:false,
|
|
||||||
drawerTitle: '新增分类',
|
|
||||||
formOption: {},
|
|
||||||
rules: {
|
|
||||||
name: [
|
|
||||||
{ required: true, message: '请输入分类名称', trigger: 'blur' },
|
|
||||||
{ max: 6, message: '最大输入6个汉字', trigger: 'blur'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
option: {
|
|
||||||
height: "auto",
|
|
||||||
tip: false,
|
|
||||||
searchShow: true,
|
|
||||||
searchMenuSpan: 4,
|
|
||||||
border: true,
|
|
||||||
index: true,
|
|
||||||
indexLabel: "序号",
|
|
||||||
columnBtn: false,
|
|
||||||
selection: false,
|
|
||||||
viewBtn: false,
|
|
||||||
addBtn: false,
|
|
||||||
editBtn:false,
|
|
||||||
delBtn: false,
|
|
||||||
menuWidth: 300,
|
|
||||||
labelWidth: 151,
|
|
||||||
dialogClickModal: false,
|
|
||||||
dialogType: "drawer",
|
|
||||||
dialogFullscreen: true,
|
|
||||||
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "分类名称",
|
|
||||||
prop: "name",
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "创建日期",
|
|
||||||
prop: "createTime",
|
|
||||||
display: false,
|
|
||||||
slot: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
data: [],
|
|
||||||
page: {
|
|
||||||
pageSize: 10,
|
|
||||||
currentPage: 1,
|
|
||||||
total: 100,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
dateFormat,
|
|
||||||
add () {
|
|
||||||
this.formOption = {}
|
|
||||||
this.drawerTitle = '新增分类'
|
|
||||||
this.viewDrawer = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.ruleForm.clearValidate();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
modify (row) {
|
|
||||||
this.formOption = JSON.parse(JSON.stringify(row))
|
|
||||||
this.drawerTitle = '编辑分类'
|
|
||||||
this.viewDrawer = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.ruleForm.clearValidate();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
del (row) {
|
|
||||||
this.$confirm('是否删除此数据, 是否继续?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
articleCategoryDel(JSON.stringify(row)).then(res => {
|
|
||||||
this.$message({
|
|
||||||
message: res.data.msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.refreshChange()
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
this.$message({
|
|
||||||
type: 'info',
|
|
||||||
message: '已取消删除'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
submitForm(formName) {
|
|
||||||
this.$refs[formName].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.btnLoading = true
|
|
||||||
if (this.drawerTitle === '新增分类') {
|
|
||||||
articleCategoryAdd(this.formOption).then(res => {
|
|
||||||
this.$message({
|
|
||||||
message: res.data.msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.refreshChange()
|
|
||||||
this.viewDrawer = false
|
|
||||||
this.btnLoading = false
|
|
||||||
})
|
|
||||||
} else if (this.drawerTitle === '编辑分类') {
|
|
||||||
var data = {
|
|
||||||
name: this.formOption.name,
|
|
||||||
id: this.formOption.id
|
|
||||||
}
|
|
||||||
articleCategoryEdit(data).then(res => {
|
|
||||||
this.$message({
|
|
||||||
message: res.data.msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.refreshChange()
|
|
||||||
this.viewDrawer = false
|
|
||||||
this.btnLoading = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log('error submit!!');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetForm(formName) {
|
|
||||||
this.$refs[formName].resetFields();
|
|
||||||
this.viewDrawer = false
|
|
||||||
|
|
||||||
},
|
|
||||||
/* 表格方法 */
|
|
||||||
onLoad(page, params = {}) {
|
|
||||||
this.loading = true;
|
|
||||||
var data = {
|
|
||||||
current: page.currentPage,
|
|
||||||
size: page.pageSize
|
|
||||||
}
|
|
||||||
getArticleCategoryList(data).then((res) => {
|
|
||||||
this.data = res.data.data.records;
|
|
||||||
this.page.total = res.data.data.total;
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
searchChange(params,done) {},
|
|
||||||
currentChange(val) {
|
|
||||||
this.page.currentPage = val
|
|
||||||
},
|
|
||||||
sizeChange(val) {
|
|
||||||
this.page.currentPage = 1
|
|
||||||
this.page.pageSize = val
|
|
||||||
},
|
|
||||||
refreshChange () {
|
|
||||||
this.page.currentPage = 1;
|
|
||||||
this.onLoad(this.page)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-form-item{
|
|
||||||
margin-bottom: 22px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog :visible.sync="visible" append-to-body>
|
|
||||||
<div class="containerBox">
|
|
||||||
<div class="content">
|
|
||||||
<div class="newsTop">
|
|
||||||
<h1>{{newsData.articleTitle}}</h1>
|
|
||||||
<p>
|
|
||||||
发表时间：{{newsData.createTime}}
|
|
||||||
来源：{{newsData.articleSrc}}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="note" v-html="newsData.note"></div>
|
|
||||||
<div class="footer">
|
|
||||||
<p>网站编辑：{{newsData.createUserName}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { getNewsDetail } from "@/api/manage/news"
|
|
||||||
export default{
|
|
||||||
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
visible:false,
|
|
||||||
newsData:[]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
open(id){
|
|
||||||
this.visible=true
|
|
||||||
getNewsDetail(id).then(res=>{
|
|
||||||
this.newsData = res.data.data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
.containerBox {
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
padding: 0 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .newsTop h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #333333;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .newsTop p {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999999;
|
|
||||||
margin-top: 40px;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 40px 0;
|
|
||||||
border-top: 1px solid #eeeeee;
|
|
||||||
border-bottom: 1px solid #eeeeee;
|
|
||||||
}
|
|
||||||
.content .note img{
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 80% !important;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
font-family: 'PingFangSC-Regular';
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,269 +0,0 @@
|
|||||||
<template>
|
|
||||||
<basic-container>
|
|
||||||
<jl-go-back></jl-go-back>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="8">
|
|
||||||
<avue-form :option="formOption" v-model="form" @submit="handleSubmit" ref="form">
|
|
||||||
</avue-form>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<Tinymce v-model="form.note" ref="tinymce"></Tinymce>
|
|
||||||
<!-- <quill-editor v-model="ruleForm.content" :options="editorOption" -->
|
|
||||||
<!-- @change="onEditorChange($event)" ref="QuillEditor">-->
|
|
||||||
<!-- </quill-editor>-->
|
|
||||||
<!-- <el-upload class="avatar-uploader" :action="putFile" :show-file-list="false" :on-success="handleAvatarSuccess"-->
|
|
||||||
<!-- :before-upload="beforeAvatarUpload">-->
|
|
||||||
<!-- <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
|
|
||||||
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
||||||
<!-- </el-upload>-->
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</basic-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import 'quill/dist/quill.core.css'
|
|
||||||
import 'quill/dist/quill.snow.css'
|
|
||||||
import 'quill/dist/quill.bubble.css'
|
|
||||||
import { quillEditor } from "vue-quill-editor";
|
|
||||||
|
|
||||||
|
|
||||||
import { addNews, getNewsDetail, editNews } from "@/api/manage/news"
|
|
||||||
import { putFile } from "@/api/resource/oss";
|
|
||||||
import Tinymce from "@/components/Tinymce";
|
|
||||||
const toolbarItems = [
|
|
||||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
|
||||||
["blockquote", "code-block"], // 引用 代码块
|
|
||||||
[{ header: 1 }, { header: 2 }], // 1、2 级标题
|
|
||||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
|
||||||
[{ script: "sub" }, { script: "super" }], // 上标/下标
|
|
||||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
|
||||||
// [{'direction': 'rtl'}], // 文本方向
|
|
||||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
|
||||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
|
||||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
|
||||||
[{ font: [] }], // 字体种类
|
|
||||||
[{ align: [] }], // 对齐方式
|
|
||||||
["clean"], // 清除文本格式
|
|
||||||
["image"], // 链接、图片、视频
|
|
||||||
]
|
|
||||||
export default {
|
|
||||||
components: { quillEditor, Tinymce},
|
|
||||||
props: {
|
|
||||||
id: Number,
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.onload()
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
putFile,
|
|
||||||
imageUrl: '',
|
|
||||||
ruleForm: {
|
|
||||||
content: null,
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
note: ''
|
|
||||||
},
|
|
||||||
description:'',
|
|
||||||
formOption: {
|
|
||||||
// labelWidth:120,
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "文章名称",
|
|
||||||
prop: "articleTitle",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
maxlength:50,
|
|
||||||
showWordLimit:true,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入文章名称'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "摘要",
|
|
||||||
prop: "description",
|
|
||||||
//formslot: true,
|
|
||||||
rows:3,
|
|
||||||
type: 'textarea',
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入文章作者'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
maxlength:200,
|
|
||||||
showWordLimit:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章来源",
|
|
||||||
prop: "articleSrc",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
maxlength:50,
|
|
||||||
showWordLimit:true,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章源地址",
|
|
||||||
prop: "articleSrcUrl",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
maxlength:100,
|
|
||||||
showWordLimit:true,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "作者",
|
|
||||||
prop: "author",
|
|
||||||
span: 24,
|
|
||||||
row: true,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请输入文章作者'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
maxlength:50,
|
|
||||||
showWordLimit:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "首页图",
|
|
||||||
prop: "headPic",
|
|
||||||
type: "upload",
|
|
||||||
action: putFile(),
|
|
||||||
span: 12,
|
|
||||||
showFileList: false,
|
|
||||||
listType: "picture-img",
|
|
||||||
multiple: false,
|
|
||||||
canvasOption: {},
|
|
||||||
headers: [],
|
|
||||||
data: [],
|
|
||||||
propsHttp: {
|
|
||||||
res: "data",
|
|
||||||
url: "link",
|
|
||||||
},
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请上传首页图'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
editorOption: {
|
|
||||||
modules: {
|
|
||||||
toolbar: {
|
|
||||||
container: toolbarItems,
|
|
||||||
handlers: {
|
|
||||||
'image': function (value) {
|
|
||||||
if (value) {
|
|
||||||
document.querySelector('.avatar-uploader input').click()
|
|
||||||
} else {
|
|
||||||
this.quill.format('image', false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},//工具菜单栏配置
|
|
||||||
},
|
|
||||||
placeholder: "请在这里编写文章内容", //提示
|
|
||||||
readyOnly: false, //是否只读
|
|
||||||
theme: "snow", //主题 snow/bubble
|
|
||||||
syntax: true, //语法检测
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
// 值发生变化
|
|
||||||
onEditorChange(editor) {
|
|
||||||
this.content = editor.html;
|
|
||||||
},
|
|
||||||
handleSubmit(form, done) {
|
|
||||||
// this.form['note'] = this.$refs.tinymce.getContent()
|
|
||||||
|
|
||||||
if(this.form.note.length>64*512){
|
|
||||||
this.$message.error('文章内容不能超过64KB！');
|
|
||||||
done()
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
if (this.type == 'add') {
|
|
||||||
addNews(
|
|
||||||
this.form.articleTitle,
|
|
||||||
this.form.headPic,
|
|
||||||
this.form.articleSrc,
|
|
||||||
this.form.articleSrcUrl,
|
|
||||||
this.form.author,
|
|
||||||
this.form.description,
|
|
||||||
this.form.note
|
|
||||||
).then(() => {
|
|
||||||
this.$message.success('添加成功');
|
|
||||||
this.$router.go(-1);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else if (this.type == 'edit') {
|
|
||||||
editNews(
|
|
||||||
this.id,
|
|
||||||
this.form.articleTitle,
|
|
||||||
this.form.headPic,
|
|
||||||
this.form.articleSrc,
|
|
||||||
this.form.articleSrcUrl,
|
|
||||||
this.form.author,
|
|
||||||
this.form.description,
|
|
||||||
this.form.note
|
|
||||||
).then(() => {
|
|
||||||
this.$message.success('修改成功');
|
|
||||||
done()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
/*上传图片*/
|
|
||||||
handleAvatarSuccess(res) {
|
|
||||||
let quill = this.$refs.QuillEditor.quill
|
|
||||||
let length = quill.getSelection().index;//获取光标所在位置
|
|
||||||
quill.insertEmbed(length, 'image', res.data.link)
|
|
||||||
quill.setSelection(length + 1)//光标后移一位
|
|
||||||
},
|
|
||||||
beforeAvatarUpload(file) {
|
|
||||||
const isJPG = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"].indexOf(file.type) != -1;
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
||||||
if (!isJPG) {
|
|
||||||
this.$message.error('上传图片格式不正确');
|
|
||||||
}
|
|
||||||
if (!isLt2M) {
|
|
||||||
this.$message.error('上传图片大小不能超过 2MB!');
|
|
||||||
}
|
|
||||||
return isJPG && isLt2M;
|
|
||||||
},
|
|
||||||
onload() {
|
|
||||||
if (this.id && this.type == 'edit') {
|
|
||||||
getNewsDetail(this.id).then(res => {
|
|
||||||
this.form = res.data.data;
|
|
||||||
this.description=this.form.description;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.avatar-uploader {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-editor {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,299 +0,0 @@
|
|||||||
<template>
|
|
||||||
<basic-container>
|
|
||||||
<!--搜索栏-->
|
|
||||||
<el-form size="small" label-position="right" style="padding-left: 10px; padding-right: 10px" :inline="true">
|
|
||||||
<el-row :span="24">
|
|
||||||
<el-form-item label="文章名称：">
|
|
||||||
<el-input v-model="query.articleTitle"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="作者：">
|
|
||||||
<el-input v-model="query.author"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="日期：">
|
|
||||||
<el-date-picker v-model="query.searchDate" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期" value-format="yyyy-MM-dd">
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<div class="searchBtn">
|
|
||||||
<el-button type="primary" size="small" icon="el-icon-search" @click="searchChange">搜 索</el-button>
|
|
||||||
<el-button size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
|
|
||||||
</div>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
|
||||||
<!--搜索栏-->
|
|
||||||
<avue-crud :option="option" :data="data" :page="page" v-model="form" @on-load="onLoad" @row-update="rowUpdate"
|
|
||||||
@row-save="rowSave" @row-del="rowDel" @current-change="currentChange" @size-change="sizeChange"
|
|
||||||
@selection-change="selectionChange" @refresh-change="refreshChange">
|
|
||||||
<template slot="headPic" slot-scope="{ row }">
|
|
||||||
<img class="img" :src="row.headPic" alt="" srcset="" />
|
|
||||||
</template>
|
|
||||||
<template slot="menu" slot-scope="{row}">
|
|
||||||
<el-button type="text" @click="editNewsInfo(row.id)" icon="el-icon-edit">修改</el-button>
|
|
||||||
<!--<el-button type="text" @click="setCover(row.id)">设置为封面</el-button>-->
|
|
||||||
<el-button type="text" v-if="row.status==0" @click="release(row.id,'release')">发布</el-button>
|
|
||||||
<el-button type="text" v-if="row.status==1" @click="release(row.id,'offShelf')">下架</el-button>
|
|
||||||
</template>
|
|
||||||
<template slot="menuLeft">
|
|
||||||
<el-button @click="addNewsInfo" icon="el-icon-plus" type="primary">添加文章</el-button>
|
|
||||||
</template>
|
|
||||||
<template slot="sort" slot-scope="{row}">
|
|
||||||
<el-button type="text" @click="orderItem(row,'ascs')">上移</el-button>
|
|
||||||
<el-button type="text" @click="orderItem(row,'desc')">下移</el-button>
|
|
||||||
</template>
|
|
||||||
<template slot="articleTitle" slot-scope="{row}">
|
|
||||||
<span class="articleTitle" @click="showNewsDetail(row.id)">{{row.articleTitle}}</span>
|
|
||||||
</template>
|
|
||||||
<template slot="articleSrcUrl" slot-scope="{row}">
|
|
||||||
<a :href="row.articleSrcUrl" style="color: #6699FF;" target="blank">{{row.articleSrcUrl}}</a>
|
|
||||||
</template>
|
|
||||||
</avue-crud>
|
|
||||||
<news-detail ref="detail"></news-detail>
|
|
||||||
</basic-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { getList, delNews, order, release } from "@/api/manage/news";
|
|
||||||
import newsDetail from './Dialog/newsDetail'
|
|
||||||
export default {
|
|
||||||
components:{
|
|
||||||
newsDetail
|
|
||||||
},
|
|
||||||
name: "manage_jlhome_news",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: [],
|
|
||||||
selectionList: [],
|
|
||||||
query: {},
|
|
||||||
form: {},
|
|
||||||
drawer: false,
|
|
||||||
option: {
|
|
||||||
border: true,
|
|
||||||
index: true,
|
|
||||||
indexLabel: "序号",
|
|
||||||
labelWidth: 100,
|
|
||||||
selection: false,
|
|
||||||
align: "center",
|
|
||||||
editBtn: false,
|
|
||||||
delBtn: true,
|
|
||||||
addBtn: false,
|
|
||||||
|
|
||||||
addText: '文章信息',
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: "文章名称",
|
|
||||||
prop: "articleTitle",
|
|
||||||
slot:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "首页图",
|
|
||||||
prop: "headPic",
|
|
||||||
slot: true,
|
|
||||||
type: "upload",
|
|
||||||
span: 12,
|
|
||||||
showFileList: false,
|
|
||||||
listType: "picture-img",
|
|
||||||
multiple: false,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "发稿日期",
|
|
||||||
prop: "createTime",
|
|
||||||
type: "date",
|
|
||||||
formslot: true,
|
|
||||||
format: "yyyy-MM-dd",
|
|
||||||
editDisplay: false,
|
|
||||||
addDisplay: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章来源",
|
|
||||||
prop: "articleSrc",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "文章原地址",
|
|
||||||
prop: "articleSrcUrl",
|
|
||||||
slot:true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "作者",
|
|
||||||
prop: "author",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "上传人",
|
|
||||||
prop: "createUserName",
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '状态',
|
|
||||||
prop: 'status',
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
dicData: [
|
|
||||||
{
|
|
||||||
label: '已发布',
|
|
||||||
value: '1'
|
|
||||||
}, {
|
|
||||||
label: '未发布',
|
|
||||||
value: '0'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "排序",
|
|
||||||
prop: "sort",
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
slot: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
group: [
|
|
||||||
{
|
|
||||||
label: "文章内容",
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '文章内容',
|
|
||||||
prop: 'newsInfo',
|
|
||||||
formslot: true
|
|
||||||
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
page: {
|
|
||||||
currentPage: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
total: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
currentChange(current) {
|
|
||||||
this.page.currentPage = current;
|
|
||||||
this.onLoad(this.page);
|
|
||||||
},
|
|
||||||
sizeChange(size) {
|
|
||||||
this.page.pageSize = size;
|
|
||||||
this.onLoad(this.page);
|
|
||||||
},
|
|
||||||
selectionChange(select) {
|
|
||||||
this.selectionList = select;
|
|
||||||
},
|
|
||||||
searchChange() {
|
|
||||||
if (this.query.searchDate) {
|
|
||||||
this.query['beginTime'] = this.query.searchDate[0];
|
|
||||||
this.query['endTime'] = this.query.searchDate[1];
|
|
||||||
}
|
|
||||||
this.onLoad(this.page, this.query);
|
|
||||||
},
|
|
||||||
searchReset() {
|
|
||||||
this.query = {};
|
|
||||||
this.onLoad(this.page);
|
|
||||||
},
|
|
||||||
refreshChange() {
|
|
||||||
this.page.currentPage = 1;
|
|
||||||
this.onLoad(this.page)
|
|
||||||
},
|
|
||||||
onLoad(page, params = {}) {
|
|
||||||
getList(
|
|
||||||
page.currentPage,
|
|
||||||
page.pageSize,
|
|
||||||
Object.assign(this.query, params)
|
|
||||||
).then((res) => {
|
|
||||||
const data = res.data.data;
|
|
||||||
this.data = data.records;
|
|
||||||
this.data.forEach(ele => {
|
|
||||||
if (ele.articleTitle.length > 15) {
|
|
||||||
ele.articleTitle = ele.articleTitle.slice(0, 15) + '...';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.page.total = data.total;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/**添加文章 */
|
|
||||||
addNewsInfo() {
|
|
||||||
this.$router.push({ name: '添加/修改文章', params: { type: 'add', id: null } })
|
|
||||||
},
|
|
||||||
/*修改文章内容*/
|
|
||||||
editNewsInfo(id) {
|
|
||||||
this.$router.push({ name: '添加/修改文章', params: { type: 'edit', id: id } })
|
|
||||||
},
|
|
||||||
/*删除文章*/
|
|
||||||
rowDel(row) {
|
|
||||||
this.$confirm('是否确认删除该文章？', {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning"
|
|
||||||
}).then(() => {
|
|
||||||
return delNews(row.id)
|
|
||||||
}).then(() => {
|
|
||||||
this.$message.success('删除成功！')
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
/*设置为封面*/
|
|
||||||
|
|
||||||
/*排序*/ //当order==total时，不能下移
|
|
||||||
orderItem(row, type) {
|
|
||||||
if (type == 'ascs') {
|
|
||||||
order(row.id, Number(row.sort), 1).then(() => {
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else if (type == 'desc') {
|
|
||||||
order(row.id, Number(row.sort), 0).then(() => {
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
release(id, type) {
|
|
||||||
if (type == 'release') {
|
|
||||||
this.$confirm("是否确定发布此篇文章?", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning"
|
|
||||||
}).then(() => {
|
|
||||||
release(id,1).then(() => {
|
|
||||||
this.$message.success('发布成功');
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if(type=='offShelf'){
|
|
||||||
this.$confirm("是否确定下架此篇文章?", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning"
|
|
||||||
}).then(() => {
|
|
||||||
release(id,0).then(() => {
|
|
||||||
this.$message.success('下架成功');
|
|
||||||
this.onLoad(this.page)
|
|
||||||
})
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
showNewsDetail(id){//点击文章名称预览文章内容
|
|
||||||
this.$refs.detail.open(id)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchBtn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
.articleTitle{
|
|
||||||
color: #6699FF;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -29,10 +29,10 @@
|
|||||||
clearable
|
clearable
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="零工岗位名称:">
|
<el-form-item label="岗位名称:">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="query.missionTitle"
|
v-model="query.missionTitle"
|
||||||
placeholder="零工岗位名称"
|
placeholder="岗位名称"
|
||||||
clearable
|
clearable
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -273,7 +273,7 @@ export default {
|
|||||||
width: 120,
|
width: 120,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "零工岗位名称",
|
label: "岗位名称",
|
||||||
prop: "missionTitle",
|
prop: "missionTitle",
|
||||||
display: false,
|
display: false,
|
||||||
fixed: true,
|
fixed: true,
|
||||||
|
|||||||
Reference in New Issue
Block a user