From 06b9225037fa7406753cbc2e8e818b473b131a47 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Mon, 2 Dec 2019 22:56:34 +0800
Subject: [PATCH] feat: add OptionsList.

---
 src/api/attachment.js                         |  10 +-
 src/api/option.js                             |  19 ++
 src/views/system/OptionForm.vue               |   2 +-
 .../system/developer/DeveloperOptions.vue     |  12 +-
 .../system/developer/tabs/OptionsList.vue     | 245 ++++++++++++++++++
 5 files changed, 280 insertions(+), 8 deletions(-)
 create mode 100644 src/views/system/developer/tabs/OptionsList.vue

diff --git a/src/api/attachment.js b/src/api/attachment.js
index 21584ad7..e36c11db 100644
--- a/src/api/attachment.js
+++ b/src/api/attachment.js
@@ -77,23 +77,23 @@ attachmentApi.type = {
     text: 'SM.MS'
   },
   UPOSS: {
-    type: 'upyun',
+    type: 'uposs',
     text: '又拍云'
   },
   QINIUOSS: {
-    type: 'qnyun',
+    type: 'qiniuoss',
     text: '七牛云'
   },
   ALIOSS: {
-    type: 'aliyun',
+    type: 'alioss',
     text: '阿里云'
   },
   BAIDUBOS: {
-    type: 'baiduyun',
+    type: 'baidubos',
     text: '百度云'
   },
   TENCENTCOS: {
-    type: 'tencentyun',
+    type: 'tencentcos',
     text: '腾讯云'
   }
 }
diff --git a/src/api/option.js b/src/api/option.js
index 4b3e59be..f3ff61cc 100644
--- a/src/api/option.js
+++ b/src/api/option.js
@@ -14,6 +14,14 @@ optionApi.listAll = keys => {
   })
 }
 
+optionApi.query = params => {
+  return service({
+    url: `${baseUrl}/list_view`,
+    params: params,
+    method: 'get'
+  })
+}
+
 optionApi.save = options => {
   return service({
     url: `${baseUrl}/map_view/saving`,
@@ -22,4 +30,15 @@ optionApi.save = options => {
   })
 }
 
+optionApi.type = {
+  INTERNAL: {
+    type: 'internal',
+    text: '系统'
+  },
+  CUSTOM: {
+    type: 'custom',
+    text: '自定义'
+  }
+}
+
 export default optionApi
diff --git a/src/views/system/OptionForm.vue b/src/views/system/OptionForm.vue
index c8de3fac..e8916134 100644
--- a/src/views/system/OptionForm.vue
+++ b/src/views/system/OptionForm.vue
@@ -160,7 +160,7 @@
                 <a-form-item label="评论回复通知对方：">
                   <a-switch v-model="options.comment_reply_notice" />
                 </a-form-item>
-                <a-form-item label="API 评论开关：">
+                <a-form-item label="API 评论开关：" help="* 关闭之后将无法进行评论">
                   <a-switch v-model="options.comment_api_enabled" />
                 </a-form-item>
                 <a-form-item label="评论模块 JS：">
diff --git a/src/views/system/developer/DeveloperOptions.vue b/src/views/system/developer/DeveloperOptions.vue
index eb3955b2..7a1052f6 100644
--- a/src/views/system/developer/DeveloperOptions.vue
+++ b/src/views/system/developer/DeveloperOptions.vue
@@ -13,12 +13,18 @@
               </span>
               <Environment />
             </a-tab-pane>
-            <a-tab-pane key="runtimelogs">
+            <a-tab-pane key="runtimeLogs">
               <span slot="tab">
                 <a-icon type="code" />实时日志
               </span>
               <RuntimeLogs />
             </a-tab-pane>
+            <a-tab-pane key="optionsList">
+              <span slot="tab">
+                <a-icon type="code" />系统变量
+              </span>
+              <OptionsList />
+            </a-tab-pane>
             <a-tab-pane key="settings">
               <span slot="tab">
                 <a-icon type="setting" />设置
@@ -43,11 +49,13 @@ import { mapGetters } from 'vuex'
 import Environment from './tabs/Environment'
 import RuntimeLogs from './tabs/RuntimeLogs'
 import SettingsForm from './tabs/SettingsForm'
+import OptionsList from './tabs/OptionsList'
 export default {
   components: {
     Environment,
     RuntimeLogs,
-    SettingsForm
+    SettingsForm,
+    OptionsList
   },
   computed: {
     ...mapGetters(['options'])
diff --git a/src/views/system/developer/tabs/OptionsList.vue b/src/views/system/developer/tabs/OptionsList.vue
new file mode 100644
index 00000000..c8bcc567
--- /dev/null
+++ b/src/views/system/developer/tabs/OptionsList.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="option-tab-wrapper">
+    <a-card
+      :bordered="false"
+      :bodyStyle="{ padding: 0 }"
+    >
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col
+              :md="6"
+              :sm="24"
+            >
+              <a-form-item label="关键词">
+                <a-input
+                  v-model="queryParam.keyword"
+                  @keyup.enter="handleQuery()"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col
+              :md="6"
+              :sm="24"
+            >
+              <a-form-item label="类型">
+                <a-select
+                  v-model="queryParam.type"
+                  placeholder="请选择类型"
+                  @change="handleQuery()"
+                >
+                  <a-select-option
+                    v-for="item in Object.keys(optionType)"
+                    :key="item"
+                    :value="item"
+                  >{{ optionType[item].text }}</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col
+              :md="12"
+              :sm="24"
+            >
+              <span class="table-page-search-submitButtons">
+                <a-button
+                  type="primary"
+                  @click="handleQuery()"
+                >查询</a-button>
+                <a-button
+                  style="margin-left: 8px;"
+                  @click="handleResetParam()"
+                >重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="table-operator">
+        <a-button
+          type="primary"
+          icon="plus"
+        >新增</a-button>
+      </div>
+      <div style="margin-top:15px">
+        <a-table
+          :rowKey="option => option.id"
+          :columns="columns"
+          :dataSource="formattedDatas"
+          :loading="loading"
+          :pagination="false"
+        >
+          <ellipsis
+            :length="50"
+            tooltip
+            slot="key"
+            slot-scope="key"
+          >
+            {{ key }}
+          </ellipsis>
+          <ellipsis
+            :length="50"
+            tooltip
+            slot="value"
+            slot-scope="value"
+          >
+            {{ value }}
+          </ellipsis>
+          <span
+            slot="type"
+            slot-scope="typeProperty"
+          >
+            {{ typeProperty.text }}
+          </span>
+          <span
+            slot="createTime"
+            slot-scope="createTime"
+          >
+            <a-tooltip placement="top">
+              <template slot="title">
+                {{ createTime | moment }}
+              </template>
+              {{ createTime | timeAgo }}
+            </a-tooltip>
+          </span>
+          <span
+            slot="updateTime"
+            slot-scope="updateTime"
+          >
+            <a-tooltip placement="top">
+              <template slot="title">
+                {{ updateTime | moment }}
+              </template>
+              {{ updateTime | timeAgo }}
+            </a-tooltip>
+          </span>
+          <span
+            slot="action"
+          >
+            <a href="javascript:void(0);">编辑</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              :title="'你确定要永久删除该变量？'"
+              okText="确定"
+              cancelText="取消"
+            >
+              <a href="javascript:;">删除</a>
+            </a-popconfirm>
+          </span>
+        </a-table>
+        <div class="page-wrapper">
+          <a-pagination
+            class="pagination"
+            :current="pagination.page"
+            :total="pagination.total"
+            :defaultPageSize="pagination.size"
+            :pageSizeOptions="['1', '2', '5', '10', '20', '50', '100']"
+            showSizeChanger
+            @showSizeChange="handlePaginationChange"
+            @change="handlePaginationChange"
+          />
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+<script>
+import optionApi from '@/api/option'
+const columns = [
+  {
+    title: 'Key',
+    dataIndex: 'key',
+    scopedSlots: { customRender: 'key' }
+  },
+  {
+    title: 'Value',
+    dataIndex: 'value',
+    scopedSlots: { customRender: 'value' }
+  },
+  {
+    title: '类型',
+    dataIndex: 'typeProperty',
+    width: '100px',
+    scopedSlots: { customRender: 'type' }
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: '200px',
+    scopedSlots: { customRender: 'createTime' }
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: '200px',
+    scopedSlots: { customRender: 'updateTime' }
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: '180px',
+    scopedSlots: { customRender: 'action' }
+  }
+]
+export default {
+  name: 'OptionsList',
+  data() {
+    return {
+      optionType: optionApi.type,
+      columns: columns,
+      pagination: {
+        page: 1,
+        size: 10,
+        sort: null
+      },
+      queryParam: {
+        page: 0,
+        size: 10,
+        sort: null,
+        keyword: null,
+        status: null
+      },
+      loading: false,
+      options: []
+    }
+  },
+  computed: {
+    formattedDatas() {
+      return this.options.map(option => {
+        option.typeProperty = this.optionType[option.type]
+        return option
+      })
+    }
+  },
+  created() {
+    this.loadOptions()
+  },
+  methods: {
+    loadOptions() {
+      this.loading = true
+      this.queryParam.page = this.pagination.page - 1
+      this.queryParam.size = this.pagination.size
+      this.queryParam.sort = this.pagination.sort
+      optionApi.query(this.queryParam).then(response => {
+        this.options = response.data.data.content
+        this.pagination.total = response.data.data.total
+        this.loading = false
+      })
+    },
+    handleQuery() {
+      this.handlePaginationChange(1, this.pagination.size)
+    },
+    handlePaginationChange(page, pageSize) {
+      this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
+      this.pagination.page = page
+      this.pagination.size = pageSize
+      this.loadOptions()
+    },
+    handleResetParam() {
+      this.queryParam.keyword = null
+      this.queryParam.type = null
+      this.handlePaginationChange(1, this.pagination.size)
+    }
+  }
+}
+</script>