From f456dff55113ce740124bb1cde7639529d9d6891 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Fri, 29 May 2020 20:37:23 +0800
Subject: [PATCH] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9asset=20select2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/components/AssetSelect/index.vue          | 121 ++++++++++++------
 src/components/AutoDataTable/index.vue        |   8 +-
 .../el-data-table/utils/select-strategy.js    |  10 +-
 src/components/DataTable/index.vue            |  20 ++-
 src/components/Dialog/index.vue               |   6 +-
 src/components/ListTable/index.vue            |  21 +--
 src/i18n/langs/cn.json                        |   6 +-
 src/i18n/langs/en.json                        |   2 +-
 src/layout/components/NavHeader/ApiKey.vue    |  11 +-
 src/styles/index.scss                         |  15 +++
 src/utils/request.js                          |  26 ++--
 .../TopAndLatestSummary/TopAssets.vue         |   2 +-
 .../dashboard/TopAndLatestSummary/TopUser.vue |   2 +-
 .../AssetPermissionCreateUpdate.vue           |   5 +-
 15 files changed, 153 insertions(+), 104 deletions(-)

diff --git a/.env.development b/.env.development
index 9950598be..f2d3a2f75 100644
--- a/.env.development
+++ b/.env.development
@@ -3,7 +3,7 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = '/rpc'
-PUBLIC_PATH = '/ui'
+VUE_APP_PUBLIC_PATH = '/ui/'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
diff --git a/src/components/AssetSelect/index.vue b/src/components/AssetSelect/index.vue
index 1ef0125d1..8bddc94d3 100644
--- a/src/components/AssetSelect/index.vue
+++ b/src/components/AssetSelect/index.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="asset-select-dialog">
-    <Select2 ref="select2" v-model="value" multiple :placeholder="placeholder" v-bind="$attrs" @focus="handleFocus" />
-    <el-dialog
+    <Select2 ref="select2" v-bind="select2Config" @input="onInputChange" @focus.stop="handleFocus" v-on="$listeners" />
+    <Dialog
+      v-if="dialogVisible"
       :title="this.$t('assets.Assets')"
       :visible.sync="dialogVisible"
       custom-class="asset-select-dialog"
       width="70%"
+      top="1vh"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
     >
       <GenericTreeListPage
         ref="ListPage"
@@ -13,22 +17,18 @@
         :table-config="tableConfig"
         :header-actions="headerActions"
       />
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">{{ $t('common.Cancel') }}</el-button>
-        <el-button type="primary" @click="handleConfirm">{{ $t('common.Confirm') }}</el-button>
-      </span>
-    </el-dialog>
+    </Dialog>
   </div>
 </template>
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
 import { DetailFormatter } from '@/components/ListTable/formatters'
-import { Select2 } from '@/components'
+import { Select2, Dialog } from '@/components'
 
 export default {
   componentName: 'AssetSelect',
-  components: { GenericTreeListPage, Select2 },
+  components: { GenericTreeListPage, Select2, Dialog },
   props: {
     value: {
       type: Array,
@@ -36,23 +36,42 @@ export default {
     }
   },
   data() {
+    const select2Config = {
+      value: this.value,
+      multiple: true,
+      clearable: true,
+      ajax: {
+        url: '/api/v1/assets/assets/?fields_size=mini',
+        processResults(data) {
+          let results = data.results
+          results = results.map((item) => {
+            return { label: item.hostname + '(' + item.ip + ')', value: item.id }
+          })
+          const more = !!data.next
+          return { results: results, pagination: more, total: data.count }
+        }
+      }
+    }
+    const vm = this
     return {
-      internalValue: [],
-      showValue: [],
       dialogVisible: false,
+      initialValue: _.cloneDeep(this.value),
+      rowSelected: [],
+      initSelection: null,
       treeSetting: {
         showMenu: false,
         showRefresh: true,
         showAssets: false,
-        url: '/api/v1/assets/assets/',
+        url: '/api/v1/assets/assets/?fields_size=mini',
         nodeUrl: '/api/v1/assets/nodes/',
         // ?assets=0不显示资产. =1显示资产
         treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
       },
+      select2Config: select2Config,
+      dialogSelect2Config: select2Config,
       tableConfig: {
         url: '/api/v1/assets/assets/',
         hasTree: true,
-        defaultSelect: this.value,
         columns: [
           {
             prop: 'hostname',
@@ -68,40 +87,27 @@ export default {
             label: this.$t('assets.ip'),
             sortable: 'custom'
           }
-        ]
+        ],
+        listeners: {
+          'toggle-row-selection': (isSelected, row) => {
+            if (isSelected) {
+              vm.addRowToSelect(row)
+            } else {
+              vm.removeRowFromSelect(row)
+            }
+          }
+        },
+        theRowDefaultIsSelected: (row) => {
+          return this.value.indexOf(row.id) > -1
+        }
       },
       headerActions: {
-        hasRightSide: false,
-        hasSearch: true,
+        hasLeftActions: false,
         hasRightActions: false
       }
     }
   },
-  computed: {
-    placeholder() {
-      return '请选择'
-    }
-  },
-  mounted() {
-    console.log('Initial value', this.value)
-    // this.$on('SelectionChange', (val) => {
-    //   // 对象循环
-    //   this.internalValue = []
-    //   this.showValue = []
-    //   for (const key in val) {
-    //     this.internalValue.push(`${val[key].hostname}(${val[key].ip})`)
-    //     this.showValue.push(`${val[key].id}`)
-    //   }
-
-    this.$emit('input', this.showValue)
-    this.$emit('getAsset', this.showValue)
-    // })
-  },
   methods: {
-    clearSelected() {
-      this.internalValue = []
-      this.showValue = []
-    },
     handleFocus() {
       this.$refs.select2.selectRef.blur()
       this.dialogVisible = true
@@ -109,7 +115,40 @@ export default {
     handleConfirm() {
       this.dialogVisible = false
     },
-    handleClose(done) {
+    handleCancel() {
+      this.$refs.select2.iValue = this.initialValue
+      this.dialogVisible = false
+    },
+    onInputChange(val) {
+      this.$emit('input', val)
+    },
+    addToSelect(options, row) {
+      const selectOptionsHas = options.find(item => item.value === row.id)
+      // 如果select2的options中没有，那么可能无法显示正常的值
+      if (selectOptionsHas === undefined) {
+        const option = {
+          label: `${row.hostname}(${row.ip})`,
+          value: row.id
+        }
+        options.push(option)
+      }
+    },
+    addRowToSelect(row) {
+      const outSelectOptions = this.$refs.select2.options
+      this.addToSelect(outSelectOptions, row)
+
+      const selectValue = this.$refs.select2.iValue
+      const selectValueIndex = selectValue.indexOf(row.id)
+      if (selectValueIndex === -1) {
+        selectValue.push(row.id)
+      }
+    },
+    removeRowFromSelect(row) {
+      const selectValue = this.$refs.select2.iValue
+      const selectValueIndex = selectValue.indexOf(row.id)
+      if (selectValueIndex > -1) {
+        selectValue.splice(selectValueIndex, 1)
+      }
     }
   }
 }
diff --git a/src/components/AutoDataTable/index.vue b/src/components/AutoDataTable/index.vue
index 3775fb565..629eac71f 100644
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <DataTable ref="dataTable" v-loading="loading" :config="totalConfig" v-bind="$attrs" v-on="$listeners" />
+  <DataTable ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" />
 </template>
 
 <script type="text/jsx">
@@ -20,7 +20,7 @@ export default {
     return {
       loading: true,
       method: 'get',
-      totalConfig: {},
+      iConfig: {},
       meta: {}
     }
   },
@@ -35,7 +35,7 @@ export default {
         this.generateColumns()
       }).catch(() => {
         this.$log.error('Error occur: ')
-        // this.totalConfig = this.config
+        // this.iConfig = this.config
       }).finally(() => {
         this.loading = false
       })
@@ -126,7 +126,7 @@ export default {
           columns.push(col)
         }
       }
-      this.totalConfig = Object.assign(config, { columns: columns })
+      this.iConfig = Object.assign(config, { columns: columns })
     }
   }
 }
diff --git a/src/components/DataTable/compenents/el-data-table/utils/select-strategy.js b/src/components/DataTable/compenents/el-data-table/utils/select-strategy.js
index f85daf3b8..5cd717f43 100644
--- a/src/components/DataTable/compenents/el-data-table/utils/select-strategy.js
+++ b/src/components/DataTable/compenents/el-data-table/utils/select-strategy.js
@@ -84,16 +84,14 @@ class StrategyPersistSelection extends StrategyAbstract {
     const { id, selected } = this.elDataTable
     const foundIndex = selected.findIndex(r => r[id] === row[id])
     if (typeof isSelected === 'undefined') {
-      if (foundIndex > -1) {
-        selected.splice(foundIndex, 1)
-      } else {
-        selected.push(row)
-      }
-    } else if (isSelected && foundIndex === -1) {
+      isSelected = foundIndex <= -1
+    }
+    if (isSelected && foundIndex === -1) {
       selected.push(row)
     } else if (!isSelected && foundIndex > -1) {
       selected.splice(foundIndex, 1)
     }
+    this.elDataTable.$emit('toggle-row-selection', isSelected, row)
     this.updateElTableSelection()
   }
   clearSelection() {
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index a2ccc75b8..0842c720d 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ElDatableTable ref="table" class="el-table" v-bind="tableConfig" v-on="$listeners" />
+  <ElDatableTable ref="table" class="el-table" v-bind="tableConfig" @update="onUpdate" v-on="iListeners" />
 </template>
 
 <script>
@@ -77,7 +77,8 @@ export default {
             delete query['direction']
           }
           return query
-        }
+        },
+        theRowDefaultIsSelected: (row) => { return false }
       }
     }
   },
@@ -85,6 +86,9 @@ export default {
     tableConfig() {
       const config = Object.assign(this.defaultConfig, this.config)
       return config
+    },
+    iListeners() {
+      return Object.assign({}, this.$listeners, this.tableConfig.listeners)
     }
   },
   methods: {
@@ -103,6 +107,18 @@ export default {
     },
     toggleRowSelection(row, isSelected) {
       return this.$refs.table.toggleRowSelection(row, isSelected)
+    },
+    onUpdate(data, response) {
+      const theRowDefaultIsSelected = this.tableConfig.theRowDefaultIsSelected
+      if (!theRowDefaultIsSelected || typeof theRowDefaultIsSelected !== 'function') {
+        return
+      }
+
+      for (const row of data) {
+        if (theRowDefaultIsSelected(row)) {
+          this.toggleRowSelection(row, true)
+        }
+      }
     }
   }
 }
diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index ed65d0cb9..892d551b9 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -1,6 +1,7 @@
 <template>
   <el-dialog
     :title="title"
+    class="dialog"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -59,6 +60,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .dialog >>> .el-dialog__header {
+    /*padding-top: 10px;*/
+  }
 
 </style>
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index fb3efb5dc..615a1b981 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -2,7 +2,7 @@
   <div>
     <TableAction :table-url="tableConfig.url" :search-table="search" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
-      <AutoDataTable :key="tableConfig.url" ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange" v-on="$listeners" @update="handleDataChange" />
+      <AutoDataTable :key="tableConfig.url" ref="dataTable" :config="tableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
     </IBox>
   </div>
 </template>
@@ -46,10 +46,6 @@ export default {
   methods: {
     handleSelectionChange(val) {
       this.selectedRows = val
-      const obj = {}
-      val.forEach((item, index) => { obj[index] = item })
-      // 已知Bug，必须避免数组扁平化
-      this.dispatch('AssetSelect', 'SelectionChange', obj)
     },
     reloadTable() {
       this.dataTable.getList()
@@ -59,21 +55,6 @@ export default {
     },
     toggleRowSelection(row, isSelected) {
       return this.dataTable.toggleRowSelection(row, isSelected)
-    },
-    handleDataChange(val, res) {
-      if (!this.init && this.tableConfig.defaultSelect !== undefined) {
-        const obj = {}
-        const arr = []
-        for (let i = 0, len = val.length; i < len; i++) {
-          if (this.tableConfig.defaultSelect.indexOf(val[i].id) > -1) {
-            this.toggleRowSelection(val[i], true)
-            arr.push(val[i])
-          }
-        }
-        arr.forEach((item, index) => { obj[index] = item })
-        this.dispatch('AssetSelect', 'SelectionChange', obj)
-        this.init = false
-      }
     }
   }
 }
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index e82173b16..5a411fe67 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -88,7 +88,7 @@
     "commandFilterDetail": "命令过滤器详情",
     "command_filter_list": "命令过滤器列表",
     "CommandFilterDetail": "命令过滤器详情",
-    "CommandFilterRules":"命令过滤器规则",
+    "CommandFilterRules": "命令过滤器规则",
     "date_expired": "失效日期",
     "date_joined": "创建日期",
     "date_password_last_updated": "最后更新密码",
@@ -167,7 +167,6 @@
     "dateExpired": "失效日期",
     "deleteErrorMsg": "删除失败",
     "deleteSelected": "删除所选",
-    "deleteSuccessMsg": "删除成功",
     "deleteWarningMsg": "你确定要删除",
     "disableSelected": "禁用所选",
     "fieldRequiredError": "这个字段是必填项",
@@ -234,7 +233,7 @@
     "UserRatio": "用户占比统计",
     "UsersTotal": "用户总数",
     "Weekly": "按周",
-    "timesWeekUnit": "次/周"
+    "TimesWeekUnit": "次/周"
   },
   "ops": {
     "ID": "ID",
@@ -278,6 +277,7 @@
   },
   "perms": {
     "Actions": "动作",
+    "actions": "动作",
     "Asset": "资产",
     "Basic": "基本",
     "IP": "IP",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 83156b995..a2d4f6dde 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -229,7 +229,7 @@
     "UserRatio": "User Ratio",
     "UsersTotal": "Users total",
     "Weekly": "Weekly",
-    "timesWeekUnit": "times/week"
+    "TimesWeekUnit": "times/week"
   },
   "ops": {
     "ID": "ID",
diff --git a/src/layout/components/NavHeader/ApiKey.vue b/src/layout/components/NavHeader/ApiKey.vue
index b3e8df46d..5592c01bd 100644
--- a/src/layout/components/NavHeader/ApiKey.vue
+++ b/src/layout/components/NavHeader/ApiKey.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Dialog width="45%" :visible.sync="showDialog" :title="this.$t('setting.ApiKeyList')" :show-cancel="false" :show-confirm="false">
+    <Dialog width="60%" :visible.sync="showDialog" :title="this.$t('setting.ApiKeyList')" :show-cancel="false" :show-confirm="false">
       <div>
         <el-alert type="success"> {{ helpMessage }} </el-alert>
         <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
@@ -30,15 +30,15 @@ export default {
         hasSelection: true,
         url: `/api/v1/authentication/access-keys/`,
         columns: [
-          'id_display', 'secret', 'is_active', 'date_created', 'actions'
+          'id', 'secret', 'is_active', 'date_created', 'actions'
         ],
         columnsMeta: {
-          id_display: {
-            label: 'ID',
+          id: {
+            label: 'AccessKeyID',
             width: '315px'
           },
           secret: {
-            label: '密文',
+            label: 'AccessKeySecret',
             width: '315px',
             formatter: ShowKeyFormatter
           },
@@ -50,6 +50,7 @@ export default {
             formatter: DateFormatter
           },
           actions: {
+            prop: '',
             formatterArgs: {
               onDelete: function({ row, col, cellValue, reload }) {
                 this.$axios.delete(
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7e09372e9..ed84c8892 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -120,3 +120,18 @@ h3, h4, h5 {
 h4 {
   font-size: 14px;
 }
+
+// 弹窗里的List table中的搜索框
+
+.el-dialog__body div.table-action-right-side {
+  padding-top: 10px;
+}
+
+.filter-field.right-side-item.action-search {
+  height: 36px;
+}
+
+
+.el-dialog__body {
+  padding-top: 10px;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 37f634d5d..a4526d8b3 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,9 +1,7 @@
 import axios from 'axios'
-// import i18n from '@/i18n/i18n'
+import i18n from '@/i18n/i18n'
 
-import {
-  Message
-} from 'element-ui'
+import { Message, MessageBox } from 'element-ui'
 import store from '@/store'
 import {
   getToken,
@@ -69,16 +67,16 @@ service.interceptors.response.use(
     const response = error.response
     if (response.status === 401) {
       // 未授权重定向到登录页面
-      window.location = process.env.LOGIN_PATH
-      // const title = ''
-      // const msg = i18n.t('auth.LoginRequiredMsg')
-      // MessageBox.confirm(msg, title, {
-      //   confirmButtonText: i18n.t('auth.ReLogin'),
-      //   cancelButtonText: i18n.t('common.Cancel'),
-      //   type: 'warning'
-      // }).then(() => {
-      //   window.location = '/auth/login/'
-      // })
+      const title = ''
+      response.config.disableFlashMsg = true
+      const msg = i18n.t('auth.LoginRequiredMsg')
+      MessageBox.confirm(msg, title, {
+        confirmButtonText: i18n.t('auth.ReLogin'),
+        cancelButtonText: i18n.t('common.Cancel'),
+        type: 'warning'
+      }).then(() => {
+        window.location = '/auth/login/'
+      })
     }
     if (!response.config.disableFlashMsg) {
       Message({
diff --git a/src/views/dashboard/TopAndLatestSummary/TopAssets.vue b/src/views/dashboard/TopAndLatestSummary/TopAssets.vue
index f693469b0..de8557a2a 100644
--- a/src/views/dashboard/TopAndLatestSummary/TopAssets.vue
+++ b/src/views/dashboard/TopAndLatestSummary/TopAssets.vue
@@ -14,7 +14,7 @@ export default {
   data() {
     return {
       title: this.$t('dashboard.TopAssetsOfWeek'),
-      unit: this.$t('dashboard.timesWeekUnit'),
+      unit: this.$t('dashboard.TimesWeekUnit'),
       dates_login_times_top10_assets: []
     }
   },
diff --git a/src/views/dashboard/TopAndLatestSummary/TopUser.vue b/src/views/dashboard/TopAndLatestSummary/TopUser.vue
index f293315a5..86c5d5dd1 100644
--- a/src/views/dashboard/TopAndLatestSummary/TopUser.vue
+++ b/src/views/dashboard/TopAndLatestSummary/TopUser.vue
@@ -14,7 +14,7 @@ export default {
   data() {
     return {
       title: this.$t('dashboard.TopUsersOfWeek'),
-      unit: this.$t('dashboard.timesWeekUnit'),
+      unit: this.$t('dashboard.TimesWeekUnit'),
       dates_login_times_top10_users: []
     }
   },
diff --git a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
index 180e253d5..8011f544a 100644
--- a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
@@ -56,10 +56,7 @@ export default {
             required: false
           }],
           el: {
-            value: [],
-            ajax: {
-              url: '/api/v1/assets/assets/?fields_size=mini'
-            }
+            value: []
           }
         },
         nodes: {