|
|
|
@ -1,10 +1,65 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="filter-container"> |
|
|
|
<el-button class="filter-item el-button el-button--primary el-button--mini" type="primary" icon="el-icon-edit" @click="handleCreate"> |
|
|
|
添加文章 |
|
|
|
</el-button> |
|
|
|
<el-card class="box-card"> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<!--部门数据--> |
|
|
|
<el-col :span="4" :xs="24"> |
|
|
|
<div class="head-container"> |
|
|
|
<el-input |
|
|
|
v-model="deptName" |
|
|
|
placeholder="请输入分类名称" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
prefix-icon="el-icon-search" |
|
|
|
style="margin-bottom: 20px" |
|
|
|
:default-expand-all="false" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="head-container"> |
|
|
|
<el-tree |
|
|
|
ref="tree" |
|
|
|
:data="categoryOptions" |
|
|
|
highlight-current |
|
|
|
:props="defaultProps" |
|
|
|
:expand-on-click-node="false" |
|
|
|
:filter-node-method="filterNode" |
|
|
|
@node-click="handleNodeClick" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<!--用户数据--> |
|
|
|
<el-col :span="20" :xs="24"> |
|
|
|
<el-form ref="queryForm" :model="listQuery" :inline="true" label-width="68px"> |
|
|
|
<el-form-item label="文章标题" prop="title"> |
|
|
|
<el-input |
|
|
|
v-model="listQuery.title" |
|
|
|
placeholder="请输入文章标题" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 160px" |
|
|
|
@keyup.enter.native="getList" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="状态" prop="is_offline"> |
|
|
|
<el-select |
|
|
|
v-model="listQuery.is_offline" |
|
|
|
placeholder="文章状态" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
style="width: 160px" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="dict in statusOptions" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table |
|
|
|
v-loading="listLoading" |
|
|
|
:data="list" |
|
|
|
@ -65,20 +120,28 @@ |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<pagination |
|
|
|
v-show="total > 0" |
|
|
|
:total="total" |
|
|
|
:page.sync="listQuery.page" |
|
|
|
:limit.sync="listQuery.limit" |
|
|
|
@pagination="getList" |
|
|
|
/> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> |
|
|
|
<!-- 添加或修改分类对话框 --> |
|
|
|
<el-drawer |
|
|
|
ref="drawer" |
|
|
|
:title="textMap[dialogStatus]" |
|
|
|
:visible.sync="dialogFormVisible" |
|
|
|
direction="rtl" |
|
|
|
custom-class="drawer" |
|
|
|
custom-class="demo-drawer" |
|
|
|
size="950px" |
|
|
|
> |
|
|
|
<div class="drawer__content"> |
|
|
|
<!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="dialogFullscreen"> --> |
|
|
|
<el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style=""> |
|
|
|
<div class="demo-drawer__content"> |
|
|
|
<el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style> |
|
|
|
<el-form-item label="类型"> |
|
|
|
<treeselect |
|
|
|
v-model="temp.category_id" |
|
|
|
@ -89,14 +152,19 @@ |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<template v-if="tagData.length"> |
|
|
|
<el-form-item :label="item.label" v-for="(item,index) in tagData" :key="index"> |
|
|
|
<el-select v-model="chooseTagData[index]" multiple placeholder="请选择" style="width:100%"> |
|
|
|
<el-form-item :label="item.label" v-for="(item, index) in tagData" :key="index"> |
|
|
|
<el-select |
|
|
|
v-model="chooseTagData[index]" |
|
|
|
multiple |
|
|
|
placeholder="请选择" |
|
|
|
style="width:100%" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="(sItem,sIndex) in item.value" |
|
|
|
v-for="(sItem, sIndex) in item.value" |
|
|
|
:key="sIndex" |
|
|
|
:label="sItem" |
|
|
|
:value="sItem"> |
|
|
|
</el-option> |
|
|
|
:value="sItem" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</template> |
|
|
|
@ -104,7 +172,12 @@ |
|
|
|
<el-input v-model="temp.title" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="日期" prop="time"> |
|
|
|
<el-date-picker v-model="temp.time" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期"></el-date-picker> |
|
|
|
<el-date-picker |
|
|
|
v-model="temp.time" |
|
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期" |
|
|
|
></el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="外链" prop="url"> |
|
|
|
<el-input v-model="temp.url" /> |
|
|
|
@ -113,9 +186,21 @@ |
|
|
|
<el-input type="textarea" v-model="temp.description" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="封面" prop="img" required> |
|
|
|
<img v-if="temp.img" :src="temp.img" class="el-upload el-upload--picture-card" style="float:left"> |
|
|
|
<el-upload ref="sys_app_logo" :on-success="uploadSuccess" :on-error="uploadError" |
|
|
|
:action="uploadAction" style="float:left" list-type="picture-card" :show-file-list="false"> |
|
|
|
<img |
|
|
|
v-if="temp.img" |
|
|
|
:src="temp.img" |
|
|
|
class="el-upload el-upload--picture-card" |
|
|
|
style="float:left" |
|
|
|
/> |
|
|
|
<el-upload |
|
|
|
ref="sys_app_logo" |
|
|
|
:on-success="uploadSuccess" |
|
|
|
:on-error="uploadError" |
|
|
|
:action="uploadAction" |
|
|
|
style="float:left" |
|
|
|
list-type="picture-card" |
|
|
|
:show-file-list="false" |
|
|
|
> |
|
|
|
<i class="el-icon-plus" /> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
@ -126,22 +211,32 @@ |
|
|
|
:limit="1" |
|
|
|
:on-exceed="handleFileExceed" |
|
|
|
:onSuccess="uploadFileSuccess" |
|
|
|
:file-list=" temp.script_url ? [JSON.parse(temp.script_url)] : [] " |
|
|
|
:file-list="temp.script_url ? [JSON.parse(temp.script_url)] : []" |
|
|
|
> |
|
|
|
<el-button size="small" type="primary">点击上传</el-button> |
|
|
|
<!-- <div slot="tip" class="el-upload__tip"> |
|
|
|
只能上传jpg/png文件，且不超过500kb |
|
|
|
</div> --> |
|
|
|
</div>--> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="视频时长" prop="video_time"> |
|
|
|
<el-time-picker v-model="temp.video_time" value-format="HH:mm:ss" type="time" placeholder="选择时间"></el-time-picker> |
|
|
|
<el-time-picker |
|
|
|
v-model="temp.video_time" |
|
|
|
value-format="HH:mm:ss" |
|
|
|
type="time" |
|
|
|
placeholder="选择时间" |
|
|
|
></el-time-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="内容" class="editor-box"> |
|
|
|
<vue-ueditor-wrap v-model="temp.content" :config="ueditorConfig" :destroy="true" v-if="dialogFormVisible" /> |
|
|
|
<vue-ueditor-wrap |
|
|
|
v-model="temp.content" |
|
|
|
:config="ueditorConfig" |
|
|
|
:destroy="true" |
|
|
|
v-if="dialogFormVisible" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div class="drawer__footer"> |
|
|
|
<div class="demo-drawer__footer"> |
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
|
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|
|
|
</div> |
|
|
|
@ -151,8 +246,8 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { validPhone,isEmpty } from '@/utils/validate' |
|
|
|
import { fetchList, createArticle, updateArticle,delArticle, fetchArticleDetails } from '@/api/article' |
|
|
|
import { validPhone, isEmpty } from '@/utils/validate' |
|
|
|
import { fetchList, createArticle, updateArticle, delArticle, fetchArticleDetails } from '@/api/article' |
|
|
|
import Pagination from '@/components/Pagination' // secondary package based on el-pagination |
|
|
|
import VueUeditorWrap from "vue-ueditor-wrap" |
|
|
|
import { listCategory } from '@/api/category' |
|
|
|
@ -164,6 +259,17 @@ export default { |
|
|
|
components: { Pagination, Treeselect, VueUeditorWrap }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
deptName: '', |
|
|
|
defaultProps: { |
|
|
|
children: 'children', |
|
|
|
label: 'category_name' |
|
|
|
}, |
|
|
|
// 状态数据字典 |
|
|
|
statusOptions: [ |
|
|
|
{value: 2, label: '上线'}, |
|
|
|
{value: 1, label: '下线'} |
|
|
|
], |
|
|
|
categoryOptionsLeft: undefined, |
|
|
|
tableKey: 0, |
|
|
|
list: null, |
|
|
|
total: 0, |
|
|
|
@ -171,6 +277,8 @@ export default { |
|
|
|
listQuery: { |
|
|
|
page: 1, |
|
|
|
limit: 20, |
|
|
|
is_offline: 2, |
|
|
|
title: '' |
|
|
|
}, |
|
|
|
// accountRules: { |
|
|
|
// phone: [{ required: true, trigger: 'blur', validator: RulePhone }], |
|
|
|
@ -180,7 +288,7 @@ export default { |
|
|
|
UEDITOR_HOME_URL: "/UEditor/", |
|
|
|
serverUrl: process.env.VUE_APP_BASE_API + "/files/baiduUp", |
|
|
|
initialFrameHeight: 300, |
|
|
|
scaleEnabled:true |
|
|
|
scaleEnabled: true |
|
|
|
}, |
|
|
|
uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile', |
|
|
|
temp: { |
|
|
|
@ -208,7 +316,7 @@ export default { |
|
|
|
// categoriesJson:[], |
|
|
|
downloadLoading: false, |
|
|
|
// tagData:[], |
|
|
|
chooseTagData:[] |
|
|
|
chooseTagData: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -222,15 +330,15 @@ export default { |
|
|
|
}, |
|
|
|
tagData() { |
|
|
|
let matchData = null |
|
|
|
this.categoriesJson.forEach(item=>{ |
|
|
|
if(item.id==this.temp.category_id){ |
|
|
|
this.categoriesJson.forEach(item => { |
|
|
|
if (item.id == this.temp.category_id) { |
|
|
|
matchData = item.label_name |
|
|
|
} |
|
|
|
}) |
|
|
|
return matchData ? JSON.parse(matchData) : []; |
|
|
|
} |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
watch: { |
|
|
|
tagData(newVal) { |
|
|
|
console.log("tagDAta"); |
|
|
|
console.log(newVal); |
|
|
|
@ -238,14 +346,18 @@ export default { |
|
|
|
this.chooseTagData = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
chooseTagData(newVal){ |
|
|
|
chooseTagData(newVal) { |
|
|
|
console.log("chooseTagData"); |
|
|
|
console.log(newVal); |
|
|
|
}, |
|
|
|
// 根据名称筛选部门树 |
|
|
|
deptName(val) { |
|
|
|
this.$refs.tree.filter(val) |
|
|
|
} |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
getCateName(id, categoriesJson) { |
|
|
|
for (var i=0;i<categoriesJson.length;i++) { |
|
|
|
for (var i = 0; i < categoriesJson.length; i++) { |
|
|
|
if (id == categoriesJson[i].id) { |
|
|
|
return categoriesJson[i].name |
|
|
|
} |
|
|
|
@ -255,9 +367,9 @@ export default { |
|
|
|
if (!data) { |
|
|
|
return |
|
|
|
} |
|
|
|
let str='' |
|
|
|
let str = '' |
|
|
|
data = JSON.parse(data); |
|
|
|
data.forEach(item=>{ |
|
|
|
data.forEach(item => { |
|
|
|
if (item.value.length) { |
|
|
|
str += `${item.label}：${item.value.join("、")}；` |
|
|
|
} |
|
|
|
@ -266,21 +378,30 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 节点单击事件 |
|
|
|
handleNodeClick(data) { |
|
|
|
this.listQuery.category_id = data.id |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
handleCategory(array) { |
|
|
|
var res = [] |
|
|
|
array.forEach((item,index)=>{ |
|
|
|
let obj={} |
|
|
|
array.forEach((item, index) => { |
|
|
|
let obj = {} |
|
|
|
obj.id = item.category_id |
|
|
|
obj.name = item.category_name |
|
|
|
obj.label_name = item.label_name |
|
|
|
res.push(obj) |
|
|
|
if(item.children) { |
|
|
|
if (item.children) { |
|
|
|
res.push(...this.handleCategory(item.children)) |
|
|
|
} |
|
|
|
}) |
|
|
|
return res |
|
|
|
}, |
|
|
|
|
|
|
|
// 筛选节点 |
|
|
|
filterNode(value, data) { |
|
|
|
if (!value) return true |
|
|
|
return data.category_name.indexOf(value) !== -1 |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
this.listLoading = true |
|
|
|
fetchList(this.listQuery).then(response => { |
|
|
|
@ -312,12 +433,14 @@ export default { |
|
|
|
time: '', |
|
|
|
img: '', |
|
|
|
script_url: '', |
|
|
|
content: '' |
|
|
|
content: '', |
|
|
|
description: '', |
|
|
|
video_time: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
submitForm() { |
|
|
|
let matchData = [...this.tagData] |
|
|
|
this.chooseTagData.forEach((item,index)=>{ |
|
|
|
this.chooseTagData.forEach((item, index) => { |
|
|
|
matchData[index]['value'] = item |
|
|
|
}) |
|
|
|
this.temp.label_name = JSON.stringify(matchData); |
|
|
|
@ -352,16 +475,17 @@ export default { |
|
|
|
}, |
|
|
|
handleUpdate(row) { |
|
|
|
let article_id = row.article_id |
|
|
|
fetchArticleDetails({article_id}).then(res => { |
|
|
|
this.dialogStatus = 'update' |
|
|
|
this.dialogFormVisible = true |
|
|
|
fetchArticleDetails({ article_id }).then(res => { |
|
|
|
this.temp = res.data; |
|
|
|
if (this.temp.label_name) { |
|
|
|
let data = JSON.parse(this.temp.label_name) |
|
|
|
data.forEach((item,index)=>{ |
|
|
|
data.forEach((item, index) => { |
|
|
|
this.chooseTagData[index] = item.value |
|
|
|
}) |
|
|
|
} |
|
|
|
this.dialogStatus = 'update' |
|
|
|
this.dialogFormVisible = true |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs['dataForm'].clearValidate() |
|
|
|
}) |
|
|
|
@ -383,12 +507,12 @@ export default { |
|
|
|
// } |
|
|
|
// }) |
|
|
|
}, |
|
|
|
handleDelete({title,article_id}) { |
|
|
|
handleDelete({ title, article_id }) { |
|
|
|
this.$confirm('是否确认删除名称为"' + title + '"的数据项?', '警告', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(function() { |
|
|
|
}).then(function () { |
|
|
|
console.log('del') |
|
|
|
return delArticle({ article_id }) |
|
|
|
}).then((response) => { |
|
|
|
@ -407,7 +531,7 @@ export default { |
|
|
|
duration: 2 * 1000, |
|
|
|
}); |
|
|
|
} |
|
|
|
}).catch(function() {}) |
|
|
|
}).catch(function () { }) |
|
|
|
}, |
|
|
|
uploadSuccess(response, file) { |
|
|
|
if (response.state == 'SUCCESS') { |
|
|
|
@ -429,7 +553,7 @@ export default { |
|
|
|
obj.url = response.url |
|
|
|
this.temp.script_url = JSON.stringify(obj) |
|
|
|
}, |
|
|
|
handleFileExceed(files, fileList){ |
|
|
|
handleFileExceed(files, fileList) { |
|
|
|
this.$message.warning("只允许上传一个脚本"); |
|
|
|
}, |
|
|
|
uploadRemove(file) { |
|
|
|
@ -445,7 +569,7 @@ export default { |
|
|
|
uploadError(err) { |
|
|
|
this.$alert(err, "发生错误", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
callback: (action) => {}, |
|
|
|
callback: (action) => { }, |
|
|
|
}); |
|
|
|
}, |
|
|
|
/** 查询分类下拉树结构 */ |
|
|
|
@ -467,28 +591,25 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 选择类别，获取对应的标签数据 |
|
|
|
chooseCategory(node){ |
|
|
|
chooseCategory(node) { |
|
|
|
this.tagData = node.label_name ? JSON.parse(node.label_name) : []; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.app-container { |
|
|
|
.app-container { |
|
|
|
.filter-container { |
|
|
|
margin-left: 5px; |
|
|
|
margin-bottom: 6px; |
|
|
|
} |
|
|
|
::v-deep .el-drawer__body{ |
|
|
|
::v-deep .el-drawer__body { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
::v-deep section { |
|
|
|
overflow-y: scroll; |
|
|
|
} |
|
|
|
.editor-box { |
|
|
|
::v-deep .el-form-item__content { |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
