我们发布啦
This commit is contained in:
张乐
205
admin/src/views/content/article/edit.vue
Normal file
205
admin/src/views/content/article/edit.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<el-form ref="pram" label-width="150px" :model="pram">
|
||||
<el-form-item label="标题" prop="title" :rules="[{required:true, message:'请填写标题', trigger:['blur','change']}]">
|
||||
<el-input v-model="pram.title" placeholder="标题" maxlength="100"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author" :rules="[{required:true, message:'请填作者', trigger:['blur','change']}]">
|
||||
<el-input v-model="pram.author" placeholder="作者" maxlength="20"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章分类">
|
||||
<!-- prop="cid" :rules="[{required:true, message:'请选择文章分类', trigger:['blur','change']}]"-->
|
||||
<el-cascader v-model="pram.cid" :options="categoryTreeData" :props="categoryProps" style="width:100%;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图文封面" prop="imageInput" :rules="[{ required: true, message: '请上传图文封面', trigger: 'change' }]">
|
||||
<div class="upLoadPicBox" @click="modalPicTap('1')">
|
||||
<div v-if="pram.imageInput" class="pictrue"><img :src="pram.imageInput"></div>
|
||||
<div v-else class="upLoad">
|
||||
<i class="el-icon-camera cameraIconfont" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!--<el-form-item label="微信公众号封面" prop="imageInput" :rules="[{ required: true, message: '请上传图文封面', trigger: 'change' }]">-->
|
||||
<!--<div class="upLoadPicBox">-->
|
||||
<!--<div v-if="pram.imageInput" class="pictrue"><img :src="pram.imageInput"></div>-->
|
||||
<!--<el-upload-->
|
||||
<!--v-else-->
|
||||
<!--class="upload-demo mr10 mb15"-->
|
||||
<!--action-->
|
||||
<!--:http-request="handleUploadForm"-->
|
||||
<!--:headers="myHeaders"-->
|
||||
<!--:show-file-list="false"-->
|
||||
<!--multiple-->
|
||||
<!-->-->
|
||||
<!--<div class="upLoad">-->
|
||||
<!--<i class="el-icon-camera cameraIconfont" />-->
|
||||
<!--</div>-->
|
||||
<!--</el-upload>-->
|
||||
<!--</div>-->
|
||||
<!--</el-form-item>-->
|
||||
<el-form-item label="文章简介" prop="synopsis" :rules="[{required:true, message:'请填写文章简介', trigger:['blur','change']}]">
|
||||
<el-input v-model="pram.synopsis" maxlength="100" type="textarea" :rows="2" resize="none" placeholder="文章简介" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文章内容" prop="content" :rules="[{required:true, message:'请填写文章内容', trigger:['blur','change']}]">
|
||||
<ueditor-from v-model="pram.content" :content="pram.content" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否Banner">
|
||||
<el-switch v-model="pram.isBanner" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否热门">
|
||||
<el-switch v-model="pram.isHot" />
|
||||
</el-form-item>
|
||||
<el-form-item label="原文链接">
|
||||
<p>原文链接选填，填写之后在图文左下方会出现此链接</p>
|
||||
<el-input v-model="pram.url" placeholder="原文链接" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handerSubmit('pram')">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tinymce from '@/components/Tinymce/index'
|
||||
import * as categoryApi from '@/api/categoryApi.js'
|
||||
import * as constants from '@/utils/constants.js'
|
||||
import * as articleApi from '@/api/article.js'
|
||||
import * as selfUtil from '@/utils/ZBKJIutil.js'
|
||||
import { fileImageApi } from '@/api/systemSetting'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
// name: "edit",
|
||||
components: { Tinymce },
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
editData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
constants,
|
||||
categoryTreeData: [],
|
||||
categoryProps: {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'child',
|
||||
expandTrigger: 'hover',
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
},
|
||||
pram: {
|
||||
author: null,
|
||||
cid: 0,
|
||||
content: null,
|
||||
imageInput: '',
|
||||
isBanner: false,
|
||||
isHot: null,
|
||||
shareSynopsis: null,
|
||||
shareTitle: null,
|
||||
sort: 0,
|
||||
synopsis: null,
|
||||
title: null,
|
||||
url: null,
|
||||
id: null
|
||||
// mediaId: null
|
||||
},
|
||||
myHeaders: { 'X-Token': getToken() }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handlerGetCategoryTreeData()
|
||||
this.hadlerInitEditData()
|
||||
},
|
||||
methods: {
|
||||
// 上传
|
||||
handleUploadForm(param){
|
||||
const formData = new FormData()
|
||||
formData.append('media', param.file)
|
||||
let loading = this.$loading({
|
||||
lock: true,
|
||||
text: '上传中，请稍候...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
fileImageApi(formData, {type: 'image'}).then(res => {
|
||||
loading.close()
|
||||
this.pram.mediaId = res.mediaId
|
||||
|
||||
// this.formValidate.contents.mediaId = res.mediaId
|
||||
// this.formValidate.contents.srcUrl = res.url
|
||||
this.$message.success('上传成功')
|
||||
}).catch(() => {
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
modalPicTap(tit) {
|
||||
const _this = this
|
||||
this.$modalUpload(function(img) {
|
||||
_this.pram.imageInput = img[0].sattDir
|
||||
}, tit, 'content')
|
||||
},
|
||||
hadlerInitEditData() {
|
||||
if (this.isEdit !== 1) return
|
||||
const { author, cid, content, imageInput,
|
||||
isBanner, isHot, shareSynopsis, shareTitle, sort, synopsis, title, url, id } = this.editData
|
||||
this.pram.author = author
|
||||
this.pram.cid = Number.parseInt(cid)
|
||||
this.pram.content = content
|
||||
this.pram.imageInput = imageInput
|
||||
this.pram.isBanner = isBanner
|
||||
this.pram.isHot = isHot
|
||||
this.pram.shareSynopsis = shareSynopsis
|
||||
this.pram.shareTitle = shareTitle
|
||||
this.pram.sort = sort
|
||||
this.pram.synopsis = synopsis
|
||||
this.pram.title = title
|
||||
this.pram.url = url
|
||||
this.pram.id = id
|
||||
// this.pram.mediaId = mediaId
|
||||
},
|
||||
handlerGetCategoryTreeData() {
|
||||
const _pram = { type: constants.categoryType[2].value, status: 1 }
|
||||
categoryApi.treeCategroy(_pram).then(data => {
|
||||
this.categoryTreeData = selfUtil.addTreeListLabelForCasCard(data)
|
||||
})
|
||||
},
|
||||
handerSubmit(form) {
|
||||
this.$refs[form].validate(valid => {
|
||||
if (!valid) return
|
||||
if (this.isEdit === 0) {
|
||||
this.handlerSave()
|
||||
} else {
|
||||
this.handlerUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
handlerUpdate() {
|
||||
this.pram.cid = Array.isArray(this.pram.cid) ? this.pram.cid[0] : this.pram.cid
|
||||
this.pram.shareTitle = this.pram.title
|
||||
this.pram.shareSynopsis = this.pram.synopsis
|
||||
articleApi.UpdateArticle(this.pram).then(data => {
|
||||
this.$message.success('编辑文章成功')
|
||||
this.$emit('hideDialog')
|
||||
})
|
||||
},
|
||||
handlerSave() {
|
||||
this.pram.cid = Array.isArray(this.pram.cid) ? this.pram.cid[0] : this.pram.cid
|
||||
this.pram.shareTitle = this.pram.title
|
||||
this.pram.shareSynopsis = this.pram.synopsis
|
||||
articleApi.AddArticle(this.pram).then(data => {
|
||||
this.$message.success('新增文章成功')
|
||||
this.$emit('hideDialog')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
192
admin/src/views/content/article/list.vue
Normal file
192
admin/src/views/content/article/list.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="container">
|
||||
<el-form inline size="small">
|
||||
<el-form-item>
|
||||
<el-input class="selWidth" v-model="listPram.keywords" placeholder="请输入关键词" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="listPram.cid" clearable placeholder="请选择文章分类">
|
||||
<el-option
|
||||
v-for="item in categoryTreeData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handerSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button size="mini" type="primary" @click="handlerOpenEdit(0)">添加文章</el-button>
|
||||
</div>
|
||||
<el-table :data="listData.list" size="mini"
|
||||
class="table"
|
||||
highlight-current-row>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
min-width="50"
|
||||
/>
|
||||
<el-table-column label="图片" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<div class="demo-image__preview">
|
||||
<el-image
|
||||
style="width: 36px; height: 36px"
|
||||
:src="scope.row.imageInput[0]"
|
||||
:preview-src-list="[scope.row.imageInput[0]]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="180" />
|
||||
<el-table-column prop="visit" label="文章分类" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.cid | articleTypeFilter }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="visit" label="浏览量" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.visit | filterEmpty }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="author" label="作者" min-width="180" />
|
||||
<el-table-column prop="synopsis" label="文章简介" show-overflow-tooltip min-width="250"/>
|
||||
<el-table-column prop="shareTitle" label="分享标题" show-overflow-tooltip min-width="200"/>
|
||||
<el-table-column prop="updateTime" label="更新时间" min-width="180"/>
|
||||
<el-table-column label="操作" min-width="180" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handlerOpenEdit(1, scope.row)">编辑</el-button>
|
||||
<el-button type="text" disabled>关联产品</el-button>
|
||||
<el-button type="text" @click="handlerDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="listPram.page"
|
||||
:page-sizes="constants.page.limit"
|
||||
:layout="constants.page.layout"
|
||||
:total="listData.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
<el-dialog
|
||||
:visible.sync="editDialogConfig.visible"
|
||||
:title="editDialogConfig.isEdit === 0?'创建文章':'编辑文章'"
|
||||
top="1vh"
|
||||
width="80%"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<edit
|
||||
v-if="editDialogConfig.visible"
|
||||
:is-edit="editDialogConfig.isEdit"
|
||||
:edit-data="editDialogConfig.editData"
|
||||
@hideDialog="handlerHideDialog"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as articleApi from '@/api/article.js'
|
||||
import * as categoryApi from '@/api/categoryApi.js'
|
||||
import * as constants from '@/utils/constants.js'
|
||||
import * as selfUtil from '@/utils/ZBKJIutil.js'
|
||||
import edit from './edit'
|
||||
export default {
|
||||
// name: "list",
|
||||
components: { edit },
|
||||
data() {
|
||||
return {
|
||||
constants,
|
||||
listPram: {
|
||||
keywords: null,
|
||||
cid: null,
|
||||
page: 1,
|
||||
limit: constants.page.limit[0]
|
||||
},
|
||||
listData: { list: [], total: 0 },
|
||||
editDialogConfig: {
|
||||
visible: false,
|
||||
data: {},
|
||||
isEdit: 0 // 0=add 1=edit
|
||||
},
|
||||
categoryTreeData: [],
|
||||
categoryProps: {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'child',
|
||||
expandTrigger: 'hover',
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handlerGetListData(this.listPram)
|
||||
this.handlerGetTreeList()
|
||||
},
|
||||
methods: {
|
||||
handlerGetTreeList() {
|
||||
categoryApi.listCategroy({ type: 3, status: '' }).then(data => {
|
||||
this.categoryTreeData = data.list
|
||||
localStorage.setItem('articleClass', JSON.stringify(data.list))
|
||||
})
|
||||
},
|
||||
handerSearch() {
|
||||
this.listPram.page = 1
|
||||
this.handlerGetListData(this.listPram)
|
||||
},
|
||||
handlerGetListData(pram) {
|
||||
articleApi.ListArticle(pram).then(data => {
|
||||
this.listData = data
|
||||
})
|
||||
},
|
||||
handlerOpenEdit(isEdit, editData) { // 0=add 1=edit
|
||||
if (isEdit === 1) {
|
||||
this.editDialogConfig.isEdit = 1
|
||||
this.editDialogConfig.editData = editData
|
||||
}else{
|
||||
this.editDialogConfig.isEdit = 0
|
||||
}
|
||||
this.editDialogConfig.visible = true
|
||||
},
|
||||
// handlerGetCategoryTreeData() {
|
||||
// const _pram = { type: constants.categoryType[2].value, status: 1 }
|
||||
// categoryApi.treeCategroy(_pram).then(data => {
|
||||
// this.categoryTreeData = selfUtil.addTreeListLabelForCasCard(data)
|
||||
// })
|
||||
// },
|
||||
handlerHideDialog() {
|
||||
this.handlerGetListData(this.listPram)
|
||||
this.editDialogConfig.visible = false
|
||||
},
|
||||
handlerDelete(rowData) {
|
||||
this.$confirm('确定删除当前数据', '提示').then(result => {
|
||||
articleApi.DelArticle(rowData).then(data => {
|
||||
this.$message.success('删除数据成功')
|
||||
this.handlerGetListData(this.listPram)
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listPram.limit = val
|
||||
this.handlerGetListData(this.listPram)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listPram.page = val
|
||||
this.handlerGetListData(this.listPram)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
23
admin/src/views/content/articleclass/list.vue
Normal file
23
admin/src/views/content/articleclass/list.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<category-list :biztype="constants.categoryType[2]" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import categoryList from '@/components/Category/list'
|
||||
import * as constants from '@/utils/constants.js'
|
||||
export default {
|
||||
// name: "list",
|
||||
components: { categoryList },
|
||||
data() {
|
||||
return {
|
||||
constants
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user