|
|
@ -1,84 +1,191 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="app-container"> |
|
|
<div class="app-container"> |
|
|
<div class="filter-container"> |
|
|
<el-card class="box-card"> |
|
|
<el-button class="filter-item el-button el-button--primary el-button--mini" type="primary" icon="el-icon-edit" @click="handleCreate"> |
|
|
<el-row :gutter="20"> |
|
|
添加文章 |
|
|
<!--部门数据--> |
|
|
</el-button> |
|
|
<el-col :span="4" :xs="24"> |
|
|
</div> |
|
|
<div class="head-container"> |
|
|
<el-table |
|
|
<el-input |
|
|
v-loading="listLoading" |
|
|
v-model="deptName" |
|
|
:data="list" |
|
|
placeholder="请输入分类名称" |
|
|
border |
|
|
clearable |
|
|
fit |
|
|
size="small" |
|
|
highlight-current-row |
|
|
prefix-icon="el-icon-search" |
|
|
style="width: 100%;" |
|
|
style="margin-bottom: 20px" |
|
|
> |
|
|
:default-expand-all="false" |
|
|
<el-table-column label="ID" prop="id" align="center"> |
|
|
/> |
|
|
<template slot-scope="{row}"> |
|
|
</div> |
|
|
<span>{{ row.article_id }}</span> |
|
|
<div class="head-container"> |
|
|
</template> |
|
|
<el-tree |
|
|
</el-table-column> |
|
|
ref="tree" |
|
|
<el-table-column label="分类" align="center"> |
|
|
:data="categoryOptions" |
|
|
<template slot-scope="{row}"> |
|
|
highlight-current |
|
|
<span>{{ row.category_id | getCateName(categoriesJson) }}</span> |
|
|
:props="defaultProps" |
|
|
</template> |
|
|
:expand-on-click-node="false" |
|
|
</el-table-column> |
|
|
:filter-node-method="filterNode" |
|
|
<el-table-column label="标题" align="center"> |
|
|
@node-click="handleNodeClick" |
|
|
<template slot-scope="{row}"> |
|
|
/> |
|
|
<span>{{ row.title }}</span> |
|
|
</div> |
|
|
</template> |
|
|
</el-col> |
|
|
</el-table-column> |
|
|
<!--用户数据--> |
|
|
<el-table-column label="封面图" align="center"> |
|
|
<el-col :span="20" :xs="24"> |
|
|
<template slot-scope="{row}"> |
|
|
<el-form |
|
|
<img :src="row.img" height="100" /> |
|
|
ref="queryForm" |
|
|
</template> |
|
|
:model="listQuery" |
|
|
</el-table-column> |
|
|
:inline="true" |
|
|
<el-table-column label="外链" align="center"> |
|
|
label-width="68px" |
|
|
<template slot-scope="{row}"> |
|
|
> |
|
|
<span>{{ row.url }}</span> |
|
|
<el-form-item label="文章标题" prop="title"> |
|
|
</template> |
|
|
<el-input |
|
|
</el-table-column> |
|
|
v-model="listQuery.title" |
|
|
<el-table-column label="标签详情"> |
|
|
placeholder="请输入文章标题" |
|
|
<template slot-scope="{row}"> |
|
|
clearable |
|
|
<span>{{ row.label_name | getTagDetail }}</span> |
|
|
size="small" |
|
|
</template> |
|
|
style="width: 160px" |
|
|
</el-table-column> |
|
|
@keyup.enter.native="getList" |
|
|
<el-table-column label="创建时间" align="center"> |
|
|
/> |
|
|
<template slot-scope="{row}"> |
|
|
</el-form-item> |
|
|
<span>{{ row.create_time }}</span> |
|
|
<el-form-item label="文章标签" prop="label_name"> |
|
|
</template> |
|
|
<el-input |
|
|
</el-table-column> |
|
|
v-model="listQuery.label_name" |
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
|
placeholder="请输入文章标签" |
|
|
<template slot-scope="scope"> |
|
|
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 |
|
|
<el-button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
icon="el-icon-search" |
|
|
size="mini" |
|
|
size="mini" |
|
|
type="text" |
|
|
@click="getList" |
|
|
icon="el-icon-edit" |
|
|
>搜索</el-button |
|
|
@click="handleUpdate(scope.row)" |
|
|
> |
|
|
>修改</el-button> |
|
|
</el-form-item> |
|
|
|
|
|
</el-form> |
|
|
|
|
|
<el-row :gutter="10" class="mb8"> |
|
|
|
|
|
<el-col :span="1.5"> |
|
|
<el-button |
|
|
<el-button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
icon="el-icon-plus" |
|
|
size="mini" |
|
|
size="mini" |
|
|
type="text" |
|
|
@click="handleCreate" |
|
|
icon="el-icon-delete" |
|
|
>新增</el-button |
|
|
@click="handleDelete(scope.row)" |
|
|
> |
|
|
>删除</el-button> |
|
|
</el-col> |
|
|
</template> |
|
|
</el-row> |
|
|
</el-table-column> |
|
|
<el-table |
|
|
</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 |
|
|
<el-drawer |
|
|
ref="drawer" |
|
|
ref="drawer" |
|
|
:title="textMap[dialogStatus]" |
|
|
:title="textMap[dialogStatus]" |
|
|
:visible.sync="dialogFormVisible" |
|
|
:visible.sync="dialogFormVisible" |
|
|
direction="rtl" |
|
|
direction="rtl" |
|
|
custom-class="demo-drawer" |
|
|
custom-class="drawer" |
|
|
size="950px" |
|
|
size="950px" |
|
|
> |
|
|
|
|
|
<div class="demo-drawer__content" v-if="dialogFormVisible"> |
|
|
|
|
|
<el-form |
|
|
|
|
|
ref="dataForm" |
|
|
|
|
|
:model="temp" |
|
|
|
|
|
label-position="left" |
|
|
|
|
|
label-width="70px" |
|
|
|
|
|
style |
|
|
> |
|
|
> |
|
|
<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-form-item label="类型"> |
|
|
<el-form-item label="类型"> |
|
|
<treeselect |
|
|
<treeselect |
|
|
v-model="temp.category_id" |
|
|
v-model="temp.category_id" |
|
|
@ -89,14 +196,23 @@ |
|
|
/> |
|
|
/> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<template v-if="tagData.length"> |
|
|
<template v-if="tagData.length"> |
|
|
<el-form-item :label="item.label" v-for="(item,index) in tagData" :key="index"> |
|
|
<el-form-item |
|
|
<el-select v-model="chooseTagData[index]" multiple placeholder="请选择" style="width:100%"> |
|
|
:label="item.label" |
|
|
|
|
|
v-for="(item, index) in tagData" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
> |
|
|
|
|
|
<el-select |
|
|
|
|
|
v-model="chooseTagData[index]" |
|
|
|
|
|
multiple |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
style="width: 100%" |
|
|
|
|
|
> |
|
|
<el-option |
|
|
<el-option |
|
|
v-for="(sItem,sIndex) in item.value" |
|
|
v-for="(sItem, sIndex) in item.value" |
|
|
:key="sIndex" |
|
|
:key="sIndex" |
|
|
:label="sItem" |
|
|
:label="sItem" |
|
|
:value="sItem"> |
|
|
:value="sItem" |
|
|
</el-option> |
|
|
></el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</template> |
|
|
</template> |
|
|
@ -104,7 +220,12 @@ |
|
|
<el-input v-model="temp.title" /> |
|
|
<el-input v-model="temp.title" /> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="日期" prop="time"> |
|
|
<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> |
|
|
<el-form-item label="外链" prop="url"> |
|
|
<el-form-item label="外链" prop="url"> |
|
|
<el-input v-model="temp.url" /> |
|
|
<el-input v-model="temp.url" /> |
|
|
@ -113,9 +234,22 @@ |
|
|
<el-input type="textarea" v-model="temp.description" /> |
|
|
<el-input type="textarea" v-model="temp.description" /> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="封面" prop="img" required> |
|
|
<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"> |
|
|
<img |
|
|
<el-upload ref="sys_app_logo" :on-success="uploadSuccess" :on-error="uploadError" |
|
|
v-if="temp.img" |
|
|
:action="uploadAction" style="float:left" list-type="picture-card" :show-file-list="false"> |
|
|
: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" |
|
|
|
|
|
:before-upload="validationImages" |
|
|
|
|
|
> |
|
|
<i class="el-icon-plus" /> |
|
|
<i class="el-icon-plus" /> |
|
|
</el-upload> |
|
|
</el-upload> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
@ -126,44 +260,71 @@ |
|
|
:limit="1" |
|
|
:limit="1" |
|
|
:on-exceed="handleFileExceed" |
|
|
:on-exceed="handleFileExceed" |
|
|
:onSuccess="uploadFileSuccess" |
|
|
: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> |
|
|
<el-button size="small" type="primary">点击上传</el-button> |
|
|
<!-- <div slot="tip" class="el-upload__tip"> |
|
|
<!-- <div slot="tip" class="el-upload__tip"> |
|
|
只能上传jpg/png文件，且不超过500kb |
|
|
只能上传jpg/png文件，且不超过500kb |
|
|
</div> --> |
|
|
</div>--> |
|
|
</el-upload> |
|
|
</el-upload> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="视频时长" prop="video_time"> |
|
|
<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> |
|
|
<el-form-item label="内容" class="editor-box"> |
|
|
<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-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
<div class="drawer__footer"> |
|
|
<div class="demo-drawer__footer"> |
|
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
|
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-drawer> |
|
|
</el-drawer> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { validPhone,isEmpty } from '@/utils/validate' |
|
|
import { validPhone, isEmpty } from "@/utils/validate"; |
|
|
import { fetchList, createArticle, updateArticle,delArticle, fetchArticleDetails } from '@/api/article' |
|
|
import { |
|
|
import Pagination from '@/components/Pagination' // secondary package based on el-pagination |
|
|
fetchList, |
|
|
import VueUeditorWrap from "vue-ueditor-wrap" |
|
|
createArticle, |
|
|
import { listCategory } from '@/api/category' |
|
|
updateArticle, |
|
|
import Treeselect from '@riophae/vue-treeselect' |
|
|
delArticle, |
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|
|
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"; |
|
|
|
|
|
import Treeselect from "@riophae/vue-treeselect"; |
|
|
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'articleIndex', |
|
|
name: "articleIndex", |
|
|
components: { Pagination, Treeselect, VueUeditorWrap }, |
|
|
components: { Pagination, Treeselect, VueUeditorWrap }, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
deptName: "", |
|
|
|
|
|
defaultProps: { |
|
|
|
|
|
children: "children", |
|
|
|
|
|
label: "category_name", |
|
|
|
|
|
}, |
|
|
|
|
|
// 状态数据字典 |
|
|
|
|
|
statusOptions: [ |
|
|
|
|
|
{ value: 2, label: "上线" }, |
|
|
|
|
|
{ value: 1, label: "下线" }, |
|
|
|
|
|
], |
|
|
|
|
|
categoryOptionsLeft: undefined, |
|
|
tableKey: 0, |
|
|
tableKey: 0, |
|
|
list: null, |
|
|
list: null, |
|
|
total: 0, |
|
|
total: 0, |
|
|
@ -171,6 +332,10 @@ export default { |
|
|
listQuery: { |
|
|
listQuery: { |
|
|
page: 1, |
|
|
page: 1, |
|
|
limit: 20, |
|
|
limit: 20, |
|
|
|
|
|
is_offline: 2, |
|
|
|
|
|
title: "", |
|
|
|
|
|
label_name: "", |
|
|
|
|
|
category_id: undefined, |
|
|
}, |
|
|
}, |
|
|
// accountRules: { |
|
|
// accountRules: { |
|
|
// phone: [{ required: true, trigger: 'blur', validator: RulePhone }], |
|
|
// phone: [{ required: true, trigger: 'blur', validator: RulePhone }], |
|
|
@ -180,238 +345,295 @@ export default { |
|
|
UEDITOR_HOME_URL: "/UEditor/", |
|
|
UEDITOR_HOME_URL: "/UEditor/", |
|
|
serverUrl: process.env.VUE_APP_BASE_API + "/files/baiduUp", |
|
|
serverUrl: process.env.VUE_APP_BASE_API + "/files/baiduUp", |
|
|
initialFrameHeight: 300, |
|
|
initialFrameHeight: 300, |
|
|
scaleEnabled:true |
|
|
scaleEnabled: true, |
|
|
}, |
|
|
}, |
|
|
uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile', |
|
|
uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile", |
|
|
temp: { |
|
|
temp: { |
|
|
id: undefined, |
|
|
id: undefined, |
|
|
category_id: undefined, |
|
|
category_id: undefined, |
|
|
title: '', |
|
|
title: "", |
|
|
time: '', |
|
|
time: "", |
|
|
img: '', |
|
|
img: "", |
|
|
script_url: '', |
|
|
script_url: "", |
|
|
content: '', |
|
|
content: "", |
|
|
description: '', |
|
|
description: "", |
|
|
video_time: '' |
|
|
video_time: "", |
|
|
}, |
|
|
}, |
|
|
dialogFullscreen: true, |
|
|
dialogFullscreen: true, |
|
|
dialogFormVisible: false, |
|
|
dialogFormVisible: false, |
|
|
dialogStatus: '', |
|
|
dialogStatus: "", |
|
|
textMap: { |
|
|
textMap: { |
|
|
update: 'Edit', |
|
|
update: "Edit", |
|
|
create: 'Create' |
|
|
create: "Create", |
|
|
}, |
|
|
}, |
|
|
rules: { |
|
|
rules: { |
|
|
title: [{ required: true, message: 'title is required', trigger: 'blur' }] |
|
|
title: [ |
|
|
|
|
|
{ required: true, message: "title is required", trigger: "blur" }, |
|
|
|
|
|
], |
|
|
}, |
|
|
}, |
|
|
categoryOptions: [], |
|
|
categoryOptions: [], |
|
|
// categoriesJson:[], |
|
|
// categoriesJson:[], |
|
|
downloadLoading: false, |
|
|
downloadLoading: false, |
|
|
// tagData:[], |
|
|
// tagData:[], |
|
|
chooseTagData:[] |
|
|
chooseTagData: [], |
|
|
} |
|
|
// 是否允许上传 |
|
|
|
|
|
validation: false, |
|
|
|
|
|
}; |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.getList() |
|
|
this.getList(); |
|
|
this.getTreeselect() |
|
|
this.getTreeselect(); |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
categoriesJson() { |
|
|
categoriesJson() { |
|
|
var res = this.handleCategory(this.categoryOptions) |
|
|
var res = this.handleCategory(this.categoryOptions); |
|
|
return res |
|
|
return res; |
|
|
}, |
|
|
}, |
|
|
tagData() { |
|
|
tagData() { |
|
|
let matchData = null |
|
|
let matchData = null; |
|
|
this.categoriesJson.forEach(item=>{ |
|
|
this.categoriesJson.forEach((item) => { |
|
|
if(item.id==this.temp.category_id){ |
|
|
if (item.id == this.temp.category_id) { |
|
|
matchData = item.label_name |
|
|
matchData = item.label_name; |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
return matchData ? JSON.parse(matchData) : []; |
|
|
return matchData ? JSON.parse(matchData) : []; |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
watch:{ |
|
|
watch: { |
|
|
tagData(newVal) { |
|
|
tagData(newVal) { |
|
|
console.log("tagDAta"); |
|
|
console.log("tagDAta"); |
|
|
console.log(newVal); |
|
|
console.log(newVal); |
|
|
if (!newVal.length) { |
|
|
if (!newVal.length) { |
|
|
this.chooseTagData = [] |
|
|
this.chooseTagData = []; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
chooseTagData(newVal){ |
|
|
chooseTagData(newVal) { |
|
|
console.log("chooseTagData"); |
|
|
console.log("chooseTagData"); |
|
|
console.log(newVal); |
|
|
console.log(newVal); |
|
|
} |
|
|
}, |
|
|
|
|
|
// 根据名称筛选部门树 |
|
|
|
|
|
deptName(val) { |
|
|
|
|
|
this.$refs.tree.filter(val); |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
filters: { |
|
|
filters: { |
|
|
getCateName(id, categoriesJson) { |
|
|
getCateName(id, categoriesJson) { |
|
|
for (var i=0;i<categoriesJson.length;i++) { |
|
|
for (var i = 0; i < categoriesJson.length; i++) { |
|
|
if (id == categoriesJson[i].id) { |
|
|
if (id == categoriesJson[i].id) { |
|
|
return categoriesJson[i].name |
|
|
return categoriesJson[i].name; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
getTagDetail(data) { |
|
|
getTagDetail(data) { |
|
|
if (!data) { |
|
|
if (!data) { |
|
|
return |
|
|
return; |
|
|
} |
|
|
} |
|
|
let str='' |
|
|
let str = ""; |
|
|
data = JSON.parse(data); |
|
|
data = JSON.parse(data); |
|
|
data.forEach(item=>{ |
|
|
data.forEach((item) => { |
|
|
if (item.value.length) { |
|
|
if (item.value.length) { |
|
|
str += `${item.label}：${item.value.join("、")}；` |
|
|
str += `${item.label}：${item.value.join("、")}；`; |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
return str |
|
|
return str; |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
// 验证图片宽高 |
|
|
|
|
|
async validationImages(file) { |
|
|
|
|
|
let width = 0; |
|
|
|
|
|
let height = 0; |
|
|
|
|
|
console.log(this.temp); |
|
|
|
|
|
switch (this.temp.category_id) { |
|
|
|
|
|
case 23: //深度解说 |
|
|
|
|
|
width = 650; |
|
|
|
|
|
height = 350; |
|
|
|
|
|
break; |
|
|
|
|
|
case 25: //行情分析 |
|
|
|
|
|
width = 130; |
|
|
|
|
|
height = 130; |
|
|
|
|
|
break; |
|
|
|
|
|
case 24: //热点追踪 |
|
|
|
|
|
width = 130; |
|
|
|
|
|
height = 130; |
|
|
|
|
|
break; |
|
|
|
|
|
case 7: //基础教程 |
|
|
|
|
|
width = 380; |
|
|
|
|
|
height = 220; |
|
|
|
|
|
break; |
|
|
|
|
|
case 6: //图文教程 |
|
|
|
|
|
width = 380; |
|
|
|
|
|
height = 220; |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
let res = await this.$getImgWidth(file, width, height); |
|
|
|
|
|
this.validation = res; |
|
|
|
|
|
return res; |
|
|
|
|
|
}, |
|
|
|
|
|
// 节点单击事件 |
|
|
|
|
|
handleNodeClick(data) { |
|
|
|
|
|
this.listQuery.category_id = data.id; |
|
|
|
|
|
this.getList(); |
|
|
|
|
|
}, |
|
|
handleCategory(array) { |
|
|
handleCategory(array) { |
|
|
var res = [] |
|
|
var res = []; |
|
|
array.forEach((item,index)=>{ |
|
|
array.forEach((item, index) => { |
|
|
let obj={} |
|
|
let obj = {}; |
|
|
obj.id = item.category_id |
|
|
obj.id = item.category_id; |
|
|
obj.name = item.category_name |
|
|
obj.name = item.category_name; |
|
|
obj.label_name = item.label_name |
|
|
obj.label_name = item.label_name; |
|
|
res.push(obj) |
|
|
res.push(obj); |
|
|
if(item.children) { |
|
|
if (item.children) { |
|
|
res.push(...this.handleCategory(item.children)) |
|
|
res.push(...this.handleCategory(item.children)); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
return res |
|
|
return res; |
|
|
|
|
|
}, |
|
|
|
|
|
// 筛选节点 |
|
|
|
|
|
filterNode(value, data) { |
|
|
|
|
|
if (!value) return true; |
|
|
|
|
|
return data.category_name.indexOf(value) !== -1; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
getList() { |
|
|
getList() { |
|
|
this.listLoading = true |
|
|
this.listLoading = true; |
|
|
fetchList(this.listQuery).then(response => { |
|
|
fetchList(this.listQuery).then((response) => { |
|
|
this.list = response.data.list |
|
|
console.log(response); |
|
|
this.total = response.data.count |
|
|
this.list = response.data.list; |
|
|
|
|
|
this.total = response.data.count; |
|
|
// Just to simulate the time of the request |
|
|
// Just to simulate the time of the request |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.listLoading = false |
|
|
this.listLoading = false; |
|
|
}, 1.5 * 1000) |
|
|
}, 1.5 * 1000); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
handleFilter() { |
|
|
handleFilter() { |
|
|
this.listQuery.page = 1 |
|
|
this.listQuery.page = 1; |
|
|
this.getList() |
|
|
this.getList(); |
|
|
}, |
|
|
}, |
|
|
handleModifyStatus(row, status) { |
|
|
handleModifyStatus(row, status) { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
message: '操作Success', |
|
|
message: "操作Success", |
|
|
type: 'success' |
|
|
type: "success", |
|
|
}) |
|
|
}); |
|
|
row.status = status |
|
|
row.status = status; |
|
|
}, |
|
|
}, |
|
|
resetTemp() { |
|
|
resetTemp() { |
|
|
this.temp = { |
|
|
this.temp = { |
|
|
id: undefined, |
|
|
id: undefined, |
|
|
category_id: undefined, |
|
|
category_id: undefined, |
|
|
title: '', |
|
|
title: "", |
|
|
time: '', |
|
|
time: "", |
|
|
img: '', |
|
|
img: "", |
|
|
script_url: '', |
|
|
script_url: "", |
|
|
content: '' |
|
|
content: "", |
|
|
} |
|
|
description: "", |
|
|
|
|
|
video_time: "", |
|
|
|
|
|
}; |
|
|
}, |
|
|
}, |
|
|
submitForm() { |
|
|
submitForm() { |
|
|
let matchData = [...this.tagData] |
|
|
let matchData = [...this.tagData]; |
|
|
this.chooseTagData.forEach((item,index)=>{ |
|
|
this.chooseTagData.forEach((item, index) => { |
|
|
matchData[index]['value'] = item |
|
|
matchData[index]["value"] = item; |
|
|
}) |
|
|
}); |
|
|
this.temp.label_name = JSON.stringify(matchData); |
|
|
this.temp.label_name = JSON.stringify(matchData); |
|
|
if (this.dialogStatus == 'create') { |
|
|
if (this.dialogStatus == "create") { |
|
|
this.createData() |
|
|
this.createData(); |
|
|
} else if (this.dialogStatus == 'update') { |
|
|
} else if (this.dialogStatus == "update") { |
|
|
this.updateData() |
|
|
this.updateData(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
handleCreate() { |
|
|
handleCreate() { |
|
|
this.resetTemp() |
|
|
this.resetTemp(); |
|
|
this.dialogStatus = 'create' |
|
|
this.temp.category_id = this.listQuery.category_id; |
|
|
this.dialogFormVisible = true |
|
|
this.dialogStatus = "create"; |
|
|
|
|
|
this.dialogFormVisible = true; |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.$refs['dataForm'].clearValidate() |
|
|
this.$refs["dataForm"].clearValidate(); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
createData() { |
|
|
createData() { |
|
|
// this.$refs['dataForm'].validate((valid) => { |
|
|
// this.$refs['dataForm'].validate((valid) => { |
|
|
// if (valid) { |
|
|
// if (valid) { |
|
|
createArticle(this.temp).then(() => { |
|
|
createArticle(this.temp).then(() => { |
|
|
this.dialogFormVisible = false |
|
|
this.dialogFormVisible = false; |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
message: "添加成功", |
|
|
message: "添加成功", |
|
|
type: "success", |
|
|
type: "success", |
|
|
duration: 2 * 1000, |
|
|
duration: 2 * 1000, |
|
|
}); |
|
|
}); |
|
|
this.getList() |
|
|
this.getList(); |
|
|
}) |
|
|
}); |
|
|
// } |
|
|
// } |
|
|
// }) |
|
|
// }) |
|
|
}, |
|
|
}, |
|
|
handleUpdate(row) { |
|
|
handleUpdate(row) { |
|
|
let article_id = row.article_id |
|
|
let article_id = row.article_id; |
|
|
fetchArticleDetails({article_id}).then(res => { |
|
|
this.dialogStatus = "update"; |
|
|
|
|
|
this.resetTemp(); |
|
|
|
|
|
this.dialogFormVisible = true; |
|
|
|
|
|
fetchArticleDetails({ article_id }).then((res) => { |
|
|
this.temp = res.data; |
|
|
this.temp = res.data; |
|
|
if (this.temp.label_name) { |
|
|
if (this.temp.label_name) { |
|
|
let data = JSON.parse(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.chooseTagData[index] = item.value; |
|
|
}) |
|
|
}); |
|
|
} |
|
|
} |
|
|
this.dialogStatus = 'update' |
|
|
|
|
|
this.dialogFormVisible = true |
|
|
|
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.$refs['dataForm'].clearValidate() |
|
|
this.$refs["dataForm"].clearValidate(); |
|
|
}) |
|
|
}); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
updateData() { |
|
|
updateData() { |
|
|
// this.$refs['dataForm'].validate((valid) => { |
|
|
// this.$refs['dataForm'].validate((valid) => { |
|
|
// if (valid) { |
|
|
// if (valid) { |
|
|
updateArticle(this.temp).then(() => { |
|
|
updateArticle(this.temp).then(() => { |
|
|
this.dialogFormVisible = false |
|
|
this.dialogFormVisible = false; |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
message: "更新成功", |
|
|
message: "更新成功", |
|
|
type: "success", |
|
|
type: "success", |
|
|
duration: 2 * 1000, |
|
|
duration: 2 * 1000, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
this.getList() |
|
|
this.getList(); |
|
|
}) |
|
|
}); |
|
|
// } |
|
|
// } |
|
|
// }) |
|
|
// }) |
|
|
}, |
|
|
}, |
|
|
handleDelete({title,article_id}) { |
|
|
handleDelete({ title, article_id }) { |
|
|
this.$confirm('是否确认删除名称为"' + title + '"的数据项?', '警告', { |
|
|
this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", { |
|
|
confirmButtonText: '确定', |
|
|
confirmButtonText: "确定", |
|
|
cancelButtonText: '取消', |
|
|
cancelButtonText: "取消", |
|
|
type: 'warning' |
|
|
type: "warning", |
|
|
}).then(function() { |
|
|
}) |
|
|
console.log('del') |
|
|
.then(function () { |
|
|
return delArticle({ article_id }) |
|
|
console.log("del"); |
|
|
}).then((response) => { |
|
|
return delArticle({ article_id }); |
|
|
if (response.code === 200) { |
|
|
}) |
|
|
this.$message({ |
|
|
.then((response) => { |
|
|
message: "删除分类成功", |
|
|
if (response.code === 200) { |
|
|
type: "success", |
|
|
this.$message({ |
|
|
duration: 2 * 1000, |
|
|
message: "删除分类成功", |
|
|
}); |
|
|
type: "success", |
|
|
this.open = false |
|
|
duration: 2 * 1000, |
|
|
this.getList() |
|
|
}); |
|
|
} else { |
|
|
this.open = false; |
|
|
this.$message({ |
|
|
this.getList(); |
|
|
message: "删除分类失败", |
|
|
} else { |
|
|
type: "error", |
|
|
this.$message({ |
|
|
duration: 2 * 1000, |
|
|
message: "删除分类失败", |
|
|
}); |
|
|
type: "error", |
|
|
} |
|
|
duration: 2 * 1000, |
|
|
}).catch(function() {}) |
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(function () {}); |
|
|
}, |
|
|
}, |
|
|
uploadSuccess(response, file) { |
|
|
uploadSuccess(response, file) { |
|
|
if (response.state == 'SUCCESS') { |
|
|
console.log(response); |
|
|
this.temp.img = response.url |
|
|
if (response.state == "SUCCESS" && this.validation) { |
|
|
|
|
|
this.temp.img = response.url; |
|
|
} |
|
|
} |
|
|
// const uid = file.uid; |
|
|
// const uid = file.uid; |
|
|
// const objKeyArr = Object.keys(this.listObj); |
|
|
// const objKeyArr = Object.keys(this.listObj); |
|
|
@ -424,12 +646,12 @@ export default { |
|
|
// } |
|
|
// } |
|
|
}, |
|
|
}, |
|
|
uploadFileSuccess(response, file) { |
|
|
uploadFileSuccess(response, file) { |
|
|
let obj = {} |
|
|
let obj = {}; |
|
|
obj.name = response.original |
|
|
obj.name = response.original; |
|
|
obj.url = response.url |
|
|
obj.url = response.url; |
|
|
this.temp.script_url = JSON.stringify(obj) |
|
|
this.temp.script_url = JSON.stringify(obj); |
|
|
}, |
|
|
}, |
|
|
handleFileExceed(files, fileList){ |
|
|
handleFileExceed(files, fileList) { |
|
|
this.$message.warning("只允许上传一个脚本"); |
|
|
this.$message.warning("只允许上传一个脚本"); |
|
|
}, |
|
|
}, |
|
|
uploadRemove(file) { |
|
|
uploadRemove(file) { |
|
|
@ -450,45 +672,42 @@ export default { |
|
|
}, |
|
|
}, |
|
|
/** 查询分类下拉树结构 */ |
|
|
/** 查询分类下拉树结构 */ |
|
|
getTreeselect() { |
|
|
getTreeselect() { |
|
|
listCategory().then(response => { |
|
|
listCategory().then((response) => { |
|
|
this.categoryOptions = [] |
|
|
this.categoryOptions = []; |
|
|
this.categoryOptions.push(...response.data) |
|
|
this.categoryOptions.push(...response.data); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
/** 转换分类数据结构 */ |
|
|
/** 转换分类数据结构 */ |
|
|
normalizer(node) { |
|
|
normalizer(node) { |
|
|
if (node.children && !node.children.length) { |
|
|
if (node.children && !node.children.length) { |
|
|
delete node.children |
|
|
delete node.children; |
|
|
} |
|
|
} |
|
|
return { |
|
|
return { |
|
|
id: node.category_id, |
|
|
id: node.category_id, |
|
|
label: node.category_name, |
|
|
label: node.category_name, |
|
|
children: node.children |
|
|
children: node.children, |
|
|
} |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
// 选择类别，获取对应的标签数据 |
|
|
// 选择类别，获取对应的标签数据 |
|
|
chooseCategory(node){ |
|
|
chooseCategory(node) { |
|
|
this.tagData = node.label_name ? JSON.parse(node.label_name) : []; |
|
|
this.tagData = node.label_name ? JSON.parse(node.label_name) : []; |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.app-container { |
|
|
.app-container { |
|
|
.filter-container { |
|
|
.filter-container { |
|
|
margin-left: 5px; |
|
|
margin-left: 5px; |
|
|
margin-bottom: 6px; |
|
|
margin-bottom: 6px; |
|
|
} |
|
|
} |
|
|
::v-deep .el-drawer__body{ |
|
|
::v-deep .el-drawer__body { |
|
|
padding: 20px; |
|
|
padding: 20px; |
|
|
} |
|
|
} |
|
|
::v-deep section { |
|
|
.editor-box { |
|
|
overflow-y: scroll; |
|
|
::v-deep .el-form-item__content { |
|
|
} |
|
|
line-height: 20px; |
|
|
.editor-box { |
|
|
|
|
|
::v-deep .el-form-item__content { |
|
|
|
|
|
line-height: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
xxxxxxxxxx