From 7a0334a4693093229168212859a0e640b2fcffe9 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Thu, 26 Dec 2019 14:19:36 +0800
Subject: [PATCH] feat: add static pages manage in tool list.

---
 src/api/staticPage.js                         |  39 +++++++
 .../system/developer/tabs/SettingsForm.vue    |  13 ++-
 .../system/staticpages/StaticPagesManage.vue  |  13 ++-
 .../staticpages/tabs/DeploySettingsForm.vue   | 100 +++++++++++++++++
 .../system/staticpages/tabs/SettingsForm.vue  |  10 ++
 .../staticpages/tabs/StaticPagesList.vue      | 105 ++++++++++++++++++
 6 files changed, 277 insertions(+), 3 deletions(-)
 create mode 100644 src/api/staticPage.js
 create mode 100644 src/views/system/staticpages/tabs/DeploySettingsForm.vue
 create mode 100644 src/views/system/staticpages/tabs/SettingsForm.vue
 create mode 100644 src/views/system/staticpages/tabs/StaticPagesList.vue

diff --git a/src/api/staticPage.js b/src/api/staticPage.js
new file mode 100644
index 00000000..10f5150f
--- /dev/null
+++ b/src/api/staticPage.js
@@ -0,0 +1,39 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/static_page'
+
+const staticPageApi = {}
+
+staticPageApi.list = () => {
+  return service({
+    url: baseUrl,
+    method: 'get'
+  })
+}
+
+staticPageApi.generate = () => {
+  return service({
+    url: `${baseUrl}/generate`,
+    method: 'get'
+  })
+}
+
+staticPageApi.deploy = () => {
+  return service({
+    url: `${baseUrl}/deploy`,
+    method: 'get'
+  })
+}
+
+staticPageApi.deployType = {
+  GIT: {
+    type: 'GIT',
+    text: 'Git'
+  },
+  NETLIFY: {
+    type: 'NETLIFY',
+    text: 'Netlify'
+  }
+}
+
+export default staticPageApi
diff --git a/src/views/system/developer/tabs/SettingsForm.vue b/src/views/system/developer/tabs/SettingsForm.vue
index 646e26d0..f1fe7b86 100644
--- a/src/views/system/developer/tabs/SettingsForm.vue
+++ b/src/views/system/developer/tabs/SettingsForm.vue
@@ -1,5 +1,8 @@
 <template>
-  <a-form layout="vertical">
+  <a-form
+    layout="vertical"
+    :wrapperCol="wrapperCol"
+  >
     <a-form-item label="开发者选项：">
       <a-switch v-model="options.developer_mode" />
     </a-form-item>
@@ -18,7 +21,13 @@ export default {
   name: 'SettingsForm',
   data() {
     return {
-      options: []
+      options: [],
+      wrapperCol: {
+        xl: { span: 8 },
+        lg: { span: 8 },
+        sm: { span: 12 },
+        xs: { span: 24 }
+      }
     }
   },
   created() {
diff --git a/src/views/system/staticpages/StaticPagesManage.vue b/src/views/system/staticpages/StaticPagesManage.vue
index 939c7408..b273740b 100644
--- a/src/views/system/staticpages/StaticPagesManage.vue
+++ b/src/views/system/staticpages/StaticPagesManage.vue
@@ -8,16 +8,19 @@
               <span slot="tab">
                 <a-icon type="folder" />文件列表
               </span>
+              <StaticPagesList />
             </a-tab-pane>
             <a-tab-pane key="runtimeLogs">
               <span slot="tab">
                 <a-icon type="appstore" />部署平台
               </span>
+              <DeploySettingsForm />
             </a-tab-pane>
             <a-tab-pane key="optionsList">
               <span slot="tab">
                 <a-icon type="setting" />配置
               </span>
+              <SettingsForm />
             </a-tab-pane>
           </a-tabs>
         </div>
@@ -26,7 +29,15 @@
   </div>
 </template>
 <script>
+import StaticPagesList from './tabs/StaticPagesList'
+import DeploySettingsForm from './tabs/DeploySettingsForm'
+import SettingsForm from './tabs/SettingsForm'
 export default {
-  name: 'StaticPagesManage'
+  name: 'StaticPagesManage',
+  components: {
+    StaticPagesList,
+    DeploySettingsForm,
+    SettingsForm
+  }
 }
 </script>
diff --git a/src/views/system/staticpages/tabs/DeploySettingsForm.vue b/src/views/system/staticpages/tabs/DeploySettingsForm.vue
new file mode 100644
index 00000000..c9a1a4fb
--- /dev/null
+++ b/src/views/system/staticpages/tabs/DeploySettingsForm.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-form
+    layout="vertical"
+    :wrapperCol="wrapperCol"
+  >
+    <a-form-item label="部署平台：">
+      <a-select v-model="options.static_deploy_type">
+        <a-select-option
+          v-for="item in Object.keys(deployType)"
+          :key="item"
+          :value="item"
+        >{{ deployType[item].text }}</a-select-option>
+      </a-select>
+    </a-form-item>
+    <div
+      id="gitForm"
+      v-show="options.static_deploy_type === 'GIT'"
+    >
+      <a-form-item label="域名：">
+        <a-input v-model="options.git_static_deploy_domain" />
+      </a-form-item>
+      <a-form-item label="仓库：">
+        <a-input v-model="options.git_static_deploy_repository" />
+      </a-form-item>
+      <a-form-item label="分支：">
+        <a-input v-model="options.git_static_deploy_branch" />
+      </a-form-item>
+      <a-form-item label="仓库用户名：">
+        <a-input v-model="options.git_static_deploy_username" />
+      </a-form-item>
+      <a-form-item label="邮箱：">
+        <a-input v-model="options.git_static_deploy_email" />
+      </a-form-item>
+      <a-form-item label="Token：">
+        <a-input-password v-model="options.git_static_deploy_token" />
+      </a-form-item>
+      <a-form-item label="CNAME：">
+        <a-input v-model="options.git_static_deploy_cname" />
+      </a-form-item>
+    </div>
+    <div
+      id="netlifyForm"
+      v-show="options.static_deploy_type === 'NETLIFY'"
+    >
+      <a-form-item label="域名：">
+        <a-input v-model="options.netlify_static_deploy_domain" />
+      </a-form-item>
+      <a-form-item label="Site ID：">
+        <a-input v-model="options.netlify_static_deploy_site_id" />
+      </a-form-item>
+      <a-form-item label="Token：">
+        <a-input-password v-model="options.netlify_static_deploy_token" />
+      </a-form-item>
+    </div>
+    <a-form-item>
+      <a-button
+        type="primary"
+        @click="handleSaveOptions"
+      >保存</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script>
+import staticPageApi from '@/api/staticPage'
+import optionApi from '@/api/option'
+import { mapActions } from 'vuex'
+export default {
+  name: 'DeploySettingsForm',
+  data() {
+    return {
+      deployType: staticPageApi.deployType,
+      wrapperCol: {
+        xl: { span: 8 },
+        lg: { span: 8 },
+        sm: { span: 12 },
+        xs: { span: 24 }
+      },
+      options: []
+    }
+  },
+  mounted() {
+    this.loadFormOptions()
+  },
+  methods: {
+    ...mapActions(['loadOptions']),
+    loadFormOptions() {
+      optionApi.listAll().then(response => {
+        this.options = response.data.data
+      })
+    },
+    handleSaveOptions() {
+      optionApi.save(this.options).then(response => {
+        this.loadFormOptions()
+        this.loadOptions()
+        this.$message.success('保存成功！')
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/system/staticpages/tabs/SettingsForm.vue b/src/views/system/staticpages/tabs/SettingsForm.vue
new file mode 100644
index 00000000..2202e09b
--- /dev/null
+++ b/src/views/system/staticpages/tabs/SettingsForm.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    SettingsForm
+  </div>
+</template>
+<script>
+export default {
+  name: 'SettingsForm'
+}
+</script>
diff --git a/src/views/system/staticpages/tabs/StaticPagesList.vue b/src/views/system/staticpages/tabs/StaticPagesList.vue
new file mode 100644
index 00000000..9b77cdf3
--- /dev/null
+++ b/src/views/system/staticpages/tabs/StaticPagesList.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="option-tab-wrapper">
+    <a-card
+      :bordered="false"
+      :bodyStyle="{ padding: 0 }"
+    >
+      <div class="table-operator">
+        <a-button
+          type="primary"
+          icon="reload"
+          @click="handleGenerate"
+        >生成</a-button>
+        <a-button
+          icon="cloud-upload"
+          @click="handleDeploy"
+          :loading="deployLoading"
+          :disabled="deployLoading"
+        >
+          部署
+        </a-button>
+        <a-button
+          icon="sync"
+          @click="loadStaticPageList"
+          :loading="loading"
+          :disabled="loading"
+        >
+          刷新
+        </a-button>
+      </div>
+      <div style="margin-top:15px">
+        <a-table
+          :rowKey="record => record.name"
+          :columns="columns"
+          :dataSource="staticPages"
+          :pagination="false"
+          size="middle"
+          :loading="loading"
+        >
+          <span
+            slot="name"
+            slot-scope="name"
+          >
+            <ellipsis
+              :length="64"
+              tooltip
+            >
+              {{ name }}
+            </ellipsis>
+          </span>
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+<script>
+import staticPageApi from '@/api/staticPage'
+const columns = [
+  {
+    title: '文件名',
+    dataIndex: 'name',
+    scopedSlots: { customRender: 'name' }
+  }
+]
+export default {
+  name: 'StaticPagesList',
+  data() {
+    return {
+      columns: columns,
+      staticPages: [],
+      loading: false,
+      deployLoading: false
+    }
+  },
+  created() {
+    this.loadStaticPageList()
+  },
+  methods: {
+    loadStaticPageList() {
+      this.loading = true
+      staticPageApi.list().then(response => {
+        this.staticPages = response.data.data
+        this.loading = false
+      })
+    },
+    handleGenerate() {
+      this.loading = true
+      const hide = this.$message.loading('生成中...', 0)
+      staticPageApi.generate().then(response => {
+        hide()
+        this.$message.success('生成成功！')
+        this.loadStaticPageList()
+      })
+    },
+    handleDeploy() {
+      this.deployLoading = true
+      const hide = this.$message.loading('部署中...', 0)
+      staticPageApi.deploy().then(response => {
+        hide()
+        this.deployLoading = false
+        this.$message.success('部署成功！')
+      })
+    }
+  }
+}
+</script>