| <template> |
| <div class="app-container"> |
| <div class="filter-container"> |
| <div class="filter-item" style="margin-right: 15px">文章标题</div> |
| <el-input |
| v-model="formData.title" |
| placeholder="输入文章标题" |
| style="width: 320px; margin-right: 50px" |
| class="filter-item" |
| /> |
| <div class="filter-item" style="margin-right: 15px">文章状态</div> |
| <el-select |
| v-model="formData.status" |
| style="width: 200px; margin-right: 50px" |
| class="filter-item" |
| > |
| <el-option |
| v-for="item in statusOptions" |
| :key="item.value" |
| :label="item.label" |
| :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> |
| <el-date-picker |
| v-model="saveDate" |
| type="daterange" |
| align="left" |
| style="width: 320px; margin-right: 50px" |
| unlink-panels |
| range-separator="至" |
| start-placeholder="开始日期" |
| end-placeholder="结束日期" |
| value-format="yyyyMMdd" |
| :picker-options="pickerOptions" |
| class="filter-item" |
| /> |
| <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" |
| unlink-panels |
| range-separator="至" |
| start-placeholder="开始日期" |
| end-placeholder="结束日期" |
| value-format="yyyyMMdd" |
| :picker-options="pickerOptions" |
| class="filter-item" |
| /> |
| |
| <el-button |
| class="filter-item" |
| type="primary" |
| icon="el-icon-search" |
| @click="handleFilter()" |
| > |
| 搜索 |
| </el-button> |
| <el-button class="filter-item" type="info" @click="clearFilter"> |
| 清空 |
| </el-button> |
| </div> |
| <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 }"> |
| <span>{{ row.articleno }}</span> |
| </template> |
| </el-table-column> |
| |
| <el-table-column align="center" label="标题"> |
| <template slot-scope="{ row }"> |
| <span>{{ row.title }}</span> |
| </template> |
| </el-table-column> |
| |
| <el-table-column width="120px" align="center" label="栏目"> |
| <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> |
| </el-table-column> |
| <el-table-column width="100px" label="保存时间"> |
| <template slot-scope="{ row }"> |
| <span>{{ dateFormat(row.createtime) }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column width="100px" label="发布时间"> |
| <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 }"> |
| <el-input |
| v-if="row.edit" |
| ref="cxk" |
| v-model="row.ordernum" |
| class="edit-ordernum-input" |
| @blur="onOrdernumChanged(row)" |
| /> |
| <div v-else style="width:100%;height:100%;cursor: pointer;" @click="editOrderNum(row)">{{ row.ordernum }}</div> |
| </template> |
| </el-table-column> |
| <el-table-column width="100px" label="是否展示" align="center"> |
| <template slot-scope="{ row }"> |
| <el-switch |
| :value="row.isdisplay === '1'" |
| active-color="#13ce66" |
| inactive-color="#a7a7a7" |
| @click.native.prevent="switchDisplay(row)" |
| /> |
| </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" |
| /> |
| </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" |
| /> |
| </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> |
| <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" |
| :total="total" |
| :page.sync="formData.pageno" |
| :limit.sync="formData.pagesize" |
| style="margin-top: 0" |
| @pagination="getArticleList" |
| /> |
| </div> |
| </template> |
| |
| <script> |
| import moment from "moment"; |
| import { |
| getArticleList, |
| deleteArticle, |
| switchDisplay, |
| withdrawArticle, |
| updateArticleByArticleno, |
| } from "@/api/article"; |
| import { getAllColumn } from "@/api/column"; |
| import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination |
| |
| export default { |
| name: "ArticleList", |
| components: { Pagination }, |
| filters: { |
| statusFilter(status) { |
| const statusMap = { |
| published: "success", |
| draft: "info", |
| deleted: "danger", |
| }; |
| return statusMap[status]; |
| }, |
| }, |
| data() { |
| return { |
| list: null, |
| total: 0, |
| listLoading: false, |
| formData: { |
| title: "", |
| status: "", |
| columnid: "", |
| savestartdate: "", |
| saveenddate: "", |
| releasestartdate: "", |
| releaseenddate: "", |
| pageno: 1, |
| pagesize: 10, |
| }, |
| columnList: [], |
| currentordernum: "", |
| saveDate: null, |
| releaseDate: null, |
| 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]); |
| }, |
| }, |
| ], |
| }, |
| }; |
| }, |
| created() { |
| 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; |
| if (saveDate != null) { |
| this.formData.savestartdate = saveDate[0]; |
| this.formData.saveenddate = saveDate[1]; |
| } else { |
| this.formData.savestartdate = ""; |
| this.formData.saveenddate = ""; |
| } |
| if (releaseDate != null) { |
| this.formData.releasestartdate = releaseDate[0]; |
| this.formData.releaseenddate = releaseDate[1]; |
| } else { |
| 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", |
| }); |
| this.listLoading = false; |
| }); |
| }, |
| handleFilter() { |
| this.formData.pageno = 1; |
| this.getArticleList(); |
| }, |
| clearFilter() { |
| this.formData.title = ""; |
| this.formData.status = ""; |
| this.formData.columnid = ""; |
| this.saveDate = null; |
| this.releaseDate = null; |
| }, |
| dateFormat(date) { |
| if (date === null) { |
| return ""; |
| } |
| return moment(date).format("YYYY-MM-DD HH:mm:ss"); |
| }, |
| editOrderNum(row) { |
| this.$set(row, 'edit', true) |
| this.currentordernum = row.ordernum |
| this.$nextTick(() => { |
| this.$refs.cxk.focus(); |
| }); |
| }, |
| onOrdernumChanged(row) { |
| if (row.ordernum === this.currentordernum) { |
| this.$set(row, 'edit', false) |
| return; |
| } |
| var re = /^[1-9-]\d*$/; |
| if (!re.test(row.ordernum)) { |
| this.$message({ |
| message: "请输入有效的数字", |
| type: "error", |
| }) |
| row.ordernum = this.currentordernum; |
| this.$set(row, 'edit', false) |
| return |
| } else { |
| updateArticleByArticleno(row.articleno, { ordernum: row.ordernum }) |
| .then(() => { |
| this.$message({ |
| message: "保存成功", |
| type: "success", |
| }); |
| this.$set(row, "edit", false) |
| this.handleFilter() |
| }) |
| .catch((error) => { |
| this.$message({ |
| message: error.msg || "保存异常", |
| type: "error", |
| }); |
| this.$set(row, "edit", false) |
| this.handleFilter() |
| }); |
| } |
| }, |
| |
| switchDisplay(row) { |
| switchDisplay(row.articleno, { value: row.isdisplay === "1" ? "0" : "1" }) |
| .then((response) => { |
| this.$message({ |
| type: "success", |
| message: "操作成功!", |
| }); |
| row.isdisplay = response.result; |
| }) |
| .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(() => {}); |
| }, |
| 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(() => {}); |
| }, |
| }, |
| }; |
| </script> |
| |
| <style> |
| .edit-ordernum-input |
| .el-input__inner { |
| text-align: center; |
| padding-left: 10px; |
| padding-right: 10px; |
| } |
| </style> |