07-4 笔记本页.md

<template>
<div class="notebooks">
<Card dis-hover>
<Button type="primary" ghost style='margin-bottom:16px' @click='openAddModal=true'>新建笔记本</Button>
<Modal v-model="openAddModal" width="360">
<p slot="header" style="color:#f60;text-align:center">
<Icon type="information-circled"></Icon>
<span>新建笔记本</span>
</p>
<div style="text-align:center">
<Input v-model="notebookTitle" size="large" placeholder="请输入笔记本标题"></Input>
</div>
<div slot="footer">
<Button type="success" size="large" long @click="addNotebook();openAddModal=false">确认</Button>
</div>
</Modal>
<Button type="primary" ghost style='margin-bottom:16px' @click="exportData">导出笔记</Button>
<Input @on-click="handleClick" class="search" style="width:300px;float: right" icon="ios-search" placeholder=" 支持名称搜索">

        </Input>
        <Table
            :columns="columns"
            ref="table"
            :data="notebooks.slice((this.currpage - 1) * 10, this.currpage * 10)"
            @on-row-click="handleRowClick"
            >
            </Table>
        <br>
        <Row type='flex' justify='end'>
            <Page
                :total="notebooks.length"
                :page-size="10"
                :current="currpage"
                @on-change = "handleChange"
            />
        </Row>
        <Modal v-model="openEditModal" width="360">
    <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>修改笔记本</span>
    </p>
    <div style="text-align:center">
        <Input ref='newNotebook' v-model="notebookTitle" size="large" placeholder="请输入笔记本标题"></Input>
    </div>
    <div slot="footer">
        <Button type="success" size="large" long  @click="onEdit();openEditModal=false">确认</Button>
    </div>
    </Modal>
</Card>

</div>

</template>
<script>
import Notebooks from '../apis/Notebooks'
export default {
data () {
return {
columns: [
{
title: '笔记本名称',
key: 'title',
render: (h, params) => {
return h('a', [
h('Icon', {
props: {
type: "ios-book",
size: '18px'
}
}),
${params.row.title}
]);
}
},
{
title: '创建日期',
key: 'createdAt',
sortable: true,
render: (h, params) => {
return h('div', [
h('Time', {
props: {
time: params.row.createdAt,
type: 'datetime'
}
})
// h("strong",params.row.createdAt)
]);
}
},
{
title: '笔记数量',
key: 'noteCounts'
},
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () =>{
event.stopPropagation()
this.onDelete(params.row.id)
}
}
},'删除'),
h('Button', {
props: {
type: 'success',
size: 'small'
},
on: {
click: () => {
event.stopPropagation()
this.openEditModal = true;
this.updateNotebookId = params.row.id
}
}
},'编辑')
// h("strong",params.row.createdAt)
]);
}
}
],
notebooks: [],
notebookTitle: "",
currpage: 1,
openAddModal: false,
openEditModal: false,
updateNotebookId: null
}
},
created(){
Notebooks.getNotebooks().then(res=>{
this.notebooks = res.data.reverse()
})
},
methods: {
handleChange(currpage){
this.currpage = currpage
},
handleRowClick(row){
// if简写
if(row.noteCounts===0) return this.router.push(/notes?id=${row.id})
},
handleClick(){
console.log('search-click')
},
exportData(){
this.Message.success('笔记本创建成功')
this.notebookTitle = ""
Notebooks.getNotebooks().then(res=>{
this.notebooks = res.data.reverse()
})
}).catch(err=>{
this.Message.success(res.msg)
this.notebooks.find(item=>item.id===this.updateNotebookId).title= this.notebookTitle;
this.notebookTitle = ""
})
},
onDelete(id){
Notebooks.deleteNotebook({notebookId:id}).then(res=>{
this.Message.error(err.msg)
})
}
}
}
</script>

<style lang="less" >
.search .ivu-input {
border-radius: 36px;
}
.ivu-btn-small {
margin-right: 10px;
}
</style>