From 6a12dfe7b7bb270e9d936d14fa4275f27a487831 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Thu, 9 May 2019 22:28:12 +0800
Subject: [PATCH] added site list

---
 frontend/src/i18n/zh.js              |  1 +
 frontend/src/store/modules/site.js   | 10 +++++++++-
 frontend/src/views/site/SiteList.vue | 27 ++++++++++++++++++++++-----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index 2ddd809f..a6c9a5b6 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -137,6 +137,7 @@ export default {
   'Domain': '域名',
   'Category': '类别',
   'Select': '请选择',
+  'Select Category': '请选择类别',
 
   // 文件
   'Choose Folder': '选择文件',
diff --git a/frontend/src/store/modules/site.js b/frontend/src/store/modules/site.js
index 496fedb5..2ffc392d 100644
--- a/frontend/src/store/modules/site.js
+++ b/frontend/src/store/modules/site.js
@@ -4,7 +4,9 @@ const state = {
   tableData: [],
 
   // filter
-  filter: {},
+  filter: {
+    category: undefined
+  },
   keyword: '',
 
   // pagination
@@ -34,6 +36,12 @@ const mutations = {
 }
 
 const actions = {
+  editSite ({ state, dispatch }, payload) {
+    const { id, category } = payload
+    return request.post(`/sites/${id}`, {
+      category
+    })
+  },
   getSiteList ({ state, commit }) {
     return request.get('/sites', {
       page_num: state.pageNum,
diff --git a/frontend/src/views/site/SiteList.vue b/frontend/src/views/site/SiteList.vue
index 4f15c36c..5358539f 100644
--- a/frontend/src/views/site/SiteList.vue
+++ b/frontend/src/views/site/SiteList.vue
@@ -7,6 +7,9 @@
                 class="filter-search"
                 v-model="keyword">
       </el-input>
+      <el-select v-model="filter.category" class="filter-category" :placeholder="$t('Select Category')" clearable>
+        <el-option v-for="op in categoryList" :key="op" :value="op" :label="op"></el-option>
+      </el-select>
       <el-button type="success"
                  icon="el-icon-refresh"
                  class="btn refresh"
@@ -27,7 +30,9 @@
                          :width="col.width"
                          :align="col.align">
           <template slot-scope="scope">
-            <el-select v-model="scope.row[col.name]" :placeholder="$t('Select')">
+            <el-select v-model="scope.row[col.name]"
+                       :placeholder="$t('Select')"
+                       @change="onRowChange(scope.row)">
               <el-option v-for="op in categoryList"
                          :key="op"
                          :value="op"
@@ -45,14 +50,14 @@
                          :width="col.width">
         </el-table-column>
       </template>
-      <el-table-column :label="$t('Action')" align="left" width="200">
+      <el-table-column :label="$t('Action')" align="left" width="120">
         <template slot-scope="scope">
           <el-tooltip :content="$t('View')" placement="top">
             <el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
           </el-tooltip>
-          <el-tooltip :content="$t('Remove')" placement="top">
-            <el-button type="danger" icon="el-icon-delete" size="mini" @click="onRemove(scope.row)"></el-button>
-          </el-tooltip>
+          <!--<el-tooltip :content="$t('Remove')" placement="top">-->
+          <!--<el-button type="danger" icon="el-icon-delete" size="mini" @click="onRemove(scope.row)"></el-button>-->
+          <!--</el-tooltip>-->
         </template>
       </el-table-column>
     </el-table>
@@ -103,6 +108,7 @@ export default {
   },
   computed: {
     ...mapState('site', [
+      'filter',
       'tableData',
       'totalCount'
     ]),
@@ -137,6 +143,12 @@ export default {
     },
     onPageChange () {
       this.$store.dispatch('site/getSiteList')
+    },
+    onRowChange (row) {
+      this.$store.dispatch('site/editSite', {
+        id: row.domain,
+        category: row.category
+      })
     }
   },
   created () {
@@ -154,6 +166,11 @@ export default {
     width: 180px;
   }
 
+  .filter .filter-category {
+    width: 180px;
+    margin-left: 20px;
+  }
+
   .filter .btn {
     margin-left: 20px;
   }