feat: 增加上传密钥组件

src/components/AccountCreateUpdateForm/index.vue

@@ -9,7 +9,7 @@
 
 <script>
 import AutoDataForm from '@/components/AutoDataForm'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken, UploadSecret } from '@/components/FormFields'
 import Select2 from '@/components/FormFields/Select2'
 import AssetSelect from '@/components/AssetSelect'
 import { encryptPassword } from '@/utils/crypto'
@@ -132,10 +132,7 @@ export default {
         },
         ssh_key: {
           label: this.$t('assets.PrivateKey'),
-          el: {
+          component: UploadSecret,
-            type: 'textarea',
-            rows: 4
-          },
           hidden: (formValue) => formValue.secret_type !== 'ssh_key'
         },
         passphrase: {
@@ -145,19 +142,13 @@ export default {
         },
         token: {
           label: this.$t('assets.Token'),
-          el: {
+          component: UploadSecret,
-            type: 'textarea',
-            rows: 4
-          },
           hidden: (formValue) => formValue.secret_type !== 'token'
         },
         api_key: {
           id: 'api_key',
           label: this.$t('assets.AccessKey'),
-          el: {
+          component: UploadSecret,
-            type: 'textarea',
-            rows: 4
-          },
           hidden: (formValue) => formValue.secret_type !== 'api_key'
         },
         secret_type: {

src/components/FormFields/UploadSecret.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="">
+    <el-input
+      v-model="iValue"
+      type="textarea"
+      :rows="rows"
+      :placeholder="placeholder"
+    />
+    <el-upload
+      ref="upload"
+      class="upload-secret"
+      :action="''"
+      :accept="accept"
+      :auto-upload="false"
+      :limit="limit"
+      v-bind="$attrs"
+      :on-change="handleChange"
+      :on-remove="handleRemove"
+      :file-list="fileList"
+    >
+      <el-button size="mini" type="primary">
+        {{ btnText }}
+      </el-button>
+      <div v-if="tip" slot="tip" class="el-upload__tip">
+        {{ tip }}
+      </div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: () => ''
+    },
+    btnText: {
+      type: String,
+      default: function() {
+        return this.$t('common.SelectFile')
+      }
+    },
+    rows: {
+      type: Number,
+      default: () => 4
+    },
+    limit: {
+      type: Number,
+      default: () => 2
+    },
+    accept: {
+      type: String,
+      default: () => ''
+    },
+    placeholder: {
+      type: String,
+      default: () => ''
+    },
+    tip: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      fileName: '',
+      fileList: [],
+      iValue: this.value
+    }
+  },
+  watch: {
+    iValue(val) {
+      this.$emit('input', val)
+    }
+  },
+  methods: {
+    handleChange(file, fileList) {
+      const vm = this
+      const newFileList = fileList.slice(-1)
+      this.fileList = newFileList
+      const reader = new FileReader()
+      reader.onload = function(res) {
+        const result = res.target.result
+        vm.iValue = result
+        vm.$emit('input', vm.iValue)
+      }
+      reader.readAsText(file.raw)
+    },
+
+    handleRemove() {
+      this.iValue = ''
+      this.fileList = []
+      this.$emit('input', this.iValue)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-secret {
+  display: flex;
+  &>>> .el-list-enter-active,
+  &>>> .el-list-leave-active {
+    transition: none;
+  }
+  &>>> .el-list-enter,
+  &>>> .el-list-leave-active {
+    opacity: 0;
+  }
+  &>>> .el-upload-list {
+    height: 40px;
+  }
+}
+</style>

src/components/FormFields/index.js

@@ -9,6 +9,7 @@ import UploadField from './UploadField'
 import UpdateToken from './UpdateToken'
 import UserPassword from './UserPassword'
 import PasswordInput from './PasswordInput'
+import UploadSecret from './UploadSecret'
 import WeekCronSelect from './WeekCronSelect'
 import NestedObjectSelect2 from './NestedObjectSelect2'
 import DatetimeRangePicker from './DatetimeRangePicker'
@@ -25,6 +26,7 @@ export default {
   UploadField,
   UserPassword,
   PasswordInput,
+  UploadSecret,
   WeekCronSelect,
   NestedObjectSelect2,
   DatetimeRangePicker
@@ -42,6 +44,7 @@ export {
   UploadField,
   UserPassword,
   PasswordInput,
+  UploadSecret,
   WeekCronSelect,
   NestedObjectSelect2,
   DatetimeRangePicker