|
|
|
|
@ -0,0 +1,741 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Description: 期刊
|
|
|
|
|
* @version: v1
|
|
|
|
|
* @Author: zhangjiabao
|
|
|
|
|
* @Date: 2024-01-19 23:29:58
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<!-- card -->
|
|
|
|
|
<el-card class="box-card">
|
|
|
|
|
<div slot="header" class="card-header clearfix">
|
|
|
|
|
<span class="card-header-text">期刊列表</span>
|
|
|
|
|
<el-button-group style="margin-top: -3px; margin-left: 10px;">
|
|
|
|
|
<el-button
|
|
|
|
|
:type="activateTab == 0 ? 'primary' : 'default'"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleChangeActivateTab(0)"
|
|
|
|
|
>新建</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
:type="activateTab == 1 ? 'primary' : 'default'"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleChangeActivateTab(1)"
|
|
|
|
|
>已发布</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
:type="activateTab == 2 ? 'primary' : 'default'"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleChangeActivateTab(2)"
|
|
|
|
|
>回收站</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-button-group>
|
|
|
|
|
<el-button
|
|
|
|
|
style="float: right; margin-top: -4px;"
|
|
|
|
|
type="primary"
|
|
|
|
|
icon="el-icon-plus"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleAddClick"
|
|
|
|
|
>新建期刊</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 查询条件 -->
|
|
|
|
|
<el-form :inline="true" class="in-card-form">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
placeholder="期刊号/期刊标题"
|
|
|
|
|
size="medium"
|
|
|
|
|
v-model="queryForm.data.name"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-select
|
|
|
|
|
placeholder="选择发布人"
|
|
|
|
|
size="medium"
|
|
|
|
|
v-model="queryForm.data.creatorId"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in queryForm.remoteData.publisher"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
placeholder="选择时间范围"
|
|
|
|
|
v-model="queryForm.data.timeRange"
|
|
|
|
|
type="daterange"
|
|
|
|
|
:range-separator="
|
|
|
|
|
queryForm.data.timeRange.length === 0 ? null : '~'
|
|
|
|
|
"
|
|
|
|
|
:editable="false"
|
|
|
|
|
:clearable="false"
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
start-placeholder="选择时间范围"
|
|
|
|
|
size="medium"
|
|
|
|
|
style="width: 280px;"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button
|
|
|
|
|
icon="el-icon-search"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="medium"
|
|
|
|
|
@click="handleQueryClick"
|
|
|
|
|
>查询</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button
|
|
|
|
|
icon="el-icon-refresh-left"
|
|
|
|
|
size="medium"
|
|
|
|
|
@click="handleResetClick"
|
|
|
|
|
>重置</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button
|
|
|
|
|
type="text"
|
|
|
|
|
icon="el-icon-s-operation"
|
|
|
|
|
@click="superFilterClick"
|
|
|
|
|
>高级筛选</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 表格 -->
|
|
|
|
|
<el-table
|
|
|
|
|
stripe
|
|
|
|
|
:data="table.data"
|
|
|
|
|
height="calc(100vh - 345px)"
|
|
|
|
|
v-loading="table.loading"
|
|
|
|
|
v-if="table.show"
|
|
|
|
|
element-loading-text="加载中"
|
|
|
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
|
|
|
|
border
|
|
|
|
|
fit
|
|
|
|
|
>
|
|
|
|
|
<el-table-column align="center" label="序号" width="95">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
{{ scope.$index + 1 }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="期刊编号">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span>VOL</span>
|
|
|
|
|
<span>{{ scope.row.number }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="期刊标题" prop="name"></el-table-column>
|
|
|
|
|
<el-table-column label="风格标签" prop="tag"></el-table-column>
|
|
|
|
|
<el-table-column label="歌曲数" prop="songCount"></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="播放次数"
|
|
|
|
|
prop="playCount"
|
|
|
|
|
v-if="activateTab === 1"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="评论数"
|
|
|
|
|
prop="commentCount"
|
|
|
|
|
v-if="activateTab === 1"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column label="期刊作者" prop="userId"></el-table-column>
|
|
|
|
|
<el-table-column label="创建时间" prop="createTime"></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="待发布时间"
|
|
|
|
|
prop="pubTime"
|
|
|
|
|
v-if="activateTab === 0"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
fixed="right"
|
|
|
|
|
label="操作"
|
|
|
|
|
:width="[300, 200, 300][activateTab]"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-edit"
|
|
|
|
|
@click="handleModifyClick(scope.row)"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
>编辑</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-success"
|
|
|
|
|
v-if="activateTab === 0 || activateTab === 2"
|
|
|
|
|
@click="handlePublishClick(scope.row)"
|
|
|
|
|
type="success"
|
|
|
|
|
size="mini"
|
|
|
|
|
>发布</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-info"
|
|
|
|
|
v-if="activateTab === 1"
|
|
|
|
|
@click="handleDetailClick(scope.row)"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
>详情</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
confirm-button-text="确定"
|
|
|
|
|
cancel-button-text="取消"
|
|
|
|
|
icon="el-icon-info"
|
|
|
|
|
icon-color="red"
|
|
|
|
|
title="是否确认删除标签？"
|
|
|
|
|
style="margin-left: 10px;"
|
|
|
|
|
v-if="activateTab === 0 || activateTab === 2"
|
|
|
|
|
@confirm="handleDeleteClick(scope.row)"
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
slot="reference"
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
type="danger"
|
|
|
|
|
size="mini"
|
|
|
|
|
>删除</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column fixed="right" label="启停用" width="100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="scope.row.state"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
@change="handleTableRowStatusChange($event, scope.row)"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
></el-switch>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
class="pagination-right"
|
|
|
|
|
background
|
|
|
|
|
v-if="table.show"
|
|
|
|
|
layout="total, prev, pager, next, sizes"
|
|
|
|
|
:current-page.sync="table.page.current"
|
|
|
|
|
:page-size="table.page.size"
|
|
|
|
|
:total="table.page.total"
|
|
|
|
|
@size-change="handlePageSizeChange"
|
|
|
|
|
@current-change="handlePageCurrentChange"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-dialog
|
|
|
|
|
:title="['新建期刊', '编辑期刊', '详情'][modifyDialog.type]"
|
|
|
|
|
class="popup-dialog"
|
|
|
|
|
:visible="modifyDialog.visible"
|
|
|
|
|
v-if="modifyDialog.visible"
|
|
|
|
|
width="80%"
|
|
|
|
|
top="60px"
|
|
|
|
|
:before-close="handleModifyDialogBeforeClose"
|
|
|
|
|
>
|
|
|
|
|
<div style="height: 70vh;overflow: auto;">
|
|
|
|
|
<ArticleDetailDialog></ArticleDetailDialog>
|
|
|
|
|
</div>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button size="small" type="primary" @click="handleDialogSubmit"
|
|
|
|
|
>确定</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" type="primary" @click="handleDialogSubmit"
|
|
|
|
|
>重置</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" @click="handleDialogCancel">取消</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-drawer
|
|
|
|
|
title="高级筛选"
|
|
|
|
|
v-if="queryForm.superFilterDialog.visible"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:before-close="handleTagsDialogBeforeClose"
|
|
|
|
|
direction="rtl"
|
|
|
|
|
>
|
|
|
|
|
<SuperFilterTagDrawer
|
|
|
|
|
:remoteTagData="queryForm.remoteData.superFilterTags"
|
|
|
|
|
@query="handleSuperFilterTagQuery"
|
|
|
|
|
></SuperFilterTagDrawer>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import articleApi from "@/api/article";
|
|
|
|
|
import SuperFilterTagDrawer from "./superFilterTagDrawer.vue";
|
|
|
|
|
import ArticleDetailDialog from "./articleDetail.vue";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Article",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 标签分级 新建：0，已发布：1， 回收站：2
|
|
|
|
|
activateTab: 0,
|
|
|
|
|
// 查询表单
|
|
|
|
|
queryForm: {
|
|
|
|
|
remoteData: {
|
|
|
|
|
publisher: [],
|
|
|
|
|
superFilterTags: []
|
|
|
|
|
},
|
|
|
|
|
lastQuery: {},
|
|
|
|
|
superFilterDialog: {
|
|
|
|
|
visible: false
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
name: null,
|
|
|
|
|
creatorId: null,
|
|
|
|
|
timeRange: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 表格
|
|
|
|
|
table: {
|
|
|
|
|
show: true,
|
|
|
|
|
loading: true,
|
|
|
|
|
data: [],
|
|
|
|
|
page: {
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10,
|
|
|
|
|
total: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 新增修改弹窗
|
|
|
|
|
modifyDialog: {
|
|
|
|
|
visible: false,
|
|
|
|
|
type: 0, // 0for新增 1for编辑 2for详情
|
|
|
|
|
form: {
|
|
|
|
|
rules: {},
|
|
|
|
|
data: {}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
ArticleDetailDialog,
|
|
|
|
|
SuperFilterTagDrawer
|
|
|
|
|
},
|
|
|
|
|
filters: {},
|
|
|
|
|
created() {
|
|
|
|
|
this.fetchCreaterList();
|
|
|
|
|
this.fetchSuperFilterTags();
|
|
|
|
|
this.fetchData(this.queryForm.data);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
log(e) {
|
|
|
|
|
this.$message.success(e);
|
|
|
|
|
},
|
|
|
|
|
// ************************* 数据查询 *************************
|
|
|
|
|
/**
|
|
|
|
|
* 查询表格数据
|
|
|
|
|
*/
|
|
|
|
|
fetchData(param) {
|
|
|
|
|
// 记录上一次查询条件
|
|
|
|
|
this.queryForm.lastQuery = param;
|
|
|
|
|
|
|
|
|
|
let queryParam = {
|
|
|
|
|
end: "",
|
|
|
|
|
keyword: param.name,
|
|
|
|
|
start: "",
|
|
|
|
|
tab: this.activateTab,
|
|
|
|
|
tags: [],
|
|
|
|
|
userId: param.creatorId
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (this.queryForm.data.timeRange) {
|
|
|
|
|
if (this.queryForm.data.timeRange[0]) {
|
|
|
|
|
queryParam.start = this.queryForm.data.timeRange[0];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.queryForm.data.timeRange[1]) {
|
|
|
|
|
queryParam.end = this.queryForm.data.timeRange[1];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.table.loading = true;
|
|
|
|
|
this.table.data = [];
|
|
|
|
|
// articleApi
|
|
|
|
|
// .getList(queryParam, this.table.page.current, this.table.page.size)
|
|
|
|
|
// .then(res => {
|
|
|
|
|
// if(res.code === 200){
|
|
|
|
|
// this.table.data = res.data.rows;
|
|
|
|
|
// this.table.page.total = res.data.total;
|
|
|
|
|
// }else{
|
|
|
|
|
// this.$message.error(res.message)
|
|
|
|
|
// }
|
|
|
|
|
// this.table.loading = false;
|
|
|
|
|
// });
|
|
|
|
|
let res = {
|
|
|
|
|
code: 200,
|
|
|
|
|
data: {
|
|
|
|
|
rows: [
|
|
|
|
|
{
|
|
|
|
|
commentCount: 0,
|
|
|
|
|
coverPhoto: "coverPhoto",
|
|
|
|
|
createTime: "2023-01-01",
|
|
|
|
|
id: "1",
|
|
|
|
|
name: "name",
|
|
|
|
|
number: "1001",
|
|
|
|
|
playCount: 1,
|
|
|
|
|
pubTime: "2023-01-01",
|
|
|
|
|
songCount: 1,
|
|
|
|
|
songs: [
|
|
|
|
|
{
|
|
|
|
|
album: "album",
|
|
|
|
|
artist: "artist",
|
|
|
|
|
duration: "duration",
|
|
|
|
|
id: "0",
|
|
|
|
|
journal: [],
|
|
|
|
|
lyric: "xx",
|
|
|
|
|
name: "name",
|
|
|
|
|
picture: "picture",
|
|
|
|
|
size: "size",
|
|
|
|
|
state: "state",
|
|
|
|
|
tags: [1, 2],
|
|
|
|
|
updateTime: "2023-01-01",
|
|
|
|
|
url: "/url",
|
|
|
|
|
userId: "userId"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
state: "1",
|
|
|
|
|
status: "1",
|
|
|
|
|
summary: "2",
|
|
|
|
|
tag: [],
|
|
|
|
|
userId: "1"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
total: 0
|
|
|
|
|
},
|
|
|
|
|
message: ""
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.table.data = res.data.rows;
|
|
|
|
|
this.table.page.total = res.data.total;
|
|
|
|
|
this.table.loading = false;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 创建人下拉框
|
|
|
|
|
*/
|
|
|
|
|
fetchCreaterList() {
|
|
|
|
|
// tagApi.createrList().then(res => {
|
|
|
|
|
// if (res.code === 200) {
|
|
|
|
|
// this.queryForm.remoteData.publisher = res.data;
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
this.queryForm.remoteData.publisher = [];
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 高级筛选tag
|
|
|
|
|
*/
|
|
|
|
|
fetchSuperFilterTags() {
|
|
|
|
|
this.queryForm.remoteData.superFilterTags = [
|
|
|
|
|
{
|
|
|
|
|
name: "语言类型",
|
|
|
|
|
tags: [
|
|
|
|
|
{ id: 1, name: "abc" },
|
|
|
|
|
{ id: 2, name: "bcasdd" },
|
|
|
|
|
{ id: 21, name: "becd" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "期刊标签",
|
|
|
|
|
tags: [
|
|
|
|
|
{ id: 4, name: "abc11" },
|
|
|
|
|
{ id: 5, name: "bcd22" }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
},
|
|
|
|
|
// ************************* 按扭事件 *************************
|
|
|
|
|
/**
|
|
|
|
|
* 查询按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleQueryClick() {
|
|
|
|
|
this.table.page.current = 1;
|
|
|
|
|
this.table.page.total = 0;
|
|
|
|
|
this.fetchData(this.queryForm.data);
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 重置点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleResetClick() {
|
|
|
|
|
this.queryForm.data = {
|
|
|
|
|
type: this.activateTab,
|
|
|
|
|
parentId: null,
|
|
|
|
|
name: null,
|
|
|
|
|
creatorId: null,
|
|
|
|
|
timeRange: []
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 高级筛选按钮
|
|
|
|
|
*/
|
|
|
|
|
superFilterClick() {
|
|
|
|
|
this.queryForm.superFilterDialog.visible = true;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 高级筛选中的查询按钮
|
|
|
|
|
*/
|
|
|
|
|
handleSuperFilterTagQuery(val) {
|
|
|
|
|
this.console.log(val);
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 新建标签点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleAddClick() {
|
|
|
|
|
// TODO: 新建给默认值
|
|
|
|
|
let newData = {
|
|
|
|
|
"id": null,
|
|
|
|
|
"name": null,
|
|
|
|
|
"tag": [],
|
|
|
|
|
"number": null,
|
|
|
|
|
"userId": null,
|
|
|
|
|
"coverPhoto": null,
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
this.modifyDialog.type = 0;
|
|
|
|
|
this.modifyDialog.visible = true;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 编辑标签点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleModifyClick(row) {
|
|
|
|
|
// TODO: 编辑把值带进去
|
|
|
|
|
|
|
|
|
|
this.modifyDialog.type = 1;
|
|
|
|
|
this.modifyDialog.visible = true;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 发布点击事件
|
|
|
|
|
*/
|
|
|
|
|
handlePublishClick(row) {
|
|
|
|
|
articleApi.publish(row.id).then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.message);
|
|
|
|
|
this.fetchData(this.queryForm.lastQuery);
|
|
|
|
|
return;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 详情点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleDetailClick(row) {
|
|
|
|
|
this.$message.success("详情" + row.id);
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 删除按钮点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleDeleteClick(row) {
|
|
|
|
|
articleApi.delete(row.id).then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.message);
|
|
|
|
|
this.fetchData(this.queryForm.lastQuery);
|
|
|
|
|
return;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 表格内状态滑块切换事件
|
|
|
|
|
*/
|
|
|
|
|
handleTableRowStatusChange($event, row) {
|
|
|
|
|
articleApi.updateStatus(row.id, $event).then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.message);
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.fetchData(this.queryForm.lastQuery);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗取消按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleDialogCancel() {
|
|
|
|
|
this.modifyDialog.visible = false;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗确定按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleDialogSubmit() {
|
|
|
|
|
this.$refs.modifyDialogForm.validate(valid => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
// 新增
|
|
|
|
|
if (this.modifyDialog.type === 0) {
|
|
|
|
|
// tagApi.create(this.modifyDialog.form.data).then(res => {
|
|
|
|
|
// if (res.code === 200) {
|
|
|
|
|
// this.$message.success(res.message);
|
|
|
|
|
// this.modifyDialog.visible = false;
|
|
|
|
|
// this.table.page.current = 1;
|
|
|
|
|
// // 新增时重置查询条件
|
|
|
|
|
// this.handleResetClick();
|
|
|
|
|
// this.fetchData(this.queryForm.data);
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$message.error(res.message);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
this.$message.success("新增");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 编辑
|
|
|
|
|
if (this.modifyDialog.type === 1) {
|
|
|
|
|
// tagApi.update(this.modifyDialog.form.data).then(res => {
|
|
|
|
|
// if (res.code === 200) {
|
|
|
|
|
// this.$message.success(res.message);
|
|
|
|
|
// this.modifyDialog.visible = false;
|
|
|
|
|
// this.fetchData(this.queryForm.lastQuery);
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$message.error(res.message);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
this.$message.success("编辑");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 详情
|
|
|
|
|
if (this.modifyDialog.type === 2) {
|
|
|
|
|
// tagApi.create(this.modifyDialog.form.data).then(res => {
|
|
|
|
|
// if (res.code === 200) {
|
|
|
|
|
// this.$message.success(res.message);
|
|
|
|
|
// this.modifyDialog.visible = false;
|
|
|
|
|
// this.fetchData(this.queryForm.lastQuery);
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$message.error(res.message);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
this.$message.success("详情");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("请完善表单相关信息！");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗重置
|
|
|
|
|
*/
|
|
|
|
|
handleDialogReset() {
|
|
|
|
|
this.$message.success("重置");
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗关闭按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleModifyDialogBeforeClose(done) {
|
|
|
|
|
this.modifyDialog.visible = false;
|
|
|
|
|
done();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗关闭按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleTagsDialogBeforeClose(done) {
|
|
|
|
|
this.queryForm.superFilterDialog.visible = false;
|
|
|
|
|
done();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 分页组件页数变化事件
|
|
|
|
|
*/
|
|
|
|
|
handlePageCurrentChange(val) {
|
|
|
|
|
this.table.page.current = val;
|
|
|
|
|
this.fetchData(this.queryForm.lastQuery);
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 分页组件大小变化事件
|
|
|
|
|
*/
|
|
|
|
|
handlePageSizeChange(val) {
|
|
|
|
|
this.table.page.size = val;
|
|
|
|
|
this.fetchData(this.queryForm.lastQuery);
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 切换标签事件
|
|
|
|
|
*/
|
|
|
|
|
handleChangeActivateTab(tab) {
|
|
|
|
|
this.activateTab = tab;
|
|
|
|
|
// 搜索条件重置
|
|
|
|
|
this.handleResetClick();
|
|
|
|
|
|
|
|
|
|
// 表格、分页重置
|
|
|
|
|
this.table.data = [];
|
|
|
|
|
this.table.page.current = 1;
|
|
|
|
|
this.table.page.size = 10;
|
|
|
|
|
this.table.show = false;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.table.show = true;
|
|
|
|
|
});
|
|
|
|
|
this.fetchData(this.queryForm.data);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.pagination-right {
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.box-card {
|
|
|
|
|
min-height: 300px;
|
|
|
|
|
height: calc(100vh - 140px);
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
.el-card__header {
|
|
|
|
|
background-color: rgba(249, 249, 249, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/ .el-dialog {
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.popup-dialog {
|
|
|
|
|
.el-dialog__header {
|
|
|
|
|
border-top-left-radius: 5px;
|
|
|
|
|
border-top-right-radius: 5px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background-color: #f5f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
.el-dialog__title {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
}
|
|
|
|
|
.el-dialog__footer {
|
|
|
|
|
border-top: solid;
|
|
|
|
|
border-top-width: thin;
|
|
|
|
|
border-top-color: rgb(233, 233, 233);
|
|
|
|
|
padding: 10px 20px 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.in-card-form {
|
|
|
|
|
height: 60px;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.clearfix:before,
|
|
|
|
|
.clearfix:after {
|
|
|
|
|
display: table;
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
.clearfix:after {
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
.card-header {
|
|
|
|
|
height: 23px;
|
|
|
|
|
}
|
|
|
|
|
.app-container {
|
|
|
|
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
|
|
|
|
"Microsoft YaHei", sans-serif;
|
|
|
|
|
}
|
|
|
|
|
.card-header-text {
|
|
|
|
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
|
|
|
|
"Microsoft YaHei", sans-serif;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
letter-spacing: normal;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
