From d95ed4e6b4067535cd6a90243732500214351c52 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Thu, 11 Apr 2019 22:40:24 +0800
Subject: [PATCH] Link page.

---
 src/api/link.js                               |  29 +++++
 .../SettingDrawer/SettingDrawer.vue           |  12 +-
 src/views/interface/MenuList.vue              |   6 +-
 src/views/page/PageList.vue                   |  62 ++++++++-
 src/views/page/internal/LinkList.vue          | 123 +++++++++++++++++-
 src/views/post/CategoryList.vue               |   6 +-
 src/views/post/TagList.vue                    |   4 +-
 7 files changed, 217 insertions(+), 25 deletions(-)
 create mode 100644 src/api/link.js

diff --git a/src/api/link.js b/src/api/link.js
new file mode 100644
index 00000000..73774984
--- /dev/null
+++ b/src/api/link.js
@@ -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
diff --git a/src/components/SettingDrawer/SettingDrawer.vue b/src/components/SettingDrawer/SettingDrawer.vue
index c23fdc9e..331e1186 100644
--- a/src/components/SettingDrawer/SettingDrawer.vue
+++ b/src/components/SettingDrawer/SettingDrawer.vue
@@ -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)
diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue
index 64486fec..dbc924a0 100644
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@@ -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="打开方式：">
diff --git a/src/views/page/PageList.vue b/src/views/page/PageList.vue
index 0a84365b..7ed46f65 100644
--- a/src/views/page/PageList.vue
+++ b/src/views/page/PageList.vue
@@ -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>
diff --git a/src/views/page/internal/LinkList.vue b/src/views/page/internal/LinkList.vue
index 13408aed..56bd1bb9 100644
--- a/src/views/page/internal/LinkList.vue
+++ b/src/views/page/internal/LinkList.vue
@@ -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>
diff --git a/src/views/post/CategoryList.vue b/src/views/post/CategoryList.vue
index 26996e03..17ae1afc 100644
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@@ -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"
diff --git a/src/views/post/TagList.vue b/src/views/post/TagList.vue
index df301fae..6b3314b7 100644
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@@ -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>