pref: 修改 accounts

src/components/AccountListTable/index.vue

@@ -20,7 +20,7 @@
 
 <script>
 import ListTable from '@/components/ListTable/index'
-import { ActionsFormatter, DisplayFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/TableFormatters'
 import ShowSecretInfo from './ShowSecretInfo'
 import UpdateSecretInfo from './UpdateSecretInfo'
 import AddAccount from './AddAccount'
@@ -81,18 +81,18 @@ export default {
           resource: 'account'
         },
         columns: [
-          'hostname', 'ip', 'username', 'version', 'privlieged', 'connectivity',
-          'date_created', 'date_updated', 'actions'
+          'asset', 'username', 'version', 'privileged',
+          'secret_type', 'date_created', 'date_updated', 'actions'
         ],
         columnsShow: {
           min: ['username', 'actions'],
-          default: ['hostname', 'ip', 'username', 'version', 'privlieged', 'actions']
+          default: ['hostname', 'ip', 'username', 'version', 'privileged', 'actions']
         },
         columnsMeta: {
-          hostname: {
-            label: this.$t('assets.Hostname'),
+          asset: {
+            label: this.$t('assets.Asset'),
             showOverflowTooltip: true,
-            formatter: function(row, column, cellValue, index) {
+            formatter: function(row) {
               const to = {
                 name: 'AssetDetail',
                 params: { id: row.asset.id }
@@ -104,24 +104,17 @@ export default {
               }
             }
           },
-          ip: {
-            width: '120px',
-            label: this.$t('assets.ip'),
-            formatter: function(row, column, cellValue, index) {
-              return <span>{ row.asset.ip }</span>
-            }
-          },
           username: {
             showOverflowTooltip: true
           },
-          systemuser: {
-            formatter: DisplayFormatter
-          },
           version: {
             width: '70px'
           },
-          privlieged: {
-            label: this.$t('assets.Privileged')
+          privileged: {
+            label: this.$t('assets.Privileged'),
+            formatterArgs: {
+              showFalse: false
+            }
           },
           connectivity: connectivityMeta,
           actions: {
@@ -244,6 +237,8 @@ export default {
 }
 </script>
 
-<style lang='less' scoped>
-
+<style lang='scss' scoped>
+.cell a {
+  color: var(--color-info);
+}
 </style>

src/components/FormFields/AssetAccounts.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="accounts">
+  <div v-if="isUpdate(this)">
+    在资产详情中更新账号信息
+  </div>
+  <div v-else class="accounts">
     <el-table :data="accounts" style="width: 100%">
       <el-table-column prop="username" label="用户名" width="180" />
       <el-table-column prop="privileged" label="特权账号">
@@ -66,6 +69,12 @@ export default {
     value: {
       type: [Array],
       default: () => []
+    },
+    isUpdate: {
+      type: Function,
+      default: (vm) => {
+        return vm.$route.params.id
+      }
     }
   },
   data() {

src/components/FormFields/ProtocolSelector/index.vue

@@ -24,7 +24,7 @@
           icon="el-icon-minus"
           style="flex-shrink: 0;"
           size="mini"
-          :disabled="items.length === 1"
+          :disabled="cannotDisable(item)"
           @click="handleDelete(index)"
         />
         <el-button
@@ -32,8 +32,8 @@
           type="primary"
           icon="el-icon-plus"
           style="flex-shrink: 0;"
-          :disabled="remainProtocols.length === 0 || !item.port"
           size="mini"
+          :disabled="remainProtocols.length === 0 || !item.port"
           @click="handleAdd(index)"
         />
       </div>
@@ -102,11 +102,6 @@ export default {
   watch: {
     choices: {
       handler(value) {
-        if (!this.settingReadonly) {
-          this.value[0].primary = true
-          this.value[0].default = true
-          this.value[0].required = true
-        }
         this.setDefaultItems(value)
       }
     },
@@ -120,7 +115,8 @@ export default {
   },
   mounted() {
     this.setDefaultItems(this.choices)
-    console.log('CHoices: ', this.choices)
+    console.log('Choices: ', this.choices)
+    console.log('Value: ', this.value)
   },
   methods: {
     handleDelete(index) {
@@ -128,8 +124,8 @@ export default {
         return i !== index
       })
     },
-    canDelete(item) {
-      return this.item.primary || this.item.required
+    cannotDisable(item) {
+      return item.primary || item.required
     },
     handleAdd(index) {
       this.items.push({ ...this.remainProtocols[0] })
@@ -140,11 +136,14 @@ export default {
       item.port = selected.port
     },
     setDefaultItems(choices) {
-      let defaults = this.value
-      if (defaults.length === 0 && choices.length !== 0) {
-        defaults = choices
-      }
-      this.items = defaults
+      const defaults = choices.filter(item => item.required || item.primary || item.default)
+      console.log('defaults1: ', defaults)
+      console.log('this value: ', this.value)
+      const notInDefaults = this.value.filter(item => {
+        return !defaults.find(d => d.name === item.name)
+      })
+      console.log('Not defaults: ', notInDefaults)
+      this.items = [...defaults, ...notInDefaults]
     },
     onSettingClick(item) {
       this.settingItem = item

src/components/TableFormatters/index.js

@@ -14,6 +14,7 @@ import StatusFormatter from './StatusFormatter'
 import TagsFormatter from './TagsFormatter'
 import ObjectRelatedFormatter from './ObjectRelatedFormatter'
 import ChoicesDisplayFormatter from './ChoicesDisplayFormatter'
+import BooleanFormatter from './BooleanFormatter'
 
 export default {
   DetailFormatter,
@@ -31,7 +32,8 @@ export default {
   StatusFormatter,
   TagsFormatter,
   ObjectRelatedFormatter,
-  ChoicesDisplayFormatter
+  ChoicesDisplayFormatter,
+  BooleanFormatter
 }
 
 export {