blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
88f419 1 <template>
I 2   <div>
3     <a-card :bordered="false" :bodyStyle="tstyle">
4       <div class="table-page-search-wrapper" v-if="hasPerm('blogArticleComment: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-select style="width: 100%" v-model="queryParam.commentType" placeholder="请选择留言类型">
10                   <a-select-option v-for="(item,index) in commentTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
11                 </a-select>
12               </a-form-item>
13             </a-col>
14             <a-col :md="8" :sm="24">
15               <a-form-item label="文章id主键">
16                 <a-input v-model="queryParam.articleId" allow-clear placeholder="请输入文章id主键"/>
17               </a-form-item>
18             </a-col>
19             <template v-if="advanced">
20               <a-col :md="8" :sm="24">
21                 <a-form-item label="访客id(随机字符)">
22                   <a-input v-model="queryParam.visitorId" allow-clear placeholder="请输入访客id(随机字符)"/>
23                 </a-form-item>
24               </a-col>
25               <a-col :md="8" :sm="24">
26                 <a-form-item label="访客名称">
27                   <a-input v-model="queryParam.visitorNickName" allow-clear placeholder="请输入访客名称"/>
28                 </a-form-item>
29               </a-col>
30               <a-col :md="8" :sm="24">
31                 <a-form-item label="访客邮箱">
32                   <a-input v-model="queryParam.visitorEmail" allow-clear placeholder="请输入访客邮箱"/>
33                 </a-form-item>
34               </a-col>
35               <a-col :md="8" :sm="24">
36                 <a-form-item label="访客主页">
37                   <a-input v-model="queryParam.visitorHomePage" allow-clear placeholder="请输入访客主页"/>
38                 </a-form-item>
39               </a-col>
40               <a-col :md="8" :sm="24">
41                 <a-form-item label="是否已审核">
42                   <a-select style="width: 100%" v-model="queryParam.isCheck" placeholder="请选择是否已审核">
43                     <a-select-option v-for="(item,index) in isCheckData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
44                   </a-select>
45                 </a-form-item>
46               </a-col>
47               <a-col :md="8" :sm="24">
48                 <a-form-item label="公开状态">
49                   <a-select style="width: 100%" v-model="queryParam.authStatus" placeholder="请选择公开状态">
50                     <a-select-option v-for="(item,index) in authStatusData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
51                   </a-select>
52                 </a-form-item>
53               </a-col>
54               <a-col :md="8" :sm="24">
55                 <a-form-item label="是否启用">
56                   <a-select style="width: 100%" v-model="queryParam.isEnable" placeholder="请选择是否启用">
57                     <a-select-option v-for="(item,index) in isEnableData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
58                   </a-select>
59                 </a-form-item>
60               </a-col>
61               <a-col :md="8" :sm="24">
62                 <a-form-item label="创建时间">
63                   <a-date-picker style="width: 100%" placeholder="请选择创建时间" v-model="queryParam.createDateDate" @change="onChangecreateDate"/>
64                 </a-form-item>
65               </a-col>
66             </template>
67             <a-col :md="8" :sm="24" >
68               <span class="table-page-search-submitButtons">
69                 <a-button type="primary" @click="$refs.table.refresh(true)" >查询</a-button>
70                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
71                 <a @click="toggleAdvanced" style="margin-left: 8px">
72                   {{ advanced ? '收起' : '展开' }}
73                   <a-icon :type="advanced ? 'up' : 'down'"/>
74                 </a>
75               </span>
76             </a-col>
77           </a-row>
78         </a-form>
79       </div>
80     </a-card>
81     <a-card :bordered="false">
82       <s-table
83         ref="table"
84         :columns="columns"
85         :data="loadData"
86         :alert="options.alert"
87         :rowKey="(record) => record.id"
88         :rowSelection="options.rowSelection"
89       >
90         <template class="table-operator" slot="operator" v-if="hasPerm('blogArticleComment:add')" >
91           <a-button type="primary" v-if="hasPerm('blogArticleComment:add')" icon="plus" @click="$refs.addForm.add()">新增文章评论</a-button>
92           <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('blogArticleComment:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button>
93           <x-down
94             v-if="hasPerm('blogArticleComment:export')"
95             ref="batchExport"
96             @batchExport="batchExport"
97           />
98         </template>
99         <span slot="commentTypeScopedSlots" slot-scope="text">
100           {{ 'blog_comment_type' | dictType(text) }}
101         </span>
102         <span slot="isCheckScopedSlots" slot-scope="text">
103           {{ 'blog_yes_or_no' | dictType(text) }}
104         </span>
105         <span slot="authStatusScopedSlots" slot-scope="text">
106           {{ 'blog_auth_status' | dictType(text) }}
107         </span>
108         <span slot="isEnableScopedSlots" slot-scope="text">
109           {{ 'blog_yes_or_no' | dictType(text) }}
110         </span>
111         <span slot="action" slot-scope="text, record">
112           <a v-if="hasPerm('blogArticleComment:edit')" @click="$refs.editForm.edit(record)">编辑</a>
113           <a-divider type="vertical" v-if="hasPerm('blogArticleComment:edit') & hasPerm('blogArticleComment:delete')"/>
114           <a-popconfirm v-if="hasPerm('blogArticleComment:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
115             <a>删除</a>
116           </a-popconfirm>
117         </span>
118       </s-table>
119       <add-form ref="addForm" @ok="handleOk" />
120       <edit-form ref="editForm" @ok="handleOk" />
121     </a-card>
122   </div>
123 </template>
124 <script>
125   import { STable, XDown } from '@/components'
126   import moment from 'moment'
127   import { blogArticleCommentPage, blogArticleCommentDelete, blogArticleCommentExport } from '@/api/modular/main/blogarticlecomment/blogArticleCommentManage'
128   import addForm from './addForm.vue'
129   import editForm from './editForm.vue'
130   export default {
131     components: {
132       STable,
133       addForm,
134       editForm,
135       XDown
136     },
137     data () {
138       return {
139         // 高级搜索 展开/关闭
140         advanced: false,
141         // 查询参数
142         queryParam: {},
143         // 表头
144         columns: [
145           {
146             title: '留言类型',
147             align: 'center',
148             dataIndex: 'commentType',
149             scopedSlots: { customRender: 'commentTypeScopedSlots' }
150           },
151           {
152             title: '文章id主键',
153             align: 'center',
154             dataIndex: 'articleId'
155           },
156           {
157             title: '访客id(随机字符)',
158             align: 'center',
159             dataIndex: 'visitorId'
160           },
161           {
162             title: '访客名称',
163             align: 'center',
164             dataIndex: 'visitorNickName'
165           },
166           {
167             title: '访客邮箱',
168             align: 'center',
169             dataIndex: 'visitorEmail'
170           },
171           {
172             title: '访客主页',
173             align: 'center',
174             dataIndex: 'visitorHomePage'
175           },
176           {
177             title: '留言内容',
178             align: 'center',
179             dataIndex: 'commentContent'
180           },
181           {
182             title: '是否已审核',
183             align: 'center',
184             dataIndex: 'isCheck',
185             scopedSlots: { customRender: 'isCheckScopedSlots' }
186           },
187           {
188             title: '公开状态',
189             align: 'center',
190             dataIndex: 'authStatus',
191             scopedSlots: { customRender: 'authStatusScopedSlots' }
192           },
193           {
194             title: '是否启用',
195             align: 'center',
196             dataIndex: 'isEnable',
197             scopedSlots: { customRender: 'isEnableScopedSlots' }
198           },
199           {
200             title: '更新时间',
201             align: 'center',
202             dataIndex: 'updateDate'
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 blogArticleCommentPage(Object.assign(parameter, this.switchingDate())).then((res) => {
214             return res.data
215           })
216         },
217         commentTypeData: [],
218         isCheckData: [],
219         authStatusData: [],
220         isEnableData: [],
221         selectedRowKeys: [],
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('blogArticleComment:edit') || this.hasPerm('blogArticleComment:delete')) {
234         this.columns.push({
235           title: '操作',
236           width: '150px',
237           dataIndex: 'action',
238           scopedSlots: { customRender: 'action' }
239         })
240       }
241       const commentTypeOption = this.$options
242       this.commentTypeData = commentTypeOption.filters['dictData']('blog_comment_type')
243       const isCheckOption = this.$options
244       this.isCheckData = isCheckOption.filters['dictData']('blog_yes_or_no')
245       const authStatusOption = this.$options
246       this.authStatusData = authStatusOption.filters['dictData']('blog_auth_status')
247       const isEnableOption = this.$options
248       this.isEnableData = isEnableOption.filters['dictData']('blog_yes_or_no')
249     },
250     methods: {
251       moment,
252       /**
253        * 查询参数组装
254        */
255       switchingDate () {
256         const queryParamcreateDate = this.queryParam.createDateDate
257         if (queryParamcreateDate != null) {
258             this.queryParam.createDate = moment(queryParamcreateDate).format('YYYY-MM-DD')
259             if (queryParamcreateDate.length < 1) {
260                 delete this.queryParam.createDate
261             }
262         }
263         const obj = JSON.parse(JSON.stringify(this.queryParam))
264         return obj
265       },
266       /**
267        * 单个删除
268        */
269       singleDelete (record) {
270         const param = [{ 'id': record.id }]
271         this.blogArticleCommentDelete(param)
272       },
273       /**
274        * 批量删除
275        */
276       batchDelete () {
277         const paramIds = this.selectedRowKeys.map((d) => {
278             return { 'id': d }
279         })
280         this.blogArticleCommentDelete(paramIds)
281       },
282       blogArticleCommentDelete (record) {
283         blogArticleCommentDelete(record).then((res) => {
284           if (res.success) {
285             this.$message.success('删除成功')
286             this.$refs.table.clearRefreshSelected()
287           } else {
288             this.$message.error('删除失败') // + res.message
289           }
290         })
291       },
292       toggleAdvanced () {
293         this.advanced = !this.advanced
294       },
295       onChangecreateDate(date, dateString) {
296         this.createDateDateString = dateString
297       },
298       /**
299        * 批量导出
300        */
301       batchExport () {
302         const paramIds = this.selectedRowKeys.map((d) => {
303             return { 'id': d }
304         })
305         blogArticleCommentExport(paramIds).then((res) => {
306             this.$refs.batchExport.downloadfile(res)
307         })
308       },
309       handleOk () {
310         this.$refs.table.refresh()
311       },
312       onSelectChange (selectedRowKeys, selectedRows) {
313         this.selectedRowKeys = selectedRowKeys
314         this.selectedRows = selectedRows
315       }
316     }
317   }
318 </script>
319 <style lang="less">
320   .table-operator {
321     margin-bottom: 18px;
322   }
323   button {
324     margin-right: 8px;
325   }
326 </style>