blog的后端代码
view | history | commit | commitdiff
inleft
2022-02-15 d734432a8bbbf863dc3de305f56e831c56ac767a
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <a-card :bordered="false" :bodyStyle="tstyle">
4       <div class="table-page-search-wrapper" v-if="hasPerm('blogArticle:page')">
5         <a-form layout="inline">
6           <a-row :gutter="48">
7             <a-col :md="8" :sm="24">
8               <a-form-item label="文章标题">
9                 <a-input v-model="queryParam.title" allow-clear placeholder="请输入文章标题"/>
10               </a-form-item>
11             </a-col>
12             <a-col :md="8" :sm="24">
f1b087 13               <a-form-item label="文件类型">
I 14                 <a-select style="width: 100%" v-model="queryParam.articleFileType" placeholder="请选择文件类型">
15                   <a-select-option v-for="(item,index) in articleFileTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
16                 </a-select>
9bcb19 17               </a-form-item>
I 18             </a-col>
19             <template v-if="advanced">
20               <a-col :md="8" :sm="24">
f1b087 21                 <a-form-item label="文章分类">
I 22                   <a-input v-model="queryParam.articleTypeId" allow-clear placeholder="请输入文章分类"/>
9bcb19 23                 </a-form-item>
I 24               </a-col>
25               <a-col :md="8" :sm="24">
26                 <a-form-item label="文章引言">
27                   <a-input v-model="queryParam.introduce" allow-clear placeholder="请输入文章引言"/>
28                 </a-form-item>
29               </a-col>
30               <a-col :md="8" :sm="24">
31                 <a-form-item label="发布时间">
32                   <a-date-picker style="width: 100%" placeholder="请选择发布时间" v-model="queryParam.publishDateDate" @change="onChangepublishDate"/>
33                 </a-form-item>
34               </a-col>
35               <a-col :md="8" :sm="24">
f1b087 36                 <a-form-item label="是否置顶">
I 37                   <a-select style="width: 100%" v-model="queryParam.isTop" placeholder="请选择是否置顶">
38                     <a-select-option v-for="(item,index) in isTopData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
39                   </a-select>
9bcb19 40                 </a-form-item>
I 41               </a-col>
42               <a-col :md="8" :sm="24">
f1b087 43                 <a-form-item label="公开状态">
I 44                   <a-select style="width: 100%" v-model="queryParam.authStatus" placeholder="请选择公开状态">
45                     <a-select-option v-for="(item,index) in authStatusData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
46                   </a-select>
9bcb19 47                 </a-form-item>
I 48               </a-col>
49               <a-col :md="8" :sm="24">
f1b087 50                 <a-form-item label="编辑状态">
I 51                   <a-select style="width: 100%" v-model="queryParam.editorStatus" placeholder="请选择编辑状态">
52                     <a-select-option v-for="(item,index) in editorStatusData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
53                   </a-select>
9bcb19 54                 </a-form-item>
I 55               </a-col>
56               <a-col :md="8" :sm="24">
57                 <a-form-item label="创建时间">
58                   <a-date-picker style="width: 100%" placeholder="请选择创建时间" v-model="queryParam.createDateDate" @change="onChangecreateDate"/>
59                 </a-form-item>
60               </a-col>
61             </template>
62             <a-col :md="8" :sm="24" >
63               <span class="table-page-search-submitButtons">
64                 <a-button type="primary" @click="$refs.table.refresh(true)" >查询</a-button>
65                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
66                 <a @click="toggleAdvanced" style="margin-left: 8px">
67                   {{ advanced ? '收起' : '展开' }}
68                   <a-icon :type="advanced ? 'up' : 'down'"/>
69                 </a>
70               </span>
71             </a-col>
72           </a-row>
73         </a-form>
74       </div>
75     </a-card>
76     <a-card :bordered="false">
77       <s-table
78         ref="table"
79         :columns="columns"
80         :data="loadData"
81         :alert="options.alert"
82         :rowKey="(record) => record.id"
83         :rowSelection="options.rowSelection"
84       >
85         <template class="table-operator" slot="operator" v-if="hasPerm('blogArticle:add')" >
f1b087 86           <a-button type="primary" v-if="hasPerm('blogArticle:add')" icon="plus" @click="$refs.addForm.add()">新增blog文章</a-button>
9bcb19 87           <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('blogArticle:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button>
I 88           <x-down
89             v-if="hasPerm('blogArticle:export')"
90             ref="batchExport"
91             @batchExport="batchExport"
92           />
93         </template>
f1b087 94         <span slot="titleScopedSlots" slot-scope="text">
I 95           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
96         </span>
97         <span slot="articleFileTypeScopedSlots" slot-scope="text">
98           {{ 'blog_file_type' | dictType(text) }}
99         </span>
100         <span slot="isTopScopedSlots" slot-scope="text">
101           {{ 'blog_yes_or_no' | dictType(text) }}
102         </span>
103         <span slot="authStatusScopedSlots" slot-scope="text">
104           {{ 'blog_auth_status' | dictType(text) }}
105         </span>
106         <span slot="editorStatusScopedSlots" slot-scope="text">
107           {{ 'blog_editor_status' | dictType(text) }}
108         </span>
9bcb19 109         <span slot="action" slot-scope="text, record">
I 110           <a v-if="hasPerm('blogArticle:edit')" @click="$refs.editForm.edit(record)">编辑</a>
111           <a-divider type="vertical" v-if="hasPerm('blogArticle:edit') & hasPerm('blogArticle:delete')"/>
112           <a-popconfirm v-if="hasPerm('blogArticle:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
113             <a>删除</a>
114           </a-popconfirm>
115         </span>
116       </s-table>
117       <add-form ref="addForm" @ok="handleOk" />
118       <edit-form ref="editForm" @ok="handleOk" />
119     </a-card>
120   </div>
121 </template>
122 <script>
f1b087 123   import { STable, XDown, Ellipsis } from '@/components'
9bcb19 124   import moment from 'moment'
I 125   import { blogArticlePage, blogArticleDelete, blogArticleExport } from '@/api/modular/main/blogarticle/blogArticleManage'
126   import addForm from './addForm.vue'
127   import editForm from './editForm.vue'
128   export default {
129     components: {
f1b087 130       Ellipsis,
9bcb19 131       STable,
I 132       addForm,
133       editForm,
134       XDown
135     },
136     data () {
137       return {
138         // 高级搜索 展开/关闭
139         advanced: false,
140         // 查询参数
141         queryParam: {},
142         // 表头
143         columns: [
144           {
145             title: '文章标题',
146             align: 'center',
f1b087 147             dataIndex: 'title',
I 148             scopedSlots: { customRender: 'titleScopedSlots' }
9bcb19 149           },
I 150           {
f1b087 151             title: '文件类型',
9bcb19 152             align: 'center',
f1b087 153             dataIndex: 'articleFileType',
I 154             scopedSlots: { customRender: 'articleFileTypeScopedSlots' }
9bcb19 155           },
I 156           {
f1b087 157             title: '文章分类',
9bcb19 158             align: 'center',
I 159             dataIndex: 'articleTypeId'
160           },
161           {
162             title: '上次编辑时间',
163             align: 'center',
164             dataIndex: 'lastEditorDate'
165           },
166           {
167             title: '发布时间',
168             align: 'center',
169             dataIndex: 'publishDate'
170           },
171           {
f1b087 172             title: '是否置顶',
9bcb19 173             align: 'center',
f1b087 174             dataIndex: 'isTop',
I 175             scopedSlots: { customRender: 'isTopScopedSlots' }
9bcb19 176           },
I 177           {
f1b087 178             title: '置顶值',
9bcb19 179             align: 'center',
I 180             dataIndex: 'topValue'
181           },
182           {
f1b087 183             title: '公开状态',
9bcb19 184             align: 'center',
f1b087 185             dataIndex: 'authStatus',
I 186             scopedSlots: { customRender: 'authStatusScopedSlots' }
9bcb19 187           },
I 188           {
f1b087 189             title: '授权密码',
9bcb19 190             align: 'center',
I 191             dataIndex: 'authPassword'
192           },
193           {
f1b087 194             title: '编辑状态',
9bcb19 195             align: 'center',
f1b087 196             dataIndex: 'editorStatus',
I 197             scopedSlots: { customRender: 'editorStatusScopedSlots' }
9bcb19 198           },
I 199           {
f1b087 200             title: '是否启用',
9bcb19 201             align: 'center',
I 202             dataIndex: 'isEnable'
203           },
204           {
205             title: '创建时间',
206             align: 'center',
207             dataIndex: 'createDate'
208           }
209         ],
210         tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
211         // 加载数据方法 必须为 Promise 对象
212         loadData: parameter => {
213           return blogArticlePage(Object.assign(parameter, this.switchingDate())).then((res) => {
214             return res.data
215           })
216         },
f1b087 217         articleFileTypeData: [],
I 218         isTopData: [],
219         authStatusData: [],
220         editorStatusData: [],
9bcb19 221         selectedRowKeys: [],
I 222         selectedRows: [],
223         options: {
224           alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
225           rowSelection: {
226             selectedRowKeys: this.selectedRowKeys,
227             onChange: this.onSelectChange
228           }
229         }
230       }
231     },
232     created () {
233       if (this.hasPerm('blogArticle:edit') || this.hasPerm('blogArticle:delete')) {
234         this.columns.push({
235           title: '操作',
236           width: '150px',
237           dataIndex: 'action',
238           scopedSlots: { customRender: 'action' }
239         })
240       }
f1b087 241       const articleFileTypeOption = this.$options
I 242       this.articleFileTypeData = articleFileTypeOption.filters['dictData']('blog_file_type')
243       const isTopOption = this.$options
244       this.isTopData = isTopOption.filters['dictData']('blog_yes_or_no')
245       const authStatusOption = this.$options
246       this.authStatusData = authStatusOption.filters['dictData']('blog_auth_status')
247       const editorStatusOption = this.$options
248       this.editorStatusData = editorStatusOption.filters['dictData']('blog_editor_status')
9bcb19 249     },
I 250     methods: {
251       moment,
252       /**
253        * 查询参数组装
254        */
255       switchingDate () {
256         const queryParampublishDate = this.queryParam.publishDateDate
257         if (queryParampublishDate != null) {
258             this.queryParam.publishDate = moment(queryParampublishDate).format('YYYY-MM-DD')
259             if (queryParampublishDate.length < 1) {
260                 delete this.queryParam.publishDate
261             }
262         }
263         const queryParamcreateDate = this.queryParam.createDateDate
264         if (queryParamcreateDate != null) {
265             this.queryParam.createDate = moment(queryParamcreateDate).format('YYYY-MM-DD')
266             if (queryParamcreateDate.length < 1) {
267                 delete this.queryParam.createDate
268             }
269         }
270         const obj = JSON.parse(JSON.stringify(this.queryParam))
271         return obj
272       },
273       /**
274        * 单个删除
275        */
276       singleDelete (record) {
277         const param = [{ 'id': record.id }]
278         this.blogArticleDelete(param)
279       },
280       /**
281        * 批量删除
282        */
283       batchDelete () {
284         const paramIds = this.selectedRowKeys.map((d) => {
285             return { 'id': d }
286         })
287         this.blogArticleDelete(paramIds)
288       },
289       blogArticleDelete (record) {
290         blogArticleDelete(record).then((res) => {
291           if (res.success) {
292             this.$message.success('删除成功')
293             this.$refs.table.clearRefreshSelected()
294           } else {
295             this.$message.error('删除失败') // + res.message
296           }
297         })
298       },
299       toggleAdvanced () {
300         this.advanced = !this.advanced
301       },
302       onChangepublishDate(date, dateString) {
303         this.publishDateDateString = dateString
304       },
305       onChangecreateDate(date, dateString) {
306         this.createDateDateString = dateString
307       },
308       /**
309        * 批量导出
310        */
311       batchExport () {
312         const paramIds = this.selectedRowKeys.map((d) => {
313             return { 'id': d }
314         })
315         blogArticleExport(paramIds).then((res) => {
316             this.$refs.batchExport.downloadfile(res)
317         })
318       },
319       handleOk () {
320         this.$refs.table.refresh()
321       },
322       onSelectChange (selectedRowKeys, selectedRows) {
323         this.selectedRowKeys = selectedRowKeys
324         this.selectedRows = selectedRows
325       }
326     }
327   }
328 </script>
329 <style lang="less">
330   .table-operator {
331     margin-bottom: 18px;
332   }
333   button {
334     margin-right: 8px;
335   }
336 </style>