From f1b087d45ded835ccd6c875086b1f2e2b847f15a Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 09 Feb 2022 18:27:16 +0800
Subject: [PATCH] 表单调整
---
_web/src/views/main/blogarticle/index.vue | 196 ++++++++++++++++--------------------------------
1 files changed, 66 insertions(+), 130 deletions(-)
diff --git a/_web/src/views/main/blogarticle/index.vue b/_web/src/views/main/blogarticle/index.vue
index 331c2ed..7afb31d 100644
--- a/_web/src/views/main/blogarticle/index.vue
+++ b/_web/src/views/main/blogarticle/index.vue
@@ -10,19 +10,16 @@
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
- <a-form-item label="文章文件id">
- <a-input v-model="queryParam.articleFileId" allow-clear placeholder="请输入文章文件id"/>
+ <a-form-item label="文件类型">
+ <a-select style="width: 100%" v-model="queryParam.articleFileType" placeholder="请选择文件类型">
+ <a-select-option v-for="(item,index) in articleFileTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
+ </a-select>
</a-form-item>
</a-col>
<template v-if="advanced">
<a-col :md="8" :sm="24">
- <a-form-item label="文件类型 1:markdown 2:html">
- <a-input v-model="queryParam.articleFileType" allow-clear placeholder="请输入文件类型 1:markdown 2:html"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="文章分类id 0:没有分类">
- <a-input v-model="queryParam.articleTypeId" allow-clear placeholder="请输入文章分类id 0:没有分类"/>
+ <a-form-item label="文章分类">
+ <a-input v-model="queryParam.articleTypeId" allow-clear placeholder="请输入文章分类"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
@@ -31,68 +28,29 @@
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
- <a-form-item label="封面文件地址(id)">
- <a-input v-model="queryParam.coverFileId" allow-clear placeholder="请输入封面文件地址(id)"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="上次编辑时间">
- <a-date-picker style="width: 100%" placeholder="请选择上次编辑时间" v-model="queryParam.lastEditorDateDate" @change="onChangelastEditorDate"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
<a-form-item label="发布时间">
<a-date-picker style="width: 100%" placeholder="请选择发布时间" v-model="queryParam.publishDateDate" @change="onChangepublishDate"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
- <a-form-item label="是否置顶 0:否 1:是">
- <a-input v-model="queryParam.isTop" allow-clear placeholder="请输入是否置顶 0:否 1:是"/>
+ <a-form-item label="是否置顶">
+ <a-select style="width: 100%" v-model="queryParam.isTop" placeholder="请选择是否置顶">
+ <a-select-option v-for="(item,index) in isTopData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
+ </a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
- <a-form-item label="置顶值(越小越靠前)">
- <a-input v-model="queryParam.topValue" allow-clear placeholder="请输入置顶值(越小越靠前)"/>
+ <a-form-item label="公开状态">
+ <a-select style="width: 100%" v-model="queryParam.authStatus" placeholder="请选择公开状态">
+ <a-select-option v-for="(item,index) in authStatusData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
+ </a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
- <a-form-item label="公开状态 1:公开 2:私密 3:密码授权">
- <a-input v-model="queryParam.authStatus" allow-clear placeholder="请输入公开状态 1:公开 2:私密 3:密码授权"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="授权密码(在密码授权状态时)">
- <a-input v-model="queryParam.authPassword" allow-clear placeholder="请输入授权密码(在密码授权状态时)"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="编辑状态 0:草稿 1:发布">
- <a-input v-model="queryParam.editorStatus" allow-clear placeholder="请输入编辑状态 0:草稿 1:发布"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="归档年份(以初次发布时间为准)">
- <a-input v-model="queryParam.separateYear" allow-clear placeholder="请输入归档年份(以初次发布时间为准)"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="归档月份">
- <a-input v-model="queryParam.separateMonth" allow-clear placeholder="请输入归档月份"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="归档日">
- <a-input v-model="queryParam.separateDay" allow-clear placeholder="请输入归档日"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="是否启用 0:否 1:是">
- <a-input v-model="queryParam.isEnable" allow-clear placeholder="请输入是否启用 0:否 1:是"/>
- </a-form-item>
- </a-col>
- <a-col :md="8" :sm="24">
- <a-form-item label="更新时间">
- <a-date-picker style="width: 100%" placeholder="请选择更新时间" v-model="queryParam.updateDateDate" @change="onChangeupdateDate"/>
+ <a-form-item label="编辑状态">
+ <a-select style="width: 100%" v-model="queryParam.editorStatus" placeholder="请选择编辑状态">
+ <a-select-option v-for="(item,index) in editorStatusData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
+ </a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
@@ -125,7 +83,7 @@
:rowSelection="options.rowSelection"
>
<template class="table-operator" slot="operator" v-if="hasPerm('blogArticle:add')" >
- <a-button type="primary" v-if="hasPerm('blogArticle:add')" icon="plus" @click="$refs.addForm.add()">新增blog文章主体</a-button>
+ <a-button type="primary" v-if="hasPerm('blogArticle:add')" icon="plus" @click="$refs.addForm.add()">新增blog文章</a-button>
<a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('blogArticle:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button>
<x-down
v-if="hasPerm('blogArticle:export')"
@@ -133,6 +91,21 @@
@batchExport="batchExport"
/>
</template>
+ <span slot="titleScopedSlots" slot-scope="text">
+ <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
+ </span>
+ <span slot="articleFileTypeScopedSlots" slot-scope="text">
+ {{ 'blog_file_type' | dictType(text) }}
+ </span>
+ <span slot="isTopScopedSlots" slot-scope="text">
+ {{ 'blog_yes_or_no' | dictType(text) }}
+ </span>
+ <span slot="authStatusScopedSlots" slot-scope="text">
+ {{ 'blog_auth_status' | dictType(text) }}
+ </span>
+ <span slot="editorStatusScopedSlots" slot-scope="text">
+ {{ 'blog_editor_status' | dictType(text) }}
+ </span>
<span slot="action" slot-scope="text, record">
<a v-if="hasPerm('blogArticle:edit')" @click="$refs.editForm.edit(record)">编辑</a>
<a-divider type="vertical" v-if="hasPerm('blogArticle:edit') & hasPerm('blogArticle:delete')"/>
@@ -147,13 +120,14 @@
</div>
</template>
<script>
- import { STable, XDown } from '@/components'
+ import { STable, XDown, Ellipsis } from '@/components'
import moment from 'moment'
import { blogArticlePage, blogArticleDelete, blogArticleExport } from '@/api/modular/main/blogarticle/blogArticleManage'
import addForm from './addForm.vue'
import editForm from './editForm.vue'
export default {
components: {
+ Ellipsis,
STable,
addForm,
editForm,
@@ -170,32 +144,19 @@
{
title: '文章标题',
align: 'center',
- dataIndex: 'title'
+ dataIndex: 'title',
+ scopedSlots: { customRender: 'titleScopedSlots' }
},
{
- title: '文章文件id',
+ title: '文件类型',
align: 'center',
- dataIndex: 'articleFileId'
+ dataIndex: 'articleFileType',
+ scopedSlots: { customRender: 'articleFileTypeScopedSlots' }
},
{
- title: '文件类型 1:markdown 2:html',
- align: 'center',
- dataIndex: 'articleFileType'
- },
- {
- title: '文章分类id 0:没有分类',
+ title: '文章分类',
align: 'center',
dataIndex: 'articleTypeId'
- },
- {
- title: '文章引言',
- align: 'center',
- dataIndex: 'introduce'
- },
- {
- title: '封面文件地址(id)',
- align: 'center',
- dataIndex: 'coverFileId'
},
{
title: '上次编辑时间',
@@ -208,54 +169,37 @@
dataIndex: 'publishDate'
},
{
- title: '是否置顶 0:否 1:是',
+ title: '是否置顶',
align: 'center',
- dataIndex: 'isTop'
+ dataIndex: 'isTop',
+ scopedSlots: { customRender: 'isTopScopedSlots' }
},
{
- title: '置顶值(越小越靠前)',
+ title: '置顶值',
align: 'center',
dataIndex: 'topValue'
},
{
- title: '公开状态 1:公开 2:私密 3:密码授权',
+ title: '公开状态',
align: 'center',
- dataIndex: 'authStatus'
+ dataIndex: 'authStatus',
+ scopedSlots: { customRender: 'authStatusScopedSlots' }
},
{
- title: '授权密码(在密码授权状态时)',
+ title: '授权密码',
align: 'center',
dataIndex: 'authPassword'
},
{
- title: '编辑状态 0:草稿 1:发布',
+ title: '编辑状态',
align: 'center',
- dataIndex: 'editorStatus'
+ dataIndex: 'editorStatus',
+ scopedSlots: { customRender: 'editorStatusScopedSlots' }
},
{
- title: '归档年份(以初次发布时间为准)',
- align: 'center',
- dataIndex: 'separateYear'
- },
- {
- title: '归档月份',
- align: 'center',
- dataIndex: 'separateMonth'
- },
- {
- title: '归档日',
- align: 'center',
- dataIndex: 'separateDay'
- },
- {
- title: '是否启用 0:否 1:是',
+ title: '是否启用',
align: 'center',
dataIndex: 'isEnable'
- },
- {
- title: '更新时间',
- align: 'center',
- dataIndex: 'updateDate'
},
{
title: '创建时间',
@@ -270,6 +214,10 @@
return res.data
})
},
+ articleFileTypeData: [],
+ isTopData: [],
+ authStatusData: [],
+ editorStatusData: [],
selectedRowKeys: [],
selectedRows: [],
options: {
@@ -290,6 +238,14 @@
scopedSlots: { customRender: 'action' }
})
}
+ const articleFileTypeOption = this.$options
+ this.articleFileTypeData = articleFileTypeOption.filters['dictData']('blog_file_type')
+ const isTopOption = this.$options
+ this.isTopData = isTopOption.filters['dictData']('blog_yes_or_no')
+ const authStatusOption = this.$options
+ this.authStatusData = authStatusOption.filters['dictData']('blog_auth_status')
+ const editorStatusOption = this.$options
+ this.editorStatusData = editorStatusOption.filters['dictData']('blog_editor_status')
},
methods: {
moment,
@@ -297,25 +253,11 @@
* 查询参数组装
*/
switchingDate () {
- const queryParamlastEditorDate = this.queryParam.lastEditorDateDate
- if (queryParamlastEditorDate != null) {
- this.queryParam.lastEditorDate = moment(queryParamlastEditorDate).format('YYYY-MM-DD')
- if (queryParamlastEditorDate.length < 1) {
- delete this.queryParam.lastEditorDate
- }
- }
const queryParampublishDate = this.queryParam.publishDateDate
if (queryParampublishDate != null) {
this.queryParam.publishDate = moment(queryParampublishDate).format('YYYY-MM-DD')
if (queryParampublishDate.length < 1) {
delete this.queryParam.publishDate
- }
- }
- const queryParamupdateDate = this.queryParam.updateDateDate
- if (queryParamupdateDate != null) {
- this.queryParam.updateDate = moment(queryParamupdateDate).format('YYYY-MM-DD')
- if (queryParamupdateDate.length < 1) {
- delete this.queryParam.updateDate
}
}
const queryParamcreateDate = this.queryParam.createDateDate
@@ -357,14 +299,8 @@
toggleAdvanced () {
this.advanced = !this.advanced
},
- onChangelastEditorDate(date, dateString) {
- this.lastEditorDateDateString = dateString
- },
onChangepublishDate(date, dateString) {
this.publishDateDateString = dateString
- },
- onChangeupdateDate(date, dateString) {
- this.updateDateDateString = dateString
},
onChangecreateDate(date, dateString) {
this.createDateDateString = dateString
--
Gitblit v1.9.1