blog的后端代码
view | history | commit | commitdiff
inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
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>
91dc6c 103         <span slot="isTopScopedSlots" slot-scope="text">
I 104           {{ 'blog_yes_or_no' | dictType(text) }}
105         </span>
f1b087 106         <span slot="authStatusScopedSlots" slot-scope="text">
I 107           {{ 'blog_auth_status' | dictType(text) }}
108         </span>
109         <span slot="editorStatusScopedSlots" slot-scope="text">
110           {{ 'blog_editor_status' | dictType(text) }}
91dc6c 111         </span>
I 112         <span slot="isEnableScopedSlots" slot-scope="text">
113           {{ 'blog_yes_or_no' | dictType(text) }}
f1b087 114         </span>
9bcb19 115         <span slot="action" slot-scope="text, record">
I 116           <a v-if="hasPerm('blogArticle:edit')" @click="$refs.editForm.edit(record)">编辑</a>
117           <a-divider type="vertical" v-if="hasPerm('blogArticle:edit') & hasPerm('blogArticle:delete')"/>
118           <a-popconfirm v-if="hasPerm('blogArticle:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
119             <a>删除</a>
120           </a-popconfirm>
121         </span>
122       </s-table>
123       <add-form ref="addForm" @ok="handleOk" />
124       <edit-form ref="editForm" @ok="handleOk" />
125     </a-card>
126   </div>
127 </template>
128 <script>
f1b087 129   import { STable, XDown, Ellipsis } from '@/components'
9bcb19 130   import moment from 'moment'
I 131   import { blogArticlePage, blogArticleDelete, blogArticleExport } from '@/api/modular/main/blogarticle/blogArticleManage'
132   import addForm from './addForm.vue'
133   import editForm from './editForm.vue'
134   export default {
135     components: {
f1b087 136       Ellipsis,
9bcb19 137       STable,
I 138       addForm,
139       editForm,
140       XDown
141     },
142     data () {
143       return {
144         // 高级搜索 展开/关闭
145         advanced: false,
146         // 查询参数
147         queryParam: {},
148         // 表头
149         columns: [
150           {
151             title: '文章标题',
152             align: 'center',
f1b087 153             dataIndex: 'title',
I 154             scopedSlots: { customRender: 'titleScopedSlots' }
9bcb19 155           },
I 156           {
f1b087 157             title: '文件类型',
9bcb19 158             align: 'center',
f1b087 159             dataIndex: 'articleFileType',
I 160             scopedSlots: { customRender: 'articleFileTypeScopedSlots' }
9bcb19 161           },
I 162           {
f1b087 163             title: '文章分类',
9bcb19 164             align: 'center',
I 165             dataIndex: 'articleTypeId'
166           },
167           {
168             title: '上次编辑时间',
169             align: 'center',
170             dataIndex: 'lastEditorDate'
171           },
172           {
173             title: '发布时间',
174             align: 'center',
175             dataIndex: 'publishDate'
176           },
177           {
f1b087 178             title: '是否置顶',
9bcb19 179             align: 'center',
f1b087 180             dataIndex: 'isTop',
I 181             scopedSlots: { customRender: 'isTopScopedSlots' }
9bcb19 182           },
I 183           {
f1b087 184             title: '置顶值',
9bcb19 185             align: 'center',
I 186             dataIndex: 'topValue'
187           },
188           {
f1b087 189             title: '公开状态',
9bcb19 190             align: 'center',
f1b087 191             dataIndex: 'authStatus',
I 192             scopedSlots: { customRender: 'authStatusScopedSlots' }
9bcb19 193           },
I 194           {
f1b087 195             title: '授权密码',
9bcb19 196             align: 'center',
I 197             dataIndex: 'authPassword'
198           },
199           {
f1b087 200             title: '编辑状态',
9bcb19 201             align: 'center',
f1b087 202             dataIndex: 'editorStatus',
I 203             scopedSlots: { customRender: 'editorStatusScopedSlots' }
9bcb19 204           },
I 205           {
f1b087 206             title: '是否启用',
9bcb19 207             align: 'center',
91dc6c 208             dataIndex: 'isEnable',
I 209            scopedSlots: { customRender: 'isEnableScopedSlots' }
9bcb19 210           },
I 211           {
212             title: '创建时间',
213             align: 'center',
214             dataIndex: 'createDate'
215           }
216         ],
217         tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
218         // 加载数据方法 必须为 Promise 对象
219         loadData: parameter => {
220           return blogArticlePage(Object.assign(parameter, this.switchingDate())).then((res) => {
221             return res.data
222           })
223         },
f1b087 224         articleFileTypeData: [],
I 225         isTopData: [],
226         authStatusData: [],
227         editorStatusData: [],
9bcb19 228         selectedRowKeys: [],
I 229         selectedRows: [],
230         options: {
231           alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
232           rowSelection: {
233             selectedRowKeys: this.selectedRowKeys,
234             onChange: this.onSelectChange
235           }
236         }
237       }
238     },
239     created () {
240       if (this.hasPerm('blogArticle:edit') || this.hasPerm('blogArticle:delete')) {
241         this.columns.push({
242           title: '操作',
243           width: '150px',
244           dataIndex: 'action',
245           scopedSlots: { customRender: 'action' }
246         })
247       }
f1b087 248       const articleFileTypeOption = this.$options
I 249       this.articleFileTypeData = articleFileTypeOption.filters['dictData']('blog_file_type')
250       const isTopOption = this.$options
251       this.isTopData = isTopOption.filters['dictData']('blog_yes_or_no')
252       const authStatusOption = this.$options
253       this.authStatusData = authStatusOption.filters['dictData']('blog_auth_status')
254       const editorStatusOption = this.$options
255       this.editorStatusData = editorStatusOption.filters['dictData']('blog_editor_status')
9bcb19 256     },
I 257     methods: {
258       moment,
259       /**
260        * 查询参数组装
261        */
262       switchingDate () {
263         const queryParampublishDate = this.queryParam.publishDateDate
264         if (queryParampublishDate != null) {
265             this.queryParam.publishDate = moment(queryParampublishDate).format('YYYY-MM-DD')
266             if (queryParampublishDate.length < 1) {
267                 delete this.queryParam.publishDate
268             }
269         }
270         const queryParamcreateDate = this.queryParam.createDateDate
271         if (queryParamcreateDate != null) {
272             this.queryParam.createDate = moment(queryParamcreateDate).format('YYYY-MM-DD')
273             if (queryParamcreateDate.length < 1) {
274                 delete this.queryParam.createDate
275             }
276         }
277         const obj = JSON.parse(JSON.stringify(this.queryParam))
278         return obj
279       },
280       /**
281        * 单个删除
282        */
283       singleDelete (record) {
284         const param = [{ 'id': record.id }]
285         this.blogArticleDelete(param)
286       },
287       /**
288        * 批量删除
289        */
290       batchDelete () {
291         const paramIds = this.selectedRowKeys.map((d) => {
292             return { 'id': d }
293         })
294         this.blogArticleDelete(paramIds)
295       },
296       blogArticleDelete (record) {
297         blogArticleDelete(record).then((res) => {
298           if (res.success) {
299             this.$message.success('删除成功')
300             this.$refs.table.clearRefreshSelected()
301           } else {
302             this.$message.error('删除失败') // + res.message
303           }
304         })
305       },
306       toggleAdvanced () {
307         this.advanced = !this.advanced
308       },
309       onChangepublishDate(date, dateString) {
310         this.publishDateDateString = dateString
311       },
312       onChangecreateDate(date, dateString) {
313         this.createDateDateString = dateString
314       },
315       /**
316        * 批量导出
317        */
318       batchExport () {
319         const paramIds = this.selectedRowKeys.map((d) => {
320             return { 'id': d }
321         })
322         blogArticleExport(paramIds).then((res) => {
323             this.$refs.batchExport.downloadfile(res)
324         })
325       },
326       handleOk () {
327         this.$refs.table.refresh()
328       },
329       onSelectChange (selectedRowKeys, selectedRows) {
330         this.selectedRowKeys = selectedRowKeys
331         this.selectedRows = selectedRows
332       }
333     }
334   }
335 </script>
336 <style lang="less">
337   .table-operator {
338     margin-bottom: 18px;
339   }
340   button {
341     margin-right: 8px;
342   }
343 </style>