mirror of https://github.com/halo-dev/halo-admin
Link page.
parent
dfa4879d57
commit
d95ed4e6b4
|
@ -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
|
|
@ -2,13 +2,9 @@
|
||||||
<div class="setting-drawer" ref="settingDrawer">
|
<div class="setting-drawer" ref="settingDrawer">
|
||||||
<a-drawer
|
<a-drawer
|
||||||
width="300"
|
width="300"
|
||||||
placement="right"
|
closable
|
||||||
:closable="true"
|
|
||||||
@close="onClose"
|
@close="onClose"
|
||||||
:visible="visible"
|
:visible="visible"
|
||||||
:getContainer="() => $refs.settingDrawer"
|
|
||||||
:style="{}"
|
|
||||||
:mask="false"
|
|
||||||
:zIndex="9999"
|
:zIndex="9999"
|
||||||
>
|
>
|
||||||
<div class="setting-drawer-index-content">
|
<div class="setting-drawer-index-content">
|
||||||
|
@ -168,17 +164,13 @@ export default {
|
||||||
mixins: [mixin, mixinDevice],
|
mixins: [mixin, mixinDevice],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: true,
|
visible: false,
|
||||||
colorList,
|
colorList,
|
||||||
baseConfig: Object.assign({}, config)
|
baseConfig: Object.assign({}, config)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {},
|
watch: {},
|
||||||
mounted() {
|
mounted() {
|
||||||
const vm = this
|
|
||||||
setTimeout(() => {
|
|
||||||
vm.visible = false
|
|
||||||
}, 16)
|
|
||||||
// 当主题色不是默认色时,才进行主题编译
|
// 当主题色不是默认色时,才进行主题编译
|
||||||
if (this.primaryColor !== config.primaryColor) {
|
if (this.primaryColor !== config.primaryColor) {
|
||||||
updateTheme(this.primaryColor)
|
updateTheme(this.primaryColor)
|
||||||
|
|
|
@ -10,10 +10,10 @@
|
||||||
:style="{ 'padding-bottom': '12px' }">
|
:style="{ 'padding-bottom': '12px' }">
|
||||||
<a-card title="添加菜单">
|
<a-card title="添加菜单">
|
||||||
<a-form layout="horizontal">
|
<a-form layout="horizontal">
|
||||||
<a-form-item label="名称:" help="*页面上所显示的名称">
|
<a-form-item label="名称:" help="* 页面上所显示的名称">
|
||||||
<a-input v-model="menuToCreate.name" />
|
<a-input v-model="menuToCreate.name" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="路径:" help="*菜单的路径">
|
<a-form-item label="路径:" help="* 菜单的路径">
|
||||||
<a-input v-model="menuToCreate.url" />
|
<a-input v-model="menuToCreate.url" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="上级菜单:">
|
<a-form-item label="上级菜单:">
|
||||||
|
@ -24,7 +24,7 @@
|
||||||
<a-form-item label="排序编号:">
|
<a-form-item label="排序编号:">
|
||||||
<a-input type="number" v-model="menuToCreate.sort" />
|
<a-input type="number" v-model="menuToCreate.sort" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="图标:" help="*请根据主题的支持选填">
|
<a-form-item label="图标:" help="* 请根据主题的支持选填">
|
||||||
<a-input v-model="menuToCreate.icon" />
|
<a-input v-model="menuToCreate.icon" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="打开方式:">
|
<a-form-item label="打开方式:">
|
||||||
|
|
|
@ -5,11 +5,20 @@
|
||||||
<div class="card-container">
|
<div class="card-container">
|
||||||
<a-tabs type="card">
|
<a-tabs type="card">
|
||||||
<a-tab-pane tab="内置页面" key="internal">
|
<a-tab-pane tab="内置页面" key="internal">
|
||||||
内置页面
|
<a-table :columns="internalColumns" :dataSource="internalPages" :pagination="false">
|
||||||
</a-tab-pane>
|
<span slot="action" slot-scope="text, record">
|
||||||
<a-tab-pane tab="自定义页面" key="custom">
|
<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>
|
||||||
|
<a-tab-pane tab="自定义页面" key="custom">自定义页面</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
@ -18,7 +27,50 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -1,9 +1,128 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -13,13 +13,13 @@
|
||||||
<a-form layout="horizontal">
|
<a-form layout="horizontal">
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="名称:"
|
label="名称:"
|
||||||
help="*页面上所显示的名称"
|
help="* 页面上所显示的名称"
|
||||||
>
|
>
|
||||||
<a-input v-model="categoryToCreate.name" />
|
<a-input v-model="categoryToCreate.name" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="路径名称:"
|
label="路径名称:"
|
||||||
help="*这是文章路径上显示的名称,最好为英文"
|
help="* 这是文章路径上显示的名称,最好为英文"
|
||||||
>
|
>
|
||||||
<a-input v-model="categoryToCreate.slugNames" />
|
<a-input v-model="categoryToCreate.slugNames" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="描述:"
|
label="描述:"
|
||||||
help="*分类描述,部分主题可显示"
|
help="* 分类描述,部分主题可显示"
|
||||||
>
|
>
|
||||||
<a-input
|
<a-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
|
|
|
@ -10,10 +10,10 @@
|
||||||
:style="{ 'padding-bottom': '12px' }">
|
:style="{ 'padding-bottom': '12px' }">
|
||||||
<a-card title="添加标签">
|
<a-card title="添加标签">
|
||||||
<a-form layout="horizontal">
|
<a-form layout="horizontal">
|
||||||
<a-form-item label="名称:" help="*页面上所显示的名称">
|
<a-form-item label="名称:" help="* 页面上所显示的名称">
|
||||||
<a-input v-model="tagToCreate.name" />
|
<a-input v-model="tagToCreate.name" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="路径名称:" help="*这是文章路径上显示的名称,最好为英文">
|
<a-form-item label="路径名称:" help="* 这是文章路径上显示的名称,最好为英文">
|
||||||
<a-input v-model="tagToCreate.slugName" />
|
<a-input v-model="tagToCreate.slugName" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
|
|
Loading…
Reference in New Issue