mirror of https://github.com/halo-dev/halo-admin
Refactor Login.vue.
ruibaby
parent
0b130907d7
commit
4e6a6b9fc0
|
|
@ -61,18 +61,6 @@
|
|||
<a-icon type="down" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<a-button
|
||||
type="primary"
|
||||
icon="message"
|
||||
v-if="tableListMode"
|
||||
@click="toggleTableMode"
|
||||
>会话模式</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
icon="ordered-list"
|
||||
v-else
|
||||
@click="toggleTableMode"
|
||||
>列表模式</a-button>
|
||||
</div>
|
||||
<div style="margin-top:15px">
|
||||
<a-table
|
||||
|
|
@ -103,15 +91,39 @@
|
|||
slot="action"
|
||||
slot-scope="text, record"
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
@click="handleEditComment(record.id)"
|
||||
>通过</a>
|
||||
<a-popconfirm
|
||||
:title="'你确定要通过该评论？'"
|
||||
@confirm="handleEditStatusClick(record.id,'RECYCLE')"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
v-if="record.status === 'AUDITING'"
|
||||
>
|
||||
<a href="javascript:;">通过</a>
|
||||
</a-popconfirm>
|
||||
|
||||
<a href="javascript:;" v-if="record.status === 'PUBLISHED'">回复</a>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
<a
|
||||
href="javascript:;"
|
||||
@click="handleDeleteComment(record.id)"
|
||||
>删除</a>
|
||||
|
||||
<a-popconfirm
|
||||
:title="'你确定要将该评论移到回收站？'"
|
||||
@confirm="handleEditStatusClick(record.id,'RECYCLE')"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
v-if="record.status === 'PUBLISHED' || record.status === 'AUDITING'"
|
||||
>
|
||||
<a href="javascript:;">回收站</a>
|
||||
</a-popconfirm>
|
||||
|
||||
<a-popconfirm
|
||||
:title="'你确定要永久删除该评论？'"
|
||||
@confirm="handleDeleteComment(record.id)"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
v-else-if="record.status === 'RECYCLE'"
|
||||
>
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-table>
|
||||
<div class="page-wrapper">
|
||||
|
|
@ -139,7 +151,8 @@ const columns = [
|
|||
},
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'content'
|
||||
dataIndex: 'content',
|
||||
scopedSlots: { customRender: 'content' }
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
|
|
@ -188,7 +201,6 @@ export default {
|
|||
selectedRows: [],
|
||||
comments: [],
|
||||
commentsLoading: false,
|
||||
tableListMode: true,
|
||||
commentStatus: commentApi.commentStatus
|
||||
}
|
||||
},
|
||||
|
|
@ -213,15 +225,11 @@ export default {
|
|||
if (isSearch) {
|
||||
this.queryParam.page = 0
|
||||
}
|
||||
if (this.tableListMode) {
|
||||
commentApi.query(this.queryParam).then(response => {
|
||||
this.comments = response.data.data.content
|
||||
this.pagination.total = response.data.data.total
|
||||
this.commentsLoading = false
|
||||
})
|
||||
} else {
|
||||
// TODO tree view
|
||||
}
|
||||
commentApi.query(this.queryParam).then(response => {
|
||||
this.comments = response.data.data.content
|
||||
this.pagination.total = response.data.data.total
|
||||
this.commentsLoading = false
|
||||
})
|
||||
},
|
||||
handleEditComment(id) {
|
||||
this.$message.success('编辑')
|
||||
|
|
@ -239,10 +247,6 @@ export default {
|
|||
this.queryParam.keyword = null
|
||||
this.queryParam.status = null
|
||||
this.loadComments()
|
||||
},
|
||||
toggleTableMode() {
|
||||
this.tableListMode = !this.tableListMode
|
||||
this.loadComments()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
:loading="postLoading"
|
||||
:bordered="false"
|
||||
title="最新文章"
|
||||
:bodyStyle="{ padding: '0px' }"
|
||||
>
|
||||
最新文章
|
||||
</a-card>
|
||||
|
|
@ -28,9 +27,47 @@
|
|||
:loading="commentLoading"
|
||||
:bordered="false"
|
||||
title="最新评论"
|
||||
:bodyStyle="{ padding: '0px' }"
|
||||
>
|
||||
最新评论
|
||||
<a-comment>
|
||||
<span slot="actions">Reply to</span>
|
||||
<a slot="author">Han Solo</a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
|
||||
alt="Han Solo"
|
||||
/>
|
||||
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
|
||||
<a-comment>
|
||||
<span slot="actions">Reply to</span>
|
||||
<a slot="author">Han Solo</a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
|
||||
alt="Han Solo"
|
||||
/>
|
||||
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
|
||||
<a-comment>
|
||||
<span slot="actions">Reply to</span>
|
||||
<a slot="author">Han Solo</a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
|
||||
alt="Han Solo"
|
||||
/>
|
||||
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
|
||||
</a-comment>
|
||||
<a-comment>
|
||||
<span slot="actions">Reply to</span>
|
||||
<a slot="author">Han Solo</a>
|
||||
<a-avatar
|
||||
slot="avatar"
|
||||
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
|
||||
alt="Han Solo"
|
||||
/>
|
||||
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
|
||||
</a-comment>
|
||||
</a-comment>
|
||||
</a-comment>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
|
|
@ -44,7 +81,6 @@
|
|||
:loading="commentLoading"
|
||||
:bordered="false"
|
||||
title="最新日志"
|
||||
:bodyStyle="{ padding: '0px' }"
|
||||
>
|
||||
最新日志
|
||||
</a-card>
|
||||
|
|
|
|||
|
|
@ -39,16 +39,15 @@
|
|||
/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
class="animated fadeInUp"
|
||||
:style="{'animation-delay': '0.3s'}"
|
||||
>
|
||||
<a-row>
|
||||
<a-button
|
||||
type="primary"
|
||||
:block="true"
|
||||
@click="handleLogin"
|
||||
class="animated fadeInUp"
|
||||
:style="{'animation-delay': '0.3s'}"
|
||||
>登录</a-button>
|
||||
</a-form-item>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,11 +100,15 @@ export default {
|
|||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
|
@ -113,21 +116,20 @@ body {
|
|||
margin-left: auto;
|
||||
}
|
||||
.loginForm {
|
||||
max-width: 380px;
|
||||
margin-top: 10%;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
margin: -160px 0 0 -160px;
|
||||
width: 320px;
|
||||
padding: 32px;
|
||||
box-shadow: 0px 0px 20px 0px rgba(76, 50, 50, 0.08);
|
||||
}
|
||||
.loginLogo {
|
||||
font-size: 56px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 500;
|
||||
color: #444;
|
||||
text-shadow: #b2baba 0.1em 0.1em 0.2em;
|
||||
}
|
||||
.loginBody {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
-o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue