Browse Source

更新文章列表页,增加筛选条件和分类

master
chenke 3 years ago
parent
commit
993d6190fc
  1. 429
      src/views/article/index.vue

429
src/views/article/index.vue

@ -1,84 +1,147 @@
<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>
</div>
<el-table
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%;"
>
<el-table-column label="ID" prop="id" align="center">
<template slot-scope="{row}">
<span>{{ row.article_id }}</span>
</template>
</el-table-column>
<el-table-column label="分类" align="center">
<template slot-scope="{row}">
<span>{{ row.category_id | getCateName(categoriesJson) }}</span>
</template>
</el-table-column>
<el-table-column label="标题" align="center">
<template slot-scope="{row}">
<span>{{ row.title }}</span>
</template>
</el-table-column>
<el-table-column label="封面图" align="center">
<template slot-scope="{row}">
<img :src="row.img" height="100" />
</template>
</el-table-column>
<el-table-column label="外链" align="center">
<template slot-scope="{row}">
<span>{{ row.url }}</span>
</template>
</el-table-column>
<el-table-column label="标签详情">
<template slot-scope="{row}">
<span>{{ row.label_name | getTagDetail }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="{row}">
<span>{{ row.create_time }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<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"
border
fit
highlight-current-row
style="width: 100%;"
>
<el-table-column label="ID" prop="id" align="center">
<template slot-scope="{row}">
<span>{{ row.article_id }}</span>
</template>
</el-table-column>
<el-table-column label="分类" align="center">
<template slot-scope="{row}">
<span>{{ row.category_id | getCateName(categoriesJson) }}</span>
</template>
</el-table-column>
<el-table-column label="标题" align="center">
<template slot-scope="{row}">
<span>{{ row.title }}</span>
</template>
</el-table-column>
<el-table-column label="封面图" align="center">
<template slot-scope="{row}">
<img :src="row.img" height="100" />
</template>
</el-table-column>
<el-table-column label="外链" align="center">
<template slot-scope="{row}">
<span>{{ row.url }}</span>
</template>
</el-table-column>
<el-table-column label="标签详情">
<template slot-scope="{row}">
<span>{{ row.label_name | getTagDetail }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="{row}">
<span>{{ row.create_time }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</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"
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="">
<!-- 添加或修改分类对话框 -->
<el-drawer
ref="drawer"
:title="textMap[dialogStatus]"
:visible.sync="dialogFormVisible"
direction="rtl"
custom-class="demo-drawer"
size="950px"
>
<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,33 +211,43 @@
: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>
</div>
</el-drawer>
</el-drawer>
</div>
</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);
@ -338,30 +461,31 @@ export default {
createData() {
// this.$refs['dataForm'].validate((valid) => {
// if (valid) {
createArticle(this.temp).then(() => {
this.dialogFormVisible = false
this.$message({
message: "添加成功",
type: "success",
duration: 2 * 1000,
});
this.getList()
})
createArticle(this.temp).then(() => {
this.dialogFormVisible = false
this.$message({
message: "添加成功",
type: "success",
duration: 2 * 1000,
});
this.getList()
})
// }
// })
},
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()
})
@ -370,25 +494,25 @@ export default {
updateData() {
// this.$refs['dataForm'].validate((valid) => {
// if (valid) {
updateArticle(this.temp).then(() => {
this.dialogFormVisible = false
this.$message({
message: "更新成功",
type: "success",
duration: 2 * 1000,
});
updateArticle(this.temp).then(() => {
this.dialogFormVisible = false
this.$message({
message: "更新成功",
type: "success",
duration: 2 * 1000,
});
this.getList()
})
this.getList()
})
// }
// })
},
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) => { },
});
},
/** 查询分类下拉树结构 */
@ -455,7 +579,7 @@ export default {
this.categoryOptions.push(...response.data)
})
},
/** 转换分类数据结构 */
/** 转换分类数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
@ -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 {
.filter-container {
margin-left: 5px;
margin-bottom: 6px;
}
::v-deep .el-drawer__body{
padding: 20px;
}
::v-deep section {
overflow-y: scroll;
}
.editor-box {
::v-deep .el-form-item__content {
line-height: 20px;
}
.app-container {
.filter-container {
margin-left: 5px;
margin-bottom: 6px;
}
::v-deep .el-drawer__body {
padding: 20px;
}
.editor-box {
::v-deep .el-form-item__content {
line-height: 20px;
}
}
}
</style>
Loading…
Cancel
Save