From 98a1c342a4a022749ccd1a5d0963226c6a97716d Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Tue, 3 Dec 2019 12:35:53 +0800
Subject: [PATCH] feat: complete OptionsList.

---
 src/api/option.js                             | 36 ++++++-
 src/views/post/CategoryList.vue               |  2 -
 .../system/developer/tabs/OptionsList.vue     | 96 ++++++++++++++++++-
 3 files changed, 125 insertions(+), 9 deletions(-)

diff --git a/src/api/option.js b/src/api/option.js
index f3ff61cc..d1d2c622 100644
--- a/src/api/option.js
+++ b/src/api/option.js
@@ -30,15 +30,45 @@ optionApi.save = options => {
   })
 }
 
+optionApi.create = option => {
+  return service({
+    url: baseUrl,
+    data: option,
+    method: 'post'
+  })
+}
+
+optionApi.delete = optionId => {
+  return service({
+    url: `${baseUrl}/${optionId}`,
+    method: 'delete'
+  })
+}
+
+optionApi.get = optionId => {
+  return service({
+    url: `${baseUrl}/${optionId}`,
+    method: 'get'
+  })
+}
+
+optionApi.update = (optionId, option) => {
+  return service({
+    url: `${baseUrl}/${optionId}`,
+    data: option,
+    method: 'put'
+  })
+}
+
 optionApi.type = {
   INTERNAL: {
-    type: 'internal',
+    value: 'INTERNAL',
     text: '系统'
   },
   CUSTOM: {
-    type: 'custom',
+    value: 'CUSTOM',
     text: '自定义'
   }
 }
 
-export default optionApi
+export default optionApi
\ No newline at end of file
diff --git a/src/views/post/CategoryList.vue b/src/views/post/CategoryList.vue
index 7eb580e7..98fa83b3 100644
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@@ -300,13 +300,11 @@ export default {
         categoryApi.update(this.categoryToCreate.id, this.categoryToCreate).then(response => {
           this.$message.success('更新成功！')
           this.loadCategories()
-          this.categoryToCreate = {}
         })
       } else {
         categoryApi.create(this.categoryToCreate).then(response => {
           this.$message.success('保存成功！')
           this.loadCategories()
-          this.categoryToCreate = {}
         })
       }
       this.handleAddCategory()
diff --git a/src/views/system/developer/tabs/OptionsList.vue b/src/views/system/developer/tabs/OptionsList.vue
index c8bcc567..3e544702 100644
--- a/src/views/system/developer/tabs/OptionsList.vue
+++ b/src/views/system/developer/tabs/OptionsList.vue
@@ -59,6 +59,7 @@
         <a-button
           type="primary"
           icon="plus"
+          @click="()=>this.formVisible=true"
         >新增</a-button>
       </div>
       <div style="margin-top:15px">
@@ -115,13 +116,18 @@
           </span>
           <span
             slot="action"
+            slot-scope="text, record"
           >
-            <a href="javascript:void(0);">编辑</a>
+            <a
+              href="javascript:void(0);"
+              @click="handleEditOption(record)"
+            >编辑</a>
             <a-divider type="vertical" />
             <a-popconfirm
               :title="'你确定要永久删除该变量？'"
               okText="确定"
               cancelText="取消"
+              @confirm="handleDeleteOption(record.id)"
             >
               <a href="javascript:;">删除</a>
             </a-popconfirm>
@@ -141,10 +147,38 @@
         </div>
       </div>
     </a-card>
+    <a-modal
+      v-model="formVisible"
+      :title="formTitle"
+      :afterClose="onFormClose"
+    >
+      <template slot="footer">
+        <a-button
+          key="submit"
+          type="primary"
+          @click="createOrUpdateOption()"
+        >保存</a-button>
+      </template>
+      <a-alert
+        v-if="optionToStage.type === optionType.INTERNAL.value"
+        message="注意：在不知道系统变量的具体用途时，请不要随意修改！"
+        banner
+        closable
+      />
+      <a-form layout="vertical">
+        <a-form-item label="Key：">
+          <a-input v-model="optionToStage.key" />
+        </a-form-item>
+        <a-form-item label="Value：">
+          <a-input v-model="optionToStage.value" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 <script>
 import optionApi from '@/api/option'
+import { mapActions } from 'vuex'
 const columns = [
   {
     title: 'Key',
@@ -187,6 +221,7 @@ export default {
     return {
       optionType: optionApi.type,
       columns: columns,
+      formVisible: false,
       pagination: {
         page: 1,
         size: 10,
@@ -199,6 +234,7 @@ export default {
         keyword: null,
         status: null
       },
+      optionToStage: {},
       loading: false,
       options: []
     }
@@ -209,13 +245,17 @@ export default {
         option.typeProperty = this.optionType[option.type]
         return option
       })
+    },
+    formTitle() {
+      return this.optionToStage.id ? '编辑' : '新增'
     }
   },
   created() {
-    this.loadOptions()
+    this.loadOptionsList()
   },
   methods: {
-    loadOptions() {
+    ...mapActions(['loadOptions']),
+    loadOptionsList() {
       this.loading = true
       this.queryParam.page = this.pagination.page - 1
       this.queryParam.size = this.pagination.size
@@ -229,16 +269,64 @@ export default {
     handleQuery() {
       this.handlePaginationChange(1, this.pagination.size)
     },
+    handleDeleteOption(id) {
+      optionApi.delete(id).then(response => {
+        this.$message.success('删除成功！')
+        this.loadOptionsList()
+        this.loadOptions()
+      })
+    },
+    handleEditOption(option) {
+      this.optionToStage = option
+      this.formVisible = true
+    },
     handlePaginationChange(page, pageSize) {
       this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
       this.pagination.page = page
       this.pagination.size = pageSize
-      this.loadOptions()
+      this.loadOptionsList()
     },
     handleResetParam() {
       this.queryParam.keyword = null
       this.queryParam.type = null
       this.handlePaginationChange(1, this.pagination.size)
+    },
+    onFormClose() {
+      ;(this.formVisible = false), (this.optionToStage = {})
+    },
+    createOrUpdateOption() {
+      if (!this.optionToStage.key) {
+        this.$notification['error']({
+          message: '提示',
+          description: 'Key 不能为空！'
+        })
+        return
+      }
+      if (!this.optionToStage.value) {
+        this.$notification['error']({
+          message: '提示',
+          description: 'Value 不能为空！'
+        })
+        return
+      }
+      if (this.optionToStage.id) {
+        optionApi.update(this.optionToStage.id, this.optionToStage).then(response => {
+          this.$message.success('更新成功！')
+          this.loadOptionsList()
+          this.loadOptions()
+          this.optionToStage = {}
+          this.formVisible = false
+        })
+      } else {
+        this.optionToStage.type = this.optionType.CUSTOM.value
+        optionApi.create(this.optionToStage).then(response => {
+          this.$message.success('保存成功！')
+          this.loadOptionsList()
+          this.loadOptions()
+          this.optionToStage = {}
+          this.formVisible = false
+        })
+      }
     }
   }
 }