feat: PAM Service

src/components/Dialog/Secret.vue

@@ -0,0 +1,96 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="700px"
+    @close="onClose"
+    @confirm="visible = false"
+  >
+    <el-alert type="warning" :closable="false">
+      {{ warningText }}
+      <div class="secret">
+        <div class="row">
+          <span class="col">ID:</span>
+          <span class="value">{{ keyInfo.id }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
+        </div>
+        <div class="row">
+          <span class="col">Secret:</span>
+          <span class="value">{{ keyInfo.secret }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
+        </div>
+      </div>
+    </el-alert>
+  </Dialog>
+</template>
+
+<script>
+import i18n from '@/i18n/i18n'
+import { copy } from '@/utils/common'
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  name: 'Secret',
+  components: {
+    Dialog
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => i18n.t('CreateAccessKey')
+    },
+    warningText: {
+      type: String,
+      default: () => i18n.t('ApiKeyWarning')
+    }
+  },
+  data() {
+    return {
+      keyInfo: { id: '', secret: '' },
+      visible: false
+    }
+  },
+  methods: {
+    show(data) {
+      this.keyInfo = data
+      this.visible = true
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    handleCopy(value) {
+      copy(value)
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+ .secret {
+  color: #2b2f3a;
+  margin-top: 20px;
+}
+
+.row {
+  margin-bottom: 10px;
+}
+
+.col {
+  width: 100px;
+  text-align: left;
+  display: inline-block;
+}
+
+.copy-icon {
+  margin-left: 5px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.value {
+  font-weight: 600;
+}
+</style>

src/components/Form/FormFields/UploadField.vue

@@ -8,7 +8,7 @@
     <div v-if="tip !== ''" class="help-block">{{ tip }}</div>
     <input v-model="value" hidden type="text" v-on="$listeners">
     <div>
-      <img :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs">
+      <img v-if="preview" :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs" alt="">
     </div>
   </div>
 </template>

src/components/Table/CardTable/SmallCard.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <CardTable
+      ref="table"
+      :columns="3"
+      :sub-component="subComponent"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script type="text/jsx">
+import CardTable from '@/components/Table/CardTable'
+import CardPanel from './components/CardPanel.vue'
+
+export default {
+  name: 'SmallCard',
+  components: {
+    CardTable
+  },
+  data() {
+    return {
+      subComponent: CardPanel
+    }
+  },
+  methods: {
+    reloadTable() {
+      this.$refs.table.reloadTable()
+    }
+  }
+}
+</script>

src/components/Table/CardTable/components/CardPanel.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="account-panel">
+    <el-row :gutter="20">
+      <el-col :span="21">
+        <div class="title">
+          <span>{{ object.name }}</span>
+        </div>
+      </el-col>
+      <el-col v-if="iActions.length !== 0" :span="3" @click.native="handleClick($event)">
+        <el-dropdown>
+          <el-link :underline="false" type="primary">
+            <i class="el-icon-more el-icon--right" style="color: var(--color-text-primary)" />
+          </el-link>
+          <el-dropdown-menu default="dropdown">
+            <el-dropdown-item
+              v-for="action in iActions"
+              :key="action.name"
+              :disabled="action.disabled"
+              @click.native="action.callback(object)"
+            >
+              <i v-if="action.icon" :class="action.icon" /> {{ action.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-row>
+    <el-divider />
+    <el-row :gutter="20" class="panel-content">
+      <el-col :span="6" class="panel-image">
+        <el-image :src="imageUrl" fit="contain" />
+      </el-col>
+      <el-col :span="18" class="panel-info">
+        <InfoPanel
+          v-for="(obj, index) in getInfos(object)"
+          :key="index"
+          :content="obj.content"
+          :title="obj.title"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import InfoPanel from './InfoPanel'
+
+export default {
+  name: 'CardPanel',
+  components: {
+    InfoPanel
+  },
+  props: {
+    tableConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    object: {
+      type: Object,
+      required: true
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    infos: {
+      type: Array,
+      default: () => []
+    },
+    getImage: {
+      type: Function,
+      default: (obj) => ''
+    },
+    getInfos: {
+      type: Function,
+      default: (obj) => []
+    },
+    handleUpdate: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      defaultActions: [
+        {
+          id: 'update',
+          name: this.$tc('Update'),
+          icon: 'el-icon-edit',
+          callback: this.handleUpdate,
+          disabled: this.isDisabled('change')
+        },
+        {
+          id: 'delete',
+          name: this.$tc('Delete'),
+          icon: 'el-icon-delete',
+          callback: this.handleDelete,
+          disabled: this.isDisabled('delete')
+        }
+      ]
+    }
+  },
+  computed: {
+    imageUrl() {
+      return this.getImage(this.object)
+    },
+    iActions() {
+      const mergedActions = new Map()
+      this.defaultActions.forEach(a => {
+        mergedActions.set(a.id, { ...a })
+      })
+      this.actions.forEach(a => {
+        mergedActions.set(a.id, { ...a })
+      })
+      return Array.from(mergedActions.values())
+    }
+  },
+  methods: {
+    isDisabled(action) {
+      const app = this.tableConfig.permissions?.app
+      const resource = this.tableConfig.permissions?.resource
+      return !this.$hasPerm(`${app}.${action}_${resource}`)
+    },
+    handleClick(event) {
+      event.stopPropagation()
+    },
+    handleDelete() {
+      const url = this.tableConfig.url
+      this.$confirm(this.$tc('DeleteConfirmMessage'), this.$tc('Delete'), {
+        confirmButtonText: this.$tc('Confirm'),
+        cancelButtonText: this.$tc('Cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$axios.delete(`${url}${this.object.id}/`).then(() => {
+          this.$message({
+            type: 'success',
+            message: this.$tc('DeleteSuccess')
+          })
+          this.$emit('refresh')
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.account-panel {
+  display: flex;
+  flex-direction: column;
+  //height: 100%;
+  cursor: pointer;
+
+  .title {
+    text-align: left;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-content {
+    display: flex;
+    height: 100px;
+    padding: 10px 0;
+
+    .panel-image {
+      margin: auto 5px;
+    }
+  }
+
+  .el-divider--horizontal {
+    margin: 5px 0;
+  }
+}
+</style>

src/views/assets/Cloud/Account/components/InfoPanel.vue → src/components/Table/CardTable/components/InfoPanel.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="panel-item">
-    <span class="item-label">{{ title }} </span>
-    <el-link :underline="false" class="item-value">
-      <span class="content">{{ content }}</span>
-    </el-link>
+    <div class="item-label">{{ title }}</div>
+    <div class="text-info" :title="content">{{ content }}</div>
   </div>
 </template>
 
@@ -38,14 +36,18 @@ export default {
 
 .panel-item {
   text-align: left;
-  padding: 5px 0;
+  padding: 3px 0;
   line-height: 20px;
-  @include textOverflow;
 
   .item-label {
     text-align: left;
-    display: inline-block;
-    width: 100px;
+  }
+  .item-label::after {
+    content: ':';
+    margin-left: 1px;
+  }
+  .text-info {
+    @include textOverflow;
   }
 }
 

src/components/Table/CardTable/index.vue

@@ -10,7 +10,7 @@
       <IBox v-if="totalData.length === 0">
         <el-empty :description="$t('NoData')" :image-size="200" class="no-data" style="padding: 20px" />
       </IBox>
-      <el-col v-for="(d, index) in totalData" :key="index" :lg="8" :md="12" :sm="24" style="min-width: 335px;">
+      <el-col v-for="(d, index) in totalData" :key="index" :lg="24 / columns" :md="12" :sm="24" style="min-width: 335px;">
         <el-card
           :body-style="{ 'text-align': 'center', 'padding': '15px' }"
           :class="{'is-disabled': isDisabled(d)}"
@@ -19,7 +19,14 @@
           @click.native="onView(d)"
         >
           <keep-alive>
-            <component :is="subComponent" v-if="subComponent" :object="d" @refresh="getList" />
+            <component
+              :is="subComponent"
+              v-if="subComponent"
+              :object="d"
+              :table-config="tableConfig"
+              v-bind="subComponentProps"
+              @refresh="getList"
+            />
             <slot v-else :index="index" :item="d">
               <span v-if="d.edition === 'enterprise'" class="enterprise">
                 {{ $t('Enterprise') }}
@@ -85,6 +92,10 @@ export default {
   },
   props: {
     // 定义 table 的配置
+    columns: {
+      type: Number,
+      default: 3
+    },
     tableConfig: {
       type: Object,
       default: () => ({})
@@ -100,6 +111,10 @@ export default {
     subComponent: {
       type: Object,
       default: () => null
+    },
+    subComponentProps: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {