文章管理模块新增搜索条件--栏目搜索
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index c977505..bc8deee 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -193,6 +193,10 @@
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
- 'array-bracket-spacing': [2, 'never']
+ 'array-bracket-spacing': [2, 'never'],
+ 'quotes': 'off',
+ 'semi' : 'off',
+ 'comma-dangle' : 'off',
+ "no-tabs":"off"
}
}
diff --git a/frontend/src/views/article/components/ArticleDetail.vue b/frontend/src/views/article/components/ArticleDetail.vue
index fefa8f5..9ef9147 100644
--- a/frontend/src/views/article/components/ArticleDetail.vue
+++ b/frontend/src/views/article/components/ArticleDetail.vue
@@ -140,6 +140,7 @@
getAllColumn().then(response => {
if (response.list) {
this.columnList = response.list
+ console.log(this.columnList);
} else {
this.columnList = []
}
diff --git a/frontend/src/views/article/list.vue b/frontend/src/views/article/list.vue
index f879a93..56bc174 100644
--- a/frontend/src/views/article/list.vue
+++ b/frontend/src/views/article/list.vue
@@ -1,17 +1,17 @@
<template>
<div class="app-container">
<div class="filter-container">
- <div class="filter-item" style="margin-right:15px">文章标题</div>
+ <div class="filter-item" style="margin-right: 15px">文章标题</div>
<el-input
v-model="formData.title"
placeholder="输入文章标题"
- style="width: 320px;margin-right:50px"
+ style="width: 320px; margin-right: 50px"
class="filter-item"
/>
- <div class="filter-item" style="margin-right:15px">文章状态</div>
+ <div class="filter-item" style="margin-right: 15px">文章状态</div>
<el-select
v-model="formData.status"
- style="width:200px;margin-right:50px"
+ style="width: 200px; margin-right: 50px"
class="filter-item"
>
<el-option
@@ -21,14 +21,27 @@
:value="item.value"
/>
</el-select>
+ <div class="filter-item" style="margin-right: 15px">栏目</div>
+ <el-select
+ v-model="formData.columnid"
+ style="width: 200px; margin-right: 50px"
+ class="filter-item"
+ >
+ <el-option
+ v-for="(item, index) in columnList"
+ :key="item + index"
+ :label="item.name"
+ :value="item.columnid"
+ />
+ </el-select>
</div>
<div class="filter-container">
- <div class="filter-item" style="margin-right:15px">保存日期</div>
+ <div class="filter-item" style="margin-right: 15px">保存日期</div>
<el-date-picker
v-model="saveDate"
type="daterange"
align="left"
- style="width:320px;margin-right:50px"
+ style="width: 320px; margin-right: 50px"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
@@ -37,12 +50,12 @@
:picker-options="pickerOptions"
class="filter-item"
/>
- <div class="filter-item" style="margin-right:15px">发布日期</div>
+ <div class="filter-item" style="margin-right: 15px">发布日期</div>
<el-date-picker
v-model="releaseDate"
type="daterange"
align="left"
- style="width:320px;margin-right:50px"
+ style="width: 320px; margin-right: 50px"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
@@ -64,49 +77,56 @@
清空
</el-button>
</div>
- <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+ <el-table
+ v-loading="listLoading"
+ :data="list"
+ border
+ fit
+ highlight-current-row
+ style="width: 100%"
+ >
<el-table-column align="center" label="编号" width="100">
- <template slot-scope="{row}">
+ <template slot-scope="{ row }">
<span>{{ row.articleno }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="标题">
- <template slot-scope="{row}">
+ <template slot-scope="{ row }">
<span>{{ row.title }}</span>
</template>
</el-table-column>
<el-table-column width="120px" align="center" label="栏目">
- <template slot-scope="{row}">
+ <template slot-scope="{ row }">
<span>{{ row.columnname }}</span>
</template>
</el-table-column>
<el-table-column width="100px" label="状态" align="center">
- <template slot-scope="{row}">
- <el-tag v-if="row.status==='save'" size="medium">已保存</el-tag>
- <el-tag v-if="row.status==='released'" type="success" size="medium">已发布</el-tag>
- <el-tag v-if="row.status==='review'" type="warning" size="medium">审核中</el-tag>
+ <template slot-scope="{ row }">
+ <el-tag v-if="row.status === 'save'" size="medium">已保存</el-tag>
+ <el-tag v-if="row.status === 'released'" type="success" size="medium">已发布</el-tag>
+ <el-tag v-if="row.status === 'review'" type="warning" size="medium">审核中</el-tag>
</template>
</el-table-column>
<el-table-column width="100px" label="保存时间">
- <template slot-scope="{row}">
+ <template slot-scope="{ row }">
<span>{{ dateFormat(row.createtime) }}</span>
</template>
</el-table-column>
<el-table-column width="100px" label="发布时间">
- <template slot-scope="{row}">
+ <template slot-scope="{ row }">
<span>{{ dateFormat(row.releasetime) }}</span>
</template>
</el-table-column>
<el-table-column label="排序" width="80" align="center">
- <template slot-scope="{row}">
+ <template slot-scope="{ row }">
<span>{{ row.ordernum }}</span>
</template>
</el-table-column>
<el-table-column width="100px" label="是否展示" align="center">
- <template slot-scope="{row}">
+ <template slot-scope="{ row }">
<el-switch
:value="row.isdisplay === '1'"
active-color="#13ce66"
@@ -116,61 +136,109 @@
</template>
</el-table-column>
<el-table-column width="160px" label="操作" align="center">
- <template slot-scope="{row}">
- <el-tooltip v-if="row.status==='save'" class="item" effect="dark" content="编辑" placement="bottom">
- <router-link :to="'/article/edit/'+row.articleno">
- <el-button type="primary" style="margin-right:10px" icon="el-icon-edit" circle size="mini" />
+ <template slot-scope="{ row }">
+ <el-tooltip
+ v-if="row.status === 'save'"
+ class="item"
+ effect="dark"
+ content="编辑"
+ placement="bottom"
+ >
+ <router-link :to="'/article/edit/' + row.articleno">
+ <el-button
+ type="primary"
+ style="margin-right: 10px"
+ icon="el-icon-edit"
+ circle
+ size="mini"
+ />
</router-link>
</el-tooltip>
- <el-tooltip v-else class="item" effect="dark" content="查看" placement="bottom">
- <router-link :to="'/article/examine/'+row.articleno">
- <el-button type="primary" style="margin-right:10px" icon="el-icon-search" circle size="mini" />
+ <el-tooltip
+ v-else
+ class="item"
+ effect="dark"
+ content="查看"
+ placement="bottom"
+ >
+ <router-link :to="'/article/examine/' + row.articleno">
+ <el-button
+ type="primary"
+ style="margin-right: 10px"
+ icon="el-icon-search"
+ circle
+ size="mini"
+ />
</router-link>
</el-tooltip>
- <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
- <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteArticle(row)" />
+ <el-tooltip
+ class="item"
+ effect="dark"
+ content="删除"
+ placement="bottom"
+ >
+ <el-button
+ type="danger"
+ icon="el-icon-delete"
+ circle
+ size="mini"
+ @click="deleteArticle(row)"
+ />
</el-tooltip>
- <el-tooltip v-if="row.status!=='save'" class="item" effect="dark" content="撤回" placement="bottom">
- <el-button type="primary" size="mini" circle @click="withdrawArticle(row)">
- <i class="iconfont iconchehui_huaban1" style="font-size:12px" />
+ <el-tooltip
+ v-if="row.status !== 'save'"
+ class="item"
+ effect="dark"
+ content="撤回"
+ placement="bottom"
+ >
+ <el-button
+ type="primary"
+ size="mini"
+ circle
+ @click="withdrawArticle(row)"
+ >
+ <i class="iconfont iconchehui_huaban1" style="font-size: 12px" />
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination
- v-show="total>0"
+ v-show="total > 0"
:total="total"
:page.sync="formData.pageno"
:limit.sync="formData.pagesize"
- style="margin-top:0;"
+ style="margin-top: 0"
@pagination="getArticleList"
/>
</div>
</template>
<script>
-import moment from 'moment'
+import moment from "moment";
import {
getArticleList,
deleteArticle,
switchDisplay,
- withdrawArticle } from '@/api/article'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+ withdrawArticle,
+} from "@/api/article";
+import { getAllColumn } from "@/api/column";
+import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
export default {
- name: 'ArticleList',
+ name: "ArticleList",
components: { Pagination },
filters: {
statusFilter(status) {
const statusMap = {
- published: 'success',
- draft: 'info',
- deleted: 'danger'
- }
- return statusMap[status]
- }
+ published: "success",
+ draft: "info",
+ deleted: "danger",
+ };
+ return statusMap[status];
+ },
},
data() {
return {
@@ -178,182 +246,220 @@
total: 0,
listLoading: false,
formData: {
- title: '',
- status: '',
- savestartdate: '',
- saveenddate: '',
- releasestartdate: '',
- releaseenddate: '',
+ title: "",
+ status: "",
+ columnid: "",
+ savestartdate: "",
+ saveenddate: "",
+ releasestartdate: "",
+ releaseenddate: "",
pageno: 1,
- pagesize: 10
+ pagesize: 10,
},
+ columnList: [],
saveDate: null,
releaseDate: null,
- statusOptions: [{
- value: '',
- label: '所有'
- },
- {
- value: 'save',
- label: '已保存'
- }, {
- value: 'released',
- label: '已发布'
- }, {
- value: 'review',
- label: '审核中'
- }, {
- value: 'pass',
- label: '已通过'
- }, {
- value: 'reject',
- label: '已驳回'
- }],
+ statusOptions: [
+ {
+ value: "",
+ label: "所有",
+ },
+ {
+ value: "save",
+ label: "已保存",
+ },
+ {
+ value: "released",
+ label: "已发布",
+ },
+ {
+ value: "review",
+ label: "审核中",
+ },
+ {
+ value: "pass",
+ label: "已通过",
+ },
+ {
+ value: "reject",
+ label: "已驳回",
+ },
+ ],
pickerOptions: {
- shortcuts: [{
- text: '今天',
- onClick(picker) {
- const end = new Date()
- const start = new Date()
- picker.$emit('pick', [start, end])
- }
- }, {
- text: '最近三天',
- onClick(picker) {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
- picker.$emit('pick', [start, end])
- }
- }, {
- text: '最近一周',
- onClick(picker) {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
- picker.$emit('pick', [start, end])
- }
- }]
- }
- }
+ shortcuts: [
+ {
+ text: "今天",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "最近三天",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ {
+ text: "最近一周",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit("pick", [start, end]);
+ },
+ },
+ ],
+ },
+ };
},
created() {
- this.getArticleList()
+ this.getArticleList();
+ getAllColumn()
+ .then((response) => {
+ if (response.list) {
+ this.columnList = response.list;
+ this.columnList.unshift({ name: "所有", columnid: "" });
+ } else {
+ this.columnList = [];
+ }
+ })
+ .catch((error) => {
+ this.$message({
+ message: error.msg || "请求栏目异常",
+ type: "error",
+ });
+ });
},
methods: {
getArticleList() {
- this.listLoading = true
- const saveDate = this.saveDate
- const releaseDate = this.releaseDate
+ this.listLoading = true;
+ const saveDate = this.saveDate;
+ const releaseDate = this.releaseDate;
if (saveDate != null) {
- this.formData.savestartdate = saveDate[0]
- this.formData.saveenddate = saveDate[1]
+ this.formData.savestartdate = saveDate[0];
+ this.formData.saveenddate = saveDate[1];
} else {
- this.formData.savestartdate = ''
- this.formData.saveenddate = ''
+ this.formData.savestartdate = "";
+ this.formData.saveenddate = "";
}
if (releaseDate != null) {
- this.formData.releasestartdate = releaseDate[0]
- this.formData.releaseenddate = releaseDate[1]
+ this.formData.releasestartdate = releaseDate[0];
+ this.formData.releaseenddate = releaseDate[1];
} else {
- this.formData.releasestartdate = ''
- this.formData.releaseenddate = ''
+ this.formData.releasestartdate = "";
+ this.formData.releaseenddate = "";
}
- getArticleList(this.formData).then(response => {
- if (response.page) {
- this.list = response.page.list
- this.total = response.page.totalCount
- } else {
- this.list = null
- this.total = 0
- }
- this.listLoading = false
- }).catch(error => {
- this.$message({
- message: error.msg || '请求异常',
- type: 'error'
+ getArticleList(this.formData)
+ .then((response) => {
+ if (response.page) {
+ this.list = response.page.list;
+ this.total = response.page.totalCount;
+ } else {
+ this.list = null;
+ this.total = 0;
+ }
+ this.listLoading = false;
})
- this.listLoading = false
- })
+ .catch((error) => {
+ this.$message({
+ message: error.msg || "请求异常",
+ type: "error",
+ });
+ this.listLoading = false;
+ });
},
handleFilter() {
- this.formData.pageno = 1
- this.getArticleList()
+ this.formData.pageno = 1;
+ this.getArticleList();
},
clearFilter() {
- this.formData.title = ''
- this.formData.status = ''
- this.saveDate = null
- this.releaseDate = null
+ this.formData.title = "";
+ this.formData.status = "";
+ this.formData.columnid = "";
+ this.saveDate = null;
+ this.releaseDate = null;
},
dateFormat(date) {
if (date === null) {
- return ''
+ return "";
}
- return moment(date).format('YYYY-MM-DD HH:mm:ss')
+ return moment(date).format("YYYY-MM-DD HH:mm:ss");
},
switchDisplay(row) {
- switchDisplay(row.articleno, { value: row.isdisplay === '1' ? '0' : '1' }).then(response => {
- this.$message({
- type: 'success',
- message: '操作成功!'
+ switchDisplay(row.articleno, { value: row.isdisplay === "1" ? "0" : "1" })
+ .then((response) => {
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ row.isdisplay = response.result;
})
- row.isdisplay = response.result
- }).catch(error => {
- this.$message({
- message: error.msg || '请求异常',
- type: 'error'
- })
- this.listLoading = false
- })
+ .catch((error) => {
+ this.$message({
+ message: error.msg || "请求异常",
+ type: "error",
+ });
+ this.listLoading = false;
+ });
},
withdrawArticle(row) {
- this.$confirm('是否确认撤回该文章?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- withdrawArticle(row.articleno).then(response => {
- this.$message({
- type: 'success',
- message: '撤回成功!'
- })
- this.handleFilter()
- }).catch(error => {
- this.$message({
- message: error.msg || '请求异常',
- type: 'error'
- })
- this.listLoading = false
- })
- }).catch(() => {
+ this.$confirm("是否确认撤回该文章?", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
})
+ .then(() => {
+ withdrawArticle(row.articleno)
+ .then((response) => {
+ this.$message({
+ type: "success",
+ message: "撤回成功!",
+ });
+ this.handleFilter();
+ })
+ .catch((error) => {
+ this.$message({
+ message: error.msg || "请求异常",
+ type: "error",
+ });
+ this.listLoading = false;
+ });
+ })
+ .catch(() => {});
},
deleteArticle(row) {
- this.$confirm('是否确认删除该文章?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- deleteArticle(row.articleno).then(response => {
- this.$message({
- type: 'success',
- message: '删除成功!'
- })
- this.handleFilter()
- }).catch(error => {
- this.$message({
- message: error.msg || '请求异常',
- type: 'error'
- })
- this.listLoading = false
- })
- }).catch(() => {
+ this.$confirm("是否确认删除该文章?", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
})
- }
- }
-}
+ .then(() => {
+ deleteArticle(row.articleno)
+ .then((response) => {
+ this.$message({
+ type: "success",
+ message: "删除成功!",
+ });
+ this.handleFilter();
+ })
+ .catch((error) => {
+ this.$message({
+ message: error.msg || "请求异常",
+ type: "error",
+ });
+ this.listLoading = false;
+ });
+ })
+ .catch(() => {});
+ },
+ },
+};
</script>
<style scoped>