Link page.

pull/9/head
ruibaby 2019-04-11 22:40:24 +08:00
parent dfa4879d57
commit d95ed4e6b4
7 changed files with 217 additions and 25 deletions

29
src/api/link.js Normal file
View File

@ -0,0 +1,29 @@
import service from '@/utils/service'
const baseUrl = '/admin/api/links'
const linkApi = {}
linkApi.listAll = () => {
return service({
url: `${baseUrl}`,
method: 'get'
})
}
linkApi.create = (link) => {
return service({
url: baseUrl,
data: link,
method: 'post'
})
}
linkApi.delete = linkId => {
return service({
url: `${baseUrl}/${linkId}`,
method: 'delete'
})
}
export default linkApi

View File

@ -2,13 +2,9 @@
<div class="setting-drawer" ref="settingDrawer">
<a-drawer
width="300"
placement="right"
:closable="true"
closable
@close="onClose"
:visible="visible"
:getContainer="() => $refs.settingDrawer"
:style="{}"
:mask="false"
:zIndex="9999"
>
<div class="setting-drawer-index-content">
@ -168,17 +164,13 @@ export default {
mixins: [mixin, mixinDevice],
data() {
return {
visible: true,
visible: false,
colorList,
baseConfig: Object.assign({}, config)
}
},
watch: {},
mounted() {
const vm = this
setTimeout(() => {
vm.visible = false
}, 16)
//
if (this.primaryColor !== config.primaryColor) {
updateTheme(this.primaryColor)

View File

@ -10,10 +10,10 @@
:style="{ 'padding-bottom': '12px' }">
<a-card title="添加菜单">
<a-form layout="horizontal">
<a-form-item label="名称:" help="*页面上所显示的名称">
<a-form-item label="名称:" help="* 页面上所显示的名称">
<a-input v-model="menuToCreate.name" />
</a-form-item>
<a-form-item label="路径:" help="*菜单的路径">
<a-form-item label="路径:" help="* 菜单的路径">
<a-input v-model="menuToCreate.url" />
</a-form-item>
<a-form-item label="上级菜单:">
@ -24,7 +24,7 @@
<a-form-item label="排序编号:">
<a-input type="number" v-model="menuToCreate.sort" />
</a-form-item>
<a-form-item label="图标:" help="*请根据主题的支持选填">
<a-form-item label="图标:" help="* 请根据主题的支持选填">
<a-input v-model="menuToCreate.icon" />
</a-form-item>
<a-form-item label="打开方式:">

View File

@ -5,11 +5,20 @@
<div class="card-container">
<a-tabs type="card">
<a-tab-pane tab="内置页面" key="internal">
内置页面
</a-tab-pane>
<a-tab-pane tab="自定义页面" key="custom">
自定义页面
<a-table :columns="internalColumns" :dataSource="internalPages" :pagination="false">
<span slot="action" slot-scope="text, record">
<a href="javascript:;" @click="viewPage(record.id)"></a>
<a-divider type="vertical"/>
<router-link :to="{name:'LinkList'}" v-if="record.id==1">
<a href="javascript:void(0);">编辑</a>
</router-link>
<router-link :to="{name:'GalleryList'}" v-if="record.id==2">
<a href="javascript:void(0);">编辑</a>
</router-link>
</span>
</a-table>
</a-tab-pane>
<a-tab-pane tab="自定义页面" key="custom">自定义页面</a-tab-pane>
</a-tabs>
</div>
</a-col>
@ -18,7 +27,50 @@
</template>
<script>
export default {}
const internalColumns = [
{
title: '页面名称',
dataIndex: 'name'
},
{
title: '访问路径',
dataIndex: 'url'
},
{
title: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' }
}
]
const internalPages = [
{
id: '1',
name: '友情链接',
url: '/links'
},
{
id: '2',
name: '图库页面',
url: '/galleries'
}
]
export default {
data() {
return {
internalColumns,
internalPages
}
},
methods: {
editPage(id) {
this.$message.success('编辑' + id)
},
viewPage(id) {
this.$message.success('查看' + id)
}
}
}
</script>
<style>

View File

@ -1,9 +1,128 @@
<template>
<div class="page-header-index-wide">Link List</div>
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24" :style="{ 'padding-bottom': '12px' }">
<a-card title="添加友情链接">
<a-form layout="horizontal">
<a-form-item label="网站名称:">
<a-input v-model="linkToCreate.name"/>
</a-form-item>
<a-form-item label="网站地址:" help="* 需要加上 http://">
<a-input v-model="linkToCreate.url"/>
</a-form-item>
<a-form-item label="Logo">
<a-input v-model="linkToCreate.logo"/>
</a-form-item>
<a-form-item label="分组:" help="* 非必填">
<a-input v-model="linkToCreate.team"/>
</a-form-item>
<a-form-item label="描述:">
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
v-model="linkToCreate.description"
/>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="createLink"></a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24" :style="{ 'padding-bottom': '12px' }">
<a-card title="所有友情链接">
<a-table :columns="columns" :dataSource="links" :loading="loading">
<template slot="url" slot-scope="text">
<a target="_blank" :href="text">{{ text }}</a>
</template>
<ellipsis :length="30" tooltip slot="name" slot-scope="text">{{ text }}</ellipsis>
<span slot="action" slot-scope="text, record">
<a href="javascript:;" @click="editLink(record.id)"></a>
<a-divider type="vertical"/>
<a-popconfirm
:title="'你确定要删除【' + record.name + '】链接?'"
@confirm="deleteLink(record.id)"
okText="确定"
cancelText="取消"
>
<a href="javascript:;">删除</a>
</a-popconfirm>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
export default {}
import { Ellipsis } from '@/components'
import linkApi from '@/api/link'
const columns = [
{
title: '名称',
dataIndex: 'name',
scopedSlots: { customRender: 'name' }
},
{
title: '网址',
dataIndex: 'url',
scopedSlots: { customRender: 'url' }
},
{
title: '分组',
dataIndex: 'team'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'action' }
}
]
export default {
components: {
Ellipsis
},
data() {
return {
data: [],
loading: true,
columns,
links: [],
linkToCreate: {}
}
},
created() {
this.loadLinks()
},
methods: {
loadLinks() {
linkApi.listAll().then(response => {
this.links = response.data.data
this.loading = false
})
},
createLink() {
linkApi.create(this.linkToCreate).then(response => {
this.loadLinks()
this.linkToCreate = {}
})
},
editLink(id) {
this.$message.success('编辑' + id)
},
deleteLink(id) {
linkApi.delete(id).then(response => {
this.$message.success('删除成功!')
this.loadLinks()
})
}
}
}
</script>
<style scoped>

View File

@ -13,13 +13,13 @@
<a-form layout="horizontal">
<a-form-item
label="名称:"
help="*页面上所显示的名称"
help="* 页面上所显示的名称"
>
<a-input v-model="categoryToCreate.name" />
</a-form-item>
<a-form-item
label="路径名称:"
help="*这是文章路径上显示的名称,最好为英文"
help="* 这是文章路径上显示的名称,最好为英文"
>
<a-input v-model="categoryToCreate.slugNames" />
</a-form-item>
@ -31,7 +31,7 @@
</a-form-item>
<a-form-item
label="描述:"
help="*分类描述,部分主题可显示"
help="* 分类描述,部分主题可显示"
>
<a-input
type="textarea"

View File

@ -10,10 +10,10 @@
:style="{ 'padding-bottom': '12px' }">
<a-card title="添加标签">
<a-form layout="horizontal">
<a-form-item label="名称:" help="*页面上所显示的名称">
<a-form-item label="名称:" help="* 页面上所显示的名称">
<a-input v-model="tagToCreate.name" />
</a-form-item>
<a-form-item label="路径名称:" help="*这是文章路径上显示的名称,最好为英文">
<a-form-item label="路径名称:" help="* 这是文章路径上显示的名称,最好为英文">
<a-input v-model="tagToCreate.slugName" />
</a-form-item>
<a-form-item>